✨ feat: (checkout) fill out customer info in order

:%s

src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx

@@ -17,11 +17,11 @@ interface Props {
   onSwitch: () => void
 }
 
-const DisplayingErrorMessagesSchema = Yup.object().shape({
+const displayingErrorMessagesSchema = Yup.object().shape({
-  email: Yup.string().email('Your email was wrong').required('Required'),
+  email: Yup.string().email(LANGUAGE.MESSAGE.INVALID_EMAIL).required(LANGUAGE.MESSAGE.REQUIRED),
   password: Yup.string()
     .max(30, 'Password is too long')
-    .required('Required'),
+    .required(LANGUAGE.MESSAGE.REQUIRED),
 })
 
 const FormLogin = ({ onSwitch, isHide }: Props) => {
@@ -56,7 +56,7 @@ const FormLogin = ({ onSwitch, isHide }: Props) => {
               password: '',
               email: '',
             }}
-            validationSchema={DisplayingErrorMessagesSchema}
+            validationSchema={displayingErrorMessagesSchema}
             onSubmit={onLogin}
             
           >

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

@@ -0,0 +1,6 @@
+@import "../../../../../../styles/utilities";
+
+.chekoutNotePolicy {
+    @apply caption;
+    margin-bottom: 1.6rem;
+}

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

@@ -0,0 +1,31 @@
+import Link from 'next/link'
+import React, { memo } from 'react'
+import { ROUTE } from 'src/utils/constanst.utils'
+import s from './ChekoutNotePolicy.module.scss'
+
+const ChekoutNotePolicy = memo(() => {
+  return (
+    <div className={s.chekoutNotePolicy}>
+      By clicking continue you agree to Casper's{' '}
+      {
+        <Link href={ROUTE.TERM_CONDITION}>
+          <a>
+            <strong>terms and conditions</strong>
+          </a>
+        </Link>
+      }{' '}
+      and{' '}
+      {
+        <Link href={ROUTE.PRIVACY_POLICY}>
+          <a>
+            <strong>privacy policy </strong>
+          </a>
+        </Link>
+      }
+      .
+    </div>
+  )
+})
+
+ChekoutNotePolicy.displayName = 'ChekoutNotePolicy'
+export default ChekoutNotePolicy

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

@@ -10,15 +10,8 @@
     .bottom{
         margin-top: 2.4rem;
         @apply flex justify-between items-center;
-        .note{
-            font-size: 1.2rem;
-            line-height: 2rem;
-        }
         @screen sm-only {
             @apply flex-col items-start;
-            .button {
-                padding-top: 2rem;
-            }
         }
 
     }

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

@@ -1,25 +1,34 @@
-import Link from 'next/link'
+import { Form, Formik } from 'formik'
 import React, { useRef } from 'react'
-import { ButtonCommon, Inputcommon } from 'src/components/common'
+import { ButtonCommon, InputFiledInForm } from 'src/components/common'
-import InputCommon from 'src/components/common/InputCommon/InputCommon'
 import { useMessage } from 'src/components/contexts'
 import { useSetCustomerForOrder } from 'src/components/hooks/order'
-import { ROUTE } from 'src/utils/constanst.utils'
+import { LANGUAGE } from 'src/utils/language.utils'
-import { CheckOutForm } from 'src/utils/types.utils'
+import { CustomInputCommon } from 'src/utils/type.utils'
+import * as Yup from 'yup'
+import ChekoutNotePolicy from '../ChekoutNotePolicy/ChekoutNotePolicy'
 import s from './CustomerInfoForm.module.scss'
-interface CustomerInfoFormProps {
+interface Props {
-  onConfirm?: (id: number, formInfo: CheckOutForm) => void
+  isHide: boolean
-  id: number
+  onSwitch: () => void
 }
 
-const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
+const displayingErrorMessagesSchema = Yup.object().shape({
-  const nameRef = useRef<React.ElementRef<typeof InputCommon>>(null)
+  firstName: Yup.string().required(LANGUAGE.MESSAGE.REQUIRED),
-  const emailRef = useRef<React.ElementRef<typeof InputCommon>>(null)
+  lastName: Yup.string().required(LANGUAGE.MESSAGE.REQUIRED),
+  emailAddress: Yup.string().email(LANGUAGE.MESSAGE.INVALID_EMAIL).required(LANGUAGE.MESSAGE.REQUIRED),
+})
+
+const CustomerInfoForm = ({ onSwitch, isHide }: Props) => {
+  const firstNameRef = useRef<CustomInputCommon>(null)
+  const emailRef = useRef<CustomInputCommon>(null)
   const { setCustomerForOrder, loading } = useSetCustomerForOrder()
   const { showMessageError } = useMessage()
 
-  const handleConfirmClick = () => {
+  const handleSubmit = (values: { firstName: string, lastName: string, emailAddress: string }) => {
-    setCustomerForOrder({ firstName: 'Ly', lastName: 'Tran', emailAddress: 'test7@gmail.com' }, onSubmitCalBack)
+    console.log('on submit: ', values)
+    const { firstName, lastName, emailAddress } = values
+    setCustomerForOrder({ firstName, lastName, emailAddress }, onSubmitCalBack)
     // onConfirm &&
     //   onConfirm(id, {
     //     name: nameRef?.current?.getValue().toString(),
@@ -28,8 +37,9 @@ const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
   }
   const onSubmitCalBack = (isSuccess: boolean, msg?: string) => {
     // TODO:
+    console.log("result: ", isSuccess, msg)
     if (isSuccess) {
-      
+
     } else {
       console.log("error here")
       showMessageError(msg)
@@ -38,38 +48,70 @@ const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => {
   }
 
   return (
-    <div className={s.warpper}>
+    <section className={s.warpper}>
       <div className={s.body}>
-        <Inputcommon type="text" placeholder="Full Name" ref={nameRef} />
+        <Formik
-        <Inputcommon type="text" placeholder="Email Address" ref={emailRef} />
+          initialValues={{
+            firstName: '',
+            lastName: '',
+            emailAddress: '',
+          }}
+          validationSchema={displayingErrorMessagesSchema}
+          onSubmit={handleSubmit}
+
+        >
+          {({ errors, touched, isValid, submitForm }) => (
+            <Form className="u-form">
+              <div className="body">
+                <div className="line">
+                  <InputFiledInForm
+                    name="firstName"
+                    placeholder="First name"
+                    ref={firstNameRef}
+                    error={
+                      touched.firstName && errors.firstName
+                        ? errors.firstName.toString()
+                        : ''
+                    }
+                    isShowIconSuccess={touched.firstName && !errors.firstName}
+                  />
+
+                  <InputFiledInForm
+                    name="lastName"
+                    placeholder="Last name"
+                    error={
+                      touched.lastName && errors.lastName
+                        ? errors.lastName.toString()
+                        : ''
+                    }
+                    isShowIconSuccess={touched.lastName && !errors.lastName}
+                  />
+                </div>
+                <InputFiledInForm
+                  name="emailAddress"
+                  placeholder="Email Address"
+                  ref={emailRef}
+                  error={
+                    touched.emailAddress && errors.emailAddress
+                      ? errors.emailAddress.toString()
+                      : ''
+                  }
+                  isShowIconSuccess={touched.emailAddress && !errors.emailAddress}
+                  onEnter={isValid ? submitForm : undefined}
+
+                />
+              </div>
+              <div className={s.bottom}>
+                <ChekoutNotePolicy />
+                <ButtonCommon HTMLType='submit' loading={loading} size="large">
+                  Continue to Shipping
+                </ButtonCommon>
+              </div>
+            </Form>
+          )}
+        </Formik>
       </div>
-      <div className={s.bottom}>
+    </section>
-        <div className={s.note}>
-          By clicking continue you agree to Casper's{' '}
-          {
-            <Link href={ROUTE.TERM_CONDITION}>
-              <a>
-                <strong>terms and conditions</strong>
-              </a>
-            </Link>
-          }{' '}
-          and{' '}
-          {
-            <Link href={ROUTE.PRIVACY_POLICY}>
-              <a>
-                <strong>privacy policy </strong>
-              </a>
-            </Link>
-          }
-          .
-        </div>
-        <div className={s.button}>
-          <ButtonCommon onClick={handleConfirmClick}>
-            Continue to Shipping
-          </ButtonCommon>
-        </div>
-      </div>
-    </div>
   )
 }
 

src/styles/_utilities.scss

@@ -201,7 +201,7 @@
                 }
             }
             .line {
-                @apply flex justify-between items-center;
+                @apply flex justify-between items-start;
                 > div {
                     flex: 1;
                     &:not(:last-child) {

src/utils/language.utils.ts

@@ -11,6 +11,9 @@ export const LANGUAGE = {
         SEARCH: 'Search',
     },
     MESSAGE: {
-        ERROR: 'Something went wrong! Please try again!'
+        ERROR: 'Something went wrong! Please try again!',
+        INVALID_EMAIL: 'Your email was wrong',
+        REQUIRED: 'Required',
+
     }
 }