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

@@ -27,13 +27,13 @@ export const CartDrawerFooter = () => {
               color={'text-muted'}
               textStyle={{ base: 'Mobile/Eyebrow', md: 'Desktop/Body-XS' }}
             >
-              {intl.formatMessage({ id: 'cart.summary.estimatedTotal' })}
+              {intl.formatMessage({ id: 'cart.summary.grandPrice' })}
             </Text>
           </Box>
           <Box>
             <Price
               rootProps={{ textStyle: { base: 'Mobile/XS', md: 'Desktop/M' } }}
-              price={cart.summary?.totalPrice ?? ''}
+              price={cart.summary?.grandPrice ?? ''}
             />
           </Box>
         </VStack>

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

@@ -47,19 +47,43 @@ export const CartDrawerSummary = () => {
       <Divider m={'10px 0'} />
 
       {cart.summary?.totalPrice && (
+        <CartDrawerSummaryItem
+          label={intl.formatMessage({ id: 'cart.summary.orderTotal' })}
+        >
+          <Box>
+            <Price
+              rootProps={{ textStyle: 'Desktop/XS' }}
+              price={cart.summary.totalPrice}
+            />
+          </Box>
+        </CartDrawerSummaryItem>
+      )}
+
+      {cart.summary?.totalDiscountAmount && (
+        <CartDrawerSummaryItem
+          label={intl.formatMessage({ id: 'cart.summary.totalDiscountAmount' })}
+        >
+          <Box>
+            <Price
+              rootProps={{
+                textStyle: 'Body-XS',
+                color: 'green',
+              }}
+              price={`-${cart.summary.totalDiscountAmount}`}
+            />
+          </Box>
+        </CartDrawerSummaryItem>
+      )}
+      <Divider m={'10px 0'} />
+      {cart.summary?.grandPrice && (
         <>
           <Flex
             justify="space-between"
             textStyle={{ base: 'Mobile/S', md: 'Desktop/S' }}
           >
-            <Text>
-              {intl.formatMessage({ id: 'cart.summary.estimatedTotal' })}
-            </Text>
+            <Text>{intl.formatMessage({ id: 'cart.summary.grandPrice' })}</Text>
             <Box>
-              <Price
-                rootProps={{ textStyle: 'Desktop/S' }}
-                price={cart.summary.totalPrice}
-              />
+              <Price price={cart.summary.grandPrice} />
             </Box>
           </Flex>
         </>

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

@@ -22,6 +22,8 @@ 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 = () => {
   const intl = useIntl()
@@ -47,6 +49,11 @@ export const CartDrawer = () => {
     style: 'currency',
   }
 
+  const promotions =
+    cart.redeemables?.filter(
+      (redeemable) => redeemable.object === 'promotion_tier'
+    ) || []
+
   useEffect(() => {
     router.events.on('routeChangeStart', cartDrawer.onClose)
     return () => {
@@ -148,6 +155,14 @@ export const CartDrawer = () => {
                   )
                 })}
               </Stack>
+              {promotions.length > 0 && (
+                <Stack bg="shading.100" p={'0.7rem 1.5rem'} mb={'-5'}>
+                  <CartPromotions promotions={promotions} />
+                </Stack>
+              )}
+              <Stack bg="shading.100" p={'0.7rem 1.5rem'} mb={'-5'}>
+                <CouponForm />
+              </Stack>
               <CartDrawerSummary />
             </Stack>
           )}

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

@@ -0,0 +1,48 @@
+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()
+  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,6 +13,7 @@ import {
   Text,
 } from '@chakra-ui/react'
 import { CartSummaryItem } from '.'
+import { CartPromotions } from './cart-promotions'
 
 interface CartSummaryProps {
   rootProps?: StackProps
@@ -29,12 +31,17 @@ export const CartSummary = ({
   const intl = useIntl()
   const _cartData = cartData ?? cart
 
+  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'}>
         <Text
           as={'h2'}
-          textStyle={{ base: 'Mobile/XS', md: 'Desktop/M' }}
+          textStyle={{ base: 'Mobile/M', md: 'Desktop/M' }}
           fontWeight={900}
           mb="sm"
         >
@@ -90,6 +97,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>
 

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

@@ -1,19 +1,15 @@
 import { useIntl } from 'react-intl'
-import { useRouter } from 'next/router'
-import { CartData, useCart } from 'hooks'
+import { useCart } from 'hooks'
 import { Price } from 'components/price'
-import { Button, Flex, Text, FlexProps } from '@chakra-ui/react'
+import { Flex, Text, FlexProps } from '@chakra-ui/react'
 
 interface CartTotalProps {
   rootProps?: FlexProps
-  cartData?: CartData
 }
 
-export const CartTotal = ({ cartData, rootProps }: CartTotalProps) => {
-  const router = useRouter()
+export const CartTotal = ({ rootProps }: CartTotalProps) => {
   const { cart } = useCart()
   const intl = useIntl()
-  const _cartData = cartData ?? cart
 
   return (
     <>
@@ -23,20 +19,9 @@ export const CartTotal = ({ cartData, rootProps }: CartTotalProps) => {
         mb={'1rem'}
         {...rootProps}
       >
-        <Text>{intl.formatMessage({ id: 'cart.summary.estimatedTotal' })}</Text>
-        <Price price={_cartData.summary?.totalPrice ?? ''} />
+        <Text>{intl.formatMessage({ id: 'cart.summary.orderTotal' })}</Text>
+        <Price price={cart.summary?.totalPrice ?? ''} />
       </Flex>
-      <Button
-        onClick={() => {
-          router.push('/checkout')
-        }}
-        w={{ base: 'full' }}
-        maxW={{ base: 'full' }}
-        variant={'solid'}
-        size={'lg'}
-      >
-        {intl.formatMessage({ id: 'action.proceedToCheckout' })}
-      </Button>
     </>
   )
 }