[ECP-9491] Handle single card payments for multishipping orders

view/frontend/web/js/view/payment/method-renderer/adyen-cc-method.js

@@ -51,6 +51,7 @@ define(
                 quote.billingAddress() != null),
             comboCardOption: ko.observable('credit'),
             checkoutComponent: null,
+            cardComponent: null,
 
             defaults: {
                 template: 'Adyen_Payment/payment/cc-form',
@@ -545,6 +546,9 @@ define(
                 }
                 return quote.totals().grand_total;
             },
+            getPaymentMethodComponent: function () {
+                return this.cardComponent;
+            }
         });
     }
 );

view/frontend/web/js/view/payment/method-renderer/multishipping/adyen-cc-method.js

@@ -12,15 +12,18 @@
 define([
     'jquery',
     'ko',
-    'Adyen_Payment/js/view/payment/method-renderer/adyen-cc-method'
+    'Adyen_Payment/js/view/payment/method-renderer/adyen-cc-method',
+    'Magento_Checkout/js/model/full-screen-loader'
 ], function (
     $,
     ko,
-    Component
+    Component,
+    fullScreenLoader
 ) {
     'use strict';
     return Component.extend({
         paymentMethodReady: ko.observable(false),
+        isTemplateRendered: ko.observable(false),
         defaults: {
             template: 'Adyen_Payment/payment/multishipping/cc-form'
         },
@@ -29,6 +32,47 @@ define([
             this.paymentMethodReady(paymentMethodsResponse);
         },
 
+        selectPaymentMethod: function () {
+            fullScreenLoader.startLoader();
+            let self = this;
+
+            this.isTemplateRendered.subscribe(function (response) {
+                self.initializeMultishippingPaymentMethod();
+            })
+            if (this.isTemplateRendered()) {
+                this.initializeMultishippingPaymentMethod();
+            }
+
+            return true;
+        },
+
+        // This will return a promise once the payment component is created and mounted.
+        createMultishippingCheckoutComponent: async function () {
+            await this.createCheckoutComponent();
+            return true;
+        },
+
+        initializeMultishippingPaymentMethod: function () {
+            let self = this;
+
+            this.createMultishippingCheckoutComponent().then(function (status) {
+                if (status) {
+                    let paymentComponent = self.getPaymentMethodComponent();
+
+                    // Remove previously assigned event listeners
+                    $("#payment-continue").off();
+                    // Assign event listener for component validation
+                    $("#payment-continue").on("click", function () {
+                        paymentComponent.showValidation();
+                    });
+                } else {
+                    console.warn('Payment component could not be generated!');
+                }
+
+                fullScreenLoader.stopLoader();
+            });
+        },
+
         buildComponentConfiguration: function () {
             let self = this;
             let baseComponentConfiguration = this._super();
@@ -39,7 +83,12 @@ define([
                 self.storeCc = !!state.data.storePaymentMethod;
             };
 
-            return baseComponentConfiguration
+            return baseComponentConfiguration;
+        },
+
+        // Observable is set to true after div element in `cc-form.html` template is rendered
+        setIsTemplateRendered: function () {
+            this.isTemplateRendered(true);
         }
     });
 });

view/frontend/web/template/payment/multishipping/cc-form.html

@@ -1,4 +1,6 @@
 <div class="field number cardContainerField">
-    <div class="checkout-component-dock" data-bind="attr: { id: 'cardContainer'}">
+    <div class="checkout-component-dock"
+         data-bind="attr: { id: 'cardContainer'}"
+         afterRender="setIsTemplateRendered()">
     </div>
 </div>