MAGETWO-58251: PayPal Best Practice to Separate Saved Tokens

- fixed async module loading
- fixed collecttions updater

Author: iivashchenko

app/code/Magento/Checkout/view/frontend/web/js/view/payment/list.js

@@ -11,8 +11,9 @@ define([
     'Magento_Checkout/js/model/payment/renderer-list',
     'uiLayout',
     'Magento_Checkout/js/model/checkout-data-resolver',
-    'mage/translate'
-], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver, $t) {
+    'mage/translate',
+    'uiRegistry'
+], function (_, ko, utils, Component, paymentMethods, rendererList, layout, checkoutDataResolver, $t, registry) {
     'use strict';
 
     return Component.extend({
@@ -23,9 +24,6 @@ define([
                 name: 'methodGroup',
                 component: 'Magento_Checkout/js/model/payment/method-group'
             },
-            modules: {
-                defaultGroup: '${ $.configDefaultGroup.name }'
-            },
             paymentGroupsList: [],
             defaultGroupTitle: $t('Select a new payment method')
         },
@@ -129,33 +127,35 @@ define([
             var isRendererForMethod = false,
                 currentGroup;
 
-            _.find(rendererList(), function (renderer) {
-
-                if (renderer.hasOwnProperty('typeComparatorCallback') &&
-                    typeof renderer.typeComparatorCallback == 'function'
-                ) {
-                    isRendererForMethod = renderer.typeComparatorCallback(renderer.type, paymentMethodData.method);
-                } else {
-                    isRendererForMethod = renderer.type === paymentMethodData.method;
-                }
-
-                if (isRendererForMethod) {
-                    currentGroup = renderer.group ? renderer.group : this.defaultGroup();
-
-                    this.collectPaymentGroups(currentGroup);
-
-                    layout([
-                        this.createComponent(
-                        {
-                            config: renderer.config,
-                            component: renderer.component,
-                            name: renderer.type,
-                            method: paymentMethodData.method,
-                            item: paymentMethodData,
-                            displayArea: currentGroup.displayArea
-                        }
-                    )]);
-                }
+            registry.get(this.configDefaultGroup.name, function (defaultGroup) {
+                _.each(rendererList(), function (renderer) {
+
+                    if (renderer.hasOwnProperty('typeComparatorCallback') &&
+                        typeof renderer.typeComparatorCallback == 'function'
+                    ) {
+                        isRendererForMethod = renderer.typeComparatorCallback(renderer.type, paymentMethodData.method);
+                    } else {
+                        isRendererForMethod = renderer.type === paymentMethodData.method;
+                    }
+
+                    if (isRendererForMethod) {
+                        currentGroup = renderer.group ? renderer.group : defaultGroup;
+
+                        this.collectPaymentGroups(currentGroup);
+
+                        layout([
+                            this.createComponent(
+                                {
+                                    config: renderer.config,
+                                    component: renderer.component,
+                                    name: renderer.type,
+                                    method: paymentMethodData.method,
+                                    item: paymentMethodData,
+                                    displayArea: currentGroup.displayArea
+                                }
+                            )]);
+                    }
+                }.bind(this));
             }.bind(this));
         },
 

app/code/Magento/Ui/view/base/web/js/lib/core/collection.js

@@ -268,6 +268,16 @@ define([
 
             _.each(grouped, this.updateRegion, this);
 
+            _.each(this.regions, function (items) {
+                var shouldBeEmpty = items.every(function (item) {
+                    return !~_elems.indexOf(item);
+                });
+
+                if (shouldBeEmpty && items().length) {
+                    items.removeAll();
+                }
+            }, this);
+
             this.elems(_elems);
 
             return this;