index.jsx

/*
 * Copyright (c) 2023, Salesforce, Inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */
import React, {useState, useMemo} from 'react'
import {FormattedMessage, useIntl} from 'react-intl'

// Chakra Components
import {
    Box,
    Stack,
    Grid,
    GridItem,
    Container,
    Button,
    Text,
    useDisclosure
} from '@salesforce/retail-react-app/app/components/shared/ui'

// Project Components
import CartCta from '@salesforce/retail-react-app/app/pages/cart/partials/cart-cta'
import CartSecondaryButtonGroup from '@salesforce/retail-react-app/app/pages/cart/partials/cart-secondary-button-group'
import CartSkeleton from '@salesforce/retail-react-app/app/pages/cart/partials/cart-skeleton'
import CartTitle from '@salesforce/retail-react-app/app/pages/cart/partials/cart-title'
import ConfirmationModal from '@salesforce/retail-react-app/app/components/confirmation-modal'
import EmptyCart from '@salesforce/retail-react-app/app/pages/cart/partials/empty-cart'
import OrderSummary from '@salesforce/retail-react-app/app/components/order-summary'
import ProductItem from '@salesforce/retail-react-app/app/components/product-item'
import ProductViewModal from '@salesforce/retail-react-app/app/components/product-view-modal'
import BundleProductViewModal from '@salesforce/retail-react-app/app/components/product-view-modal/bundle'
import RecommendedProducts from '@salesforce/retail-react-app/app/components/recommended-products'

// Hooks
import {useToast} from '@salesforce/retail-react-app/app/hooks/use-toast'
import useNavigation from '@salesforce/retail-react-app/app/hooks/use-navigation'
import {useWishList} from '@salesforce/retail-react-app/app/hooks/use-wish-list'

// Constants
import {
    API_ERROR_MESSAGE,
    EINSTEIN_RECOMMENDERS,
    TOAST_ACTION_VIEW_WISHLIST,
    TOAST_MESSAGE_ADDED_TO_WISHLIST,
    TOAST_MESSAGE_REMOVED_ITEM_FROM_CART,
    TOAST_MESSAGE_ALREADY_IN_WISHLIST,
    STORE_LOCATOR_IS_ENABLED
} from '@salesforce/retail-react-app/app/constants'
import {REMOVE_CART_ITEM_CONFIRMATION_DIALOG_CONFIG} from '@salesforce/retail-react-app/app/pages/cart/partials/cart-secondary-button-group'

// Utilities
import debounce from 'lodash/debounce'
import {useCurrentBasket} from '@salesforce/retail-react-app/app/hooks/use-current-basket'
import {
    useShopperBasketsMutation,
    useShippingMethodsForShipment,
    useProducts,
    useShopperCustomersMutation,
    useStores
} from '@salesforce/commerce-sdk-react'
import {useCurrentCustomer} from '@salesforce/retail-react-app/app/hooks/use-current-customer'
import UnavailableProductConfirmationModal from '@salesforce/retail-react-app/app/components/unavailable-product-confirmation-modal'
import {getUpdateBundleChildArray} from '@salesforce/retail-react-app/app/utils/product-utils'
import {useSelectedStore} from '@salesforce/retail-react-app/app/hooks/use-selected-store'

const DEBOUNCE_WAIT = 750

