SALEOR-1629 - Fix voucher page bugs (#1031)

CHANGELOG.md

@@ -29,6 +29,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Update CollectionBulkDelete error type - #1030 by @d-wysocki
 - Remove mailing settings - #1027 by @dominik-zeglen
 - Update schema to contain email plugin changes - #1029 by @dominik-zeglen
+- Fix creating shipping voucher - #1031 by @orzechdev
 - Unconfirmed order manipulation - #967 by @tomaszszymanski129
 - Add multiline field plugins - #974 by @dominik-zeglen
 - Handle limit reached error - #990 by @dominik-zeglen

cypress/elements/discounts/vouchers.js

@@ -2,8 +2,9 @@ export const VOUCHERS_SELECTORS = {
   createVoucherButton: "[data-test-id='create-voucher']",
   voucherCodeInput: "[name='code']",
   discountRadioButtons: "[name='discountType']",
-  percentageDiscountRadioButton: "[name='discountType'][value='PERCENTAGE']",
-  fixedDiscountRadioButton: "[name='discountType'][value='FIXED']",
+  percentageDiscountRadioButton:
+    "[name='discountType'][value='VALUE_PERCENTAGE']",
+  fixedDiscountRadioButton: "[name='discountType'][value='VALUE_FIXED']",
   shippingDiscountRadioButton: "[name='discountType'][value='SHIPPING']",
   discountValueInputs: "[name='value']"
 };

src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx

@@ -8,18 +8,18 @@ import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
-import { createChannelsChangeHandler } from "@saleor/discounts/handlers";
+import {
+  createChannelsChangeHandler,
+  createDiscountTypeChangeHandler
+} from "@saleor/discounts/handlers";
 import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment";
 import { sectionNames } from "@saleor/intl";
 import { validatePrice } from "@saleor/products/utils/validation";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import {
-  DiscountValueTypeEnum,
-  VoucherTypeEnum
-} from "../../../types/globalTypes";
-import { RequirementsPicker } from "../../types";
+import { VoucherTypeEnum } from "../../../types/globalTypes";
+import { DiscountTypeEnum, RequirementsPicker } from "../../types";
 import VoucherDates from "../VoucherDates";
 import VoucherInfo from "../VoucherInfo";
 import VoucherLimits from "../VoucherLimits";
@@ -32,7 +32,7 @@ export interface FormData {
   applyOncePerOrder: boolean;
   channelListings: ChannelVoucherData[];
   code: string;
-  discountType: DiscountValueTypeEnum;
+  discountType: DiscountTypeEnum;
   endDate: string;
   endTime: string;
   hasEndDate: boolean;
@@ -78,7 +78,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
     applyOncePerOrder: false,
     channelListings,
     code: "",
-    discountType: DiscountValueTypeEnum.FIXED,
+    discountType: DiscountTypeEnum.VALUE_FIXED,
     endDate: "",
     endTime: "",
     hasEndDate: false,
@@ -95,17 +95,22 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, hasChanged, submit, triggerChange }) => {
+        const handleDiscountTypeChange = createDiscountTypeChangeHandler(
+          change
+        );
         const handleChannelChange = createChannelsChangeHandler(
           data.channelListings,
           onChannelsChange,
           triggerChange
         );
-        const formDisabled = data.channelListings?.some(
-          channel =>
-            validatePrice(channel.discountValue) ||
-            (data.requirementsPicker === RequirementsPicker.ORDER &&
-              validatePrice(channel.minSpent))
-        );
+        const formDisabled =
+          data.discountType.toString() !== "SHIPPING" &&
+          data.channelListings?.some(
+            channel =>
+              validatePrice(channel.discountValue) ||
+              (data.requirementsPicker === RequirementsPicker.ORDER &&
+                validatePrice(channel.minSpent))
+          );
         return (
           <Container>
             <AppHeader onBack={onBack}>
@@ -123,7 +128,7 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
                   data={data}
                   errors={errors}
                   disabled={disabled}
-                  onChange={change}
+                  onChange={event => handleDiscountTypeChange(data, event)}
                   variant="create"
                 />
                 <CardSpacer />

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -11,8 +11,11 @@ import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
 import { Tab, TabContainer } from "@saleor/components/Tab";
-import { createChannelsChangeHandler } from "@saleor/discounts/handlers";
-import { RequirementsPicker } from "@saleor/discounts/types";
+import {
+  createChannelsChangeHandler,
+  createDiscountTypeChangeHandler
+} from "@saleor/discounts/handlers";
+import { DiscountTypeEnum, RequirementsPicker } from "@saleor/discounts/types";
 import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment";
 import { sectionNames } from "@saleor/intl";
 import { validatePrice } from "@saleor/products/utils/validation";
@@ -56,7 +59,7 @@ export interface VoucherDetailsPageFormData {
   applyOncePerOrder: boolean;
   channelListings: ChannelVoucherData[];
   code: string;
-  discountType: DiscountValueTypeEnum;
+  discountType: DiscountTypeEnum;
   endDate: string;
   endTime: string;
   hasEndDate: boolean;
@@ -156,15 +159,19 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
     requirementsPickerInitValue = RequirementsPicker.NONE;
   }
 
+  const discountType =
+    voucher?.type === VoucherTypeEnum.SHIPPING
+      ? DiscountTypeEnum.SHIPPING
+      : voucher?.discountValueType === DiscountValueTypeEnum.PERCENTAGE
+      ? DiscountTypeEnum.VALUE_PERCENTAGE
+      : DiscountTypeEnum.VALUE_FIXED;
+
   const initialForm: VoucherDetailsPageFormData = {
     applyOncePerCustomer: voucher?.applyOncePerCustomer || false,
     applyOncePerOrder: voucher?.applyOncePerOrder || false,
     channelListings,
     code: voucher?.code || "",
-    discountType: maybe(
-      () => voucher.discountValueType,
-      DiscountValueTypeEnum.FIXED
-    ),
+    discountType,
     endDate: splitDateTime(maybe(() => voucher.endDate, "")).date,
     endTime: splitDateTime(maybe(() => voucher.endDate, "")).time,
     hasEndDate: maybe(() => !!voucher.endDate),
@@ -183,17 +190,22 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
   return (
     <Form initial={initialForm} onSubmit={onSubmit}>
       {({ change, data, hasChanged, submit, triggerChange }) => {
+        const handleDiscountTypeChange = createDiscountTypeChangeHandler(
+          change
+        );
         const handleChannelChange = createChannelsChangeHandler(
           data.channelListings,
           onChannelsChange,
           triggerChange
         );
-        const formDisabled = data.channelListings?.some(
-          channel =>
-            validatePrice(channel.discountValue) ||
-            (data.requirementsPicker === RequirementsPicker.ORDER &&
-              validatePrice(channel.minSpent))
-        );
+        const formDisabled =
+          data.discountType.toString() !== "SHIPPING" &&
+          data.channelListings?.some(
+            channel =>
+              validatePrice(channel.discountValue) ||
+              (data.requirementsPicker === RequirementsPicker.ORDER &&
+                validatePrice(channel.minSpent))
+          );
         return (
           <Container>
             <AppHeader onBack={onBack}>
@@ -214,7 +226,7 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                   data={data}
                   disabled={disabled}
                   errors={errors}
-                  onChange={change}
+                  onChange={event => handleDiscountTypeChange(data, event)}
                 />
                 <CardSpacer />
                 {data.discountType.toString() !== "SHIPPING" ? (

src/discounts/components/VoucherTypes/VoucherTypes.tsx

@@ -3,13 +3,13 @@ import CardContent from "@material-ui/core/CardContent";
 import CardTitle from "@saleor/components/CardTitle";
 import Grid from "@saleor/components/Grid";
 import RadioGroupField from "@saleor/components/RadioGroupField";
+import { DiscountTypeEnum } from "@saleor/discounts/types";
 import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment";
 import { getFormErrors } from "@saleor/utils/errors";
 import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
 import React from "react";
 import { useIntl } from "react-intl";
 
-import { DiscountValueTypeEnum } from "../../../types/globalTypes";
 import { VoucherDetailsPageFormData } from "../VoucherDetailsPage";
 
 interface VoucherTypesProps {
@@ -35,21 +35,21 @@ const VoucherTypes = ({
         defaultMessage: "Fixed Amount",
         description: "voucher discount type"
       }),
-      value: DiscountValueTypeEnum.FIXED
+      value: DiscountTypeEnum.VALUE_FIXED
     },
     {
       label: intl.formatMessage({
         defaultMessage: "Percentage",
         description: "voucher discount type"
       }),
-      value: DiscountValueTypeEnum.PERCENTAGE
+      value: DiscountTypeEnum.VALUE_PERCENTAGE
     },
     {
       label: intl.formatMessage({
         defaultMessage: "Free Shipping",
         description: "voucher discount type"
       }),
-      value: "SHIPPING"
+      value: DiscountTypeEnum.SHIPPING
     }
   ];
 

src/discounts/components/VoucherValue/VoucherValue.tsx

@@ -14,14 +14,14 @@ import Skeleton from "@saleor/components/Skeleton";
 import TableHead from "@saleor/components/TableHead";
 import TextFieldWithChoice from "@saleor/components/TextFieldWithChoice";
 import { ChannelInput } from "@saleor/discounts/handlers";
+import { DiscountTypeEnum } from "@saleor/discounts/types";
 import { DiscountErrorFragment } from "@saleor/fragments/types/DiscountErrorFragment";
 import { renderCollection } from "@saleor/misc";
 import { getFormErrors } from "@saleor/utils/errors";
 import getDiscountErrorMessage from "@saleor/utils/errors/discounts";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import { DiscountValueTypeEnum } from "../../../types/globalTypes";
 import { translateVoucherTypes } from "../../translations";
 import { VoucherDetailsPageFormData } from "../VoucherDetailsPage";
 import { useStyles } from "./styles";
@@ -108,7 +108,7 @@ const VoucherValue: React.FC<VoucherValueProps> = props => {
                             ChoiceProps={{
                               label:
                                 data.discountType ===
-                                DiscountValueTypeEnum.FIXED
+                                DiscountTypeEnum.VALUE_FIXED
                                   ? listing.currency
                                   : "%",
                               name: "discountType" as keyof FormData,

src/discounts/fixtures.ts

@@ -153,6 +153,7 @@ export const voucherList: VoucherList_vouchers_edges_node[] = [
         country: "Germany"
       }
     ],
+    type: "ENTIRE_ORDER" as VoucherTypeEnum,
     discountValueType: "PERCENTAGE" as DiscountValueTypeEnum,
     endDate: null,
     id: "Vm91Y2hlcjox",
@@ -183,6 +184,7 @@ export const voucherList: VoucherList_vouchers_edges_node[] = [
     ],
     code: "FREE2020",
     countries: [],
+    type: "ENTIRE_ORDER" as VoucherTypeEnum,
     discountValueType: "FIXED" as DiscountValueTypeEnum,
     endDate: null,
     id: "Vm91Y2hlcjoy",

src/discounts/handlers.ts

@@ -1,8 +1,10 @@
 import { ChannelSaleData, ChannelVoucherData } from "@saleor/channels/utils";
 import { SaleDetailsPageFormData } from "@saleor/discounts/components/SaleDetailsPage";
 import { VoucherDetailsPageFormData } from "@saleor/discounts/components/VoucherDetailsPage";
-import { RequirementsPicker } from "@saleor/discounts/types";
+import { DiscountTypeEnum, RequirementsPicker } from "@saleor/discounts/types";
+import { ChangeEvent, FormChange } from "@saleor/hooks/useForm";
 import { RequireOnlyOne } from "@saleor/misc";
+import { VoucherTypeEnum } from "@saleor/types/globalTypes";
 import { diff } from "fast-array-diff";
 export interface ChannelArgs {
   discountValue: string;
@@ -14,6 +16,29 @@ export type ChannelInput = RequireOnlyOne<
   "discountValue" | "minSpent"
 >;
 
+export function createDiscountTypeChangeHandler(change: FormChange) {
+  return (formData: VoucherDetailsPageFormData, event: ChangeEvent) => {
+    if (formData.type === VoucherTypeEnum.SHIPPING) {
+      // if previously type was shipping
+      change({
+        target: {
+          name: "type",
+          value: VoucherTypeEnum.ENTIRE_ORDER
+        }
+      });
+    } else if (event.target.value === DiscountTypeEnum.SHIPPING) {
+      // if currently type should be shipping
+      change({
+        target: {
+          name: "type",
+          value: VoucherTypeEnum.ENTIRE_ORDER
+        }
+      });
+    }
+    change(event);
+  };
+}
+
 export function createChannelsChangeHandler(
   channelListings: ChannelVoucherData[],
   updateChannels: (data: ChannelVoucherData[]) => void,

src/discounts/types.ts

@@ -3,3 +3,9 @@ export enum RequirementsPicker {
   ITEM = "ITEM",
   NONE = "NONE"
 }
+
+export enum DiscountTypeEnum {
+  VALUE_FIXED = "VALUE_FIXED",
+  VALUE_PERCENTAGE = "VALUE_PERCENTAGE",
+  SHIPPING = "SHIPPING"
+}

src/discounts/types/VoucherCataloguesAdd.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { CatalogueInput, DiscountErrorCode, DiscountValueTypeEnum, VoucherTypeEnum } from "./../../types/globalTypes";
+import { CatalogueInput, DiscountErrorCode, VoucherTypeEnum, DiscountValueTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: VoucherCataloguesAdd
@@ -172,11 +172,11 @@ export interface VoucherCataloguesAdd_voucherCataloguesAdd_voucher {
   startDate: any;
   endDate: any | null;
   usageLimit: number | null;
+  type: VoucherTypeEnum;
   discountValueType: DiscountValueTypeEnum;
   countries: (VoucherCataloguesAdd_voucherCataloguesAdd_voucher_countries | null)[] | null;
   minCheckoutItemsQuantity: number | null;
   channelListings: VoucherCataloguesAdd_voucherCataloguesAdd_voucher_channelListings[] | null;
-  type: VoucherTypeEnum;
   used: number;
   applyOncePerOrder: boolean;
   applyOncePerCustomer: boolean;

src/discounts/types/VoucherCataloguesRemove.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { CatalogueInput, DiscountErrorCode, DiscountValueTypeEnum, VoucherTypeEnum } from "./../../types/globalTypes";
+import { CatalogueInput, DiscountErrorCode, VoucherTypeEnum, DiscountValueTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: VoucherCataloguesRemove
@@ -172,11 +172,11 @@ export interface VoucherCataloguesRemove_voucherCataloguesRemove_voucher {
   startDate: any;
   endDate: any | null;
   usageLimit: number | null;
+  type: VoucherTypeEnum;
   discountValueType: DiscountValueTypeEnum;
   countries: (VoucherCataloguesRemove_voucherCataloguesRemove_voucher_countries | null)[] | null;
   minCheckoutItemsQuantity: number | null;
   channelListings: VoucherCataloguesRemove_voucherCataloguesRemove_voucher_channelListings[] | null;
-  type: VoucherTypeEnum;
   used: number;
   applyOncePerOrder: boolean;
   applyOncePerCustomer: boolean;

src/discounts/types/VoucherChannelListingUpdate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { VoucherChannelListingInput, DiscountErrorCode, DiscountValueTypeEnum } from "./../../types/globalTypes";
+import { VoucherChannelListingInput, DiscountErrorCode, VoucherTypeEnum, DiscountValueTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: VoucherChannelListingUpdate
@@ -51,6 +51,7 @@ export interface VoucherChannelListingUpdate_voucherChannelListingUpdate_voucher
   startDate: any;
   endDate: any | null;
   usageLimit: number | null;
+  type: VoucherTypeEnum;
   discountValueType: DiscountValueTypeEnum;
   countries: (VoucherChannelListingUpdate_voucherChannelListingUpdate_voucher_countries | null)[] | null;
   minCheckoutItemsQuantity: number | null;

src/discounts/types/VoucherCreate.ts

@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
-import { VoucherInput, DiscountErrorCode, DiscountValueTypeEnum } from "./../../types/globalTypes";
+import { VoucherInput, DiscountErrorCode, VoucherTypeEnum, DiscountValueTypeEnum } from "./../../types/globalTypes";
 
 // ====================================================
 // GraphQL mutation operation: VoucherCreate
@@ -51,6 +51,7 @@ export interface VoucherCreate_voucherCreate_voucher {
   startDate: any;
   endDate: any | null;
   usageLimit: number | null;
+  type: VoucherTypeEnum;
   discountValueType: DiscountValueTypeEnum;
   countries: (VoucherCreate_voucherCreate_voucher_countries | null)[] | null;
   minCheckoutItemsQuantity: number | null;