Merge pull request #76 from KieIO/feature/m2-get-edit-user-info

Feature/m2 get edit user info

framework/vendure/schema.d.ts

@@ -1,3 +1,4 @@
+import { FacetValue, UpdateAddressInput } from './schema.d';
 import { ResetPassword } from './schema.d';
 import { requestPasswordReset } from '@framework/schema';
 import { FacetValue } from './schema.d';
@@ -306,6 +307,11 @@ export type MutationResetPasswordArgs = {
 }
 
 export type Address = Node & {
+  updateCustomerAddress:
+  | { 
+    __typename?: 'Address'
+    id: Scalars['ID']
+  }
   __typename?: 'Address'
   id: Scalars['ID']
   createdAt: Scalars['DateTime']
@@ -324,6 +330,9 @@ export type Address = Node & {
   customFields?: Maybe<Scalars['JSON']>
 }
 
+
+
+
 export type Asset = Node & {
   __typename?: 'Asset'
   id: Scalars['ID']
@@ -1461,6 +1470,11 @@ export type CustomerListOptions = {
 }
 
 export type Customer = Node & {
+  updateCustomer:
+  | { 
+    __typename?: 'Customer'
+    id: Scalars['ID']
+  }
   __typename?: 'Customer'
   id: Scalars['ID']
   createdAt: Scalars['DateTime']
@@ -1468,7 +1482,7 @@ export type Customer = Node & {
   title?: Maybe<Scalars['String']>
   firstName: Scalars['String']
   lastName: Scalars['String']
-  phoneNumber?: Maybe<Scalars['String']>
+  phoneNumber?:  Maybe<Scalars['String']>
   emailAddress: Scalars['String']
   addresses?: Maybe<Array<Address>>
   orders: OrderList
@@ -3233,7 +3247,7 @@ export type ActiveCustomerQuery = { __typename?: 'Query' } & {
   activeCustomer?: Maybe<
     { __typename?: 'Customer' } & Pick<
       Customer,
-      'id' | 'firstName' | 'lastName' | 'emailAddress'
+      'id' | 'firstName' | 'lastName' | 'emailAddress' | 'addresses' | 'phoneNumber'
     >
   >
 }

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
+                }
+        }
+    }
+`

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
+            }
+        }
+  }
+`

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
+      }
     }
   }
 `

framework/vendure/utils/queries/user-info-query.ts

@@ -0,0 +1,16 @@
+export const userInfoQuery = /* GraphQL */ `
+    query activeCustomer{
+        activeCustomer{
+            lastName
+            firstName
+            emailAddress
+            phoneNumber
+            addresses{
+                streetLine1
+                city
+                province
+                postalCode
+            }
+        }
+    }
+`

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 {

src/components/common/SelectCommon/SelectCommon.tsx

@@ -5,6 +5,8 @@ import s from './SelectCommon.module.scss'
 import SelectOption from './SelectOption/SelectOption'
 
 interface Props {
+    selected?:string|null,
+    initValue?:string|null,
     placeholder? : string,
     value?: string,
     size?: 'base' | 'large',
@@ -13,16 +15,16 @@ interface Props {
     onChange?: (value: string) => void,
 }
 
-const SelectCommon = ({ value, type = 'default', size = 'base', options, placeholder, onChange}: Props) => {
-    const [selectedName, setSelectedName] = useState<string>()
-    const [selectedValue, setSelectedValue] = useState<string>('')
+const SelectCommon = ({selected,initValue, type = 'default', size = 'base', options, placeholder, onChange}: Props) => {
+    const [selectedName, setSelectedName] = useState(placeholder)
+    const [selectedValue, setSelectedValue] = useState('')
 
-    useEffect(() => {
-        setSelectedValue(value || '')
-
-        const name = options.find(item => item.value === value)?.name
-        setSelectedName(name)
-    }, [value, options])
+    useEffect(()=>{
+        const nameSelect = options.find((val)=>val.value === selected);
+        setSelectedName(nameSelect?.name ?? 'State');
+        setSelectedValue(initValue ?? '');
+        onChange && onChange(initValue ?? '');
+    },[])
 
     const changeSelectedName = (value: string) => {
         setSelectedValue(value)

src/components/hooks/account/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<Error | null>(null)
+  const {customer,mutate} = useActiveCustomer();
+
+  const editCustomerAddress = (
+    { address,city,postalCode,state}: Props,
+    fCallBack: (isSuccess: boolean, message?: string) => void
+  ) => {
+    setError(null)
+    setLoading(true)
+
+    fetcher<Address>({
+        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

src/components/hooks/account/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<Error | null>(null)
+  const {mutate} = useActiveCustomer();
+
+  const editUserInfo = (
+    { firstName,lastName,phoneNumber}: Props,
+    fCallBack: (isSuccess: boolean, message?: string) => void
+  ) => {
+    setError(null)
+    setLoading(true)
+
+    fetcher<Customer>({
+      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

src/components/hooks/auth/useActiveCustomer.tsx

@@ -5,7 +5,16 @@ import useSWR from 'swr'
 
 const useActiveCustomer = () => {
   const { data, ...rest } = useSWR<ActiveCustomerQuery>([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

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

src/components/hooks/index.ts

@@ -1 +1,4 @@
 export { default as useModalCommon } from './useModalCommon'
+export { default as useEditUserInfo } from './account/useEditUserInfo'
+export { default as useEditCustomerAddress } from './account/useEditCustomerAddress'
+

src/components/modules/account/AccountPage/AccountPage.tsx

@@ -12,7 +12,8 @@ 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 { AccountProps } from "./components/AccountInfomation/AccountInfomation"
 const waiting = [
     {
         id: "NO 123456",
@@ -52,16 +53,6 @@ const delivered = [
     }
 ]
 
-let account = {
-    name: "vu duong",
-    email: "vuduong@gmail.com",
-    address: "234 Dien Bien Phu Bis, Dakao ward",
-    state: "District 1",
-    city: "HCMC",
-    postalCode: "700000",
-    phoneNumber: "(+84) 937 937 195"
-}
-
 interface AccountPageProps {
     defaultActiveContent?: "info" | "orders" | "favorites"
 }
@@ -80,6 +71,10 @@ const getTabIndex = (tab?: string): number => {
 
 const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
     const router = useRouter()
+
+    const {userInfo} = useActiveCustomer();
+ 
+
     const [activeTab, setActiveTab] = useState(defaultActiveContent==="info" ? 0 : defaultActiveContent==="orders" ? 1 : 2)
     const [modalVisible, setModalVisible] = useState(false);
 
@@ -106,7 +101,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
 
                 <AccountNavigation defaultActiveIndex={activeTab}>
                     <TabPane tabName="Customer Information"> 
-                        <AccountInfomation account={account} onClick={showModal}  />
+                        <AccountInfomation account={userInfo} onClick={showModal}  />
                     </TabPane>
                     <TabPane tabName="Your Orders"> 
                         <OrderInfomation waiting={waiting} delivering={delivering} delivered={delivered} />
@@ -116,7 +111,7 @@ const AccountPage = ({ defaultActiveContent="orders" } : AccountPageProps) => {
                     </TabPane>
                 </AccountNavigation>
             </section>
-            <EditInfoModal accountInfo={account} closeModal={closeModal} visible={modalVisible} />
+            <EditInfoModal accountInfo={userInfo} closeModal={closeModal} visible={modalVisible} />
         </>
     )
 }

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'
 
-interface AccountProps {
-  name: string
-  email: string
-  address: string
-  state: string
-  city: string
-  postalCode: string
-  phoneNumber: string
+export interface AccountProps {
+  firstName?: string
+  lastName?: string
+  email?: 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 (
     <section className={s.accountInfomation}>
       <div className={s.avatar}>
@@ -45,8 +48,8 @@ const AccountInfomation = ({ account, onClick }: AccountInfomationProps) => {
       <div className={s.shippingInfo}>Shipping Infomation</div>
 
       <div className={s.accountAddress}>
-        {account.address +
-          `, ${account.state}, ${account.city}, ${account.postalCode}`}
+        {account.address?.streetLine1 +
+          `, ${state?.name}, ${account.address?.city}, ${account.address?.postalCode}`}
       </div>
 
       <div className={s.accountPhoneNumber}>{account.phoneNumber}</div>

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 {

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: {name: 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,44 +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 (
         <ModalCommon onClose={closeModal} visible={visible} title="Edit Infomation">
             <section className={s.editInfoModal}>
-                <div className={s.input}>
-                    <Inputcommon placeholder="Name" value={accountInfo.name} type="text" />
-                </div>
-
-                <div className={s.inputDisable}>
-                    <Inputcommon placeholder="Email" value={accountInfo.email} type="email" />
-                </div>
-
-                <div className={s.input}>
-                    <Inputcommon placeholder="Address" value={accountInfo.address} type="text" />
-                </div>
-                
-                <div className={s.input}>
-                    <Inputcommon placeholder="City" value={accountInfo.city} type="text" />
-                </div>
-                
-
-                <div className="flex">
-                    <div className={s.inputState}>
-                        <SelectCommon type="custom" placeholder="State" options={states} />
+            <Formik
+                initialValues={
+                {
+                    firstName:accountInfo.firstName,
+                    lastName: accountInfo.lastName,
+                    address:accountInfo.address?.streetLine1,
+                    city: accountInfo.address?.city,
+                    postalCode: accountInfo.address?.postalCode,
+                    phoneNumber:accountInfo.phoneNumber
+                }}
+                validationSchema={DisplayingErrorMessagesSchema}
+                onSubmit={onEditUserInfo}
+            >
+                {({ errors, touched, isValid, submitForm }) => (
+                <Form className="u-form">
+                    <div className={s.inputName}>
+                        <div className={s.input}>
+                            <InputFiledInForm
+                            name="firstName"
+                            placeholder="First Name"
+                            error={
+                            touched.firstName && errors.firstName
+                                ? errors.firstName.toString()
+                                : ''
+                            }
+                            isShowIconSuccess={touched.firstName && !errors.firstName}
+                            />
+                        </div>
+                        <div className={s.input}>
+                            <InputFiledInForm
+                            name="lastName"
+                            placeholder="Last Name"
+                            error={
+                            touched.lastName && errors.lastName
+                                ? errors.lastName.toString()
+                                : ''
+                            }
+                            isShowIconSuccess={touched.lastName && !errors.lastName}
+                            />
+                        </div>  
                     </div>
 
-                    <div className={s.inputPostalCode}>
-                        <Inputcommon placeholder="Postal code" value={accountInfo.postalCode} type="text" />
+                    <div className={s.input}>
+                        <InputFiledInForm
+                        name="address"
+                        placeholder="Address"
+                        error={
+                        touched.address && errors.address
+                            ? errors.address.toString()
+                            : ''
+                        }
+                        isShowIconSuccess={touched.address && !errors.address}
+                        />
                     </div>
-                </div>
+                    
+                    <div className={s.input}>
+                        <InputFiledInForm
+                        name="city"
+                        placeholder="City"
+                        error={
+                        touched.city && errors.city
+                            ? errors.city.toString()
+                            : ''
+                        }
+                        isShowIconSuccess={touched.city && !errors.city}
+                        />
+                    </div>
+                    
 
-                <div className={s.inputPhoneNumber}>
-                    <Inputcommon placeholder="Phone number" value={accountInfo.phoneNumber} type="text" />
-                </div>
+                    <div className="flex">
+                        <div className={s.inputState}>
+                            <SelectCommon initValue={accountInfo.address?.province} selected={accountInfo.address?.province} type="custom" onChange={state} placeholder="State" options={states} size="large"/>
+                        </div>
 
-                <div className={s.buttons}>
-                    <ButtonCommon onClick={closeModal} type="light" size="large" >Cancel</ButtonCommon>
-                    <ButtonCommon onClick={saveInfo} size="large" >Save</ButtonCommon>
-                </div>
+                        <div className={s.inputPostalCode}>
+                            <InputFiledInForm
+                            name="postalCode"
+                            placeholder="Postal code"
+                            error={
+                            touched.postalCode && errors.postalCode
+                                ? errors.postalCode.toString()
+                                : ''
+                            }
+                            isShowIconSuccess={touched.postalCode && !errors.postalCode}
+                            />
+                        </div>
+                    </div>
+
+                    <div className={s.inputPhoneNumber}>
+                            <InputFiledInForm
+                            name="phoneNumber"
+                            placeholder="Phone number"
+                            error={
+                            touched.phoneNumber && errors.phoneNumber
+                                ? errors.phoneNumber.toString()
+                                : ''
+                            }
+                            isShowIconSuccess={touched.phoneNumber && !errors.phoneNumber}
+                            onEnter={isValid ? submitForm : undefined}
+                           />
+                    </div>
+
+                    <div className={s.buttons}>
+                        <ButtonCommon  onClick={closeModal} type="light" size="large" >Cancel</ButtonCommon>
+                        <ButtonCommon HTMLType="submit" loading={loading} size="large" >Save</ButtonCommon>
+                    </div>
+                </Form>
+                )}
+            </Formik>
             </section>
         </ModalCommon>
     )