const Cart = () => {
    const {data: basket, isLoading} = useCurrentBasket()

    // Pickup in Store - only enabled if feature toggle is on
    const isBopisEnabled = STORE_LOCATOR_IS_ENABLED
    const isPickupOrder = isBopisEnabled
        ? basket?.shipments[0]?.shippingMethod?.c_storePickupEnabled === true
        : false
    const storeId = isBopisEnabled ? basket?.shipments?.[0]?.c_fromStoreId : null
    const {data: storeData} = useStores(
        {
            parameters: {
                ids: storeId
            }
        },
        {
            enabled: !!storeId && isBopisEnabled
        }
    )
    const storeName = storeData?.data?.[0]?.name

    const {selectedStore} = useSelectedStore()
    const selectedInventoryId = isBopisEnabled ? selectedStore?.inventoryId || null : null
    const productIds = basket?.productItems?.map(({productId}) => productId).join(',') ?? ''
    const {data: products, isLoading: isProductsLoading} = useProducts(
        {
            parameters: {
                ids: productIds,
                allImages: true,
                perPricebook: true,
                ...(selectedInventoryId ? {inventoryIds: selectedInventoryId} : {})
            }
        },
        {
            enabled: Boolean(productIds),
            select: (result) => {
                return result?.data?.reduce((result, item) => {
                    const key = item.id
                    result[key] = item
                    return result
                }, {})
            }
        }
    )

    const {data: customer} = useCurrentCustomer()
    const {customerId, isRegistered} = customer

    /***************** Product Bundles ************************/
    const bundleChildVariantIds = []
    basket?.productItems?.forEach((productItem) => {
        productItem?.bundledProductItems?.forEach((childProduct) => {
            bundleChildVariantIds.push(childProduct.productId)
        })
    })

    const {data: bundleChildProductData} = useProducts(
        {
            parameters: {
                ids: bundleChildVariantIds?.join(','),
                allImages: false,
                expand: ['availability', 'variations'],
                select: '(data.(id,inventory))',
                ...(selectedInventoryId ? {inventoryIds: selectedInventoryId} : {})
            }
        },
        {
            enabled: bundleChildVariantIds?.length > 0,
            keepPreviousData: true,
            select: (result) => {
                return result?.data?.reduce((result, item) => {
                    const key = item.id
                    result[key] = item
                    return result
                }, {})
            }
        }
    )

    // We use the `products` object to reference products by itemId instead of productId
    // Since with product bundles, even though the parent productId is the same,
    // variant selection of the bundle children can be different,
    // and require unique references to each product bundle
    const productsByItemId = useMemo(() => {
        const updateProductsByItemId = {}
        basket?.productItems?.forEach((productItem) => {
            let currentProduct = products?.[productItem?.productId]

            // calculate inventory for product bundles based on availability of children
            if (productItem?.bundledProductItems && bundleChildProductData) {
                let lowestStockLevel =
                    currentProduct?.inventory?.stockLevel ?? Number.MAX_SAFE_INTEGER
                let productWithLowestInventory = ''
                productItem?.bundledProductItems.forEach((bundleChild) => {
                    const bundleChildStockLevel =
                        bundleChildProductData?.[bundleChild.productId]?.inventory?.stockLevel ??
                        Number.MAX_SAFE_INTEGER
                    lowestStockLevel = Math.min(lowestStockLevel, bundleChildStockLevel)
                    if (lowestStockLevel === bundleChildStockLevel)
                        productWithLowestInventory = bundleChild.productName
                })

                if (currentProduct?.inventory) {
                    currentProduct = {
                        ...currentProduct,
                        inventory: {
                            ...currentProduct.inventory,
                            stockLevel: lowestStockLevel,
                            lowestStockLevelProductName: productWithLowestInventory
                        }
                    }
                }

                // Update in-store inventories for the selected store with the lowest stock level and product name
                if (selectedInventoryId) {
                    let selectedStoreInventory = currentProduct?.inventories?.find(
                        (inventory) => inventory.id === selectedInventoryId
                    )
                    let lowestInStoreStockLevel =
                        selectedStoreInventory?.stockLevel ?? Number.MAX_SAFE_INTEGER
                    let productWithLowestInventory = ''
                    productItem?.bundledProductItems.forEach((bundleChild) => {
                        const bundleChildInstoreInventory = bundleChildProductData?.[
                            bundleChild.productId
                        ]?.inventories?.find((inventory) => inventory.id === selectedInventoryId)
                        const bundleChildInstoreStockLevel =
                            bundleChildInstoreInventory?.stockLevel ?? Number.MAX_SAFE_INTEGER
                        lowestInStoreStockLevel = Math.min(
                            lowestInStoreStockLevel,
                            bundleChildInstoreStockLevel
                        )
                        if (lowestInStoreStockLevel === bundleChildInstoreStockLevel)
                            productWithLowestInventory = bundleChild.productName
                    })

                    // Update in-store inventories for the selected store with the lowest stock level and product name
                    if (selectedStoreInventory) {
                        const updatedInventories = currentProduct.inventories.map((inventory) => {
                            if (inventory.id === selectedInventoryId) {
                                return {
                                    ...inventory,
                                    stockLevel: lowestInStoreStockLevel,
                                    lowestStockLevelProductName: productWithLowestInventory
                                }
                            }
                            return inventory
                        })

                        currentProduct = {
                            ...currentProduct,
                            inventories: updatedInventories
                        }
                    }
                }
            }
            updateProductsByItemId[productItem.itemId] = currentProduct
        })
        return updateProductsByItemId
    }, [basket, products, bundleChildProductData])

    /*****************Basket Mutation************************/
    const updateItemInBasketMutation = useShopperBasketsMutation('updateItemInBasket')
    const updateItemsInBasketMutation = useShopperBasketsMutation('updateItemsInBasket')
    const removeItemFromBasketMutation = useShopperBasketsMutation('removeItemFromBasket')
    const updateShippingMethodForShipmentsMutation = useShopperBasketsMutation(
        'updateShippingMethodForShipment'
    )
    /*****************Basket Mutation************************/

    const [selectedItem, setSelectedItem] = useState(undefined)
    const [localQuantity, setLocalQuantity] = useState({})
    const [localIsGiftItems, setLocalIsGiftItems] = useState({})
    const [isCartItemLoading, setCartItemLoading] = useState(false)

    const {isOpen, onOpen, onClose} = useDisclosure()
    const {formatMessage} = useIntl()
    const toast = useToast()
    const navigate = useNavigation()
    const modalProps = useDisclosure()

    /******************* Shipping Methods for basket shipment *******************/
    // do this action only if the basket shipping method is not defined
    // we need to fetch the shippment methods to get the default value before we can add it to the basket
    useShippingMethodsForShipment(
        {
            parameters: {
                basketId: basket?.basketId,
                shipmentId: 'me'
            }
        },
        {
            // only fetch if basket is has no shipping method in the first shipment
            enabled:
                !!basket?.basketId &&
                basket.shipments.length > 0 &&
                !basket.shipments[0].shippingMethod,
            onSuccess: (data) => {
                updateShippingMethodForShipmentsMutation.mutate({
                    parameters: {
                        basketId: basket?.basketId,
                        shipmentId: 'me'
                    },
                    body: {
                        id: data.defaultShippingMethodId
                    }
                })
            }
        }
    )

    /************************* Error handling ***********************/
    const showError = () => {
        toast({
            title: formatMessage(API_ERROR_MESSAGE),
            status: 'error'
        })
    }
    /************************* Error handling ***********************/

    /**************** Wishlist ****************/
    const {data: wishlist} = useWishList()

    const createCustomerProductListItem = useShopperCustomersMutation(
        'createCustomerProductListItem'
    )
    const handleAddToWishlist = async (product) => {
        try {
            if (!customerId || !wishlist) {
                return
            }

            const isItemInWishlist = wishlist?.customerProductListItems?.find(
                (i) => i.productId === product?.id
            )

            if (!isItemInWishlist) {
                await createCustomerProductListItem.mutateAsync({
                    parameters: {
                        listId: wishlist.id,
                        customerId
                    },
                    body: {
                        // NOTE: APi does not respect quantity, it always adds 1
                        quantity: product.quantity,
                        productId: product.productId,
                        public: false,
                        priority: 1,
                        type: 'product'
                    }
                })
                toast({
                    title: formatMessage(TOAST_MESSAGE_ADDED_TO_WISHLIST, {quantity: 1}),
                    status: 'success',
                    action: (
                        // it would be better if we could use <Button as={Link}>
                        // but unfortunately the Link component is not compatible
                        // with Chakra Toast, since the ToastManager is rendered via portal
                        // and the toast doesn't have access to intl provider, which is a
                        // requirement of the Link component.
                        <Button variant="link" onClick={() => navigate('/account/wishlist')}>
                            {formatMessage(TOAST_ACTION_VIEW_WISHLIST)}
                        </Button>
                    )
                })
            } else {
                toast({
                    title: formatMessage(TOAST_MESSAGE_ALREADY_IN_WISHLIST),
                    status: 'info',
                    action: (
                        <Button variant="link" onClick={() => navigate('/account/wishlist')}>
                            {formatMessage(TOAST_ACTION_VIEW_WISHLIST)}
                        </Button>
                    )
                })
            }
        } catch {
            showError()
        }
    }
    /**************** Wishlist ****************/

    /***************************** Update Cart **************************/
    const handleUpdateCart = async (variant, quantity) => {
        // close the modal before handle the change
        onClose()
        // using try-catch is better than using onError callback since we have many mutation calls logic here
        try {
            setCartItemLoading(true)
            const productIds = basket.productItems.map(({productId}) => productId)

            // The user is selecting different variant, and it has not existed in basket
            if (selectedItem.id !== variant.productId && !productIds.includes(variant.productId)) {
                const item = {
                    productId: variant.productId,
                    quantity,
                    price: variant.price
                }
                return await updateItemInBasketMutation.mutateAsync({
                    parameters: {
                        basketId: basket.basketId,
                        itemId: selectedItem.itemId
                    },
                    body: item
                })
            }

            // The user is selecting different variant, and it has existed in basket
            // remove this item in the basket, change the quantity for the new selected variant in the basket
            if (selectedItem.id !== variant.productId && productIds.includes(variant.productId)) {
                await removeItemFromBasketMutation.mutateAsync({
                    parameters: {
                        basketId: basket.basketId,
                        itemId: selectedItem.itemId
                    }
                })
                const basketItem = basket.productItems.find(
                    ({productId}) => productId === variant.productId
                )
                const newQuantity = quantity + basketItem.quantity
                return await changeItemQuantity(newQuantity, basketItem)
            }

            // the user only changes quantity of the same variant
            if (selectedItem.quantity !== quantity) {
                return await changeItemQuantity(quantity, selectedItem)
            }
        } catch {
            showError()
        } finally {
            setCartItemLoading(false)
            setSelectedItem(undefined)
        }
    }

    const handleUpdateBundle = async (bundle, bundleQuantity, childProducts) => {
        // close the modal before handle the change
        onClose()

        try {
            setCartItemLoading(true)
            const itemsToBeUpdated = getUpdateBundleChildArray(bundle, childProducts)

            // We only update the parent bundle when the quantity changes
            // Since top level bundles don't have variants
            if (bundle.quantity !== bundleQuantity) {
                itemsToBeUpdated.unshift({
                    itemId: bundle.itemId,
                    productId: bundle.productId,
                    quantity: bundleQuantity
                })
            }

            if (itemsToBeUpdated.length) {
                await updateItemsInBasketMutation.mutateAsync({
                    method: 'PATCH',
                    parameters: {
                        basketId: basket.basketId
                    },
                    body: itemsToBeUpdated
                })
            }
        } catch {
            showError()
        } finally {
            setCartItemLoading(false)
            setSelectedItem(undefined)
        }
    }

    const handleIsAGiftChange = async (product, checked) => {
        try {
            const previousVal = localIsGiftItems[product.itemId]
            setLocalIsGiftItems({
                ...localIsGiftItems,
                [product.itemId]: checked
            })
            setCartItemLoading(true)
            setSelectedItem(product)
            await updateItemInBasketMutation.mutateAsync(
                {
                    parameters: {basketId: basket?.basketId, itemId: product.itemId},
                    body: {
                        productId: product.id,
                        quantity: parseInt(product.quantity),
                        gift: checked
                    }
                },
                {
                    onSettled: () => {
                        // reset the state
                        setCartItemLoading(false)
                        setSelectedItem(undefined)
                    },
                    onSuccess: () => {
                        setLocalIsGiftItems({...localIsGiftItems, [product.itemId]: undefined})
                    },
                    onError: () => {
                        // reset the quantity to the previous value
                        setLocalIsGiftItems({...localIsGiftItems, [product.itemId]: previousVal})
                        showError()
                    }
                }
            )
        } catch (e) {
            showError()
        } finally {
            setCartItemLoading(false)
            setSelectedItem(undefined)
        }
    }

    const handleUnavailableProducts = async (unavailableProductIds) => {
        const productItems = basket?.productItems?.filter((item) =>
            unavailableProductIds?.includes(item.productId)
        )

        await Promise.all(
            productItems.map(async (item) => {
                await handleRemoveItem(item)
            })
        )
    }
    /***************************** Update Cart **************************/

    /***************************** Update quantity **************************/
    const changeItemQuantity = debounce(async (quantity, product) => {
        // This local state allows the dropdown to show the desired quantity
        // while the API call to update it is happening.
        const previousQuantity = localQuantity[product.itemId]
        setLocalQuantity({...localQuantity, [product.itemId]: quantity})
        setCartItemLoading(true)
        setSelectedItem(product)

        await updateItemInBasketMutation.mutateAsync(
            {
                parameters: {basketId: basket?.basketId, itemId: product.itemId},
                body: {
                    productId: product.id,
                    quantity: parseInt(quantity)
                }
            },
            {
                onSettled: () => {
                    // reset the state
                    setCartItemLoading(false)
                    setSelectedItem(undefined)
                },
                onSuccess: () => {
                    setLocalQuantity({...localQuantity, [product.itemId]: undefined})
                },
                onError: () => {
                    // reset the quantity to the previous value
                    setLocalQuantity({...localQuantity, [product.itemId]: previousQuantity})
                    showError()
                }
            }
        )
    }, DEBOUNCE_WAIT)

    const handleChangeItemQuantity = async (product, value) => {
        const stockLevel = productsByItemId?.[product.itemId]?.inventory?.stockLevel ?? 1

        // Handle removing of the items when 0 is selected.
        if (value === 0) {
            // Flush last call to keep ui in sync with data.
            changeItemQuantity.flush()

            // Set the selected item to the current product to the modal acts on it.
            setSelectedItem(product)

            // Show the modal.
            modalProps.onOpen()

            // Return false as 0 isn't valid section.
            return false
        }

        // Cancel any pending handlers.
        changeItemQuantity.cancel()

        // Allow use to selected values above the inventory.
        if (value > stockLevel || value === product.quantity) {
            return true
        }

        // Take action.
        changeItemQuantity(value, product)

        return true
    }
    /***************************** Update quantity **************************/

    /***************************** Remove Item from basket **************************/
    const handleRemoveItem = async (product) => {
        setSelectedItem(product)
        setCartItemLoading(true)
        await removeItemFromBasketMutation.mutateAsync(
            {
                parameters: {basketId: basket.basketId, itemId: product.itemId}
            },
            {
                onSettled: () => {
                    // reset the state
                    setCartItemLoading(false)
                    setSelectedItem(undefined)
                },
                onSuccess: () => {
                    toast({
                        title: formatMessage(TOAST_MESSAGE_REMOVED_ITEM_FROM_CART, {quantity: 1}),
                        status: 'success'
                    })
                },
                onError: () => {
                    showError()
                }
            }
        )
    }

    /********* Rendering  UI **********/
    if (isLoading) {
        return <CartSkeleton />
    }

    if (!isLoading && !basket?.productItems?.length) {
        return <EmptyCart isRegistered={isRegistered} />
    }
    return (
        <Box background="gray.50" flex="1" data-testid="sf-cart-container">
            {/* <Helmet>
                <title>Cart</title>
            </Helmet> */}
            <Container
                maxWidth="container.xl"
                px={[4, 6, 6, 4]}
                paddingTop={{base: 8, lg: 8}}
                paddingBottom={{base: 8, lg: 14}}
            >
                <Stack spacing={24}>
                    <Stack spacing={4}>
                        <CartTitle />
                        <Grid
                            templateColumns={{base: '1fr', lg: '66% 1fr'}}
                            gap={{base: 10, xl: 20}}
                        >
                            <GridItem>
                                <Stack spacing={4}>
                                    {/* Order Type Display */}
                                    {isBopisEnabled && (
                                        <Box layerStyle="cardBordered" p={3}>
                                            {isPickupOrder ? (
                                                <Text fontWeight="bold">
                                                    <FormattedMessage
                                                        defaultMessage="Pickup in Store ({storeName})"
                                                        id="cart.order_type.pickup_in_store"
                                                        values={{
                                                            storeName
                                                        }}
                                                    />
                                                </Text>
                                            ) : (
                                                <Text fontWeight="bold">
                                                    <FormattedMessage
                                                        defaultMessage="Delivery"
                                                        id="cart.order_type.delivery"
                                                    />
                                                </Text>
                                            )}
                                        </Box>
                                    )}
                                    {basket.productItems?.map((productItem, idx) => {
                                        return (
                                            <ProductItem
                                                key={productItem.itemId}
                                                index={idx}
                                                secondaryActions={
                                                    <CartSecondaryButtonGroup
                                                        isAGift={
                                                            localIsGiftItems[productItem.itemId]
                                                                ? localIsGiftItems[
                                                                      productItem.itemId
                                                                  ]
                                                                : productItem.gift
                                                        }
                                                        onIsAGiftChange={handleIsAGiftChange}
                                                        onAddToWishlistClick={handleAddToWishlist}
                                                        onEditClick={(product) => {
                                                            setSelectedItem(product)
                                                            onOpen()
                                                        }}
                                                        onRemoveItemClick={handleRemoveItem}
                                                    />
                                                }
                                                product={{
                                                    ...productItem,
                                                    ...(productsByItemId &&
                                                        productsByItemId[productItem.itemId]),
                                                    isProductUnavailable: !isProductsLoading
                                                        ? !productsByItemId?.[productItem.itemId]
                                                        : undefined,
                                                    price: productItem.price,
                                                    quantity: localQuantity[productItem.itemId]
                                                        ? localQuantity[productItem.itemId]
                                                        : productItem.quantity
                                                }}
                                                onItemQuantityChange={handleChangeItemQuantity.bind(
                                                    this,
                                                    productItem
                                                )}
                                                showLoading={
                                                    isCartItemLoading &&
                                                    selectedItem?.itemId === productItem.itemId
                                                }
                                                handleRemoveItem={handleRemoveItem}
                                            />
                                        )
                                    })}
                                </Stack>
                                <Box>
                                    {isOpen && !selectedItem.bundledProductItems && (
                                        <ProductViewModal
                                            isOpen={isOpen}
                                            onOpen={onOpen}
                                            onClose={onClose}
                                            product={selectedItem}
                                            updateCart={(variant, quantity) =>
                                                handleUpdateCart(variant, quantity)
                                            }
                                            showDeliveryOptions={false}
                                        />
                                    )}
                                    {isOpen && selectedItem.bundledProductItems && (
                                        <BundleProductViewModal
                                            isOpen={isOpen}
                                            onOpen={onOpen}
                                            onClose={onClose}
                                            product={selectedItem}
                                            updateCart={(product, quantity, childProducts) =>
                                                handleUpdateBundle(product, quantity, childProducts)
                                            }
                                        />
                                    )}
                                </Box>
                            </GridItem>
                            <GridItem>
                                <Stack spacing={4}>
                                    <OrderSummary
                                        showPromoCodeForm={true}
                                        isEstimate={true}
                                        basket={basket}
                                    />
                                    <Box display={{base: 'none', lg: 'block'}}>
                                        <CartCta />
                                    </Box>
                                </Stack>
                            </GridItem>
                        </Grid>

                        {/* Product Recommendations */}
                        <Stack spacing={16}>
                            <RecommendedProducts
                                title={
                                    <FormattedMessage
                                        defaultMessage="Recently Viewed"
                                        id="cart.recommended_products.title.recently_viewed"
                                    />
                                }
                                recommender={EINSTEIN_RECOMMENDERS.CART_RECENTLY_VIEWED}
                                mx={{base: -4, sm: -6, lg: 0}}
                            />

                            <RecommendedProducts
                                title={
                                    <FormattedMessage
                                        defaultMessage="You May Also Like"
                                        id="cart.recommended_products.title.may_also_like"
                                    />
                                }
                                recommender={EINSTEIN_RECOMMENDERS.CART_MAY_ALSO_LIKE}
                                products={basket?.productItems}
                                shouldFetch={() =>
                                    basket?.basketId && basket.productItems?.length > 0
                                }
                                mx={{base: -4, sm: -6, lg: 0}}
                            />
                        </Stack>
                    </Stack>
                </Stack>
            </Container>

            <Box
                h="130px"
                position="sticky"
                bottom={0}
                bg="white"
                display={{base: 'block', lg: 'none'}}
                align="center"
            >
                <CartCta />
            </Box>
            <ConfirmationModal
                {...REMOVE_CART_ITEM_CONFIRMATION_DIALOG_CONFIG}
                onPrimaryAction={() => {
                    handleRemoveItem(selectedItem)
                }}
                onAlternateAction={() => {}}
                {...modalProps}
            />

            <UnavailableProductConfirmationModal
                productItems={basket?.productItems}
                handleUnavailableProducts={handleUnavailableProducts}
            />
        </Box>
    )
}

Cart.getTemplateName = () => 'cart'

export default Cart