1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
/**
* Classic (shortcode) WooCommerce checkout.
*
* The form is rendered by PHP and nothing owns the fields afterwards, so the
* widget is left to do the whole job: debounce, request, write, announce. Most
* of this file is handing it the selectors WooCommerce uses and the settings
* the store owner chose.
*
* Selectors are passed as strings rather than elements on purpose. The widget
* resolves them on every use and delegates its listener from `document`, so a
* theme or one-page-checkout plugin that re-renders the billing form does not
* break the autofill.
*
* @module
*/
(function () {
var config = window.cepisWooCommerce;
if (!config || !window.CepisAutofill || !config.fields) {
return;
}
var DIACRITIC = /[\u0300-\u036f]/g;
/**
* Compare labels the way a person would: accents and case do not count.
*
* @param {unknown} value Anything printable.
* @returns {string}
*/
function fold(value) {
return String(value == null ? "" : value)
.normalize("NFD")
.replace(DIACRITIC, "")
.trim()
.toLowerCase();
}
/**
* Set a value the way a person would, so validation in the page sees it.
*
* @param {HTMLInputElement|HTMLSelectElement} element Field to write.
* @param {string} value Value to put in it.
*/
function write(element, value) {
var descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), "value");
if (descriptor && descriptor.set) {
descriptor.set.call(element, value);
} else {
element.value = value;
}
element.dispatchEvent(new Event("input", { bubbles: true }));
element.dispatchEvent(new Event("change", { bubbles: true }));
}
/**
* Fill the state field.
*
* This one field is kept away from the widget, because it needs the opposite
* of the widget's `overwrite` rule. A street name is worth protecting — the
* shopper may know better than the database. A state is not: the CEP decides
* it. And WooCommerce pre-selects the store's own state on a fresh checkout,
* which `overwrite: "auto"` would read as a choice the shopper made and
* never touch, quietly filing a Rio address under São Paulo.
*
* Nothing is cleared when no option matches, and this runs only after a
* successful lookup, so a CEP that does not exist leaves the field alone.
*
* Focus is put back where it was. WooCommerce runs the state field through
* selectWoo, which takes focus for itself when the value changes, and that
* would otherwise strand the cursor on the state box instead of the house
* number the shopper still has to type.
*
* @param {string} selector CSS selector for the state field.
* @param {string} uf Two-letter state code from the API.
* @param {string} estado Full state name from the API.
*/
function fillState(selector, uf, estado) {
var element = selector ? document.querySelector(selector) : null;
if (!element || !uf) {
return;
}
var value = uf;
if ("SELECT" === element.tagName) {
var wanted = [uf, estado].filter(Boolean).map(fold);
var options = Array.prototype.slice.call(element.options);
var match = null;
for (var i = 0; i < options.length; i += 1) {
if (
wanted.indexOf(fold(options[i].value)) !== -1 ||
wanted.indexOf(fold(options[i].textContent)) !== -1
) {
match = options[i].value;
break;
}
}
if (null === match) {
return;
}
value = match;
}
if (element.value === value) {
return;
}
var active = document.activeElement;
write(element, value);
if (active && active !== document.activeElement && "function" === typeof active.focus) {
active.focus();
}
}
/**
* Attach one address section — billing or shipping.
*
* @param {Record<string, string>} map Selectors, keyed by the API's field names.
* @returns {object|null} The widget handle, or null when there is no CEP field.
*/
function section(map) {
if (!map || !map.cep) {
return null;
}
var options = {
baseUrl: config.baseUrl,
overwrite: config.overwrite,
focusNumero: !!config.focusNumero,
debounceMs: config.debounceMs,
timeoutMs: config.timeoutMs,
messages: config.messages,
onResult: function (address) {
fillState(map.uf, address.uf, address.estado);
},
};
Object.keys(map).forEach(function (field) {
if ("uf" !== field) {
options[field] = map[field];
}
});
return window.CepisAutofill.attach(options);
}
var handles = [];
Object.keys(config.fields).forEach(function (name) {
var handle = section(config.fields[name]);
if (handle) {
handles.push(handle);
}
});
window.cepisWooCommerceHandles = handles;
})();
|