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

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

@@ -1,4 +1,4 @@
-import { getCookie, WPGeo, JSON_HEADERS, ResponseStatus, ENDPOINTS, isLoggedIn, listenToCookieStore } from '@washingtonpost/subs-sdk';
+import { getCookie, WPGeo, JSON_HEADERS, ResponseStatus, ENDPOINTS } from '@washingtonpost/subs-sdk';
 import React, { useState, useEffect } from 'react';
 import { Icon, theme, Select, styled } from '@washingtonpost/wpds-ui-kit';
 import { useWindowSize, useScript, ScriptStatus } from '@washingtonpost/subs-hooks';
@@ -11,12 +11,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'
@@ -47,10 +41,9 @@ const hasRequiredPrivacyCookies = () => {
 
 const base = `${ENDPOINTS.base}/de/v1`;
 const attributesCache = {};
-const getAttributes = async _ref => {
-  let {
-    fieldName
-  } = _ref;
+const getAttributes = async ({
+  fieldName
+}) => {
   if (attributesCache[fieldName]) {
     return attributesCache[fieldName];
   }
@@ -75,58 +68,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 = `${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 = 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 = 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]
     },
@@ -149,51 +120,6 @@ const ingest = async _ref => {
   }
 };
 
-const isAnonymousWebview = () => {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-  const wp_wv = getCookie('wp_wv');
-  return !!(wp_wv && !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__*/styled('select', {
   padding: '12px 16px 12px 6px',
   display: 'flex',
@@ -235,21 +161,20 @@ const StyledMobileOption = /*#__PURE__*/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] = useState();
   const {
     isMobileSize
@@ -280,7 +205,6 @@ const Dropdown = _ref => {
     id: "",
     required: required,
     onChange: e => setAnswer(e.target.value),
-    placeholder: label,
     ...disabledProp
   }, React.createElement("label", null, label), React.createElement(StyledMobileOption, {
     value: "",
@@ -296,7 +220,7 @@ const Dropdown = _ref => {
   }, value))), React.createElement(Icon, {
     label: "",
     size: "100",
-    fill: theme.colors['gray80'],
+    fill: theme.colors.gray80,
     style: {
       pointerEvents: 'none',
       position: 'absolute',
@@ -328,20 +252,19 @@ const Dropdown = _ref => {
 };
 
 const scriptSrc = `${ENDPOINTS.staticAssets === 'https://subscribe.washingtonpost.com/static' ? 'https://www.washingtonpost.com/subscribe/static/' : 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] = useState(dataDictionaryConfig);
   const [selected, setSelected] = useState('');
   const scriptStatus = useScript(scriptSrc);
@@ -369,14 +292,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 !== ResponseStatus.SUCCESS : true;
+        const isError = result ? result.status !== ResponseStatus.SUCCESS : true;
         onFinished({
           isFinished: true,
           isError
@@ -400,8 +325,7 @@ 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) : [];
+  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(Select.Root, {
     onValueChange: e => {
       setSelected(e);
@@ -443,206 +367,5 @@ const SelectWrapper = /*#__PURE__*/styled('div', {
   }
 });
 
-const configSrc = `${ENDPOINTS.base === 'https://subscribe.washingtonpost.com' ? 'https://www.washingtonpost.com/subscribe' : 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
-  } = 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.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.createElement(React.Fragment, null, prev, current), React.createElement(React.Fragment, null));
-  return toReturn;
-};
-
-const COOKIE = 'OptanonAlertBoxClosed';
-const checkCookie = () => {
-  const value = 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] = useState();
-  const [listenToCookieStore$1, setListenToCookieStore] = useState(false);
-  const [listenToTcfApi, setListenToTcfApi] = useState(false);
-  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');
-    }
-  }, []);
-  useEffect(() => {
-    let cleanupFn = () => {};
-    if (listenToCookieStore$1 && window.cookieStore) {
-      cleanupFn = listenToCookieStore(COOKIE$1, () => {
-        if (checkCookie()) {
-          setAlertBoxClosed(true);
-        } else {
-          setAlertBoxClosed(false);
-        }
-      });
-    }
-    return cleanupFn || (() => {});
-  }, [listenToCookieStore$1]);
-  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: listenToCookieStore$1,
-    listenToTcfApi
-  };
-};
-
-const DEDisclosure = _ref => {
-  let {
-    onFinished = () => {},
-    allowCookieStore = true
-  } = _ref;
-  const [disclosure, setDisclosure] = useState(null);
-  const [disclosureRendering, setDisclosureRendering] = useState(null);
-  const [myConfig, setMyConfig] = useState();
-  const {
-    alertBoxClosed
-  } = useOneTrustAlertBoxClosed({
-    allowCookieStore
-  });
-  useEffect(() => {
-    (async () => {
-      const config = await getConfig();
-      setMyConfig(config);
-      if (!config) {
-        console.error('No config found');
-      }
-    })();
-  }, []);
-  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]);
-  useEffect(() => {
-    if (disclosure && Array.isArray(disclosure)) {
-      setDisclosureRendering(disclosure.reduce((prev, current) => {
-        return React.createElement(React.Fragment, null, prev, React.createElement("p", null, hydrateLinks(current)));
-      }, React.createElement(React.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.createElement("div", {
-    "data-test-id": "de-disclosure-loading"
-  }) : React.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'
-};
-
-export { AttributesState, CollectionBehaviors, DEDisclosure, DESelect, DeleteAttributeState, FirstPartyIngestDataTypes, IngestResponseState, IngestType, getAttributes, hasRequiredPrivacyCookies, push };
+export { AttributesState, CollectionBehaviors, DESelect, IngestResponseState, IngestType, getAttributes, hasRequiredPrivacyCookies, ingest };
 //# sourceMappingURL=subs-de-inputs.esm.js.map