react-icons/fa#FaBoxOpen JavaScript Examples
The following examples show how to use
react-icons/fa#FaBoxOpen.
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: AlgoliaUncommonryItem.jsx From emprezzo with MIT License | 4 votes |
|
AlgoliaUncommonryItem = (props) => {
//console.log("**** props", props)
return (
<Wrapper>
<Global
styles={css`
.ais-Hits-item {
width: calc(50% - 1rem) !important;
@media (min-width: 1200px) {
width: calc(33% - 1rem) !important;
}
@media (max-width: 600px) {
width: calc(100% - 1rem) !important;
}
}
`}
/>
{props && props.hit &&
<>
<div style={{ width: "25%" }}>
<a href={`/shops/${props.hit.emprezzoID}/`} title={props.hit.shopName} target="_blank">
<Image>
<img src={getClearbitLogoURL(props.hit.url) || props.hit.shopImage || props.hit.imageURL} />
</Image>
</a>
</div>
<Information>
<a href={`/shops/${props.hit.emprezzoID}/`} title={props.hit.shopName}
onClick={() => {
props.insights('clickedObjectIDsAfterSearch', { eventName: `shop ${props.hit.emprezzoID} clicked` })
}}
>
<div>
<Title>{props.hit.shopName}</Title>
<Tags>{props.hit.shopCategory}: {props.hit.shopTags}</Tags>
<Stats> {props.hit.priceMin && <span style={{ paddingRight: "0" }}>${Math.round(props.hit.priceMin)}-${Math.round(props.hit.priceMax)} / ${Math.round(props.hit.priceAvg)} avg</span>
}</Stats>
<Stats>
{/*
<b>PAY</b> {props.hit.paypal == '1' &&
<span style={{paddingRight: "0.25rem"}}><FaPaypal size="14" color="#666" /></span>
}
{props.hit.shopifyPay == '1' &&
<span style={{paddingRight: "0.25rem"}}><FaShopify size="14" color="#666" /></span>
}
{props.hit.applePay == '1' &&
<span style={{paddingRight: "0.25rem"}}><FaApple size="14" color="#666" /></span>
}
{props.hit.amazonPay == '1' &&
<span style={{paddingRight: "0.25rem"}}><FaAmazon size="14" color="#666" /></span>
}
*/}
{props.hit.freeShipMin != null && props.hit.freeShipMin != 0 &&
<span><FaTruck size="14" color="#666" class="icon" title="Free shipping minimum" /> ${props.hit.freeShipMin}+</span>
}
{props.hit.freeShipMin == 0 &&
<span title="most orders ship free!"><FaTruck size="14" color="#666" class="icon" title="Get free shipping on most orders!" />* </span>
}
{props.hit.baseShipRate > 0 &&
<span> <FaBoxOpen paddingRight='2px' size="14" color="#666" class="icon" title="Shipping rates from" />${props.hit.baseShipRate}+ </span>
}
{props.hit.returnDays != null && props.hit.returnDays != "0" &&
<span title={`${props.hit.returnDays} day returns`}> <FaUndoAlt paddingRight='5px' size="14" color="#666" title="return days" /> {props.hit.returnDays} </span>
}
{props.hit.returnShipFree != "." && props.hit.returnShipFree == "Yes" &&
<span> <FaRegStar size="14" color="#666" title="Most returns ship free" /></span>
}
</Stats>
<br />
</div>
</a>
</Information>
</>
}
</Wrapper>
);
}
Example #2
| Source File: singleitem.jsx From emprezzo with MIT License | 4 votes |
|
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>
)}
{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}+ </span>
}
{firstRowDataView.node.FreeShipMin == 0 &&
<span><FaTruck size="16" color="#666" class="icon" title="free shipping on most orders" /> Most orders ship free! </span>
}
{firstRowDataView.node.BaseShipRate > 1 &&
<span><FaBoxOpen size="16" color="#666" class="icon" title="shipping rates" /> Rates ${firstRowDataView.node.BaseShipRate}+ </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>
Prices range from ${rowShopifyProductSummary.PriceMin} - ${rowShopifyProductSummary.PriceMax} with an average price of ${rowShopifyProductSummary.PriceAvg}.</span>
)}
{socialDetails && (
<span>
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.
</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>
);
}
