init: PaymentInfoForm

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

@@ -1,8 +1,10 @@
 import React, { useState } from 'react'
-import { CustomerInfoForm, Logo, ShippingInfoForm } from 'src/components/common'
+import { Logo } from 'src/components/common'
 import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCollapse'
 import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutInfo.module.scss'
+import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
+import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
 interface CheckoutInfoProps {}
 
 const CheckoutInfo = ({}: CheckoutInfoProps) => {

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

@@ -0,0 +1,9 @@
+.warpper{
+    .title{
+        min-width: 19.4rem;
+        @apply text-label;
+    }
+    .hightlight{
+        @apply text-active;
+    }
+}

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

@@ -0,0 +1,24 @@
+import React from 'react'
+import s from './BankTransfer.module.scss'
+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>
+    </div>
+  )
+}
+
+export default BankTransfer

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

@@ -0,0 +1,13 @@
+@import "../../../../../../styles/utilities";
+.warpper{
+    @apply u-form;
+    padding: 0 5.6rem;
+    .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/CustomerInfoForm/CustomerInfoForm.tsx

@@ -0,0 +1,54 @@
+import Link from 'next/link'
+import React, { useRef } from 'react'
+import { ButtonCommon, Inputcommon } from 'src/components/common'
+import InputCommon from 'src/components/common/InputCommon/InputCommon'
+import { CheckOutForm } from 'src/utils/types.utils'
+import s from './CustomerInfoForm.module.scss'
+interface CustomerInfoFormProps {
+  onConfirm?: (id: number, formInfo: CheckOutForm) => void
+  id: number
+}
+
+const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
+  const nameRef = useRef<React.ElementRef<typeof InputCommon>>(null)
+  const emailRef = useRef<React.ElementRef<typeof InputCommon>>(null)
+
+  const handleConfirmClick = () => {
+    onConfirm &&
+      onConfirm(id, {
+        name: nameRef?.current?.getValue().toString(),
+        email: emailRef.current?.getValue().toString(),
+      })
+  }
+
+  return (
+    <div className={s.warpper}>
+      <div className={s.body}>
+        <Inputcommon type="text" placeholder="Full Name" ref={nameRef} />
+        <Inputcommon type="text" placeholder="Email Address" ref={emailRef} />
+      </div>
+      <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}>
+          Continue to Shipping
+        </ButtonCommon>
+      </div>
+    </div>
+  )
+}
+
+export default CustomerInfoForm

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

@@ -0,0 +1,21 @@
+import React from 'react'
+import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
+import TabCommon from 'src/components/common/TabCommon/TabCommon'
+import s from "./PaymentInfoForm.module.scss"
+interface PaymentInfoFormProps {
+    
+}
+
+const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
+    return (
+        <div className={s.warpper}>
+            <TabCommon>
+                {/* <TabPane tabName="Bank Transfer">
+
+                </TabPane> */}
+            </TabCommon>
+        </div>
+    )
+}
+
+export default PaymentInfoForm

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

@@ -0,0 +1,37 @@
+@import "../../../../../../styles/utilities";
+
+.warpper{
+    @apply u-form;
+    padding: 0 5.6rem;
+    .bottom{
+        margin-top: 2.4rem;
+        @apply flex justify-between items-center;
+        .note{
+            font-size: 1.2rem;
+            line-height: 2rem;
+        }
+    }
+    .line{
+        >div{
+            width: 50%;
+        }
+    }
+    .method{
+        width: 100%;
+        height: 5.6rem;
+        padding: 1.6rem;
+        border-radius: 0.8rem;
+        @apply flex justify-between items-center border border-solid border-line bg-gray;
+        .left{
+            @apply flex;
+            .name{
+                margin-left: 1.6rem;
+                color: var(--text-active);
+            }
+        }
+        .price{
+            font-weight: bold;
+            color: var(--text-active);
+        }
+    }
+}

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

@@ -0,0 +1,97 @@
+import React, { useRef } from 'react'
+import { ButtonCommon, Inputcommon, SelectCommon } from 'src/components/common'
+import s from './ShippingInfoForm.module.scss'
+import Link from 'next/link'
+import { CustomInputCommon } from 'src/utils/type.utils'
+import { Shipping } from 'src/components/icons'
+import { CheckOutForm } from 'src/utils/types.utils'
+
+interface ShippingInfoFormProps {
+  onConfirm?: (id:number,formInfo:CheckOutForm)=>void
+  id:number
+}
+
+const option = [
+  {
+    name: 'Hồ Chí Minh',
+  },
+  {
+    name: 'Hà Nội',
+  },
+]
+
+const ShippingInfoForm = ({onConfirm,id}: ShippingInfoFormProps) => {
+  const addressRef = useRef<CustomInputCommon>(null)
+  const cityRef = useRef<CustomInputCommon>(null)
+  const stateRef = useRef<CustomInputCommon>(null)
+  const codeRef = useRef<CustomInputCommon>(null)
+  const phoneRef = useRef<CustomInputCommon>(null)
+  const handleConfirmClick = () => {
+    onConfirm && onConfirm(id,{
+      address: addressRef?.current?.getValue().toString(),
+      city: cityRef.current?.getValue().toString(),
+      state: stateRef?.current?.getValue().toString(),
+      code: Number(codeRef.current?.getValue()),
+      phone: Number(phoneRef?.current?.getValue()),
+    })
+  }
+
+  return (
+    <div className={s.warpper}>
+      <div className={s.body}>
+        <Inputcommon
+          type="text"
+          placeholder="Street Address"
+          ref={addressRef}
+        />
+        <Inputcommon type="text" placeholder="City" ref={cityRef} />
+        <div className={s.line}>
+          <SelectCommon option={option} type="custom" size="large">State</SelectCommon>
+          <Inputcommon type="text" placeholder="Zip Code" ref={codeRef} />
+        </div>
+        <Inputcommon
+          type="text"
+          placeholder="Phone (delivery contact)"
+          ref={phoneRef}
+        />
+				<div className={s.method}>
+					<div className={s.left}>
+						<div className={s.icon}>
+							<Shipping/>
+						</div>
+						<div className={s.name}>
+							Standard Delivery Method
+						</div>
+					</div>
+					<div className={s.right}>
+						<div className={s.price}>
+							Free
+						</div>
+					</div>
+				</div>
+      </div>
+      <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}>
+          Continue to Payment
+        </ButtonCommon>
+      </div>
+    </div>
+  )
+}
+
+export default ShippingInfoForm