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

package/dist/subs-de-inputs.cjs.development.js

@@ -2,11 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var subsSdk = require('@washingtonpost/subs-sdk');
 var React = require('react');
-var React__default = _interopDefault(React);
 var wpdsUiKit = require('@washingtonpost/wpds-ui-kit');
 var subsHooks = require('@washingtonpost/subs-hooks');
 var wpdsAssets = require('@washingtonpost/wpds-assets');
@@ -18,12 +15,6 @@ const CollectionBehaviors = {
 const AttributesState = {
   SUCCESS: '100'
 };
-const DeleteAttributeState = {
-  SUCCESS: '150',
-  SYSTEM_ERROR: '151',
-  INVALID_ATTRIBUTE_NAME: '152',
-  INVALID_ATTRIBUTE_NOT_EXISTS: '153'
-};
 const IngestType = {
   EXPLICIT: 'explicit',
   IMPLICIT: 'implicit'
@@ -54,10 +45,9 @@ const hasRequiredPrivacyCookies = () => {
 
 const base = `${subsSdk.ENDPOINTS.base}/de/v1`;
 const attributesCache = {};
-const getAttributes = async _ref => {
-  let {
-    fieldName
-  } = _ref;
+const getAttributes = async ({
+  fieldName
+}) => {
   if (attributesCache[fieldName]) {
     return attributesCache[fieldName];
   }
@@ -82,58 +72,36 @@ const getAttributes = async _ref => {
     return [];
   }
 };
-
-const 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 || [];
-  const eventData = {
-    ...props
-  };
-  window.dataLayer.push(eventData);
-};
-const sendToGA = async _ref => {
-  let {
-    submitData: {
-      fieldName,
-      value
-    },
-    source
-  } = _ref;
-  sendGAEvent({
-    event: 'site-onpage-click',
-    action: 'site-onpage-click',
-    category: 'profile',
-    label: fieldName,
-    'de-label': fieldName,
-    [fieldName]: value,
-    section: 'profile',
-    subsection: source
-  });
-  return true;
-};
-
-const base$1 = `${subsSdk.ENDPOINTS.base}/de/v1`;
-const ingest = async _ref => {
-  let {
-    submitData: {
-      fieldName,
-      value
-    },
-    source
-  } = _ref;
-  const url = `${base$1}/ingest`;
+const ingest = async ({
+  submitData: {
+    fieldName,
+    value
+  },
+  type = IngestType.IMPLICIT,
+  source
+}) => {
+  const url = `${base}/ingest`;
   const wapo_login_id = subsSdk.getCookie('wapo_login_id');
+  if (!hasRequiredPrivacyCookies()) {
+    throw new Error('does not satisfy cookie check');
+  }
+  let attributeInfo = attributesCache[fieldName];
+  if (!attributeInfo) {
+    attributeInfo = await getAttributes({
+      fieldName
+    });
+  }
+  if (attributeInfo[0] && attributeInfo[0].name === fieldName && attributeInfo[0].collection_behavior === CollectionBehaviors.DO_NOT_COLLECT) {
+    throw new Error('do not collect');
+  }
   const jucid = localStorage.getItem('uuid');
   const ga = subsSdk.getCookie('_ga');
   const payload = {
     jucid,
     ga,
-    type: IngestType.EXPLICIT,
+    type,
     wapo_login_id,
+    // TODO: move this to BE to read from cookie headers
     data: {
       [fieldName]: [value]
     },
@@ -156,51 +124,6 @@ const ingest = async _ref => {
   }
 };
 
-const isAnonymousWebview = () => {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-  const wp_wv = subsSdk.getCookie('wp_wv');
-  return !!(wp_wv && !subsSdk.isLoggedIn());
-};
-
-const push = async _ref => {
-  let {
-    submitData,
-    source
-  } = _ref;
-  if (!hasRequiredPrivacyCookies()) {
-    throw new Error('does not satisfy cookie check');
-  }
-  if (isAnonymousWebview()) {
-    throw new Error('does not satisfy cookie check');
-  }
-  const {
-    fieldName
-  } = submitData;
-  const attributeInfo = await getAttributes({
-    fieldName
-  });
-  if (attributeInfo[0] && attributeInfo[0].name === fieldName && attributeInfo[0].collection_behavior === CollectionBehaviors.DO_NOT_COLLECT) {
-    throw new Error('do not collect');
-  }
-  const type = attributeInfo[0] && attributeInfo[0].explicit === true ? IngestType.EXPLICIT : IngestType.IMPLICIT;
-  if (!attributeInfo[0] && process.env.NODE_ENV !== "production") {
-    console.warn(`no attribute info found for ${fieldName}, assuming implicit`);
-  }
-  if (type === IngestType.EXPLICIT) {
-    return ingest({
-      submitData,
-      source
-    });
-  } else {
-    return sendToGA({
-      submitData,
-      source
-    });
-  }
-};
-
 const StyledMobileSelect = /*#__PURE__*/wpdsUiKit.styled('select', {
   padding: '12px 16px 12px 6px',
   display: 'flex',
@@ -242,21 +165,20 @@ const StyledMobileOption = /*#__PURE__*/wpdsUiKit.styled('option', {
   fontSize: 'inherit',
   color: 'inherit'
 });
-/**
- * Dropdown component.  Uses wpds-ui-kit on desktop and native select on mobile.
- * @param {IDropdownProps} props The props.
- * @returns {React.ReactElement} The dropdown.
+/**
+ * Dropdown component.  Uses wpds-ui-kit on desktop and native select on mobile.
+ * @param {IDropdownProps} props The props.
+ * @returns {React.ReactElement} The dropdown.
  */
-const Dropdown = _ref => {
-  let {
-    id,
-    label,
-    values,
-    required = false,
-    defaultValue,
-    onChange = () => {},
-    disabled = false
-  } = _ref;
+const Dropdown = ({
+  id,
+  label,
+  values,
+  required = false,
+  defaultValue,
+  onChange = () => {},
+  disabled = false
+}) => {
   const [answer, setAnswer] = React.useState();
   const {
     isMobileSize
@@ -283,27 +205,26 @@ const Dropdown = _ref => {
       selected: true
     } : {};
   };
-  return isMobileSize ? React__default.createElement(StyledSelectWrapper, null, React__default.createElement(StyledMobileSelect, {
+  return isMobileSize ? React.createElement(StyledSelectWrapper, null, React.createElement(StyledMobileSelect, {
     id: "",
     required: required,
     onChange: e => setAnswer(e.target.value),
-    placeholder: label,
     ...disabledProp
-  }, React__default.createElement("label", null, label), React__default.createElement(StyledMobileOption, {
+  }, React.createElement("label", null, label), React.createElement(StyledMobileOption, {
     value: "",
     disabled: true,
     selected: true,
     style: {
       color: '#666666'
     }
-  }, label), values.map(value => React__default.createElement(StyledMobileOption, {
+  }, label), values.map(value => React.createElement(StyledMobileOption, {
     value: value,
     key: value,
     ...defaultValuePropMobile(value)
-  }, value))), React__default.createElement(wpdsUiKit.Icon, {
+  }, value))), React.createElement(wpdsUiKit.Icon, {
     label: "",
     size: "100",
-    fill: wpdsUiKit.theme.colors['gray80'],
+    fill: wpdsUiKit.theme.colors.gray80,
     style: {
       pointerEvents: 'none',
       position: 'absolute',
@@ -311,44 +232,43 @@ const Dropdown = _ref => {
       top: '50%',
       transform: 'translateY(-50%)'
     }
-  }, React__default.createElement(wpdsAssets.ChevronDown, {
+  }, React.createElement(wpdsAssets.ChevronDown, {
     style: {
       position: 'absolute',
       right: '10px'
     }
-  }))) : React__default.createElement(wpdsUiKit.Select.Root, {
+  }))) : React.createElement(wpdsUiKit.Select.Root, {
     onValueChange: e => setAnswer(e),
     required: required,
     ...defaultValueProp,
     ...disabledProp
-  }, React__default.createElement(wpdsUiKit.Select.Trigger, {
+  }, React.createElement(wpdsUiKit.Select.Trigger, {
     "data-test-id": `${id}-select-trigger`
-  }, React__default.createElement(wpdsUiKit.Select.Label, null, label), React__default.createElement(wpdsUiKit.Select.Value, null)), React__default.createElement(wpdsUiKit.Select.Content, {
+  }, React.createElement(wpdsUiKit.Select.Label, null, label), React.createElement(wpdsUiKit.Select.Value, null)), React.createElement(wpdsUiKit.Select.Content, {
     css: {
       zIndex: wpdsUiKit.theme.zIndices.page
     },
     "data-test-id": `${id}-select-content`
-  }, values.map(value => React__default.createElement(wpdsUiKit.Select.Item, {
+  }, values.map(value => React.createElement(wpdsUiKit.Select.Item, {
     value: value,
     key: value
   }, value))));
 };
 
 const scriptSrc = `${subsSdk.ENDPOINTS.staticAssets === 'https://subscribe.washingtonpost.com/static' ? 'https://www.washingtonpost.com/subscribe/static/' : subsSdk.ENDPOINTS.staticAssets}/de-utils/twpdeu.min.js`;
-const DESelect = _ref => {
-  let {
-    source,
-    fieldName,
-    label,
-    dataDictionaryConfig,
-    defaultValue,
-    disabled,
-    submit,
-    onChange = () => {},
-    onFinished = () => {},
-    valuesFilter = () => true,
-    children
-  } = _ref;
+const DESelect = ({
+  source,
+  fieldName,
+  label,
+  dataDictionaryConfig,
+  defaultValue,
+  disabled,
+  submit,
+  onChange = () => {},
+  onFinished = () => {},
+  valuesFilter = () => true,
+  children
+}) => {
   const [config, setConfig] = React.useState(dataDictionaryConfig);
   const [selected, setSelected] = React.useState('');
   const scriptStatus = subsHooks.useScript(scriptSrc);
@@ -376,14 +296,16 @@ const DESelect = _ref => {
     const submitSelected = async () => {
       try {
         var _window2;
+        // TODO: Log to GA?
         const result = await ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.__twpdeu) === null || _window2 === void 0 ? void 0 : _window2.push({
           submitData: {
             fieldName,
             value: selected
           },
+          type: config !== null && config !== void 0 && config.explicit ? IngestType.EXPLICIT : IngestType.IMPLICIT,
           source
         }));
-        const isError = result === true ? false : result ? result.status !== subsSdk.ResponseStatus.SUCCESS : true;
+        const isError = result ? result.status !== subsSdk.ResponseStatus.SUCCESS : true;
         onFinished({
           isFinished: true,
           isError
@@ -407,9 +329,8 @@ const DESelect = _ref => {
     disabled: true
   } : {};
   // sort and filter out archived values
-  // Note: config.values may be readonly
-  const values = config ? [...config.values].sort((a, b) => a.order - b.order).filter(value => value.archived !== true).filter(valuesFilter) : [];
-  return React__default.createElement(SelectWrapper, null, children && React__default.createElement(wpdsUiKit.Select.Root, {
+  const values = config ? config.values.sort((a, b) => a.order - b.order).filter(value => value.archived !== true).filter(valuesFilter) : [];
+  return React.createElement(SelectWrapper, null, children && React.createElement(wpdsUiKit.Select.Root, {
     onValueChange: e => {
       setSelected(e);
       onChange({
@@ -418,12 +339,12 @@ const DESelect = _ref => {
     },
     ...defaultValueProp,
     ...disabledProp
-  }, children), !children && !config && React__default.createElement(Dropdown, {
+  }, children), !children && !config && React.createElement(Dropdown, {
     id: 'loading',
     label: 'Loading...',
     values: [],
     disabled: true
-  }), !children && config && React__default.createElement(Dropdown, {
+  }), !children && config && React.createElement(Dropdown, {
     id: config.name,
     label: label || config.name,
     onChange: e => {
@@ -450,216 +371,12 @@ const SelectWrapper = /*#__PURE__*/wpdsUiKit.styled('div', {
   }
 });
 
-const configSrc = `${subsSdk.ENDPOINTS.base === 'https://subscribe.washingtonpost.com' ? 'https://www.washingtonpost.com/subscribe' : subsSdk.ENDPOINTS.base}/config/de/disclosure.json`;
-const getConfig = async () => {
-  let myConfig = undefined;
-  // step 1: fetch config
-  const response = await fetch(configSrc);
-  const remoteConfig = await response.json();
-  // step 2: figure out which part of the config to use
-  // if country- or region-specific config found, use that
-  const {
-    country_code,
-    intl_region
-  } = subsSdk.WPGeo();
-  Object.keys(remoteConfig).forEach(configKey => {
-    if (country_code && configKey.split('|').includes(country_code.toLowerCase())) {
-      myConfig = remoteConfig[configKey];
-    } else if (intl_region === 'EEA' && configKey === 'eea') {
-      myConfig = remoteConfig[configKey];
-    }
-  });
-  // TODO: Check for billing country also
-  // else if no country-specific config, use the default config
-  if (typeof myConfig === 'undefined' && remoteConfig['_']) {
-    myConfig = remoteConfig['_'];
-  }
-  return myConfig;
-};
-
-const hydrateLinks = str => {
-  const array = str.split(/({{PRIVACY_POLICY}})/g);
-  const chunks = array.map(str => {
-    if (str === '{{PRIVACY_POLICY}}') {
-      return React__default.createElement("a", {
-        target: "_blank",
-        style: {
-          color: 'inherit'
-        },
-        className: "underline",
-        href: "https://www.washingtonpost.com/privacy-policy/"
-      }, "Privacy Policy");
-    }
-    return str;
-  });
-  const toReturn = chunks.reduce((prev, current) => React__default.createElement(React__default.Fragment, null, prev, current), React__default.createElement(React__default.Fragment, null));
-  return toReturn;
-};
-
-const COOKIE = 'OptanonAlertBoxClosed';
-const checkCookie = () => {
-  const value = subsSdk.getCookie(COOKIE) || '';
-  // Wed May 15 2024 06:29:23 GMT-0500 (Central Daylight Time)
-  // "Invalid date" is 12 characters long
-  return value.length > 12;
-};
-
-const COOKIE$1 = 'OptanonAlertBoxClosed';
-const useOneTrustAlertBoxClosed = _ref => {
-  let {
-    allowCookieStore
-  } = _ref;
-  const [alertBoxClosed, setAlertBoxClosed] = React.useState();
-  const [listenToCookieStore, setListenToCookieStore] = React.useState(false);
-  const [listenToTcfApi, setListenToTcfApi] = React.useState(false);
-  React.useEffect(() => {
-    var _window;
-    if (checkCookie()) {
-      setAlertBoxClosed(true);
-      return;
-    }
-    if (!window.__tcfapi) {
-      console.warn('warning: __tcfapi not found');
-    }
-    if ((_window = window) !== null && _window !== void 0 && _window.cookieStore && allowCookieStore) {
-      setListenToCookieStore(true);
-    } else if (window.__tcfapi) {
-      setListenToTcfApi(true);
-    } else {
-      console.warn('warning: neither cookieStore nor __tcfapi found');
-    }
-  }, []);
-  React.useEffect(() => {
-    let cleanupFn = () => {};
-    if (listenToCookieStore && window.cookieStore) {
-      cleanupFn = subsSdk.listenToCookieStore(COOKIE$1, () => {
-        if (checkCookie()) {
-          setAlertBoxClosed(true);
-        } else {
-          setAlertBoxClosed(false);
-        }
-      });
-    }
-    return cleanupFn || (() => {});
-  }, [listenToCookieStore]);
-  React.useEffect(() => {
-    let listenerId;
-    if (listenToTcfApi && window.__tcfapi) {
-      const callback = (_tcData, success) => {
-        if (success) {
-          listenerId = _tcData.listenerId;
-          // tcData.eventStatus can be:
-          // tcloaded means user has made a choice and we’re ready to check it
-          // cmpuishown means the banner is shown
-          // useractioncomplete means the user has interacted with the banner
-          // but actually if the result for any of these is true, we just use the value of the cookie
-          if (checkCookie()) {
-            setAlertBoxClosed(true);
-          }
-        }
-      };
-      window.__tcfapi('addEventListener', 2, callback);
-    }
-    // cleanup fn
-    return () => {
-      if (window.__tcfapi && listenerId) window.__tcfapi('removeEventListener', 2, success => {
-        console.debug(success);
-      }, listenerId);
-    };
-  }, [listenToTcfApi]);
-  return {
-    alertBoxClosed,
-    listenToCookieStore,
-    listenToTcfApi
-  };
-};
-
-const DEDisclosure = _ref => {
-  let {
-    onFinished = () => {},
-    allowCookieStore = true
-  } = _ref;
-  const [disclosure, setDisclosure] = React.useState(null);
-  const [disclosureRendering, setDisclosureRendering] = React.useState(null);
-  const [myConfig, setMyConfig] = React.useState();
-  const {
-    alertBoxClosed
-  } = useOneTrustAlertBoxClosed({
-    allowCookieStore
-  });
-  React.useEffect(() => {
-    (async () => {
-      const config = await getConfig();
-      setMyConfig(config);
-      if (!config) {
-        console.error('No config found');
-      }
-    })();
-  }, []);
-  React.useEffect(() => {
-    if (myConfig) {
-      // step 3: set disclosure based on config
-      // if config says to check onetrust, check onetrust
-      if ('checkBannerStatus' in myConfig && myConfig.checkBannerStatus) {
-        // check if onetrust is closed
-        // if it is, show the after banner disclosure
-        // if it is not, show the before banner disclosure
-        if (alertBoxClosed) {
-          setDisclosure(myConfig.disclosure_afterbanner);
-        } else {
-          setDisclosure(myConfig.disclosure_beforebanner);
-        }
-      } else if ('disclosure' in myConfig) {
-        setDisclosure(myConfig.disclosure);
-      } else {
-        console.error('Invalid config');
-      }
-    }
-  }, [myConfig, alertBoxClosed]);
-  React.useEffect(() => {
-    if (disclosure && Array.isArray(disclosure)) {
-      setDisclosureRendering(disclosure.reduce((prev, current) => {
-        return React__default.createElement(React__default.Fragment, null, prev, React__default.createElement("p", null, hydrateLinks(current)));
-      }, React__default.createElement(React__default.Fragment, null)));
-      // Is it ok to fire `onFinished` if still waiting for onetrust to load on the page?
-      onFinished({
-        isFinished: true,
-        isError: false
-      });
-    }
-  }, [disclosure]);
-  return disclosure === null ? React__default.createElement("div", {
-    "data-test-id": "de-disclosure-loading"
-  }) : React__default.createElement("div", {
-    "data-test-id": "de-disclosure"
-  }, disclosureRendering);
-};
-
-const FirstPartyIngestDataTypes = {
-  JOB_LEVEL: 'profile_job_level',
-  JOB_INDUSTRY: 'profile_job_industry',
-  JOB_TITLE: 'profile_job_title',
-  PERSONAL_GOALS: 'personal_goals',
-  HOBBIES: 'hobbies',
-  PROFESSIONAL_GOALS: 'professional_goals',
-  INDUSTRY: 'industry',
-  NEWS_LOCATION: 'news_location',
-  NY_PERSONAL_GOALS: 'new_year_personal_goals',
-  NY_HOBBIES: 'new_year_hobbies',
-  NY_PROFESSIONAL_GOALS: 'new_year_professional_goals',
-  NY_INDUSTRY: 'new_year_industry',
-  NY_NEWS_LOCATION: 'new_year_news_location'
-};
-
 exports.AttributesState = AttributesState;
 exports.CollectionBehaviors = CollectionBehaviors;
-exports.DEDisclosure = DEDisclosure;
 exports.DESelect = DESelect;
-exports.DeleteAttributeState = DeleteAttributeState;
-exports.FirstPartyIngestDataTypes = FirstPartyIngestDataTypes;
 exports.IngestResponseState = IngestResponseState;
 exports.IngestType = IngestType;
 exports.getAttributes = getAttributes;
 exports.hasRequiredPrivacyCookies = hasRequiredPrivacyCookies;
-exports.push = push;
+exports.ingest = ingest;
 //# sourceMappingURL=subs-de-inputs.cjs.development.js.map