react-tabs#TabPanel JavaScript Examples

renderSettings() {
    if (this.deviceSelected.settings.customColor2 != null) {
      return <Tabs>
        <TabList>
          <Tab>Primary custom color</Tab>
          <Tab>Secondary custom color</Tab>
        </TabList>
        <TabPanel>
          <CustomColor deviceSelected={this.deviceSelected} />
        </TabPanel>
        <TabPanel>
          <CustomColor2 deviceSelected={this.deviceSelected} />
        </TabPanel>
      </Tabs>;
    }
    return <div style={{ paddingTop: '10px' }}>
      <CustomColor deviceSelected={this.deviceSelected} />
    </div>;

  }

Switcher = ({ items }) => {
  return (
    <Tabs>
      <TabList className={styles.tabList}>
        {items.map(({ title }, index) => {
          return (
            <Tab
              className={styles.tabListItem}
              key={index}
              style={{ flexBasis: `${100 / items.length}px` }}
            >
              <div className={styles.tabListIcon}>{index + 1}</div>
              <div className={styles.tabListTitle}>{title}</div>
            </Tab>
          );
        })}
      </TabList>

      {items.map(({ message }, index) => {
        return (
          <TabPanel key={index}>
            <div className={styles.tabContent}>{message}</div>
          </TabPanel>
        );
      })}
    </Tabs>
  );
}

function TabMenu({ content }) {
	const titles = [];
	const panels = [];

	content.map(item => {
		titles.push(item.title);
		panels.push(item.content);
	});

	return (
		<Wrapper>
			<Tabs>
				<TabList>
					{titles.map((item, i) => (
						<Tab key={`tab-${i}`}>{item}</Tab>
					))}
				</TabList>
				{panels.map((item, i) => (
					<TabPanel key={`content-${i}`}>{item}</TabPanel>
				))}
			</Tabs>
		</Wrapper>
	);
}

SelectDeckModal = ({ onClose, onDeckSelected, onChooseForMe }) => {
    const { t } = useTranslation();

    return (
        <>
            <Modal show={true} onHide={onClose}>
                <Modal.Header closeButton>
                    <Modal.Title>{t('Select Deck')}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div>
                        <Tabs>
                            <TabList>
                                <Tab>My Decks</Tab>
                                <Tab>Pre-cons</Tab>
                                <Tab>Building Basics</Tab>
                                <Tab style={{ backgroundColor: 'skyblue', color: '#333' }}>
                                    <img
                                        src={igcircle}
                                        alt='Adventuring Party'
                                        height='22'
                                        width='22'
                                    />{' '}Adventuring Party
                                </Tab>
                            </TabList>

                            <TabPanel>
                                <Button onClick={() => onChooseForMe(0)}>
                                    Choose for me
                                </Button>
                                <DeckList onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(1)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={1} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(3)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={3} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                            <TabPanel>
                                <Button onClick={() => onChooseForMe(2)}>
                                    Choose for me
                                </Button>
                                <DeckList standaloneDecks={2} onDeckSelected={onDeckSelected} />
                            </TabPanel>
                        </Tabs>
                    </div>
                </Modal.Body>
            </Modal>
        </>
    );
}

Switcher = ({ items }) => {
  return (
    <Tabs>
      <TabList className={styles.tabList}>
        {items.map((item, index) => {
          return (
            <Tab className={styles.tabListItem} key={index}>
              <div className={styles.tabListTitle}>{item.title}</div>
            </Tab>
          );
        })}
      </TabList>

      {items.map(({ items }, index) => {
        return (
          <TabPanel key={index}>
            <ul className={styles.tabContentList}>
              {items.map(({ title, image }, index) => {
                const inlineStyles = { animationDelay: `0.${index}s` };
                return (
                  <li
                    key={index}
                    className={styles.tabContentItem}
                    style={inlineStyles}
                  >
                    <div className={styles.tabContentIcon}>
                      <img
                        src={image.publicURL}
                        alt="technologies item icon"
                        loading="lazy"
                      />
                    </div>
                    <div className={styles.tabContentTitle}>{title}</div>
                  </li>
                );
              })}
            </ul>
          </TabPanel>
        );
      })}
    </Tabs>
  );
}

TabPanels = ({ item }) => {

	const moduleItem = item;
	item = item.customFields;


	const tabNav = item.tabPanels.map(function (tab) {

		let key = `${moduleItem.contentID}-${tab.contentID}`;
		tab = tab.customFields;

		return <Tab key={key}>
			{tab.tabIcon &&
				<div className="tab-icon"><img src={tab.tabIcon.href} alt="" /></div>
			}
			<div className="tab-title">{tab.title}</div>
		</Tab>
	})

	//loop all the tabs and render them
	const tabs = item.tabPanels.map(function (tab, index) {

		let key = `${moduleItem.contentID}-${tab.contentID}-panel`;
		tab = tab.customFields;

		return <TabPanel key={key}>
			{tab.image && <div className="img"><img src={tab.image.url} alt={tab.image.label} /></div>}
			<div className="content">
				<h3 className="feature-title">{tab.description}</h3>

				<div dangerouslySetInnerHTML={renderHTML(tab.textblob)}></div>

				{tab.primaryButton && tab.primaryButton.href &&
				<a href={tab.primaryButton.href} target={tab.primaryButton.target} className="btn">{tab.primaryButton.text}</a>
				}
			</div>
		</TabPanel>
	})

	return (

		<section id="sec-3" className="features p-w">

			<h2 className="title-component" dangerouslySetInnerHTML={renderHTML(item.title)}></h2>

			<span dangerouslySetInnerHTML={renderHTML(item.subTitle)}></span>

			<Tabs forceRenderTabPanel={true}>
				<TabList>
					{tabNav}
				</TabList>
				<div className="container-my">
					<div className="features-toggle-tab-items">
						{tabs}
					</div>
				</div>
			</Tabs>
		</section>


	);
}

scope = { Tabs, Tab, TabList, TabPanel }

Shop = ({ data, location }) => {
    const [sizesFilter, setSizesFilter] = useState([]);
    const [varietiesFilter, setVarietiesFilter] = useState([]);
    const filteredProducts = productSelector(data.products.edges, { sizesFilter, varietiesFilter });
    const sizes = data.sizes.group.map(({ size }) => size);
    const varieties = data.varieties.group.map(({ variety }) => variety);

    const handleUpdateSizesFilters = (e) => {
        if (e.target.checked) {
            setSizesFilter([...sizesFilter, e.target.id])
        } else {
            setSizesFilter(sizesFilter.filter(size => e.target.id !== size))
        }
    }

    const handleUpdateVarietiesFilters = (e) => {
        if (e.target.checked) {
            setVarietiesFilter([...varietiesFilter, e.target.id])
        } else {
            setVarietiesFilter(varietiesFilter.filter(variety => e.target.id !== variety))
        }
    }

    return (
        <Layout location={location}>
            <SEO title="Shop" />
            <div className="content-container">
                <h2 className="heading-first">Shop</h2>
            </div>
            <div style={{ marginBottom: `2rem`, backgroundColor: `#F8F8F7`, padding: `1rem` }}>
                <h3 className="heading-third">Filter by</h3>
                <Tabs>
                    <TabList>
                        <Tab>Variety</Tab>
                        <Tab>Size</Tab>
                    </TabList>
                    <TabPanel>
                        {varieties.map(variety => (
                            <Checkbox
                                key={variety}
                                isSelected={varietiesFilter.includes(variety)}
                                onChangeHandler={handleUpdateVarietiesFilters}
                                label={variety} />
                        ))}
                    </TabPanel>
                    <TabPanel>
                        {sizes.map(size => (
                            <Checkbox
                                key={size}
                                isSelected={sizesFilter.includes(size)}
                                onChangeHandler={handleUpdateSizesFilters}
                                label={size} />
                        ))}
                    </TabPanel>
                </Tabs>
            </div>
            <div className="content-container">
                <div className={styles.shop__productGrid}>
                    {filteredProducts.map(({ node: product }) => {
                        return (
                            <ProductItem
                                key={product.id}
                                product={{
                                    slug: product.fields.slug,
                                    fluid: product.frontmatter.imageAbs.childImageSharp.fluid,
                                    title: product.frontmatter.title,
                                    minPrice: _minPrice(product.frontmatter.priceBySize)
                                }}
                            />
                        )
                    })}
                </div>
            </div>
        </Layout>
    )
}

