Improve discount condition when no items to select and stop sending e…

…mpty 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

@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Show info text when no options to select in discount condtion, stop sending empty condtion

locale/defaultMessages.json

@@ -8743,6 +8743,9 @@
     "context": "PluginChannelConfigurationCell global title",
     "string": "Global"
   },
+  "xTyg+p": {
+    "string": "No options to select"
+  },
   "xUvWaP": {
     "context": "subtotal price",
     "string": "Subtotal"

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",

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,
+});

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,
+});

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} />

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();
+  });
 });

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;
     }