From 8703c8d3c439fa6d203d0b2f28360a407a7ba798 Mon Sep 17 00:00:00 2001
From: Dawid Tarasiuk <tarasiukdawid@gmail.com>
Date: Tue, 22 Jun 2021 10:00:00 +0200
Subject: [PATCH] Fix label names in reference attributes (#1184)

* Fix label names in reference attributes

* Update changelog
---
 CHANGELOG.md                 |  1 +
 src/attributes/utils/data.ts | 20 +++++++++++++++++++-
 src/pages/utils/data.ts      |  7 +++++--
 src/products/utils/data.ts   |  9 ++++++---
 4 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5f6cd713..d4b4e176c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix attribute values input display - #1156 by @orzechdev
 - Fix product type translations - #1163 by @orzechdev
 - Support staff only voucher - #1174 by @orzechdev
+- Fix label names in reference attributes - #1184 by @orzechdev
 
 # 2.11.1
 
diff --git a/src/attributes/utils/data.ts b/src/attributes/utils/data.ts
index 8a2b1bce5..277ad51bf 100644
--- a/src/attributes/utils/data.ts
+++ b/src/attributes/utils/data.ts
@@ -16,7 +16,11 @@ import {
   AttributeInputTypeEnum,
   AttributeValueInput
 } from "@saleor/types/globalTypes";
-import { mapNodeToChoice, mapPagesToChoices } from "@saleor/utils/maps";
+import {
+  mapEdgesToItems,
+  mapNodeToChoice,
+  mapPagesToChoices
+} from "@saleor/utils/maps";
 import { MutationFetchResult } from "react-apollo";
 
 import { AttributePageFormData } from "../components/AttributePage";
@@ -144,6 +148,20 @@ export const mergeAttributeValueDeleteErrors = (
     return errors;
   }, []);
 
+export const mergeChoicesWithValues = (
+  attribute:
+    | ProductDetails_product_attributes
+    | PageDetails_page_attributes
+    | SelectedVariantAttributeFragment
+) => {
+  const choices = mapEdgesToItems(attribute.attribute.choices);
+  const valuesToConcat = attribute.values.filter(
+    value => !choices.some(choice => choice.id === value.id)
+  );
+
+  return choices.concat(valuesToConcat);
+};
+
 export const mergeAttributeValues = (
   attributeId: string,
   attributeValues: string[],
diff --git a/src/pages/utils/data.ts b/src/pages/utils/data.ts
index b8c7c9036..659aa72e3 100644
--- a/src/pages/utils/data.ts
+++ b/src/pages/utils/data.ts
@@ -1,4 +1,7 @@
-import { getSelectedAttributeValues } from "@saleor/attributes/utils/data";
+import {
+  getSelectedAttributeValues,
+  mergeChoicesWithValues
+} from "@saleor/attributes/utils/data";
 import { AttributeInput } from "@saleor/components/Attributes";
 import { mapEdgesToItems } from "@saleor/utils/maps";
 
@@ -16,7 +19,7 @@ export function getAttributeInputFromPage(
       inputType: attribute.attribute.inputType,
       isRequired: attribute.attribute.valueRequired,
       selectedValues: attribute.values,
-      values: mapEdgesToItems(attribute.attribute.choices),
+      values: mergeChoicesWithValues(attribute),
       unit: attribute.attribute.unit
     },
     id: attribute.attribute.id,
diff --git a/src/products/utils/data.ts b/src/products/utils/data.ts
index 0d50a7dfc..7c7c0ec50 100644
--- a/src/products/utils/data.ts
+++ b/src/products/utils/data.ts
@@ -1,4 +1,7 @@
-import { getSelectedAttributeValues } from "@saleor/attributes/utils/data";
+import {
+  getSelectedAttributeValues,
+  mergeChoicesWithValues
+} from "@saleor/attributes/utils/data";
 import { ChannelData } from "@saleor/channels/utils";
 import {
   AttributeInput,
@@ -52,7 +55,7 @@ export function getAttributeInputFromProduct(
           inputType: attribute.attribute.inputType,
           isRequired: attribute.attribute.valueRequired,
           selectedValues: attribute.values,
-          values: mapEdgesToItems(attribute.attribute.choices),
+          values: mergeChoicesWithValues(attribute),
           unit: attribute.attribute.unit
         },
         id: attribute.attribute.id,
@@ -109,7 +112,7 @@ export function getAttributeInputFromSelectedAttributes(
       inputType: attribute.attribute.inputType,
       isRequired: attribute.attribute.valueRequired,
       selectedValues: attribute.values,
-      values: mapEdgesToItems(attribute.attribute.choices),
+      values: mergeChoicesWithValues(attribute),
       unit: attribute.attribute.unit,
       variantAttributeScope
     },