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

package/dist/components/DEDisclosure/hooks/useOnetrustAlertBoxClosedPromise.d.ts

@@ -0,0 +1,23 @@
+import { ICookieStore } from '@washingtonpost/subs-sdk';
+interface TCData {
+    eventStatus: 'tcloaded' | 'cmpuishown' | 'useractioncomplete';
+    listenerId: number;
+    [key: string]: any;
+}
+type TCFAPIAddListener = (command: 'addEventListener', version: number, callback: (tcData: TCData, success: boolean) => void) => void;
+type TCFAPIRmListener = (command: 'removeEventListener', version: number, callback: (success: boolean) => void, listenerId: number) => void;
+type TCFAPIPing = (command: 'ping', version: number, callback: (pingReturn: any, success: boolean) => void) => void;
+declare global {
+    interface Window {
+        cookieStore?: ICookieStore;
+        __tcfapi?: TCFAPIAddListener & TCFAPIRmListener & TCFAPIPing;
+    }
+}
+export declare const useOneTrustAlertBoxClosed: ({ allowCookieStore, }: {
+    allowCookieStore: boolean;
+}) => {
+    alertBoxClosed: boolean | undefined;
+    listenToCookieStore: boolean;
+    listenToTcfApi: boolean;
+};
+export {};

package/dist/components/DEDisclosure/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface DisclosureProps {
+    /** callback function to be called when the disclosure is finished loading */
+    onFinished?: ({ isFinished, isError, }: {
+        isFinished: boolean;
+        isError: boolean;
+    }) => void;
+    /** ability to turn off cookiestore listener, primarily for testing purposes */
+    allowCookieStore?: boolean;
+}
+export declare const DEDisclosure: React.FC<DisclosureProps>;
+export {};

package/dist/components/DEDisclosure/utils/checkCookie.d.ts

@@ -0,0 +1 @@
+export declare const checkCookie: () => boolean;

package/dist/components/DEDisclosure/utils/getConfig.d.ts

@@ -0,0 +1,2 @@
+import { DisclosureConfigValue } from '../../../interfaces/disclosure';
+export declare const getConfig: () => Promise<DisclosureConfigValue | undefined>;

package/dist/components/DEDisclosure/utils/hydrateLinks.d.ts

@@ -0,0 +1,3 @@
+type hydrateLinksType = (str: string) => string | JSX.Element;
+export declare const hydrateLinks: hydrateLinksType;
+export {};

package/dist/components/DESelect/index.d.ts

