Flair Stickers by BurstCommerce

/**
 * @module components/Cards/Product
 */

import React from 'react'
... imports here ...
import { lifecycle } from 'recompose'; //import the lifecycle method

... some code ...

/* Add the code to grab the values from Flair API */
const enhancer = lifecycle({
  async componentDidMount(){
    const item = this.props.item;
    if(FlairApp && FlairApp.getProductBadges){
      const sticker = await FlairApp.getProductBadges({url: item.get('product_url')});
      if(sticker){
        this.setState({
          sticker
        });
      }
    }
  }
});

... some code ...

const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  sticker //add the sticker state
}: any) => (
  <a
    onClick={item.onClick}
    href={item.get('product_url')}
    className={classNames(
      theme.root,
      config.get('simple') && theme.simple,
      theme.productCard,
    )}
  >
      ... some code ...
      /* Add the sticker content to the Product Card  */
      <div display-id={sticker} className='findify-product-stickers-wrapper' dangerouslySetInnerHTML={{__html:sticker}}></div>
      ... some code ...
  </a>
)

//wrap the Product Card component with an enhancer
export default enhancer(ProductCardView);

/**
 * @module components/Cards/Product
 */

import React from 'react'
import classNames from 'classnames'
import Image from 'components/common/Picture'
import Truncate from 'components/common/Truncate'
import Text from 'components/Text'
import Rating from 'components/Cards/Product/Rating';
import Price from 'components/Cards/Product/Price';
import template from 'helpers/template';
import { DiscountSticker, OutOfStockSticker  } from 'components/Cards/Product/Stickers';
import { List } from 'immutable'
import { IProduct, MJSConfiguration, ThemedSFCProps } from 'types/index';
import BundleAction from 'components/Cards/Product/BundleAction';
import { lifecycle } from 'recompose'; //import the lifecycle method

const Title: any = ({ text, theme, ...rest }) => (
  <Text display-if={!!text} className={theme.title} {...rest}>{text}</Text>
);

const Description: any = ({ text, theme, ...rest }) => (
  <p
    display-if={!!text}
    className={theme.description}
    {...rest}
  >
    <Truncate>{text}</Truncate>
  </p>
);

/* Add the code to grab the values from Flair API */
const enhancer = lifecycle({
  async componentDidMount(){
    const item = this.props.item;
    if(FlairApp && FlairApp.getProductBadges){
      const sticker = await FlairApp.getProductBadges({url: item.get('product_url')});
      if(sticker){
        this.setState({
          sticker
        });
      }
    }
  }
});


export interface IProductCardProps extends ThemedSFCProps {
  item: IProduct;
  config: MJSConfiguration;
}

const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  sticker //add the sticker state
}: any) => (
  <a
    onClick={item.onClick}
    href={item.get('product_url')}
    className={classNames(
      theme.root,
      config.get('simple') && theme.simple,
      theme.productCard,
    )}
  >
    <div className={classNames(theme.imageWrap)}>
      /* Add the sticker content to the Product Card  */
      <div display-id={sticker} className='findify-product-stickers-wrapper' dangerouslySetInnerHTML={{__html:sticker}}></div>
      <BundleAction display-if={config.get('bundle')} item={item} />
      <Image
        className={classNames(theme.image)}
        aspectRatio={config.getIn(['product', 'image', 'aspectRatio'], 1)}
        thumbnail={item.get('thumbnail_url')}
        src={item.get('image_url') || item.get('thumbnail_url')}
        alt={item.get('title')}
      />
      <div display-if={config.getIn(['product', 'stickers', 'display'])}>
        <DiscountSticker
          config={config}
          className={theme.discountSticker}
          discount={item.get('discount')}
          display-if={
            config.getIn(['stickers', 'discount']) &&
            config.getIn(['product', 'stickers', 'display']) &&
            item.get('discount', List()).size &&
            item.getIn(['stickers', 'discount'])
          } />
      </div>
    </div>
    <div
      display-if={
        config.getIn(['product', 'reviews', 'display']) &&
        (!!item.getIn(['reviews', 'count']) || !!item.getIn(['reviews', 'total_reviews']))
      }
      className={theme.rating}>
      <Rating
        value={item.getIn(['reviews', 'average_score'])}
        count={item.getIn(['reviews', 'count']) || item.getIn(['reviews', 'total_reviews'])} />
    </div>
    <div
      className={theme.variants}
      display-if={
        config.getIn(['product', 'variants', 'display']) &&
        item.get('variants', List()).size > 1
      }
      >
      {
        template(config.getIn(['product', 'i18n', 'variants'], 'Available in %s variants'))(
          item.get('variants', List()).size
        )
      }
    </div>
    <div className={theme.content}>
      <Title
        theme={theme}
        display-if={config.getIn(['product', 'title', 'display'])}
        text={item.get('title')}
        config={config.getIn(['product', 'title'])} />
      <Description
        theme={theme}
        display-if={config.getIn(['product', 'description', 'display'])}
        text={item.get('description')}
        config={config.getIn(['product', 'description'])} />
      <Price
        className={theme.priceWrapper}
        display-if={config.getIn(['product', 'price', 'display'])}
        price={item.get('price')}
        oldPrice={item.get('compare_at')}
        discount={item.get('discount')}
        currency={config.get('currency_config').toJS()} />
      <OutOfStockSticker
        display-if={item.getIn(['stickers', 'out-of-stock'])}
        config={config} />
    </div>
  </a>
)

//wrap the Product Card component with an enhancer
export default enhancer(ProductCardView);