render() {
    return (
      <div className={`card node-info-card ${this.state.hidden ? 'hidden' : ''} pt-0 ${this.state.floatRight ? "right" : ''}`}>
        <button type="button" className="close mt-1 mr-2 mb-0" aria-label="Close" onClick={this.props.hideDetailCard}>
          <span aria-hidden="true">&times;</span>
        </button>
        <div className="card-body mt-0 pt-0">
          <h4 className="card-title">{this.state.nodeData.properties.name}</h4>
          <h5 className="card-subtitle">{this.state.nodeData.kind.replace('_', ' ')}</h5>
          { this.state.rca === false ?
            <Tabs>
              <TabList>
                <Tab><i class="fa fa-info-circle" aria-hidden="true"></i>Details</Tab>
                <Tab><i class="fa fa-medkit" aria-hidden="true"></i>Analysis</Tab>
              </TabList>
              <TabPanel>
                <div className="card-text node-info-text">
                  <ReactJson src={this.state.displayProperties} name={null} collapsed={2} displayDataTypes={false}/>
                </div>
              </TabPanel>
              <TabPanel className="analysis">
                { this.state.nodeData.kind === 'alert' ?
                <span>
                <p> Perform Root Cause Analysis </p>
                <Link to={`/rca?source=${this.state.nodeData.id}&time_point=${this.state.timestamp}`} >
                  <Button className="rca" size="sm" variant="outline-warning">
                    Analyze
                  </Button>
                </Link>
                </span>
                : <p>Root Cause Analysis not available for {this.state.nodeData.kind} objects</p> }
              </TabPanel>
            </Tabs>
            :
            <div className="card-text node-info-text">
              <ReactJson src={this.state.displayProperties} name={null} collapsed={2} displayDataTypes={false}/>
            </div> 
          }
        </div>
      </div>
    );
  }

