From 39711fee6c6267898ee4dede818c920179a2368c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Wed, 10 Jan 2024 15:11:37 +0100
Subject: [PATCH] Improve discount condition when no items to select and stop
 sending empty condtion (#4603)

* Stop send empty conditions

* Bump macaw

* Add NoOptions support to combobox and multiselect

* Show NoOptions in rule conditions

* Extract messages

* Add changeset
---
 .changeset/bright-sheep-smoke.md              |  5 +++++
 locale/defaultMessages.json                   |  3 +++
 package-lock.json                             | 14 ++++++------
 package.json                                  |  2 +-
 .../Combobox/components/Combobox.tsx          | 14 +++++++++---
 .../Combobox/components/Multiselect.tsx       | 22 +++++++++++++++----
 .../RuleConditionRow/RuleConditionRow.tsx     | 11 ++++++++--
 src/discounts/models/Condition.test.ts        |  6 +++++
 src/discounts/models/Condition.ts             |  2 +-
 9 files changed, 61 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/bright-sheep-smoke.md

diff --git a/.changeset/bright-sheep-smoke.md b/.changeset/bright-sheep-smoke.md
new file mode 100644
index 00000000000..c2195682e57
--- /dev/null
+++ b/.changeset/bright-sheep-smoke.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Show info text when no options to select in discount condtion, stop sending empty condtion
diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
index 858a0fa79a8..cec2de593cf 100644
--- a/locale/defaultMessages.json
+++ b/locale/defaultMessages.json
@@ -8751,6 +8751,9 @@
     "context": "PluginChannelConfigurationCell global title",
     "string": "Global"
   },
