[SALEOR-3965] Extend Sale & Voucher to include Metadata #7653 (#1245)

* Add base logic * Add missing metadata handlers * Update changelog * Cleanup schema * Add messages
saleor · Jul 29, 2021 · cacf303 · cacf303
1 parent 6abdc46
commit cacf303
Show file tree

Hide file tree

Showing 40 changed files with 1,937 additions and 94 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -70,6 +70,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix list pagination crash on search - #1230 by @orzechdev
 - Fix positive float number input validation - #1233 by @orzechdev
 - Use MacawUI - #1229 by @dominik-zeglen
+- Add Metadata for Sale & Voucher - #7653 by @piotrgrundas
 - Add variant create options dialog - #1238 by @orzechdev
 
 # 2.11.1

diff --git a/schema.graphql b/schema.graphql
@@ -4839,12 +4839,14 @@ type RequestPasswordReset {
   errors: [AccountError!]!
 }
 
-type Sale implements Node {
+type Sale implements Node & ObjectWithMetadata {
   id: ID!
   name: String!
   type: SaleType!
   startDate: DateTime!
   endDate: DateTime
+  privateMetadata: [MetadataItem]!
+  metadata: [MetadataItem]!
   categories(before: String, after: String, first: Int, last: Int): CategoryCountableConnection
   collections(before: String, after: String, first: Int, last: Int): CollectionCountableConnection
   products(before: String, after: String, first: Int, last: Int): ProductCountableConnection
@@ -5757,7 +5759,7 @@ enum VolumeUnitsEnum {
   ACRE_FT
 }
 
-type Voucher implements Node {
+type Voucher implements Node & ObjectWithMetadata {
   id: ID!
   name: String
   type: VoucherTypeEnum!
@@ -5771,6 +5773,8 @@ type Voucher implements Node {
   onlyForStaff: Boolean!
   discountValueType: DiscountValueTypeEnum!
   minCheckoutItemsQuantity: Int
+  privateMetadata: [MetadataItem]!
+  metadata: [MetadataItem]!
   categories(before: String, after: String, first: Int, last: Int): CategoryCountableConnection
   collections(before: String, after: String, first: Int, last: Int): CollectionCountableConnection
   products(before: String, after: String, first: Int, last: Int): ProductCountableConnection

diff --git a/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx b/src/discounts/components/SaleCreatePage/SaleCreatePage.tsx
@@ -5,13 +5,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, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import Savebar from "@saleor/components/Savebar";
 import { createSaleChannelsChangeHandler } from "@saleor/discounts/handlers";
 import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment";
 import { sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
 import { validatePrice } from "@saleor/products/utils/validation";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -24,7 +26,7 @@ import SaleInfo from "../SaleInfo";
 import SaleType from "../SaleType";
 import SaleValue from "../SaleValue";
 
-export interface FormData {
+export interface FormData extends MetadataFormData {
   channelListings: ChannelSaleData[];
   endDate: string;
   endTime: string;
@@ -60,6 +62,9 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
   onBack
 }) => {
   const intl = useIntl();
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   const initialForm: FormData = {
     channelListings,
@@ -70,7 +75,9 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
     startDate: "",
     startTime: "",
     type: SaleTypeEnum.FIXED,
-    value: ""
+    value: "",
+    metadata: [],
+    privateMetadata: []
   };
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
@@ -83,6 +90,8 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
         const formDisabled = data.channelListings?.some(channel =>
           validatePrice(channel?.discountValue)
         );
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
           <Container>
             <Backlink onClick={onBack}>
@@ -132,6 +141,7 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
                   openModal={openChannelsModal}
                 />
               </div>
+              <Metadata data={data} onChange={changeMetadata} />
             </Grid>
             <Savebar
               disabled={disabled || formDisabled || !hasChanged}

diff --git a/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx b/src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx
@@ -5,6 +5,7 @@ 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, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import Savebar from "@saleor/components/Savebar";
 import { Tab, TabContainer } from "@saleor/components/Tab";
@@ -13,6 +14,8 @@ import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFrag
 import { sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
 import { validatePrice } from "@saleor/products/utils/validation";
+import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -32,7 +35,7 @@ import SaleSummary from "../SaleSummary";
 import SaleType from "../SaleType";
 import SaleValue from "../SaleValue";
 
-export interface SaleDetailsPageFormData {
+export interface SaleDetailsPageFormData extends MetadataFormData {
   channelListings: ChannelSaleData[];
   endDate: string;
   endTime: string;
@@ -127,16 +130,21 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
   toggleAll
 }) => {
   const intl = useIntl();
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   const initialForm: SaleDetailsPageFormData = {
     channelListings,
-    endDate: splitDateTime(maybe(() => sale.endDate, "")).date,
-    endTime: splitDateTime(maybe(() => sale.endDate, "")).time,
-    hasEndDate: maybe(() => !!sale.endDate),
-    name: maybe(() => sale.name, ""),
-    startDate: splitDateTime(maybe(() => sale.startDate, "")).date,
-    startTime: splitDateTime(maybe(() => sale.startDate, "")).time,
-    type: maybe(() => sale.type, SaleTypeEnum.FIXED)
+    endDate: splitDateTime(sale?.endDate ?? "").date,
+    endTime: splitDateTime(sale?.endDate ?? "").time,
+    hasEndDate: !!sale?.endDate,
+    name: sale?.name ?? "",
+    startDate: splitDateTime(sale?.startDate ?? "").date,
+    startTime: splitDateTime(sale?.startDate ?? "").time,
+    type: sale?.type ?? SaleTypeEnum.FIXED,
+    metadata: sale?.metadata.map(mapMetadataItemToInput),
+    privateMetadata: sale?.privateMetadata.map(mapMetadataItemToInput)
   };
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
@@ -149,6 +157,8 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
         const formDisabled = data.channelListings?.some(channel =>
           validatePrice(channel.discountValue)
         );
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
           <Container>
             <Backlink onClick={onBack}>
@@ -307,6 +317,7 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                   openModal={openChannelsModal}
                 />
               </div>
+              <Metadata data={data} onChange={changeMetadata} />
             </Grid>
             <Savebar
               disabled={

diff --git a/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx b/src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx
@@ -5,6 +5,7 @@ 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, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import Savebar from "@saleor/components/Savebar";
 import {
@@ -15,6 +16,7 @@ import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFrag
 import { sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
 import { validatePrice } from "@saleor/products/utils/validation";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { useIntl } from "react-intl";
 
@@ -27,7 +29,7 @@ import VoucherRequirements from "../VoucherRequirements";
 import VoucherTypes from "../VoucherTypes";
 import VoucherValue from "../VoucherValue";
 
-export interface FormData {
+export interface FormData extends MetadataFormData {
   applyOncePerCustomer: boolean;
   applyOncePerOrder: boolean;
   onlyForStaff: boolean;
@@ -73,6 +75,9 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
   openChannelsModal
 }) => {
   const intl = useIntl();
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
 
   const initialForm: FormData = {
     applyOncePerCustomer: false,
@@ -91,7 +96,9 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
     startTime: "",
     type: VoucherTypeEnum.ENTIRE_ORDER,
     usageLimit: "0",
-    value: 0
+    value: 0,
+    metadata: [],
+    privateMetadata: []
   };
 
   return (
@@ -113,6 +120,8 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
               (data.requirementsPicker === RequirementsPicker.ORDER &&
                 validatePrice(channel.minSpent))
           );
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
           <Container>
             <Backlink onClick={onBack}>
@@ -189,6 +198,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
                   openModal={openChannelsModal}
                 />
               </div>
+              <Metadata data={data} onChange={changeMetadata} />
             </Grid>
             <Savebar
               disabled={

diff --git a/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx b/src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx
@@ -7,6 +7,7 @@ import Container from "@saleor/components/Container";
 import CountryList from "@saleor/components/CountryList";
 import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
+import Metadata, { MetadataFormData } from "@saleor/components/Metadata";
 import PageHeader from "@saleor/components/PageHeader";
 import Savebar from "@saleor/components/Savebar";
 import { Tab, TabContainer } from "@saleor/components/Tab";
@@ -19,6 +20,8 @@ import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFrag
 import { sectionNames } from "@saleor/intl";
 import { Backlink } from "@saleor/macaw-ui";
 import { validatePrice } from "@saleor/products/utils/validation";
+import { mapMetadataItemToInput } from "@saleor/utils/maps";
+import useMetadataChangeTrigger from "@saleor/utils/metadata/useMetadataChangeTrigger";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
@@ -55,7 +58,7 @@ export function voucherDetailsPageTab(tab: string): VoucherDetailsPageTab {
     : VoucherDetailsPageTab.categories;
 }
 
-export interface VoucherDetailsPageFormData {
+export interface VoucherDetailsPageFormData extends MetadataFormData {
   applyOncePerCustomer: boolean;
   applyOncePerOrder: boolean;
   onlyForStaff: boolean;
@@ -149,6 +152,9 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   productListToolbar
 }) => {
   const intl = useIntl();
+  const {
+    makeChangeHandler: makeMetadataChangeHandler
+  } = useMetadataChangeTrigger();
   const channel = voucher?.channelListings?.find(
     listing => listing.channel.id === selectedChannelId
   );
@@ -175,19 +181,19 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
     channelListings,
     code: voucher?.code || "",
     discountType,
-    endDate: splitDateTime(maybe(() => voucher.endDate, "")).date,
-    endTime: splitDateTime(maybe(() => voucher.endDate, "")).time,
-    hasEndDate: maybe(() => !!voucher.endDate),
-    hasUsageLimit: maybe(() => !!voucher.usageLimit),
-    minCheckoutItemsQuantity: maybe(
-      () => voucher.minCheckoutItemsQuantity.toString(),
-      "0"
-    ),
+    endDate: splitDateTime(voucher?.endDate ?? "").date,
+    endTime: splitDateTime(voucher?.endDate ?? "").time,
+    hasEndDate: !!voucher?.endDate,
+    hasUsageLimit: !!voucher?.usageLimit,
+    minCheckoutItemsQuantity:
+      voucher?.minCheckoutItemsQuantity?.toString() ?? "0",
     requirementsPicker: requirementsPickerInitValue,
-    startDate: splitDateTime(maybe(() => voucher.startDate, "")).date,
-    startTime: splitDateTime(maybe(() => voucher.startDate, "")).time,
-    type: maybe(() => voucher.type, VoucherTypeEnum.ENTIRE_ORDER),
-    usageLimit: maybe(() => voucher.usageLimit.toString(), "0")
+    startDate: splitDateTime(voucher?.startDate ?? "").date,
+    startTime: splitDateTime(voucher?.startDate ?? "").time,
+    type: voucher?.type ?? VoucherTypeEnum.ENTIRE_ORDER,
+    usageLimit: voucher?.usageLimit?.toString() ?? "0",
+    metadata: voucher?.metadata.map(mapMetadataItemToInput),
+    privateMetadata: voucher?.privateMetadata.map(mapMetadataItemToInput)
   };
 
   return (
@@ -209,6 +215,8 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
               (data.requirementsPicker === RequirementsPicker.ORDER &&
                 validatePrice(channel.minSpent))
           );
+        const changeMetadata = makeMetadataChangeHandler(change);
+
         return (
           <Container>
             <Backlink onClick={onBack}>
@@ -420,6 +428,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                   openModal={openChannelsModal}
                 />
               </div>
+              <Metadata data={data} onChange={changeMetadata} />
             </Grid>
             <Savebar
               disabled={