From a08d034e75792359a80b9a8187c5b9870e67c2fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Chy=C5=82a?= <chyla1988@gmail.com>
Date: Thu, 29 Jun 2023 10:57:48 +0200
Subject: [PATCH] Fix unable to save attribute value (#3814)

---
 .changeset/five-plums-tell.md                 |  5 ++
 .../AttributeValueEditDialog.tsx              | 14 ++---
 .../AttributeValueEditDialog/utils.test.ts    | 54 +++++++++++++++++++
 .../AttributeValueEditDialog/utils.ts         | 20 +++++++
 4 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/five-plums-tell.md
 create mode 100644 src/attributes/components/AttributeValueEditDialog/utils.test.ts
 create mode 100644 src/attributes/components/AttributeValueEditDialog/utils.ts

diff --git a/.changeset/five-plums-tell.md b/.changeset/five-plums-tell.md
new file mode 100644
index 000000000..f4e533e5f
--- /dev/null
+++ b/.changeset/five-plums-tell.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Fix unability to save attribute value when the attribute value is invalid (attribute value should be only send when attribute input type is swatch)
diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
index ef5e1b84e..9dc41c067 100644
--- a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
+++ b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
@@ -24,6 +24,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 
 import { AttributeValueEditDialogFormData } from "../../utils/data";
 import AttributeSwatchField from "../AttributeSwatchField";
+import { getAttributeValueFields } from "./utils";
 
 export interface AttributeValueEditDialogProps {
   attributeValue: AttributeValueEditDialogFormData | null;
@@ -47,12 +48,12 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
   inputType,
 }) => {
   const intl = useIntl();
-  const attributeValueFields = attributeValue?.fileUrl
-    ? {
-        fileUrl: attributeValue?.fileUrl,
-        contentType: attributeValue?.contentType,
-      }
-    : { value: attributeValue?.value ?? "" };
+
+  const isSwatch = inputType === AttributeInputTypeEnum.SWATCH;
+  const attributeValueFields = getAttributeValueFields(
+    attributeValue,
+    isSwatch,
+  );
 
   const initialForm: AttributeValueEditDialogFormData = {
     name: attributeValue?.name ?? "",
@@ -60,7 +61,6 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
   };
   const errors = useModalDialogErrors(apiErrors, open);
   const formErrors = getFormErrors(["name"], errors);
-  const isSwatch = inputType === AttributeInputTypeEnum.SWATCH;
 
   return (
     <Dialog onClose={onClose} open={open} fullWidth maxWidth="sm">
diff --git a/src/attributes/components/AttributeValueEditDialog/utils.test.ts b/src/attributes/components/AttributeValueEditDialog/utils.test.ts
new file mode 100644
index 000000000..b8e1bd106
--- /dev/null
+++ b/src/attributes/components/AttributeValueEditDialog/utils.test.ts
@@ -0,0 +1,54 @@
+import { AttributeValueEditDialogFormData } from "@dashboard/attributes/utils/data";
+
+import { getAttributeValueFields } from "./utils";
+
+describe("getAttributeValueFields", () => {
+  it("should return fileUrl and contentType if attributeValue has fileUrl", () => {
+    // Arrange
+    const attributeValue = {
+      fileUrl: "fileUrl",
+      contentType: "contentType",
+      value: "value",
+    } as AttributeValueEditDialogFormData;
+    const isSwatch = true;
+
+    // Act
+    const result = getAttributeValueFields(attributeValue, isSwatch);
+
+    // Assert
+    expect(result).toEqual({
+      fileUrl: "fileUrl",
+      contentType: "contentType",
+    });
+  });
+
+  it("should return value when attributeValue has value and is swatch type", () => {
+    // Arrange
+    const attributeValue = {
+      value: "value",
+    } as AttributeValueEditDialogFormData;
+    const isSwatch = true;
+
+    // Act
+    const result = getAttributeValueFields(attributeValue, isSwatch);
+
+    // Assert
+    expect(result).toEqual({
+      value: "value",
+    });
+  });
+
+  it("should return empty object when attributeValue has value but type is not swatch", () => {
+    // Arrange
+    const attributeValue = {
+      value: "value",
+    } as AttributeValueEditDialogFormData;
+    const isSwatch = false;
+
+    // Act
+    const result = getAttributeValueFields(attributeValue, isSwatch);
+
+    // Assert
+    expect(result).toEqual({});
+  });
+});
diff --git a/src/attributes/components/AttributeValueEditDialog/utils.ts b/src/attributes/components/AttributeValueEditDialog/utils.ts
new file mode 100644
index 000000000..2f332c049
--- /dev/null
+++ b/src/attributes/components/AttributeValueEditDialog/utils.ts
@@ -0,0 +1,20 @@
+import { AttributeValueEditDialogFormData } from "@dashboard/attributes/utils/data";
+
+export const getAttributeValueFields = (
+  attributeValue: AttributeValueEditDialogFormData | null,
+  isSwatch: boolean,
+): Partial<Omit<AttributeValueEditDialogFormData, "name">> => {
+  if (attributeValue?.fileUrl) {
+    return {
+      fileUrl: attributeValue?.fileUrl,
+      contentType: attributeValue?.contentType,
+    };
+  }
+
+  // Value should be only use when input type is swatch
+  if (attributeValue?.value && isSwatch) {
+    return { value: attributeValue?.value ?? "" };
+  }
+
+  return {};
+};