MC-38114: Custom address attribute Multiselect are not correctly displayed on checkout and order page

- Fix multiple select option IDs are displayed instead of option labels on checkout page

Author: bubasuma

app/code/Magento/Checkout/view/frontend/web/js/checkout-data.js

@@ -11,8 +11,9 @@
 define([
     'jquery',
     'Magento_Customer/js/customer-data',
+    'mageUtils',
     'jquery/jquery-storageapi'
-], function ($, storage) {
+], function ($, storage, utils) {
     'use strict';
 
     var cacheKey = 'checkout-data',
@@ -88,7 +89,7 @@ define([
         setShippingAddressFromData: function (data) {
             var obj = getData();
 
-            obj.shippingAddressFromData = data;
+            obj.shippingAddressFromData = utils.filterFormData(data);
             saveData(obj);
         },
 
@@ -193,7 +194,7 @@ define([
         setBillingAddressFromData: function (data) {
             var obj = getData();
 
-            obj.billingAddressFromData = data;
+            obj.billingAddressFromData = utils.filterFormData(data);
             saveData(obj);
         },
 

app/code/Magento/Checkout/view/frontend/web/js/view/billing-address.js

@@ -245,7 +245,7 @@ function (
          * @returns {*}
          */
         getCustomAttributeLabel: function (attribute) {
-            var resultAttribute;
+            var label;
 
             if (typeof attribute === 'string') {
                 return attribute;
@@ -255,13 +255,40 @@ function (
                 return attribute.label;
             }
 
-            if (typeof this.source.get('customAttributes') !== 'undefined') {
-                resultAttribute = _.findWhere(this.source.get('customAttributes')[attribute['attribute_code']], {
-                    value: attribute.value
+            if (_.isArray(attribute.value)) {
+                label = _.map(attribute.value, function (value) {
+                    return this.getCustomAttributeOptionLabel(attribute['attribute_code'], value) || value;
+                }, this).join(', ');
+            } else {
+                label = this.getCustomAttributeOptionLabel(attribute['attribute_code'], attribute.value);
+            }
+
+            return label || attribute.value;
+        },
+
+        /**
+         * Get option label for given attribute code and option ID
+         *
+         * @param {String} attributeCode
+         * @param {String} value
+         * @returns {String|null}
+         */
+        getCustomAttributeOptionLabel: function (attributeCode, value) {
+            var option,
+                label,
+                options = this.source.get('customAttributes') || {};
+
+            if (options[attributeCode]) {
+                option = _.findWhere(options[attributeCode], {
+                    value: value
                 });
+
+                if (option) {
+                    label = option.label;
+                }
             }
 
-            return resultAttribute && resultAttribute.label || attribute.value;
+            return label;
         }
     });
 });

app/code/Magento/Checkout/view/frontend/web/js/view/shipping-address/address-renderer/default.js

@@ -55,7 +55,7 @@ define([
          * @returns {*}
          */
         getCustomAttributeLabel: function (attribute) {
-            var resultAttribute;
+            var label;
 
             if (typeof attribute === 'string') {
                 return attribute;
@@ -65,13 +65,40 @@ define([
                 return attribute.label;
             }
 
-            if (typeof this.source.get('customAttributes') !== 'undefined') {
-                resultAttribute = _.findWhere(this.source.get('customAttributes')[attribute['attribute_code']], {
-                    value: attribute.value
+            if (_.isArray(attribute.value)) {
+                label = _.map(attribute.value, function (value) {
+                    return this.getCustomAttributeOptionLabel(attribute['attribute_code'], value) || value;
+                }, this).join(', ');
+            } else {
+                label = this.getCustomAttributeOptionLabel(attribute['attribute_code'], attribute.value);
+            }
+
+            return label || attribute.value;
+        },
+
+        /**
+         * Get option label for given attribute code and option ID
+         *
+         * @param {String} attributeCode
+         * @param {String} value
+         * @returns {String|null}
+         */
+        getCustomAttributeOptionLabel: function (attributeCode, value) {
+            var option,
+                label,
+                options = this.source.get('customAttributes') || {};
+
+            if (options[attributeCode]) {
+                option = _.findWhere(options[attributeCode], {
+                    value: value
                 });
+
+                if (option) {
+                    label = option.label;
+                }
             }
 
-            return resultAttribute && resultAttribute.label || attribute.value;
+            return label;
         },
 
         /** Set selected customer shipping address  */

app/code/Magento/Checkout/view/frontend/web/js/view/shipping-information/address-renderer/default.js

@@ -32,7 +32,7 @@ define([
          * @returns {*}
          */
         getCustomAttributeLabel: function (attribute) {
-            var resultAttribute;
+            var label;
 
             if (typeof attribute === 'string') {
                 return attribute;
@@ -42,13 +42,40 @@ define([
                 return attribute.label;
             }
 
-            if (typeof this.source.get('customAttributes') !== 'undefined') {
-                resultAttribute = _.findWhere(this.source.get('customAttributes')[attribute['attribute_code']], {
-                    value: attribute.value
+            if (_.isArray(attribute.value)) {
+                label = _.map(attribute.value, function (value) {
+                    return this.getCustomAttributeOptionLabel(attribute['attribute_code'], value) || value;
+                }, this).join(', ');
+            } else {
+                label = this.getCustomAttributeOptionLabel(attribute['attribute_code'], attribute.value);
+            }
+
+            return label || attribute.value;
+        },
+
+        /**
+         * Get option label for given attribute code and option ID
+         *
+         * @param {String} attributeCode
+         * @param {String} value
+         * @returns {String|null}
+         */
+        getCustomAttributeOptionLabel: function (attributeCode, value) {
+            var option,
+                label,
+                options = this.source.get('customAttributes') || {};
+
+            if (options[attributeCode]) {
+                option = _.findWhere(options[attributeCode], {
+                    value: value
                 });
+
+                if (option) {
+                    label = option.label;
+                }
             }
 
-            return resultAttribute && resultAttribute.label || attribute.value;
+            return label;
         }
     });
 });