render() {

    const customStyles = {
      option: (provided, state) => ({
        ...provided,
        borderBottom: '1px solid grey',
        color: state.isSelected ? '#47e10c' : 'grey',
        padding: '5px 10px',
        border: '1px solid #47e10c',
        borderTop: 'none',
        backgroundColor: state.isSelected ? 'green' : '#000',
        ':last-child': {
          borderBottomLeftRadius: '10px',
          borderBottomRightRadius: '10px',
        },
        ':hover': {
          backgroundColor: state.isSelected ? 'green' : '#002b17',
        }
      }),
      control: (provided, state) => ({
        ...provided,
        backgroundColor: 'black',
        border: '1px solid #47e10c',
        borderRadius: '15px',
        borderBottomLeftRadius: state.menuIsOpen ? '0' : '15px',
        borderBottomRightRadius: state.menuIsOpen ? '0' : '15px',
        color: '#47e10c',
        minHeight: 0,
        boxShadow: 'none',
        transition: 'none',
        ":hover": {
          borderColor: "inherit",
        },
      }),
      menu: (provided, state) => ({
        ...provided,
        backgroundColor: 'transparent',
        margin: 0,
        zIndex: 100,
        padding: 0,
      }),
      menuList: (provided, state) => ({
        ...provided,
        backgroundColor: 'transparent',
        margin: 0,
        padding: 0,
      }),
      dropdownIndicator: (provided, state) => ({
        ...provided,
        color: '#47e10c',
        padding: '0px 8px'
      }),
      indicatorSeparator: (provided, state) => ({
        ...provided,
        backgroundColor: '#47e10c',
      }),
      singleValue: (provided, state) => ({
        ...provided,
        color: '#47e10c',
      }),
      input: (provided, state) => ({
        ...provided,
        color: '#47e10c',
      }),
    };

    return (
      <Tabs>
        <TabList>
          <Tab>States</Tab>
          <Tab>Settings</Tab>
          <Tab>Current devices state (debug)</Tab>
        </TabList>
        <TabPanel>
          <div>
            <div>
              <p>
                State manager allows you to create unique states for all your devices.
                <br />Either choose an existing state to activate or create a new one by:
                </p>
              <ol>
                <li>Set each device in the state you want it to be with the help of the menu</li>
                <li>Focus the dropdown and give your state a name, like "Party" or "Work".</li>
                <li>Press enter or click on the "Create" dropdown item</li>
              </ol>
              <p>
                States defined here can be previewed, activated and used in the "Settings" tab for system / application events.
              </p>
            </div>
            <div className={'control'}>
              <Creatable isLoading={this.state.isLoading} isClearable={true} value={this.state.selection} options={this.state.options} onCreateOption={(item) => this.handleCreate(item)} onChange={(item, action) => this.selectionChange(item, action)} styles={customStyles} />
            </div>
            <div className={'control'}>
              <button disabled={this.state.selection == null} onClick={() => this.handleClick()}>{this.state.selection == null ? 'Activate - Please select a state first' : 'Activate'}</button>
            </div>
            <div className={'state-devices'}>
              {this.renderState()}
            </div>
          </div>
        </TabPanel>
        <TabPanel>
          <div>
            <p>Select a state to be activate on application and system events</p>
          </div>
          <div className={'state-selectors'}>

            <p>This state will be activated whenever Razer macOS starts or refreshes its devices.</p>
            <div className={'state-selector'}>
              <div>On application start</div>
              <div><Select value={this.state.selectionStart} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeStart(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system goes to sleep ('suspend' event).</p>
            <div className={'state-selector'}>
              <div>On system idle/sleep</div>
              <div><Select value={this.state.selectionSuspend} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeSuspend(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system wakes up ('resume' event).</p>
            <div className={'state-selector'}>
              <div>On system wake up</div>
              <div><Select value={this.state.selectionResume} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeResume(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is plugged in ('on-ac' event).</p>
            <div className={'state-selector'}>
              <div>On system plugged in</div>
              <div><Select value={this.state.selectionAc} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeAc(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is on battery ('on-battery' event).</p>
            <div className={'state-selector'}>
              <div>On system on battery</div>
              <div><Select value={this.state.selectionBatt} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeBattery(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is about to shutdown ('shutdown' event).</p>
            <div className={'state-selector'}>
              <div>On system shutdown</div>
              <div><Select value={this.state.selectionShutdown} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeShutdown(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is about to lock the screen ('lock-screen' event).</p>
            <div className={'state-selector'}>
              <div>On system lock screen</div>
              <div><Select value={this.state.selectionLockscreen} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeLockscreen(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the system is about to unlock the screen ('unlock-screen' event).</p>
            <div className={'state-selector'}>
              <div>On system unlock screen</div>
              <div><Select value={this.state.selectionUnlockscreen} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeUnlockscreen(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the user on the system is about to become active ('user-did-become-active' event).</p>
            <div className={'state-selector'}>
              <div>On system user become active</div>
              <div><Select value={this.state.selectionUserDidBecomeActive} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeUserDidBecomeActive(item)} styles={customStyles} /></div>
            </div>

            <p>This state will be activated when the user on the system is about to resign active ('user-did-resign-active' event).</p>
            <div className={'state-selector'}>
              <div>On system user resign active</div>
              <div><Select value={this.state.selectionUserDidResignActive} options={this.state.optionsWithNull} onChange={(item) => this.selectionChangeUserDidResignActive(item)} styles={customStyles} /></div>
            </div>

          </div>
        </TabPanel>
        <TabPanel>
          <div className={'state-devices'}>
            {this.stateManager.devices.map(device => this.getDeviceStateFor(device, device.state))}
          </div>
        </TabPanel>
      </Tabs>
    );
  }

Switcher = ({ items, location, page }) => {
  const [numberOfRendered, setNumberOfRendered] = useState(
    INITIAL_AMOUNT_OF_POSTS
  );
  const defaultIndex = getDefaultTabIndex(location.pathname);
  const itemsAgency = [];
  const itemsCaseStudies = [];
  const itemsNews = [];
  const allCategories = [
    { title: "All", link: "/blog", items },
    { title: "#Agency", link: "/blog/agency", items: itemsAgency },
    { title: "#Case Studies", link: "/blog/case-studies", items: itemsCaseStudies },
    { title: "#News", link: "/blog/news", items: itemsNews }
  ];

  items.forEach(item => {
    const categories = item.categories.map(item => item.slug);

    if (categories.indexOf("agency") !== -1) {
      itemsAgency.push(item);
    }

    if (categories.indexOf("case-studies") !== -1) {
      itemsCaseStudies.push(item);
    }

    if (categories.indexOf("news") !== -1) {
      itemsNews.push(item);
    }
  });
  useEffect(() => {
    if (defaultIndex !== 0) {
      const value = numberOfRendered + LOAD_MORE_POSTS_AMOUNT * (page - 1);
      setNumberOfRendered(value > items.length ? items.length : value);
    }
  }, [page]);
  const handleClick = () => {
    const value = numberOfRendered + LOAD_MORE_POSTS_AMOUNT;
    setNumberOfRendered(value > items.length ? items.length : value);
  };
  return (
    <div className={styles.container}>
      <Tabs defaultIndex={defaultIndex} className={styles.tabsContainer}>
        <TabList className={styles.tabList}>
          {allCategories.map(({ title, link }) => {
            return (
              <Link to={link} className={styles.link} key={title}>
                <Tab key={title} className={styles.tabItem}>
                  <div>{title}</div>
                </Tab>
              </Link>
            );
          })}
        </TabList>

        {allCategories.map(({ title, items }) => {
          const newItems = items.slice(0, numberOfRendered);
          return (
            <TabPanel key={title} className={styles.tabsContentContainer}>
              <ul className={styles.tabContentList}>
                {newItems.map(item => {
                  const tabItemClass = classNames(styles.tabContentItem);
                  return (
                    <li
                      data-list-item="articles"
                      key={item.id}
                      className={tabItemClass}
                    >
                      <PostThumbnail {...item} />
                    </li>
                  );
                })}
              </ul>
              {numberOfRendered >= items.length ? null : (
                <button className={styles.button} onClick={handleClick}>
                  Load more
                </button>
              )}
            </TabPanel>
          );
        })}
      </Tabs>
    </div>
  );
}

ProductPage = ({ data }) => {
    const product = data.shopifyProduct
    console.log(product)

    //find posts corresponding to current product
    const productBlogTagMap = {
      "ecommerce-platform-strategy-plan" : "digital commerce",
      "conversion-rate-optimization" : "conversion rate optimization",
      "shopify-help" : "Shopify",
      "gatsbyjs" : "gatsby",
      "paid-search-help" : "search"
    };
    const searchTag = productBlogTagMap[product.handle];
    console.log("******* searchTag = "+searchTag)
    console.log("******* product.handle = "+product.handle)
    const filterdPostEdges = [];
    const filterdProjectEdges = [];
    if(searchTag){
      //Filtering Posts as per the tag
      const postEdges = data.allPosts.edges;      
      postEdges.map((edge)=>{
        if(edge.node.frontmatter.tags) {
          edge.node.frontmatter.tags.map((tag)=>{
            if(tag && tag.toLowerCase().includes(searchTag.toLowerCase()))
              {
                filterdPostEdges.push(edge.node)
                return;
              }
          });        
        }
      });
      //console.log(filterdPostEdges)
      //Filtering Projects as per the tag
      const projectEdges = data.allProjects.edges;      
      projectEdges.map((edge)=>{
        if(edge.node.frontmatter.tags) {
          edge.node.frontmatter.tags.map((tag)=>{
            if(tag && tag.toLowerCase().includes(searchTag.toLowerCase()))
              {
                filterdProjectEdges.push(edge.node)
                return;
              }
          });        
        }
      });
      console.log(filterdProjectEdges)
    }

    const thisEdge = data.allServices.edges.find(edge => edge.node.id === product.id);
  
    const solutionEdge = data.allSolutions.edges.find(edge => edge.node.fileAbsolutePath.indexOf(product.handle)>=0)
    let solutionMetaTitle = "";
    let solutionMetaDescription = "";
    let solutionContent = null;
    if(solutionEdge){
      solutionMetaTitle = solutionEdge.node.frontmatter.meta_title;
      solutionMetaDescription = solutionEdge.node.frontmatter.meta_description;
      solutionContent = solutionEdge.node.html;
    }
    //console.log("**** solutionEdge = ",solutionEdge)

    return (
        <Layout title={product.title || false} description={solutionMetaDescription || product.description || false} meta={{title: solutionMetaTitle}}>
            <article
                className="SingleService section light"
                itemScope
                itemType="http://schema.org/BlogPosting"
            >
                <div className="container skinny">
                    <Link className="SingleService--BackButton" to="/solutions/">
                        <ChevronLeft /> BACK
                    </Link>
                    <div className="SingleService--Content relative">

                        <ProductGalleryThumbnails productimages={product.images} />

                        {product.title && (
                            <h1 className="SingleService--Title" itemProp="title">
                                {product.title}
                            </h1>
                        )}

                        <div className="SingleService--InnerContent">
                            <ProductForm product={product} />
                            <Tabs>
                              <TabList>
                                <Tab>Description</Tab>
                                {solutionContent &&
                                  <Tab>Guide</Tab>
                                }
                                <Tab>Blog Posts</Tab>
                                <Tab>Projects</Tab>
                              </TabList>
                              <TabPanel>
                                <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }} />
                              </TabPanel>
                              {solutionContent &&
                                <TabPanel>
                                  <div dangerouslySetInnerHTML={{__html:solutionContent}} />                                  
                                </TabPanel>
                              }
                              <TabPanel>
                                {!!filterdPostEdges.length && (
                                  <div className="ProductPostSection--Grid" style={{gridGap: "1rem"}}>
                                    {filterdPostEdges.map((post, index) => (
                                      <PostCard key={index}
                                        featuredImage={`../${post.frontmatter.featuredImage}`}
                                        localImage={post.frontmatter.localImage}
                                        title={post.frontmatter.title}
                                        excerpt={post.excerpt}
                                        date={post.frontmatter.date}
                                        slug={post.fields.slug}
                                      />
                                    ))}
                                  </div>
                                )}
                              </TabPanel>
                              <TabPanel>
                                {!!filterdProjectEdges.length && (
                                  <div className="ProductPostSection--Grid" style={{gridGap: "1rem"}}>
                                    {filterdProjectEdges.map((post, index) => (
                                      <PostCard key={index}
                                        featuredImage={`../${post.frontmatter.featuredImage}`}
                                        localImage={post.frontmatter.localImage}
                                        title={post.frontmatter.title}
                                        excerpt={post.frontmatter.excerpt}
                                        date={post.frontmatter.date}
                                        slug={post.fields.slug}
                                      />
                                    ))}
                                  </div>
                                )}
                              </TabPanel>
                            </Tabs>
                        </div>

                        <div className="SingleService--Pagination">
                            {thisEdge && thisEdge.previous && thisEdge.previous.handle && (
                                <Link
                                    className="SingleService--Pagination--Link prev"
                                    to={`/solution/${thisEdge.previous.handle}`}
                                >
                                    Previous Service
                                </Link>
                            )}
                            {thisEdge && thisEdge.next && thisEdge.next.handle && (
                                <Link
                                    className="SingleService--Pagination--Link next"
                                    to={`/solution/${thisEdge.next.handle}`}
                                >
                                    Next Service
                                </Link>
                            )}
                        </div>
                    </div>
                </div>
            </article>
        </Layout >
    )
}

SingleItem = ({ data, pageContext, location }) => {
  const { next, prev } = pageContext;
  let {
    AlexaURL,
    InstaFollowers,
    InstaFollowing,
    GlobalRank,
    LocalRank,
    TOS,
    ProfileImage,
    emprezzoID,
    UserName,
    category,
    tags,
    FBLikes,
    PinFollowers,
    PinFollowing,
    TTFollowers,
    TTFollowing,
    TTLikes,
    TwitterFollowers,
    TwitterFollowing,
    YTSubs,
    name,
    about,
    signup_promos,
    AmazonPay,
    ApplePay,
    ShopifyPay,
    PaypalShopID,
  } = data.mysqlMainView;
  if (AlexaURL.slice(-1) != '/') AlexaURL += "/";

  const clearbitLogoURL = getClearbitLogoURL(AlexaURL);

  const allMysqlMainViewEdges = data.allMysqlMainView.edges;
  const rowallMysqlCrunchBaseViewEdges = data.allMysqlCrunchBaseView ? data.allMysqlCrunchBaseView.edges : [];
  const rowallMysqlPayNShipEdges = data.allMysqlPayNShip ? data.allMysqlPayNShip.edges : [];
  const rowSocialIDViewEdges = data.allMysqlSocialIdView.edges;
  const filteredSocialIDView = _.filter(rowSocialIDViewEdges, ({ node }) => node.Instagram == UserName);
  const { Facebook, Instagram, Pinterest, TikTok, Twitter, URL, YouTube } = filteredSocialIDView.length > 0 ? filteredSocialIDView[0].node : [];

  //Creating Social IDs Data to pass to header for displaying
  let socialDetails = {
    InstagramLink: Instagram ? 'https://www.instagram.com/' + Instagram : null,
    FacebookLink: Facebook ? 'https://www.facebook.com/' + Facebook : null,
    PinterestLink: Pinterest ? 'https://www.pinterest.com/' + Pinterest : null,
    TikTokLink: TikTok ? 'https://www.tiktok.com/' + TikTok : null,
    TwitterLink: Twitter ? 'https://www.twitter.com/' + Twitter : null,
    YouTubeLink: YouTube ? 'https://www.youtube.com/c/' + YouTube : null,
  };

  const maxVisibleItems = 10;
  const [visibleItems, setVisibleItems] = React.useState(maxVisibleItems);
  const [showMore, setShowMore] = React.useState(true);
  const increaseLimit = () => {
    setVisibleItems(visibleItems + maxVisibleItems);
  }

  const [sortBy, setSortBy] = React.useState("UpdateDate");
  const [sortOrder, setSortOrder] = React.useState("DESC");
  const changeSortBy = (e) => { setSortBy(e.target.value) }
  const changeSortOrder = (e) => { setSortOrder((sortOrder == "DESC") ? "ASC" : "DESC") }

  const isMobile = useMediaQuery({ query: '(max-width: 600px)' });
  //console.log("****** isMobile = " + isMobile)

  const removeTimeFromDate = (datawithtime) => {
    return _.map(datawithtime, el => {
      let datetime = _.split(el.trim(), ' ');
      return datetime && datetime.length > 0 ? datetime[0] : el;
    });
  }

  //converting comma seperated tags to tags map
  const tagsList = tags ? tags.split(',') : [];

  //Extracting Posts from MySQL Data
  const maxPosts = 3;
  const rowDataViewEdges = data.allMysqlDataView.edges;
  //filtering top 3 for current instagram id
  const filteredDataView = _.filter(rowDataViewEdges, ({ node }) => node.AlexaURL == AlexaURL || node.AlexaURL == AlexaURL.substring(0, AlexaURL.length - 1));
  const listPostEdges = _.slice(filteredDataView, 0, maxPosts);
  let firstRowDataView = listPostEdges && listPostEdges.length ? listPostEdges[0] : [];
  //adding profileimage to firstrow
  var crunchBaseData = _.filter(rowallMysqlCrunchBaseViewEdges, ({ node }) => node.URL == AlexaURL || node.URL == AlexaURL.substring(0, AlexaURL.length - 1))
  var crunchBaseRow = crunchBaseData.length > 0 ? crunchBaseData[0] : [];
  //adding PayNShip data to firstrow
  var payNShipData = _.filter(rowallMysqlPayNShipEdges, ({ node }) => node.URL == AlexaURL || node.URL == AlexaURL.substring(0, AlexaURL.length - 1))
  var payNShipRow = payNShipData.length > 0 ? payNShipData[0] : [];
  firstRowDataView = {
    node: {
      ...firstRowDataView.node,
      ...crunchBaseRow.node,
      ...payNShipRow.node,
    }
  }

  //Now filtering instagram posts if the image or caption is not present
  const listInstaPostEdges = _.filter(listPostEdges, ({ node }) => node.PhotoLink);

  //Creating a new dataset with original nodes and required columns from DataView
  let combinedMainDataEdges = [];
  allMysqlMainViewEdges.map((edge) => {
    let newNode = {
      name: edge.node.name,
      slug: edge.node.emprezzoID,
      ...edge.node
    }
    const inputID = edge.node.AlexaURL;
    var filteredDataViewEdge = _.filter(rowDataViewEdges, ({ node }) => (node.AlexaURL == inputID))
    if (filteredDataViewEdge.length > 0) {
      newNode = {
        ...newNode,
        ...filteredDataViewEdge[0].node
      }
    }
    combinedMainDataEdges.push(newNode);
  })
  const relatedShops = getRelatedShops(data.mysqlMainView, combinedMainDataEdges);
  const combinedRelatedShops = [];
  relatedShops.map(({ shop, points }) => {
    //filter for profileimage
    var crunchBaseData = _.filter(rowallMysqlCrunchBaseViewEdges, ({ node }) => node.URL == AlexaURL)
    var crunchBaseRow = crunchBaseData.length > 0 ? crunchBaseData[0] : [];
    let newNode = {
      points,
      shop: {
        ...shop,
        ...crunchBaseRow.node,
      }
    }
    combinedRelatedShops.push(newNode);
  })

  //Extracting Products from MySQL Data
  const maxProducts = 10;
  const rowShopifyViewEdges = data.allMysqlShopifyView.edges;
  //filtering top 3 for current AlexaURL
  const filteredProductView = _.filter(rowShopifyViewEdges, ({ node }) =>
    node.AlexaURL == AlexaURL &&
    node.Price > 5 &&
    node.Title.toLowerCase().indexOf('gift') < 0 &&
    node.Title.toLowerCase().indexOf('test') < 0 &&
    node.Title.toLowerCase().indexOf('shipping') < 0
  );
  const listProductEdges = _.slice(filteredProductView, 0, maxProducts);
  //console.log("*****++listProductEdges+++********")
  //console.log(listProductEdges)

  const rowallMysqlShopifyProductsAllEdges = data.allMysqlShopifyProductsAll ? data.allMysqlShopifyProductsAll.edges : [];

  //Extracting bestseller products
  const filteredShopifyBestSellers = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Position != null && node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => node.Position);
  const listShopifyBestSellersEdges = _.slice(filteredShopifyBestSellers, 0, maxProducts);

  //Extracting classic products
  let filteredShopifyClassicProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => node.PublishedDate);
  //Now applying sorting
  if (sortBy != "UpdateDate") {
    filteredShopifyClassicProducts = _.sortBy(filteredShopifyClassicProducts, ({ node }) => sortOrder != "DESC" ? node[sortBy] : -node[sortBy])
  } else {
    filteredShopifyClassicProducts = _.sortBy(filteredShopifyClassicProducts, ({ node }) => sortOrder != "DESC" ? new Date(node[sortBy]) : -(new Date(node[sortBy])))
  }
  //Now limiting the items as per limit
  const visibleShopifyClassicProductsEdges = _.slice(filteredShopifyClassicProducts, 0, visibleItems);
  if (showMore && visibleShopifyClassicProductsEdges.length >= filteredShopifyClassicProducts.length) setShowMore(false);
  //Now checking if 'Position' and 'DiscountPct' data is present in the list, if yes then only show 'Position' and 'DiscountPct' in the sorting options
  const isPositionPresent = _.filter(visibleShopifyClassicProductsEdges, ({ node }) => node.Position != null).length > 0;

  //Extracting new products
  const filteredShopifyNewProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => -node.PublishedDate);
  const listShopifyNewProductsEdges = _.slice(filteredShopifyNewProducts, 0, maxProducts);

  //Extracting sale products
  const filteredShopifySaleProducts = _.sortBy(_.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.DiscountPct > 0.10 && node.DiscountPct < 1 && node.Title.toLowerCase().indexOf("gift card") < 0 && node.Title.toLowerCase().indexOf("shipping") < 0 && node.Title.toLowerCase().indexOf("insurance") < 0), ({ node }) => -node.DiscountPct);
  const listShopifySaleProducts = _.slice(filteredShopifySaleProducts, 0, maxProducts);

  //Extracting gift cards
  const filteredShopifyGiftCards = _.filter(rowallMysqlShopifyProductsAllEdges, ({ node }) => node.Title.toLowerCase().indexOf("gift card") >= 0);
  const listShopifyGiftCards = _.slice(filteredShopifyGiftCards, 0, maxProducts);

  //Extracting emails
  const maxEmails = 3;
  const rowallMysqlEmailsEdges = data.allMysqlEmails ? data.allMysqlEmails.edges : [];
  const filteredEmails = _.filter(rowallMysqlEmailsEdges, ({ node }) => AlexaURL.toLowerCase().indexOf(node.domain.toLowerCase()) >= 0);
  const listEmails = _.slice(filteredEmails, 0, maxEmails);
  //console.log("***** listEmails", AlexaURL.toLowerCase(), listEmails)

  //Generating the data for chart
  let chartRankData = null;
  let chartTOSData = null;
  let globalRank_Dates = _.split(data.mysqlMainView.GlobalRank_Dates, ',') || [];
  let globalRank_Dates_NoTime = removeTimeFromDate(globalRank_Dates)

  //Rank data
  if (data.mysqlMainView.GlobalRank_List) {
    chartRankData = {
      labels: globalRank_Dates_NoTime,
      datasets: [
        {
          name: 'alexa global rank',
          type: 'line',
          values: _.split(data.mysqlMainView.GlobalRank_List, ','),
        },
      ],
      yMarkers: [
        {
          label: 'Low rank is better',
          value: '01',
        },
      ],

    };
  }
  //TOS data
  if (data.mysqlMainView.TOS_List) {
    chartTOSData = {
      labels: globalRank_Dates_NoTime,
      datasets: [
        {
          name: 'Time on site',
          type: 'line',
          values: _.split(data.mysqlMainView.TOS_List, ','),
        },
      ],
    };
  }

  //Social chart data
  const chartSocialFollowerLabels = [];
  const chartSocialFollowerValues = [];
  if (InstaFollowers && InstaFollowers != 0) {
    chartSocialFollowerLabels.push('Instagram');
    chartSocialFollowerValues.push(InstaFollowers);
  }
  if (FBLikes && FBLikes != 0) {
    chartSocialFollowerLabels.push('Facebook');
    chartSocialFollowerValues.push(FBLikes);
  }
  if (TwitterFollowers && TwitterFollowers != 0) {
    chartSocialFollowerLabels.push('Twitter');
    chartSocialFollowerValues.push(TwitterFollowers);
  }
  if (YTSubs && YTSubs != 0) {
    chartSocialFollowerLabels.push('Youtube');
    chartSocialFollowerValues.push(YTSubs);
  }
  if (PinFollowers && PinFollowers != 0) {
    chartSocialFollowerLabels.push('Pinterest');
    chartSocialFollowerValues.push(PinFollowers);
  }
  if (TTFollowers && TTFollowers != 0) {
    chartSocialFollowerLabels.push('TikTok');
    chartSocialFollowerValues.push(TTFollowers);
  }

  const chartSocialFollowingValues = [];
  if (InstaFollowing && InstaFollowing != 0) {
    chartSocialFollowingValues.push(InstaFollowing);
  }
  if (TwitterFollowing && TwitterFollowing != 0) {
    chartSocialFollowingValues.push(TwitterFollowing);
  }
  if (PinFollowing && PinFollowing != 0) {
    chartSocialFollowingValues.push(PinFollowing);
  }
  if (TTFollowing && TTFollowing != 0) {
    chartSocialFollowingValues.push(TTFollowing);
  }

  const chartSocialData = {
    labels: chartSocialFollowerLabels,
    datasets: [
      {
        name: 'followers',
        values: chartSocialFollowerValues,
      },

    ],
  };

  //Extracting social history
  const rowSocialHistoryEdges = data.allMysqlSocialHistory.edges;
  //filtering top 3 for current AlexaURL
  const filteredSocialHistory = _.filter(
    rowSocialHistoryEdges,
    ({ node }) => node.Instagram == UserName
  );

  let facebookChartData = null;
  let instagramChartData = null;
  let pinterestChartData = null;
  let tiktokChartData = null;
  let twitterChartData = null;
  let youtubeChartData = null;
  if (filteredSocialHistory && filteredSocialHistory.length > 0) {
    if (filteredSocialHistory[0].node.FacebookLikesList) {
      facebookChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.FacebookCreateDates, ',')),
        datasets: [
          {
            name: 'Facebook',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.FacebookLikesList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.InstagramFollowersList) {
      instagramChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.InstagramCreateDates, ',')),
        datasets: [
          {
            name: 'Instagram',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.InstagramFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.PinterestFollowersList) {
      pinterestChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.PinterestCreateDates, ',')),
        datasets: [
          {
            name: 'Pinterest',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.PinterestFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if ((filteredSocialHistory[0].node.TiktokFollowersList) && (filteredSocialHistory[0].node.TiktokFollowersList) != '#') {
      tiktokChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.TiktokCreateDates, ',')),
        datasets: [
          {
            name: 'Tiktok',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.TiktokFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.TwitterFollowersList) {
      twitterChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.TwitterCreateDates, ',')),
        datasets: [
          {
            name: 'Twitter',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.TwitterFollowersList,
              ','
            ),
          },
        ],
      };
    }
    if (filteredSocialHistory[0].node.YoutubeSubscribersList) {
      youtubeChartData = {
        labels: removeTimeFromDate(_.split(filteredSocialHistory[0].node.YoutubeCreateDates, ',')),
        datasets: [
          {
            name: 'Youtube',
            type: 'line',
            values: _.split(
              filteredSocialHistory[0].node.YoutubeSubscribersList,
              ','
            ),
          },
        ],
      };
    }
  }

  /*
  let allSocialChartsData = null;
  if (filteredSocialHistory && filteredSocialHistory.length > 0) {
    let socialLabels = [];
    let socialDataSet = [];
    if (filteredSocialHistory[0].node.FacebookLikesList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.FacebookCreateDates, ',')))
      socialDataSet.push({
        name: 'Facebook',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.FacebookLikesList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }

    if (filteredSocialHistory[0].node.InstagramFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.InstagramCreateDates, ',')))
      socialDataSet.push({
        name: 'Instagram',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.InstagramFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.PinterestFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.PinterestCreateDates, ',')))
      socialDataSet.push({
        name: 'Pinterest',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.PinterestFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.TiktokFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.TiktokCreateDates, ',')))
      socialDataSet.push({
        name: 'Tiktok',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.TiktokFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.TwitterFollowersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.TwitterCreateDates, ',')))
      socialDataSet.push({
        name: 'Twitter',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.TwitterFollowersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
    if (filteredSocialHistory[0].node.YoutubeSubscribersList) {
      socialLabels = _.union(socialLabels, removeTimeFromDate(_.split(filteredSocialHistory[0].node.YoutubeCreateDates, ',')))
      socialDataSet.push({
        name: 'Youtube',
        type: 'line',
        values: _.split(
          filteredSocialHistory[0].node.YoutubeSubscribersList,
          ','
        ),
      });
      allSocialChartsData = {
        labels: socialLabels,
        datasets: socialDataSet,
      };
    }
  }
  */

  const rowShopifyProductSummary = data.mysqlShopifyProductSummary || [];
  let productSummary_Dates = _.split(rowShopifyProductSummary.DateListActive, ',') || [];
  let productSummary_Dates_NoTime = _.map(productSummary_Dates, el => {
    let datetime = _.split(el.trim(), ' ');
    return datetime && datetime.length > 0 ? datetime[0] : el;
  });

  let subtitle = '';
  let FreeShipText = '';

  const get100Words = text => {
    let calculatedText = _.join(_.split(text, ' ', 100), ' ');
    return calculatedText;
  };

  const renderProduct = (node, key) => {
    return (
      <ProductCategoryItem
        key={key}
        cover={getProductImage(node)}
        path={`/shops/${node.emprezzoID}/`}
        vendorname={node.VendorName}
        title={node.Title}
        price={node.Price}
        node={node}
      />
    );
  };

  const renderProductList = (edges, key) => {
    const limitedEdges = edges //_.slice(edges, 0, maxProducts)
    return (
      <>
        {/* below renderer for desktop version */}
        { !isMobile && limitedEdges && limitedEdges.length > 0 && (
          <CategoryWrapper>
            {limitedEdges.map(({ node }, index) => {
              return renderProduct(node, key + "-" + index)
            })}
          </CategoryWrapper>
        )}
        {/* below renderer for mobile version */}
        { isMobile && limitedEdges && limitedEdges.length > 0 && (
          <Carousel
            showThumbs={false}
            infiniteLoop
            showIndicators={false}
            selectedItem={1}
            showArrows={true}
            showStatus={false}
          >
            {limitedEdges.map(({ node }, index) => {
              return renderProduct(node, key + "-" + index);
            })}
          </Carousel>
        )}
      </>
    );
  }

  const renderPost = (node, ismobile) => {
    return (
      <ViewCard
        key={node.PhotoLink}
        style={{ padding: ismobile && '15px', width: !ismobile && '30%' }}
      >

        <ViewImage style={{ height: '200px' }}>
          <a href={node.ShortCodeURL} target="_blank">
            {node.mysqlImage && (
              <Image
                fluid={node.mysqlImage.childImageSharp.fluid}
                alt={node.Caption && node.Caption.substring(0, 140) + '...'}
                style={{ height: '200px', width: '100%', margin: 'auto' }}
              />
            )}
            {!node.mysqlImage && (
              <img
                src={node.PhotoLink}
                alt={node.Caption && node.Caption.substring(0, 140) + '...'}
                style={{
                  objectFit: 'cover',
                  height: '200px',
                  width: '100%',
                  margin: 'auto',
                }}
              />
            )}
          </a>
        </ViewImage>

        <ViewInfo className="info" style={{ color: ismobile && 'white' }}>
          {node.Caption && node.Caption.substring(0, 140) + '...'}
        </ViewInfo>
      </ViewCard>
    );
  };

  const defaultImageOnError = (e) => { e.target.src = "/logo/logo.png" }

  const renderProfilePicURL = (node, name) => {
    if (node.mysqlImages && node.mysqlImages.length > 0) {
      return (
        <Image fluid={node.mysqlImages[0].childImageSharp.fluid} style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    } else if (ProfileImage) {
      return (
        <img src={ProfileImage} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else if (node.ProfilePicURL) {
      return (
        <img src={node.ProfilePicURL} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else if (node.profile_image_url) {
      return (
        <img src={node.profile_image_url} className="profileimage" onError={defaultImageOnError} style={{ width: '100px', height: '100px', 'border-radius': '100%', margin: '3%' }} title={name} alt={name} />
      );
    } else {
      return (
        <img src={"/logo/logo.png"} className="profileimage" style={{ width: '100px', height: '100px' }} title={name} alt={name} />
      );
    }
  }

  const getProductImage = (node) => {
    let productImage = node.VariantImageURL;
    if (!productImage) productImage = node.ImageURL;
    return productImage;
  }

  return (
    <Layout>
      <SEO
        title={`Discover ${name}: Best Sellers, Social Media, & Stats `}
        description={`${name} is a ${category} brand that sells products related to ${tags} direct to consumers on its website. Prices range from ${rowShopifyProductSummary.PriceMin} - ${rowShopifyProductSummary.PriceMax} with an average price of ${rowShopifyProductSummary.PriceAvg}. See product data about ${name} at emprezzo. `}
        pathname={AlexaURL}
      />
      <Header
        description={`${category}: ${tags}`} children={subtitle} likeEnabled={{ storeName: name, storeURL: AlexaURL, storeProfileImage: clearbitLogoURL || ProfileImage || (firstRowDataView && firstRowDataView.node.ProfilePicURL) }} />
      <Container>
        <div className="profileimage" style={{ display: 'flex' }}>
          {/*firstRowDataView && renderProfilePicURL(firstRowDataView.node, name)*/}
          <div style={{ paddingLeft: '5px' }}>

            <Title>
              <AddShopToCartButton
                details={{
                  storeName: name,
                  storeURL: AlexaURL,
                  storeProfileImage: clearbitLogoURL || ProfileImage || (firstRowDataView && firstRowDataView.node.ProfilePicURL),
                  emprezzoID: emprezzoID,
                  description: about,
                }}
              />
              {name}
            </Title>
            <Subtitle><b>{category}</b> {tags}<br /></Subtitle>
            <Stat>{rowShopifyProductSummary.PriceMin &&
              rowShopifyProductSummary.PriceMax && (
                <span>
                  ${rowShopifyProductSummary.PriceMin}-${rowShopifyProductSummary.PriceMax} (${rowShopifyProductSummary.PriceAvg} avg)</span>
              )}
              &nbsp;
              {PaypalShopID && PaypalShopID != '#' &&
                <span style={{ paddingRight: "0.25rem" }}><FaPaypal size="16" color="#666" /></span>
              }
              {AmazonPay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaAmazon size="16" color="#666" /></span>
              }
              {ShopifyPay && ShopifyPay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaShopify size="16" color="#666" /></span>
              }
              {ApplePay && ApplePay == '1' &&
                <span style={{ paddingRight: "0.25rem" }}><FaApple size="16" color="#666" /></span>
              }
            </Stat>



            <Stat>


            </Stat>


            <Stat>

              {firstRowDataView &&
                <div>

                  {firstRowDataView.node.FreeShipMin != null && firstRowDataView.node.FreeShipMin != 0 &&
                    <span><FaTruck size="16" color="#666" class="icon" title="free shipping info" /> Free shipping ${firstRowDataView.node.FreeShipMin}+ &nbsp;</span>
                  }
                  {firstRowDataView.node.FreeShipMin == 0 &&
                    <span><FaTruck size="16" color="#666" class="icon" title="free shipping on most orders" /> Most orders ship free! &nbsp;</span>
                  }
                  {firstRowDataView.node.BaseShipRate > 1 &&
                    <span><FaBoxOpen size="16" color="#666" class="icon" title="shipping rates" /> Rates ${firstRowDataView.node.BaseShipRate}+ &nbsp; </span>
                  }
                  <br />
                  {firstRowDataView.node.ReturnDays != null && firstRowDataView.node.ReturnDays != "0" &&
                    <span><FaUndoAlt size="16" color="#666" /> {firstRowDataView.node.ReturnDays} day returns</span>
                  }
                  {firstRowDataView.node.ReturnShipFree != "." && firstRowDataView.node.ReturnShipFree == "Yes" &&
                    <span><br /><FaRegStar size="16" color="#666" /> Returns ship free!</span>
                  }

                </div>
              }

            </Stat>
            <br />








          </div>
        </div>





        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Shop {name}</Tab>
            {/* {listShopifyBestSellersEdges &&
              listShopifyBestSellersEdges.length > 0 && (
                <Tab style={TabStyle}>Best sellers</Tab>
              )}
            {listShopifyNewProductsEdges &&
              listShopifyNewProductsEdges.length > 0 && (
                <Tab style={TabStyle}>New products</Tab>
              )}
            {listShopifySaleProducts &&
              listShopifySaleProducts.length > 0 && (
                <Tab style={TabStyle}>Sale</Tab>
              )}
            {listShopifyGiftCards &&
              listShopifyGiftCards.length > 0 && (
                <Tab style={TabStyle}>Gift Cards</Tab>
              )} */}
          </TabList>

          <TabPanel>
            <AlgoliaProductList
              defaultFilter={`emprezzoID:"${emprezzoID}"`}
              hideLeftPanel={true}
              facetsToShow={'onsale,giftcard'}
              showSearchBox={false}
              showClearFilter={false}
              hideCTAButton={true} f
              enableCart={true}
              currentShop={{ name: name, link: AlexaURL }}
              location={location}
              noResultMessage={`Shop direct at <a href=${AlexaURL} target="_blank">${name}</a>`}
            />
          </TabPanel>

          {/* {listShopifyBestSellersEdges && listShopifyBestSellersEdges.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifyBestSellersEdges, 'listShopifyBestSellersEdges')}
            </TabPanel>
          )}
          {listShopifyNewProductsEdges && listShopifyNewProductsEdges.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifyNewProductsEdges, 'listShopifyNewProductsEdges')}
            </TabPanel>
          )}

          {listShopifySaleProducts && listShopifySaleProducts.length > 0 && (
            <TabPanel>
              {renderProductList(listShopifySaleProducts, 'listShopifySaleProducts')}
            </TabPanel>
          )}
          {listShopifyGiftCards &&
            listShopifyGiftCards.length > 0 && (
              <TabPanel>

                <PostSectionGrid>
                  {listShopifyGiftCards.map(({ node, index }) => {
                    return renderProduct(node, 'Giftcard-' + index);
                  })}
                </PostSectionGrid>
              </TabPanel>
            )} */}
        </Tabs>


        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Recent emails</Tab>
            {/* {listShopifyBestSellersEdges &&
              listShopifyBestSellersEdges.length > 0 && (
                <Tab style={TabStyle}>Best sellers</Tab>
              )}
            {listShopifyNewProductsEdges &&
              listShopifyNewProductsEdges.length > 0 && (
                <Tab style={TabStyle}>New products</Tab>
              )}
            {listShopifySaleProducts &&
              listShopifySaleProducts.length > 0 && (
                <Tab style={TabStyle}>Sale</Tab>
              )}
            {listShopifyGiftCards &&
              listShopifyGiftCards.length > 0 && (
                <Tab style={TabStyle}>Gift Cards</Tab>
              )} */}
          </TabList>





          <TabPanel>

            <EmailGrid>
              {listEmails && listEmails.map((emailNode) => (
                <EmailsItem email={emailNode} emprezzoID={emprezzoID} />
              ))}
            </EmailGrid>
          </TabPanel>


        </Tabs>
        <br />

        {listInstaPostEdges && listInstaPostEdges.length > 0 && (
          <h3>See recent posts from @{firstRowDataView.node.UserName}</h3>
        )}




        {/* Show carousel for mobile version */}
        {isMobile && (
          <Carousel
            showThumbs={false}
            infiniteLoop
            showIndicators={false}
            selectedItem={1}
            showArrows={true}
            showStatus={false}
          >
            {listInstaPostEdges &&
              listInstaPostEdges.map(({ node }) => {
                return renderPost(node, true);
              })}
          </Carousel>
        )}
        {/* Show carousel for mobile version */}
        {!isMobile && (
          <ViewContainer>
            {listInstaPostEdges &&
              listInstaPostEdges.map(({ node }) => {
                return renderPost(node);
              })}
          </ViewContainer>
        )}

        <br />

      
        <h3>About {name}</h3>
        <b>{name}</b> produces and sells {category} products {tags} and more. The company sells direct-to-consumer on its website.

      {rowShopifyProductSummary.PriceMin &&
          rowShopifyProductSummary.PriceMax && (
            <span>
              &nbsp;Prices range from ${rowShopifyProductSummary.PriceMin} - ${rowShopifyProductSummary.PriceMax} with an average price of ${rowShopifyProductSummary.PriceAvg}.</span>
          )}
        {socialDetails && (
          <span>
            &nbsp;The {name} brand can be found on
            {socialDetails.InstagramLink && (
              " Instagram, "
            )}
            {socialDetails.FacebookLink && (
              " Facebook, "
            )}
            {socialDetails.PinterestLink && (
              " Pinterest, "
            )}
            {socialDetails.TikTok && (
              " TikTok, "
            )}
            {socialDetails.TwitterLink && (
              " Twitter, "
            )}
            {socialDetails.YouTubeLink && (
              " Youtube, "
            )}
               and here on Emprezzo.&nbsp;
          </span>
        )}
        <div class="shopButtons" style={{ 'margin-top': '1em' }}>
          <a href={AlexaURL} className="button" target="_blank">
            shop {name}
          </a>{' '}
          <a href="/randomshop" className="button buttonalt">
            Discover another shop
      </a>
        </div>
        <div>
          <br />
          {!!combinedRelatedShops.length && (
            <>
              <h3>Discover shops similar to {name}</h3>
              <PostSectionGrid>
                {combinedRelatedShops && combinedRelatedShops.map(({ shop }, index) => (
                  <span key={index}>
                    <PostSectionImage>
                      <Link key={index} to={`/shops/${shop.emprezzoID}/`}>
                        <img src={getClearbitLogoURL(shop.AlexaURL) || shop.ProfileImage || shop.ProfilePicURL || shop.profile_image_url || "/logo/logo.png"} title={shop.name} alt={shop.name} onError={defaultImageOnError} style={{ height: 'inherit', 'textAlign': 'center', 'borderRadius': '5%' }} />
                      </Link>
                    </PostSectionImage>
                    <PostSectionContent>
                      <Link key={index} to={`/shops/${shop.emprezzoID}/`}>
                        {shop.name && <b>{shop.name}</b>}
                      </Link>

                    </PostSectionContent>
                  </span>
                ))}
              </PostSectionGrid>
            </>
          )}
          <br />
        </div>
        <h3 style={{ 'top-margin': '1rem' }}>{name} data and charts</h3>
        <Tabs>
          <TabList>
            <Tab style={TabStyle}>Fans</Tab>
            <Tab style={TabStyle}>Breakdown</Tab>

            {rowShopifyProductSummary.PriceListActive && (<Tab style={TabStyle}>Prices</Tab>)}
            <Tab style={TabStyle}>Traffic</Tab>
            {chartTOSData && (<Tab style={TabStyle}>Time</Tab>)}


          </TabList>
          <TabPanel>
            <div style={{ flex: '60%' }}>
              <Tabs >
                <TabList>
                  {facebookChartData && <Tab style={TabStyle}>Facebook</Tab>}
                  {instagramChartData && <Tab style={TabStyle}>Instagram</Tab>}
                  {pinterestChartData && <Tab style={TabStyle}>Pinterest</Tab>}
                  {tiktokChartData && <Tab style={TabStyle}>TikTok</Tab>}
                  {twitterChartData && <Tab style={TabStyle}>Twitter</Tab>}
                  {youtubeChartData && <Tab style={TabStyle}>Youtube</Tab>}
                </TabList>
                {facebookChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      colors={['#743ee2']}
                      title="Facebook"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      data={facebookChartData}
                    />
                  </TabPanel>
                )}
                {instagramChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Instagram"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={instagramChartData}
                    />
                  </TabPanel>
                )}
                {pinterestChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Pinterest"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={pinterestChartData}
                    />
                  </TabPanel>
                )}
                {tiktokChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Tiktok"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={tiktokChartData}
                    />
                  </TabPanel>
                )}
                {twitterChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Twitter"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={twitterChartData}
                    />
                  </TabPanel>
                )}
                {youtubeChartData && (
                  <TabPanel>
                    <ReactFrappeChart
                      type="axis-mixed"
                      title="Youtube"
                      height={250}
                      axisOptions={{
                        xAxisMode: 'tick',
                        xIsSeries: 1,
                        shortenYAxisNumbers: 1,
                      }}
                      lineOptions={{ spline: 1 }}
                      data={youtubeChartData}
                    />
                  </TabPanel>
                )}
              </Tabs>
            </div>
          </TabPanel>
          <TabPanel>

            <div style={{ flex: '100%' }}>

              {chartSocialData && chartSocialData.labels && chartSocialData.labels.length > 0 && (
                <ReactFrappeChart
                  type="donut"
                  title="Total fans by platform"
                  height={300}
                  data={chartSocialData}
                />
              )}
            </div>
          </TabPanel>

          {rowShopifyProductSummary.PriceListActive && (
            <TabPanel>

              {rowShopifyProductSummary && (
                <ReactFrappeChart
                  title="Product prices by release date"
                  type="axis-mixed"
                  colors={['#743ee2']}
                  height={250}
                  axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                  lineOptions={{ hideLine: 1 }}
                  tooltipOptions={{
                    formatTooltipX: d => d,
                    formatTooltipY: d => '$ ' + parseFloat(d || 0).toFixed(2),
                  }}
                  data={{
                    labels: _.split(productSummary_Dates_NoTime, ','),
                    datasets: [
                      {
                        name: 'Product prices',
                        type: 'line',
                        values: _.split(
                          rowShopifyProductSummary.PriceListActive,
                          ','
                        ),
                      },
                    ],
                    yMarkers: [
                      {
                        label: 'Avg Price',
                        value: rowShopifyProductSummary.PriceAvg,
                      },
                    ],
                  }}
                />
              )}
            </TabPanel>
          )}
          <TabPanel>
            {chartRankData && (
              <ReactFrappeChart
                title="Alexa traffic rank over time"
                type="axis-mixed"
                colors={['#743ee2']}
                height={250}
                axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                lineOptions={{ spline: 1 }}
                data={chartRankData}
              />
            )}
          </TabPanel>
          <TabPanel>
            {chartTOSData && (
              <ReactFrappeChart
                type="axis-mixed"
                title="Average time spent on site"
                colors={['#743ee2']}
                height={250}
                axisOptions={{ xAxisMode: 'tick', xIsSeries: 1 }}
                lineOptions={{ spline: 1 }}
                data={chartTOSData}
                tooltipOptions={{
                  formatTooltipX: d => d,
                  formatTooltipY: d => d + " seconds",
                }}
              />
            )}
          </TabPanel>



        </Tabs>




      </Container>
      <SuggestionBar>
        <div style={{ margin: '2rem 2rem 2rem 4rem', 'max-width': '60%' }}>



        </div>

        <div style={{ float: 'right', margin: '2rem', }}>

        </div>
      </SuggestionBar>

    </Layout>
  );
}

