Add support for discount type (#4641)

* Refactor rule model

* Add changeset

* Add discount type component

* Add type to initial form values

* Bump macaw

* Refactor Add button

* Update test

* Refactor DiscountRule isLoaded

* Add type support

* Remve useeffect

* Add changeset

* Extract messages

* Fix typo

.changeset/early-panthers-kiss.md

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": minor
+---
+
+Add discount type to form

locale/defaultMessages.json

@@ -428,6 +428,10 @@
     "context": "deprecated secret key toolbar label",
     "string": "Use RS256 signature instead."
   },
+  "0khVBN": {
+    "context": "discount type",
+    "string": "Catalog"
+  },
   "0krqBj": {
     "context": "page header",
     "string": "Order no. {orderNumber} - Refund"
@@ -6231,6 +6235,9 @@
     "context": "gift card history message",
     "string": "Gift card was activated by {activatedBy}"
   },
+  "fKrRhF": {
+    "string": "General information"
+  },
   "fLCV/w": {
     "string": "Add new value"
   },
@@ -8988,6 +8995,9 @@
     "context": "header, dialog",
     "string": "Create New Warehouse"
   },
+  "z/2AZY": {
+    "string": "Discount type"
+  },
   "z0gGP+": {
     "context": "number of attributes",
     "string": "{number} Attributes"

package.json

@@ -39,7 +39,7 @@
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
     "@saleor/macaw-ui": "npm:@saleor/macaw-ui@0.7.4",
-    "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.0.0-pre.18",
+    "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.0.0-pre.20",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^7.83.0",
     "@types/faker": "^5.1.6",

src/discounts/components/DiscountCreateForm/initialFormValues.ts

@@ -3,6 +3,7 @@ import { DiscoutFormData } from "@dashboard/discounts/types";
 export const initialFormValues: DiscoutFormData = {
   name: "",
   description: "",
+  type: "catalog",
   dates: {
     endDate: "",
     endTime: "",

src/discounts/components/DiscountCreateForm/validationSchema.ts

@@ -13,6 +13,7 @@ export const getValidationSchema = (intl: IntlShape) => {
     name: z
       .string()
       .min(1, intl.formatMessage(validationMessages.nameRequired)),
+    type: z.string().optional(),
     description: z.string().optional(),
     dates: z
       .object({

src/discounts/components/DiscountCreatePage/DiscountCreatePage.tsx

@@ -17,7 +17,7 @@ import { useIntl } from "react-intl";
 import { DiscountCreateForm } from "../DiscountCreateForm";
 import { DiscountDatesWithController } from "../DiscountDates";
 import { DiscountDescription } from "../DiscountDescription";
-import { DiscountName } from "../DiscountName";
+import { DiscountGeneralInfo } from "../DiscountGeneralInfo";
 import { DiscountRules, DiscountRulesErrors } from "../DiscountRules";
 
 export interface DiscountCreatePageProps {
@@ -54,9 +54,10 @@ export const DiscountCreatePage = ({
         <DiscountCreateForm onSubmit={onSubmit}>
           {({ rules, onDeleteRule, onRuleSubmit, submitHandler }) => (
             <>
-              <DiscountName
+              <DiscountGeneralInfo
                 error={getCommonFormFieldErrorMessage(formErrors.name, intl)}
                 disabled={disabled}
+                typeDisabled={true}
               />
 
               <DiscountDescription disabled={disabled} />

src/discounts/components/DiscountDetailsForm/DiscountDetailsForm.tsx

@@ -55,6 +55,7 @@ export const DiscountDetailsForm = ({
   const methods = useForm<DiscoutFormData>({
     mode: "onBlur",
     values: {
+      type: "catalog", // TODO: type: data?.type ?? PromotionTypeEnum.CATALOGUE,
       dates: {
         startDate: splitDateTime(data?.startDate ?? "").date,
         startTime: splitDateTime(data?.startDate ?? "").time,

src/discounts/components/DiscountDetailsPage/DiscountDetailsPage.tsx

@@ -22,7 +22,7 @@ import { useIntl } from "react-intl";
 import { DiscountDatesWithController } from "../DiscountDates";
 import { DiscountDescription } from "../DiscountDescription";
 import { DiscountDetailsForm } from "../DiscountDetailsForm";
-import { DiscountName } from "../DiscountName";
+import { DiscountGeneralInfo } from "../DiscountGeneralInfo";
 import { DiscountRules } from "../DiscountRules";
 import { DiscountSavebar } from "../DiscountSavebar";
 
@@ -86,9 +86,10 @@ export const DiscountDetailsPage = ({
         >
           {({ rulesErrors, rules, onDeleteRule, onRuleSubmit, onSubmit }) => (
             <>
-              <DiscountName
+              <DiscountGeneralInfo
                 error={getCommonFormFieldErrorMessage(formErrors.name, intl)}
                 disabled={disabled}
+                typeDisabled={true}
               />
 
               <DiscountDescription disabled={disabled} />

src/discounts/components/DiscountGeneralInfo/DiscountGeneralInfo.tsx

@@ -0,0 +1,86 @@
+import { DashboardCard } from "@dashboard/components/Card";
+import { DiscoutFormData } from "@dashboard/discounts/types";
+import { Box, Input, Select } from "@saleor/macaw-ui-next";
+import React, { useMemo } from "react";
+import { useController, useFormContext } from "react-hook-form";
+import { FormattedMessage, useIntl } from "react-intl";
+
+interface DiscountNameProps {
+  disabled?: boolean;
+  typeDisabled?: boolean;
+  error: string | undefined;
+}
+
+export const DiscountGeneralInfo = ({
+  disabled,
+  typeDisabled,
+  error,
+}: DiscountNameProps) => {
+  const intl = useIntl();
+  const { formState } = useFormContext<DiscoutFormData>();
+  const { field: nameField } = useController<DiscoutFormData, "name">({
+    name: "name",
+  });
+  const { field: typeField } = useController<DiscoutFormData, "type">({
+    name: "type",
+  });
+
+  const discountTypes = useMemo(
+    () => [
+      {
+        label: intl.formatMessage({
+          defaultMessage: "Catalog",
+          id: "0khVBN",
+          description: "discount type",
+        }),
+        value: "catalog",
+      },
+      // Uncomment when API will support catalog discounts
+      // {
+      //   label: intl.formatMessage({
+      //     defaultMessage: "Order",
+      //     id: "onUvP+",
+      //     description: "discount type",
+      //   }),
+      //   value: "order",
+      // },
+    ],
+    [intl],
+  );
+
+  return (
+    <DashboardCard>
+      <DashboardCard.Title>
+        <FormattedMessage defaultMessage="General information" id="fKrRhF" />
+      </DashboardCard.Title>
+      <DashboardCard.Content>
+        <Box display="grid" gap={3}>
+          <Input
+            {...nameField}
+            error={!!error || !!formState.errors?.name}
+            helperText={error || formState.errors?.name?.message}
+            label={intl.formatMessage({
+              defaultMessage: "Discount name",
+              id: "lJXkFS",
+              description: "discount name",
+            })}
+            disabled={disabled || nameField.disabled}
+          />
+
+          <Box __width={250}>
+            <Select
+              {...typeField}
+              size="medium"
+              options={discountTypes}
+              label={intl.formatMessage({
+                defaultMessage: "Discount type",
+                id: "z/2AZY",
+              })}
+              disabled={typeDisabled || nameField.disabled}
+            />
+          </Box>
+        </Box>
+      </DashboardCard.Content>
+    </DashboardCard>
+  );
+};

src/discounts/components/DiscountGeneralInfo/index.ts

@@ -0,0 +1 @@
+export * from "./DiscountGeneralInfo";