@findify/react-components
Version:
Findify react UI components
53 lines (52 loc) • 1.89 kB
JSX
/**
* @module components/Cards/Product/Stickers
*/
import cx from 'classnames';
import Text from 'components/Text';
import Branch from 'components/common/Branch';
import withTheme from 'helpers/withTheme';
import theme from 'components/Cards/Product/Stickers/styles.css';
import { fromJS } from 'immutable';
const defaultDiscountConfig = fromJS({
position: 'top-right',
template: {
single: '%s% OFF',
multiple: 'Up to %s% off',
},
styles: {
background: '#c483b3',
color: '#ffffff',
fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif;",
fontSize: '14',
fontWeight: '700',
},
});
const defaultOutOfStockConfig = fromJS({
template: {
single: 'Out of stock',
},
});
export const DiscountSticker = withTheme(theme)(({ className, discount, theme, config }) => {
let realConfig = config.get('stickers');
if (!realConfig || !realConfig.get('discount'))
realConfig = defaultDiscountConfig;
else
realConfig = realConfig.get('discount');
return (<div className={cx(theme.discountSticker, className)}>
<Text bold>
<Branch condition={discount.size > 1} left={() => realConfig
.getIn(['template', 'multiple'])
.replace('%s', Math.max.apply(Math, discount.toJS()))} right={() => (realConfig.getIn(['template', 'single']) ||
realConfig.get('template')).replace('%s', Math.max.apply(Math, discount.toJS()))}/>
</Text>
</div>);
});
export const OutOfStockSticker = withTheme(theme)(({ className, theme, config }) => {
const realConfig = config.getIn(['stickers', 'out-of-stock'], defaultOutOfStockConfig);
return (<div className={cx(theme.outOfStockSticker, className)}>
<Text>
{realConfig.getIn(['template', 'single']) ||
realConfig.get('template')}
</Text>
</div>);
});