From 2667facd98b80d4e6832ddce5df437b531816774 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Mon, 18 Oct 2021 19:52:22 +0700 Subject: [PATCH] :sparkles: feat: (checkout) fill out customer info in order :%s --- .../components/FormLogin/FormLogin.tsx | 8 +- .../ChekoutNotePolicy.module.scss | 6 + .../ChekoutNotePolicy/ChekoutNotePolicy.tsx | 31 +++++ .../CustomerInfoForm.module.scss | 7 - .../CustomerInfoForm/CustomerInfoForm.tsx | 130 ++++++++++++------ src/styles/_utilities.scss | 2 +- src/utils/language.utils.ts | 5 +- 7 files changed, 132 insertions(+), 57 deletions(-) create mode 100644 src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss create mode 100644 src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx diff --git a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx index 279137a84..3f4ac6816 100644 --- a/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx +++ b/src/components/common/ModalAuthenticate/components/FormLogin/FormLogin.tsx @@ -17,11 +17,11 @@ interface Props { onSwitch: () => void } -const DisplayingErrorMessagesSchema = Yup.object().shape({ - email: Yup.string().email('Your email was wrong').required('Required'), +const displayingErrorMessagesSchema = Yup.object().shape({ + 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} > diff --git a/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss new file mode 100644 index 000000000..83f678cf2 --- /dev/null +++ b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.module.scss @@ -0,0 +1,6 @@ +@import "../../../../../../styles/utilities"; + +.chekoutNotePolicy { + @apply caption; + margin-bottom: 1.6rem; +} diff --git a/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx b/src/components/modules/checkout/CheckoutInfo/components/ChekoutNotePolicy/ChekoutNotePolicy.tsx new file mode 100644 index 000000000..9c988ae03 --- /dev/null +++ b/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 ( +
+ By clicking continue you agree to Casper's{' '} + { + + + terms and conditions + + + }{' '} + and{' '} + { + + + privacy policy + + + } + . +
+ ) +}) + +ChekoutNotePolicy.displayName = 'ChekoutNotePolicy' +export default ChekoutNotePolicy diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss index 863a716b8..10dd6ec36 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.module.scss +++ b/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; - } } } diff --git a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx index 50c19fa30..8df2ab1fb 100644 --- a/src/components/modules/checkout/CheckoutInfo/components/CustomerInfoForm/CustomerInfoForm.tsx +++ b/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 InputCommon from 'src/components/common/InputCommon/InputCommon' +import { ButtonCommon, InputFiledInForm } from 'src/components/common' import { useMessage } from 'src/components/contexts' import { useSetCustomerForOrder } from 'src/components/hooks/order' -import { ROUTE } from 'src/utils/constanst.utils' -import { CheckOutForm } from 'src/utils/types.utils' +import { LANGUAGE } from 'src/utils/language.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 { - onConfirm?: (id: number, formInfo: CheckOutForm) => void - id: number +interface Props { + isHide: boolean + onSwitch: () => void } -const CustomerInfoForm = ({ id, onConfirm }: CustomerInfoFormProps) => { - const nameRef = useRef>(null) - const emailRef = useRef>(null) +const displayingErrorMessagesSchema = Yup.object().shape({ + firstName: Yup.string().required(LANGUAGE.MESSAGE.REQUIRED), + 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(null) + const emailRef = useRef(null) const { setCustomerForOrder, loading } = useSetCustomerForOrder() const { showMessageError } = useMessage() - const handleConfirmClick = () => { - setCustomerForOrder({ firstName: 'Ly', lastName: 'Tran', emailAddress: 'test7@gmail.com' }, onSubmitCalBack) + const handleSubmit = (values: { firstName: string, lastName: string, emailAddress: string }) => { + 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 ( -
+
- - + + {({ errors, touched, isValid, submitForm }) => ( +
+
+
+ + + +
+ +
+
+ + + Continue to Shipping + +
+
+ )} +
-
-
- By clicking continue you agree to Casper's{' '} - { - - - terms and conditions - - - }{' '} - and{' '} - { - - - privacy policy - - - } - . -
-
- - Continue to Shipping - -
-
-
+ ) } diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index af566560a..570c1069d 100644 --- a/src/styles/_utilities.scss +++ b/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) { diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts index 921c29435..2005f900d 100644 --- a/src/utils/language.utils.ts +++ b/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', + } } \ No newline at end of file