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 (
+
+ )
+})
+
+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
-
-
-
-
+
)
}
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