From d5eade99b45f2da99fd01986517a544db18b4731 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Wed, 20 Oct 2021 16:03:30 +0700
Subject: [PATCH] :recycle: enhan: flow input customer info at checkout

:%s
---
 src/components/common/ModalConfirm/ModalConfirm.tsx   |  6 +++---
 .../modules/checkout/CheckoutInfo/CheckoutInfo.tsx    |  3 +--
 .../components/CustomerInfoForm/CustomerInfoForm.tsx  | 11 +++++++++--
 .../ModalConfirmLogin/ModalConfirmLogin.module.scss   |  5 +++++
 .../ModalConfirmLogin/ModalConfirmLogin.tsx           |  3 ++-
 5 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/components/common/ModalConfirm/ModalConfirm.tsx b/src/components/common/ModalConfirm/ModalConfirm.tsx
index adc855168..ac6ccc00c 100644
--- a/src/components/common/ModalConfirm/ModalConfirm.tsx
+++ b/src/components/common/ModalConfirm/ModalConfirm.tsx
@@ -5,7 +5,7 @@ import s from './ModalConfirm.module.scss'
 interface ModalConfirmProps extends ModalCommonProps {
   okText?: String
   cancelText?: String
-  loading?:boolean
+  loading?: boolean
   onOk?: () => void
   onCancel?: () => void
 }
@@ -26,9 +26,9 @@ const ModalConfirm = ({
       {children}
       <div className={s.footer}>
         <div className="mr-4">
-          <ButtonCommon onClick={onCancel || onClose} type="light"> {cancelText}</ButtonCommon>
+          <ButtonCommon onClick={onCancel || onClose} type="light" size="small"> {cancelText}</ButtonCommon>
         </div>
-          <ButtonCommon onClick={onOk} loading={loading}>{okText}</ButtonCommon>
+        <ButtonCommon onClick={onOk} loading={loading} size="small">{okText}</ButtonCommon>
       </div>
     </ModalCommon>
   )
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
index fdab2da6f..a35a13df2 100644
--- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
@@ -79,8 +79,7 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
   const getNote = (id: CheckoutStep) => {
     switch (id) {
       case CheckoutStep.CustomerInfo:
-        // console.log("order info; ", order?.customer)
-        if (order?.customer) {
+        if (order?.customer?.emailAddress) {
           return `${order?.customer?.firstName} ${order?.customer?.lastName}, ${order?.customer?.emailAddress}`
         } else if (customer) {
           return `${customer.firstName} ${customer.lastName}, ${customer.emailAddress}`
diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
index fb18b79e3..65177f043 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx
@@ -28,6 +28,7 @@ const displayingErrorMessagesSchema = Yup.object().shape({
 
 const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
   const firstNameRef = useRef<CustomInputCommon>(null)
+  const emailRef = useRef<CustomInputCommon>(null)
   const { setCustomerForOrder, loading } = useSetCustomerForOrder()
   const { showMessageError } = useMessage()
   const [emailAddress, setEmailAddress] = useState<string>('')
@@ -58,11 +59,16 @@ const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
       }
     }
   }
-  const handleCloseModalConfirmLogin = () => {
+  const handleOpenModalLogin = () => {
     closeModalConfirmLogin()
     openModalAuthen()
   }
 
+  const handleCloseModalConfirmLogin = () => {
+    closeModalConfirmLogin()
+    emailRef.current?.focus()
+  }
+
   return (
     <section className={s.warpper}>
       <div className={s.body}>
@@ -110,6 +116,7 @@ const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
                       ? errors.emailAddress.toString()
                       : ''
                   }
+                  ref={emailRef}
                   isShowIconSuccess={touched.emailAddress && !errors.emailAddress}
                   onEnter={isValid ? submitForm : undefined}
 
@@ -125,7 +132,7 @@ const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
           )}
         </Formik>
       </div>
-      <ModalConfirmLogin visible={visibleModalConfirmLogin} closeModal={closeModalConfirmLogin} handleOk={handleCloseModalConfirmLogin} email={emailAddress} />
+      <ModalConfirmLogin visible={visibleModalConfirmLogin} closeModal={handleCloseModalConfirmLogin} handleOk={handleOpenModalLogin} email={emailAddress} />
       <ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} initialEmail={emailAddress} disableRedirect={true} />
     </section>
   )
diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/ModalConfirmLogin/ModalConfirmLogin.module.scss b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/ModalConfirmLogin/ModalConfirmLogin.module.scss
index e69de29bb..ca70f06a7 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/ModalConfirmLogin/ModalConfirmLogin.module.scss
+++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/ModalConfirmLogin/ModalConfirmLogin.module.scss
@@ -0,0 +1,5 @@
+
+.modalConfirmLogin {
+    min-width: 40rem;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/ModalConfirmLogin/ModalConfirmLogin.tsx b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/ModalConfirmLogin/ModalConfirmLogin.tsx
index c7723906b..bf2445eb9 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/ModalConfirmLogin/ModalConfirmLogin.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/ModalConfirmLogin/ModalConfirmLogin.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ModalConfirm } from 'src/components/common';
 import { LANGUAGE } from 'src/utils/language.utils';
+import s from './ModalConfirmLogin.module.scss'
 
 interface Props {
     visible: boolean
@@ -19,7 +20,7 @@ const ModalConfirmLogin = ({ visible, closeModal, handleOk, email }: Props) => {
                 okText={LANGUAGE.BUTTON_LABEL.SIGNIN}
                 cancelText="Change email address"
             >
-                <div>
+                <div className={s.modalConfirmLogin}>
                     <p> Account already exists for email {email} </p>
                     <p>Please signin to continue or use another email</p>
                 </div>