react-icons/fa#FaAmazon JavaScript Examples

The following examples show how to use react-icons/fa#FaAmazon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: singleitem.jsx    From emprezzo with MIT License 4 votes vote down vote up
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>
  );
}