@open-tender/ui
Version:
A component library for use with the Open Tender web app
47 lines (46 loc) • 3.42 kB
JavaScript
import { formatDollars, makeImageMap } from '@open-tender/utils';
import React from 'react';
import { makeImageProps, makeProps } from '../utils';
import SuccessMessage from './SuccessMessage';
import Text from './Text';
import View from './View';
const PointsReward = ({ config, successMessageConfig, item, itemPointsApplied, pointsRemaining, renderQuantity, apiUrl }) => {
const { name, points, images, price_total, quantity } = item;
if (!points)
return null;
const priceUnit = parseFloat(price_total) / quantity;
const price = formatDollars(priceUnit.toString());
const imagesMap = makeImageMap(images);
const imageUrl = imagesMap.SMALL_IMAGE ||
imagesMap.APP_IMAGE ||
imagesMap.LARGE_IMAGE ||
null;
const imageProps = makeImageProps(config, 'pointsReward__image', imageUrl, apiUrl);
const { per } = points;
const quantityApplied = itemPointsApplied / per;
const discount = formatDollars((priceUnit * quantityApplied).toString());
const msgAppplied = `${itemPointsApplied} points applied for ${discount} off`;
const incrementDisabled = quantity === quantityApplied || pointsRemaining < per;
const disabled = incrementDisabled && quantityApplied === 0;
return (React.createElement(View, Object.assign({}, makeProps(config, itemPointsApplied
? 'pointsReward__isApplied'
: disabled
? 'pointsReward__disabled'
: 'pointsReward')),
React.createElement(View, Object.assign({}, makeProps(config, 'pointsReward__container')),
React.createElement(View, Object.assign({}, imageProps)),
React.createElement(View, Object.assign({}, makeProps(config, 'pointsReward__content')),
React.createElement(View, Object.assign({}, makeProps(config, 'pointsReward__info')),
React.createElement(View, Object.assign({}, makeProps(config, 'pointsReward__infoHeader')),
React.createElement(Text, Object.assign({}, makeProps(config, 'pointsReward__name'), { text: name })),
React.createElement(View, Object.assign({}, makeProps(config, 'pointsReward__quantityPrice')),
React.createElement(View, Object.assign({}, makeProps(config, 'pointsReward__quantityContainer')),
React.createElement(Text, Object.assign({}, makeProps(config, 'pointsReward__quantity'), { text: `${quantity}` }))),
React.createElement(Text, Object.assign({}, makeProps(config, 'pointsReward__price'), { text: price })))),
React.createElement(View, Object.assign({}, makeProps(config, 'pointsReward__infoContent')),
React.createElement(Text, Object.assign({}, makeProps(config, 'pointsReward__pointsPer'), { text: `${per} points per item` }))),
React.createElement(View, Object.assign({}, makeProps(config, 'pointsReward__infoFooter')),
itemPointsApplied ? (React.createElement(SuccessMessage, Object.assign({ config: successMessageConfig }, makeProps(config, 'pointsReward__pointsApplied')), msgAppplied)) : (React.createElement(Text, Object.assign({}, makeProps(config, 'pointsReward__pointsMessage'), { text: "0 points applied" }))),
renderQuantity(quantityApplied, incrementDisabled)))))));
};
export default PointsReward;