Feat/voucherify2

composable-ui/src/__mocks__/@composable/ui.tsx

@@ -1,5 +1,14 @@
 import { ImageBannerProps } from '@composable/ui'
+import { FormControl, Input } from '@chakra-ui/react'
 
 export const ImageBanner = (props: ImageBannerProps) => {
   return <div>{props.image?.src}</div>
 }
+
+export const InputField = () => {
+  return (
+    <FormControl>
+      <Input />
+    </FormControl>
+  )
+}

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

@@ -10,6 +10,7 @@ export const cartData: CartData = {
       name: 'Venture Daypack',
       brand: 'Riley',
       price: 129,
+      tax: 0.07,
       image: {
         url: '/img/products/_0000s_0001_backpack-rugged-black-front.jpg',
         alt: '',

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

@@ -18,20 +18,35 @@ jest.mock('hooks', () => ({
           subtotalPrice: 70,
           shipping: 10,
           taxes: 15,
-          totalPrice: 95,
+          priceBeforeDiscount: 95,
+          totalDiscountAmount: 10,
+          totalPrice: 85,
         },
+        vouchersApplied: [
+          {
+            code: 'CODE',
+            label: 'VOUCHER',
+            discount: '10',
+          },
+        ],
+        promotionsApplied: [],
       },
     }
   },
 }))
 
 const translations = {
   'action.proceedToCheckout': 'Proceed to Checkout',
-  'cart.summary.orderTotal': 'Order Total',
+  'cart.summary.orderTotal': 'Grand Total',
   'cart.summary.shipping': 'Shipping Label',
   'cart.summary.subtotal': 'Subtotal',
   'cart.summary.taxes': 'Taxes Label',
   'cart.summary.title': 'Cart Title',
+  'cart.summary.label.voucher': 'Voucher code',
+  'cart.summary.priceBeforeDiscount': 'Order Total',
+  'cart.summary.totalDiscountAmount': 'All discounts',
+  'action.addVoucher': 'Add Voucher',
+  'cart.summary.vouchers': 'Vouchers',
 }
 
 describe('CartSummary', () => {
@@ -54,15 +69,27 @@ describe('CartSummary', () => {
     // taxes
     const taxesPrice = screen.getByText('$15.00')
     const taxesLabel = screen.getByText(translations['cart.summary.taxes'])
+    // priceBeforeDiscount
+    const priceBeforeDiscount = screen.getByText('$95.00')
+    const priceBeforeDiscountLabel = screen.getByText(
+      translations['cart.summary.priceBeforeDiscount']
+    )
+    // totalDiscountAmount
+    const totalDiscountAmount = screen.getByText('$10.00')
+    const totalDiscountAmountLabel = screen.getByText(
+      translations['cart.summary.totalDiscountAmount']
+    )
     // totalPrice
-    const totalPrice = screen.getByText('$95.00')
+    const totalPrice = screen.getByText('$85.00')
     const totalPriceLabel = screen.getByText(
       translations['cart.summary.orderTotal']
     )
     // checkout button
     const proceedToCheckout = screen.getByText(
       translations['action.proceedToCheckout']
     )
+    // vouchers
+    const vouchers = screen.getByText(translations['cart.summary.vouchers'])
 
     expect(title).toBeInTheDocument()
     expect(subtotalPrice).toBeInTheDocument()
@@ -71,9 +98,14 @@ describe('CartSummary', () => {
     expect(shippingLabel).toBeInTheDocument()
     expect(taxesPrice).toBeInTheDocument()
     expect(taxesLabel).toBeInTheDocument()
+    expect(priceBeforeDiscount).toBeInTheDocument()
+    expect(priceBeforeDiscountLabel).toBeInTheDocument()
+    expect(totalDiscountAmount).toBeInTheDocument()
+    expect(totalDiscountAmountLabel).toBeInTheDocument()
     expect(totalPrice).toBeInTheDocument()
     expect(totalPriceLabel).toBeInTheDocument()
     expect(proceedToCheckout).toBeInTheDocument()
+    expect(vouchers).toBeInTheDocument()
 
     fireEvent.click(proceedToCheckout)
     expect(pushMock).toHaveBeenCalledWith('/checkout')

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

@@ -27,7 +27,7 @@ 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.orderTotal' })}
             </Text>
           </Box>
           <Box>

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

@@ -1,17 +1,20 @@
-import { Divider, Box, Flex, Text } from '@chakra-ui/react'
+import { Divider, Box, Flex, Text, Stack } from '@chakra-ui/react'
 import { useIntl } from 'react-intl'
 import { useCart } from 'hooks'
 import { CartDrawerSummaryItem } from './cart-drawer-summary-item'
 import { Price } from '../../price'
+import { CartPromotions } from '../cart-promotions'
+import { CartVouchers } from '../cart-vouchers'
 
 export const CartDrawerSummary = () => {
   const { cart } = useCart()
   const intl = useIntl()
 
+  const promotions = cart.promotionsApplied || []
+
   return (
     <Box>
       <Divider m={'10px 0'} />
-
       {cart.summary?.subtotalPrice && (
         <CartDrawerSummaryItem
           label={intl.formatMessage({ id: 'cart.summary.subtotal' })}
@@ -46,15 +49,57 @@ export const CartDrawerSummary = () => {
       )}
       <Divider m={'10px 0'} />
 
+      <Stack spacing="8">
+        {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={'0'}>
+          <CartVouchers />
+        </Stack>
+      </Stack>
+      <Divider m={'10px 0'} />
+      {cart.summary?.priceBeforeDiscount && (
+        <CartDrawerSummaryItem
+          label={intl.formatMessage({ id: 'cart.summary.priceBeforeDiscount' })}
+        >
+          <Box>
+            <Price
+              rootProps={{ textStyle: 'Body-XS' }}
+              price={cart.summary.priceBeforeDiscount}
+            />
+          </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>
+        </>
+      )}
       {cart.summary?.totalPrice && (
         <>
+          <Divider m={'10px 0'} />
           <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.orderTotal' })}</Text>
             <Box>
               <Price
                 rootProps={{ textStyle: 'Desktop/S' }}

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

@@ -85,7 +85,7 @@ export const CartDrawer = () => {
           ) : cart.isEmpty ? (
             <CartDrawerEmptyState onClose={cartDrawer.onClose} />
           ) : (
-            <Stack spacing="8">
+            <Stack spacing="4">
               <Stack
                 spacing="8"
                 divider={<Divider />}

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

@@ -0,0 +1,48 @@
+import { useIntl } from 'react-intl'
+import { Promotion } 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: Promotion[]
+}
+
+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.discountAmount}`}
+            />
+          </Box>
+        </Flex>
+      ))}
+    </>
+  )
+}

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

@@ -11,7 +11,7 @@ import {
   StackProps,
   Text,
 } from '@chakra-ui/react'
-import { CartSummaryItem } from '.'
+import { CartSummaryItem, CartPromotions, CartVouchers } from '.'
 
 interface CartSummaryProps {
   rootProps?: StackProps
@@ -28,6 +28,7 @@ export const CartSummary = ({
   const { cart } = useCart()
   const intl = useIntl()
   const _cartData = cartData ?? cart
+  const promotions = _cartData.promotionsApplied || []
 
   return (
     <Stack spacing={{ base: '4', md: '6' }} width="full" {...rootProps}>
@@ -52,6 +53,18 @@ export const CartSummary = ({
               />
             </CartSummaryItem>
           )}
+
+          {_cartData.summary?.taxes && (
+            <CartSummaryItem
+              label={intl.formatMessage({ id: 'cart.summary.taxes' })}
+            >
+              <Price
+                rootProps={{ textStyle: 'Body-S' }}
+                price={_cartData.summary.taxes}
+              />
+            </CartSummaryItem>
+          )}
+
           {_cartData.summary?.shipping && (
             <CartSummaryItem
               label={intl.formatMessage({ id: 'cart.summary.shipping' })}
@@ -62,14 +75,36 @@ export const CartSummary = ({
               />
             </CartSummaryItem>
           )}
-
-          {_cartData.summary?.taxes && (
+          {promotions.length > 0 && (
+            <>
+              <Divider m={'2px 0'} />
+              <CartPromotions promotions={promotions} />
+            </>
+          )}
+          <Divider m={'2px 0'} />
+          <CartVouchers />
+          <Divider />
+          {_cartData.summary?.priceBeforeDiscount && (
             <CartSummaryItem
-              label={intl.formatMessage({ id: 'cart.summary.taxes' })}
+              label={intl.formatMessage({
+                id: 'cart.summary.priceBeforeDiscount',
+              })}
             >
               <Price
                 rootProps={{ textStyle: 'Body-S' }}
-                price={_cartData.summary.taxes}
+                price={`${_cartData.summary.priceBeforeDiscount}`}
+              />
+            </CartSummaryItem>
+          )}
+          {_cartData.summary?.totalDiscountAmount && (
+            <CartSummaryItem
+              label={intl.formatMessage({
+                id: 'cart.summary.totalDiscountAmount',
+              })}
+            >
+              <Price
+                rootProps={{ textStyle: 'Body-S', color: 'green' }}
+                price={`-${_cartData.summary.totalDiscountAmount}`}
               />
             </CartSummaryItem>
           )}

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

@@ -1,16 +1,14 @@
 import { useIntl } from 'react-intl'
-import { useRouter } from 'next/router'
 import { CartData, 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()
   const { cart } = useCart()
   const intl = useIntl()
   const _cartData = cartData ?? cart
@@ -26,17 +24,6 @@ export const CartTotal = ({ cartData, rootProps }: CartTotalProps) => {
         <Text>{intl.formatMessage({ id: 'cart.summary.estimatedTotal' })}</Text>
         <Price price={_cartData.summary?.totalPrice ?? ''} />
       </Flex>
-      <Button
-        onClick={() => {
-          router.push('/checkout')
-        }}
-        w={{ base: 'full' }}
-        maxW={{ base: 'full' }}
-        variant={'solid'}
-        size={'lg'}
-      >
-        {intl.formatMessage({ id: 'action.proceedToCheckout' })}
-      </Button>
     </>
   )
 }