🎨 styles: checkout page

:%s

src/components/common/LayoutCheckout/LayoutCheckout.module.scss

@@ -4,8 +4,11 @@
     flex-direction: column;
     min-height: 100vh;
     > main {
+        display: flex;
         flex: 1;
         position: relative;
+        max-width: min(100%, 1536px);
+        margin: auto;
     }
     .footer {
         @apply spacing-horizontal;

src/components/modules/checkout/CheckoutBill/CheckoutBill.module.scss

@@ -1,6 +1,7 @@
 .warpper {
   padding: 3.2rem;
   min-width: 100%;
+  min-height: 100%;
   @screen lg {
     max-width: 56.3rem;
     @apply flex justify-between flex-col;
@@ -14,10 +15,14 @@
       display: block;
     }
   }
+  .empty {
+    @apply flex flex-col justify-center items-center;
+  }
   .list {
-    min-height: 52.8rem;
+    // min-height: 52.8rem;
   }
   .bot {
+    margin-top: auto;
     .price {
       margin-top: 3.2rem;
       .line {

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

@@ -1,8 +1,11 @@
 import { Cart } from '@commerce/types/cart'
 import React from 'react'
-import { CardItemCheckout } from '../../../common'
+import { ROUTE } from 'src/utils/constanst.utils'
+import { LANGUAGE } from 'src/utils/language.utils'
+import { ButtonCommon, CardItemCheckout, EmptyCommon } from '../../../common'
 import s from './CheckoutBill.module.scss'
 import FormPromotionCode from './FormPromotionCode/FormPromotionCode'
+import Link from 'next/link'
 
 interface CheckoutBillProps {
   // data: CardItemCheckoutProps[]
@@ -14,8 +17,18 @@ const CheckoutBill = ({ data }: CheckoutBillProps) => {
   return (
     <div className={s.warpper}>
       <div className={s.title}>
-        Your cart ({data?.totalQuantity})
+        Your cart ({data?.totalQuantity || 0})
       </div>
+      {
+        !data?.totalQuantity && <div className={s.empty}>
+          <EmptyCommon description="Your cart is empty" />
+          <Link href={ROUTE.HOME}>
+            <a>
+              <ButtonCommon>{LANGUAGE.BUTTON_LABEL.SHOP_NOW}</ButtonCommon>
+            </a>
+          </Link>
+        </div>
+      }
       <div className={s.list}>
         {data?.lineItems?.map((item) => {
           return <CardItemCheckout {...item} key={item.slug} currency={data?.currency} />
@@ -26,11 +39,15 @@ const CheckoutBill = ({ data }: CheckoutBillProps) => {
         <div className={s.price}>
           <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 className={s.shipping}>
+              {data?.totalDiscount ? `${data?.totalDiscount} ${data?.currency?.code}` : "0"}
+            </div>
           </div>
           <div className={s.line}>
             Subtotal
-            <div className={s.subTotal}>{data?.subtotalPrice} {data?.currency?.code}</div>
+            <div className={s.subTotal}>
+              {data?.subtotalPrice ? `${data?.subtotalPrice} ${data?.currency?.code}` : "0"}
+            </div>
           </div>
           <div className={s.line}>
             Shipping
@@ -38,7 +55,7 @@ const CheckoutBill = ({ data }: CheckoutBillProps) => {
           </div>
           <div className={s.line}>
             Estimated Total
-            <div className={s.total}>{data?.totalPrice} {data?.currency?.code}</div>
+            <div className={s.total}>{data?.totalPrice ? `${data?.totalPrice} ${data?.currency?.code}` : "0"}</div>
           </div>
         </div>
       </div>

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

@@ -116,22 +116,19 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
   ]
 
   // TODO: remove
-  const { addProduct } = useAddProductToCart()
+  // const { addProduct } = useAddProductToCart()
-
-  const createOrder = () => {
-    addProduct({ variantId: "92", quantity: 2 }, handleAddToCartCallback)
-  }
-  const handleAddToCartCallback = (isSuccess: boolean, message?: string) => {
-    // console.log("after create order: ", isSuccess, message)
-  }
 
+  // const createOrder = () => {
+  //   addProduct({ variantId: "92", quantity: 2 }, handleAddToCartCallback)
+  // }
+  // const handleAddToCartCallback = (isSuccess: boolean, message?: string) => {
+  //   // console.log("after create order: ", isSuccess, message)
+  // }
 
   return (
     <div className={s.warpper}>
       {/* TODO: remove */}
-      <ButtonCommon onClick={createOrder}>test create order</ButtonCommon>
+      {/* <ButtonCommon onClick={createOrder}>test create order</ButtonCommon> */}
-      <ButtonCommon onClick={createOrder}>test get activeStep order</ButtonCommon>
-      TOTAL: {order?.totalPrice}
 
       <div className={s.title}>
         <Logo />

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

@@ -54,6 +54,8 @@ const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
       if (error?.errorCode === ErrorCode.EmailAddressConflictError) {
         // show modal common
         openModalConfirmLogin()
+      } else if (error?.errorCode === ErrorCode.NoActiveOrderError) {
+        showMessageError("Your cart is empty! Please add items to the cart!")
       } else {
         showMessageError(error?.message)
       }

src/components/modules/checkout/CheckoutPage/CheckoutPage.module.scss

@@ -1,6 +1,7 @@
 @import "../../../../styles/utilities";
 .warrper{
     @apply flex w-full;
+    min-height: 100%;
     .right {
         display: none;
         @screen lg {