diff --git a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx index 0cc6b19c5..f4a2d8ae3 100644 --- a/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx +++ b/src/customers/components/CustomerDetailsPage/CustomerDetailsPage.tsx @@ -4,11 +4,15 @@ import { ConfirmButtonTransitionState } from "@saleor/components/ConfirmButton"; import Container from "@saleor/components/Container"; import Form from "@saleor/components/Form"; import Grid from "@saleor/components/Grid"; +import Metadata from "@saleor/components/Metadata/Metadata"; +import { MetadataFormData } from "@saleor/components/Metadata/types"; import PageHeader from "@saleor/components/PageHeader"; import SaveButtonBar from "@saleor/components/SaveButtonBar"; import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { sectionNames } from "@saleor/intl"; +import { mapMetadataItemToInput } from "@saleor/utils/maps"; +import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger"; import React from "react"; import { useIntl } from "react-intl"; @@ -20,7 +24,7 @@ import CustomerInfo from "../CustomerInfo"; import CustomerOrders from "../CustomerOrders"; import CustomerStats from "../CustomerStats"; -export interface CustomerDetailsPageFormData { +export interface CustomerDetailsPageFormData extends MetadataFormData { firstName: string; lastName: string; email: string; @@ -55,68 +59,78 @@ const CustomerDetailsPage: React.FC = ({ }: CustomerDetailsPageProps) => { const intl = useIntl(); + const initialForm: CustomerDetailsPageFormData = { + email: customer?.email || "", + firstName: customer?.firstName || "", + isActive: customer?.isActive || false, + lastName: customer?.lastName || "", + note: customer?.note || "", + metadata: customer?.metadata.map(mapMetadataItemToInput), + privateMetadata: customer?.privateMetadata.map(mapMetadataItemToInput) + }; + + const { + makeChangeHandler: makeMetadataChangeHandler + } = useMetadataChangeTrigger(); + return ( -
customer.email, ""), - firstName: maybe(() => customer.firstName, ""), - isActive: maybe(() => customer.isActive, false), - lastName: maybe(() => customer.lastName, ""), - note: maybe(() => customer.note, "") + + {({ change, data, hasChanged, submit }) => { + const changeMetadata = makeMetadataChangeHandler(change); + + return ( + + + {intl.formatMessage(sectionNames.customers)} + + + +
+ + + + + + customer.orders.edges.map(edge => edge.node) + )} + onViewAllOrdersClick={onViewAllOrdersClick} + onRowClick={onRowClick} + /> + + +
+
+ + + +
+ + + + ); }} - onSubmit={onSubmit} - confirmLeave - > - {({ change, data, hasChanged, submit }) => ( - - - {intl.formatMessage(sectionNames.customers)} - - - -
- - - - - - customer.orders.edges.map(edge => edge.node) - )} - onViewAllOrdersClick={onViewAllOrdersClick} - onRowClick={onRowClick} - /> -
-
- - - -
- - - - )}
); }; diff --git a/src/customers/fixtures.ts b/src/customers/fixtures.ts index e3f2eb94d..018da8138 100644 --- a/src/customers/fixtures.ts +++ b/src/customers/fixtures.ts @@ -946,6 +946,8 @@ export const customerList: ListCustomers_customers_edges_node[] = [ ]; export const customer: CustomerDetails_user & CustomerAddresses_user = { __typename: "User", + metadata: [], + privateMetadata: [], addresses: [ { __typename: "Address", diff --git a/src/customers/types/CustomerDetails.ts b/src/customers/types/CustomerDetails.ts index 84cd2e038..840e0a996 100644 --- a/src/customers/types/CustomerDetails.ts +++ b/src/customers/types/CustomerDetails.ts @@ -8,6 +8,18 @@ import { PaymentChargeStatusEnum } from "./../../types/globalTypes"; // GraphQL query operation: CustomerDetails // ==================================================== +export interface CustomerDetails_user_metadata { + __typename: "MetadataItem"; + key: string; + value: string; +} + +export interface CustomerDetails_user_privateMetadata { + __typename: "MetadataItem"; + key: string; + value: string; +} + export interface CustomerDetails_user_defaultShippingAddress_country { __typename: "CountryDisplay"; code: string; @@ -104,6 +116,8 @@ export interface CustomerDetails_user { email: string; firstName: string; lastName: string; + metadata: (CustomerDetails_user_metadata | null)[]; + privateMetadata: (CustomerDetails_user_privateMetadata | null)[]; dateJoined: any; lastLogin: any | null; defaultShippingAddress: CustomerDetails_user_defaultShippingAddress | null; diff --git a/src/customers/types/UpdateCustomer.ts b/src/customers/types/UpdateCustomer.ts index 61f7051c2..500a0c01c 100644 --- a/src/customers/types/UpdateCustomer.ts +++ b/src/customers/types/UpdateCustomer.ts @@ -14,6 +14,18 @@ export interface UpdateCustomer_customerUpdate_errors { field: string | null; } +export interface UpdateCustomer_customerUpdate_user_metadata { + __typename: "MetadataItem"; + key: string; + value: string; +} + +export interface UpdateCustomer_customerUpdate_user_privateMetadata { + __typename: "MetadataItem"; + key: string; + value: string; +} + export interface UpdateCustomer_customerUpdate_user_defaultShippingAddress_country { __typename: "CountryDisplay"; code: string; @@ -64,6 +76,8 @@ export interface UpdateCustomer_customerUpdate_user { email: string; firstName: string; lastName: string; + metadata: (UpdateCustomer_customerUpdate_user_metadata | null)[]; + privateMetadata: (UpdateCustomer_customerUpdate_user_privateMetadata | null)[]; dateJoined: any; lastLogin: any | null; defaultShippingAddress: UpdateCustomer_customerUpdate_user_defaultShippingAddress | null; diff --git a/src/customers/views/CustomerDetails.tsx b/src/customers/views/CustomerDetails.tsx index 765c471e0..5f535d3b8 100644 --- a/src/customers/views/CustomerDetails.tsx +++ b/src/customers/views/CustomerDetails.tsx @@ -5,6 +5,11 @@ import { WindowTitle } from "@saleor/components/WindowTitle"; import useNavigator from "@saleor/hooks/useNavigator"; import useNotifier from "@saleor/hooks/useNotifier"; import { commonMessages } from "@saleor/intl"; +import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler"; +import { + useMetadataUpdate, + usePrivateMetadataUpdate +} from "@saleor/utils/metadata/updateMetadata"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; @@ -78,7 +83,10 @@ export const CustomerDetailsView: React.FC = ({ return ; } - const handleSubmit = async ( + const [updateMetadata] = useMetadataUpdate({}); + const [updatePrivateMetadata] = usePrivateMetadataUpdate({}); + + const updateData = async ( data: CustomerDetailsPageFormData ) => { const result = await updateCustomer({ @@ -97,6 +105,13 @@ export const CustomerDetailsView: React.FC = ({ return result.data.customerUpdate.errors; }; + const handleSubmit = createMetadataUpdateHandler( + user, + updateData, + variables => updateMetadata({ variables }), + variables => updatePrivateMetadata({ variables }) + ); + return ( <> +
+
+
+ + Metadata + +
+
+
+
+
+
+
+ There is no metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+
+
+ There is no private metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Metadata + +
+
+
+
+
+
+
+ There is no metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+
+
+ There is no private metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Metadata + +
+
+
+
+
+
+
+ There is no metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+
+
+ There is no private metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Metadata + +
+
+
+
+
+ + ‌ + +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+ + ‌ + +
+
+
+
+
+ + Metadata + +
+
+
+
+
+
+
+ There is no metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+
+
+ There is no private metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Metadata + +
+
+
+
+
+
+
+ There is no metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+
+
+ There is no private metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Metadata + +
+
+
+
+
+
+
+ There is no metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+
+
+ There is no private metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Metadata + +
+
+
+
+
+
+
+ There is no metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+
+
+ There is no private metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Metadata + +
+
+
+
+
+
+
+ There is no metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+
+
+
+
+ + Private Metadata + +
+
+
+
+
+
+
+ There is no private metadata created for this element. +
+
+ Use the button below to add new metadata field +
+
+
+ +
+