@open-tender/ui
Version:
A component library for use with the Open Tender web app
50 lines (49 loc) • 4.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const utils_1 = require("@open-tender/utils");
const react_1 = tslib_1.__importDefault(require("react"));
const utils_2 = require("../utils");
const SuccessMessage_1 = tslib_1.__importDefault(require("./SuccessMessage"));
const Text_1 = tslib_1.__importDefault(require("./Text"));
const View_1 = tslib_1.__importDefault(require("./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 = (0, utils_1.formatDollars)(priceUnit.toString());
const imagesMap = (0, utils_1.makeImageMap)(images);
const imageUrl = imagesMap.SMALL_IMAGE ||
imagesMap.APP_IMAGE ||
imagesMap.LARGE_IMAGE ||
null;
const imageProps = (0, utils_2.makeImageProps)(config, 'pointsReward__image', imageUrl, apiUrl);
const { per } = points;
const quantityApplied = itemPointsApplied / per;
const discount = (0, utils_1.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_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, itemPointsApplied
? 'pointsReward__isApplied'
: disabled
? 'pointsReward__disabled'
: 'pointsReward')),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__container')),
react_1.default.createElement(View_1.default, Object.assign({}, imageProps)),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__content')),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__info')),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__infoHeader')),
react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__name'), { text: name })),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__quantityPrice')),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__quantityContainer')),
react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__quantity'), { text: `${quantity}` }))),
react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__price'), { text: price })))),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__infoContent')),
react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__pointsPer'), { text: `${per} points per item` }))),
react_1.default.createElement(View_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__infoFooter')),
itemPointsApplied ? (react_1.default.createElement(SuccessMessage_1.default, Object.assign({ config: successMessageConfig }, (0, utils_2.makeProps)(config, 'pointsReward__pointsApplied')), msgAppplied)) : (react_1.default.createElement(Text_1.default, Object.assign({}, (0, utils_2.makeProps)(config, 'pointsReward__pointsMessage'), { text: "0 points applied" }))),
renderQuantity(quantityApplied, incrementDisabled)))))));
};
exports.default = PointsReward;