🔨 refactor: checkout

:%s

pages/test.tsx

@@ -1,23 +1,26 @@
 import { useState } from 'react'
 import {
   CardItemCheckout,
+  CheckoutBill,
+  CustomerInfoForm,
   Layout,
+  ShippingInfoForm,
 } from 'src/components/common'
+import { CardItemCheckoutProps } from 'src/components/common/CardItemCheckout/CardItemCheckout'
+import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
 import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
-import CheckoutCollapse from 'src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse'
-import CustomerInfoForm from 'src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm'
-import ShippingInfoForm from 'src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm'
 import image5 from '../public/assets/images/image5.png'
 import image6 from '../public/assets/images/image6.png'
 import image7 from '../public/assets/images/image7.png'
 import image8 from '../public/assets/images/image8.png'
-const dataTest = [
+const dataTest:CardItemCheckoutProps[] = [
   {
     name: 'Tomato',
     weight: '250g',
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image7.src,
+    quantity:10
   },
   {
     name: 'Carrot',
@@ -25,6 +28,7 @@ const dataTest = [
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image7.src,
+    quantity:1
   },
   {
     name: 'Salad',
@@ -32,6 +36,7 @@ const dataTest = [
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image8.src,
+    quantity:2
   },
   {
     name: 'Tomato',
@@ -39,20 +44,7 @@ const dataTest = [
     category: 'VEGGIE',
     price: 'Rp 27.500',
     imageSrc: image5.src,
-  },
+    quantity:9
-  {
-    name: 'Carrot',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image7.src,
-  },
-  {
-    name: 'Salad',
-    weight: '250g',
-    category: 'VEGGIE',
-    price: 'Rp 27.500',
-    imageSrc: image8.src,
   },
 ]
 export default function Test() {
@@ -72,8 +64,8 @@ export default function Test() {
   }
   return (
     <>
-      <CardItemCheckout {...dataTest[0]} quantity={2}/>
+      <div className="w-full flex" style={{padding: "0 3.2rem"}} >
-      <div className="w-full" style={{padding: "0 3.2rem"}} >
+        <div className="">
           <CheckoutCollapse id={1} visible={visible} onOpen={onOpen} onClose={onClose} title="Customer Information" isEdit={true}>
             <CustomerInfoForm/>
           </CheckoutCollapse>
@@ -81,6 +73,8 @@ export default function Test() {
             <ShippingInfoForm/>
           </CheckoutCollapse>
         </div>
+        <CheckoutBill data={dataTest}/>
+      </div>
     </>
   )
 }

src/components/common/CardItemCheckout/CardItemCheckout.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import s from "./CardItemCheckout.module.scss"
 import { ProductProps } from 'src/utils/types.utils'
-interface CardItemCheckoutProps extends ProductProps {
+export interface CardItemCheckoutProps extends ProductProps {
     quantity:number
 }
 

src/components/common/CheckoutBill/CheckoutBill.module.scss

@@ -0,0 +1,9 @@
+.warpper{
+    max-width: 56.3rem;
+    @apply flex justify-between flex-col;
+    .bot{
+        .promo{
+            padding: 3.2rem;
+        }
+    }
+}

src/components/common/CheckoutBill/CheckoutBill.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import s from "./CheckoutBill.module.scss"
+import { CardItemCheckout } from '..'
+import { CardItemCheckoutProps } from '../CardItemCheckout/CardItemCheckout'
+
+interface CheckoutBillProps {
+    data: CardItemCheckoutProps[]
+}
+
+const CheckoutBill = ({data}: CheckoutBillProps) => {
+    return (
+        <div className={s.warpper}>
+            <div className={s.list}>
+                {data.map((item,index)=>{
+                    return <CardItemCheckout {...item} key={index}/>
+                })}
+            </div>
+            <div className={s.bot}>
+                <div className={s.promo}>
+                    
+                </div>
+                <div className={s.price}>
+    
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CheckoutBill

src/components/common/CustomerInfoForm/CustomerInfoForm.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../../styles/utilities";
+@import "../../../styles/utilities";
 .warpper{
     @apply u-form;
     padding: 0 5.6rem;

src/components/common/PaymentInfoForm/PaymentInfoForm.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
+import TabCommon from 'src/components/common/TabCommon/TabCommon'
 
 interface PaymentInfoFormProps {
     
 }
 
-const PaymentInfoForm = (props: PaymentInfoFormProps) => {
+const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
     return (
         <div>
-            
         </div>
     )
 }

src/components/common/ShippingInfoForm/ShippingInfoForm.module.scss

@@ -1,4 +1,5 @@
-@import "../../../../../styles/utilities";
+@import "../../../styles/utilities";
+
 .warpper{
     @apply u-form;
     padding: 0 5.6rem;

src/components/common/index.ts

@@ -37,3 +37,7 @@ export { default as CardItemCheckout} from './CardItemCheckout/CardItemCheckout'
 export { default as CardBlog} from './CardBlog/CardBlog'
 export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
 export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'
+export { default as CheckoutBill} from './CheckoutBill/CheckoutBill'
+export { default as CustomerInfoForm} from './CustomerInfoForm/CustomerInfoForm'
+export { default as ShippingInfoForm} from './ShippingInfoForm/ShippingInfoForm'
+export { default as PaymentInfoForm} from './PaymentInfoForm/PaymentInfoForm'

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

@@ -1,23 +0,0 @@
-import React from 'react'
-import s from "CheckoutBill.module.scss"
-interface CheckoutBillProps {
-    
-}
-
-const CheckoutBill = ({}: CheckoutBillProps) => {
-    return (
-        <div className={s.warpper}>
-            <div className={s.list}>
-
-            </div>
-            <div className={s.promo}>
-                
-            </div>
-            <div className={s.price}>
-
-            </div>
-        </div>
-    )
-}
-
-export default CheckoutBill