+  "xTyg+p": {
+    "string": "No options to select"
+  },
   "xUvWaP": {
     "context": "subtotal price",
     "string": "Subtotal"
diff --git a/package-lock.json b/package-lock.json
index 98c6c7579bf..566506b843d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,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.16",
+        "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.0.0-pre.18",
         "@saleor/sdk": "0.6.0",
         "@sentry/react": "^7.83.0",
         "@types/faker": "^5.1.6",
@@ -9114,9 +9114,9 @@
     },
     "node_modules/@saleor/macaw-ui-next": {
       "name": "@saleor/macaw-ui",
-      "version": "1.0.0-pre.16",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.0.0-pre.16.tgz",
-      "integrity": "sha512-W6JaPkQpZ2iGjOIkIVXMWcLEmZ6kCBGzQCnDTkZHOYG8AP3chR9rKrjSYgcDLvabmr3Z7O3F2kMWl6eDjH+B0A==",
+      "version": "1.0.0-pre.18",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.0.0-pre.18.tgz",
+      "integrity": "sha512-NZY6tHjgwSeB8w2Y0IPuc3jfjeUe9L2PMZo6J48n7ZMPlD7szYaiSqRlahc0HL47BbfHQpzhAoN7ckHsneg56A==",
       "dependencies": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom": "^2.0.2",
@@ -50042,9 +50042,9 @@
       }
     },
     "@saleor/macaw-ui-next": {
-      "version": "npm:@saleor/macaw-ui@1.0.0-pre.16",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.0.0-pre.16.tgz",
-      "integrity": "sha512-W6JaPkQpZ2iGjOIkIVXMWcLEmZ6kCBGzQCnDTkZHOYG8AP3chR9rKrjSYgcDLvabmr3Z7O3F2kMWl6eDjH+B0A==",
+      "version": "npm:@saleor/macaw-ui@1.0.0-pre.18",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-1.0.0-pre.18.tgz",
+      "integrity": "sha512-NZY6tHjgwSeB8w2Y0IPuc3jfjeUe9L2PMZo6J48n7ZMPlD7szYaiSqRlahc0HL47BbfHQpzhAoN7ckHsneg56A==",
       "requires": {
         "@dessert-box/react": "^0.4.0",
         "@floating-ui/react-dom": "^2.0.2",
diff --git a/package.json b/package.json
index 481878c84f1..4c20e71cf1f 100644
--- a/package.json
+++ b/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.16",
+    "@saleor/macaw-ui-next": "npm:@saleor/macaw-ui@1.0.0-pre.18",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^7.83.0",
     "@types/faker": "^5.1.6",
diff --git a/src/components/Combobox/components/Combobox.tsx b/src/components/Combobox/components/Combobox.tsx
index 7429b5c7de7..fc3a97f5d7d 100644
--- a/src/components/Combobox/components/Combobox.tsx
+++ b/src/components/Combobox/components/Combobox.tsx
@@ -6,7 +6,7 @@ import {
   DynamicComboboxProps,
   Option,
 } from "@saleor/macaw-ui-next";
-import React, { useEffect, useRef, useState } from "react";
+import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { useIntl } from "react-intl";
 
 import { useCombbobxCustomOption } from "../hooks/useCombbobxCustomOption";
@@ -18,6 +18,7 @@ type ComboboxProps = Omit<
   DynamicComboboxProps<Option | null>,
   "value" | "onChange"
 > & {
+  children?: ReactNode;
   fetchOptions: (data: string) => void;
   allowCustomValues?: boolean;
   alwaysFetchOnFocus?: boolean;
@@ -26,7 +27,7 @@ type ComboboxProps = Omit<
   onChange: (event: ChangeEvent) => void;
 };
 
-export const Combobox = ({
+const ComboboxRoot = ({
   value,
   fetchOptions,
   onChange,
@@ -35,6 +36,7 @@ export const Combobox = ({
   allowCustomValues = false,
   fetchMore,
   loading,
+  children,
   size = "small",
   ...rest
 }: ComboboxProps) => {
@@ -85,6 +87,12 @@ export const Combobox = ({
       }}
       size={size}
       {...rest}
-    />
+    >
+      {children}
+    </DynamicCombobox>
   );
 };
+
+export const Combobox = Object.assign(ComboboxRoot, {
+  NoOptions: DynamicCombobox.NoOptions,
+});
diff --git a/src/components/Combobox/components/Multiselect.tsx b/src/components/Combobox/components/Multiselect.tsx
index 339dbf51f85..19da4895b59 100644
--- a/src/components/Combobox/components/Multiselect.tsx
+++ b/src/components/Combobox/components/Multiselect.tsx
@@ -6,7 +6,13 @@ import {
   DynamicMultiselectProps,
   Option,
 } from "@saleor/macaw-ui-next";
-import React, { forwardRef, useEffect, useRef, useState } from "react";
+import React, {
+  forwardRef,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useIntl } from "react-intl";
 
 import { useCombbobxCustomOption } from "../hooks/useCombbobxCustomOption";
@@ -19,10 +25,11 @@ type MultiselectProps = Omit<DynamicMultiselectProps<Option>, "onChange"> & {
   alwaysFetchOnFocus?: boolean;
   allowCustomValues?: boolean;
   fetchMore?: FetchMoreProps;
+  children?: ReactNode;
   onChange: (event: ChangeEvent) => void;
 };
 
-export const Multiselect = forwardRef<HTMLInputElement, MultiselectProps>(
+const MultiselectRoot = forwardRef<HTMLInputElement, MultiselectProps>(
   (
     {
       disabled,
@@ -34,6 +41,7 @@ export const Multiselect = forwardRef<HTMLInputElement, MultiselectProps>(
       allowCustomValues = false,
       loading,
       fetchMore,
+      children,
       size = "small",
       ...rest
     },
@@ -100,9 +108,15 @@ export const Multiselect = forwardRef<HTMLInputElement, MultiselectProps>(
         }}
         size={size}
         {...rest}
-      />
+      >
+        {children}
+      </DynamicMultiselect>
     );
   },
 );
 
-Multiselect.displayName = "Multiselect";
+MultiselectRoot.displayName = "Multiselect";
+
+export const Multiselect = Object.assign(MultiselectRoot, {
+  NoOptions: DynamicMultiselect.NoOptions,
+});
diff --git a/src/discounts/components/DiscountRules/componenets/RuleForm/components/RuleConditionRow/RuleConditionRow.tsx b/src/discounts/components/DiscountRules/componenets/RuleForm/components/RuleConditionRow/RuleConditionRow.tsx
index 074d05f48b3..e23d8e771ad 100644
--- a/src/discounts/components/DiscountRules/componenets/RuleForm/components/RuleConditionRow/RuleConditionRow.tsx
+++ b/src/discounts/components/DiscountRules/componenets/RuleForm/components/RuleConditionRow/RuleConditionRow.tsx
@@ -4,7 +4,7 @@ import { getSearchFetchMoreProps } from "@dashboard/hooks/makeTopLevelSearch/uti
 import { Box, Button, Option, RemoveIcon, Select } from "@saleor/macaw-ui-next";
 import React from "react";
 import { useController, useFormContext } from "react-hook-form";
-import { useIntl } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { RuleInputWrapper } from "../RuleInputWrapper/RuleInputWrapper";
 import { initialDiscountConditionType } from "./initialDiscountConditionType";
@@ -118,7 +118,14 @@ export const RuleConditionRow = ({
           onChange={valuesField.onChange}
           onBlur={valuesField.onBlur}
           disabled={disabled}
-        />
+        >
+          <Multiselect.NoOptions size="small" padding={1}>
+            <FormattedMessage
+              defaultMessage="No options to select"
+              id="xTyg+p"
+            />
+          </Multiselect.NoOptions>
+        </Multiselect>
       </RuleInputWrapper>
 
       <Button variant="tertiary" icon={<RemoveIcon />} onClick={onRemove} />
diff --git a/src/discounts/models/Condition.test.ts b/src/discounts/models/Condition.test.ts
index 60bc6cef35d..9ff66e96edd 100644
--- a/src/discounts/models/Condition.test.ts
+++ b/src/discounts/models/Condition.test.ts
@@ -31,4 +31,10 @@ describe("Condition model", () => {
       },
     });
   });
+
+  it("should return undefined when transforming domian object to API and values array is empty", () => {
+    const condition = new Condition("product", "is", []);
+
+    expect(condition.toAPI()).toBeUndefined();
+  });
 });
diff --git a/src/discounts/models/Condition.ts b/src/discounts/models/Condition.ts
index d39a2cc6a75..6903cfd014e 100644
--- a/src/discounts/models/Condition.ts
+++ b/src/discounts/models/Condition.ts
@@ -11,7 +11,7 @@ export class Condition {
   ) {}
 
   public toAPI(): CataloguePredicateInput | undefined {
-    if (!this.type) {
+    if (!this.type || !this.values.length) {
       return undefined;
     }