714: Fatal error: Uncaught TypeError: during the saving of configurable product

app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/components/dynamic-rows-configurable.js

@@ -349,8 +349,6 @@ define([
             );
 
             _.each(data, function (row) {
-                var attributesText;
-
                 if (row.productId) {
                     index = _.indexOf(productIdsToDelete, row.productId);
 
@@ -364,36 +362,8 @@ define([
                         );
                     }
                 }
+                product = this.getProductData(row);
 
-                attributesText = '';
-                _.each(row.options, function (attribute) {
-                    if (attributesText) {
-                        attributesText += ', ';
-                    }
-                    attributesText += attribute['attribute_label'] + ': ' + attribute.label;
-                }, this);
-
-                product = {
-                    'id': row.productId,
-                    'product_link': row.productUrl,
-                    'name': row.name,
-                    'sku': row.sku,
-                    'status': row.status,
-                    'price': row.price,
-                    'price_currency': row.priceCurrency,
-                    'price_string': row.priceCurrency + row.price,
-                    'weight': row.weight,
-                    'qty': row.quantity,
-                    'variationKey': row.variationKey,
-                    'configurable_attribute': row.attribute,
-                    'thumbnail_image': row.images.preview,
-                    'media_gallery': row['media_gallery'],
-                    'swatch_image': row['swatch_image'],
-                    'small_image': row['small_image'],
-                    image: row.image,
-                    'thumbnail': row.thumbnail,
-                    'attributes': attributesText
-                };
                 product[this.changedFlag] = true;
                 product[this.canEditField] = row.editable;
                 product[this.newProductField] = row.newProduct;
@@ -412,6 +382,47 @@ define([
             this.unionInsertData(tmpArray);
         },
 
+        /**
+         *
+         * @param {Object} row
+         * @returns {Object}
+         */
+        getProductData: function (row) {
+            var product,
+                attributesText = '';
+
+            _.each(row.options, function (attribute) {
+                if (attributesText) {
+                    attributesText += ', ';
+                }
+                attributesText += attribute['attribute_label'] + ': ' + attribute.label;
+            }, this);
+
+            product = {
+                'id': row.productId,
+                'product_link': row.productUrl,
+                'name': row.name,
+                'sku': row.sku,
+                'status': row.status,
+                'price': row.price,
+                'price_currency': row.priceCurrency,
+                'price_string': row.priceCurrency + row.price,
+                'weight': row.weight,
+                'qty': row.quantity,
+                'variationKey': row.variationKey,
+                'configurable_attribute': row.attribute,
+                'thumbnail_image': row.images.preview,
+                'media_gallery': row['media_gallery'],
+                'swatch_image': row['swatch_image'],
+                'small_image': row['small_image'],
+                image: row.image,
+                'thumbnail': row.thumbnail,
+                'attributes': attributesText
+            };
+
+            return product;
+        },
+
         /**
          * Remove array items matching condition.
          *

app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/bulk.js

@@ -78,10 +78,12 @@ define([
              * Make options sections.
              */
             this.makeOptionSections = function () {
-                this.images = new self.makeImages(null);
-                this.price = self.price;
-                this.quantity = self.quantity;
-            };
+                return {
+                    images: new this.makeImages(null),
+                    price: this.price,
+                    quantity: this.quantity
+                };
+            }.bind(this);
 
             /**
              * @param {Object} images
@@ -152,7 +154,7 @@ define([
             //fill option section data
             this.attributes.each(function (attribute) {
                 attribute.chosen.each(function (option) {
-                    option.sections = ko.observable(new this.makeOptionSections());
+                    option.sections = ko.observable(this.makeOptionSections());
                 }, this);
             }, this);
             //reset section.attribute

app/code/Magento/ConfigurableProduct/view/adminhtml/web/js/variations/steps/summary.js

@@ -53,7 +53,8 @@ define([
             attributes: [],
             attributesName: [$.mage.__('Images'), $.mage.__('SKU'), $.mage.__('Quantity'), $.mage.__('Price')],
             sections: [],
-            gridTemplate: 'Magento_ConfigurableProduct/variations/steps/summary-grid'
+            gridTemplate: 'Magento_ConfigurableProduct/variations/steps/summary-grid',
+            quantityFieldName: 'quantity'
         },
 
         /** @inheritdoc */
@@ -112,12 +113,12 @@ define([
                     return memo + '-' + option.label;
                 }, '');
                 name = productName + _.reduce(options, function (memo, option) {
-                        return memo + '-' + option.label;
-                    }, '');
-                quantity = getSectionValue('quantity', options);
+                    return memo + '-' + option.label;
+                }, '');
+                quantity = getSectionValue(this.quantityFieldName, options);
 
                 if (!quantity && productId) {
-                    quantity = product.quantity;
+                    quantity = product[this.quantityFieldName];
                 }
                 price = getSectionValue('price', options);
 
@@ -133,12 +134,12 @@ define([
                     images: images,
                     sku: sku,
                     name: name,
-                    quantity: quantity,
                     price: price,
                     productId: productId,
                     weight: productWeight,
                     editable: true
                 };
+                variation[this.quantityFieldName] = quantity;
 
                 if (productId) {
                     variation.sku = product.sku;
@@ -163,7 +164,6 @@ define([
             this.variationsExisting = gridExisting;
             this.variationsNew = gridNew;
             this.variationsDeleted = gridDeleted;
-
         },
 
         /**
@@ -195,7 +195,7 @@ define([
                 images: []
             }, variation.images));
             row.push(variation.sku);
-            row.push(variation.quantity);
+            row.push(variation[this.quantityFieldName]);
             _.each(variation.options, function (option) {
                 row.push(option.label);
             });

app/code/Magento/InventoryConfigurableProduct/Model/GetQuantityInformationPerSource.php

@@ -62,7 +62,7 @@ public function execute(string $sku): array
 
             $sourceItemsInformation[] = [
                 SourceItemInterface::SOURCE_CODE => $sourceItem->getSourceCode(),
-                SourceItemInterface::QUANTITY => $sourceItem->getQuantity(),
+                'quantity_per_source' => $sourceItem->getQuantity(),
                 'source' => $source->getName(),
             ];
         }

app/code/Magento/InventoryConfigurableProduct/Observer/ProcessSourceItemsObserver.php

@@ -51,13 +51,13 @@ public function execute(EventObserver $observer)
         $controller = $observer->getEvent()->getController();
         $configurableMatrix = $controller->getRequest()->getParam('configurable-matrix-serialized', '');
 
-        if ($configurableMatrix != "") {
+        if ($configurableMatrix != '') {
             $productsData = json_decode($configurableMatrix, true);
             foreach ($productsData as $productData) {
-                $sku = $productData[ProductInterface::SKU];
-                $sourceItems = $productData['qty_per_source'] ?? [];
-
-                $this->processSourceItems($sourceItems, $sku);
+                if (isset($productData['quantity_per_source']) && is_array($productData['quantity_per_source'])) {
+                    $sku = $productData[ProductInterface::SKU];
+                    $this->processSourceItems($productData['quantity_per_source'], $sku);
+                }
             }
         }
     }
@@ -72,8 +72,9 @@ private function processSourceItems(array $sourceItems, string $productSku)
     {
         foreach ($sourceItems as $key => $sourceItem) {
             if (!isset($sourceItem[SourceItemInterface::STATUS])) {
-                $sourceItems[$key][SourceItemInterface::STATUS] =
-                    $sourceItems[$key][SourceItemInterface::QUANTITY] > 0 ? 1 : 0;
+                $sourceItems[$key][SourceItemInterface::QUANTITY] = $sourceItems[$key]['quantity_per_source'];
+                $sourceItems[$key][SourceItemInterface::STATUS]
+                    = $sourceItems[$key][SourceItemInterface::QUANTITY] > 0 ? 1 : 0;
             }
         }
 

app/code/Magento/InventoryConfigurableProduct/Ui/DataProvider/Product/Form/Modifier/InventoryConfigurablePanel.php

@@ -60,9 +60,10 @@ public function modifyData(array $data)
 
             if (isset($data[$productId][ConfigurablePanel::CONFIGURABLE_MATRIX])) {
                 foreach ($data[$productId][ConfigurablePanel::CONFIGURABLE_MATRIX] as $key => $productArray) {
-                    $qtyPerSource =
-                        $this->getQuantityInformationPerSource->execute($productArray[ProductInterface::SKU]);
-                    $data[$productId][ConfigurablePanel::CONFIGURABLE_MATRIX][$key]['qty_per_source'] = $qtyPerSource;
+                    $quantityPerSource
+                        = $this->getQuantityInformationPerSource->execute($productArray[ProductInterface::SKU]);
+                    $data[$productId][ConfigurablePanel::CONFIGURABLE_MATRIX][$key]['quantity_per_source']
+                        = $quantityPerSource;
                 }
             }
         }
@@ -82,18 +83,14 @@ private function getQuantityContainerConfig(): array
                 'data' => [
                     'config' => [
                         'componentType' => 'text',
-                        'component' => 'Magento_InventoryConfigurableProduct/js/form/element/quantity',
+                        'component' => 'Magento_InventoryConfigurableProduct/js/form/element/quantity-per-source',
                         'template' => 'ui/form/field',
-                        'dataScope' => 'qty_per_source',
+                        'dataScope' => 'quantity_per_source',
                         'label' => __('Quantity Per Source'),
                         'formElement' => Form\Element\Input::NAME,
-                        'imports' => [
-                            'visible' => '!${$.provider}:${$.parentScope}.canEdit'
-                        ],
-                        'visibleIfCanEdit' => true,
-                    ]
-                ]
-            ]
+                    ],
+                ],
+            ],
         ];
     }
 
@@ -110,6 +107,10 @@ public function modifyMeta(array $meta)
             unset($meta[ConfigurablePanel::GROUP_CONFIGURABLE]['children']
                 [ConfigurablePanel::CONFIGURABLE_MATRIX]['children']
                 ['record']['children']['quantity_container']);
+
+            $meta[ConfigurablePanel::GROUP_CONFIGURABLE]['children']
+            [ConfigurablePanel::CONFIGURABLE_MATRIX]['arguments']['data']['config']['component']
+                = 'Magento_InventoryConfigurableProduct/js/components/dynamic-rows-configurable';
         }
 
         return $meta;

app/code/Magento/InventoryConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/bulk.phtml

@@ -705,10 +705,10 @@
         </div>
     </div>
 
-    <div data-bind="with: sections().quantity" class="steps-wizard-section">
+    <div data-bind="with: sections().quantityPerSource" class="steps-wizard-section">
         <div data-role="section">
             <div class="steps-wizard-section-title">
-                <span><?= $block->escapeHtml(__('Quantity')) ?></span>
+                <span><?= $block->escapeHtml(__('Quantity per source')) ?></span>
             </div>
             <ul class="steps-wizard-section-list">
                 <li>

app/code/Magento/InventoryConfigurableProduct/view/adminhtml/templates/catalog/product/edit/attribute/steps/summary.phtml

@@ -52,7 +52,7 @@
             "Magento_Ui/js/core/app": {
                 "components": {
                     "<?= /* @noEscape */  $block->getComponentName() ?>": {
-                        "component": "Magento_ConfigurableProduct/js/variations/steps/summary",
+                        "component": "Magento_InventoryConfigurableProduct/js/variations/steps/summary",
                         "appendTo": "<?= /* @noEscape */  $block->getParentComponentName() ?>",
                         "gridTemplate": "Magento_InventoryConfigurableProduct/variations/steps/summary-grid",
                         "variationsComponent": "<?= /* @noEscape */ $block->getData('config/form') ?>.configurableVariations",

app/code/Magento/InventoryConfigurableProduct/view/adminhtml/ui_component/configurable_quantity_templates.xml

@@ -97,9 +97,9 @@
                     <elementTmpl>ui/dynamic-rows/cells/text</elementTmpl>
                 </settings>
             </field>
-            <field name="quantity" formElement="input">
+            <field name="quantity_per_source" formElement="input">
                 <settings>
-                    <label translate="true">Quantity</label>
+                    <label translate="true">Quantity Per Source</label>
                     <dataType>text</dataType>
                     <validation>
                         <rule name="required-entry" xsi:type="boolean">true</rule>

app/code/Magento/InventoryConfigurableProduct/view/adminhtml/web/js/components/dynamic-rows-configurable.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'Magento_ConfigurableProduct/js/components/dynamic-rows-configurable'
+], function (dynamicRowsConfigurable) {
+    'use strict';
+
+    return dynamicRowsConfigurable.extend({
+        defaults: {
+            quantityFieldName: 'quantity_per_source'
+        },
+
+        /** @inheritdoc */
+        getProductData: function (row) {
+            var product = this._super(row);
+
+            product[this.quantityFieldName] = row.quantityPerSource;
+
+            return product;
+        }
+    });
+});