Untitled
unknown
plain_text
7 months ago
3.7 kB
0
Indexable
Never
import { ActionSheet, ActionSheetContent, ActionSheetTrigger, } from '@components/molecules/ActionSheet'; import { Image } from '@atoms/Image'; import { Container } from '@atoms/Container/Container'; import { Card } from '@components/molecules/Card'; import { Color } from '@molecules/Color'; import { Text } from '@atoms/Text'; import { Select } from '@molecules/Select'; import { useBasket } from '@modules/basket/scripts/hooks'; import { useTranslations } from '@modules/app-wrapper/scripts/contexts/translations.context'; import { Link } from '@components/atoms/Link'; import { useRouter } from 'next/router'; import { Icon } from '@components/atoms/Icon'; import { IconName } from '@functional/DynamicIconsMap'; /** * @TODO: * Currently the getBasket api does not return all product data that is needed. * Custom HitTile endpoint is being developed and should be used to retrieve the missing data once ready. */ const CardBody = (productItem: TBasketProductItem) => ( <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}> <Text type="labelMedium" css={{ color: '$red' }}> Only 1 item left </Text> <Link linkUrl={`/product/${productItem.productId}`}> <Text color={'black'} as={'h4'} type="h4"> {productItem.productName} </Text> </Link> <Container display="flex" alignItems="center"> <Color color="#000" label="Black" css={{ color: '$blackGrey', padding: '$xs 0' }} /> <Text css={{ marginLeft: '$m' }} color="blackGrey" type="labelSmall"> Size Small </Text> </Container> <Select id="quantity" placeholder="quantity" options={[ { id: '1', label: 'Quantity 1' }, { id: '2', label: 'Quantity 2' }, ]} variant={'secondary'} /> </div> ); /** * @TODO: * Currently the getBasket api does not return all product data that is needed. * Custom HitTile endpoint is being developed and should be used to retrieve the missing data once ready. */ export const MiniCart = () => { const { data, isLoading, error } = useBasket(); const { locale } = useRouter(); const { t } = useTranslations(); return ( <ActionSheet> <ActionSheetTrigger> <Icon iconName={IconName.ShoppingBag} /> </ActionSheetTrigger> <ActionSheetContent title={t( 'minicart.title', data?.basket?.productItems?.length.toString() || '0' )} > {data?.basket?.productItems?.map((productItem) => ( <div> <CardBody {...productItem} /> <Card key={productItem.productId} align="center" assets={ <Link linkUrl={`/product/${productItem.productId}`}> <Image alt="Test" src="https://amq-sandbox.getbynder.com/m/637f569672ccdaa4/webimage-TheSlash-WhiteBag.png" /> </Link> } dir="horizontal" main={<CardBody {...productItem} />} actions={ <div style={{ display: 'flex', gap: 16 }}> <Text type="labelSmall">Remove</Text> </div> } price={ <Text type="labelSmall"> {productItem.price?.toLocaleString(locale, { currency: data.basket?.currency, style: 'currency', })} </Text> } ratio="portrait" /> </div> ))} <pre>{JSON.stringify(data, null, 2)}</pre> </ActionSheetContent> </ActionSheet> ); };