|
4 | 4 | */
|
5 | 5 | /*browser:true*/
|
6 | 6 | /*global define*/
|
7 |
| -define( |
8 |
| - [ |
9 |
| - 'jquery', |
10 |
| - 'uiComponent', |
11 |
| - 'ko', |
12 |
| - 'Magento_Customer/js/model/customer', |
13 |
| - 'Magento_Customer/js/action/check-email-availability', |
14 |
| - 'Magento_Customer/js/action/login', |
15 |
| - 'Magento_Checkout/js/model/quote', |
16 |
| - 'Magento_Checkout/js/checkout-data', |
17 |
| - 'mage/validation' |
18 |
| - ], |
19 |
| - function ($, Component, ko, customer, checkEmailAvailability, loginAction, quote, checkoutData) { |
20 |
| - 'use strict'; |
21 |
| - |
22 |
| - var validatedEmail = checkoutData.getValidatedEmailValue(); |
23 |
| - if (validatedEmail && !customer.isLoggedIn()) { |
24 |
| - quote.guestEmail = validatedEmail; |
25 |
| - } |
| 7 | +define([ |
| 8 | + 'jquery', |
| 9 | + 'uiComponent', |
| 10 | + 'ko', |
| 11 | + 'Magento_Customer/js/model/customer', |
| 12 | + 'Magento_Customer/js/action/check-email-availability', |
| 13 | + 'Magento_Customer/js/action/login', |
| 14 | + 'Magento_Checkout/js/model/quote', |
| 15 | + 'Magento_Checkout/js/checkout-data', |
| 16 | + 'mage/validation' |
| 17 | +], function ($, Component, ko, customer, checkEmailAvailability, loginAction, quote, checkoutData) { |
| 18 | + 'use strict'; |
| 19 | + |
| 20 | + var validatedEmail = checkoutData.getValidatedEmailValue(); |
| 21 | + |
| 22 | + if (validatedEmail && !customer.isLoggedIn()) { |
| 23 | + quote.guestEmail = validatedEmail; |
| 24 | + } |
| 25 | + |
| 26 | + return Component.extend({ |
| 27 | + defaults: { |
| 28 | + template: 'Magento_Checkout/form/element/email', |
| 29 | + email: checkoutData.getInputFieldEmailValue(), |
| 30 | + emailFocused: false, |
| 31 | + isLoading: false, |
| 32 | + isPasswordVisible: false, |
| 33 | + listens: { |
| 34 | + email: 'emailHasChanged', |
| 35 | + emailFocused: 'validateEmail' |
| 36 | + } |
| 37 | + }, |
| 38 | + checkDelay: 2000, |
| 39 | + checkRequest: null, |
| 40 | + isEmailCheckComplete: null, |
| 41 | + isCustomerLoggedIn: customer.isLoggedIn, |
| 42 | + forgotPasswordUrl: window.checkoutConfig.forgotPasswordUrl, |
| 43 | + emailCheckTimeout: 0, |
| 44 | + |
| 45 | + /** |
| 46 | + * Initializes observable properties of instance |
| 47 | + * |
| 48 | + * @returns {Object} Chainable. |
| 49 | + */ |
| 50 | + initObservable: function () { |
| 51 | + this._super() |
| 52 | + .observe(['email', 'emailFocused', 'isLoading', 'isPasswordVisible']); |
| 53 | + |
| 54 | + return this; |
| 55 | + }, |
26 | 56 |
|
27 |
| - return Component.extend({ |
28 |
| - defaults: { |
29 |
| - template: 'Magento_Checkout/form/element/email', |
30 |
| - email: checkoutData.getInputFieldEmailValue(), |
31 |
| - isLoading: false, |
32 |
| - isPasswordVisible: false |
33 |
| - }, |
34 |
| - checkDelay: 2000, |
35 |
| - checkRequest: null, |
36 |
| - isEmailCheckComplete: null, |
37 |
| - isCustomerLoggedIn: customer.isLoggedIn, |
38 |
| - forgotPasswordUrl: window.checkoutConfig.forgotPasswordUrl, |
39 |
| - emailCheckTimeout: 0, |
40 |
| - |
41 |
| - initialize: function() { |
42 |
| - this._super(); |
43 |
| - var self = this; |
44 |
| - this.email.subscribe(function() { |
45 |
| - self.emailHasChanged(); |
46 |
| - }); |
47 |
| - }, |
48 |
| - |
49 |
| - /** Initialize observable properties */ |
50 |
| - initObservable: function () { |
51 |
| - this._super() |
52 |
| - .observe(['email', 'isLoading', 'isPasswordVisible']); |
53 |
| - return this; |
54 |
| - }, |
55 |
| - |
56 |
| - emailHasChanged: function () { |
57 |
| - var self = this; |
58 |
| - clearTimeout(this.emailCheckTimeout); |
| 57 | + /** |
| 58 | + * Callback on changing email property |
| 59 | + */ |
| 60 | + emailHasChanged: function () { |
| 61 | + var self = this; |
| 62 | + |
| 63 | + clearTimeout(this.emailCheckTimeout); |
| 64 | + |
| 65 | + if (self.validateEmail()) { |
| 66 | + quote.guestEmail = self.email(); |
| 67 | + checkoutData.setValidatedEmailValue(self.email()); |
| 68 | + } |
| 69 | + this.emailCheckTimeout = setTimeout(function () { |
59 | 70 | if (self.validateEmail()) {
|
60 |
| - quote.guestEmail = self.email(); |
61 |
| - checkoutData.setValidatedEmailValue(self.email()); |
62 |
| - } |
63 |
| - this.emailCheckTimeout = setTimeout(function () { |
64 |
| - if (self.validateEmail()) { |
65 |
| - self.checkEmailAvailability(); |
66 |
| - } else { |
67 |
| - self.isPasswordVisible(false); |
68 |
| - } |
69 |
| - }, self.checkDelay); |
70 |
| - |
71 |
| - checkoutData.setInputFieldEmailValue(self.email()); |
72 |
| - }, |
73 |
| - |
74 |
| - checkEmailAvailability: function() { |
75 |
| - var self = this; |
76 |
| - this.validateRequest(); |
77 |
| - this.isEmailCheckComplete = $.Deferred(); |
78 |
| - this.isLoading(true); |
79 |
| - this.checkRequest = checkEmailAvailability(this.isEmailCheckComplete, this.email()); |
80 |
| - |
81 |
| - $.when(this.isEmailCheckComplete).done(function() { |
| 71 | + self.checkEmailAvailability(); |
| 72 | + } else { |
82 | 73 | self.isPasswordVisible(false);
|
83 |
| - }).fail( function() { |
84 |
| - self.isPasswordVisible(true); |
85 |
| - }).always(function () { |
86 |
| - self.isLoading(false); |
87 |
| - }); |
88 |
| - }, |
89 |
| - |
90 |
| - validateRequest: function() { |
91 |
| - /* |
92 |
| - * If request has been sent -> abort it. |
93 |
| - * ReadyStates for request aborting: |
94 |
| - * 1 - The request has been set up |
95 |
| - * 2 - The request has been sent |
96 |
| - * 3 - The request is in process |
97 |
| - */ |
98 |
| - if (this.checkRequest != null && $.inArray(this.checkRequest.readyState, [1, 2, 3])) { |
99 |
| - this.checkRequest.abort(); |
100 |
| - this.checkRequest = null; |
101 |
| - } |
102 |
| - }, |
103 |
| - |
104 |
| - validateEmail: function() { |
105 |
| - var loginFormSelector = 'form[data-role=email-with-possible-login]'; |
106 |
| - $(loginFormSelector).validation(); |
107 |
| - var validationResult = $(loginFormSelector + ' input[name=username]').valid(); |
108 |
| - return Boolean(validationResult); |
109 |
| - }, |
110 |
| - |
111 |
| - login: function(loginForm) { |
112 |
| - var loginData = {}, |
113 |
| - formDataArray = $(loginForm).serializeArray(); |
114 |
| - |
115 |
| - formDataArray.forEach(function (entry) { |
116 |
| - loginData[entry.name] = entry.value; |
117 |
| - }); |
118 |
| - if (this.isPasswordVisible() |
119 |
| - && $(loginForm).validation() |
120 |
| - && $(loginForm).validation('isValid') |
121 |
| - ) { |
122 |
| - loginAction(loginData); |
123 | 74 | }
|
| 75 | + }, self.checkDelay); |
| 76 | + |
| 77 | + checkoutData.setInputFieldEmailValue(self.email()); |
| 78 | + }, |
| 79 | + |
| 80 | + /** |
| 81 | + * Check email existing. |
| 82 | + */ |
| 83 | + checkEmailAvailability: function () { |
| 84 | + var self = this; |
| 85 | + this.validateRequest(); |
| 86 | + this.isEmailCheckComplete = $.Deferred(); |
| 87 | + this.isLoading(true); |
| 88 | + this.checkRequest = checkEmailAvailability(this.isEmailCheckComplete, this.email()); |
| 89 | + |
| 90 | + $.when(this.isEmailCheckComplete).done(function () { |
| 91 | + self.isPasswordVisible(false); |
| 92 | + }).fail(function () { |
| 93 | + self.isPasswordVisible(true); |
| 94 | + }).always(function () { |
| 95 | + self.isLoading(false); |
| 96 | + }); |
| 97 | + }, |
| 98 | + |
| 99 | + /** |
| 100 | + * If request has been sent -> abort it. |
| 101 | + * ReadyStates for request aborting: |
| 102 | + * 1 - The request has been set up |
| 103 | + * 2 - The request has been sent |
| 104 | + * 3 - The request is in process |
| 105 | + */ |
| 106 | + validateRequest: function () { |
| 107 | + if (this.checkRequest != null && $.inArray(this.checkRequest.readyState, [1, 2, 3])) { |
| 108 | + this.checkRequest.abort(); |
| 109 | + this.checkRequest = null; |
124 | 110 | }
|
125 |
| - }); |
126 |
| - } |
127 |
| -); |
| 111 | + }, |
| 112 | + |
| 113 | + /** |
| 114 | + * Local email validation. |
| 115 | + * |
| 116 | + * @param {Boolean} focused - input focus. |
| 117 | + * @returns {Boolean} - validation result. |
| 118 | + */ |
| 119 | + validateEmail: function (focused) { |
| 120 | + var loginFormSelector = 'form[data-role=email-with-possible-login]', |
| 121 | + usernameSelector = loginFormSelector + ' input[name=username]', |
| 122 | + loginForm = $(loginFormSelector), |
| 123 | + validator; |
| 124 | + |
| 125 | + loginForm.validation(); |
| 126 | + |
| 127 | + if (focused === false) { |
| 128 | + return !!$(usernameSelector).valid(); |
| 129 | + } |
| 130 | + |
| 131 | + validator = loginForm.validate(); |
| 132 | + |
| 133 | + return validator.check(usernameSelector); |
| 134 | + }, |
| 135 | + |
| 136 | + /** |
| 137 | + * Log in form submitting callback. |
| 138 | + * |
| 139 | + * @param {HTMLElement} loginForm - form element. |
| 140 | + */ |
| 141 | + login: function (loginForm) { |
| 142 | + var loginData = {}, |
| 143 | + formDataArray = $(loginForm).serializeArray(); |
| 144 | + |
| 145 | + formDataArray.forEach(function (entry) { |
| 146 | + loginData[entry.name] = entry.value; |
| 147 | + }); |
| 148 | + |
| 149 | + if (this.isPasswordVisible() && $(loginForm).validation() && $(loginForm).validation('isValid')) { |
| 150 | + loginAction(loginData); |
| 151 | + } |
| 152 | + } |
| 153 | + }); |
| 154 | +}); |
0 commit comments