🔨 refactor: checkout

:%s

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