function App() {
  return <div className="container">
    <Tabs>
      <h1>esri-loader-hooks</h1>
      <p>
        Custom React <a href="https://reactjs.org/docs/hooks-intro.html">hooks</a> for using the <a href="https://developers.arcgis.com/javascript/">ArcGIS API for JavaScript</a> with <a href="https://github.com/Esri/esri-loader">esri-loader</a>.
        See the documentation and source on <a href="https://github.com/tomwayson/esri-loader-hooks">github</a>.
      </p>
      <TabList>
        <Tab>Web Map</Tab>
        <Tab>Web Scene</Tab>
        <Tab>Map</Tab>
        <Tab>Scene</Tab>
        <Tab>Events</Tab>
        <Tab>Graphics</Tab>
        <Tab>FeatureTable</Tab>
      </TabList>

      <TabPanel>
<pre><code>{`  const [ref] = useWebMap(id);
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <WebMap id="e691172598f04ea8881cd2a4adaa45ba" />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/webmap-basic/index.html">
            Load a basic WebMap
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref] = useWebScene(id);
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <WebScene id="3a9976baef9240ab8645ee25c7e9c096" />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/webscene-basic/index.html">
            Load a basic WebScene
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref] = useMap({basemap: "streets"}, {view: {center, zoom}});
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <MapView />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html">
            Intro to MapView
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref] = useScene({basemap, ground}, {view: {center, zoom});
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <SceneView />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/intro-sceneview/index.html">
            Intro to SceneView
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref, view] = useScene({basemap, ground}, {view: {center, zoom});
  useEvent(view, "click", onClick);
  useWatch(view, 'zoom', onZoomChange);
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <EventsMap />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/event-explorer/index.html">
            Event explorer / watch properties
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
        <pre><code>{`  const [ref, view] = useMap({basemap: "hybrid"}, {view: {center, zoom});
  useGraphics(view, [pointJson, lineJson, polygonJson]);
  return <div style={{ height: 400 }} ref={ref} />;
`}</code></pre>
        <GraphicsMap />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/intro-graphics/index.html">
            Intro to graphics
          </a>{" "}
          sample.
        </p>
      </TabPanel>
      <TabPanel>
<pre><code>{`  const [ref] = useFeatureTable(layer, { visibleElements: { selectionColumn: false } });
  return <div style={{ height: 600 }} ref={ref} />;
`}</code></pre>
        <FeatureTable
          layer="https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CollegesUniversities/FeatureServer/0"
          tableOptions={{ visibleElements: { selectionColumn: false } }}
        />
        <p>
          Based on the{" "}
          <a href="https://developers.arcgis.com/javascript/latest/sample-code/widgets-featuretable/index.html">
            Use a stand alone FeatureTable
          </a>{" "}
          sample.
        </p>
      </TabPanel>
    </Tabs>
  </div>;
}