homeflowjs 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/app/recaptcha.js
CHANGED
|
@@ -12,14 +12,11 @@ window.submitRecaptchaForm = (token) => {
|
|
|
12
12
|
|
|
13
13
|
Homeflow.kickEvent('after_successful_recaptcha', form);
|
|
14
14
|
|
|
15
|
-
console.log('Appending recaptchaTokenField', recaptchaTokenField);
|
|
16
15
|
form.appendChild(recaptchaTokenField);
|
|
17
16
|
form.submit();
|
|
18
17
|
};
|
|
19
18
|
|
|
20
19
|
export default () => {
|
|
21
|
-
console.log('Recaptcha script loaded');
|
|
22
|
-
|
|
23
20
|
window.addEventListener('DOMContentLoaded', () => {
|
|
24
21
|
if (window.noRecaptcha) return null;
|
|
25
22
|
|
|
@@ -32,7 +29,7 @@ export default () => {
|
|
|
32
29
|
'form[action="/user/send_to_friend"]',
|
|
33
30
|
];
|
|
34
31
|
|
|
35
|
-
const initUniqRecaptchaV2Wrapper = ({
|
|
32
|
+
const initUniqRecaptchaV2Wrapper = ({form, id}) => {
|
|
36
33
|
const recaptchaId = id || Math.random().toString().substring(2);
|
|
37
34
|
const formRecaptchaWrapper = document.createElement('div');
|
|
38
35
|
formRecaptchaWrapper.classList.add('recaptcha-wrapper');
|
|
@@ -41,21 +38,14 @@ export default () => {
|
|
|
41
38
|
form.appendChild(formRecaptchaWrapper);
|
|
42
39
|
|
|
43
40
|
const onRecaptchaSubmit = () => {
|
|
44
|
-
console.log('Recaptcha V2 submitted');
|
|
45
|
-
|
|
46
41
|
if (form.classList?.contains('async-recaptcha-submit')) {
|
|
47
|
-
console.log('Async form');
|
|
48
42
|
const continueAsyncSubmission = new Event('async-recaptcha-submit');
|
|
49
43
|
document.dispatchEvent(continueAsyncSubmission);
|
|
50
44
|
} else {
|
|
51
|
-
console.log('Calling form.submit()', form);
|
|
52
45
|
form.submit();
|
|
53
46
|
}
|
|
54
|
-
|
|
55
|
-
console.log('After IF statement');
|
|
56
|
-
|
|
57
47
|
Homeflow.kickEvent('after_successful_recaptcha', form);
|
|
58
|
-
}
|
|
48
|
+
}
|
|
59
49
|
|
|
60
50
|
const widget = window.grecaptcha.render(`recaptcha-wrapper-${recaptchaId}`, {
|
|
61
51
|
sitekey: '6Lf16S0UAAAAAL0YaWCLRhChd4Uk77b-4Ai0ZdRY',
|
|
@@ -63,76 +53,63 @@ export default () => {
|
|
|
63
53
|
size: 'invisible',
|
|
64
54
|
});
|
|
65
55
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
window.widgetIds = window.widgetIds
|
|
56
|
+
window.widgetIds = window.widgetIds
|
|
69
57
|
? [...window.widgetIds, widget]
|
|
70
|
-
: [widget]
|
|
58
|
+
: [widget]
|
|
71
59
|
|
|
72
60
|
form.addEventListener('submit', (e) => {
|
|
73
|
-
console.log('Submit handler called...');
|
|
74
|
-
|
|
75
61
|
if (e.target.classList.contains('hfjs-form-invalid')) {
|
|
76
62
|
return;
|
|
77
63
|
}
|
|
78
64
|
|
|
79
|
-
console.log('Preventing default...');
|
|
80
65
|
e.preventDefault();
|
|
81
|
-
|
|
82
66
|
Homeflow.set('submitted_form', e.target);
|
|
83
|
-
console.log('Running grecaptcha.execute...');
|
|
84
67
|
grecaptcha.execute(widget);
|
|
85
68
|
});
|
|
86
|
-
}
|
|
69
|
+
}
|
|
87
70
|
|
|
88
71
|
const onRecaptchaV2Ready = (triggeredFormEl) => {
|
|
89
|
-
console.log('onRecaptchaV2Ready running');
|
|
90
|
-
|
|
91
72
|
if (window.recaptchaLoadingScriptInterval) {
|
|
92
73
|
clearInterval(window.recaptchaLoadingScriptInterval);
|
|
93
74
|
window.recaptchaLoadingScriptInterval = undefined;
|
|
94
75
|
}
|
|
95
76
|
|
|
96
77
|
if (triggeredFormEl) {
|
|
97
|
-
initUniqRecaptchaV2Wrapper({
|
|
78
|
+
initUniqRecaptchaV2Wrapper({form: triggeredFormEl})
|
|
98
79
|
} else {
|
|
99
80
|
const forms = document.querySelectorAll(formSelectors.join(', '));
|
|
100
81
|
|
|
101
|
-
console.log('forms', forms);
|
|
102
|
-
|
|
103
82
|
forms.forEach((form, i) => {
|
|
104
|
-
initUniqRecaptchaV2Wrapper({ form, id: i })
|
|
83
|
+
initUniqRecaptchaV2Wrapper({ form, id: i })
|
|
105
84
|
});
|
|
106
85
|
}
|
|
107
|
-
}
|
|
86
|
+
}
|
|
108
87
|
|
|
109
88
|
const appendRecaptchaScript = (version) => {
|
|
110
89
|
const srcConfig = {
|
|
111
90
|
v2: 'https://www.google.com/recaptcha/api.js',
|
|
112
91
|
v3: 'https://www.google.com/recaptcha/api.js?render=6LeKPOUUAAAAAEKNWIu2qkNwdOqVxH41v0D7fe-K',
|
|
113
|
-
}
|
|
92
|
+
}
|
|
114
93
|
|
|
115
94
|
const recaptchaScript = document.createElement('script');
|
|
116
95
|
recaptchaScript.src = srcConfig[version];
|
|
117
96
|
recaptchaScript.id = 'recaptcha-script';
|
|
118
97
|
|
|
119
|
-
console.log('Appending recaptcha script...');
|
|
120
98
|
document.body.appendChild(recaptchaScript);
|
|
121
99
|
|
|
122
100
|
if (version === 'v2') {
|
|
123
|
-
|
|
124
|
-
console.log('Running setInterval callback...');
|
|
101
|
+
window.recaptchaLoadingScriptInterval = setInterval(() => {
|
|
125
102
|
if (window.grecaptcha?.render) {
|
|
126
|
-
|
|
127
|
-
onRecaptchaV2Ready();
|
|
103
|
+
onRecaptchaV2Ready()
|
|
128
104
|
}
|
|
129
105
|
}, 300);
|
|
130
106
|
}
|
|
131
|
-
}
|
|
107
|
+
}
|
|
132
108
|
|
|
133
109
|
const initRecaptchaV3 = (form) => {
|
|
110
|
+
if (form.classList.contains('has-recaptcha')) return;
|
|
111
|
+
|
|
134
112
|
form.addEventListener('submit', (e) => {
|
|
135
|
-
console.log('Recaptcha V3 submitted');
|
|
136
113
|
if (!document.getElementById('g-recaptcha-response') || !document.getElementById('g-recaptcha-response').value) {
|
|
137
114
|
e.preventDefault();
|
|
138
115
|
Homeflow.set('submitted_form', e.target);
|
|
@@ -143,23 +120,22 @@ export default () => {
|
|
|
143
120
|
}
|
|
144
121
|
});
|
|
145
122
|
form.classList.add('has-recaptcha');
|
|
146
|
-
}
|
|
123
|
+
}
|
|
147
124
|
|
|
148
125
|
const handleRecaptchaV3ForTargetForm = (targetFormEl) => {
|
|
149
126
|
if (!document.getElementById('recaptcha-script')) {
|
|
150
|
-
appendRecaptchaScript('v3')
|
|
127
|
+
appendRecaptchaScript('v3')
|
|
151
128
|
}
|
|
152
|
-
|
|
153
|
-
initRecaptchaV3(targetFormEl)
|
|
154
|
-
}
|
|
129
|
+
|
|
130
|
+
initRecaptchaV3(targetFormEl)
|
|
131
|
+
}
|
|
155
132
|
|
|
156
133
|
function addRecaptchaV3(targetFormEl) {
|
|
157
134
|
for (let i = 0; i < formSelectors.length; i++) {
|
|
158
135
|
if (targetFormEl) {
|
|
159
|
-
handleRecaptchaV3ForTargetForm(targetFormEl)
|
|
136
|
+
handleRecaptchaV3ForTargetForm(targetFormEl)
|
|
160
137
|
} else {
|
|
161
138
|
const formInputs = document.querySelectorAll(`${formSelectors[i]} input, ${formSelectors[i]} textarea`);
|
|
162
|
-
|
|
163
139
|
formInputs.forEach((input) => {
|
|
164
140
|
input.addEventListener('focus', () => {
|
|
165
141
|
if (!document.getElementById('recaptcha-script')) {
|
|
@@ -171,7 +147,7 @@ export default () => {
|
|
|
171
147
|
|
|
172
148
|
const forms = document.querySelectorAll(formSelectors[i]);
|
|
173
149
|
forms.forEach((form) => {
|
|
174
|
-
handleRecaptchaV3ForTargetForm(form)
|
|
150
|
+
handleRecaptchaV3ForTargetForm(form)
|
|
175
151
|
});
|
|
176
152
|
}
|
|
177
153
|
}
|
|
@@ -179,34 +155,31 @@ export default () => {
|
|
|
179
155
|
const handleRecaptchaV2ForTargetForm = (targetFormEl) => {
|
|
180
156
|
const hasRecaptcha = targetFormEl?.querySelector('.recaptcha-wrapper');
|
|
181
157
|
|
|
182
|
-
if
|
|
158
|
+
if(hasRecaptcha) {
|
|
183
159
|
return;
|
|
184
160
|
}
|
|
185
|
-
|
|
161
|
+
|
|
186
162
|
if (!document.getElementById('recaptcha-script')) {
|
|
187
|
-
appendRecaptchaScript('v2')
|
|
163
|
+
appendRecaptchaScript('v2')
|
|
188
164
|
}
|
|
189
165
|
if (window.grecaptcha) {
|
|
190
|
-
onRecaptchaV2Ready(targetFormEl)
|
|
166
|
+
onRecaptchaV2Ready(targetFormEl)
|
|
191
167
|
}
|
|
192
|
-
}
|
|
168
|
+
}
|
|
193
169
|
|
|
194
170
|
function addRecaptchaV2(targetFormEl) {
|
|
195
171
|
if (targetFormEl) {
|
|
196
|
-
handleRecaptchaV2ForTargetForm(targetFormEl)
|
|
172
|
+
handleRecaptchaV2ForTargetForm(targetFormEl)
|
|
197
173
|
} else {
|
|
198
174
|
for (let i = 0; i < formSelectors.length; i++) {
|
|
199
175
|
const formInputs = document.querySelectorAll(
|
|
200
|
-
`${formSelectors[i]} input, ${formSelectors[i]} textarea, ${formSelectors[i]} select
|
|
176
|
+
`${formSelectors[i]} input, ${formSelectors[i]} textarea, ${formSelectors[i]} select`
|
|
201
177
|
);
|
|
202
|
-
|
|
203
|
-
console.log('formInputs', formInputs);
|
|
204
178
|
formInputs.forEach((input) => {
|
|
205
179
|
input.addEventListener('focusin', (event) => {
|
|
206
180
|
event.stopPropagation();
|
|
207
181
|
if (!document.getElementById('recaptcha-script')) {
|
|
208
|
-
|
|
209
|
-
appendRecaptchaScript('v2');
|
|
182
|
+
appendRecaptchaScript('v2')
|
|
210
183
|
}
|
|
211
184
|
});
|
|
212
185
|
});
|
|
@@ -214,14 +187,14 @@ export default () => {
|
|
|
214
187
|
}
|
|
215
188
|
}
|
|
216
189
|
|
|
190
|
+
const recaptchaVersion = Homeflow.get('recaptcha_version') || 3;
|
|
217
191
|
const initRecaptcha = (targetFormEl) => {
|
|
218
|
-
|
|
219
|
-
if (Homeflow.get('recaptcha_version') === 3) {
|
|
192
|
+
if (recaptchaVersion === 3) {
|
|
220
193
|
addRecaptchaV3(targetFormEl);
|
|
221
194
|
} else {
|
|
222
195
|
addRecaptchaV2(targetFormEl);
|
|
223
196
|
}
|
|
224
|
-
}
|
|
197
|
+
}
|
|
225
198
|
|
|
226
199
|
const handleRecaptchaRelatedBodyFocus = (event) => {
|
|
227
200
|
event.stopPropagation();
|
|
@@ -235,18 +208,13 @@ export default () => {
|
|
|
235
208
|
if (isFormElementFocused && isRecaptchaForm) {
|
|
236
209
|
initRecaptcha(targetFormEl);
|
|
237
210
|
}
|
|
238
|
-
}
|
|
211
|
+
}
|
|
239
212
|
|
|
240
213
|
const initDynamicallyOpenFormsRecaptcha = () => {
|
|
241
214
|
document.body.addEventListener('focusin', handleRecaptchaRelatedBodyFocus);
|
|
242
|
-
}
|
|
215
|
+
}
|
|
243
216
|
|
|
244
|
-
console.log('Calling initDynamicallyOpenFormsRecaptcha...');
|
|
245
217
|
initDynamicallyOpenFormsRecaptcha();
|
|
246
|
-
|
|
247
|
-
console.log('Calling initRecaptcha...');
|
|
248
|
-
initRecaptcha();
|
|
249
|
-
|
|
250
|
-
return null;
|
|
218
|
+
initRecaptcha()
|
|
251
219
|
});
|
|
252
220
|
};
|
package/package.json
CHANGED
|
@@ -56,7 +56,7 @@ const fetchBranchesDataByPostcode = ({
|
|
|
56
56
|
const polygonPrm = (usingPolygon && channel) ? '&using_polygon=true' : '';
|
|
57
57
|
const channelPrm = channel ? `&channel=${channel}` : '';
|
|
58
58
|
const departmentPrm = (isDepartmentSearch && channel) ? `&department=true` : '';
|
|
59
|
-
const crossAgencyPrm = `&
|
|
59
|
+
const crossAgencyPrm = `&include_cross_agency_branches=true`
|
|
60
60
|
|
|
61
61
|
return fetch(`/postcode_branches_lookup?postcode=${postcode}${departmentPrm}${channelPrm}${polygonPrm}${crossAgencyPrm}`)
|
|
62
62
|
.then(handleRequest)
|