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