From d5eade99b45f2da99fd01986517a544db18b4731 Mon Sep 17 00:00:00 2001 From: lytrankieio123 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}
- {cancelText} + {cancelText}
- {okText} + {okText}
) 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(null) + const emailRef = useRef(null) const { setCustomerForOrder, loading } = useSetCustomerForOrder() const { showMessageError } = useMessage() const [emailAddress, setEmailAddress] = useState('') @@ -58,11 +59,16 @@ const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => { } } } - const handleCloseModalConfirmLogin = () => { + const handleOpenModalLogin = () => { closeModalConfirmLogin() openModalAuthen() } + const handleCloseModalConfirmLogin = () => { + closeModalConfirmLogin() + emailRef.current?.focus() + } + return (
@@ -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) => { )}
- +
) 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" > -
+

Account already exists for email {email}

Please signin to continue or use another email