<commit_before>import React, { PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Map } from 'immutable';
import styled from 'styled-components';

import Image from './Image';
import { formatPrice } from '../utils/utils';

const Wrapper = styled.div`
  height: 593px;
  width: 405px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  cursor: pointer;
  font-size:0;
  &>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 33px;
  }
`;

const Name = styled.div`
  line-height: 32px;
  font-size: 20px;
  font-family: LeroyMerlinSans Bold;
  text-transform: uppercase;
  text-align: center;
  margin: 10px 0;
`;

const PriceWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 20px;
  width: 100%;
  justify-content: center;
  &>p{
    margin-bottom: 10px;
  }
  &>div:nth-child(3) {
    margin-left: 20px;
  }
`;

const Price = styled.div`
  font-size: 20px;
  line-height: 24px;
  color: ${props => (props.discounted ? '#cc0000' : '#000')};
  text-decoration: ${props => (props.isBarred ? 'line-through' : 'none')};
`;

const Discount = styled.p`
  font-size: 20px;
  color: #cc0000;
  text-align: center;
  width: 100%;
`;

const Available = styled.div`
  color: #339900;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 40px;
  bottom: 188px;
  &>p {
    font-family: LeroyMerlinSans Bold;
    font-size: 16px;
  }
  background: rgba(255, 255, 255, 0.8);
`;

const ProductBadge = ({ productInfo, handleClick }) => {
  if (productInfo.isEmpty()) {
    return null;
  }
  const imageID = productInfo.get('mainImage');
  const imageOptions = { width: 405, height: 405 };
  const name = productInfo.get('name');
  const grossPrice = productInfo.getIn(['price', 'selling', 'gross']);
  const listPrice = productInfo.getIn(['price', 'selling', 'list']);
  const isDiscounted = listPrice && true;
  const discount = productInfo.getIn(['price', 'selling', 'discount']);
  const isInStock = (productInfo.get('storeStock') - 2) > 0;
  // const marketingAttributes = productInfo.get('marketingAttributes');

  return (
    <Wrapper onClick={handleClick}>
      <Image
        imageID={imageID}
        imageOptions={imageOptions}
        alt={name}
      />
      <Name>{name}</Name>
      <PriceWrapper>
        {discount && <Discount>-{Math.ceil(discount)} &#37;</Discount>}
        <Price isBarred={isDiscounted}>
          {formatPrice(listPrice) || formatPrice(grossPrice)} &#8364;
        </Price>
        {listPrice && <Price discounted>{formatPrice(grossPrice)} &#8364;</Price>}
      </PriceWrapper>
      {isInStock &&
      <Available>
        <p>Disponibile in Negozio</p>
      </Available>}
    </Wrapper>
  );
};
<commit_msg>implement flag marketing in catalogue<commit_after>import React, { PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Map } from 'immutable';
import styled from 'styled-components';

import Image from './Image';
import { formatPrice } from '../utils/utils';

const Wrapper = styled.div`
  height: 593px;
  width: 405px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  cursor: pointer;
  font-size:0;
  &>div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 33px;
  }
`;

const Name = styled.div`
  line-height: 32px;
  font-size: 20px;
  font-family: LeroyMerlinSans Bold;
  text-transform: uppercase;
  text-align: center;
  margin: 10px 0;
`;

const PriceWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 20px;
  width: 100%;
  justify-content: center;
  &>p{
    margin-bottom: 10px;
  }
  &>div:nth-child(3) {
    margin-left: 20px;
  }
`;

const Price = styled.div`
  font-size: 20px;
  line-height: 24px;
  color: ${props => (props.discounted ? '#cc0000' : '#000')};
  text-decoration: ${props => (props.isBarred ? 'line-through' : 'none')};
`;

const Discount = styled.p`
  font-size: 20px;
  color: #cc0000;
  text-align: center;
  width: 100%;
`;

const Available = styled.div`
  color: #339900;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  height: 40px;
  bottom: 188px;
  &>p {
    font-family: LeroyMerlinSans Bold;
    font-size: 16px;
  }
  background: rgba(255, 255, 255, 0.8);
`;

// TODO create a more scalable component
const Corner = styled.section`
  height: 42px;
  width: 42px;
  background: ${props => props.bgColor};
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: ${props => props.fSize};
  color: #fff;
  text-align: center;
  font-family: LeroyMerlinSans Bold;
  position: absolute;
  top: 0;
  right: 0;
`;

const MarketingFlag = ({ isDiscounted, isNew }) => {
  if (isDiscounted) {
    return <Corner bgColor="#cc0000" fSize="24px">%</Corner>;
  }
  if (isNew) {
    return <Corner bgColor="#6699cc" fSize="16px">NEW</Corner>;
  }
  return null;
};

MarketingFlag.propTypes = {
  isDiscounted: PropTypes.bool,
  isNew: PropTypes.bool
};

MarketingFlag.defaultProps = {
  isDiscounted: false,
  isNew: false
};

const ProductBadge = ({ productInfo, handleClick }) => {
  if (productInfo.isEmpty()) {
    return null;
  }
  const imageID = productInfo.get('mainImage');
  const imageOptions = { width: 405, height: 405 };
  const name = productInfo.get('name');
  const grossPrice = productInfo.getIn(['price', 'selling', 'gross']);
  const listPrice = productInfo.getIn(['price', 'selling', 'list']);
  const isDiscounted = listPrice && true;
  const discount = productInfo.getIn(['price', 'selling', 'discount']);
  const isInStock = (productInfo.get('storeStock') - 2) > 0;
  const isNew = productInfo.getIn(['marketingAttributes', 'newOnMarketEndDate']) && true;

  return (
    <Wrapper onClick={handleClick}>
      <Image
        imageID={imageID}
        imageOptions={imageOptions}
        alt={name}
      />
      <MarketingFlag
        isDiscounted={isDiscounted}
        isNew={isNew}
      />
      <Name>{name}</Name>
      <PriceWrapper>
        {discount && <Discount>-{Math.ceil(discount)} &#37;</Discount>}
        <Price isBarred={isDiscounted}>
          {formatPrice(listPrice) || formatPrice(grossPrice)} &#8364;
        </Price>
        {listPrice && <Price discounted>{formatPrice(grossPrice)} &#8364;</Price>}
      </PriceWrapper>
      {isInStock &&
      <Available>
        <p>Disponibile in Negozio</p>
      </Available>}
    </Wrapper>
  );
};

{'fraction_non_alphanumeric': 0.1566446181599519, 'fraction_numerical': 0.030366806975345762, 'mean_word_length': 3.4561286001339586, 'pattern_counts': {'":': 0, '<': 42, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5976655', 'n_tokens_mistral': 2481, 'n_tokens_neox': 2309, 'n_words': 527}