From a4c23a218151310f9c294f734cc671d81c53ea50 Mon Sep 17 00:00:00 2001 From: Tan Le Date: Thu, 30 Sep 2021 15:47:57 +0700 Subject: [PATCH 01/12] feat: getProductDetail --- framework/vendure/schema.d.ts | 2 +- next-env.d.ts | 3 -- src/components/hooks/product/index.tsx | 1 + .../hooks/product/useProductDetail.tsx | 31 +++++++++++++++++++ .../ProductImgItem/ProductImgItem.tsx | 8 ++--- .../components/ProductImgs/ProductImgs.tsx | 4 ++- .../components/ProductInfo/ProductInfo.tsx | 10 +++--- 7 files changed, 46 insertions(+), 13 deletions(-) create mode 100644 src/components/hooks/product/index.tsx create mode 100644 src/components/hooks/product/useProductDetail.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index 9d6b53c52..b664d8fa1 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -3206,7 +3206,7 @@ export type GetProductQuery = { __typename?: 'Query' } & { variants: Array< { __typename?: 'ProductVariant' } & Pick< ProductVariant, - 'id' | 'priceWithTax' | 'currencyCode' + 'id' | 'priceWithTax' | 'currencyCode' | 'price' > & { options: Array< { __typename?: 'ProductOption' } & Pick< diff --git a/next-env.d.ts b/next-env.d.ts index 9bc3dd46b..c6643fda1 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,3 @@ /// /// /// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/src/components/hooks/product/index.tsx b/src/components/hooks/product/index.tsx new file mode 100644 index 000000000..bfe1abac2 --- /dev/null +++ b/src/components/hooks/product/index.tsx @@ -0,0 +1 @@ +export { default as useProductDetail } from './useProductDetail' \ No newline at end of file diff --git a/src/components/hooks/product/useProductDetail.tsx b/src/components/hooks/product/useProductDetail.tsx new file mode 100644 index 000000000..6a147d263 --- /dev/null +++ b/src/components/hooks/product/useProductDetail.tsx @@ -0,0 +1,31 @@ +import { GetProductQuery } from '@framework/schema' +import { gql } from 'graphql-request' +import gglFetcher from 'src/utils/gglFetcher' +import useSWR from 'swr' + +const query = gql` + query GetProductDetail($slug: String! = "hand-trowel") { + product(slug: $slug) { + name + description + variants { + price + priceWithTax + } + assets { + preview + name + } + } +} +` +interface ProductDetail { + slug: string +} + +const useProductDetail = () => { + const { data, ...rest } = useSWR([query],gglFetcher) + return { productDetail: data?.product, ...rest } +} + +export default useProductDetail \ No newline at end of file diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx index 95236266c..931b0a36c 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx @@ -3,15 +3,15 @@ import { ImgWithLink } from 'src/components/common' import s from './ProductImgItem.module.scss' export interface ProductImgItemProps { - src: string - alt?: string + preview: string + name?: string } -const ProductImgItem = ({ src, alt }: ProductImgItemProps) => { +const ProductImgItem = ({ preview, name }: ProductImgItemProps) => { return (
- +
) } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx index 475d0f22e..365faa73a 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -2,6 +2,7 @@ import React from 'react' import { ResponsiveType } from 'react-multi-carousel' import { CarouselCommon } from 'src/components/common' import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem' +import { useProductDetail } from 'src/components/hooks/product' import s from './ProductImgs.module.scss' interface Props { @@ -32,10 +33,11 @@ const RESPONSIVE: ResponsiveType = { }, } const ProductImgs = ({ }: Props) => { + const { productDetail } = useProductDetail() return (
- data={DATA} + data={productDetail?.assets ?? []} itemKey="product-detail-img" Component={ProductImgItem} responsive={RESPONSIVE} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx index 4abb62568..40779083c 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -2,6 +2,7 @@ import React from 'react' import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' import { IconBuy } from 'src/components/icons' import { LANGUAGE } from 'src/utils/language.utils' +import { useProductDetail } from 'src/components/hooks/product' import s from './ProductInfo.module.scss' interface Props { @@ -10,20 +11,21 @@ interface Props { } const ProductInfo = ({ }: Props) => { + const {productDetail} = useProductDetail() return (
SEAFOOD -

SeaPAk

+

{productDetail?.name}

