@washingtonpost/subs-de-inputs 0.0.1 → 0.1.0

package/dist/subs-de-inputs.esm.js

@@ -1,8 +1,33 @@
+import { getCookie, WPGeo, JSON_HEADERS, ENDPOINTS, ResponseStatus } from '@washingtonpost/subs-sdk';
 import React, { useState, useEffect } from 'react';
-import { Icon, theme, Select, styled } from '@washingtonpost/wpds-ui-kit';
-import { useWindowSize } from '@washingtonpost/subs-hooks';
-import { ChevronDown } from '@washingtonpost/wpds-assets';
-import { getCookie, WPGeo, ENDPOINTS, ResponseStatus } from '@washingtonpost/subs-sdk';
+import { Select, theme, styled } from '@washingtonpost/wpds-ui-kit';
+
+var CollectionBehaviors = {
+  COLLECT: 'COLLECT',
+  DO_NOT_COLLECT: 'DO_NOT_COLLECT'
+};
+var AttributesState = {
+  SUCCESS: '100'
+};
+var IngestResponseState = {
+  SUCCESS: '100',
+  SYSTEM_ERROR: '101',
+  INVALID_TYPE: '102',
+  INVALID_IDENTIFIER: '103',
+  INVALID_DATA: '104',
+  INVALID_ATTRIBUTE_DEFINITION: '105',
+  INVALID_META_DEFINITION: '106'
+};
+
+var hasRequiredPrivacyCookies = function hasRequiredPrivacyCookies() {
+  var _WPGeo;
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  var wp_usp = getCookie('wp_usp');
+  var countryCode = (_WPGeo = WPGeo()) == null ? void 0 : _WPGeo.country_code;
+  return !!(wp_usp && countryCode === 'US');
+};
 
 function _regeneratorRuntime() {
   _regeneratorRuntime = function () {
@@ -350,432 +375,166 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-var I1pDataInputTypes;
-(function (I1pDataInputTypes) {
-  I1pDataInputTypes["DROPDOWN"] = "dropdown";
-})(I1pDataInputTypes || (I1pDataInputTypes = {}));
-var I1pIngestDataTypes;
-(function (I1pIngestDataTypes) {
-  I1pIngestDataTypes["JOB_LEVEL"] = "profile_job_level";
-  I1pIngestDataTypes["JOB_INDUSTRY"] = "profile_job_industry";
-  I1pIngestDataTypes["NY_PERSONAL_GOALS"] = "new_year_personal_goals";
-  I1pIngestDataTypes["NY_HOBBIES"] = "new_year_hobbies";
-  I1pIngestDataTypes["NY_PROFESSIONAL_GOALS"] = "new_year_professional_goals";
-  I1pIngestDataTypes["NY_INDUSTRY"] = "new_year_industry";
-  I1pIngestDataTypes["NY_NEWS_LOCATION"] = "new_year_news_location";
-})(I1pIngestDataTypes || (I1pIngestDataTypes = {}));
-var I1pDataIngestTypes;
-(function (I1pDataIngestTypes) {
-  I1pDataIngestTypes["EXPLICIT"] = "explicit";
-  I1pDataIngestTypes["IMPLICIT"] = "implicit";
-})(I1pDataIngestTypes || (I1pDataIngestTypes = {}));
-var IngestResponseState;
-(function (IngestResponseState) {
-  IngestResponseState["SUCCESS"] = "100";
-  IngestResponseState["SYSTEM_ERROR"] = "101";
-  IngestResponseState["INVALID_TYPE"] = "102";
-  IngestResponseState["INVALID_IDENTIFIER"] = "103";
-  IngestResponseState["INVALID_DATA"] = "104";
-  IngestResponseState["INVALID_ATTRIBUTE_DEFINITION"] = "105";
-  IngestResponseState["INVALID_META_DEFINITION"] = "106";
-})(IngestResponseState || (IngestResponseState = {}));
-
-var StyledMobileSelect = /*#__PURE__*/styled('select', {
-  padding: '12px 16px 12px 6px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  width: '100%',
-  backgroundColor: '$secondary',
-  color: '$primary',
-  fontFamily: '$meta',
-  fontSize: '$100',
-  fontWeight: '$light',
-  lineHeight: '$125',
-  paddingBlockRight: '$125',
-  textOverflow: 'ellipsis',
-  position: 'relative',
-  borderColor: 'transparent',
-  borderRightWidth: '10px',
-  borderRightColor: 'transparent',
-  appearance: 'none',
-  '-webkit-appearance': 'none',
-  '&:disabled': {
-    backgroundColor: theme.colors.disabled,
-    borderColor: theme.colors.disabled,
-    color: theme.colors.onDisabled,
-    cursor: 'not-allowed'
-  }
-});
-var StyledSelectWrapper = /*#__PURE__*/styled('div', {
-  width: '100%',
-  maxWidth: '380px',
-  borderRadius: '$012',
-  borderColor: '$subtle',
-  borderStyle: 'solid',
-  borderWidth: '1px',
-  backgroundColor: '$secondary',
-  position: 'relative'
-});
-var StyledMobileOption = /*#__PURE__*/styled('option', {
-  fontFamily: 'inherit',
-  fontSize: 'inherit',
-  color: 'inherit'
-});
-var Dropdown = function Dropdown(_ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    values = _ref.values,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required,
-    defaultValue = _ref.defaultValue,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _useState = useState(),
-    answer = _useState[0],
-    setAnswer = _useState[1];
-  var _useWindowSize = useWindowSize(),
-    isMobileSize = _useWindowSize.isMobileSize;
-  useEffect(function () {
-    if (answer) onChange(answer);
-  }, [answer]);
-  var defaultValueProp = defaultValue ? {
-    defaultValue: defaultValue
-  } : {};
-  var disabledProp = disabled ? {
-    disabled: true
-  } : {};
-  var defaultValuePropMobile = function defaultValuePropMobile(value) {
-    return value === defaultValue ? {
-      selected: true
-    } : {};
-  };
-  return isMobileSize ? React.createElement(StyledSelectWrapper, null, React.createElement(StyledMobileSelect, _extends({
-    id: "",
-    required: required,
-    onChange: function onChange(e) {
-      return setAnswer(e.target.value);
-    },
-    placeholder: label
-  }, disabledProp), React.createElement("label", null, label), React.createElement(StyledMobileOption, {
-    value: "",
-    disabled: true,
-    selected: true,
-    style: {
-      color: '#666666'
-    }
-  }, label), values.map(function (value) {
-    return React.createElement(StyledMobileOption, _extends({
-      value: value,
-      key: value
-    }, defaultValuePropMobile(value)), value);
-  })), React.createElement(Icon, {
-    label: "",
-    size: "100",
-    fill: theme.colors['gray80'],
-    style: {
-      pointerEvents: 'none',
-      position: 'absolute',
-      right: '10px',
-      top: '50%',
-      transform: 'translateY(-50%)'
-    }
-  }, React.createElement(ChevronDown, {
-    style: {
-      position: 'absolute',
-      right: '10px'
-    }
-  }))) : React.createElement(Select.Root, _extends({
-    onValueChange: function onValueChange(e) {
-      return setAnswer(e);
-    },
-    required: required
-  }, defaultValueProp, disabledProp), React.createElement(Select.Trigger, {
-    "data-test-id": id + "-dropdown-label"
-  }, React.createElement(Select.Label, null, label), React.createElement(Select.Value, null)), React.createElement(Select.Content, {
-    css: {
-      zIndex: 8
-    },
-    "data-test-id": id + "-dropdown-input"
-  }, values.map(function (value) {
-    return React.createElement(Select.Item, {
-      value: value,
-      key: value
-    }, value);
-  })));
-};
-
-var hasRequiredPrivacyCookies = function hasRequiredPrivacyCookies() {
-  var _WPGeo;
-  if (typeof window === 'undefined') {
-    return false;
-  }
-  var wp_usp = getCookie('wp_usp');
-  var countryCode = (_WPGeo = WPGeo()) == null ? void 0 : _WPGeo.country_code;
-  return !!(wp_usp && countryCode === 'US');
-};
-
 var base = ENDPOINTS.base + "/de/v1";
-var JSONHeaders = {
-  Accept: 'application/json',
-  'Content-Type': 'application/json'
-};
-var ingest = /*#__PURE__*/function () {
-  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(submitData, metadata) {
-    var url, wapo_login_id, jucid, ga, payload, response, json;
+var attributesCache = {};
+var getAttributes = /*#__PURE__*/function () {
+  var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
+    var fieldName, fieldNames, url, data, json, attributes;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          url = base + "/ingest";
-          wapo_login_id = getCookie('wapo_login_id');
-          if (hasRequiredPrivacyCookies()) {
-            _context.next = 4;
+          fieldName = _ref.fieldName;
+          if (!attributesCache[fieldName]) {
+            _context.next = 3;
             break;
           }
-          throw new Error('does not satisfy cookie check');
-        case 4:
-          jucid = localStorage.getItem('uuid');
-          ga = getCookie('_ga');
-          payload = {
-            jucid: jucid,
-            ga: ga,
-            type: I1pDataIngestTypes.EXPLICIT,
-            wapo_login_id: wapo_login_id,
-            data: submitData,
-            metadata: metadata
-          };
-          _context.prev = 7;
-          _context.next = 10;
-          return fetch(url, {
-            method: 'POST',
+          return _context.abrupt("return", attributesCache[fieldName]);
+        case 3:
+          fieldNames = [fieldName];
+          _context.prev = 4;
+          url = new URL(base + "/attributes");
+          url.searchParams.set('attributes', fieldNames.join(','));
+          _context.next = 9;
+          return fetch(url.toString(), {
             credentials: 'include',
-            headers: JSONHeaders,
-            body: JSON.stringify(payload)
+            headers: JSON_HEADERS
           });
-        case 10:
-          response = _context.sent;
-          _context.next = 13;
-          return response.json();
-        case 13:
+        case 9:
+          data = _context.sent;
+          _context.next = 12;
+          return data.json();
+        case 12:
           json = _context.sent;
-          return _context.abrupt("return", json);
-        case 17:
-          _context.prev = 17;
-          _context.t0 = _context["catch"](7);
-          console.debug(_context.t0);
-          return _context.abrupt("return", null);
-        case 21:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[7, 17]]);
-  }));
-  return function ingest(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
-
-var sendGAEvent = function sendGAEvent(props) {
-  if (typeof window === 'undefined') {
-    if (process.env.NODE_ENV !== "production") console.warn('NO WINDOW');
-    return;
-  }
-  // Initialize dataLayer if needed
-  window.dataLayer = window.dataLayer || [];
-  var eventData = _extends({}, props);
-  window.dataLayer.push(eventData);
-};
-var sendToGA = /*#__PURE__*/function () {
-  var _ref = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(submitData, metadata) {
-    var keysToSubmit;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          if (hasRequiredPrivacyCookies()) {
-            _context.next = 2;
+          if (!(data.ok && json.status === ResponseStatus.SUCCESS)) {
+            _context.next = 19;
             break;
           }
-          throw new Error('does not satisfy cookie check');
-        case 2:
-          keysToSubmit = Object.keys(submitData);
-          keysToSubmit.forEach(function (key) {
-            if (Object.values(I1pIngestDataTypes).includes(key)) {
-              var _sendGAEvent;
-              sendGAEvent((_sendGAEvent = {
-                event: 'site-onpage-click',
-                action: 'site-onpage-click',
-                category: 'profile',
-                label: key,
-                'de-label': key
-              }, _sendGAEvent[key] = submitData[key], _sendGAEvent.section = 'profile', _sendGAEvent.subsection = metadata.source, _sendGAEvent));
-            }
-          });
-          return _context.abrupt("return", true);
-        case 5:
+          attributes = json.attributes || [];
+          attributesCache[fieldName] = attributes;
+          return _context.abrupt("return", attributes);
+        case 19:
+          return _context.abrupt("return", []);
+        case 20:
+          _context.next = 26;
+          break;
+        case 22:
+          _context.prev = 22;
+          _context.t0 = _context["catch"](4);
+          console.debug(_context.t0);
+          return _context.abrupt("return", []);
+        case 26:
         case "end":
           return _context.stop();
       }
-    }, _callee);
+    }, _callee, null, [[4, 22]]);
   }));
