Fix clearing area input cause error (#5297)

* Fix cannot read properly of undefined reading area * Add changeset
saleor · Dec 5, 2024 · 8807dee · 8807dee
1 parent c3e02b9
commit 8807dee
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 2 deletions.
diff --git a/.changeset/breezy-apples-impress.md b/.changeset/breezy-apples-impress.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Removing value from area input in address form no more cause error
diff --git a/src/components/AddressEdit/useAddressValidation.test.ts b/src/components/AddressEdit/useAddressValidation.test.ts
@@ -29,6 +29,7 @@ describe("useAddressValidation", () => {
     });
     expect(current.isFieldAllowed("country")).toBeFalsy();
   });
+
   it("loads validation rules when country is provided", () => {
     // Arrange
     (useAddressValidationRulesQuery as jest.Mock).mockReturnValue({
@@ -62,4 +63,79 @@ describe("useAddressValidation", () => {
     expect(current.isFieldAllowed("country")).toBeTruthy();
     expect(current.isFieldAllowed("countryArea")).toBeFalsy();
   });
+
+  it("getDisplayValue should return display value for area code when valid", () => {
+    // Arrange
+    (useAddressValidationRulesQuery as jest.Mock).mockReturnValue({
+      data: {
+        addressValidationRules: {
+          countryAreaChoices: [
+            { raw: "AL", verbose: "Alabama" },
+            { raw: "AN", verbose: "Ancona" },
+          ],
+          allowedFields: ["country"],
+        },
+      },
+      loading: false,
+    });
+
+    const {
+      result: { current },
+    } = renderHook(() => useAddressValidation("US"));
+
+    const displayValue = current.getDisplayValue("AL");
+
+    // Assert
+    expect(displayValue).toEqual("Alabama");
+  });
+
+  it("getDisplayValue should return value when area code invalid", () => {
+    // Arrange
+    (useAddressValidationRulesQuery as jest.Mock).mockReturnValue({
+      data: {
+        addressValidationRules: {
+          countryAreaChoices: [
+            { raw: "AL", verbose: "Alabama" },
+            { raw: "AN", verbose: "Ancona" },
+          ],
+          allowedFields: ["country"],
+        },
+      },
+      loading: false,
+    });
+
+    const {
+      result: { current },
+    } = renderHook(() => useAddressValidation("US"));
+
+    const displayValue = current.getDisplayValue("XX");
+
+    // Assert
+    expect(displayValue).toEqual("XX");
+  });
+
+  it("getDisplayValue should return empty string when value is null", () => {
+    // Arrange
+    (useAddressValidationRulesQuery as jest.Mock).mockReturnValue({
+      data: {
+        addressValidationRules: {
+          countryAreaChoices: [
+            { raw: "AL", verbose: "Alabama" },
+            { raw: "AN", verbose: "Ancona" },
+          ],
+          allowedFields: ["country"],
+        },
+      },
+      loading: false,
+    });
+
+    const {
+      result: { current },
+    } = renderHook(() => useAddressValidation("US"));
+
+    const displayValue = current.getDisplayValue(null);
+
+    // Assert
+    expect(displayValue).toEqual("");
+  });
 });
diff --git a/src/components/AddressEdit/useAddressValidation.ts b/src/components/AddressEdit/useAddressValidation.ts
@@ -48,11 +48,19 @@ const useAllowedFields = (data: AddressValidationRulesQuery) => {
 };
 const useDisplayValues = (areas: AreaChoices[]) => {
   const isProvinceCode = (code: string) => code.length === 2 && code.toLocaleUpperCase() === code;
-  const getDisplayValue = (value: string) => {
+  const getDisplayValue = (value: string | null | undefined) => {
+    if (!value) {
+      return "";
+    }
+
     if (isProvinceCode(value)) {
       const area = areas.find(area => area.raw === value);
 
-      return area.value;
+      if (area) {
+        return area.value;
+      }
+
+      return value;
     }
 
     return value;