DealCard.js

import React, { Component, Fragment } from 'react'
import moment from 'moment'
import Countdown from 'react-countdown-moment'
import { BASE_URL, getActualRibbons } from 'src/service'
import share from 'src/assets/svg/shareInverted.svg'
import timer from 'src/assets/svg/timer.svg'
import DisabledContent from './DisabledContent'
import HeartButton from './HeartButton'
import SaveButton from './SaveButton'
import Indicator from './Indicator'

import {
  StyledProgress,
  StyledTag,
  StyledShareLink,
  StyledDealScoreInfo,
  RibbonContainer,
  Wrapper,
  BluredWrapper,
  Blured,
  Button,
  Root,
  Header,
  Figure,
  ProductImage,
  StoreName,
  Reviews,
  Indicators,
  Warning,
  Heading,
  Price,
  NewPrice,
  OldPrice,
  Timer,
  TimerValue,
  Footer,
  Row,
  Icon,
  Info,
  Action,
  Circle,
  StyledStar,
  Slashed,
  Percentage,
} from './DealCard.styled'

class DealCard extends Component {
  render() {
    const { data, type, disable, className } = this.props
    const now = moment()
    const endDate = moment(data.available_till).add(2, 'hours')
    const content = (
      <Fragment>
        <Root type={type} disable={disable} className={className}>
          {data.score > 50 && (
            <Fragment>
              <StyledProgress
                type="circle"
                percent={data.score}
                format={(percent) => `${percent} `}
              />
              <Circle background={data.score} />
              <StyledDealScoreInfo background={data.score} />
            </Fragment>
          )}
          <RibbonContainer>
            {getActualRibbons(data.tags).map((tag, index) => (
              <StyledTag key={tag.name} color={tag.color} index={`${index * 28}px`}>
                {tag.name}
              </StyledTag>
            ))}
            {/* {type === 'violet' && <Ribbon type="violet">Rare!</Ribbon>}
            <Ribbon type="red">Best. Price. Ever.</Ribbon> */}
          </RibbonContainer>
          <Header>
            <a href={data.url} target="_blank" rel="noopener noreferrer">
              <Figure>
                <ProductImage src={data.image} />
              </Figure>
              <Reviews>
                {data.store_logo_url ? <StoreName src={BASE_URL + data.store_logo_url} /> : <div />}
                <Indicators>
                  {data.is_low_stock && (
                    <Indicator content="This item may go out of stock soon" border="1">
                      <Warning>!</Warning>
                    </Indicator>
                  )}

                  {data.best_selling && (
                    <Indicator content={data.best_selling.label} border="2">
                      <StyledStar rate={data.best_selling.score} />
                    </Indicator>
                  )}
                </Indicators>
              </Reviews>
              <Heading>{data.name}</Heading>
              <Row>
                <Price>
                  {data.price && <NewPrice>${data.price.toFixed(2)}</NewPrice>}

                  <Slashed>
                    {data.discount && (
                      <Fragment>
                        <Percentage>{data.discount} off</Percentage>
                        <OldPrice>${data.msrp.toFixed(2)}</OldPrice>
                      </Fragment>
                    )}
                  </Slashed>
                </Price>
                {endDate.diff(now) > 0 && (
                  <Timer>
                    <Icon src={timer} />
                    <TimerValue>
                      <Countdown endDate={endDate} />
                    </TimerValue>
                  </Timer>
                )}
              </Row>
            </a>
          </Header>
          <Footer>
            <a href={data.url} target="_blank" rel="noopener noreferrer">
              <Button>Check it out</Button>
            </a>
            <Row>
              <Action>
                <HeartButton data={data} />
              </Action>
              <Action>
                <SaveButton />
              </Action>
              <StyledShareLink to={`/deals/${data.id}`}>
                <Action>
                  <Icon src={share} />
                  <Info>Share</Info>
                </Action>
              </StyledShareLink>
            </Row>
          </Footer>
        </Root>
      </Fragment>
    )
    return disable ? (
      <BluredWrapper>
        <Blured>{content}</Blured>
        <DisabledContent />
      </BluredWrapper>
    ) : (
      <Wrapper>{content}</Wrapper>
    )
  }
}

export default DealCard