From 859f645c03189b2fd0f3b4ed8c75e01f85a84d11 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Tue, 7 Sep 2021 14:41:53 +0700
Subject: [PATCH] :hammer: refactor: checkout

:%s
---
 pages/test.tsx                                | 46 ++++++++-----------
 .../CardItemCheckout/CardItemCheckout.tsx     |  2 +-
 .../CheckoutBill/CheckoutBill.module.scss     |  9 ++++
 .../common/CheckoutBill/CheckoutBill.tsx      | 30 ++++++++++++
 .../CheckoutCollapse.module.scss              |  0
 .../CheckoutCollapse/CheckoutCollapse.tsx     |  0
 .../CustomerInfoForm.module.scss              |  2 +-
 .../CustomerInfoForm/CustomerInfoForm.tsx     |  0
 .../PaymentInfoForm.module.scss               |  0
 .../PaymentInfoForm/PaymentInfoForm.tsx       |  4 +-
 .../ShippingInfoForm.module.scss              |  3 +-
 .../ShippingInfoForm/ShippingInfoForm.tsx     |  0
 src/components/common/index.ts                |  4 ++
 .../components/CheckoutBill/CheckoutBill.tsx  | 23 ----------
 .../CheckoutBill.module.scss => index.ts}     |  0
 15 files changed, 69 insertions(+), 54 deletions(-)
 create mode 100644 src/components/common/CheckoutBill/CheckoutBill.module.scss
 create mode 100644 src/components/common/CheckoutBill/CheckoutBill.tsx
 rename src/components/{modules/checkout/components => common}/CheckoutCollapse/CheckoutCollapse.module.scss (100%)
 rename src/components/{modules/checkout/components => common}/CheckoutCollapse/CheckoutCollapse.tsx (100%)
 rename src/components/{modules/checkout/components => common}/CustomerInfoForm/CustomerInfoForm.module.scss (84%)
 rename src/components/{modules/checkout/components => common}/CustomerInfoForm/CustomerInfoForm.tsx (100%)
 rename src/components/{modules/checkout/components => common}/PaymentInfoForm/PaymentInfoForm.module.scss (100%)
 rename src/components/{modules/checkout/components => common}/PaymentInfoForm/PaymentInfoForm.tsx (55%)
 rename src/components/{modules/checkout/components => common}/ShippingInfoForm/ShippingInfoForm.module.scss (94%)
 rename src/components/{modules/checkout/components => common}/ShippingInfoForm/ShippingInfoForm.tsx (100%)
 delete mode 100644 src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
 rename src/components/modules/checkout/{components/CheckoutBill/CheckoutBill.module.scss => index.ts} (100%)

diff --git a/pages/test.tsx b/pages/test.tsx
index 7f40661be..c1e1f5d5f 100644
--- a/pages/test.tsx
+++ b/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,
-  },
-  {
-    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,
+    quantity:9
   },
 ]
 export default function Test() {
@@ -72,14 +64,16 @@ export default function Test() {
   }
   return (
     <>
-      <CardItemCheckout {...dataTest[0]} quantity={2}/>
-      <div className="w-full" style={{padding: "0 3.2rem"}} >
-        <CheckoutCollapse id={1} visible={visible} onOpen={onOpen} onClose={onClose} title="Customer Information" isEdit={true}>
-          <CustomerInfoForm/>
-        </CheckoutCollapse>
-        <CheckoutCollapse id={2} visible={visible2} onOpen={onOpen2} onClose={onClose2} title="Shipping Information" isEdit={true}>
-          <ShippingInfoForm/>
-        </CheckoutCollapse>
+      <div className="w-full flex" style={{padding: "0 3.2rem"}} >
+        <div className="">
+          <CheckoutCollapse id={1} visible={visible} onOpen={onOpen} onClose={onClose} title="Customer Information" isEdit={true}>
+            <CustomerInfoForm/>
+          </CheckoutCollapse>
+          <CheckoutCollapse id={2} visible={visible2} onOpen={onOpen2} onClose={onClose2} title="Shipping Information" isEdit={true}>
+            <ShippingInfoForm/>
+          </CheckoutCollapse>
+        </div>
+        <CheckoutBill data={dataTest}/>
       </div>
     </>
   )
diff --git a/src/components/common/CardItemCheckout/CardItemCheckout.tsx b/src/components/common/CardItemCheckout/CardItemCheckout.tsx
index dd9fb14c5..e67057aa6 100644
--- a/src/components/common/CardItemCheckout/CardItemCheckout.tsx
+++ b/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
 }
 
