oto display order info in confirmation

Author: Jan Polak

app/code/Magento/OneTouchOrdering/Controller/Button/Available.php

@@ -65,14 +65,15 @@ public function execute()
         }
         $customer = $this->customerSession->getCustomer();
         $available = $this->oneTouchOrdering->isAvailableForCustomer($customer);
-        $resultData['available'] = $available;
-        $resultData['cards'] = $this->customerCardsFormatter->getFormattedCards($customer);
-        if ($this->oneTouchOrderingConfig->isSelectAddressEnabled()) {
-            $resultData += [
-                'addresses' => $this->customerAddressesFormatter->getFormattedAddresses($customer),
-                'defaultAddress' => $customer->getDefaultShippingAddress()->getId()
-            ];
-        }
+        $resultData = [
+            'available' => $available,
+            'cards' => $this->customerCardsFormatter->getFormattedCards($customer),
+            'addresses' => $this->customerAddressesFormatter->getFormattedAddresses($customer),
+            'defaultShipping' => $customer->getDefaultShippingAddress()->getId(),
+            'defaultBilling' => $customer->getDefaultBillingAddress()->getId(),
+            'selectAddressAvailable' => $this->oneTouchOrderingConfig->isSelectAddressEnabled()
+        ];
+
         $result->setData($resultData);
 
         return $result;

app/code/Magento/OneTouchOrdering/view/frontend/web/js/view/one-touch-order.js

@@ -8,6 +8,8 @@ define(
         'jquery',
         'Magento_Customer/js/customer-data',
         'mage/url',
+        'mage/template',
+        'underscore',
         'jquery/ui',
         'mage/translate'
     ], function (
@@ -16,12 +18,16 @@ define(
         confirm,
         $,
         customerData,
-        urlBuilder
+        urlBuilder,
+        mageTemplate,
+        _
     ) {
         'use strict';
 
         return Component.extend({
             showButton: ko.observable(false),
+            currentCard: ko.observable(null),
+            currentShipping: ko.observable(null),
             defaults: {
                 template: 'Magento_OneTouchOrdering/one-touch-order',
                 buttonText: $.mage.__('One Touch Ordering')
@@ -31,7 +37,16 @@ define(
                 formSelector: '#product_addtocart_form',
                 addresses: ko.observable([]),
                 cards: ko.observable([]),
-                defaultAddress: ko.observable(0)
+                selectAddressAvailable: ko.observable(false),
+                defaultBilling: ko.observable(0),
+                defaultShipping: ko.observable(0),
+                confirmTemplate: '<p class="message"><%- data.message %></p>' +
+                '<strong>' + $.mage.__('Shipping Address') + ':</strong>' +
+                '<p><%- data.shippingAddress %></p>' +
+                '<strong>' + $.mage.__('Billing Address') + ':</strong>' +
+                '<p><%- data.billingAddress %></p>' +
+                '<strong>' + $.mage.__('Credit Card') + ':</strong>\n' +
+                '<p><%- data.creditCard %></p>'
             },
 
             /** @inheritdoc */
@@ -42,32 +57,61 @@ define(
                 $.get(urlBuilder.build('onetouchorder/button/available')).done(function (data) {
                     if (typeof data.available !== 'undefined') {
                         self.showButton(data.available);
-                    }
-
-                    if (typeof data.addresses !== 'undefined' && typeof data.defaultAddress !== 'undefined') {
-                        self.options.addresses(data.addresses);
-                        self.options.defaultAddress(data.defaultAddress);
-                    }
-
-                    if (typeof data.cards !== 'undefined') {
                         self.options.cards(data.cards);
+                        self.currentCard(_.first(data.cards)['card']);
+                        self.options.addresses(data.addresses);
+                        self.options.defaultShipping(data.defaultShipping);
+                        self.options.selectAddressAvailable(data.selectAddressAvailable);
+                        self.options.defaultBilling(
+                            _.find(data.addresses, function(obj) { return obj.id === data.defaultBilling})['address']
+                        );
+                        self.currentShipping(
+                            _.find(data.addresses, function(obj) { return obj.id === data.defaultShipping})['address']
+                        );
                     }
                 });
             },
 
+            /**
+             * Change shipping method
+             */
+            changeShipping: function (object, event) {
+                this.currentShipping(
+                    _.find(this.options.addresses(), function(obj) { return obj.id === event.target.value})['address']
+                );
+            },
+
+            /**
+             * Change credit card method
+             */
+            changeCc: function (object, event) {
+                this.currentCard(
+                    _.find(this.options.cards(), function(obj) { return obj.id === event.target.value})['card']
+                );
+            },
+
             /**
              * Confirmation method
              */
             oneTouchOrder: function () {
                 var self = this,
-                    form = $(self.options.formSelector);
+                    form = $(self.options.formSelector),
+                    confirmTemplate = mageTemplate(this.options.confirmTemplate);
 
                 if (!(form.validation() && form.validation('isValid'))) {
                     return;
                 }
-
                 confirm({
-                    content: self.options.message,
+                    content: confirmTemplate(
+                        {
+                            data: {
+                                message: self.options.message,
+                                shippingAddress: self.currentShipping(),
+                                billingAddress: self.options.defaultBilling(),
+                                creditCard: self.currentCard()
+                            }
+                        }
+                    ),
                     actions: {
                         /** @inheritdoc */
                         confirm: function () {

app/code/Magento/OneTouchOrdering/view/frontend/web/template/one-touch-order.html

@@ -10,16 +10,16 @@
 <div class="field">
     <label for="address-selector"><!-- ko i18n: 'Select shipping address' --><!-- /ko -->:</label>
     <select name="customer_address" id="address-selector"
-            data-bind="options: options.addresses, optionsText: 'address', optionsValue: 'id', value: options.defaultAddress">
+            data-bind="options: options.addresses, optionsText: 'address', optionsValue: 'id', value: options.defaultShipping, event: {change: changeShipping}">
     </select>
 </div>
 <!-- /ko -->
 
-<!-- ko if: options.cards().length > 0 -->
+<!-- ko if: options.selectAddressAvailable() -->
 <div class="field">
     <label for="address-selector"><!-- ko i18n: 'Select credit card' --><!-- /ko -->:</label>
     <select name="customer_cc" id="cc-selector"
-            data-bind="options: options.cards, optionsText: 'card', optionsValue: 'id'">
+            data-bind="options: options.cards, optionsText: 'card', optionsValue: 'id', event: {change: changeCc}">
     </select>
 </div>
 <!-- /ko -->