mirror of
https://github.com/vercel/commerce.git
synced 2025-07-24 10:41:23 +00:00
♻️ enhan: flow input customer info at checkout
:%s
This commit is contained in:
@@ -5,7 +5,7 @@ import s from './ModalConfirm.module.scss'
|
|||||||
interface ModalConfirmProps extends ModalCommonProps {
|
interface ModalConfirmProps extends ModalCommonProps {
|
||||||
okText?: String
|
okText?: String
|
||||||
cancelText?: String
|
cancelText?: String
|
||||||
loading?:boolean
|
loading?: boolean
|
||||||
onOk?: () => void
|
onOk?: () => void
|
||||||
onCancel?: () => void
|
onCancel?: () => void
|
||||||
}
|
}
|
||||||
@@ -26,9 +26,9 @@ const ModalConfirm = ({
|
|||||||
{children}
|
{children}
|
||||||
<div className={s.footer}>
|
<div className={s.footer}>
|
||||||
<div className="mr-4">
|
<div className="mr-4">
|
||||||
<ButtonCommon onClick={onCancel || onClose} type="light"> {cancelText}</ButtonCommon>
|
<ButtonCommon onClick={onCancel || onClose} type="light" size="small"> {cancelText}</ButtonCommon>
|
||||||
</div>
|
</div>
|
||||||
<ButtonCommon onClick={onOk} loading={loading}>{okText}</ButtonCommon>
|
<ButtonCommon onClick={onOk} loading={loading} size="small">{okText}</ButtonCommon>
|
||||||
</div>
|
</div>
|
||||||
</ModalCommon>
|
</ModalCommon>
|
||||||
)
|
)
|
||||||
|
@@ -79,8 +79,7 @@ const CheckoutInfo = ({ onViewCart }: CheckoutInfoProps) => {
|
|||||||
const getNote = (id: CheckoutStep) => {
|
const getNote = (id: CheckoutStep) => {
|
||||||
switch (id) {
|
switch (id) {
|
||||||
case CheckoutStep.CustomerInfo:
|
case CheckoutStep.CustomerInfo:
|
||||||
// console.log("order info; ", order?.customer)
|
if (order?.customer?.emailAddress) {
|
||||||
if (order?.customer) {
|
|
||||||
return `${order?.customer?.firstName} ${order?.customer?.lastName}, ${order?.customer?.emailAddress}`
|
return `${order?.customer?.firstName} ${order?.customer?.lastName}, ${order?.customer?.emailAddress}`
|
||||||
} else if (customer) {
|
} else if (customer) {
|
||||||
return `${customer.firstName} ${customer.lastName}, ${customer.emailAddress}`
|
return `${customer.firstName} ${customer.lastName}, ${customer.emailAddress}`
|
||||||
|
@@ -28,6 +28,7 @@ const displayingErrorMessagesSchema = Yup.object().shape({
|
|||||||
|
|
||||||
const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
|
const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
|
||||||
const firstNameRef = useRef<CustomInputCommon>(null)
|
const firstNameRef = useRef<CustomInputCommon>(null)
|
||||||
|
const emailRef = useRef<CustomInputCommon>(null)
|
||||||
const { setCustomerForOrder, loading } = useSetCustomerForOrder()
|
const { setCustomerForOrder, loading } = useSetCustomerForOrder()
|
||||||
const { showMessageError } = useMessage()
|
const { showMessageError } = useMessage()
|
||||||
const [emailAddress, setEmailAddress] = useState<string>('')
|
const [emailAddress, setEmailAddress] = useState<string>('')
|
||||||
@@ -58,11 +59,16 @@ const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const handleCloseModalConfirmLogin = () => {
|
const handleOpenModalLogin = () => {
|
||||||
closeModalConfirmLogin()
|
closeModalConfirmLogin()
|
||||||
openModalAuthen()
|
openModalAuthen()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleCloseModalConfirmLogin = () => {
|
||||||
|
closeModalConfirmLogin()
|
||||||
|
emailRef.current?.focus()
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<section className={s.warpper}>
|
<section className={s.warpper}>
|
||||||
<div className={s.body}>
|
<div className={s.body}>
|
||||||
@@ -110,6 +116,7 @@ const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
|
|||||||
? errors.emailAddress.toString()
|
? errors.emailAddress.toString()
|
||||||
: ''
|
: ''
|
||||||
}
|
}
|
||||||
|
ref={emailRef}
|
||||||
isShowIconSuccess={touched.emailAddress && !errors.emailAddress}
|
isShowIconSuccess={touched.emailAddress && !errors.emailAddress}
|
||||||
onEnter={isValid ? submitForm : undefined}
|
onEnter={isValid ? submitForm : undefined}
|
||||||
|
|
||||||
@@ -125,7 +132,7 @@ const CustomerInfoForm = ({ id, onConfirm, activeStep }: Props) => {
|
|||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
</div>
|
</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} />
|
<ModalAuthenticate visible={visibleModalAuthen} closeModal={closeModalAuthen} initialEmail={emailAddress} disableRedirect={true} />
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
|
@@ -0,0 +1,5 @@
|
|||||||
|
|
||||||
|
.modalConfirmLogin {
|
||||||
|
min-width: 40rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
@@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ModalConfirm } from 'src/components/common';
|
import { ModalConfirm } from 'src/components/common';
|
||||||
import { LANGUAGE } from 'src/utils/language.utils';
|
import { LANGUAGE } from 'src/utils/language.utils';
|
||||||
|
import s from './ModalConfirmLogin.module.scss'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
visible: boolean
|
visible: boolean
|
||||||
@@ -19,7 +20,7 @@ const ModalConfirmLogin = ({ visible, closeModal, handleOk, email }: Props) => {
|
|||||||
okText={LANGUAGE.BUTTON_LABEL.SIGNIN}
|
okText={LANGUAGE.BUTTON_LABEL.SIGNIN}
|
||||||
cancelText="Change email address"
|
cancelText="Change email address"
|
||||||
>
|
>
|
||||||
<div>
|
<div className={s.modalConfirmLogin}>
|
||||||
<p> Account already exists for email {email} </p>
|
<p> Account already exists for email {email} </p>
|
||||||
<p>Please signin to continue or use another email</p>
|
<p>Please signin to continue or use another email</p>
|
||||||
</div>
|
</div>
|
||||||
|
Reference in New Issue
Block a user