Add validation components to cart/checkout, add redemption

composable-ui/next.config.js

@@ -34,6 +34,7 @@ module.exports = () => {
     transpilePackages: [
       '@composable/cms-generic',
       '@composable/commerce-generic',
+      '@composable/voucherify',
       '@composable/stripe',
       '@composable/types',
       '@composable/ui',

composable-ui/package.json

@@ -21,6 +21,7 @@
     "@chakra-ui/theme-tools": "^2.0.16",
     "@composable/cms-generic": "workspace:*",
     "@composable/commerce-generic": "workspace:*",
+    "@composable/voucherify": "workspace:*",
     "@composable/stripe": "workspace:*",
     "@composable/types": "workspace:*",
     "@composable/ui": "workspace:*",

composable-ui/src/components/cart/__data__/cart-data.ts

@@ -1,10 +1,14 @@
+import { CartItemWithDiscounts } from '@composable/types'
 import { CartData } from '../../../hooks'
 
 export const cartData: CartData = {
   id: '7a6dd462-24dc-11ed-861d-0242ac120002',
+  cartType: 'CartWithDiscounts',
+  redeemables: [],
   items: [
     {
       id: '1',
+      cartItemType: 'CartItemWithDiscounts',
       category: 'Accessories',
       type: 'Bag',
       name: 'Venture Daypack',
@@ -17,12 +21,18 @@ export const cartData: CartData = {
       sku: 'SKU-A1-2345',
       slug: 'venture-daypack',
       quantity: 1,
+      discounts: {
+        subtotalAmount: '',
+      },
     },
-  ],
+  ] as CartItemWithDiscounts[],
   summary: {
     taxes: '2.45',
     totalPrice: '35.00',
     shipping: 'Free',
+    discountAmount: '0',
+    totalDiscountAmount: '0',
+    grandPrice: '0',
   },
   isLoading: false,
   isEmpty: false,

composable-ui/src/components/cart/cart-drawer/cart-drawer-footer.tsx

@@ -11,12 +11,14 @@ import {
   Text,
   VStack,
 } from '@chakra-ui/react'
+import { CartSummaryProps } from '../cart-summary'
 
-export const CartDrawerFooter = () => {
+export const CartDrawerFooter = ({ cartData }: CartSummaryProps) => {
   const router = useRouter()
   const { cartDrawer } = useComposable()
   const { cart } = useCart()
   const intl = useIntl()
+  const _cartData = cartData ?? cart
 
   return (
     <Stack spacing="6" width="full">
@@ -33,7 +35,7 @@ export const CartDrawerFooter = () => {
           <Box>
             <Price
               rootProps={{ textStyle: { base: 'Mobile/XS', md: 'Desktop/M' } }}
-              price={cart.summary?.totalPrice ?? ''}
+              price={_cartData.summary?.grandPrice ?? ''}
             />
           </Box>
         </VStack>

composable-ui/src/components/cart/cart-drawer/cart-drawer-summary.tsx

@@ -3,50 +3,53 @@ import { useIntl } from 'react-intl'
 import { useCart } from 'hooks'
 import { CartDrawerSummaryItem } from './cart-drawer-summary-item'
 import { Price } from '../../price'
+import { CartSummaryItem } from '../cart-summary-item'
+import { CartSummaryProps } from '../cart-summary'
 
-export const CartDrawerSummary = () => {
+export const CartDrawerSummary = ({ cartData }: CartSummaryProps) => {
   const { cart } = useCart()
   const intl = useIntl()
+  const _cartData = cartData ?? cart
 
   return (
     <Box>
       <Divider m={'10px 0'} />
 
-      {cart.summary?.subtotalPrice && (
+      {_cartData.summary?.subtotalPrice && (
         <CartDrawerSummaryItem
           label={intl.formatMessage({ id: 'cart.summary.subtotal' })}
         >
           <Price
             rootProps={{ textStyle: 'Mobile/Body-S' }}
-            price={cart.summary.subtotalPrice}
+            price={_cartData.summary.subtotalPrice}
           />
         </CartDrawerSummaryItem>
       )}
 
-      {cart.summary?.taxes && (
+      {_cartData.summary?.taxes && (
         <CartDrawerSummaryItem
           label={intl.formatMessage({ id: 'cart.summary.taxes' })}
         >
           <Price
             rootProps={{ textStyle: 'Mobile/Body-S' }}
-            price={cart.summary.taxes}
+            price={_cartData.summary.taxes}
           />
         </CartDrawerSummaryItem>
       )}
 
-      {cart.summary?.shipping && (
+      {_cartData.summary?.shipping && (
         <CartDrawerSummaryItem
           label={intl.formatMessage({ id: 'cart.summary.shipping' })}
         >
           <Price
             rootProps={{ textStyle: 'Mobile/Body-S' }}
-            price={cart.summary.shipping}
+            price={_cartData.summary.shipping}
           />
         </CartDrawerSummaryItem>
       )}
       <Divider m={'10px 0'} />
 
-      {cart.summary?.totalPrice && (
+      {_cartData.summary?.totalPrice && (
         <>
           <Flex
             justify="space-between"
@@ -58,12 +61,40 @@ export const CartDrawerSummary = () => {
             <Box>
               <Price
                 rootProps={{ textStyle: 'Desktop/S' }}
-                price={cart.summary.totalPrice}
+                price={_cartData.summary.totalPrice}
               />
             </Box>
           </Flex>
         </>
       )}
+
+      {_cartData.summary?.totalDiscountAmount && (
+        <CartSummaryItem
+          label={intl.formatMessage({
+            id: 'cart.summary.totalDiscountAmount',
+          })}
+        >
+          <Price
+            rootProps={{ textStyle: 'Body-S', color: 'green' }}
+            price={`-${_cartData.summary.totalDiscountAmount}`}
+          />
+        </CartSummaryItem>
+      )}
+
+      {_cartData.summary?.grandPrice && (
+        <>
+          <Divider />
+          <Flex
+            justify="space-between"
+            textStyle={{ base: 'Mobile/S', md: 'Desktop/S' }}
+          >
+            <Text>{intl.formatMessage({ id: 'cart.summary.grandPrice' })}</Text>
+            <Box>
+              <Price price={_cartData.summary.grandPrice} />
+            </Box>
+          </Flex>
+        </>
+      )}
     </Box>
   )
 }

composable-ui/src/components/cart/cart-drawer/cart-drawer.tsx

@@ -17,13 +17,15 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { APP_CONFIG } from '../../../utils/constants'
-import { CartLoadingState } from '../.'
+import { CartLoadingState, CartSummaryProps } from '../.'
 import { CartDrawerFooter } from './cart-drawer-footer'
 import { CartDrawerSummary } from './cart-drawer-summary'
 import { CartDrawerEmptyState } from './cart-drawer-empty-state'
 import { HorizontalProductCard } from '@composable/ui'
+import { CouponForm } from '../../forms/coupon-form'
+import { CartPromotions } from '../cart-promotions'
 
-export const CartDrawer = () => {
+export const CartDrawer = ({ cartData }: CartSummaryProps) => {
   const intl = useIntl()
   const toast = useToast()
   const router = useRouter()
@@ -38,6 +40,8 @@ export const CartDrawer = () => {
     },
   })
 
+  const _cartData = cartData ?? cart
+
   const title = intl.formatMessage(
     { id: 'cart.drawer.titleCount' },
     { count: cart.quantity }
@@ -47,6 +51,11 @@ export const CartDrawer = () => {
     style: 'currency',
   }
 
+  const promotions =
+    _cartData.redeemables?.filter(
+      (redeemable) => redeemable.object === 'promotion_tier'
+    ) || []
+
   useEffect(() => {
     router.events.on('routeChangeStart', cartDrawer.onClose)
     return () => {
@@ -148,6 +157,8 @@ export const CartDrawer = () => {
                   )
                 })}
               </Stack>
+              <CartPromotions promotions={promotions} />
+              <CouponForm />
               <CartDrawerSummary />
             </Stack>
           )}

composable-ui/src/components/cart/cart-promotions.tsx

@@ -0,0 +1,49 @@
+import { useIntl } from 'react-intl'
+import { Redeemable } from '@composable/types'
+import { Box, Flex, Tag, TagLabel, TagLeftIcon } from '@chakra-ui/react'
+import { MdShoppingCart } from 'react-icons/md'
+import { Price } from 'components/price'
+import { CartSummaryItem } from '.'
+
+interface CartPromotionsProps {
+  promotions: Redeemable[]
+}
+
+export const CartPromotions = ({ promotions }: CartPromotionsProps) => {
+  const intl = useIntl()
+  // const isMobile = useBreakpointValue({ base: true, md: false })
+  if (!promotions.length) {
+    return null
+  }
+
+  return (
+    <>
+      <CartSummaryItem
+        label={intl.formatMessage({
+          id: 'cart.summary.promotions',
+        })}
+      ></CartSummaryItem>
+      {promotions.map((redeemable) => (
+        <Flex key={redeemable.id} justify="space-between">
+          <Tag
+            size="md"
+            paddingRight={2}
+            paddingLeft={2}
+            borderRadius="sm"
+            variant="outline"
+            colorScheme="whiteAlpha"
+          >
+            <TagLeftIcon boxSize="12px" as={MdShoppingCart} />
+            <TagLabel>{redeemable.label}</TagLabel>
+          </Tag>
+          <Box>
+            <Price
+              rootProps={{ textStyle: 'Body-S', color: 'green' }}
+              price={`-${redeemable.discount}`}
+            />
+          </Box>
+        </Flex>
+      ))}
+    </>
+  )
+}

composable-ui/src/components/cart/cart-summary.tsx

@@ -2,6 +2,7 @@ import { useIntl } from 'react-intl'
 import { useRouter } from 'next/router'
 import { CartData, useCart } from 'hooks'
 import { Price } from 'components/price'
+import { CouponForm } from 'components/forms/coupon-form'
 import {
   Box,
   Button,
@@ -12,8 +13,9 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { CartSummaryItem } from '.'
+import { CartPromotions } from './cart-promotions'
 
-interface CartSummaryProps {
+export interface CartSummaryProps {
   rootProps?: StackProps
   renderCheckoutButton?: boolean
   cartData?: CartData
@@ -29,6 +31,15 @@ export const CartSummary = ({
   const intl = useIntl()
   const _cartData = cartData ?? cart
 
+  const vouchers =
+    _cartData.redeemables?.filter(
+      (redeemable) => redeemable.object === 'voucher'
+    ) || []
+  const promotions =
+    _cartData.redeemables?.filter(
+      (redeemable) => redeemable.object === 'promotion_tier'
+    ) || []
+
   return (
     <Stack spacing={{ base: '4', md: '6' }} width="full" {...rootProps}>
       <Stack bg="shading.100" p={'2rem 1.5rem'}>
@@ -90,6 +101,37 @@ export const CartSummary = ({
               </Flex>
             </>
           )}
+          <CartPromotions promotions={promotions} />
+          <CouponForm />
+          {_cartData.summary?.totalDiscountAmount && (
+            <CartSummaryItem
+              label={intl.formatMessage({
+                id: 'cart.summary.totalDiscountAmount',
+              })}
+            >
+              <Price
+                rootProps={{ textStyle: 'Body-S', color: 'green' }}
+                price={`-${_cartData.summary.totalDiscountAmount}`}
+              />
+            </CartSummaryItem>
+          )}
+
+          {_cartData.summary?.grandPrice && (
+            <>
+              <Divider />
+              <Flex
+                justify="space-between"
+                textStyle={{ base: 'Mobile/S', md: 'Desktop/S' }}
+              >
+                <Text>
+                  {intl.formatMessage({ id: 'cart.summary.grandPrice' })}
+                </Text>
+                <Box>
+                  <Price price={_cartData.summary.grandPrice} />
+                </Box>
+              </Flex>
+            </>
+          )}
         </Stack>
       </Stack>