@@ -4,7 +4,7 @@ interface DESelectProps {
     source: string;
     fieldName: string;
     label?: string;
-    dataDictionaryConfig?: Attribute;
+    dataDictionaryConfig?: Attribute | Readonly<Attribute>;
     defaultValue?: string;
     disabled?: boolean;
     submit: boolean;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export * from './interfaces/index';
 export * from './interfaces/twpdeu';
 export * from './utils/hasRequiredPrivacyCookies';
-export * from './services/dataEnrichment';
+export * from './utils/push';
+export * from './services/getAttributes';
 export * from './components/DESelect';
+export * from './components/DEDisclosure';

package/dist/interfaces/disclosure.d.ts

@@ -0,0 +1,8 @@
+export type DisclosureConfigValue = {
+    disclosure: string[];
+} & {
+    checkBannerStatus: boolean;
+    disclosure_beforebanner: string[];
+    disclosure_afterbanner: string[];
+};
+export type DisclosureConfig = Record<string, DisclosureConfigValue>;

package/dist/interfaces/index.d.ts

@@ -13,12 +13,12 @@ export type Attribute = {
     name: string;
     approved_for_use?: boolean;
     collection_behavior?: (typeof CollectionBehaviors)[keyof typeof CollectionBehaviors];
-    datatype: 'string';
+    datatype: string;
     explicit: boolean;
     multiple_value: boolean;
     last_modified_date: Number;
     date_created: Number;
-    values: Array<AttributeValue>;
+    values: AttributeValue[] | Readonly<AttributeValue[]>;
 };
 export declare const AttributesState: {
     readonly SUCCESS: "100";

package/dist/interfaces/twpdeu.d.ts

@@ -1,7 +1,8 @@
-import { getAttributes, ingest } from '../services/dataEnrichment';
+import { getAttributes } from '../services/getAttributes';
+import { push } from '../utils/push';
 export type TWPDEU = {
     getFieldConfigs: typeof getAttributes;
-    push: typeof ingest;
+    push: typeof push;
     version?: string;
 };
 declare global {

package/dist/services/getAttributes.d.ts

@@ -0,0 +1,6 @@
+import { Attribute } from '../interfaces';
+export declare const getAttributes: GetAttributesType;
+type GetAttributesType = ({ fieldName, }: {
+    fieldName: string;
+}) => Promise<Attribute[]>;
+export {};

package/dist/services/{dataEnrichment.d.ts → ingest.d.ts}

@@ -1,16 +1,11 @@
 import { ResponseStatus } from '@washingtonpost/subs-sdk';
-import { Attribute, IngestResponseState, IngestType } from '../interfaces';
-export declare const getAttributes: GetAttributesType;
-type GetAttributesType = ({ fieldName, }: {
-    fieldName: string;
-}) => Promise<Attribute[]>;
+import { IngestResponseState, IngestType } from '../interfaces';
 export declare const ingest: IngestType;
 type IngestType = ({ submitData: { fieldName, value }, source, }: {
     submitData: {
         fieldName: string;
         value: string;
     };
-    type?: (typeof IngestType)[keyof typeof IngestType];
     source: string;
 }) => Promise<{
     status: ResponseStatus;

package/dist/services/sendToGA.d.ts

@@ -0,0 +1,9 @@
+export declare const sendToGA: SendToGaType;
+type SendToGaType = ({ submitData: { fieldName, value }, source, }: {
+    submitData: {
+        fieldName: string;
+        value: string;
+    };
+    source: string;
+}) => Promise<true>;
+export {};

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

@@ -43,7 +43,7 @@ const hasRequiredPrivacyCookies = () => {
   return !!(wp_usp && countryCode === 'US');
 };
 
-const base = `${subsSdk.ENDPOINTS.base}/de/v1`;
+const base$1 = `${subsSdk.ENDPOINTS.base}/de/v1`;
 const attributesCache = {};
 const getAttributes = async ({
   fieldName
@@ -53,7 +53,7 @@ const getAttributes = async ({
   }
   const fieldNames = [fieldName];
   try {
-    const url = new URL(`${base}/attributes`);
+    const url = new URL(`${base$1}/attributes`);
     url.searchParams.set('attributes', fieldNames.join(','));
     const data = await fetch(url.toString(), {
       credentials: 'include',
@@ -72,34 +72,55 @@ const getAttributes = async ({
     return [];
   }
 };
+
+const sendGAEvent = props => {
+  if (typeof window === 'undefined') {
+    console.warn('NO WINDOW');
+    return;
+  }
+  // Initialize dataLayer if needed
+  window.dataLayer = window.dataLayer || [];
+  const eventData = {
+    ...props
+  };
+  window.dataLayer.push(eventData);
+};
+const sendToGA = async ({
+  submitData: {
+    fieldName,
+    value
+  },
+  source
+}) => {
+  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 = `${subsSdk.ENDPOINTS.base}/de/v1`;
 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,
+    type: IngestType.EXPLICIT,
     wapo_login_id,
     // TODO: move this to BE to read from cookie headers
     data: {
@@ -124,6 +145,50 @@ const ingest = async ({
   }
 };
 
+const isAnonymousWebview = () => {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+  const wp_wv = subsSdk.getCookie('wp_wv');
+  return !!(wp_wv && !subsSdk.isLoggedIn());
+};
+
+const push = async ({
+  submitData,
+  source
+}) => {
+  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] && "development" !== "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',
@@ -296,16 +361,14 @@ const DESelect = ({
     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 ? result.status !== subsSdk.ResponseStatus.SUCCESS : true;
+        const isError = result === true ? false : result ? result.status !== subsSdk.ResponseStatus.SUCCESS : true;
         onFinished({
           isFinished: true,
           isError
@@ -329,7 +392,8 @@ const DESelect = ({
     disabled: true
   } : {};
   // sort and filter out archived values
-  const values = config ? config.values.sort((a, b) => a.order - b.order).filter(value => value.archived !== true).filter(valuesFilter) : [];
+  // 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.createElement(SelectWrapper, null, children && React.createElement(wpdsUiKit.Select.Root, {
     onValueChange: e => {
       setSelected(e);
@@ -371,12 +435,194 @@ 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.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$1 = 'OptanonAlertBoxClosed';
+const checkCookie = () => {
+  const value = subsSdk.getCookie(COOKIE$1) || '';
+  // Wed May 15 2024 06:29:23 GMT-0500 (Central Daylight Time)
+  // "Invalid date" is 12 characters long
+  return value.length > 12;
+};
+
+const COOKIE = 'OptanonAlertBoxClosed';
+const useOneTrustAlertBoxClosed = ({
+  allowCookieStore
+}) => {
+  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, () => {
+        if (checkCookie()) {
+          setAlertBoxClosed(true);
+        }
+      });
+    }
+    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 = ({
+  onFinished = () => {},
+  allowCookieStore = true
+}) => {
+  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.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);
+};
+
 exports.AttributesState = AttributesState;
 exports.CollectionBehaviors = CollectionBehaviors;
+exports.DEDisclosure = DEDisclosure;
 exports.DESelect = DESelect;
 exports.IngestResponseState = IngestResponseState;
 exports.IngestType = IngestType;
 exports.getAttributes = getAttributes;
 exports.hasRequiredPrivacyCookies = hasRequiredPrivacyCookies;
-exports.ingest = ingest;
+exports.push = push;
 //# sourceMappingURL=subs-de-inputs.cjs.development.js.map