bug: edit form user info

framework/vendure/schema.d.ts

@@ -317,6 +317,9 @@ export type Address = Node & {
   customFields?: Maybe<Scalars['JSON']>
 }
 
+
+
+
 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'
     >
   >
 }

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

next-env.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

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<ActiveCustomerQuery>([userInfoQuery], gglFetcher)
+  
+  return { userInfo: data?.activeCustomer}
+}
+
+export default useUserInfo

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);
 

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 {

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
         <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" />
+                    <Inputcommon placeholder="Name" value={accountInfo.firstName} type="text" />
                 </div>
+                <div className={s.input}>
+                    <Inputcommon placeholder="Name" value={accountInfo.lastName} type="text" />
+                </div>  
 
                 <div className={s.input}>
                     <Inputcommon placeholder="Address" value={accountInfo.address} type="text" />