✨ feat: show bill discount and total

:%s

src/components/modules/checkout/CheckoutBill/CheckoutBill.tsx

@@ -1,30 +1,38 @@
-import React from 'react'
+import { Cart } from '@commerce/types/cart'
+import React, { useMemo } from 'react'
 import { CardItemCheckout } from '../../../common'
-import { CardItemCheckoutProps } from '../../../common/CardItemCheckout/CardItemCheckout'
 import s from './CheckoutBill.module.scss'
 import FormPromotionCode from './FormPromotionCode/FormPromotionCode'
 
 interface CheckoutBillProps {
-  data: CardItemCheckoutProps[]
+  // data: CardItemCheckoutProps[]
+  data: Cart | null
 }
 
 const CheckoutBill = ({ data }: CheckoutBillProps) => {
+  console.log("data here***: ", data)
+
   return (
     <div className={s.warpper}>
-    <div className = {s.title}>
-        Your cart ({data.length})
-    </div>
+      <div className={s.title}>
+        Your cart ({data?.totalQuantity})
+      </div>
       <div className={s.list}>
-        {data.map((item) => {
-          return <CardItemCheckout {...item} key={item.slug} />
+        {data?.lineItems?.map((item) => {
+          return <CardItemCheckout {...item} key={item.slug} currency={data?.currency} />
         })}
       </div>
       <div className={s.bot}>
-        <FormPromotionCode/>
+        <FormPromotionCode />
         <div className={s.price}>
+          TODO: here
+          <div className={s.line}>
+            Discount {(data?.discounts?.length || 0) > 0 && `(${data?.discounts?.map(item => item.description).join(",")})`}
+            <div className={s.shipping}>{data?.totalDiscount} {data?.currency?.code}</div>
+          </div>
           <div className={s.line}>
             Subtotal
-            <div className={s.subTotal}>RP 120.500</div>
+            <div className={s.subTotal}>{data?.subtotalPrice} {data?.currency?.code}</div>
           </div>
           <div className={s.line}>
             Shipping
@@ -32,7 +40,7 @@ const CheckoutBill = ({ data }: CheckoutBillProps) => {
           </div>
           <div className={s.line}>
             Estimated Total
-            <div className={s.total}>RP 120.500</div>
+            <div className={s.total}>{data?.totalPrice} {data?.currency?.code}</div>
           </div>
         </div>
       </div>

src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx

@@ -102,7 +102,7 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
     {
       id: CheckoutStep.CustomerInfo,
       title: 'Customer Information',
-      form: <CustomerInfoForm onConfirm={onConfirm} id={CheckoutStep.CustomerInfo} />,
+      form: <CustomerInfoForm onConfirm={onConfirm} id={CheckoutStep.CustomerInfo} activeStep={activeStep} />,
     },
     {
       id: CheckoutStep.ShippingInfo,
@@ -120,7 +120,7 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
   const { addProduct } = useAddProductToCart()
 
   const createOrder = () => {
-    addProduct({ variantId: "63", quantity: 1 }, handleAddToCartCallback)
+    addProduct({ variantId: "92", quantity: 2 }, handleAddToCartCallback)
   }
   const handleAddToCartCallback = (isSuccess: boolean, message?: string) => {
     // console.log("after create order: ", isSuccess, message)

src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import React, { useState } from 'react'
 import { MessageCommon } from 'src/components/common'
 import { useMessage } from 'src/components/contexts'
+import { useGetActiveOrder } from 'src/components/hooks/cart'
 import IconHide from 'src/components/icons/IconHide'
 import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
 import { CheckoutBill, CheckoutInfo } from '..'
@@ -9,29 +10,30 @@ import s from "./CheckoutPage.module.scss"
 interface CheckoutPageProps {
 }
 
-const CheckoutPage = ({}: CheckoutPageProps) => {
+const CheckoutPage = ({ }: CheckoutPageProps) => {
     const { messages, removeMessage } = useMessage()
     const [isShow, setIsShow] = useState(false)
+    const { order } = useGetActiveOrder()
 
     const onClose = () => {
         setIsShow(false)
     }
-    const onViewCart =() => {
+    const onViewCart = () => {
         setIsShow(true)
     }
     return (
         <div className={s.warrper}>
             <MessageCommon messages={messages} onRemove={removeMessage} />
-            <div className={s.left}><CheckoutInfo onViewCart = {onViewCart}/></div>
-            <div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
-            <div className={classNames({ [s.mobile] :true,[s.isShow]: isShow})}>
+            <div className={s.left}><CheckoutInfo onViewCart={onViewCart} /></div>
+            <div className={s.right}><CheckoutBill data={order} /></div>
+            <div className={classNames({ [s.mobile]: true, [s.isShow]: isShow })}>
                 <div className={s.modal}>
                     <div className={s.content}>
                         <div className={s.head}>
                             <h3>Your Cart({CHECKOUT_BILL_DATA.length})</h3>
-                            <div onClick={onClose}><IconHide/></div>
+                            <div onClick={onClose}><IconHide /></div>
                         </div>
-                        <CheckoutBill data={CHECKOUT_BILL_DATA}/>
+                        <CheckoutBill data={CHECKOUT_BILL_DATA} />
                     </div>
                 </div>
             </div>