@washingtonpost/subs-de-inputs 0.5.7 → 1.0.0-react18.0

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.
@@ -1,436 +1,540 @@
1
- import { getCookie, WPGeo, JSON_HEADERS, ResponseStatus, ENDPOINTS, isLoggedIn, listenToCookieStore } from '@washingtonpost/subs-sdk';
1
+ import { getCookie, WPGeo, JSON_HEADERS, ENDPOINTS, ResponseStatus } from '@washingtonpost/subs-sdk';
2
2
  import React, { useState, useEffect } from 'react';
3
- import { Icon, theme, Select, styled } from '@washingtonpost/wpds-ui-kit';
4
- import { useWindowSize, useScript, ScriptStatus } from '@washingtonpost/subs-hooks';
5
- import { ChevronDown } from '@washingtonpost/wpds-assets';
3
+ import { Select, theme, styled } from '@washingtonpost/wpds-ui-kit';
6
4
 
7
- const CollectionBehaviors = {
5
+ var CollectionBehaviors = {
8
6
  COLLECT: 'COLLECT',
9
7
  DO_NOT_COLLECT: 'DO_NOT_COLLECT'
10
8
  };
11
- const AttributesState = {
9
+ var AttributesState = {
12
10
  SUCCESS: '100'
13
11
  };
14
- const DeleteAttributeState = {
15
- SUCCESS: '150',
16
- SYSTEM_ERROR: '151',
17
- INVALID_ATTRIBUTE_NAME: '152',
18
- INVALID_ATTRIBUTE_NOT_EXISTS: '153'
19
- };
20
- const IngestType = {
21
- EXPLICIT: 'explicit',
22
- IMPLICIT: 'implicit'
23
- };
24
- const IngestResponseState = {
12
+ var IngestResponseState = {
25
13
  SUCCESS: '100',
26
14
  SYSTEM_ERROR: '101',
27
15
  INVALID_TYPE: '102',
28
16
  INVALID_IDENTIFIER: '103',
29
17
  INVALID_DATA: '104',
30
18
  INVALID_ATTRIBUTE_DEFINITION: '105',
31
- INVALID_META_DEFINITION: '106',
32
- UNAUTHENTICATED: '107',
33
- MISMATCHED_IDENTIFIER: '108',
34
- DISABLED_ATTRIBUTE_DEFINITION: '109',
35
- DO_NOT_COLLECT: '110'
19
+ INVALID_META_DEFINITION: '106'
36
20
  };
37
21
 
38
- const hasRequiredPrivacyCookies = () => {
22
+ var hasRequiredPrivacyCookies = function hasRequiredPrivacyCookies() {
39
23
  var _WPGeo;
40
24
  if (typeof window === 'undefined') {
41
25
  return false;
42
26
  }
43
- const wp_usp = getCookie('wp_usp');
44
- const countryCode = (_WPGeo = WPGeo()) === null || _WPGeo === void 0 ? void 0 : _WPGeo.country_code;
27
+ var wp_usp = getCookie('wp_usp');
28
+ var countryCode = (_WPGeo = WPGeo()) == null ? void 0 : _WPGeo.country_code;
45
29
  return !!(wp_usp && countryCode === 'US');
46
30
  };
47
31
 
48
- const base = `${ENDPOINTS.base}/de/v1`;
49
- const attributesCache = {};
50
- const getAttributes = async _ref => {
51
- let {
52
- fieldName
53
- } = _ref;
54
- if (attributesCache[fieldName]) {
55
- return attributesCache[fieldName];
32
+ function _regeneratorRuntime() {
33
+ _regeneratorRuntime = function () {
34
+ return e;
35
+ };
36
+ var t,
37
+ e = {},
38
+ r = Object.prototype,
39
+ n = r.hasOwnProperty,
40
+ o = Object.defineProperty || function (t, e, r) {
41
+ t[e] = r.value;
42
+ },
43
+ i = "function" == typeof Symbol ? Symbol : {},
44
+ a = i.iterator || "@@iterator",
45
+ c = i.asyncIterator || "@@asyncIterator",
46
+ u = i.toStringTag || "@@toStringTag";
47
+ function define(t, e, r) {
48
+ return Object.defineProperty(t, e, {
49
+ value: r,
50
+ enumerable: !0,
51
+ configurable: !0,
52
+ writable: !0
53
+ }), t[e];
56
54
  }
57
- const fieldNames = [fieldName];
58
55
  try {
59
- const url = new URL(`${base}/attributes`);
60
- url.searchParams.set('attributes', fieldNames.join(','));
61
- const data = await fetch(url.toString(), {
62
- credentials: 'include',
63
- headers: JSON_HEADERS
64
- });
65
- const json = await data.json();
66
- if (data.ok && json.status === ResponseStatus.SUCCESS) {
67
- const attributes = json.attributes || [];
68
- attributesCache[fieldName] = attributes;
69
- return attributes;
70
- } else {
71
- return [];
72
- }
73
- } catch (e) {
74
- console.debug(e);
75
- return [];
56
+ define({}, "");
57
+ } catch (t) {
58
+ define = function (t, e, r) {
59
+ return t[e] = r;
60
+ };
76
61
  }
77
- };
78
-
79
- const sendGAEvent = props => {
80
- if (typeof window === 'undefined') {
81
- if (process.env.NODE_ENV !== "production") console.warn('NO WINDOW');
82
- return;
62
+ function wrap(t, e, r, n) {
63
+ var i = e && e.prototype instanceof Generator ? e : Generator,
64
+ a = Object.create(i.prototype),
65
+ c = new Context(n || []);
66
+ return o(a, "_invoke", {
67
+ value: makeInvokeMethod(t, r, c)
68
+ }), a;
83
69
  }
84
- // Initialize dataLayer if needed
85
- window.dataLayer = window.dataLayer || [];
86
- const eventData = {
87
- ...props
88
- };
89
- window.dataLayer.push(eventData);
90
- };
91
- const sendToGA = async _ref => {
92
- let {
93
- submitData: {
94
- fieldName,
95
- value
96
- },
97
- source
98
- } = _ref;
99
- sendGAEvent({
100
- event: 'site-onpage-click',
101
- action: 'site-onpage-click',
102
- category: 'profile',
103
- label: fieldName,
104
- 'de-label': fieldName,
105
- [fieldName]: value,
106
- section: 'profile',
107
- subsection: source
70
+ function tryCatch(t, e, r) {
71
+ try {
72
+ return {
73
+ type: "normal",
74
+ arg: t.call(e, r)
75
+ };
76
+ } catch (t) {
77
+ return {
78
+ type: "throw",
79
+ arg: t
80
+ };
81
+ }
82
+ }
83
+ e.wrap = wrap;
84
+ var h = "suspendedStart",
85
+ l = "suspendedYield",
86
+ f = "executing",
87
+ s = "completed",
88
+ y = {};
89
+ function Generator() {}
90
+ function GeneratorFunction() {}
91
+ function GeneratorFunctionPrototype() {}
92
+ var p = {};
93
+ define(p, a, function () {
94
+ return this;
108
95
  });
109
- return true;
110
- };
111
-
112
- const base$1 = `${ENDPOINTS.base}/de/v1`;
113
- const ingest = async _ref => {
114
- let {
115
- submitData: {
116
- fieldName,
117
- value
118
- },
119
- source
120
- } = _ref;
121
- const url = `${base$1}/ingest`;
122
- const wapo_login_id = getCookie('wapo_login_id');
123
- const jucid = localStorage.getItem('uuid');
124
- const ga = getCookie('_ga');
125
- const payload = {
126
- jucid,
127
- ga,
128
- type: IngestType.EXPLICIT,
129
- wapo_login_id,
130
- data: {
131
- [fieldName]: [value]
132
- },
133
- metadata: {
134
- source
96
+ var d = Object.getPrototypeOf,
97
+ v = d && d(d(values([])));
98
+ v && v !== r && n.call(v, a) && (p = v);
99
+ var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
100
+ function defineIteratorMethods(t) {
101
+ ["next", "throw", "return"].forEach(function (e) {
102
+ define(t, e, function (t) {
103
+ return this._invoke(e, t);
104
+ });
105
+ });
106
+ }
107
+ function AsyncIterator(t, e) {
108
+ function invoke(r, o, i, a) {
109
+ var c = tryCatch(t[r], t, o);
110
+ if ("throw" !== c.type) {
111
+ var u = c.arg,
112
+ h = u.value;
113
+ return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
114
+ invoke("next", t, i, a);
115
+ }, function (t) {
116
+ invoke("throw", t, i, a);
117
+ }) : e.resolve(h).then(function (t) {
118
+ u.value = t, i(u);
119
+ }, function (t) {
120
+ return invoke("throw", t, i, a);
121
+ });
122
+ }
123
+ a(c.arg);
135
124
  }
136
- };
137
- try {
138
- const response = await fetch(url, {
139
- method: 'POST',
140
- credentials: 'include',
141
- headers: JSON_HEADERS,
142
- body: JSON.stringify(payload)
125
+ var r;
126
+ o(this, "_invoke", {
127
+ value: function (t, n) {
128
+ function callInvokeWithMethodAndArg() {
129
+ return new e(function (e, r) {
130
+ invoke(t, n, e, r);
131
+ });
132
+ }
133
+ return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
134
+ }
143
135
  });
144
- const json = await response.json();
145
- return json;
146
- } catch (e) {
147
- console.debug(e);
148
- return null;
149
136
  }
150
- };
151
-
152
- const isAnonymousWebview = () => {
153
- if (typeof window === 'undefined') {
154
- return false;
137
+ function makeInvokeMethod(e, r, n) {
138
+ var o = h;
139
+ return function (i, a) {
140
+ if (o === f) throw Error("Generator is already running");
141
+ if (o === s) {
142
+ if ("throw" === i) throw a;
143
+ return {
144
+ value: t,
145
+ done: !0
146
+ };
147
+ }
148
+ for (n.method = i, n.arg = a;;) {
149
+ var c = n.delegate;
150
+ if (c) {
151
+ var u = maybeInvokeDelegate(c, n);
152
+ if (u) {
153
+ if (u === y) continue;
154
+ return u;
155
+ }
156
+ }
157
+ if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
158
+ if (o === h) throw o = s, n.arg;
159
+ n.dispatchException(n.arg);
160
+ } else "return" === n.method && n.abrupt("return", n.arg);
161
+ o = f;
162
+ var p = tryCatch(e, r, n);
163
+ if ("normal" === p.type) {
164
+ if (o = n.done ? s : l, p.arg === y) continue;
165
+ return {
166
+ value: p.arg,
167
+ done: n.done
168
+ };
169
+ }
170
+ "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
171
+ }
172
+ };
155
173
  }
156
- const wp_wv = getCookie('wp_wv');
157
- return !!(wp_wv && !isLoggedIn());
158
- };
159
-
160
- const push = async _ref => {
161
- let {
162
- submitData,
163
- source
164
- } = _ref;
165
- if (!hasRequiredPrivacyCookies()) {
166
- throw new Error('does not satisfy cookie check');
174
+ function maybeInvokeDelegate(e, r) {
175
+ var n = r.method,
176
+ o = e.iterator[n];
177
+ if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
178
+ var i = tryCatch(o, e.iterator, r.arg);
179
+ if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
180
+ var a = i.arg;
181
+ return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
167
182
  }
168
- if (isAnonymousWebview()) {
169
- throw new Error('does not satisfy cookie check');
183
+ function pushTryEntry(t) {
184
+ var e = {
185
+ tryLoc: t[0]
186
+ };
187
+ 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
170
188
  }
171
- const {
172
- fieldName
173
- } = submitData;
174
- const attributeInfo = await getAttributes({
175
- fieldName
176
- });
177
- if (attributeInfo[0] && attributeInfo[0].name === fieldName && attributeInfo[0].collection_behavior === CollectionBehaviors.DO_NOT_COLLECT) {
178
- throw new Error('do not collect');
189
+ function resetTryEntry(t) {
190
+ var e = t.completion || {};
191
+ e.type = "normal", delete e.arg, t.completion = e;
179
192
  }
180
- const type = attributeInfo[0] && attributeInfo[0].explicit === true ? IngestType.EXPLICIT : IngestType.IMPLICIT;
181
- if (!attributeInfo[0] && process.env.NODE_ENV !== "production") {
182
- console.warn(`no attribute info found for ${fieldName}, assuming implicit`);
193
+ function Context(t) {
194
+ this.tryEntries = [{
195
+ tryLoc: "root"
196
+ }], t.forEach(pushTryEntry, this), this.reset(!0);
183
197
  }
184
- if (type === IngestType.EXPLICIT) {
185
- return ingest({
186
- submitData,
187
- source
188
- });
189
- } else {
190
- return sendToGA({
191
- submitData,
192
- source
198
+ function values(e) {
199
+ if (e || "" === e) {
200
+ var r = e[a];
201
+ if (r) return r.call(e);
202
+ if ("function" == typeof e.next) return e;
203
+ if (!isNaN(e.length)) {
204
+ var o = -1,
205
+ i = function next() {
206
+ for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
207
+ return next.value = t, next.done = !0, next;
208
+ };
209
+ return i.next = i;
210
+ }
211
+ }
212
+ throw new TypeError(typeof e + " is not iterable");
213
+ }
214
+ return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
215
+ value: GeneratorFunctionPrototype,
216
+ configurable: !0
217
+ }), o(GeneratorFunctionPrototype, "constructor", {
218
+ value: GeneratorFunction,
219
+ configurable: !0
220
+ }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
221
+ var e = "function" == typeof t && t.constructor;
222
+ return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
223
+ }, e.mark = function (t) {
224
+ return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
225
+ }, e.awrap = function (t) {
226
+ return {
227
+ __await: t
228
+ };
229
+ }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
230
+ return this;
231
+ }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
232
+ void 0 === i && (i = Promise);
233
+ var a = new AsyncIterator(wrap(t, r, n, o), i);
234
+ return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
235
+ return t.done ? t.value : a.next();
193
236
  });
237
+ }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
238
+ return this;
239
+ }), define(g, "toString", function () {
240
+ return "[object Generator]";
241
+ }), e.keys = function (t) {
242
+ var e = Object(t),
243
+ r = [];
244
+ for (var n in e) r.push(n);
245
+ return r.reverse(), function next() {
246
+ for (; r.length;) {
247
+ var t = r.pop();
248
+ if (t in e) return next.value = t, next.done = !1, next;
249
+ }
250
+ return next.done = !0, next;
251
+ };
252
+ }, e.values = values, Context.prototype = {
253
+ constructor: Context,
254
+ reset: function (e) {
255
+ if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
256
+ },
257
+ stop: function () {
258
+ this.done = !0;
259
+ var t = this.tryEntries[0].completion;
260
+ if ("throw" === t.type) throw t.arg;
261
+ return this.rval;
262
+ },
263
+ dispatchException: function (e) {
264
+ if (this.done) throw e;
265
+ var r = this;
266
+ function handle(n, o) {
267
+ return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
268
+ }
269
+ for (var o = this.tryEntries.length - 1; o >= 0; --o) {
270
+ var i = this.tryEntries[o],
271
+ a = i.completion;
272
+ if ("root" === i.tryLoc) return handle("end");
273
+ if (i.tryLoc <= this.prev) {
274
+ var c = n.call(i, "catchLoc"),
275
+ u = n.call(i, "finallyLoc");
276
+ if (c && u) {
277
+ if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
278
+ if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
279
+ } else if (c) {
280
+ if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
281
+ } else {
282
+ if (!u) throw Error("try statement without catch or finally");
283
+ if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
284
+ }
285
+ }
286
+ }
287
+ },
288
+ abrupt: function (t, e) {
289
+ for (var r = this.tryEntries.length - 1; r >= 0; --r) {
290
+ var o = this.tryEntries[r];
291
+ if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
292
+ var i = o;
293
+ break;
294
+ }
295
+ }
296
+ i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
297
+ var a = i ? i.completion : {};
298
+ return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
299
+ },
300
+ complete: function (t, e) {
301
+ if ("throw" === t.type) throw t.arg;
302
+ return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
303
+ },
304
+ finish: function (t) {
305
+ for (var e = this.tryEntries.length - 1; e >= 0; --e) {
306
+ var r = this.tryEntries[e];
307
+ if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
308
+ }
309
+ },
310
+ catch: function (t) {
311
+ for (var e = this.tryEntries.length - 1; e >= 0; --e) {
312
+ var r = this.tryEntries[e];
313
+ if (r.tryLoc === t) {
314
+ var n = r.completion;
315
+ if ("throw" === n.type) {
316
+ var o = n.arg;
317
+ resetTryEntry(r);
318
+ }
319
+ return o;
320
+ }
321
+ }
322
+ throw Error("illegal catch attempt");
323
+ },
324
+ delegateYield: function (e, r, n) {
325
+ return this.delegate = {
326
+ iterator: values(e),
327
+ resultName: r,
328
+ nextLoc: n
329
+ }, "next" === this.method && (this.arg = t), y;
330
+ }
331
+ }, e;
332
+ }
333
+ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
334
+ try {
335
+ var info = gen[key](arg);
336
+ var value = info.value;
337
+ } catch (error) {
338
+ reject(error);
339
+ return;
194
340
  }
195
- };
196
-
197
- const StyledMobileSelect = /*#__PURE__*/styled('select', {
198
- padding: '12px 16px 12px 6px',
199
- display: 'flex',
200
- justifyContent: 'space-between',
201
- width: '100%',
202
- backgroundColor: '$secondary',
203
- color: '$primary',
204
- fontFamily: '$meta',
205
- fontSize: '$100',
206
- fontWeight: '$light',
207
- lineHeight: '$125',
208
- paddingBlockRight: '$125',
209
- textOverflow: 'ellipsis',
210
- position: 'relative',
211
- borderColor: 'transparent',
212
- borderRightWidth: '10px',
213
- borderRightColor: 'transparent',
214
- appearance: 'none',
215
- '-webkit-appearance': 'none',
216
- '&:disabled': {
217
- backgroundColor: theme.colors.disabled,
218
- borderColor: theme.colors.disabled,
219
- color: theme.colors.onDisabled,
220
- cursor: 'not-allowed'
341
+ if (info.done) {
342
+ resolve(value);
343
+ } else {
344
+ Promise.resolve(value).then(_next, _throw);
221
345
  }
222
- });
223
- const StyledSelectWrapper = /*#__PURE__*/styled('div', {
224
- width: '100%',
225
- maxWidth: '380px',
226
- borderRadius: '$012',
227
- borderColor: '$subtle',
228
- borderStyle: 'solid',
229
- borderWidth: '1px',
230
- backgroundColor: '$secondary',
231
- position: 'relative'
232
- });
233
- const StyledMobileOption = /*#__PURE__*/styled('option', {
234
- fontFamily: 'inherit',
235
- fontSize: 'inherit',
236
- color: 'inherit'
237
- });
238
- /**
239
- * Dropdown component. Uses wpds-ui-kit on desktop and native select on mobile.
240
- * @param {IDropdownProps} props The props.
241
- * @returns {React.ReactElement} The dropdown.
242
- */
243
- const Dropdown = _ref => {
244
- let {
245
- id,
246
- label,
247
- values,
248
- required = false,
249
- defaultValue,
250
- onChange = () => {},
251
- disabled = false
252
- } = _ref;
253
- const [answer, setAnswer] = useState();
254
- const {
255
- isMobileSize
256
- } = useWindowSize();
257
- useEffect(() => {
258
- if (answer) onChange(answer);
259
- }, [answer]);
260
- const disabledProp = disabled ? {
261
- disabled: true
262
- } : {};
263
- // helps maintain state between WPDS and native dropdowns
264
- const defaultValueProp = answer ? {
265
- defaultValue: answer
266
- } : defaultValue ? {
267
- defaultValue
268
- } : {};
269
- const defaultValuePropMobile = value => {
270
- if (answer) {
271
- return value === answer ? {
272
- selected: true
273
- } : {};
274
- }
275
- return value === defaultValue ? {
276
- selected: true
277
- } : {};
346
+ }
347
+ function _asyncToGenerator(fn) {
348
+ return function () {
349
+ var self = this,
350
+ args = arguments;
351
+ return new Promise(function (resolve, reject) {
352
+ var gen = fn.apply(self, args);
353
+ function _next(value) {
354
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
355
+ }
356
+ function _throw(err) {
357
+ asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
358
+ }
359
+ _next(undefined);
360
+ });
278
361
  };
279
- return isMobileSize ? React.createElement(StyledSelectWrapper, null, React.createElement(StyledMobileSelect, {
280
- id: "",
281
- required: required,
282
- onChange: e => setAnswer(e.target.value),
283
- placeholder: label,
284
- ...disabledProp
285
- }, React.createElement("label", null, label), React.createElement(StyledMobileOption, {
286
- value: "",
287
- disabled: true,
288
- selected: true,
289
- style: {
290
- color: '#666666'
291
- }
292
- }, label), values.map(value => React.createElement(StyledMobileOption, {
293
- value: value,
294
- key: value,
295
- ...defaultValuePropMobile(value)
296
- }, value))), React.createElement(Icon, {
297
- label: "",
298
- size: "100",
299
- fill: theme.colors['gray80'],
300
- style: {
301
- pointerEvents: 'none',
302
- position: 'absolute',
303
- right: '10px',
304
- top: '50%',
305
- transform: 'translateY(-50%)'
306
- }
307
- }, React.createElement(ChevronDown, {
308
- style: {
309
- position: 'absolute',
310
- right: '10px'
362
+ }
363
+ function _extends() {
364
+ _extends = Object.assign ? Object.assign.bind() : function (target) {
365
+ for (var i = 1; i < arguments.length; i++) {
366
+ var source = arguments[i];
367
+ for (var key in source) {
368
+ if (Object.prototype.hasOwnProperty.call(source, key)) {
369
+ target[key] = source[key];
370
+ }
371
+ }
311
372
  }
312
- }))) : React.createElement(Select.Root, {
313
- onValueChange: e => setAnswer(e),
314
- required: required,
315
- ...defaultValueProp,
316
- ...disabledProp
317
- }, React.createElement(Select.Trigger, {
318
- "data-test-id": `${id}-select-trigger`
319
- }, React.createElement(Select.Label, null, label), React.createElement(Select.Value, null)), React.createElement(Select.Content, {
320
- css: {
321
- zIndex: theme.zIndices.page
322
- },
323
- "data-test-id": `${id}-select-content`
324
- }, values.map(value => React.createElement(Select.Item, {
325
- value: value,
326
- key: value
327
- }, value))));
328
- };
373
+ return target;
374
+ };
375
+ return _extends.apply(this, arguments);
376
+ }
329
377
 
330
- const scriptSrc = `${ENDPOINTS.staticAssets === 'https://subscribe.washingtonpost.com/static' ? 'https://www.washingtonpost.com/subscribe/static/' : ENDPOINTS.staticAssets}/de-utils/twpdeu.min.js`;
331
- const DESelect = _ref => {
332
- let {
333
- source,
334
- fieldName,
335
- label,
336
- dataDictionaryConfig,
337
- defaultValue,
338
- disabled,
339
- submit,
340
- onChange = () => {},
341
- onFinished = () => {},
342
- valuesFilter = () => true,
343
- children
344
- } = _ref;
345
- const [config, setConfig] = useState(dataDictionaryConfig);
346
- const [selected, setSelected] = useState('');
347
- const scriptStatus = useScript(scriptSrc);
348
- useEffect(() => {
349
- const fetchConfig = async () => {
350
- try {
351
- var _window;
352
- const config = await ((_window = window) === null || _window === void 0 || (_window = _window.__twpdeu) === null || _window === void 0 ? void 0 : _window.getFieldConfigs({
353
- fieldName
354
- }));
355
- if (config) {
356
- setConfig(config[0]);
357
- } else {
358
- console.error('unable to get config', fieldName);
359
- }
360
- } catch (e) {
361
- console.warn('unable to get config', fieldName, e);
378
+ var base = ENDPOINTS.base + "/de/v1";
379
+ var attributesCache = {};
380
+ var getAttributes = /*#__PURE__*/function () {
381
+ var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
382
+ var fieldName, fieldNames, url, data, json, attributes;
383
+ return _regeneratorRuntime().wrap(function _callee$(_context) {
384
+ while (1) switch (_context.prev = _context.next) {
385
+ case 0:
386
+ fieldName = _ref.fieldName;
387
+ if (!attributesCache[fieldName]) {
388
+ _context.next = 3;
389
+ break;
390
+ }
391
+ return _context.abrupt("return", attributesCache[fieldName]);
392
+ case 3:
393
+ fieldNames = [fieldName];
394
+ _context.prev = 4;
395
+ url = new URL(base + "/attributes");
396
+ url.searchParams.set('attributes', fieldNames.join(','));
397
+ _context.next = 9;
398
+ return fetch(url.toString(), {
399
+ credentials: 'include',
400
+ headers: JSON_HEADERS
401
+ });
402
+ case 9:
403
+ data = _context.sent;
404
+ _context.next = 12;
405
+ return data.json();
406
+ case 12:
407
+ json = _context.sent;
408
+ if (!(data.ok && json.status === ResponseStatus.SUCCESS)) {
409
+ _context.next = 19;
410
+ break;
411
+ }
412
+ attributes = json.attributes || [];
413
+ attributesCache[fieldName] = attributes;
414
+ return _context.abrupt("return", attributes);
415
+ case 19:
416
+ return _context.abrupt("return", []);
417
+ case 20:
418
+ _context.next = 26;
419
+ break;
420
+ case 22:
421
+ _context.prev = 22;
422
+ _context.t0 = _context["catch"](4);
423
+ console.debug(_context.t0);
424
+ return _context.abrupt("return", []);
425
+ case 26:
426
+ case "end":
427
+ return _context.stop();
362
428
  }
363
- };
364
- if (scriptStatus === ScriptStatus.READY && !(children || config)) {
365
- fetchConfig();
429
+ }, _callee, null, [[4, 22]]);
430
+ }));
431
+ return function getAttributes(_x) {
432
+ return _ref2.apply(this, arguments);
433
+ };
434
+ }();
435
+
436
+ var DESelect = function DESelect(_ref) {
437
+ var source = _ref.source,
438
+ fieldName = _ref.fieldName,
439
+ label = _ref.label,
440
+ dataDictionaryConfig = _ref.dataDictionaryConfig,
441
+ defaultValue = _ref.defaultValue,
442
+ disabled = _ref.disabled,
443
+ submit = _ref.submit,
444
+ _ref$onChange = _ref.onChange,
445
+ onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
446
+ _ref$onFinished = _ref.onFinished,
447
+ onFinished = _ref$onFinished === void 0 ? function () {} : _ref$onFinished,
448
+ _ref$valuesFilter = _ref.valuesFilter,
449
+ valuesFilter = _ref$valuesFilter === void 0 ? function () {
450
+ return true;
451
+ } : _ref$valuesFilter,
452
+ children = _ref.children;
453
+ var _useState = useState(dataDictionaryConfig),
454
+ config = _useState[0],
455
+ setConfig = _useState[1];
456
+ var _useState2 = useState(''),
457
+ selected = _useState2[0],
458
+ setSelected = _useState2[1];
459
+ useEffect(function () {
460
+ if (children) {
461
+ if (process.env.NODE_ENV !== "production") {
462
+ console.debug('childen props', children);
463
+ }
464
+ return;
366
465
  }
367
- }, [scriptStatus]);
368
- useEffect(() => {
369
- const submitSelected = async () => {
370
- try {
371
- var _window2;
372
- const result = await ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.__twpdeu) === null || _window2 === void 0 ? void 0 : _window2.push({
373
- submitData: {
374
- fieldName,
375
- value: selected
376
- },
377
- source
378
- }));
379
- const isError = result === true ? false : result ? result.status !== ResponseStatus.SUCCESS : true;
380
- onFinished({
381
- isFinished: true,
382
- isError
383
- });
384
- } catch (e) {
385
- onFinished({
386
- isFinished: false,
387
- isError: true
388
- });
466
+ if (!config) {
467
+ _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
468
+ var config;
469
+ return _regeneratorRuntime().wrap(function _callee$(_context) {
470
+ while (1) switch (_context.prev = _context.next) {
471
+ case 0:
472
+ _context.next = 2;
473
+ return getAttributes({
474
+ fieldName: fieldName
475
+ });
476
+ case 2:
477
+ config = _context.sent;
478
+ if (process.env.NODE_ENV !== "production") {
479
+ console.debug('config from API', config);
480
+ }
481
+ setConfig(config[0]);
482
+ case 5:
483
+ case "end":
484
+ return _context.stop();
485
+ }
486
+ }, _callee);
487
+ }))();
488
+ }
489
+ }, []);
490
+ useEffect(function () {
491
+ if (submit && selected) {
492
+ if (process.env.NODE_ENV !== "production") {
493
+ console.error('push not implemented', selected, source);
389
494
  }
390
- };
391
- if (scriptStatus === ScriptStatus.READY && submit && selected) {
392
- submitSelected();
495
+ onFinished({
496
+ isFinished: true,
497
+ isError: false
498
+ });
393
499
  }
394
- }, [scriptStatus, submit]);
395
- const defaultValueProp = defaultValue && config ? {
396
- defaultValue
500
+ }, [submit, selected]);
501
+ if (!(children || config)) {
502
+ return React.createElement("span", null, "loading");
503
+ }
504
+ var defaultValueProp = defaultValue ? {
505
+ defaultValue: defaultValue
397
506
  } : {};
398
- const isLoading = !(children || config);
399
- const disabledProp = disabled || isLoading ? {
507
+ var disabledProp = disabled ? {
400
508
  disabled: true
401
509
  } : {};
402
510
  // sort and filter out archived values
403
- // Note: config.values may be readonly
404
- const values = config ? [...config.values].sort((a, b) => a.order - b.order).filter(value => value.archived !== true).filter(valuesFilter) : [];
405
- return React.createElement(SelectWrapper, null, children && React.createElement(Select.Root, {
406
- onValueChange: e => {
407
- setSelected(e);
511
+ var values = config ? config.values.sort(function (a, b) {
512
+ return a.order - b.order;
513
+ }).filter(function (value) {
514
+ return value.archived !== true;
515
+ }).filter(valuesFilter) : [];
516
+ return React.createElement(SelectWrapper, null, React.createElement(Select.Root, _extends({
517
+ onValueChange: function onValueChange(e) {
408
518
  onChange({
409
519
  value: e
410
520
  });
411
- },
412
- ...defaultValueProp,
413
- ...disabledProp
414
- }, children), !children && !config && React.createElement(Dropdown, {
415
- id: 'loading',
416
- label: 'Loading...',
417
- values: [],
418
- disabled: true
419
- }), !children && config && React.createElement(Dropdown, {
420
- id: config.name,
421
- label: label || config.name,
422
- onChange: e => {
423
521
  setSelected(e);
424
- onChange({
425
- value: e
426
- });
522
+ }
523
+ }, defaultValueProp, disabledProp), children || null, !children && config && React.createElement(React.Fragment, null, React.createElement(Select.Trigger, {
524
+ "data-test-id": config.name + "-select-trigger"
525
+ }, React.createElement(Select.Label, null, label || config.name), React.createElement(Select.Value, null)), React.createElement(Select.Content, {
526
+ css: {
527
+ zIndex: theme.zIndices.page
427
528
  },
428
- values: values.map(value => value.name),
429
- defaultValue: defaultValue,
430
- disabled: disabled
431
- }));
529
+ "data-test-id": config.name + "-select-content"
530
+ }, values.map(function (value) {
531
+ return React.createElement(Select.Item, {
532
+ value: value.name,
533
+ key: value.name
534
+ }, value.name);
535
+ })))));
432
536
  };
433
- const SelectWrapper = /*#__PURE__*/styled('div', {
537
+ var SelectWrapper = /*#__PURE__*/styled('div', {
434
538
  boxSizing: 'border-box',
435
539
  display: 'flex',
436
540
  marginBottom: '$100',
@@ -443,206 +547,5 @@ const SelectWrapper = /*#__PURE__*/styled('div', {
443
547
  }
444
548
  });
445
549
 
446
- const configSrc = `${ENDPOINTS.base === 'https://subscribe.washingtonpost.com' ? 'https://www.washingtonpost.com/subscribe' : ENDPOINTS.base}/config/de/disclosure.json`;
447
- const getConfig = async () => {
448
- let myConfig = undefined;
449
- // step 1: fetch config
450
- const response = await fetch(configSrc);
451
- const remoteConfig = await response.json();
452
- // step 2: figure out which part of the config to use
453
- // if country- or region-specific config found, use that
454
- const {
455
- country_code,
456
- intl_region
457
- } = WPGeo();
458
- Object.keys(remoteConfig).forEach(configKey => {
459
- if (country_code && configKey.split('|').includes(country_code.toLowerCase())) {
460
- myConfig = remoteConfig[configKey];
461
- } else if (intl_region === 'EEA' && configKey === 'eea') {
462
- myConfig = remoteConfig[configKey];
463
- }
464
- });
465
- // TODO: Check for billing country also
466
- // else if no country-specific config, use the default config
467
- if (typeof myConfig === 'undefined' && remoteConfig['_']) {
468
- myConfig = remoteConfig['_'];
469
- }
470
- return myConfig;
471
- };
472
-
473
- const hydrateLinks = str => {
474
- const array = str.split(/({{PRIVACY_POLICY}})/g);
475
- const chunks = array.map(str => {
476
- if (str === '{{PRIVACY_POLICY}}') {
477
- return React.createElement("a", {
478
- target: "_blank",
479
- style: {
480
- color: 'inherit'
481
- },
482
- className: "underline",
483
- href: "https://www.washingtonpost.com/privacy-policy/"
484
- }, "Privacy Policy");
485
- }
486
- return str;
487
- });
488
- const toReturn = chunks.reduce((prev, current) => React.createElement(React.Fragment, null, prev, current), React.createElement(React.Fragment, null));
489
- return toReturn;
490
- };
491
-
492
- const COOKIE = 'OptanonAlertBoxClosed';
493
- const checkCookie = () => {
494
- const value = getCookie(COOKIE) || '';
495
- // Wed May 15 2024 06:29:23 GMT-0500 (Central Daylight Time)
496
- // "Invalid date" is 12 characters long
497
- return value.length > 12;
498
- };
499
-
500
- const COOKIE$1 = 'OptanonAlertBoxClosed';
501
- const useOneTrustAlertBoxClosed = _ref => {
502
- let {
503
- allowCookieStore
504
- } = _ref;
505
- const [alertBoxClosed, setAlertBoxClosed] = useState();
506
- const [listenToCookieStore$1, setListenToCookieStore] = useState(false);
507
- const [listenToTcfApi, setListenToTcfApi] = useState(false);
508
- useEffect(() => {
509
- var _window;
510
- if (checkCookie()) {
511
- setAlertBoxClosed(true);
512
- return;
513
- }
514
- if (!window.__tcfapi) {
515
- console.warn('warning: __tcfapi not found');
516
- }
517
- if ((_window = window) !== null && _window !== void 0 && _window.cookieStore && allowCookieStore) {
518
- setListenToCookieStore(true);
519
- } else if (window.__tcfapi) {
520
- setListenToTcfApi(true);
521
- } else {
522
- console.warn('warning: neither cookieStore nor __tcfapi found');
523
- }
524
- }, []);
525
- useEffect(() => {
526
- let cleanupFn = () => {};
527
- if (listenToCookieStore$1 && window.cookieStore) {
528
- cleanupFn = listenToCookieStore(COOKIE$1, () => {
529
- if (checkCookie()) {
530
- setAlertBoxClosed(true);
531
- } else {
532
- setAlertBoxClosed(false);
533
- }
534
- });
535
- }
536
- return cleanupFn || (() => {});
537
- }, [listenToCookieStore$1]);
538
- useEffect(() => {
539
- let listenerId;
540
- if (listenToTcfApi && window.__tcfapi) {
541
- const callback = (_tcData, success) => {
542
- if (success) {
543
- listenerId = _tcData.listenerId;
544
- // tcData.eventStatus can be:
545
- // tcloaded means user has made a choice and we’re ready to check it
546
- // cmpuishown means the banner is shown
547
- // useractioncomplete means the user has interacted with the banner
548
- // but actually if the result for any of these is true, we just use the value of the cookie
549
- if (checkCookie()) {
550
- setAlertBoxClosed(true);
551
- }
552
- }
553
- };
554
- window.__tcfapi('addEventListener', 2, callback);
555
- }
556
- // cleanup fn
557
- return () => {
558
- if (window.__tcfapi && listenerId) window.__tcfapi('removeEventListener', 2, success => {
559
- console.debug(success);
560
- }, listenerId);
561
- };
562
- }, [listenToTcfApi]);
563
- return {
564
- alertBoxClosed,
565
- listenToCookieStore: listenToCookieStore$1,
566
- listenToTcfApi
567
- };
568
- };
569
-
570
- const DEDisclosure = _ref => {
571
- let {
572
- onFinished = () => {},
573
- allowCookieStore = true
574
- } = _ref;
575
- const [disclosure, setDisclosure] = useState(null);
576
- const [disclosureRendering, setDisclosureRendering] = useState(null);
577
- const [myConfig, setMyConfig] = useState();
578
- const {
579
- alertBoxClosed
580
- } = useOneTrustAlertBoxClosed({
581
- allowCookieStore
582
- });
583
- useEffect(() => {
584
- (async () => {
585
- const config = await getConfig();
586
- setMyConfig(config);
587
- if (!config) {
588
- console.error('No config found');
589
- }
590
- })();
591
- }, []);
592
- useEffect(() => {
593
- if (myConfig) {
594
- // step 3: set disclosure based on config
595
- // if config says to check onetrust, check onetrust
596
- if ('checkBannerStatus' in myConfig && myConfig.checkBannerStatus) {
597
- // check if onetrust is closed
598
- // if it is, show the after banner disclosure
599
- // if it is not, show the before banner disclosure
600
- if (alertBoxClosed) {
601
- setDisclosure(myConfig.disclosure_afterbanner);
602
- } else {
603
- setDisclosure(myConfig.disclosure_beforebanner);
604
- }
605
- } else if ('disclosure' in myConfig) {
606
- setDisclosure(myConfig.disclosure);
607
- } else {
608
- console.error('Invalid config');
609
- }
610
- }
611
- }, [myConfig, alertBoxClosed]);
612
- useEffect(() => {
613
- if (disclosure && Array.isArray(disclosure)) {
614
- setDisclosureRendering(disclosure.reduce((prev, current) => {
615
- return React.createElement(React.Fragment, null, prev, React.createElement("p", null, hydrateLinks(current)));
616
- }, React.createElement(React.Fragment, null)));
617
- // Is it ok to fire `onFinished` if still waiting for onetrust to load on the page?
618
- onFinished({
619
- isFinished: true,
620
- isError: false
621
- });
622
- }
623
- }, [disclosure]);
624
- return disclosure === null ? React.createElement("div", {
625
- "data-test-id": "de-disclosure-loading"
626
- }) : React.createElement("div", {
627
- "data-test-id": "de-disclosure"
628
- }, disclosureRendering);
629
- };
630
-
631
- const FirstPartyIngestDataTypes = {
632
- JOB_LEVEL: 'profile_job_level',
633
- JOB_INDUSTRY: 'profile_job_industry',
634
- JOB_TITLE: 'profile_job_title',
635
- PERSONAL_GOALS: 'personal_goals',
636
- HOBBIES: 'hobbies',
637
- PROFESSIONAL_GOALS: 'professional_goals',
638
- INDUSTRY: 'industry',
639
- NEWS_LOCATION: 'news_location',
640
- NY_PERSONAL_GOALS: 'new_year_personal_goals',
641
- NY_HOBBIES: 'new_year_hobbies',
642
- NY_PROFESSIONAL_GOALS: 'new_year_professional_goals',
643
- NY_INDUSTRY: 'new_year_industry',
644
- NY_NEWS_LOCATION: 'new_year_news_location'
645
- };
646
-
647
- export { AttributesState, CollectionBehaviors, DEDisclosure, DESelect, DeleteAttributeState, FirstPartyIngestDataTypes, IngestResponseState, IngestType, getAttributes, hasRequiredPrivacyCookies, push };
550
+ export { AttributesState, CollectionBehaviors, DESelect, IngestResponseState, getAttributes, hasRequiredPrivacyCookies };
648
551
  //# sourceMappingURL=subs-de-inputs.esm.js.map