✨ feat: Checkout Page

:%s

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

@@ -0,0 +1,31 @@
+.warpper {
+  max-width: 56.3rem;
+	padding: 3.2rem;
+  @apply flex justify-between flex-col border-l-2 border-solid border-line;
+  .title {
+    font-weight: bold;
+    font-size: 2rem;
+    line-height: 2.8rem;
+  }
+  .list {
+    min-height: 52.8rem;
+  }
+  .bot {
+    .promo {
+      // padding: 3.2rem;
+      @apply bg-gray flex justify-between items-center;
+      min-height: 6.4rem;
+    }
+    .price {
+      margin-top: 3.2rem;
+      .line {
+        @apply flex justify-between items-center text-label;
+        .total {
+          font-weight: bold;
+          font-size: 2rem;
+          line-height: 2.8rem;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import s from './CheckoutBill.module.scss'
+import { CardItemCheckout } from '../../../common'
+import { CardItemCheckoutProps } from '../../../common/CardItemCheckout/CardItemCheckout'
+import { IconCirclePlus } from 'src/components/icons'
+
+interface CheckoutBillProps {
+  data: CardItemCheckoutProps[]
+}
+
+const CheckoutBill = ({ data }: CheckoutBillProps) => {
+  return (
+    <div className={s.warpper}>
+    <div className = {s.title}>
+        Your cart ({data.length})
+    </div>
+      <div className={s.list}>
+        {data.map((item) => {
+          return <CardItemCheckout {...item} key={item.slug} />
+        })}
+      </div>
+      <div className={s.bot}>
+        <div className={s.promo}>
+          Apply Promotion Code
+          <IconCirclePlus />
+        </div>
+        <div className={s.price}>
+          <div className={s.line}>
+            Subtotal
+            <div className={s.subTotal}>RP 120.500</div>
+          </div>
+          <div className={s.line}>
+            Shipping
+            <div className={s.shipping}>Free</div>
+          </div>
+          <div className={s.line}>
+            Estimated Total
+            <div className={s.total}>RP 120.500</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CheckoutBill

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

@@ -1,7 +1,8 @@
 .warpper{
     @apply w-full;
+    padding: 3.2rem;
     .title{
-        padding: 3.2rem 0;
+        margin-bottom: 3.2rem;
         @apply flex justify-start items-center
     }
 }

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

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { Logo } from 'src/components/common'
 import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
+import { removeItem } from 'src/utils/funtion.utils'
 import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutInfo.module.scss'
 import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
@@ -12,28 +13,41 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
   const [active, setActive] = useState(1)
   const [done, setDone] = useState<number[]>([])
   const [info, setInfo] = useState<CheckOutForm>({})
-  const onOpen = (id:number) => {
-		setActive(id)
-	}
 
   const onEdit = (id:number) => {
 		setActive(id)
-	}
-
-  const onClose = (id:number) => {
-		setActive(id)
+    setDone(removeItem<number>(done,id))
 	}
 
   const onConfirm = (id:number,formInfo:CheckOutForm) => {
 		if(id+1>formList.length){
 			console.log({...info,...formInfo})
 		}else{
-
-			setActive(id+1)
+      if(done.length>0){
+        for (let i = id+1; i <= formList.length; i++) {
+          if(!done.includes(i)){
+            setActive(i)
+          }
+        }
+      }else{
+        setActive(id+1)
+      }
+      setDone([...done,id])
 		}
-		setDone([...done,id])
 		setInfo({...info,...formInfo})
 	}
+
+  const getNote = (id:number) => {
+    switch (id) {
+      case 1:
+        return `${info.name}, ${info.email}`
+        case 2:
+          return `${info.address}, ${info.state}, ${info.city}, ${info.code}, ${info.phone}, `
+      default:
+        return ""
+    }
+  }
+
   const formList = [
     {
       id: 1,
@@ -57,6 +71,7 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
         <Logo />
       </div>
       {formList.map((item) => {
+        let note = getNote(item.id)
         return <CheckoutCollapse
 					key={item.title}
           id={item.id}
@@ -64,30 +79,11 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
           title={item.title}
           onEditClick={onEdit}
           isEdit={done.includes(item.id)}
+          note={note}
         >
           {item.form}
         </CheckoutCollapse>
       })}
-      {/* <CheckoutCollapse
-        id={1}
-        visible={active === 1}
-        // onOpen={onOpen}
-        // onClose={onClose}
-        title="Customer Information"
-        isEdit={true}
-      >
-        <CustomerInfoForm />
-      </CheckoutCollapse>
-      <CheckoutCollapse
-        id={2}
-        visible={active === 2}
-        // onOpen={onOpen2}
-        // onClose={onClose2}
-        title="Shipping Information"
-        isEdit={true}
-      >
-        <ShippingInfoForm />
-      </CheckoutCollapse> */}
     </div>
   )
 }

src/components/modules/checkout/CheckoutInfo/components/BankTransfer/BankTransfer.module.scss

@@ -1,9 +1,15 @@
 .warpper{
-    .title{
-        min-width: 19.4rem;
-        @apply text-label;
-    }
-    .hightlight{
-        @apply text-active;
+    .info{
+        .line{
+            @apply flex justify-start items-center;
+            .title{
+                margin-right: 3.2rem;
+                min-width: 19.4rem;
+                @apply text-label;
+            }
+            .hightlight{
+                @apply text-active;
+            }
+        }
     }
 }

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

@@ -5,17 +5,19 @@ interface BankTransferProps {}
 const BankTransfer = ({}: BankTransferProps) => {
   return (
     <div className={s.warpper}>
-      <div className={s.line}>
-        <div className={s.title}>Account Name:</div>
-        <div className={s.hightlight}>Duong Dinh Vu</div>
-      </div>
-      <div className={s.line}>
-        <div className={s.title}>Account Number:</div>
-        <div className={s.hightlight}>1234 1234 1234 1234</div>
-      </div>
-      <div className={s.line}>
-        <div className={s.title}>Bank Name:</div>
-        <div className={s.hightlight}>Techcombank - HCMC</div>
+      <div className={s.info}>
+        <div className={s.line}>
+          <div className={s.title}>Account Name:</div>
+          <div className={s.hightlight}>Duong Dinh Vu</div>
+        </div>
+        <div className={s.line}>
+          <div className={s.title}>Account Number:</div>
+          <div className={s.hightlight}>1234 1234 1234 1234</div>
+        </div>
+        <div className={s.line}>
+          <div className={s.title}>Bank Name:</div>
+          <div className={s.hightlight}>Techcombank - HCMC</div>
+        </div>
       </div>
     </div>
   )

src/components/modules/checkout/CheckoutInfo/components/CreditCardForm/CreditCardForm.module.scss

@@ -0,0 +1,12 @@
+@import "../../../../../../styles/utilities";
+.warpper{
+    @apply u-form;
+    .line{
+        >div{
+            width: 50%;
+        }
+    }
+    .checkbox{
+        margin-top: 1.6rem;
+    }
+}

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

@@ -0,0 +1,27 @@
+import React, { useRef } from 'react'
+import { CheckboxCommon, Inputcommon } from 'src/components/common'
+import { CustomInputCommon } from 'src/utils/type.utils'
+import s from "./CreditCardForm.module.scss"
+interface CreditCardFormProps {
+    
+}
+
+const CreditCardForm = ({}: CreditCardFormProps) => {
+    const cardNumberRef = useRef<CustomInputCommon>(null)
+    const dateRef = useRef<CustomInputCommon>(null)
+    const cvsRef = useRef<CustomInputCommon>(null)
+    return (
+        <div className={s.warpper}>
+            <div className={s.body}>
+                <Inputcommon type="text" placeholder="Cârd Number" ref={cardNumberRef} />
+                <div className={s.line}>
+                    <Inputcommon type="text" placeholder="MM/YY" ref={dateRef} />
+                    <Inputcommon type="text" placeholder="CVS" ref={cvsRef} />
+                </div>
+            </div>
+            <div className={s.checkbox}><CheckboxCommon/></div>
+        </div>
+    )
+}
+
+export default CreditCardForm

src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.module.scss

@@ -0,0 +1,14 @@
+.wrapper{
+    padding: 0 5.6rem;
+    .inner{
+        padding: 4rem 0;
+    }
+    .bottom{
+        margin-top: 2.4rem;
+        @apply flex justify-between items-center;
+        .note{
+            font-size: 1.2rem;
+            line-height: 2rem;
+        }
+    }
+}

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

@@ -1,28 +1,55 @@
 import React from 'react'
-import { TabCommon, TabPane } from 'src/components/common'
+import { ButtonCommon, TabCommon, TabPane } from 'src/components/common'
 import { CheckOutForm } from 'src/utils/types.utils'
 import BankTransfer from '../BankTransfer/BankTransfer'
+import Link from 'next/link'
 
-import s from "./PaymentInfoForm.module.scss"
+import s from './PaymentInfoForm.module.scss'
+import CreditCardForm from '../CreditCardForm/CreditCardForm'
 interface PaymentInfoFormProps {
-    onConfirm?: (id:number,formInfo:CheckOutForm)=>void
-    id:number
+  onConfirm?: (id: number, formInfo: CheckOutForm) => void
+  id: number
 }
 
-const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
-    return (
-        <div className="">
-            <TabCommon>
-                <TabPane tabName = "Bank Transfer">
-                    <BankTransfer/>
-                </TabPane>
-                <TabPane tabName = "Bank Transfer 2">
-                    <BankTransfer/>
-                </TabPane>
-            </TabCommon>
-            
+const PaymentInfoForm = ({onConfirm,id}: PaymentInfoFormProps) => {
+  const handleConfirmClick = () => {
+    onConfirm && onConfirm(id,{})
+  }
+  return (
+    <div className={s.wrapper}>
+      <TabCommon>
+        <TabPane tabName="Bank Transfer">
+          <div className={s.inner}><BankTransfer /></div>
+        </TabPane>
+        <TabPane tabName="Ewallet">
+          <div className={s.inner}></div>
+        </TabPane>
+        <TabPane tabName="Credit Card">
+          <div className={s.inner}><CreditCardForm /></div>
+        </TabPane>
+      </TabCommon>
+      <div className={s.bottom}>
+        <div className={s.note}>
+          By clicking continue you agree to Casper's{' '}
+          {
+            <Link href="#">
+              <strong>terms and conditions</strong>
+            </Link>
+          }{' '}
+          and{' '}
+          {
+            <Link href="#">
+              <strong>privacy policy </strong>
+            </Link>
+          }
+          .
         </div>
-    )
+        <ButtonCommon onClick={handleConfirmClick}>
+          Submit Order
+        </ButtonCommon>
+      </div>
+    </div>
+  )
 }
 
 export default PaymentInfoForm

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

@@ -0,0 +1,10 @@
+.warrper{
+    @apply flex;
+    .right{
+        min-width: 56.3rem;
+    }
+    .left{
+        @apply w-full;
+
+    }
+}

src/components/modules/checkout/CheckoutPage/CheckoutPage.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { CHECKOUT_BILL_DATA } from 'src/utils/demo-data'
+import { CheckoutBill, CheckoutInfo } from '..'
+import s from "./CheckoutPage.module.scss"
+interface CheckoutPageProps {
+    
+}
+
+const CheckoutPage = ({}: CheckoutPageProps) => {
+    return (
+        <div className={s.warrper}>
+            <div className={s.left}><CheckoutInfo/></div>
+            <div className={s.right}><CheckoutBill data={CHECKOUT_BILL_DATA}/></div>
+        </div>
+    )
+}
+
+export default CheckoutPage

src/components/modules/checkout/index.ts

@@ -1 +1,3 @@
 export { default as CheckoutInfo } from './CheckoutInfo/CheckoutInfo'
+export { default as CheckoutPage } from './CheckoutPage/CheckoutPage'
+export { default as CheckoutBill } from './CheckoutBill/CheckoutBill'