✨ feat: show bill discount and total

:%s

framework/commerce/types/cart.ts

@@ -93,8 +93,10 @@ export type Cart = {
   // The sum of all the prices of all the items in the cart.
   // Duties, taxes and discounts included.
   totalPrice: number
+  totalQuantity: number
   // Discounts that have been applied on the cart.
   discounts?: Discount[]
+  totalDiscount: number
 }
 
 /**

framework/commerce/types/common.ts

@@ -1,6 +1,7 @@
 export type Discount = {
   // The value of the discount, can be an amount or percentage
   value: number
+  description?: string
 }
 
 export type Measurement = {

framework/vendure/schema.d.ts

@@ -3053,7 +3053,9 @@ export type CartFragment = { __typename?: 'Order' } & Pick<
   | 'currencyCode'
 > & {
   shippingAddress?: Maybe<{ __typename?: 'OrderAddress' } & Pick<OrderAddress, 'streetLine1' | 'fullName' | 'city' | 'province' | 'postalCode' |'countryCode' | 'phoneNumber'>>
-  discounts?: Maybe<{ __typename?: 'Discount' } & Pick<Discount, 'type' | 'amount' | 'amountWithTax'>>
+  discounts: Array<
+        { __typename?: 'Discount' } & Pick<Discount, 'type' | 'description' | 'amount' | 'amountWithTax'>
+      >
   customer?: Maybe<{ __typename?: 'Customer' } & Pick<Customer, 'id' | 'firstName' | 'lastName' | 'emailAddress'>>
   lines: Array<
     { __typename?: 'OrderLine' } & Pick<

framework/vendure/utils/fragments/cart-fragment.ts

@@ -9,6 +9,12 @@ export const cartFragment = /* GraphQL */ `
     total
     totalWithTax
     currencyCode
+    discounts {
+      type
+      description
+      amount
+      amountWithTax
+    }
     customer {
       id
       firstName

framework/vendure/utils/normalize.ts

@@ -36,10 +36,12 @@ export function normalizeFavoriteProductResult(item: Favorite) {
 
 
 export function normalizeCart(order: CartFragment): Cart {
+  console.log("raw rs: ", order)
   return {
     id: order.id.toString(),
     createdAt: order.createdAt,
     taxesIncluded: true,
+    totalQuantity: order.totalQuantity,
     lineItemsSubtotalPrice: order.subTotalWithTax / 100,
     currency: { code: order.currencyCode },
     subtotalPrice: order.subTotalWithTax / 100,
@@ -58,6 +60,10 @@ export function normalizeCart(order: CartFragment): Cart {
       countryCode: order.shippingAddress?.countryCode || '',
       phoneNumber: order.shippingAddress?.phoneNumber || '',
     },
+    totalDiscount: order.discounts?.reduce((total, item) => total + item.amountWithTax, 0) / 100 || 0,
+    discounts: order.discounts.map(item => {
+      return { value: item.amountWithTax, description: item.description }
+    }),
     lineItems: order.lines?.map((l) => ({
       id: l.id,
       name: l.productVariant.name,

src/components/common/CardItemCheckout/CardItemCheckout.tsx

@@ -1,24 +1,29 @@
+import { LineItem } from '@commerce/types/cart'
 import React from 'react'
+import { ImgWithLink } from '..'
 import s from "./CardItemCheckout.module.scss"
-import { ProductProps } from 'src/utils/types.utils'
+export interface CardItemCheckoutProps extends LineItem {
-export interface CardItemCheckoutProps extends ProductProps {
+    currency: { code: string }
-    quantity:number
 }
 
-const CardItemCheckout = ({imageSrc,name,price,weight,quantity,category}: CardItemCheckoutProps) => {
+const CardItemCheckout = ({
+    quantity,
+    variant,
+    name,
+    currency }: CardItemCheckoutProps) => {
     return (
         <div className={s.warpper}>
             <div className={s.image}>
-                <img src={imageSrc} alt="image" />
+                <ImgWithLink src={variant?.image?.url ?? ''} alt={name} />
             </div>
             <div className={s.right}>
                 <div className={s.name}>
-                    {`${name} (${weight})`}
+                    {name} {variant?.weight ? `(${variant.weight})` : ''}
                 </div>
                 <div className={s.quantity}>
-                    Quantity: 
+                    Quantity:
                     <div className={s.price}>
-                        {`${quantity} x ${price}`}
+                        {`${quantity} x ${variant?.price} ${currency?.code}`}
                     </div>
                 </div>
             </div>

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}>
+      <div className={s.title}>
-        Your cart ({data.length})
+        Your cart ({data?.totalQuantity})
-    </div>
+      </div>
       <div className={s.list}>
-        {data.map((item) => {
+        {data?.lineItems?.map((item) => {
-          return <CardItemCheckout {...item} key={item.slug} />
+          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.left}><CheckoutInfo onViewCart={onViewCart} /></div>
-            <div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
+            <div className={s.right}><CheckoutBill data={order} /></div>
-            <div className={classNames({ [s.mobile] :true,[s.isShow]: isShow})}>
+            <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>