diff --git a/src/components/common/CheckoutBill/CheckoutBill.module.scss b/src/components/common/CheckoutBill/CheckoutBill.module.scss
new file mode 100644
index 000000000..9c002b2e5
--- /dev/null
+++ b/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;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/CheckoutBill/CheckoutBill.tsx b/src/components/common/CheckoutBill/CheckoutBill.tsx
new file mode 100644
index 000000000..5493565cd
--- /dev/null
+++ b/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
diff --git a/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss b/src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss
similarity index 100%
rename from src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.module.scss
rename to src/components/common/CheckoutCollapse/CheckoutCollapse.module.scss
diff --git a/src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx b/src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
similarity index 100%
rename from src/components/modules/checkout/components/CheckoutCollapse/CheckoutCollapse.tsx
rename to src/components/common/CheckoutCollapse/CheckoutCollapse.tsx
diff --git a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss b/src/components/common/CustomerInfoForm/CustomerInfoForm.module.scss
similarity index 84%
rename from src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss
rename to src/components/common/CustomerInfoForm/CustomerInfoForm.module.scss
index f5b7ddcde..f31bc57b0 100644
--- a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.module.scss
+++ b/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;
diff --git a/src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/common/CustomerInfoForm/CustomerInfoForm.tsx
similarity index 100%
rename from src/components/modules/checkout/components/CustomerInfoForm/CustomerInfoForm.tsx
rename to src/components/common/CustomerInfoForm/CustomerInfoForm.tsx
diff --git a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss b/src/components/common/PaymentInfoForm/PaymentInfoForm.module.scss
similarity index 100%
rename from src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.module.scss
rename to src/components/common/PaymentInfoForm/PaymentInfoForm.module.scss
diff --git a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/common/PaymentInfoForm/PaymentInfoForm.tsx
similarity index 55%
rename from src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx
rename to src/components/common/PaymentInfoForm/PaymentInfoForm.tsx
index 4b8410177..6ba65dc43 100644
--- a/src/components/modules/checkout/components/PaymentInfoForm/PaymentInfoForm.tsx
+++ b/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>
     )
 }
diff --git a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss b/src/components/common/ShippingInfoForm/ShippingInfoForm.module.scss
similarity index 94%
rename from src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss
rename to src/components/common/ShippingInfoForm/ShippingInfoForm.module.scss
index 439fb2628..acda6bc56 100644
--- a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.module.scss
+++ b/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;
diff --git a/src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx b/src/components/common/ShippingInfoForm/ShippingInfoForm.tsx
similarity index 100%
rename from src/components/modules/checkout/components/ShippingInfoForm/ShippingInfoForm.tsx
rename to src/components/common/ShippingInfoForm/ShippingInfoForm.tsx
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index bf7ac1d93..fb4f8daf5 100644
--- a/src/components/common/index.ts
+++ b/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'
diff --git a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx b/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
deleted file mode 100644
index 96bb74d3f..000000000
--- a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.tsx
+++ /dev/null
@@ -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
diff --git a/src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss b/src/components/modules/checkout/index.ts
similarity index 100%
rename from src/components/modules/checkout/components/CheckoutBill/CheckoutBill.module.scss
rename to src/components/modules/checkout/index.ts