@xyo-network/react-advertising 4.1.6 → 4.1.8

package/dist/browser/index.mjs

@@ -5,6 +5,7 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { usePromise } from "@xylabs/react-promise";
 import { UtmSchema } from "@xyo-network/advertising-payload-plugins";
 import { useMemo as useMemo2 } from "react";
+import { useSearchParams as useSearchParams2 } from "react-router-dom";
 
 // src/utm/lib/UtmStorageArchivist.ts
 import { isUtm } from "@xyo-network/advertising-payload-plugins";
@@ -83,8 +84,9 @@ var useDefaultUtmPageState = /* @__PURE__ */ __name(() => useDefaultPageState({
 }), "useDefaultUtmPageState");
 
 // src/utm/hooks/useCaptureUtmLocation.ts
-var useCaptureUtmLocation = /* @__PURE__ */ __name(() => {
+var useCaptureUtmLocation = /* @__PURE__ */ __name((clearAfterCapture = true) => {
   const [{ utm_campaign, utm_content, utm_medium, utm_source, utm_term }] = useDefaultUtmPageState();
+  const [, setSearchParams] = useSearchParams2();
   const [sessionStorageArchivist, error] = usePromise(async () => {
     return await UtmStorageArchivist();
   }, []);
@@ -92,12 +94,26 @@ var useCaptureUtmLocation = /* @__PURE__ */ __name(() => {
     const utm = {
       schema: UtmSchema
     };
-    if (utm_campaign) utm.utm_campaign = utm_campaign;
-    if (utm_content) utm.utm_content = utm_content;
-    if (utm_medium) utm.utm_medium = utm_medium;
-    if (utm_source) utm.utm_source = utm_source;
-    if (utm_term) utm.utm_term = utm_term;
-    return utm;
+    const utmParams = {
+      utm_campaign,
+      utm_content,
+      utm_medium,
+      utm_source,
+      utm_term
+    };
+    const foundUpdatedUtmParams = Object.entries(utmParams).some(([key, value]) => {
+      return key.includes("utm_") && value;
+    });
+    if (foundUpdatedUtmParams) {
+      if (utm_campaign) utm.utm_campaign = utm_campaign;
+      if (utm_content) utm.utm_content = utm_content;
+      if (utm_medium) utm.utm_medium = utm_medium;
+      if (utm_source) utm.utm_source = utm_source;
+      if (utm_term) utm.utm_term = utm_term;
+      return utm;
+    } else {
+      return null;
+    }
   }, [
     utm_campaign,
     utm_content,
@@ -110,10 +126,20 @@ var useCaptureUtmLocation = /* @__PURE__ */ __name(() => {
       await sessionStorageArchivist.insert([
         utmPayload
       ]);
+      if (clearAfterCapture) {
+        setSearchParams(() => {
+          const newParams = new URLSearchParams();
+          for (const value of Object.values(UtmQueryParamStrings)) {
+            newParams.delete(value);
+          }
+          return newParams;
+        });
+      }
     }
   }, [
     sessionStorageArchivist,
-    utmPayload
+    utmPayload,
+    clearAfterCapture
   ]);
   return {
     utmPayload,

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utm/hooks/useCaptureUtmLocation.ts","../../src/utm/lib/UtmStorageArchivist.ts","../../src/utm/hooks/useDefaultPageState.ts","../../src/utm/hooks/useDefaultUtmPageState.ts"],"sourcesContent":["import { usePromise } from '@xylabs/react-promise'\nimport { type Utm, UtmSchema } from '@xyo-network/advertising-payload-plugins'\nimport { useMemo } from 'react'\n\nimport { UtmStorageArchivist } from '../lib/index.ts'\nimport { useDefaultUtmPageState } from './useDefaultUtmPageState.ts'\n\nexport const useCaptureUtmLocation = () => {\n  const [{\n    utm_campaign, utm_content, utm_medium, utm_source, utm_term,\n  }] = useDefaultUtmPageState()\n\n  const [sessionStorageArchivist, error] = usePromise(async () => {\n    return await UtmStorageArchivist()\n  }, [])\n\n  const utmPayload = useMemo(() => {\n    // Construct the base UTM payload\n    const utm: Utm = { schema: UtmSchema }\n\n    // Conditionally add all the UTM parameters present\n    if (utm_campaign) utm.utm_campaign = utm_campaign\n    if (utm_content) utm.utm_content = utm_content\n    if (utm_medium) utm.utm_medium = utm_medium\n    if (utm_source) utm.utm_source = utm_source\n    if (utm_term) utm.utm_term = utm_term\n\n    return utm\n  }, [utm_campaign, utm_content, utm_medium, utm_source, utm_term])\n\n  const [,insertError] = usePromise(async () => {\n    if (utmPayload && sessionStorageArchivist) {\n      await sessionStorageArchivist.insert([utmPayload])\n    }\n  }, [sessionStorageArchivist, utmPayload])\n\n  return { utmPayload, error: error ?? insertError }\n}\n","import type { Utm } from '@xyo-network/advertising-payload-plugins'\nimport { isUtm } from '@xyo-network/advertising-payload-plugins'\nimport { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'\n\nconst STORAGE_NAME_SPACE = 'utm' as const\n\nlet archivist: StorageArchivist | undefined\n\n/**\n * Find or create a single instance of the UtmStorageArchivist\n * @returns Archivist instance\n */\nexport const UtmStorageArchivist = async () => {\n  if (archivist) {\n    return archivist\n  } else {\n    archivist = await StorageArchivist.create({\n      account: 'random',\n      config: {\n        schema: StorageArchivistConfigSchema, namespace: STORAGE_NAME_SPACE, type: 'session',\n      },\n    })\n    return archivist\n  }\n}\n\nexport const LatestUtmPayload = async (): Promise<Utm | undefined> => {\n  const archivist = await UtmStorageArchivist()\n  return (await archivist.all()).findLast(isUtm) as Utm\n}\n","import { useMemo } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nimport type { PageStateKeys } from '../lib/index.ts'\n\nexport interface DefaultPageStateParams<TQueryParams extends PageStateKeys = PageStateKeys> {\n  queryParams: TQueryParams\n}\n\nexport type DefaultPageStateReturn<TPageStateKeys extends PageStateKeys = PageStateKeys> = [\n  Record<TPageStateKeys[number], string>,\n  (source: keyof DefaultPageStateParams, key: TPageStateKeys[number], value: string) => void,\n]\n\n/**\n * Hook to get default page state as key value pairs from various sources.  It provides a convenient abstraction over free form\n * page state like query params by narrowing the used params and centralizing their logic.\n *\n * Future work could include adding support for localStorage, sessionStorage, and precedence of sources.\n * @param defaultPageStateParams various sources of default page state (i.e. queryParams, localStorage, etc.)\n * @returns\n */\nexport const useDefaultPageState = <TQueryParams extends PageStateKeys = PageStateKeys>(\n  { queryParams }: DefaultPageStateParams<TQueryParams>,\n): DefaultPageStateReturn<TQueryParams> => {\n  const [searchParams, setSearchParams] = useSearchParams()\n\n  const patchDefaultPageState = (source: keyof DefaultPageStateParams, key: TQueryParams[number], value: string) => {\n    switch (source) {\n      case 'queryParams': {\n        setSearchParams((prevSearchParams) => {\n          const newSearchParams = new URLSearchParams(prevSearchParams)\n          newSearchParams.set(key, value)\n          return newSearchParams\n        })\n        break\n      }\n      default: {\n        throw new Error(`Invalid source for default page state: ${source}`)\n      }\n    }\n  }\n\n  const queryParamsState = useMemo(() => {\n    if (!queryParams) return {} as Record<TQueryParams[number], string>\n    let defaultState = {} as Record<TQueryParams[number], string>\n    for (const [key, value] of searchParams.entries()) {\n      if (queryParams.includes(key)) {\n        defaultState[key as TQueryParams[number]] = value\n      }\n    }\n    return defaultState\n  }, [searchParams, queryParams])\n\n  return [queryParamsState, patchDefaultPageState]\n}\n","import { useDefaultPageState } from './useDefaultPageState.ts'\n\nexport const UtmQueryParamStrings = {\n  utmCampaign: 'utm_campaign',\n  utmContent: 'utm_content',\n  utmMedium: 'utm_medium',\n  utmSource: 'utm_source',\n  utmTerm: 'utm_term',\n} as const\n\nexport type UtmQueryParams = typeof UtmQueryParamStrings[keyof typeof UtmQueryParamStrings]\n\n/** Get the default page state for utm values from specific query params */\nexport const useDefaultUtmPageState = () => useDefaultPageState<UtmQueryParams[]>({ queryParams: Object.values(UtmQueryParamStrings) })\n"],"mappings":";;;;AAAA,SAASA,kBAAkB;AAC3B,SAAmBC,iBAAiB;AACpC,SAASC,WAAAA,gBAAe;;;ACDxB,SAASC,aAAa;AACtB,SAASC,kBAAkBC,oCAAoC;AAE/D,IAAMC,qBAAqB;AAE3B,IAAIC;AAMG,IAAMC,sBAAsB,mCAAA;AACjC,MAAID,WAAW;AACb,WAAOA;EACT,OAAO;AACLA,gBAAY,MAAME,iBAAiBC,OAAO;MACxCC,SAAS;MACTC,QAAQ;QACNC,QAAQC;QAA8BC,WAAWT;QAAoBU,MAAM;MAC7E;IACF,CAAA;AACA,WAAOT;EACT;AACF,GAZmC;AAc5B,IAAMU,mBAAmB,mCAAA;AAC9B,QAAMV,aAAY,MAAMC,oBAAAA;AACxB,UAAQ,MAAMD,WAAUW,IAAG,GAAIC,SAASC,KAAAA;AAC1C,GAHgC;;;AC1BhC,SAASC,eAAe;AACxB,SAASC,uBAAuB;AAqBzB,IAAMC,sBAAsB,wBACjC,EAAEC,YAAW,MAAwC;AAErD,QAAM,CAACC,cAAcC,eAAAA,IAAmBC,gBAAAA;AAExC,QAAMC,wBAAwB,wBAACC,QAAsCC,KAA2BC,UAAAA;AAC9F,YAAQF,QAAAA;MACN,KAAK,eAAe;AAClBH,wBAAgB,CAACM,qBAAAA;AACf,gBAAMC,kBAAkB,IAAIC,gBAAgBF,gBAAAA;AAC5CC,0BAAgBE,IAAIL,KAAKC,KAAAA;AACzB,iBAAOE;QACT,CAAA;AACA;MACF;MACA,SAAS;AACP,cAAM,IAAIG,MAAM,0CAA0CP,MAAAA,EAAQ;MACpE;IACF;EACF,GAd8B;AAgB9B,QAAMQ,mBAAmBC,QAAQ,MAAA;AAC/B,QAAI,CAACd,YAAa,QAAO,CAAC;AAC1B,QAAIe,eAAe,CAAC;AACpB,eAAW,CAACT,KAAKC,KAAAA,KAAUN,aAAae,QAAO,GAAI;AACjD,UAAIhB,YAAYiB,SAASX,GAAAA,GAAM;AAC7BS,qBAAaT,GAAAA,IAA+BC;MAC9C;IACF;AACA,WAAOQ;EACT,GAAG;IAACd;IAAcD;GAAY;AAE9B,SAAO;IAACa;IAAkBT;;AAC5B,GAjCmC;;;ACpB5B,IAAMc,uBAAuB;EAClCC,aAAa;EACbC,YAAY;EACZC,WAAW;EACXC,WAAW;EACXC,SAAS;AACX;AAKO,IAAMC,yBAAyB,6BAAMC,oBAAsC;EAAEC,aAAaC,OAAOC,OAAOV,oBAAAA;AAAsB,CAAA,GAA/F;;;AHN/B,IAAMW,wBAAwB,6BAAA;AACnC,QAAM,CAAC,EACLC,cAAcC,aAAaC,YAAYC,YAAYC,SAAQ,CAC5D,IAAIC,uBAAAA;AAEL,QAAM,CAACC,yBAAyBC,KAAAA,IAASC,WAAW,YAAA;AAClD,WAAO,MAAMC,oBAAAA;EACf,GAAG,CAAA,CAAE;AAEL,QAAMC,aAAaC,SAAQ,MAAA;AAEzB,UAAMC,MAAW;MAAEC,QAAQC;IAAU;AAGrC,QAAId,aAAcY,KAAIZ,eAAeA;AACrC,QAAIC,YAAaW,KAAIX,cAAcA;AACnC,QAAIC,WAAYU,KAAIV,aAAaA;AACjC,QAAIC,WAAYS,KAAIT,aAAaA;AACjC,QAAIC,SAAUQ,KAAIR,WAAWA;AAE7B,WAAOQ;EACT,GAAG;IAACZ;IAAcC;IAAaC;IAAYC;IAAYC;GAAS;AAEhE,QAAM,CAAA,EAAEW,WAAAA,IAAeP,WAAW,YAAA;AAChC,QAAIE,cAAcJ,yBAAyB;AACzC,YAAMA,wBAAwBU,OAAO;QAACN;OAAW;IACnD;EACF,GAAG;IAACJ;IAAyBI;GAAW;AAExC,SAAO;IAAEA;IAAYH,OAAOA,SAASQ;EAAY;AACnD,GA9BqC;","names":["usePromise","UtmSchema","useMemo","isUtm","StorageArchivist","StorageArchivistConfigSchema","STORAGE_NAME_SPACE","archivist","UtmStorageArchivist","StorageArchivist","create","account","config","schema","StorageArchivistConfigSchema","namespace","type","LatestUtmPayload","all","findLast","isUtm","useMemo","useSearchParams","useDefaultPageState","queryParams","searchParams","setSearchParams","useSearchParams","patchDefaultPageState","source","key","value","prevSearchParams","newSearchParams","URLSearchParams","set","Error","queryParamsState","useMemo","defaultState","entries","includes","UtmQueryParamStrings","utmCampaign","utmContent","utmMedium","utmSource","utmTerm","useDefaultUtmPageState","useDefaultPageState","queryParams","Object","values","useCaptureUtmLocation","utm_campaign","utm_content","utm_medium","utm_source","utm_term","useDefaultUtmPageState","sessionStorageArchivist","error","usePromise","UtmStorageArchivist","utmPayload","useMemo","utm","schema","UtmSchema","insertError","insert"]}
+{"version":3,"sources":["../../src/utm/hooks/useCaptureUtmLocation.ts","../../src/utm/lib/UtmStorageArchivist.ts","../../src/utm/hooks/useDefaultPageState.ts","../../src/utm/hooks/useDefaultUtmPageState.ts"],"sourcesContent":["import { usePromise } from '@xylabs/react-promise'\nimport { type Utm, UtmSchema } from '@xyo-network/advertising-payload-plugins'\nimport { useMemo } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nimport { UtmStorageArchivist } from '../lib/index.ts'\nimport { useDefaultUtmPageState, UtmQueryParamStrings } from './useDefaultUtmPageState.ts'\n\nexport const useCaptureUtmLocation = (clearAfterCapture = true) => {\n  const [{\n    utm_campaign, utm_content, utm_medium, utm_source, utm_term,\n  }] = useDefaultUtmPageState()\n  const [,setSearchParams] = useSearchParams()\n\n  const [sessionStorageArchivist, error] = usePromise(async () => {\n    return await UtmStorageArchivist()\n  }, [])\n\n  const utmPayload = useMemo(() => {\n    // Construct the base UTM payload\n    const utm: Utm = { schema: UtmSchema }\n\n    // determine if there's a utm field that still has a value\n    // if there is none, it means that either the page loaded\n    // with none or they've already been captured\n    const utmParams = {\n      utm_campaign, utm_content, utm_medium, utm_source, utm_term,\n    }\n    const foundUpdatedUtmParams = Object.entries(utmParams).some(([key, value]) => {\n      return key.includes('utm_') && value\n    })\n\n    if (foundUpdatedUtmParams) {\n      // Conditionally add all the UTM parameters present\n      if (utm_campaign) utm.utm_campaign = utm_campaign\n      if (utm_content) utm.utm_content = utm_content\n      if (utm_medium) utm.utm_medium = utm_medium\n      if (utm_source) utm.utm_source = utm_source\n      if (utm_term) utm.utm_term = utm_term\n\n      return utm\n    } else {\n      return null\n    }\n  }, [utm_campaign, utm_content, utm_medium, utm_source, utm_term])\n\n  const [,insertError] = usePromise(async () => {\n    if (utmPayload && sessionStorageArchivist) {\n      // insert params into session storage\n      await sessionStorageArchivist.insert([utmPayload])\n\n      if (clearAfterCapture) {\n        // remove the utm params from the URL\n        setSearchParams(() => {\n          const newParams = new URLSearchParams()\n          for (const value of Object.values(UtmQueryParamStrings)) {\n            newParams.delete(value)\n          }\n          return newParams\n        })\n      }\n    }\n  }, [sessionStorageArchivist, utmPayload, clearAfterCapture])\n\n  return { utmPayload, error: error ?? insertError }\n}\n","import type { Utm } from '@xyo-network/advertising-payload-plugins'\nimport { isUtm } from '@xyo-network/advertising-payload-plugins'\nimport { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'\n\nconst STORAGE_NAME_SPACE = 'utm' as const\n\nlet archivist: StorageArchivist | undefined\n\n/**\n * Find or create a single instance of the UtmStorageArchivist\n * @returns Archivist instance\n */\nexport const UtmStorageArchivist = async () => {\n  if (archivist) {\n    return archivist\n  } else {\n    archivist = await StorageArchivist.create({\n      account: 'random',\n      config: {\n        schema: StorageArchivistConfigSchema, namespace: STORAGE_NAME_SPACE, type: 'session',\n      },\n    })\n    return archivist\n  }\n}\n\nexport const LatestUtmPayload = async (): Promise<Utm | undefined> => {\n  const archivist = await UtmStorageArchivist()\n  return (await archivist.all()).findLast(isUtm) as Utm\n}\n","import { useMemo } from 'react'\nimport { useSearchParams } from 'react-router-dom'\n\nimport type { PageStateKeys } from '../lib/index.ts'\n\nexport interface DefaultPageStateParams<TQueryParams extends PageStateKeys = PageStateKeys> {\n  queryParams: TQueryParams\n}\n\nexport type DefaultPageStateReturn<TPageStateKeys extends PageStateKeys = PageStateKeys> = [\n  Record<TPageStateKeys[number], string>,\n  (source: keyof DefaultPageStateParams, key: TPageStateKeys[number], value: string) => void,\n]\n\n/**\n * Hook to get default page state as key value pairs from various sources.  It provides a convenient abstraction over free form\n * page state like query params by narrowing the used params and centralizing their logic.\n *\n * Future work could include adding support for localStorage, sessionStorage, and precedence of sources.\n * @param defaultPageStateParams various sources of default page state (i.e. queryParams, localStorage, etc.)\n * @returns\n */\nexport const useDefaultPageState = <TQueryParams extends PageStateKeys = PageStateKeys>(\n  { queryParams }: DefaultPageStateParams<TQueryParams>,\n): DefaultPageStateReturn<TQueryParams> => {\n  const [searchParams, setSearchParams] = useSearchParams()\n\n  const patchDefaultPageState = (source: keyof DefaultPageStateParams, key: TQueryParams[number], value: string) => {\n    switch (source) {\n      case 'queryParams': {\n        setSearchParams((prevSearchParams) => {\n          const newSearchParams = new URLSearchParams(prevSearchParams)\n          newSearchParams.set(key, value)\n          return newSearchParams\n        })\n        break\n      }\n      default: {\n        throw new Error(`Invalid source for default page state: ${source}`)\n      }\n    }\n  }\n\n  const queryParamsState = useMemo(() => {\n    if (!queryParams) return {} as Record<TQueryParams[number], string>\n    let defaultState = {} as Record<TQueryParams[number], string>\n    for (const [key, value] of searchParams.entries()) {\n      if (queryParams.includes(key)) {\n        defaultState[key as TQueryParams[number]] = value\n      }\n    }\n    return defaultState\n  }, [searchParams, queryParams])\n\n  return [queryParamsState, patchDefaultPageState]\n}\n","import { useDefaultPageState } from './useDefaultPageState.ts'\n\nexport const UtmQueryParamStrings = {\n  utmCampaign: 'utm_campaign',\n  utmContent: 'utm_content',\n  utmMedium: 'utm_medium',\n  utmSource: 'utm_source',\n  utmTerm: 'utm_term',\n} as const\n\nexport type UtmQueryParams = typeof UtmQueryParamStrings[keyof typeof UtmQueryParamStrings]\n\n/** Get the default page state for utm values from specific query params */\nexport const useDefaultUtmPageState = () => useDefaultPageState<UtmQueryParams[]>({ queryParams: Object.values(UtmQueryParamStrings) })\n"],"mappings":"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","names":["usePromise","UtmSchema","useMemo","useSearchParams","isUtm","StorageArchivist","StorageArchivistConfigSchema","STORAGE_NAME_SPACE","archivist","UtmStorageArchivist","StorageArchivist","create","account","config","schema","StorageArchivistConfigSchema","namespace","type","LatestUtmPayload","all","findLast","isUtm","useMemo","useSearchParams","useDefaultPageState","queryParams","searchParams","setSearchParams","useSearchParams","patchDefaultPageState","source","key","value","prevSearchParams","newSearchParams","URLSearchParams","set","Error","queryParamsState","useMemo","defaultState","entries","includes","UtmQueryParamStrings","utmCampaign","utmContent","utmMedium","utmSource","utmTerm","useDefaultUtmPageState","useDefaultPageState","queryParams","Object","values","useCaptureUtmLocation","clearAfterCapture","utm_campaign","utm_content","utm_medium","utm_source","utm_term","useDefaultUtmPageState","setSearchParams","useSearchParams","sessionStorageArchivist","error","usePromise","UtmStorageArchivist","utmPayload","useMemo","utm","schema","UtmSchema","utmParams","foundUpdatedUtmParams","Object","entries","some","key","value","includes","insertError","insert","newParams","URLSearchParams","values","UtmQueryParamStrings","delete"]}

package/dist/browser/utm/hooks/useCaptureUtmLocation.d.ts

@@ -1,6 +1,6 @@
 import { type Utm } from '@xyo-network/advertising-payload-plugins';
-export declare const useCaptureUtmLocation: () => {
-    utmPayload: Utm;
+export declare const useCaptureUtmLocation: (clearAfterCapture?: boolean) => {
+    utmPayload: Utm | null;
     error: Error | undefined;
 };
 //# sourceMappingURL=useCaptureUtmLocation.d.ts.map

package/dist/browser/utm/hooks/useCaptureUtmLocation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCaptureUtmLocation.d.ts","sourceRoot":"","sources":["../../../../src/utm/hooks/useCaptureUtmLocation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAa,MAAM,0CAA0C,CAAA;AAM9E,eAAO,MAAM,qBAAqB;;;CA8BjC,CAAA"}
+{"version":3,"file":"useCaptureUtmLocation.d.ts","sourceRoot":"","sources":["../../../../src/utm/hooks/useCaptureUtmLocation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,GAAG,EAAa,MAAM,0CAA0C,CAAA;AAO9E,eAAO,MAAM,qBAAqB;;;CAyDjC,CAAA"}

package/dist/browser/utm/hooks/useDefaultPageState.d.ts

@@ -6,5 +6,13 @@ export type DefaultPageStateReturn<TPageStateKeys extends PageStateKeys = PageSt
     Record<TPageStateKeys[number], string>,
     (source: keyof DefaultPageStateParams, key: TPageStateKeys[number], value: string) => void
 ];
+/**
+ * Hook to get default page state as key value pairs from various sources.  It provides a convenient abstraction over free form
+ * page state like query params by narrowing the used params and centralizing their logic.
+ *
+ * Future work could include adding support for localStorage, sessionStorage, and precedence of sources.
+ * @param defaultPageStateParams various sources of default page state (i.e. queryParams, localStorage, etc.)
+ * @returns
+ */
 export declare const useDefaultPageState: <TQueryParams extends PageStateKeys = PageStateKeys>({ queryParams }: DefaultPageStateParams<TQueryParams>) => DefaultPageStateReturn<TQueryParams>;
 //# sourceMappingURL=useDefaultPageState.d.ts.map

package/dist/browser/utm/hooks/useDefaultPageState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDefaultPageState.d.ts","sourceRoot":"","sources":["../../../../src/utm/hooks/useDefaultPageState.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,MAAM,WAAW,sBAAsB,CAAC,YAAY,SAAS,aAAa,GAAG,aAAa;IACxF,WAAW,EAAE,YAAY,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,CAAC,cAAc,SAAS,aAAa,GAAG,aAAa,IAAI;IACzF,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACtC,CAAC,MAAM,EAAE,MAAM,sBAAsB,EAAE,GAAG,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;CAC3F,CAAA;AAUD,eAAO,MAAM,mBAAmB,GAAI,YAAY,SAAS,aAAa,mCACnD,sBAAsB,CAAC,YAAY,CAAC,KACpD,sBAAsB,CAAC,YAAY,CA+BrC,CAAA"}
+{"version":3,"file":"useDefaultPageState.d.ts","sourceRoot":"","sources":["../../../../src/utm/hooks/useDefaultPageState.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAEpD,MAAM,WAAW,sBAAsB,CAAC,YAAY,SAAS,aAAa,GAAG,aAAa;IACxF,WAAW,EAAE,YAAY,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,CAAC,cAAc,SAAS,aAAa,GAAG,aAAa,IAAI;IACzF,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IACtC,CAAC,MAAM,EAAE,MAAM,sBAAsB,EAAE,GAAG,EAAE,cAAc,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;CAC3F,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,GAAI,YAAY,SAAS,aAAa,mCACnD,sBAAsB,CAAC,YAAY,CAAC,KACpD,sBAAsB,CAAC,YAAY,CA+BrC,CAAA"}

package/dist/browser/utm/hooks/useDefaultUtmPageState.d.ts

@@ -6,5 +6,6 @@ export declare const UtmQueryParamStrings: {
     readonly utmTerm: "utm_term";
 };
 export type UtmQueryParams = typeof UtmQueryParamStrings[keyof typeof UtmQueryParamStrings];
+/** Get the default page state for utm values from specific query params */
 export declare const useDefaultUtmPageState: () => import("./useDefaultPageState.ts").DefaultPageStateReturn<UtmQueryParams[]>;
 //# sourceMappingURL=useDefaultUtmPageState.d.ts.map

package/dist/browser/utm/hooks/useDefaultUtmPageState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDefaultUtmPageState.d.ts","sourceRoot":"","sources":["../../../../src/utm/hooks/useDefaultUtmPageState.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;;;;;CAMvB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAA;AAG3F,eAAO,MAAM,sBAAsB,mFAAoG,CAAA"}
+{"version":3,"file":"useDefaultUtmPageState.d.ts","sourceRoot":"","sources":["../../../../src/utm/hooks/useDefaultUtmPageState.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;;;;;CAMvB,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,OAAO,oBAAoB,CAAC,MAAM,OAAO,oBAAoB,CAAC,CAAA;AAE3F,2EAA2E;AAC3E,eAAO,MAAM,sBAAsB,mFAAoG,CAAA"}

package/dist/browser/utm/lib/UtmStorageArchivist.d.ts

@@ -1,5 +1,9 @@
 import type { Utm } from '@xyo-network/advertising-payload-plugins';
 import { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage';
+/**
+ * Find or create a single instance of the UtmStorageArchivist
+ * @returns Archivist instance
+ */
 export declare const UtmStorageArchivist: () => Promise<StorageArchivist<import("@xylabs/object").BaseParamsFields & {
     account?: import("@xyo-network/account-model").AccountInstance | "random";
     addToResolvers?: boolean;

package/dist/browser/utm/lib/UtmStorageArchivist.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UtmStorageArchivist.d.ts","sourceRoot":"","sources":["../../../../src/utm/lib/UtmStorageArchivist.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,0CAA0C,CAAA;AAEnE,OAAO,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAU/F,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;oEAY/B,CAAA;AAED,eAAO,MAAM,gBAAgB,QAAa,OAAO,CAAC,GAAG,GAAG,SAAS,CAGhE,CAAA"}
+{"version":3,"file":"UtmStorageArchivist.d.ts","sourceRoot":"","sources":["../../../../src/utm/lib/UtmStorageArchivist.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,0CAA0C,CAAA;AAEnE,OAAO,EAAE,gBAAgB,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAA;AAM/F;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;oEAY/B,CAAA;AAED,eAAO,MAAM,gBAAgB,QAAa,OAAO,CAAC,GAAG,GAAG,SAAS,CAGhE,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-advertising",
-  "version": "4.1.6",
+  "version": "4.1.8",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -43,15 +43,15 @@
     "lint-pkg": "npmPkgJsonLint ."
   },
   "dependencies": {
-    "@xylabs/react-promise": "^5.2.2",
+    "@xylabs/react-promise": "^5.2.4",
     "@xyo-network/advertising-payload-plugins": "^3.1.1",
-    "@xyo-network/archivist-storage": "^3.3.0"
+    "@xyo-network/archivist-storage": "^3.3.1"
   },
   "devDependencies": {
-    "@mui/material": "^6.1.4",
+    "@mui/material": "^6.1.5",
     "@storybook/react": "^8.3.6",
-    "@xylabs/ts-scripts-yarn3": "^4.2.1",
-    "@xylabs/tsconfig-react": "^4.2.1",
+    "@xylabs/ts-scripts-yarn3": "^4.2.3",
+    "@xylabs/tsconfig-react": "^4.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^8.3.6",

package/src/utm/hooks/UseCaptureUtmLocation.stories.tsx

@@ -1,11 +1,11 @@
-import { Box } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import type { Meta, StoryFn } from '@storybook/react'
 import { usePromise } from '@xylabs/react-promise'
 import type { PropsWithChildren } from 'react'
 import React, { useEffect } from 'react'
 import { BrowserRouter, useSearchParams } from 'react-router-dom'
 
-import { UtmStorageArchivist } from '../lib/index.ts'
+import { LatestUtmPayload, UtmStorageArchivist } from '../lib/index.ts'
 import { useCaptureUtmLocation } from './useCaptureUtmLocation.ts'
 
 export default { title: 'advertising/UseCaptureUtmLocation' } as Meta
@@ -14,6 +14,10 @@ const UtmStub: React.FC<PropsWithChildren> = ({ children }) => {
   const [, setParams] = useSearchParams()
 
   useEffect(() => {
+    UtmStorageArchivist().then(async (archivist) => {
+      await archivist.clear()
+    }).catch(error => console.error(error))
+
     setParams(() => {
       const newParams = new URLSearchParams()
       newParams.set('utm_campaign', 'test-campaign')
@@ -33,22 +37,47 @@ const RouterDecorator = (Story: StoryFn) => (
   </BrowserRouter>
 )
 
-const Template: StoryFn = () => {
-  useCaptureUtmLocation()
-
-  const [payloads] = usePromise(async () => {
-    const archivist = await UtmStorageArchivist()
-    return await archivist.all()
-  }, [])
+const TemplateInner = ({ message }: { message: string }) => {
+  const [params] = useSearchParams()
 
+  const [payload] = usePromise(async () => await LatestUtmPayload(), [])
   return (
-    <Box>
-      {payloads?.map(payload => <Box key={payload.$hash}>{JSON.stringify(payload, null, 2)}</Box>)}
+    <Box sx={{
+      display: 'flex', flexDirection: 'column', gap: 2,
+    }}
+    >
+      <Typography>
+        Stored Payload:
+        <code>
+          {JSON.stringify(payload, null, 2)}
+        </code>
+      </Typography>
+      <Typography>
+        {message}
+        <code>
+          {JSON.stringify(params.toString(), null, 2)}
+        </code>
+      </Typography>
     </Box>
   )
 }
 
+const Template: StoryFn = () => {
+  useCaptureUtmLocation()
+
+  return <TemplateInner message="Query Parameters (should be empty):" />
+}
+
+const TemplateWithoutClear: StoryFn = () => {
+  useCaptureUtmLocation(false)
+
+  return <TemplateInner message="Query Parameters (should NOT be empty):" />
+}
+
 const Default = Template.bind({})
 Default.decorators = [RouterDecorator]
 
-export { Default }
+const WithNoClearAfterCapture = TemplateWithoutClear.bind({})
+WithNoClearAfterCapture.decorators = [RouterDecorator]
+
+export { Default, WithNoClearAfterCapture }

package/src/utm/hooks/useCaptureUtmLocation.ts

@@ -1,14 +1,16 @@
 import { usePromise } from '@xylabs/react-promise'
 import { type Utm, UtmSchema } from '@xyo-network/advertising-payload-plugins'
 import { useMemo } from 'react'
+import { useSearchParams } from 'react-router-dom'
 
 import { UtmStorageArchivist } from '../lib/index.ts'
-import { useDefaultUtmPageState } from './useDefaultUtmPageState.ts'
+import { useDefaultUtmPageState, UtmQueryParamStrings } from './useDefaultUtmPageState.ts'
 
-export const useCaptureUtmLocation = () => {
+export const useCaptureUtmLocation = (clearAfterCapture = true) => {
   const [{
     utm_campaign, utm_content, utm_medium, utm_source, utm_term,
   }] = useDefaultUtmPageState()
+  const [,setSearchParams] = useSearchParams()
 
   const [sessionStorageArchivist, error] = usePromise(async () => {
     return await UtmStorageArchivist()
@@ -18,21 +20,47 @@ export const useCaptureUtmLocation = () => {
     // Construct the base UTM payload
     const utm: Utm = { schema: UtmSchema }
 
-    // Conditionally add all the UTM parameters present
-    if (utm_campaign) utm.utm_campaign = utm_campaign
-    if (utm_content) utm.utm_content = utm_content
-    if (utm_medium) utm.utm_medium = utm_medium
-    if (utm_source) utm.utm_source = utm_source
-    if (utm_term) utm.utm_term = utm_term
+    // determine if there's a utm field that still has a value
+    // if there is none, it means that either the page loaded
+    // with none or they've already been captured
+    const utmParams = {
+      utm_campaign, utm_content, utm_medium, utm_source, utm_term,
+    }
+    const foundUpdatedUtmParams = Object.entries(utmParams).some(([key, value]) => {
+      return key.includes('utm_') && value
+    })
+
+    if (foundUpdatedUtmParams) {
+      // Conditionally add all the UTM parameters present
+      if (utm_campaign) utm.utm_campaign = utm_campaign
+      if (utm_content) utm.utm_content = utm_content
+      if (utm_medium) utm.utm_medium = utm_medium
+      if (utm_source) utm.utm_source = utm_source
+      if (utm_term) utm.utm_term = utm_term
 
-    return utm
+      return utm
+    } else {
+      return null
+    }
   }, [utm_campaign, utm_content, utm_medium, utm_source, utm_term])
 
   const [,insertError] = usePromise(async () => {
     if (utmPayload && sessionStorageArchivist) {
+      // insert params into session storage
       await sessionStorageArchivist.insert([utmPayload])
+
+      if (clearAfterCapture) {
+        // remove the utm params from the URL
+        setSearchParams(() => {
+          const newParams = new URLSearchParams()
+          for (const value of Object.values(UtmQueryParamStrings)) {
+            newParams.delete(value)
+          }
+          return newParams
+        })
+      }
     }
-  }, [sessionStorageArchivist, utmPayload])
+  }, [sessionStorageArchivist, utmPayload, clearAfterCapture])
 
   return { utmPayload, error: error ?? insertError }
 }