|
1 | | -/*jshint browser:true*/ |
2 | | -/*global define*/ |
3 | | -define( |
4 | | - [ |
5 | | - 'uiComponent', |
6 | | - 'ko', |
7 | | - 'Magento_Ui/js/modal/confirm', |
8 | | - 'jquery', |
9 | | - 'Magento_Customer/js/customer-data', |
10 | | - 'mage/url', |
11 | | - 'mage/template', |
12 | | - 'jquery/ui', |
13 | | - 'mage/translate' |
14 | | - ], function ( |
15 | | - Component, |
16 | | - ko, |
17 | | - confirm, |
18 | | - $, |
19 | | - customerData, |
20 | | - urlBuilder, |
21 | | - mageTemplate |
22 | | - ) { |
23 | | - 'use strict'; |
| 1 | +/** |
| 2 | + * Copyright © Magento, Inc. All rights reserved. |
| 3 | + * See COPYING.txt for license details. |
| 4 | + */ |
| 5 | +define([ |
| 6 | + 'ko', |
| 7 | + 'jquery', |
| 8 | + 'underscore', |
| 9 | + 'uiComponent', |
| 10 | + 'Magento_Ui/js/modal/confirm', |
| 11 | + 'Magento_Customer/js/customer-data', |
| 12 | + 'mage/url', |
| 13 | + 'mage/template', |
| 14 | + 'mage/translate', |
| 15 | + 'text!Magento_InstantPurchase/template/confirmation.html', |
| 16 | + 'mage/validation' |
| 17 | +], function (ko, $, _, Component, confirm, customerData, urlBuilder, mageTemplate, $t, confirmationTemplate) { |
| 18 | + 'use strict'; |
24 | 19 |
|
25 | | - return Component.extend({ |
26 | | - showButton: ko.observable(false), |
27 | | - paymentToken: ko.observable(null), |
28 | | - shippingAddress: ko.observable(null), |
29 | | - billingAddress: ko.observable(null), |
30 | | - shippingMethod: ko.observable(null), |
31 | | - defaults: { |
32 | | - template: 'Magento_InstantPurchase/instant-purchase', |
33 | | - buttonText: $.mage.__('Instant Purchase'), |
34 | | - purchaseUrl: urlBuilder.build('instantpurchase/button/placeOrder') |
35 | | - }, |
36 | | - options: { |
37 | | - message: $.mage.__('Are you sure you want to place order and pay?'), |
38 | | - formSelector: '#product_addtocart_form', |
39 | | - confirmTemplate: '<p class="message"><%- data.message %></p>' + |
40 | | - '<strong>' + $.mage.__('Shipping Address') + ':</strong>' + |
41 | | - '<p><%- data.shippingAddress().summary %></p>' + |
42 | | - '<strong>' + $.mage.__('Billing Address') + ':</strong>' + |
43 | | - '<p><%- data.billingAddress().summary %></p>' + |
44 | | - '<strong>' + $.mage.__('Payment Method') + ':</strong>\n' + |
45 | | - '<p><%- data.paymentToken().summary %></p>' + |
46 | | - '<strong>' + $.mage.__('Shipping Method') + ':</strong>\n' + |
47 | | - '<p><%- data.shippingMethod().summary %></p>' |
48 | | - }, |
| 20 | + return Component.extend({ |
| 21 | + defaults: { |
| 22 | + template: 'Magento_InstantPurchase/instant-purchase', |
| 23 | + buttonText: $t('Instant Purchase'), |
| 24 | + purchaseUrl: urlBuilder.build('instantpurchase/button/placeOrder'), |
| 25 | + showButton: false, |
| 26 | + paymentToken: null, |
| 27 | + shippingAddress: null, |
| 28 | + billingAddress: null, |
| 29 | + shippingMethod: null, |
| 30 | + productFormSelector: '#product_addtocart_form', |
| 31 | + confirmationTitle: $t('Instant Purchase Confirmation'), |
| 32 | + confirmationData: { |
| 33 | + message: $t('Are you sure you want to place order and pay?'), |
| 34 | + shippingAddressTitle: $t('Shipping Address'), |
| 35 | + billingAddressTitle: $t('Billing Address'), |
| 36 | + paymentMethodTitle: $t('Payment Method'), |
| 37 | + shippingMethodTitle: $t('Shipping Address') |
| 38 | + } |
| 39 | + }, |
49 | 40 |
|
50 | | - /** @inheritdoc */ |
51 | | - initialize: function () { |
52 | | - var self = this, |
53 | | - data = customerData.get('instant-purchase')(); |
| 41 | + /** @inheritdoc */ |
| 42 | + initialize: function () { |
| 43 | + var instantPurchase = customerData.get('instant-purchase'); |
54 | 44 |
|
55 | | - this._super(); |
| 45 | + this._super(); |
56 | 46 |
|
57 | | - self.showButton(data.available); |
58 | | - self.paymentToken(data.paymentToken); |
59 | | - self.shippingAddress(data.shippingAddress); |
60 | | - self.billingAddress(data.billingAddress); |
61 | | - self.shippingMethod(data.shippingMethod); |
62 | | - }, |
| 47 | + this.setPurchaseData(instantPurchase()); |
| 48 | + instantPurchase.subscribe(this.setPurchaseData, this); |
| 49 | + }, |
63 | 50 |
|
64 | | - /** |
65 | | - * Confirmation method |
66 | | - */ |
67 | | - instantPurchase: function () { |
68 | | - var self = this, |
69 | | - form = $(self.options.formSelector), |
70 | | - confirmTemplate = mageTemplate(this.options.confirmTemplate); |
| 51 | + /** @inheritdoc */ |
| 52 | + initObservable: function () { |
| 53 | + this._super() |
| 54 | + .observe('showButton paymentToken shippingAddress billingAddress shippingMethod'); |
71 | 55 |
|
72 | | - if (!(form.validation() && form.validation('isValid'))) { |
73 | | - return; |
74 | | - } |
| 56 | + return this; |
| 57 | + }, |
75 | 58 |
|
76 | | - confirm({ |
77 | | - title: $.mage.__('Instant Purchase Confirmation'), |
78 | | - content: confirmTemplate( |
79 | | - { |
80 | | - data: { |
81 | | - message: self.options.message, |
82 | | - paymentToken: self.paymentToken, |
83 | | - shippingAddress: self.shippingAddress, |
84 | | - billingAddress: self.billingAddress, |
85 | | - shippingMethod: self.shippingMethod |
86 | | - } |
87 | | - } |
88 | | - ), |
89 | | - actions: { |
90 | | - /** @inheritdoc */ |
91 | | - confirm: function () { |
92 | | - $.ajax({ |
93 | | - url: self.purchaseUrl, |
94 | | - data: form.serialize(), |
95 | | - type: 'post', |
96 | | - dataType: 'json', |
| 59 | + /** |
| 60 | + * Set data from customerData. |
| 61 | + * |
| 62 | + * @param {Object} data |
| 63 | + */ |
| 64 | + setPurchaseData: function (data) { |
| 65 | + this.showButton(data.available); |
| 66 | + this.paymentToken(data.paymentToken); |
| 67 | + this.shippingAddress(data.shippingAddress); |
| 68 | + this.billingAddress(data.billingAddress); |
| 69 | + this.shippingMethod(data.shippingMethod); |
| 70 | + }, |
97 | 71 |
|
98 | | - /** Show loader before send */ |
99 | | - beforeSend: function () { |
100 | | - $('body').trigger('processStart'); |
101 | | - } |
102 | | - }).always(function () { |
103 | | - $('body').trigger('processStop'); |
104 | | - }); |
105 | | - } |
106 | | - } |
| 72 | + /** |
| 73 | + * Confirmation method |
| 74 | + */ |
| 75 | + instantPurchase: function () { |
| 76 | + var form = $(this.productFormSelector), |
| 77 | + confirmTemplate = mageTemplate(confirmationTemplate), |
| 78 | + confirmData = _.extend({}, this.confirmationData, { |
| 79 | + paymentToken: this.paymentToken().summary, |
| 80 | + shippingAddress: this.shippingAddress().summary, |
| 81 | + billingAddress: this.billingAddress().summary, |
| 82 | + shippingMethod: this.shippingMethod().summary |
107 | 83 | }); |
| 84 | + |
| 85 | + if (!(form.validation() && form.validation('isValid'))) { |
| 86 | + return; |
108 | 87 | } |
109 | | - }); |
110 | | - } |
111 | | -); |
| 88 | + |
| 89 | + confirm({ |
| 90 | + title: this.confirmationTitle, |
| 91 | + content: confirmTemplate({ |
| 92 | + data: confirmData |
| 93 | + }), |
| 94 | + actions: { |
| 95 | + /** @inheritdoc */ |
| 96 | + confirm: function () { |
| 97 | + $.ajax({ |
| 98 | + url: this.purchaseUrl, |
| 99 | + data: form.serialize(), |
| 100 | + type: 'post', |
| 101 | + dataType: 'json', |
| 102 | + |
| 103 | + /** Show loader before send */ |
| 104 | + beforeSend: function () { |
| 105 | + $('body').trigger('processStart'); |
| 106 | + } |
| 107 | + }).always(function () { |
| 108 | + $('body').trigger('processStop'); |
| 109 | + }); |
| 110 | + }.bind(this) |
| 111 | + } |
| 112 | + }); |
| 113 | + } |
| 114 | + }); |
| 115 | +}); |
0 commit comments