@open-tender/ui
Version:
A component library for use with the Open Tender web app
28 lines (27 loc) • 2.29 kB
JavaScript
import { formatDollars, formatQuantity, makeModifierNames } from '@open-tender/utils';
import { Plus } from 'iconoir-react';
import React from 'react';
import { makeImageProps, makeProps } from '../utils';
import Button from './Button';
import Text from './Text';
import View from './View';
const UpsellItem = ({ config, handlers, item, isLast, apiUrl, displayCals = false }) => {
const { name, imageUrl, totalPrice, totalCals } = item;
const desc = makeModifierNames(item);
const imageProps = makeImageProps(config, 'upsellItem__image', imageUrl, apiUrl);
return (React.createElement(View, Object.assign({}, makeProps(config, isLast ? 'upsellItem' : 'upsellItem')),
React.createElement(Button, Object.assign({}, makeProps(config, 'upsellItem__button'), { onClick: handlers.add }),
React.createElement(View, Object.assign({}, makeProps(config, 'upsellItem__container')),
React.createElement(View, Object.assign({}, imageProps)),
React.createElement(View, Object.assign({}, makeProps(config, 'upsellItem__info')),
React.createElement(View, Object.assign({}, makeProps(config, 'upsellItem__header')),
React.createElement(Text, Object.assign({}, makeProps(config, 'upsellItem__title'), { text: name })),
React.createElement(View, Object.assign({}, makeProps(config, 'upsellItem__details')),
totalPrice !== null && (React.createElement(Text, Object.assign({}, makeProps(config, 'upsellItem__price'), { text: formatDollars(totalPrice.toString()) }))),
displayCals && totalCals !== null && (React.createElement(Text, Object.assign({}, makeProps(config, 'upsellItem__calories'), { text: `${formatQuantity(totalCals.toString())} Cal` }))))),
React.createElement(View, Object.assign({}, makeProps(config, 'upsellItem__content')),
React.createElement(Text, Object.assign({}, makeProps(config, 'upsellItem__description'), { text: desc })))),
React.createElement(View, Object.assign({}, makeProps(config, 'upsellItem__add')),
React.createElement(Plus, { width: 28, height: 28, strokeWidth: 2 }))))));
};
export default UpsellItem;