- Rp 32.000 + Rp {productDetail?.variants[0].priceWithTax} -15%
-
Rp 27.500
+
Rp {productDetail?.variants[0].price}
- In a large non-reactive dish, mix together the orange juice, soy sauce, olive oil, lemon juice, parsley + {productDetail?.description}
From cf2260869a0c23dee4790b8632bb8b24eeb069de Mon Sep 17 00:00:00 2001 From: Tan Le Date: Thu, 30 Sep 2021 15:52:18 +0700 Subject: [PATCH 02/12] refactor: move query into get-product-query --- .../utils/queries/get-product-query.ts | 16 ++++++++++++++ .../hooks/product/useProductDetail.tsx | 21 +++---------------- 2 files changed, 19 insertions(+), 18 deletions(-) diff --git a/framework/vendure/utils/queries/get-product-query.ts b/framework/vendure/utils/queries/get-product-query.ts index b2c502da9..82aa5dc41 100644 --- a/framework/vendure/utils/queries/get-product-query.ts +++ b/framework/vendure/utils/queries/get-product-query.ts @@ -39,3 +39,19 @@ export const getProductQuery = /* GraphQL */ ` } } ` +export const getProductDetailQuery = /* GraphQL */ ` + query GetProductDetail($slug: String! = "hand-trowel") { + product(slug: $slug) { + name + description + variants { + price + priceWithTax + } + assets { + preview + name + } + } +} +` \ No newline at end of file diff --git a/src/components/hooks/product/useProductDetail.tsx b/src/components/hooks/product/useProductDetail.tsx index 6a147d263..a68b1449d 100644 --- a/src/components/hooks/product/useProductDetail.tsx +++ b/src/components/hooks/product/useProductDetail.tsx @@ -1,30 +1,15 @@ import { GetProductQuery } from '@framework/schema' -import { gql } from 'graphql-request' +import { getProductDetailQuery } from '@framework/utils/queries/get-product-query'; import gglFetcher from 'src/utils/gglFetcher' import useSWR from 'swr' -const query = gql` - query GetProductDetail($slug: String! = "hand-trowel") { - product(slug: $slug) { - name - description - variants { - price - priceWithTax - } - assets { - preview - name - } - } -} -` + interface ProductDetail { slug: string } const useProductDetail = () => { - const { data, ...rest } = useSWR([query],gglFetcher) + const { data, ...rest } = useSWR([getProductDetailQuery],gglFetcher) return { productDetail: data?.product, ...rest } } From 6238026b14a3c859643341d4e57937603f821ff2 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Fri, 1 Oct 2021 10:26:06 +0700 Subject: [PATCH 03/12] khong co gitthay doi --- next-env.d.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/next-env.d.ts b/next-env.d.ts index 9bc3dd46b..c6643fda1 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,3 @@ /// /// /// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. From 19c826722057c1d0cfb5df77203838e13d565c18 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Fri, 1 Oct 2021 18:28:17 +0700 Subject: [PATCH 04/12] feat: create RequestPasswordReset --- framework/vendure/schema.d.ts | 39 ++++++++++++++++++- .../request-password-reset-mutation.ts | 14 +++++++ .../mutations/reset-password-mutation.ts | 15 +++++++ 3 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 framework/vendure/utils/mutations/request-password-reset-mutation.ts create mode 100644 framework/vendure/utils/mutations/reset-password-mutation.ts diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index b0b0170d7..af6eb5051 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -1,3 +1,5 @@ +import { ResetPassword } from './schema.d'; +import { requestPasswordReset } from '@framework/schema'; export type Maybe = T | null export type Exact = { [K in keyof T]: T[K] @@ -3095,6 +3097,36 @@ export type LoginMutation = { __typename?: 'Mutation' } & { >) } +export type ResetPasswordMutation = { __typename?: 'Mutation' } & { + resetPassword: + | ({ __typename: 'CurrentUser' } & Pick) + | ({ __typename: 'PasswordResetTokenInvalidError' } & Pick< + PasswordResetTokenInvalidError, + 'errorCode' | 'message' + >) + | ({ __typename: 'PasswordResetTokenExpiredError' } & Pick< + PasswordResetTokenExpiredError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NativeAuthStrategyError' } & Pick< + NativeAuthStrategyError, + 'errorCode' | 'message' + >) +} + +export type SignupMutation = { __typename?: 'Mutation' } & { + registerCustomerAccount: + | ({ __typename: 'Success' } & Pick) + | ({ __typename: 'MissingPasswordError' } & Pick< + MissingPasswordError, + 'errorCode' | 'message' + >) + | ({ __typename: 'NativeAuthStrategyError' } & Pick< + NativeAuthStrategyError, + 'errorCode' | 'message' + >) +} + export type VerifyCustomerAccountVariables = Exact<{ token: Scalars['String'] password?: Maybe @@ -3148,8 +3180,9 @@ export type SignupMutationVariables = Exact<{ input: RegisterCustomerInput }> -export type SignupMutation = { __typename?: 'Mutation' } & { - registerCustomerAccount: + +export type RequestPasswordReset = { __typename?: 'Mutation' } & { + requestPasswordReset: | ({ __typename: 'Success' } & Pick) | ({ __typename: 'MissingPasswordError' } & Pick< MissingPasswordError, @@ -3161,6 +3194,8 @@ export type SignupMutation = { __typename?: 'Mutation' } & { >) } + + export type ActiveCustomerQueryVariables = Exact<{ [key: string]: never }> export type ActiveCustomerQuery = { __typename?: 'Query' } & { diff --git a/framework/vendure/utils/mutations/request-password-reset-mutation.ts b/framework/vendure/utils/mutations/request-password-reset-mutation.ts new file mode 100644 index 000000000..474d8f33f --- /dev/null +++ b/framework/vendure/utils/mutations/request-password-reset-mutation.ts @@ -0,0 +1,14 @@ +export const requestPasswordReset = /* GraphQL */ ` +mutation RequestPasswordReset($emailAddress: String!) { + requestPasswordReset(emailAddress: $emailAddress) { + __typename + ...on Success{ + success + } + ...on ErrorResult{ + errorCode + message + } + } +} +` \ No newline at end of file diff --git a/framework/vendure/utils/mutations/reset-password-mutation.ts b/framework/vendure/utils/mutations/reset-password-mutation.ts new file mode 100644 index 000000000..8ff4058ed --- /dev/null +++ b/framework/vendure/utils/mutations/reset-password-mutation.ts @@ -0,0 +1,15 @@ +export const resetPasswordMutation = /* GraphQL */ ` +mutation resetPassword($token: String!,$password: String!){ + resetPassword(token: $token,password: $password){ + __typename + ...on CurrentUser{ + id + identifier + } + ...on ErrorResult{ + errorCode + message + } + } +} +` \ No newline at end of file From 7f927a0ba34960c17b4726796e5a7824f5c6c14a Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Mon, 4 Oct 2021 09:14:58 +0700 Subject: [PATCH 05/12] feat: RequestPasswordReset --- pages/forgot-password.tsx | 10 ++ pages/reset-password.tsx | 10 ++ .../FormForgot/FormForgot.module.scss | 22 ++++ .../ForgotPassword/FormForgot/FormForgot.tsx | 89 +++++++++++++++ .../FormResetPassword.module.scss | 27 +++++ .../FormResetPassword/FormResetPassword.tsx | 108 ++++++++++++++++++ .../components/HeaderMenu/HeaderMenu.tsx | 4 + src/components/common/index.ts | 2 + src/components/hooks/auth/index.ts | 2 + .../hooks/auth/useRequestPasswordReset.tsx | 50 ++++++++ .../hooks/auth/useResetPassword.tsx | 52 +++++++++ 11 files changed, 376 insertions(+) create mode 100644 pages/forgot-password.tsx create mode 100644 pages/reset-password.tsx create mode 100644 src/components/common/ForgotPassword/FormForgot/FormForgot.module.scss create mode 100644 src/components/common/ForgotPassword/FormForgot/FormForgot.tsx create mode 100644 src/components/common/ForgotPassword/FormResetPassword/FormResetPassword.module.scss create mode 100644 src/components/common/ForgotPassword/FormResetPassword/FormResetPassword.tsx create mode 100644 src/components/hooks/auth/useRequestPasswordReset.tsx create mode 100644 src/components/hooks/auth/useResetPassword.tsx diff --git a/pages/forgot-password.tsx b/pages/forgot-password.tsx new file mode 100644 index 000000000..8d4b1e570 --- /dev/null +++ b/pages/forgot-password.tsx @@ -0,0 +1,10 @@ +import { FormForgot, Layout } from 'src/components/common' + +export default function NotFound() { + return ( +
+ +
+ ) +} +NotFound.Layout = Layout diff --git a/pages/reset-password.tsx b/pages/reset-password.tsx new file mode 100644 index 000000000..bc8905da3 --- /dev/null +++ b/pages/reset-password.tsx @@ -0,0 +1,10 @@ +import { FormResetPassword, Layout } from 'src/components/common' + +export default function NotFound() { + return ( +
+ +
+ ) +} +NotFound.Layout = Layout diff --git a/src/components/common/ForgotPassword/FormForgot/FormForgot.module.scss b/src/components/common/ForgotPassword/FormForgot/FormForgot.module.scss new file mode 100644 index 000000000..57b39c56c --- /dev/null +++ b/src/components/common/ForgotPassword/FormForgot/FormForgot.module.scss @@ -0,0 +1,22 @@ +@import '../../../../styles/utilities'; +.formAuthen{ + width: 50%; + margin: 0 auto; + padding: 4rem 0 ; + .title{ + @apply font-heading heading-3; + padding: 0 1.6rem 0 0.8rem; + margin-bottom: 2rem; + } + .bottom { + @apply flex justify-between items-center; + margin: 4rem auto; + .remembered { + @apply font-bold cursor-pointer; + color: var(--primary); + } + } + .socialAuthen{ + margin-bottom: 3rem; + } +} diff --git a/src/components/common/ForgotPassword/FormForgot/FormForgot.tsx b/src/components/common/ForgotPassword/FormForgot/FormForgot.tsx new file mode 100644 index 000000000..834c65919 --- /dev/null +++ b/src/components/common/ForgotPassword/FormForgot/FormForgot.tsx @@ -0,0 +1,89 @@ +import { Form, Formik } from 'formik'; +import React, { useRef } from 'react'; +import { ButtonCommon, InputFiledInForm } from 'src/components/common'; +import { useModalCommon } from 'src/components/hooks'; +import useRequestPasswordReset from 'src/components/hooks/auth/useRequestPasswordReset'; +import { CustomInputCommon } from 'src/utils/type.utils'; +import * as Yup from 'yup'; +import ModalAuthenticate from '../../ModalAuthenticate/ModalAuthenticate'; +import { default as s, default as styles } from './FormForgot.module.scss'; +import { useMessage } from 'src/components/contexts' +import { LANGUAGE } from 'src/utils/language.utils' + +interface Props { + +} +const DisplayingErrorMessagesSchema = Yup.object().shape({ + email: Yup.string().email('Your email was wrong').required('Required') +}) + +const FormForgot = ({ }: Props) => { + const {requestPassword} = useRequestPasswordReset(); + const { showMessageSuccess, showMessageError } = useMessage(); + + const emailRef = useRef(null); + + const { visible: visibleModalAuthen,closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false }); + + const onForgot = (values: { email: string }) => { + requestPassword({email: values.email},onForgotPasswordCallBack); + } + + const onForgotPasswordCallBack = (isSuccess: boolean, message?: string) => { + if (isSuccess) { + showMessageSuccess("Request forgot password successfully. Please verify your email to login.") + } else { + showMessageError(message || LANGUAGE.MESSAGE.ERROR) + } + } + + return ( +
+
+
+
Forgot Password
+ + {({ errors, touched, isValid, submitForm }) => ( +
+
+ +
+
+
+ I Remembered My Password? +
+ + Reset Password + +
+
+ )} +
+
+ +
+
+ ) + + +} + + +export default FormForgot; \ No newline at end of file diff --git a/src/components/common/ForgotPassword/FormResetPassword/FormResetPassword.module.scss b/src/components/common/ForgotPassword/FormResetPassword/FormResetPassword.module.scss new file mode 100644 index 000000000..faf1b7f06 --- /dev/null +++ b/src/components/common/ForgotPassword/FormResetPassword/FormResetPassword.module.scss @@ -0,0 +1,27 @@ +@import '../../../../styles/utilities'; +.formAuthen{ + width: 50%; + margin: 0 auto; + padding: 4rem 0 ; + .title{ + @apply font-heading heading-3; + padding: 0 1.6rem 0 0.8rem; + margin-bottom: 2rem; + } + .passwordNote { + @apply text-center caption text-label; + margin-top: 0.8rem; + } + .bottom { + @apply flex justify-center items-center; + margin: 4rem auto; + .remembered { + @apply font-bold cursor-pointer; + color: var(--primary); + } + } + .confirmPassword{ + margin-top: 2rem; + } + +} diff --git a/src/components/common/ForgotPassword/FormResetPassword/FormResetPassword.tsx b/src/components/common/ForgotPassword/FormResetPassword/FormResetPassword.tsx new file mode 100644 index 000000000..ad41396ab --- /dev/null +++ b/src/components/common/ForgotPassword/FormResetPassword/FormResetPassword.tsx @@ -0,0 +1,108 @@ +import { Form, Formik } from 'formik'; +import React, { useRef } from 'react'; +import { ButtonCommon, InputPasswordFiledInForm } from 'src/components/common'; +import { useMessage } from 'src/components/contexts'; +import useRequestPasswordReset from 'src/components/hooks/auth/useRequestPasswordReset'; +import { LANGUAGE } from 'src/utils/language.utils'; +import { CustomInputCommon } from 'src/utils/type.utils'; +import * as Yup from 'yup'; +import { useRouter } from 'next/router' +import { default as s, default as styles } from './FormResetPassword.module.scss'; +import { useResetPassword } from 'src/components/hooks/auth'; + +interface Props { + +} +const DisplayingErrorMessagesSchema = Yup.object().shape({ + password: Yup.string() + .matches( + /^(?=.{8,})(?=.*[a-z])(?=.*[A-Z])((?=.*[0-9!@#$%^&*()\-_=+{};:,<.>]){1}).*$/, + 'Must contain 8 characters with at least 1 uppercase and 1 lowercase letter and either 1 number or 1 special character.' + ) + .max(30, 'Password is too long') + .required('Required'), + confirmPassword: Yup.string() + .label('Password Confirm') + .required() + .oneOf([Yup.ref('password')], 'Passwords does not match'), +}) + +const FormResetPassword = ({ }: Props) => { + const router = useRouter(); + + const {resetPassword} = useResetPassword(); + + const { showMessageSuccess, showMessageError } = useMessage(); + + const onReset = (values: {password: string }) => { + const { token } = router.query; + resetPassword({token:token,password: values.password},onResetPasswordCallBack); + } + + const onResetPasswordCallBack = (isSuccess: boolean, message?: string) => { + if (isSuccess) { + showMessageSuccess("Reset password successfully. Please to login.") + } else { + showMessageError(message || LANGUAGE.MESSAGE.ERROR) + } + } + + return ( +
+
+
+
Reset Password
+ + {({ errors, touched, isValid, submitForm }) => ( +
+
+ +
+
+ +
+ +
+ Must contain 8 characters with at least 1 uppercase and 1 + lowercase letter and either 1 number or 1 special character. +
+
+ + Change Password + +
+
+ )} +
+
+
+
+ ) +} + + +export default FormResetPassword; \ No newline at end of file diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index 4f7e5d21a..5922e5017 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -60,6 +60,10 @@ const HeaderMenu = memo( onClick: openModalRegister, name: 'Create account', }, + { + link: '/forgot-password', + name: 'Forgot Password', + }, ], [openModalLogin, openModalRegister] ) diff --git a/src/components/common/index.ts b/src/components/common/index.ts index eaa33176c..42d326690 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -51,5 +51,7 @@ export { default as LayoutCheckout} from './LayoutCheckout/LayoutCheckout' export { default as InputPasswordFiledInForm} from './InputPasswordFiledInForm/InputPasswordFiledInForm' export { default as InputFiledInForm} from './InputFiledInForm/InputFiledInForm' export { default as MessageCommon} from './MessageCommon/MessageCommon' +export { default as FormForgot} from './ForgotPassword/FormForgot/FormForgot' +export { default as FormResetPassword} from './ForgotPassword/FormResetPassword/FormResetPassword' diff --git a/src/components/hooks/auth/index.ts b/src/components/hooks/auth/index.ts index 845617bcd..ffd93b6e6 100644 --- a/src/components/hooks/auth/index.ts +++ b/src/components/hooks/auth/index.ts @@ -3,4 +3,6 @@ export { default as useLogin } from './useLogin' export { default as useLogout } from './useLogout' export { default as useVerifyCustomer } from './useVerifyCustomer' export { default as useActiveCustomer } from './useActiveCustomer' +export { default as useRequestPasswordReset } from './useRequestPasswordReset' +export { default as useResetPassword } from './useResetPassword' diff --git a/src/components/hooks/auth/useRequestPasswordReset.tsx b/src/components/hooks/auth/useRequestPasswordReset.tsx new file mode 100644 index 000000000..f30c1ab44 --- /dev/null +++ b/src/components/hooks/auth/useRequestPasswordReset.tsx @@ -0,0 +1,50 @@ +import { useState } from 'react' +import useActiveCustomer from './useActiveCustomer' +import fetcher from 'src/utils/fetcher' +import { CommonError } from 'src/domains/interfaces/CommonError' +import { requestPasswordReset } from '@framework/utils/mutations/request-password-reset-mutation' +import { RequestPasswordReset } from '@framework/schema' + +interface ForgotPassword { + email: string +} + +const useRequestPasswordReset = () => { + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) + // const { mutate } = useActiveCustomer() + + const requestPassword = ( + {email}: ForgotPassword, + fCallBack: (isSuccess: boolean, message?: string) => void + ) => { + setError(null) + setLoading(true) + fetcher({ + query: requestPasswordReset, + variables: { + emailAddress: email + }, + }) + .then((data) => { + if (data.requestPasswordReset.__typename !== 'Success') { + throw CommonError.create( + data.requestPasswordReset.message, + data.requestPasswordReset.errorCode + ) + } + // mutate() + fCallBack(true) + return data + }) + .catch((error) => { + setError(error) + fCallBack(false, error.message) + }) + .finally(() => setLoading(false)) + } + + return { loading, requestPassword, error } +} + +export default useRequestPasswordReset diff --git a/src/components/hooks/auth/useResetPassword.tsx b/src/components/hooks/auth/useResetPassword.tsx new file mode 100644 index 000000000..788d496df --- /dev/null +++ b/src/components/hooks/auth/useResetPassword.tsx @@ -0,0 +1,52 @@ +import { useState } from 'react' +import useActiveCustomer from './useActiveCustomer' +import fetcher from 'src/utils/fetcher' +import { CommonError } from 'src/domains/interfaces/CommonError' +import { resetPasswordMutation } from '@framework/utils/mutations/reset-password-mutation' +import { ResetPasswordMutation } from '@framework/schema' + +interface Props { + token?: string| string[] , + password:string +} + +const useResetPassword = () => { + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) +// const { mutate } = useActiveCustomer() + + const resetPassword = ( + {token,password}: Props, + fCallBack: (isSuccess: boolean, message?: string) => void + ) => { + setError(null) + setLoading(true) + fetcher({ + query: resetPasswordMutation, + variables: { + token: token, + password:password + }, + }) + .then((data) => { + if (data.resetPassword.__typename !== 'CurrentUser') { + throw CommonError.create( + data.resetPassword.message, + data.resetPassword.errorCode + ) + } + // mutate() + fCallBack(true) + return data + }) + .catch((error) => { + setError(error) + fCallBack(false, error.message) + }) + .finally(() => setLoading(false)) + } + + return { loading, resetPassword, error } +} + +export default useResetPassword From c2c0531663e05f3ad361e5df97d4c7a94741314a Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Tue, 5 Oct 2021 11:52:11 +0700 Subject: [PATCH 06/12] bug: edit form user info --- framework/vendure/schema.d.ts | 5 +++- .../vendure/utils/queries/user-info-query.ts | 15 ++++++++++++ next-env.d.ts | 3 --- src/components/hooks/user/useUserInfo.tsx | 12 ++++++++++ .../account/AccountPage/AccountPage.tsx | 23 ++++++++++++++++--- .../AccountInfomation/AccountInfomation.tsx | 16 ++++++------- .../EditInfoModal/EditInfoModal.tsx | 11 ++++----- 7 files changed, 64 insertions(+), 21 deletions(-) create mode 100644 framework/vendure/utils/queries/user-info-query.ts create mode 100644 src/components/hooks/user/useUserInfo.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index b0b0170d7..91be7742d 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -317,6 +317,9 @@ export type Address = Node & { customFields?: Maybe } + + + export type Asset = Node & { __typename?: 'Asset' id: Scalars['ID'] @@ -3167,7 +3170,7 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & { activeCustomer?: Maybe< { __typename?: 'Customer' } & Pick< Customer, - 'id' | 'firstName' | 'lastName' | 'emailAddress' + 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' > > } diff --git a/framework/vendure/utils/queries/user-info-query.ts b/framework/vendure/utils/queries/user-info-query.ts new file mode 100644 index 000000000..a10acd365 --- /dev/null +++ b/framework/vendure/utils/queries/user-info-query.ts @@ -0,0 +1,15 @@ +export const userInfoQuery = /* GraphQL */ ` + query activeCustomer{ + activeCustomer{ + emailAddress + addresses{ + name:fullName + address:streetLine1 + city + state:province + postalCode + phoneNumber + } + } + } +` diff --git a/next-env.d.ts b/next-env.d.ts index 9bc3dd46b..c6643fda1 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,3 @@ /// /// /// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/src/components/hooks/user/useUserInfo.tsx b/src/components/hooks/user/useUserInfo.tsx new file mode 100644 index 000000000..69b80a467 --- /dev/null +++ b/src/components/hooks/user/useUserInfo.tsx @@ -0,0 +1,12 @@ +import { ActiveCustomerQuery } from '@framework/schema' +import { userInfoQuery } from '@framework/utils/queries/user-info-query' +import gglFetcher from 'src/utils/gglFetcher' +import useSWR from 'swr' + +const useUserInfo = () => { + const { data } = useSWR([userInfoQuery], gglFetcher) + + return { userInfo: data?.activeCustomer} +} + +export default useUserInfo diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index db5801235..e7154f46f 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -12,7 +12,9 @@ import EditInfoModal from './components/EditInfoModal/EditInfoModal' import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils" import { useRouter } from "next/router" - +import { useActiveCustomer } from 'src/components/hooks/auth' +import useUserInfo from "src/components/hooks/user/useUserInfo" +import { AccountProps } from "./components/AccountInfomation/AccountInfomation" const waiting = [ { id: "NO 123456", @@ -53,9 +55,10 @@ const delivered = [ ] let account = { - name: "vu duong", + firstName: "Nhân", + lastName: "Trần", email: "vuduong@gmail.com", - address: "234 Dien Bien Phu Bis, Dakao ward", + address: "235 Dien Bien Phu Bis, Dakao ward", state: "District 1", city: "HCMC", postalCode: "700000", @@ -80,6 +83,20 @@ const getTabIndex = (tab?: string): number => { const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { const router = useRouter() + + const {userInfo} = useUserInfo(); + + // const email = userInfo?.emailAddress; + // const [info] = userInfo?.addresses || []; + + // const accountInfo = {...info,userInfo?.emailAddress}; + + // const clone:AccountProps = Object.create(accountInfo); + // Object.assign(clone, accountInfo); + + + console.log(); + const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2) const [modalVisible, setModalVisible] = useState(false); diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx index b025d5744..dc32db71a 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx @@ -7,14 +7,14 @@ import avatar from '../../assets/avatar.png' import { ButtonCommon } from 'src/components/common' import { useActiveCustomer } from 'src/components/hooks/auth' -interface AccountProps { - name: string - email: string - address: string - state: string - city: string - postalCode: string - phoneNumber: string +export interface AccountProps { + name?: string + email?: string + address?: string + state?: string + city?: string + postalCode?: string + phoneNumber?: string } interface AccountInfomationProps { diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx index 06e6b2124..f9e4aebd5 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx @@ -4,7 +4,7 @@ import s from './EditInfoModal.module.scss' import { ModalCommon, Inputcommon, SelectCommon, ButtonCommon } from '../../../../../common' interface EditInfoModalProps { - accountInfo: {name: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string}; + accountInfo: {firstName: string,lastName: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string}; visible: boolean; closeModal: () => void; } @@ -25,12 +25,11 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod
- -
- -
- +
+
+ +
From dcfa1a1ecedafe965c7696d8996d35200d924751 Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Wed, 6 Oct 2021 12:10:04 +0700 Subject: [PATCH 07/12] feat: get-edit-user-info --- framework/vendure/schema.d.ts | 16 +- .../update-customer-address-mutation.ts | 14 ++ .../mutations/update-customer-mutation.ts | 13 ++ .../utils/queries/active-customer-query.ts | 7 + .../vendure/utils/queries/user-info-query.ts | 9 +- .../SelectCommon/SelectCommon.module.scss | 2 +- .../common/SelectCommon/SelectCommon.tsx | 10 +- .../hooks/auth/useActiveCustomer.tsx | 11 +- src/components/hooks/auth/useSignup.tsx | 1 - src/components/hooks/index.ts | 3 + .../hooks/user/useEditCustomerAddress.tsx | 55 +++++ src/components/hooks/user/useEditUserInfo.tsx | 51 +++++ src/components/hooks/user/useUserInfo.tsx | 12 - .../account/AccountPage/AccountPage.tsx | 30 +-- .../AccountInfomation/AccountInfomation.tsx | 23 +- .../EditInfoModal/EditInfoModal.module.scss | 10 + .../EditInfoModal/EditInfoModal.tsx | 209 +++++++++++++++--- 17 files changed, 380 insertions(+), 96 deletions(-) create mode 100644 framework/vendure/utils/mutations/update-customer-address-mutation.ts create mode 100644 framework/vendure/utils/mutations/update-customer-mutation.ts create mode 100644 src/components/hooks/user/useEditCustomerAddress.tsx create mode 100644 src/components/hooks/user/useEditUserInfo.tsx delete mode 100644 src/components/hooks/user/useUserInfo.tsx diff --git a/framework/vendure/schema.d.ts b/framework/vendure/schema.d.ts index 709b1f48b..b3ea2a038 100644 --- a/framework/vendure/schema.d.ts +++ b/framework/vendure/schema.d.ts @@ -1,4 +1,4 @@ -import { FacetValue } from './schema.d'; +import { FacetValue, UpdateAddressInput } from './schema.d'; export type Maybe = T | null export type Exact = { [K in keyof T]: T[K] @@ -304,6 +304,11 @@ export type MutationResetPasswordArgs = { } export type Address = Node & { + updateCustomerAddress: + | { + __typename?: 'Address' + id: Scalars['ID'] + } __typename?: 'Address' id: Scalars['ID'] createdAt: Scalars['DateTime'] @@ -1462,6 +1467,11 @@ export type CustomerListOptions = { } export type Customer = Node & { + updateCustomer: + | { + __typename?: 'Customer' + id: Scalars['ID'] + } __typename?: 'Customer' id: Scalars['ID'] createdAt: Scalars['DateTime'] @@ -1469,7 +1479,7 @@ export type Customer = Node & { title?: Maybe firstName: Scalars['String'] lastName: Scalars['String'] - phoneNumber?: Maybe + phoneNumber?: Maybe emailAddress: Scalars['String'] addresses?: Maybe> orders: OrderList @@ -3201,7 +3211,7 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & { activeCustomer?: Maybe< { __typename?: 'Customer' } & Pick< Customer, - 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' + 'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber' > > } diff --git a/framework/vendure/utils/mutations/update-customer-address-mutation.ts b/framework/vendure/utils/mutations/update-customer-address-mutation.ts new file mode 100644 index 000000000..4cac594ed --- /dev/null +++ b/framework/vendure/utils/mutations/update-customer-address-mutation.ts @@ -0,0 +1,14 @@ +export const updateCustomerAddress = /* GraphQL */ ` + mutation updateCustomerAddress($input: UpdateAddressInput!){ + updateCustomerAddress(input: $input){ + __typename + ...on Address{ + id + streetLine1 + city + postalCode + province + } + } + } +` diff --git a/framework/vendure/utils/mutations/update-customer-mutation.ts b/framework/vendure/utils/mutations/update-customer-mutation.ts new file mode 100644 index 000000000..535f80eee --- /dev/null +++ b/framework/vendure/utils/mutations/update-customer-mutation.ts @@ -0,0 +1,13 @@ +export const updateCustomer = /* GraphQL */ ` + mutation updateCustomer($input: UpdateCustomerInput!){ + updateCustomer(input:$input){ + __typename + ...on Customer{ + id + firstName + lastName + phoneNumber + } + } + } +` diff --git a/framework/vendure/utils/queries/active-customer-query.ts b/framework/vendure/utils/queries/active-customer-query.ts index 65b280743..b1598d8de 100644 --- a/framework/vendure/utils/queries/active-customer-query.ts +++ b/framework/vendure/utils/queries/active-customer-query.ts @@ -5,6 +5,13 @@ export const activeCustomerQuery = /* GraphQL */ ` firstName lastName emailAddress + phoneNumber + addresses{ + streetLine1 + city + province + postalCode + } } } ` diff --git a/framework/vendure/utils/queries/user-info-query.ts b/framework/vendure/utils/queries/user-info-query.ts index a10acd365..5e5fa24cb 100644 --- a/framework/vendure/utils/queries/user-info-query.ts +++ b/framework/vendure/utils/queries/user-info-query.ts @@ -1,14 +1,15 @@ export const userInfoQuery = /* GraphQL */ ` query activeCustomer{ activeCustomer{ + lastName + firstName emailAddress + phoneNumber addresses{ - name:fullName - address:streetLine1 + streetLine1 city - state:province + province postalCode - phoneNumber } } } diff --git a/src/components/common/SelectCommon/SelectCommon.module.scss b/src/components/common/SelectCommon/SelectCommon.module.scss index 82ce46f5b..3f213b567 100644 --- a/src/components/common/SelectCommon/SelectCommon.module.scss +++ b/src/components/common/SelectCommon/SelectCommon.module.scss @@ -11,7 +11,7 @@ width: 20.6rem; .selectTrigger { width: 20.6rem; - padding: 1.2rem 1.6rem; + padding: 1.6rem; } } &.large { diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx index 9b8c88e24..122d9a78d 100644 --- a/src/components/common/SelectCommon/SelectCommon.tsx +++ b/src/components/common/SelectCommon/SelectCommon.tsx @@ -1,10 +1,12 @@ import s from './SelectCommon.module.scss' import classNames from 'classnames' -import { useState } from 'react' +import { useEffect, useState } from 'react' import { IconVectorDown } from 'src/components/icons' import SelectOption from './SelectOption/SelectOption' interface Props { + selected?:string|null, + initValue?:string|null, placeholder? : string, size?: 'base' | 'large', type?: 'default' | 'custom', @@ -12,10 +14,14 @@ interface Props { onChange?: (value: string) => void, } -const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => { +const SelectCommon = ({selected,initValue, type = 'default', size = 'base', option, placeholder, onChange}: Props) => { const [selectedName, setSelectedName] = useState(placeholder) const [selectedValue, setSelectedValue] = useState('') + useEffect(()=>{ + setSelectedValue(selected ?? ''); + setSelectedValue(initValue ?? ''); + }) const changeSelectedName = (item:string, value: string) => { setSelectedValue(value) setSelectedName(item) diff --git a/src/components/hooks/auth/useActiveCustomer.tsx b/src/components/hooks/auth/useActiveCustomer.tsx index f0f4f6fef..353ce8ad9 100644 --- a/src/components/hooks/auth/useActiveCustomer.tsx +++ b/src/components/hooks/auth/useActiveCustomer.tsx @@ -5,7 +5,16 @@ import useSWR from 'swr' const useActiveCustomer = () => { const { data, ...rest } = useSWR([activeCustomerQuery], gglFetcher) - return { customer: data?.activeCustomer, ...rest } + return { + customer: data?.activeCustomer, + userInfo:{ + firstName: data?.activeCustomer?.firstName, + lastName:data?.activeCustomer?.lastName, + email:data?.activeCustomer?.emailAddress, + phoneNumber: data?.activeCustomer?.phoneNumber, + address: data?.activeCustomer?.addresses?.[0] + }, + ...rest } } export default useActiveCustomer diff --git a/src/components/hooks/auth/useSignup.tsx b/src/components/hooks/auth/useSignup.tsx index 922460c77..d9b085b0e 100644 --- a/src/components/hooks/auth/useSignup.tsx +++ b/src/components/hooks/auth/useSignup.tsx @@ -4,7 +4,6 @@ import { SignupMutation } from '@framework/schema' import fetcher from 'src/utils/fetcher' import { CommonError } from 'src/domains/interfaces/CommonError' import { signupMutation } from '@framework/utils/mutations/sign-up-mutation' - interface SignupInput { email: string firstName?: string diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts index cf83feb42..f2775d5bb 100644 --- a/src/components/hooks/index.ts +++ b/src/components/hooks/index.ts @@ -1 +1,4 @@ export { default as useModalCommon } from './useModalCommon' +export { default as useEditUserInfo } from './user/useEditUserInfo' +export { default as useEditCustomerAddress } from './user/useEditCustomerAddress' + diff --git a/src/components/hooks/user/useEditCustomerAddress.tsx b/src/components/hooks/user/useEditCustomerAddress.tsx new file mode 100644 index 000000000..5caae3eb1 --- /dev/null +++ b/src/components/hooks/user/useEditCustomerAddress.tsx @@ -0,0 +1,55 @@ +import { Address } from '@framework/schema' +import { updateCustomerAddress } from '@framework/utils/mutations/update-customer-address-mutation' +import { useState } from 'react' +import fetcher from 'src/utils/fetcher' +import { useActiveCustomer } from '../auth' + +interface Props { + address?:string, + city?:string|null, + postalCode?:string|null, + state?:string +} + +const useEditCustomerAddress = () => { + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) + const {customer,mutate} = useActiveCustomer(); + + const editCustomerAddress = ( + { address,city,postalCode,state}: Props, + fCallBack: (isSuccess: boolean, message?: string) => void + ) => { + setError(null) + setLoading(true) + + fetcher
({ + query: updateCustomerAddress, + variables: { + input: { + id:customer?.id, + streetLine1:address, + city, + postalCode, + province:state + }, + }, + }) .then((data) => { + + if(data.updateCustomerAddress.__typename == 'Address'){ + mutate(); + fCallBack(true) + return data + } + + }) .catch((error) => { + setError(error) + fCallBack(false, error.message) + }) + .finally(() => setLoading(false)) + + } + return { loading, editCustomerAddress, error } +} + +export default useEditCustomerAddress diff --git a/src/components/hooks/user/useEditUserInfo.tsx b/src/components/hooks/user/useEditUserInfo.tsx new file mode 100644 index 000000000..c2c8b1a83 --- /dev/null +++ b/src/components/hooks/user/useEditUserInfo.tsx @@ -0,0 +1,51 @@ +import { useState } from 'react' +import { Customer } from '@framework/schema' +import fetcher from 'src/utils/fetcher' +import { updateCustomer } from '@framework/utils/mutations/update-customer-mutation' +import { useActiveCustomer } from '../auth' + +interface Props { + firstName?: string; + lastName?: string, + phoneNumber?:string, +} + +const useEditUserInfo = () => { + const [loading, setLoading] = useState(false) + const [error, setError] = useState(null) + const {mutate} = useActiveCustomer(); + + const editUserInfo = ( + { firstName,lastName,phoneNumber}: Props, + fCallBack: (isSuccess: boolean, message?: string) => void + ) => { + setError(null) + setLoading(true) + + fetcher({ + query: updateCustomer, + variables: { + input: { + firstName, + lastName, + phoneNumber + }, + }, + }) + .then((data) => { + if (data.updateCustomer.__typename == 'Customer') { + mutate(); + return data + } + }) + .catch((error) => { + setError(error) + fCallBack(false, error.message) + }) + .finally(() => setLoading(false)) + } + + return { loading, editUserInfo, error } +} + +export default useEditUserInfo diff --git a/src/components/hooks/user/useUserInfo.tsx b/src/components/hooks/user/useUserInfo.tsx deleted file mode 100644 index 69b80a467..000000000 --- a/src/components/hooks/user/useUserInfo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { ActiveCustomerQuery } from '@framework/schema' -import { userInfoQuery } from '@framework/utils/queries/user-info-query' -import gglFetcher from 'src/utils/gglFetcher' -import useSWR from 'swr' - -const useUserInfo = () => { - const { data } = useSWR([userInfoQuery], gglFetcher) - - return { userInfo: data?.activeCustomer} -} - -export default useUserInfo diff --git a/src/components/modules/account/AccountPage/AccountPage.tsx b/src/components/modules/account/AccountPage/AccountPage.tsx index e7154f46f..d8c169647 100644 --- a/src/components/modules/account/AccountPage/AccountPage.tsx +++ b/src/components/modules/account/AccountPage/AccountPage.tsx @@ -13,7 +13,6 @@ import { PRODUCT_CART_DATA_TEST } from 'src/utils/demo-data'; import { ACCOUNT_TAB, QUERY_KEY } from "src/utils/constanst.utils" import { useRouter } from "next/router" import { useActiveCustomer } from 'src/components/hooks/auth' -import useUserInfo from "src/components/hooks/user/useUserInfo" import { AccountProps } from "./components/AccountInfomation/AccountInfomation" const waiting = [ { @@ -54,17 +53,6 @@ const delivered = [ } ] -let account = { - firstName: "Nhân", - lastName: "Trần", - email: "vuduong@gmail.com", - address: "235 Dien Bien Phu Bis, Dakao ward", - state: "District 1", - city: "HCMC", - postalCode: "700000", - phoneNumber: "(+84) 937 937 195" -} - interface AccountPageProps { defaultActiveContent?: "info" | "orders" | "favorites" } @@ -84,18 +72,8 @@ const getTabIndex = (tab?: string): number => { const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { const router = useRouter() - const {userInfo} = useUserInfo(); - - // const email = userInfo?.emailAddress; - // const [info] = userInfo?.addresses || []; - - // const accountInfo = {...info,userInfo?.emailAddress}; - - // const clone:AccountProps = Object.create(accountInfo); - // Object.assign(clone, accountInfo); - - - console.log(); + const {userInfo} = useActiveCustomer(); + const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2) const [modalVisible, setModalVisible] = useState(false); @@ -123,7 +101,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => { - + @@ -133,7 +111,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
- + ) } diff --git a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx index dc32db71a..362d449ac 100644 --- a/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx +++ b/src/components/modules/account/AccountPage/components/AccountInfomation/AccountInfomation.tsx @@ -6,17 +6,21 @@ import avatar from '../../assets/avatar.png' import { ButtonCommon } from 'src/components/common' import { useActiveCustomer } from 'src/components/hooks/auth' +import { Address } from '@framework/schema' export interface AccountProps { - name?: string + firstName?: string + lastName?: string email?: string - address?: string - state?: string - city?: string - postalCode?: string - phoneNumber?: string + phoneNumber?:string|null + address?: Address } +const states = [ + {name: "District 1", value: "D1"}, + {name: "District 2", value: "D2"}, + {name: "District 3", value: "D3"} +] interface AccountInfomationProps { account: AccountProps onClick: () => void @@ -24,11 +28,10 @@ interface AccountInfomationProps { const AccountInfomation = ({ account, onClick }: AccountInfomationProps) => { const { customer } = useActiveCustomer() - // need to handle call back when edit account information const showEditForm = () => onClick() - + const state = states.find((val)=>val.value == account.address?.province); return (
@@ -45,8 +48,8 @@ const AccountInfomation = ({ account, onClick }: AccountInfomationProps) => {
Shipping Infomation
- {account.address + - `, ${account.state}, ${account.city}, ${account.postalCode}`} + {account.address?.streetLine1 + + `, ${state?.name}, ${account.address?.city}, ${account.address?.postalCode}`}
{account.phoneNumber}
diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss index 20acd257b..e098b9af7 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.module.scss @@ -1,6 +1,15 @@ @import '../../../../../../styles/utilities'; .editInfoModal { + .u-form{ + width: 60rem; + } + .inputName{ + @apply flex justify-between; + .input{ + width: 48.5%; + } + } .input { @apply bg-white; margin-bottom: 1.6rem; @@ -23,6 +32,7 @@ .inputPostalCode { @apply bg-white; margin-left: 0.8rem; + width: 100%; } .inputPhoneNumber { diff --git a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx index f9e4aebd5..c3a2b1e34 100644 --- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx +++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx @@ -1,19 +1,34 @@ -import React from "react" +import React, { useState } from "react" import s from './EditInfoModal.module.scss' -import { ModalCommon, Inputcommon, SelectCommon, ButtonCommon } from '../../../../../common' - +import { ModalCommon, SelectCommon, ButtonCommon } from '../../../../../common' +import { Address } from "@framework/schema"; +import { + InputFiledInForm, + } from 'src/components/common' +import * as Yup from 'yup' +import { Form, Formik } from 'formik' +import { useEditCustomerAddress, useEditUserInfo } from "src/components/hooks"; +import { LANGUAGE } from 'src/utils/language.utils' +import { useMessage } from 'src/components/contexts' interface EditInfoModalProps { - accountInfo: {firstName: string,lastName: string, email: string, address: string, state: string, city: string, postalCode: string, phoneNumber: string}; + accountInfo: { + firstName?: string + lastName?: string + email?: string + phoneNumber?:string|null + address?: Address + }; visible: boolean; closeModal: () => void; } const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoModalProps) => { + const [stateValue,setStateValue] = useState(''); + const { loading, editUserInfo } = useEditUserInfo(); + const {editCustomerAddress} = useEditCustomerAddress(); + const { showMessageSuccess, showMessageError } = useMessage() - function saveInfo() { - closeModal(); - } const states = [ {name: "District 1", value: "D1"}, @@ -21,43 +36,165 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod {name: "District 3", value: "D3"} ] + const DisplayingErrorMessagesSchema = Yup.object().shape({ + firstName: Yup.string().required('Required'), + lastName: Yup.string().required('Required'), + address: Yup.string().required('Required'), + city: Yup.string().required('Required'), + postalCode: Yup.string(), + phoneNumber: Yup.string(), + }) + + function onEditUserInfo ( + values: { + firstName: string|undefined; + lastName: string|undefined, + address:string|undefined, + city?:string|null, + postalCode?:string|null, + phoneNumber?:string|null + }) { + + editUserInfo( + { + firstName: values.firstName, + lastName: values.lastName, + phoneNumber:values.phoneNumber ?? '', + },onChangUserInfoCallBack); + + editCustomerAddress( + { + address: values.address , + city:values.city, + postalCode:values.postalCode, + state:stateValue + }, + onChangUserInfoCallBack); + } + + function onChangUserInfoCallBack(isSuccess: boolean, message?: string){ + if (isSuccess) { + closeModal(); + showMessageSuccess("Change Your Information Successfully.", 15000) + } else { + showMessageError(LANGUAGE.MESSAGE.ERROR) + } + } + function state(state:string){ + setStateValue(state); + } return (
-
- -
-
- -
- -
- -
- -
- -
- - -
-
- + + {({ errors, touched, isValid, submitForm }) => ( +
+
+
+ +
+
+ +
-
- +
+
-
+ +
+ +
+ -
- -
+
+
+ +
-
- Cancel - Save -
+
+ +
+
+ +
+ +
+ +
+ Cancel + Save +
+
+ )} +
) From 8b5637a2471024369c30e76185bd3ccc175cfd16 Mon Sep 17 00:00:00 2001 From: Tan Le Date: Thu, 7 Oct 2021 10:46:20 +0700 Subject: [PATCH 08/12] push code to check --- .../vendure/api/operations/get-product.ts | 2 +- package.json | 2 + pages/test.tsx | 24 +++---- .../ProductInfoDetail/ProductInfoDetail.tsx | 69 ++++++++++++++++++- 4 files changed, 81 insertions(+), 16 deletions(-) diff --git a/framework/vendure/api/operations/get-product.ts b/framework/vendure/api/operations/get-product.ts index 4ab9ed2d9..592086c13 100644 --- a/framework/vendure/api/operations/get-product.ts +++ b/framework/vendure/api/operations/get-product.ts @@ -2,7 +2,7 @@ import { Product } from '@commerce/types/product' import { OperationContext } from '@commerce/api/operations' import { Provider, VendureConfig } from '../' import { GetProductQuery } from '../../schema' -import { getProductQuery } from '../../utils/queries/get-product-query' +import { getProductQuery, getProductDetailQuery } from '../../utils/queries/get-product-query' export default function getProductOperation({ commerce, diff --git a/package.json b/package.json index 84a77cf71..8474be667 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "body-scroll-lock": "^3.1.5", "classnames": "^2.3.1", "cookie": "^0.4.1", + "dns": "^0.2.2", "email-validator": "^2.0.4", "eslint": "^7.32.0", "eslint-config-next": "^11.1.2", @@ -35,6 +36,7 @@ "lodash.debounce": "^4.0.8", "lodash.random": "^3.2.0", "lodash.throttle": "^4.1.1", + "net": "^1.0.2", "next": "^11.0.0", "next-seo": "^4.26.0", "next-themes": "^0.0.14", diff --git a/pages/test.tsx b/pages/test.tsx index 6244c3dd6..debfe2398 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -1,17 +1,17 @@ import commerce from '@lib/api/commerce'; import { GetStaticPropsContext } from 'next'; import { Layout } from 'src/components/common'; - +import { ProductCard } from '@commerce/types/product'; interface Props { - products: any + productDetail: ProductCard[], } -export default function Home({ products }: Props) { +export default function Home({ productDetail }: Props) { return ( <>

- TOTAL: {products?.length} + TOTAL: {productDetail}

- {JSON.stringify(products[0])} + {/* {JSON.stringify(productDetail)} */} ) } @@ -23,10 +23,11 @@ export async function getServerSideProps({ locales, }: GetStaticPropsContext) { const config = { locale, locales } - const productsPromise = commerce.getAllProducts({ + + const productsPromise = commerce.getProduct({ // const productsPromise = commerce.getAllFacets({ variables: { - first: 70, + slug: "hand-trowel" // filter: { // name: { // contains: 'ca' @@ -34,16 +35,15 @@ export async function getServerSideProps({ // } }, config, - preview, + // preview, // Saleor provider only ...({ featured: true } as any), }) - const { products } = await productsPromise - - + const { product } = await productsPromise + const productDetail = JSON.stringify(product) return { - props: { products }, + props: { productDetail }, } } diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx index d1047bd3a..2578a865f 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx @@ -2,13 +2,19 @@ import React from 'react' import ProductImgs from './components/ProductImgs/ProductImgs' import ProductInfo from './components/ProductInfo/ProductInfo' import s from './ProductInfoDetail.module.scss' +import { GetStaticPropsContext, GetStaticPathsContext, InferGetStaticPropsType } from 'next' +import commerce from '@lib/api/commerce' +import { PromiseWithKey } from 'src/utils/types.utils' +import { getAllPromies } from 'src/utils/funtion.utils' +import { ProductCard } from '@commerce/types/product'; +import { useRouter } from 'next/router' interface Props { - className?: string - children?: any + productDetail: ProductCard[], } -const ProductInfoDetail = ({ }: Props) => { +const ProductInfoDetail = ({ product }: InferGetStaticPropsType) => { + console.log(product) return (
@@ -17,4 +23,61 @@ const ProductInfoDetail = ({ }: Props) => { ) } +export async function getStaticProps({ + params, + locale, + locales, + preview, + }: GetStaticPropsContext<{ slug: string }>) { + const config = { locale, locales } + const pagesPromise = commerce.getAllPages({ config, preview }) + const siteInfoPromise = commerce.getSiteInfo({ config, preview }) + const productPromise = commerce.getProduct({ + variables: { slug: params!.slug }, + config, + preview, + }) + + // const allProductsPromise = commerce.getAllProducts({ + // variables: { first: 4 }, + // config, + // preview, + // }) + const { pages } = await pagesPromise + const { categories } = await siteInfoPromise + const { product } = await productPromise + // const { products: relatedProducts } = await allProductsPromise + + if (!product) { + throw new Error(`Product with slug '${params!.slug}' not found`) + } + + return { + props: { + pages, + product, + // relatedProducts, + categories, + }, + revalidate: 200, + } + } + +// export async function getStaticPaths({ locales }: GetStaticPathsContext) { +// const { products } = await commerce.getAllProductPaths() + +// return { +// paths: locales +// ? locales.reduce((arr, locale) => { +// // Add a product path for every locale +// products.forEach((product: any) => { +// arr.push(`/${locale}/product${product.path}`) +// }) +// return arr +// }, []) +// : products.map((product: any) => `/product${product.path}`), +// fallback: 'blocking', +// } +// } + export default ProductInfoDetail From c51fd1bd4c311f94b6d22fad2a392be7b980fd6a Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Thu, 7 Oct 2021 11:01:41 +0700 Subject: [PATCH 09/12] bug: fix bug select common --- src/components/common/SelectCommon/SelectCommon.tsx | 7 +++++-- .../hooks/{user => account}/useEditCustomerAddress.tsx | 0 src/components/hooks/{user => account}/useEditUserInfo.tsx | 0 src/components/hooks/index.ts | 4 ++-- 4 files changed, 7 insertions(+), 4 deletions(-) rename src/components/hooks/{user => account}/useEditCustomerAddress.tsx (100%) rename src/components/hooks/{user => account}/useEditUserInfo.tsx (100%) diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx index 122d9a78d..6e24a7020 100644 --- a/src/components/common/SelectCommon/SelectCommon.tsx +++ b/src/components/common/SelectCommon/SelectCommon.tsx @@ -19,9 +19,12 @@ const SelectCommon = ({selected,initValue, type = 'default', size = 'base', opti const [selectedValue, setSelectedValue] = useState('') useEffect(()=>{ - setSelectedValue(selected ?? ''); + const nameSelect = option.find((val)=>val.value === selected); + setSelectedName(nameSelect?.name); setSelectedValue(initValue ?? ''); - }) + onChange && onChange(initValue ?? ''); + },[]) + const changeSelectedName = (item:string, value: string) => { setSelectedValue(value) setSelectedName(item) diff --git a/src/components/hooks/user/useEditCustomerAddress.tsx b/src/components/hooks/account/useEditCustomerAddress.tsx similarity index 100% rename from src/components/hooks/user/useEditCustomerAddress.tsx rename to src/components/hooks/account/useEditCustomerAddress.tsx diff --git a/src/components/hooks/user/useEditUserInfo.tsx b/src/components/hooks/account/useEditUserInfo.tsx similarity index 100% rename from src/components/hooks/user/useEditUserInfo.tsx rename to src/components/hooks/account/useEditUserInfo.tsx diff --git a/src/components/hooks/index.ts b/src/components/hooks/index.ts index f2775d5bb..d01d505ea 100644 --- a/src/components/hooks/index.ts +++ b/src/components/hooks/index.ts @@ -1,4 +1,4 @@ export { default as useModalCommon } from './useModalCommon' -export { default as useEditUserInfo } from './user/useEditUserInfo' -export { default as useEditCustomerAddress } from './user/useEditCustomerAddress' +export { default as useEditUserInfo } from './account/useEditUserInfo' +export { default as useEditCustomerAddress } from './account/useEditCustomerAddress' From 69996ec7d28912865834d21b889a80a4f02f227d Mon Sep 17 00:00:00 2001 From: Quangnhankie Date: Thu, 7 Oct 2021 11:02:41 +0700 Subject: [PATCH 10/12] bug: fix bug select common 2 --- src/components/common/SelectCommon/SelectCommon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/SelectCommon/SelectCommon.tsx b/src/components/common/SelectCommon/SelectCommon.tsx index 6e24a7020..0ee282987 100644 --- a/src/components/common/SelectCommon/SelectCommon.tsx +++ b/src/components/common/SelectCommon/SelectCommon.tsx @@ -20,7 +20,7 @@ const SelectCommon = ({selected,initValue, type = 'default', size = 'base', opti useEffect(()=>{ const nameSelect = option.find((val)=>val.value === selected); - setSelectedName(nameSelect?.name); + setSelectedName(nameSelect?.name ?? 'State'); setSelectedValue(initValue ?? ''); onChange && onChange(initValue ?? ''); },[]) From 148326c7ef32f475784b9720f11dd8052e27a455 Mon Sep 17 00:00:00 2001 From: Tan Le Date: Thu, 7 Oct 2021 16:16:24 +0700 Subject: [PATCH 11/12] feat: get-product-detail --- framework/commerce/types/product.ts | 2 + .../vendure/api/operations/get-product.ts | 3 +- .../utils/queries/get-product-query.ts | 3 + pages/product/[slug].tsx | 2 +- .../ProductInfoDetail/ProductInfoDetail.tsx | 85 ++++--------------- .../ProductImgItem/ProductImgItem.tsx | 8 +- .../components/ProductImgs/ProductImgs.tsx | 24 +----- .../components/ProductInfo/ProductInfo.tsx | 19 ++--- .../ReleventProducts/ReleventProducts.tsx | 1 - 9 files changed, 40 insertions(+), 107 deletions(-) diff --git a/framework/commerce/types/product.ts b/framework/commerce/types/product.ts index e02113814..ddf51c518 100644 --- a/framework/commerce/types/product.ts +++ b/framework/commerce/types/product.ts @@ -47,6 +47,8 @@ export type Product = { currencyCode: CurrencyCode options: ProductOption[] facetValueIds?: string[] + collectionIds?: string[] + collection?: string, } export type ProductCard = { diff --git a/framework/vendure/api/operations/get-product.ts b/framework/vendure/api/operations/get-product.ts index 38eca93b4..0aa761ab0 100644 --- a/framework/vendure/api/operations/get-product.ts +++ b/framework/vendure/api/operations/get-product.ts @@ -53,7 +53,8 @@ export default function getProductOperation({ displayName: og.name, values: og.options.map((o) => ({ label: o.name })), })), - facetValueIds: product.facetValues.map(item=> item.id) + facetValueIds: product.facetValues.map(item=> item.id), + collectionIds: product.collections.map(item => item.id) } as Product } diff --git a/framework/vendure/utils/queries/get-product-query.ts b/framework/vendure/utils/queries/get-product-query.ts index 3d2742383..6db960a96 100644 --- a/framework/vendure/utils/queries/get-product-query.ts +++ b/framework/vendure/utils/queries/get-product-query.ts @@ -39,6 +39,9 @@ export const getProductQuery = /* GraphQL */ ` facetValues { id } + collections { + id + } } } ` diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx index 24901277e..2da14a995 100644 --- a/pages/product/[slug].tsx +++ b/pages/product/[slug].tsx @@ -12,7 +12,7 @@ import { PromiseWithKey } from 'src/utils/types.utils' export default function Slug({ product, relevantProducts, collections }: InferGetStaticPropsType) { return <> - + diff --git a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx index 2578a865f..072c1fd56 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/ProductInfoDetail.tsx @@ -1,83 +1,28 @@ -import React from 'react' +import React, { useMemo } from 'react'; import ProductImgs from './components/ProductImgs/ProductImgs' import ProductInfo from './components/ProductInfo/ProductInfo' import s from './ProductInfoDetail.module.scss' -import { GetStaticPropsContext, GetStaticPathsContext, InferGetStaticPropsType } from 'next' -import commerce from '@lib/api/commerce' -import { PromiseWithKey } from 'src/utils/types.utils' -import { getAllPromies } from 'src/utils/funtion.utils' -import { ProductCard } from '@commerce/types/product'; -import { useRouter } from 'next/router' +import { Product } from '@commerce/types/product' +import { Collection } from '@framework/schema' +import { getCategoryNameFromCollectionId } from 'src/utils/funtion.utils'; interface Props { - productDetail: ProductCard[], + productDetail: Product, + collections: Collection[] } -const ProductInfoDetail = ({ product }: InferGetStaticPropsType) => { - console.log(product) +const ProductInfoDetail = ({ productDetail, collections }: Props) => { + const dataWithCategoryName = useMemo(() => { + return { + ...productDetail, + collection: getCategoryNameFromCollectionId(collections, productDetail.collectionIds ? productDetail.collectionIds[0] : undefined) + } + }, [productDetail, collections]) return (
- - + +
) } - -export async function getStaticProps({ - params, - locale, - locales, - preview, - }: GetStaticPropsContext<{ slug: string }>) { - const config = { locale, locales } - const pagesPromise = commerce.getAllPages({ config, preview }) - const siteInfoPromise = commerce.getSiteInfo({ config, preview }) - const productPromise = commerce.getProduct({ - variables: { slug: params!.slug }, - config, - preview, - }) - - // const allProductsPromise = commerce.getAllProducts({ - // variables: { first: 4 }, - // config, - // preview, - // }) - const { pages } = await pagesPromise - const { categories } = await siteInfoPromise - const { product } = await productPromise - // const { products: relatedProducts } = await allProductsPromise - - if (!product) { - throw new Error(`Product with slug '${params!.slug}' not found`) - } - - return { - props: { - pages, - product, - // relatedProducts, - categories, - }, - revalidate: 200, - } - } - -// export async function getStaticPaths({ locales }: GetStaticPathsContext) { -// const { products } = await commerce.getAllProductPaths() - -// return { -// paths: locales -// ? locales.reduce((arr, locale) => { -// // Add a product path for every locale -// products.forEach((product: any) => { -// arr.push(`/${locale}/product${product.path}`) -// }) -// return arr -// }, []) -// : products.map((product: any) => `/product${product.path}`), -// fallback: 'blocking', -// } -// } - export default ProductInfoDetail diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx index 931b0a36c..bebee187c 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgItem/ProductImgItem.tsx @@ -3,15 +3,15 @@ import { ImgWithLink } from 'src/components/common' import s from './ProductImgItem.module.scss' export interface ProductImgItemProps { - preview: string - name?: string + url: string + alt?: string } -const ProductImgItem = ({ preview, name }: ProductImgItemProps) => { +const ProductImgItem = ({ url, alt }: ProductImgItemProps) => { return (
- +
) } diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx index 365faa73a..c5624dc52 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx @@ -2,28 +2,13 @@ import React from 'react' import { ResponsiveType } from 'react-multi-carousel' import { CarouselCommon } from 'src/components/common' import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem' -import { useProductDetail } from 'src/components/hooks/product' import s from './ProductImgs.module.scss' +import { ProductImage } from '@commerce/types/product'; interface Props { - className?: string - children?: any, + productImage: ProductImage[] } -const DATA = [ - { - src: 'https://user-images.githubusercontent.com/76729908/133026929-199799fc-bd75-4445-a24d-15c0e41796eb.png', - alt: 'Meat', - }, - { - src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png', - alt: 'Broccoli', - }, - { - src: 'https://user-images.githubusercontent.com/76729908/130574371-3b75fa72-9552-4605-aba9-a4b31cd9dce7.png', - alt: 'Broccoli', - } -] const RESPONSIVE: ResponsiveType = { desktop: { @@ -32,12 +17,11 @@ const RESPONSIVE: ResponsiveType = { slidesToSlide: 1, // optional, default to 1. }, } -const ProductImgs = ({ }: Props) => { - const { productDetail } = useProductDetail() +const ProductImgs = ({ productImage }: Props) => { return (
- data={productDetail?.assets ?? []} + data={productImage} itemKey="product-detail-img" Component={ProductImgItem} responsive={RESPONSIVE} diff --git a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx index 40779083c..c3e51d46d 100644 --- a/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx +++ b/src/components/modules/product-detail/ProductInfoDetail/components/ProductInfo/ProductInfo.tsx @@ -1,31 +1,30 @@ +import { Product } from '@commerce/types/product' import React from 'react' import { ButtonCommon, LabelCommon, QuanittyInput } from 'src/components/common' import { IconBuy } from 'src/components/icons' import { LANGUAGE } from 'src/utils/language.utils' -import { useProductDetail } from 'src/components/hooks/product' import s from './ProductInfo.module.scss' interface Props { - className?: string - children?: any, + productInfoDetail: Product } -const ProductInfo = ({ }: Props) => { - const {productDetail} = useProductDetail() +const ProductInfo = ({ productInfoDetail }: Props) => { + console.log(productInfoDetail) return (
- SEAFOOD -

{productDetail?.name}

+ {productInfoDetail.collection} +

{productInfoDetail.name}

- Rp {productDetail?.variants[0].priceWithTax} + Rp {productInfoDetail.price} -15%
-
Rp {productDetail?.variants[0].price}
+
Rp {productInfoDetail.price}
- {productDetail?.description} + {productInfoDetail.description}
diff --git a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx index 147115dc2..d1afde538 100644 --- a/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx +++ b/src/components/modules/product-detail/ReleventProducts/ReleventProducts.tsx @@ -23,7 +23,6 @@ const ReleventProducts = ({ data, collections }: Props) => { if (data.length === 0) { return null } - return ( Date: Thu, 14 Oct 2021 14:54:34 +0700 Subject: [PATCH 12/12] :hammer: refactor: remove product/index.tsx :%s --- src/components/hooks/product/index.ts | 1 + src/components/hooks/product/index.tsx | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) delete mode 100644 src/components/hooks/product/index.tsx diff --git a/src/components/hooks/product/index.ts b/src/components/hooks/product/index.ts index ea2afe03a..5fb85680c 100644 --- a/src/components/hooks/product/index.ts +++ b/src/components/hooks/product/index.ts @@ -1,3 +1,4 @@ export { default as useSearchProducts } from './useSearchProducts' +export { default as useProductDetail } from './useProductDetail' diff --git a/src/components/hooks/product/index.tsx b/src/components/hooks/product/index.tsx deleted file mode 100644 index bfe1abac2..000000000 --- a/src/components/hooks/product/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default as useProductDetail } from './useProductDetail' \ No newline at end of file