-  return function sendToGA(_x, _x2) {
-    return _ref.apply(this, arguments);
+  return function getAttributes(_x) {
+    return _ref2.apply(this, arguments);
   };
 }();
 
-var getDefaultSubmitData = function getDefaultSubmitData(formOptions) {
-  var defaultSubmitData = {};
-  formOptions.forEach(function (formOption) {
-    if (formOption.default_value) {
-      if (formOption.input_type === I1pDataInputTypes.DROPDOWN && formOption.values) {
-        var values = formOption.values.filter(function (value) {
-          return value.archived !== true;
-        }).map(function (value) {
-          return value.name;
-        });
-        if (values.includes(formOption.default_value)) {
-          defaultSubmitData[formOption.id] = [formOption.default_value];
-        }
-      } else {
-        defaultSubmitData[formOption.id] = [formOption.default_value];
-      }
-    }
-  });
-  return defaultSubmitData;
-};
-
-var DataEnrichmentForm = function DataEnrichmentForm(_ref) {
-  var submit = _ref.submit,
-    source = _ref.source,
-    ingestType = _ref.ingestType,
-    _ref$formOptions = _ref.formOptions,
-    formOptions = _ref$formOptions === void 0 ? [] : _ref$formOptions,
+var DESelect = function DESelect(_ref) {
+  var source = _ref.source,
+    fieldName = _ref.fieldName,
+    label = _ref.label,
+    dataDictionaryConfig = _ref.dataDictionaryConfig,
+    defaultValue = _ref.defaultValue,
+    disabled = _ref.disabled,
+    submit = _ref.submit,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
     _ref$onFinished = _ref.onFinished,
     onFinished = _ref$onFinished === void 0 ? function () {} : _ref$onFinished,
-    _ref$handleSubmit = _ref.handleSubmit,
-    handleSubmit = _ref$handleSubmit === void 0 ? function () {} : _ref$handleSubmit,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  var _useState = useState(false),
-    render = _useState[0],
-    setRender = _useState[1];
-  var _useState2 = useState(getDefaultSubmitData(formOptions)),
-    submitData = _useState2[0],
-    setSubmitData = _useState2[1];
-  var _useState3 = useState(true),
-    missingRequiredFields = _useState3[0],
-    setMissingRequiredFields = _useState3[1];
+    _ref$valuesFilter = _ref.valuesFilter,
+    valuesFilter = _ref$valuesFilter === void 0 ? function () {
+      return true;
+    } : _ref$valuesFilter,
+    children = _ref.children;
+  var _useState = useState(dataDictionaryConfig),
+    config = _useState[0],
+    setConfig = _useState[1];
+  var _useState2 = useState(''),
+    selected = _useState2[0],
+    setSelected = _useState2[1];
   useEffect(function () {
-    if (hasRequiredPrivacyCookies()) {
-      setRender(true);
-    } else {
-      console.error('does not satisfy cookie check');
-      onFinished(true, true);
+    if (children) {
+      if (process.env.NODE_ENV !== "production") {
+        console.debug('childen props', children);
+      }
+      return;
+    }
+    if (!config) {
+      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var config;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return getAttributes({
+                fieldName: fieldName
+              });
+            case 2:
+              config = _context.sent;
+              if (process.env.NODE_ENV !== "production") {
+                console.debug('config from API', config);
+              }
+              setConfig(config[0]);
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }))();
     }
   }, []);
   useEffect(function () {
-    // check for required fields that haven't been completed yet
-    var missingRequiredFields = formOptions.filter(function (option) {
-      if (option.required && option.input_type === I1pDataInputTypes.DROPDOWN && !submitData[option.id]) {
-        return true;
+    if (submit && selected) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error('push not implemented', selected, source);
       }
-      return false;
-    });
-    setMissingRequiredFields(missingRequiredFields.length > 0);
-    onChange(submitData, missingRequiredFields.length === 0);
-  }, [JSON.stringify(submitData)]);
-  useEffect(function () {
-    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-      var result, isError, _result;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!submit) {
-              _context.next = 17;
-              break;
-            }
-            if (!(Object.keys(submitData).length >= 1)) {
-              _context.next = 16;
-              break;
-            }
-            if (!(ingestType === I1pDataIngestTypes.EXPLICIT)) {
-              _context.next = 10;
-              break;
-            }
-            _context.next = 5;
-            return ingest(submitData, {
-              source: source
-            });
-          case 5:
-            result = _context.sent;
-            isError = result && result.status !== ResponseStatus.SUCCESS;
-            onFinished(true, isError);
-            _context.next = 14;
-            break;
-          case 10:
-            _context.next = 12;
-            return sendToGA(submitData, {
-              source: source
-            });
-          case 12:
-            _result = _context.sent;
-            onFinished(true, _result);
-          case 14:
-            _context.next = 17;
-            break;
-          case 16:
-            onFinished(true, false);
-          case 17:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }))();
-  }, [submit]);
-  if (!render) return React.createElement(React.Fragment, null);
-  return React.createElement("form", {
-    method: "post",
-    onSubmit: function onSubmit(e) {
-      e.preventDefault();
-      handleSubmit(e);
+      onFinished({
+        isFinished: true,
+        isError: false
+      });
     }
-  }, formOptions.map(function (formOption) {
-    if (formOption.input_type === I1pDataInputTypes.DROPDOWN && formOption.values) {
-      // sort and filter out archived values
-      var values = formOption.values.sort(function (a, b) {
-        return a.order - b.order;
-      }).filter(function (value) {
-        return value.archived !== true;
+  }, [submit, selected]);
+  if (!(children || config)) {
+    return React.createElement("span", null, "loading");
+  }
+  var defaultValueProp = defaultValue ? {
+    defaultValue: defaultValue
+  } : {};
+  var disabledProp = disabled ? {
+    disabled: true
+  } : {};
+  // sort and filter out archived values
+  var values = config ? config.values.sort(function (a, b) {
+    return a.order - b.order;
+  }).filter(function (value) {
+    return value.archived !== true;
+  }).filter(valuesFilter) : [];
+  return React.createElement(SelectWrapper, null, React.createElement(Select.Root, _extends({
+    onValueChange: function onValueChange(e) {
+      onChange({
+        value: e
       });
-      return React.createElement(OptionWrapper, {
-        "data-private": true,
-        key: formOption.id
-      }, React.createElement(Dropdown, {
-        id: formOption.id,
-        label: formOption.input_label,
-        values: values.map(function (value) {
-          return value.name;
-        }),
-        required: formOption.required,
-        defaultValue: formOption.default_value,
-        onChange: function onChange(value) {
-          var _extends2;
-          setSubmitData(_extends({}, submitData, (_extends2 = {}, _extends2[formOption.id] = [value], _extends2)));
-        },
-        disabled: disabled
-      }));
+      setSelected(e);
     }
-    return null;
-  }), React.createElement("input", {
-    type: "submit",
-    hidden: true,
-    disabled: missingRequiredFields || disabled,
-    "data-qa": "1p-data-inputs-submit"
-  }));
+  }, defaultValueProp, disabledProp), children ? children : null, !children && config && React.createElement(React.Fragment, null, React.createElement(Select.Trigger, {
+    "data-test-id": config.name + "-select-trigger"
+  }, React.createElement(Select.Label, null, label || config.name), React.createElement(Select.Value, null)), React.createElement(Select.Content, {
+    css: {
+      zIndex: theme.zIndices.page
+    },
+    "data-test-id": config.name + "-select-content"
+  }, values.map(function (value) {
+    return React.createElement(Select.Item, {
+      value: value.name,
+      key: value.name
+    }, value.name);
+  })))));
 };
-var OptionWrapper = /*#__PURE__*/styled('div', {
+var SelectWrapper = /*#__PURE__*/styled('div', {
   boxSizing: 'border-box',
   display: 'flex',
   marginBottom: '$100',
@@ -788,5 +547,5 @@ var OptionWrapper = /*#__PURE__*/styled('div', {
   }
 });
 
-export { DataEnrichmentForm, I1pDataIngestTypes, I1pDataInputTypes, I1pIngestDataTypes, IngestResponseState, hasRequiredPrivacyCookies, ingest, sendToGA };
+export { AttributesState, CollectionBehaviors, DESelect, IngestResponseState, getAttributes, hasRequiredPrivacyCookies };
 //# sourceMappingURL=subs-de-inputs.esm.js.map