@xyo-network/react-advertising 7.5.8 → 7.5.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.mjs +26 -48
- package/dist/browser/index.mjs.map +1 -1
- package/dist/browser/utm/lib/PageStateKeys.d.ts +1 -1
- package/dist/browser/utm/lib/PageStateKeys.d.ts.map +1 -1
- package/dist/browser/utm/lib/UtmStorageArchivist.d.ts +1 -2
- package/dist/browser/utm/lib/UtmStorageArchivist.d.ts.map +1 -1
- package/package.json +75 -26
- package/src/index.ts +0 -1
- package/src/types/images.d.ts +0 -5
- package/src/utm/hooks/UseCaptureUtmLocation.stories.tsx +0 -83
- package/src/utm/hooks/index.ts +0 -3
- package/src/utm/hooks/useCaptureUtmLocation.ts +0 -69
- package/src/utm/hooks/useDefaultPageState.ts +0 -56
- package/src/utm/hooks/useDefaultUtmPageState.ts +0 -14
- package/src/utm/index.ts +0 -2
- package/src/utm/lib/PageStateKeys.ts +0 -1
- package/src/utm/lib/UtmStorageArchivist.ts +0 -32
- package/src/utm/lib/index.ts +0 -2
package/dist/browser/index.mjs
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
|
|
4
1
|
// src/utm/hooks/useCaptureUtmLocation.ts
|
|
5
2
|
import { usePromise } from "@xylabs/react-promise";
|
|
6
3
|
import { UtmSchema } from "@xyo-network/advertising-payload-plugins";
|
|
@@ -13,7 +10,7 @@ import { isUtm } from "@xyo-network/advertising-payload-plugins";
|
|
|
13
10
|
import { StorageArchivist, StorageArchivistConfigSchema } from "@xyo-network/archivist-storage";
|
|
14
11
|
var STORAGE_NAME_SPACE = "utm";
|
|
15
12
|
var archivist;
|
|
16
|
-
var UtmStorageArchivist =
|
|
13
|
+
var UtmStorageArchivist = async () => {
|
|
17
14
|
if (archivist) {
|
|
18
15
|
return archivist;
|
|
19
16
|
} else {
|
|
@@ -27,18 +24,18 @@ var UtmStorageArchivist = /* @__PURE__ */ __name(async () => {
|
|
|
27
24
|
});
|
|
28
25
|
return archivist;
|
|
29
26
|
}
|
|
30
|
-
}
|
|
31
|
-
var LatestUtmPayload =
|
|
27
|
+
};
|
|
28
|
+
var LatestUtmPayload = async () => {
|
|
32
29
|
const archivist2 = await UtmStorageArchivist();
|
|
33
30
|
return (await archivist2.next()).find(isUtm);
|
|
34
|
-
}
|
|
31
|
+
};
|
|
35
32
|
|
|
36
33
|
// src/utm/hooks/useDefaultPageState.ts
|
|
37
34
|
import { useMemo } from "react";
|
|
38
35
|
import { useSearchParams } from "react-router-dom";
|
|
39
|
-
var useDefaultPageState =
|
|
36
|
+
var useDefaultPageState = ({ queryParams }) => {
|
|
40
37
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
41
|
-
const patchDefaultPageState =
|
|
38
|
+
const patchDefaultPageState = (source, key, value) => {
|
|
42
39
|
switch (source) {
|
|
43
40
|
case "queryParams": {
|
|
44
41
|
setSearchParams((prevSearchParams) => {
|
|
@@ -52,25 +49,19 @@ var useDefaultPageState = /* @__PURE__ */ __name(({ queryParams }) => {
|
|
|
52
49
|
throw new Error(`Invalid source for default page state: ${source}`);
|
|
53
50
|
}
|
|
54
51
|
}
|
|
55
|
-
}
|
|
52
|
+
};
|
|
56
53
|
const queryParamsState = useMemo(() => {
|
|
57
54
|
if (!queryParams) return {};
|
|
58
|
-
|
|
55
|
+
const defaultState = {};
|
|
59
56
|
for (const [key, value] of searchParams.entries()) {
|
|
60
57
|
if (queryParams.includes(key)) {
|
|
61
58
|
defaultState[key] = value;
|
|
62
59
|
}
|
|
63
60
|
}
|
|
64
61
|
return defaultState;
|
|
65
|
-
}, [
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
]);
|
|
69
|
-
return [
|
|
70
|
-
queryParamsState,
|
|
71
|
-
patchDefaultPageState
|
|
72
|
-
];
|
|
73
|
-
}, "useDefaultPageState");
|
|
62
|
+
}, [searchParams, queryParams]);
|
|
63
|
+
return [queryParamsState, patchDefaultPageState];
|
|
64
|
+
};
|
|
74
65
|
|
|
75
66
|
// src/utm/hooks/useDefaultUtmPageState.ts
|
|
76
67
|
var UtmQueryParamStrings = {
|
|
@@ -80,21 +71,23 @@ var UtmQueryParamStrings = {
|
|
|
80
71
|
utmSource: "utm_source",
|
|
81
72
|
utmTerm: "utm_term"
|
|
82
73
|
};
|
|
83
|
-
var useDefaultUtmPageState =
|
|
84
|
-
queryParams: Object.values(UtmQueryParamStrings)
|
|
85
|
-
}), "useDefaultUtmPageState");
|
|
74
|
+
var useDefaultUtmPageState = () => useDefaultPageState({ queryParams: Object.values(UtmQueryParamStrings) });
|
|
86
75
|
|
|
87
76
|
// src/utm/hooks/useCaptureUtmLocation.ts
|
|
88
|
-
var useCaptureUtmLocation =
|
|
89
|
-
const [{
|
|
77
|
+
var useCaptureUtmLocation = (removeAfterCapture = true) => {
|
|
78
|
+
const [{
|
|
79
|
+
utm_campaign,
|
|
80
|
+
utm_content,
|
|
81
|
+
utm_medium,
|
|
82
|
+
utm_source,
|
|
83
|
+
utm_term
|
|
84
|
+
}] = useDefaultUtmPageState();
|
|
90
85
|
const [, setSearchParams] = useSearchParams2();
|
|
91
86
|
const [sessionStorageArchivist, error] = usePromise(async () => {
|
|
92
87
|
return await UtmStorageArchivist();
|
|
93
88
|
}, []);
|
|
94
89
|
const utmPayload = useMemo2(() => {
|
|
95
|
-
const utm = {
|
|
96
|
-
schema: asSchema(UtmSchema, true)
|
|
97
|
-
};
|
|
90
|
+
const utm = { schema: asSchema(UtmSchema, true) };
|
|
98
91
|
const utmParams = {
|
|
99
92
|
utm_campaign,
|
|
100
93
|
utm_content,
|
|
@@ -115,19 +108,11 @@ var useCaptureUtmLocation = /* @__PURE__ */ __name((removeAfterCapture = true) =
|
|
|
115
108
|
} else {
|
|
116
109
|
return null;
|
|
117
110
|
}
|
|
118
|
-
}, [
|
|
119
|
-
utm_campaign,
|
|
120
|
-
utm_content,
|
|
121
|
-
utm_medium,
|
|
122
|
-
utm_source,
|
|
123
|
-
utm_term
|
|
124
|
-
]);
|
|
111
|
+
}, [utm_campaign, utm_content, utm_medium, utm_source, utm_term]);
|
|
125
112
|
const [, insertError] = usePromise(async () => {
|
|
126
113
|
if (utmPayload && sessionStorageArchivist) {
|
|
127
114
|
await sessionStorageArchivist.clear();
|
|
128
|
-
await sessionStorageArchivist.insert([
|
|
129
|
-
utmPayload
|
|
130
|
-
]);
|
|
115
|
+
await sessionStorageArchivist.insert([utmPayload]);
|
|
131
116
|
if (removeAfterCapture) {
|
|
132
117
|
setSearchParams(() => {
|
|
133
118
|
const newParams = new URLSearchParams();
|
|
@@ -138,16 +123,9 @@ var useCaptureUtmLocation = /* @__PURE__ */ __name((removeAfterCapture = true) =
|
|
|
138
123
|
});
|
|
139
124
|
}
|
|
140
125
|
}
|
|
141
|
-
}, [
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
removeAfterCapture
|
|
145
|
-
]);
|
|
146
|
-
return {
|
|
147
|
-
utmPayload,
|
|
148
|
-
error: error ?? insertError
|
|
149
|
-
};
|
|
150
|
-
}, "useCaptureUtmLocation");
|
|
126
|
+
}, [sessionStorageArchivist, utmPayload, removeAfterCapture]);
|
|
127
|
+
return { utmPayload, error: error ?? insertError };
|
|
128
|
+
};
|
|
151
129
|
export {
|
|
152
130
|
LatestUtmPayload,
|
|
153
131
|
UtmQueryParamStrings,
|
|
@@ -1 +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 { asSchema, type Payload } from '@xyo-network/payload-model'\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 = (removeAfterCapture = 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: Payload<Utm> = { schema: asSchema(UtmSchema, true) }\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 // clear all previous utm payloads\n await sessionStorageArchivist.clear()\n // insert params into session storage\n await sessionStorageArchivist.insert([utmPayload])\n\n if (removeAfterCapture) {\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, removeAfterCapture])\n\n return { utmPayload, error: error ?? insertError }\n}\n","import type { Utm, UtmSchema } from '@xyo-network/advertising-payload-plugins'\nimport { isUtm } from '@xyo-network/advertising-payload-plugins'\nimport type { StorageArchivistParams } from '@xyo-network/archivist-storage'\nimport { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'\nimport type { Payload, Schema } from '@xyo-network/payload-model'\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 } as StorageArchivistParams)\n return archivist\n }\n}\n\nexport const LatestUtmPayload = async (): Promise<Payload<Utm, Schema<UtmSchema>> | undefined> => {\n const archivist = await UtmStorageArchivist()\n return (await archivist.next()).find(isUtm) as Payload<Utm, Schema<UtmSchema>>\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,gBAA8B;AACvC,SAASC,WAAAA,gBAAe;AACxB,SAASC,mBAAAA,wBAAuB;;;ACHhC,SAASC,aAAa;AAEtB,SAASC,kBAAkBC,oCAAoC;AAG/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,KAAI,GAAIC,KAAKC,KAAAA;AACvC,GAHgC;;;AC5BhC,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;;;AHJ/B,IAAMW,wBAAwB,wBAACC,qBAAqB,SAAI;AAC7D,QAAM,CAAC,EACLC,cAAcC,aAAaC,YAAYC,YAAYC,SAAQ,CAC5D,IAAIC,uBAAAA;AACL,QAAM,CAAA,EAAEC,eAAAA,IAAmBC,iBAAAA;AAE3B,QAAM,CAACC,yBAAyBC,KAAAA,IAASC,WAAW,YAAA;AAClD,WAAO,MAAMC,oBAAAA;EACf,GAAG,CAAA,CAAE;AAEL,QAAMC,aAAaC,SAAQ,MAAA;AAEzB,UAAMC,MAAoB;MAAEC,QAAQC,SAASC,WAAW,IAAA;IAAM;AAK9D,UAAMC,YAAY;MAChBlB;MAAcC;MAAaC;MAAYC;MAAYC;IACrD;AACA,UAAMe,wBAAwBC,OAAOC,QAAQH,SAAAA,EAAWI,KAAK,CAAC,CAACC,KAAKC,KAAAA,MAAM;AACxE,aAAOD,IAAIE,SAAS,MAAA,KAAWD;IACjC,CAAA;AAEA,QAAIL,uBAAuB;AAEzB,UAAInB,aAAcc,KAAId,eAAeA;AACrC,UAAIC,YAAaa,KAAIb,cAAcA;AACnC,UAAIC,WAAYY,KAAIZ,aAAaA;AACjC,UAAIC,WAAYW,KAAIX,aAAaA;AACjC,UAAIC,SAAUU,KAAIV,WAAWA;AAE7B,aAAOU;IACT,OAAO;AACL,aAAO;IACT;EACF,GAAG;IAACd;IAAcC;IAAaC;IAAYC;IAAYC;GAAS;AAEhE,QAAM,CAAA,EAAEsB,WAAAA,IAAehB,WAAW,YAAA;AAChC,QAAIE,cAAcJ,yBAAyB;AAEzC,YAAMA,wBAAwBmB,MAAK;AAEnC,YAAMnB,wBAAwBoB,OAAO;QAAChB;OAAW;AAEjD,UAAIb,oBAAoB;AAEtBO,wBAAgB,MAAA;AACd,gBAAMuB,YAAY,IAAIC,gBAAAA;AACtB,qBAAWN,SAASJ,OAAOW,OAAOC,oBAAAA,GAAuB;AACvDH,sBAAUI,OAAOT,KAAAA;UACnB;AACA,iBAAOK;QACT,CAAA;MACF;IACF;EACF,GAAG;IAACrB;IAAyBI;IAAYb;GAAmB;AAE5D,SAAO;IAAEa;IAAYH,OAAOA,SAASiB;EAAY;AACnD,GA3DqC;","names":["usePromise","UtmSchema","asSchema","useMemo","useSearchParams","isUtm","StorageArchivist","StorageArchivistConfigSchema","STORAGE_NAME_SPACE","archivist","UtmStorageArchivist","StorageArchivist","create","account","config","schema","StorageArchivistConfigSchema","namespace","type","LatestUtmPayload","next","find","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","removeAfterCapture","utm_campaign","utm_content","utm_medium","utm_source","utm_term","useDefaultUtmPageState","setSearchParams","useSearchParams","sessionStorageArchivist","error","usePromise","UtmStorageArchivist","utmPayload","useMemo","utm","schema","asSchema","UtmSchema","utmParams","foundUpdatedUtmParams","Object","entries","some","key","value","includes","insertError","clear","insert","newParams","URLSearchParams","values","UtmQueryParamStrings","delete"]}
|
|
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 { asSchema, type Payload } from '@xyo-network/payload-model'\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 = (removeAfterCapture = 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: Payload<Utm> = { schema: asSchema(UtmSchema, true) }\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 // clear all previous utm payloads\n await sessionStorageArchivist.clear()\n // insert params into session storage\n await sessionStorageArchivist.insert([utmPayload])\n\n if (removeAfterCapture) {\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, removeAfterCapture])\n\n return { utmPayload, error: error ?? insertError }\n}\n","import type { Utm, UtmSchema } from '@xyo-network/advertising-payload-plugins'\nimport { isUtm } from '@xyo-network/advertising-payload-plugins'\nimport type { StorageArchivistParams } from '@xyo-network/archivist-storage'\nimport { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'\nimport type { Payload, Schema } from '@xyo-network/payload-model'\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 (): Promise<StorageArchivist> => {\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 } as StorageArchivistParams)\n return archivist\n }\n}\n\nexport const LatestUtmPayload = async (): Promise<Payload<Utm, Schema<UtmSchema>> | undefined> => {\n const archivist = await UtmStorageArchivist()\n return (await archivist.next()).find(isUtm) as Payload<Utm, Schema<UtmSchema>>\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 const 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,SAAS,kBAAkB;AAC3B,SAAmB,iBAAiB;AACpC,SAAS,gBAA8B;AACvC,SAAS,WAAAA,gBAAe;AACxB,SAAS,mBAAAC,wBAAuB;;;ACHhC,SAAS,aAAa;AAEtB,SAAS,kBAAkB,oCAAoC;AAG/D,IAAM,qBAAqB;AAE3B,IAAI;AAMG,IAAM,sBAAsB,YAAuC;AACxE,MAAI,WAAW;AACb,WAAO;AAAA,EACT,OAAO;AACL,gBAAY,MAAM,iBAAiB,OAAO;AAAA,MACxC,SAAS;AAAA,MACT,QAAQ;AAAA,QACN,QAAQ;AAAA,QAA8B,WAAW;AAAA,QAAoB,MAAM;AAAA,MAC7E;AAAA,IACF,CAA2B;AAC3B,WAAO;AAAA,EACT;AACF;AAEO,IAAM,mBAAmB,YAAkE;AAChG,QAAMC,aAAY,MAAM,oBAAoB;AAC5C,UAAQ,MAAMA,WAAU,KAAK,GAAG,KAAK,KAAK;AAC5C;;;AC/BA,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAqBzB,IAAM,sBAAsB,CACjC,EAAE,YAAY,MAC2B;AACzC,QAAM,CAAC,cAAc,eAAe,IAAI,gBAAgB;AAExD,QAAM,wBAAwB,CAAC,QAAsC,KAA2B,UAAkB;AAChH,YAAQ,QAAQ;AAAA,MACd,KAAK,eAAe;AAClB,wBAAgB,CAAC,qBAAqB;AACpC,gBAAM,kBAAkB,IAAI,gBAAgB,gBAAgB;AAC5D,0BAAgB,IAAI,KAAK,KAAK;AAC9B,iBAAO;AAAA,QACT,CAAC;AACD;AAAA,MACF;AAAA,MACA,SAAS;AACP,cAAM,IAAI,MAAM,0CAA0C,MAAM,EAAE;AAAA,MACpE;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAmB,QAAQ,MAAM;AACrC,QAAI,CAAC,YAAa,QAAO,CAAC;AAC1B,UAAM,eAAe,CAAC;AACtB,eAAW,CAAC,KAAK,KAAK,KAAK,aAAa,QAAQ,GAAG;AACjD,UAAI,YAAY,SAAS,GAAG,GAAG;AAC7B,qBAAa,GAA2B,IAAI;AAAA,MAC9C;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,cAAc,WAAW,CAAC;AAE9B,SAAO,CAAC,kBAAkB,qBAAqB;AACjD;;;ACrDO,IAAM,uBAAuB;AAAA,EAClC,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,WAAW;AAAA,EACX,SAAS;AACX;AAKO,IAAM,yBAAyB,MAAM,oBAAsC,EAAE,aAAa,OAAO,OAAO,oBAAoB,EAAE,CAAC;;;AHJ/H,IAAM,wBAAwB,CAAC,qBAAqB,SAAS;AAClE,QAAM,CAAC;AAAA,IACL;AAAA,IAAc;AAAA,IAAa;AAAA,IAAY;AAAA,IAAY;AAAA,EACrD,CAAC,IAAI,uBAAuB;AAC5B,QAAM,CAAC,EAAC,eAAe,IAAIC,iBAAgB;AAE3C,QAAM,CAAC,yBAAyB,KAAK,IAAI,WAAW,YAAY;AAC9D,WAAO,MAAM,oBAAoB;AAAA,EACnC,GAAG,CAAC,CAAC;AAEL,QAAM,aAAaC,SAAQ,MAAM;AAE/B,UAAM,MAAoB,EAAE,QAAQ,SAAS,WAAW,IAAI,EAAE;AAK9D,UAAM,YAAY;AAAA,MAChB;AAAA,MAAc;AAAA,MAAa;AAAA,MAAY;AAAA,MAAY;AAAA,IACrD;AACA,UAAM,wBAAwB,OAAO,QAAQ,SAAS,EAAE,KAAK,CAAC,CAAC,KAAK,KAAK,MAAM;AAC7E,aAAO,IAAI,SAAS,MAAM,KAAK;AAAA,IACjC,CAAC;AAED,QAAI,uBAAuB;AAEzB,UAAI,aAAc,KAAI,eAAe;AACrC,UAAI,YAAa,KAAI,cAAc;AACnC,UAAI,WAAY,KAAI,aAAa;AACjC,UAAI,WAAY,KAAI,aAAa;AACjC,UAAI,SAAU,KAAI,WAAW;AAE7B,aAAO;AAAA,IACT,OAAO;AACL,aAAO;AAAA,IACT;AAAA,EACF,GAAG,CAAC,cAAc,aAAa,YAAY,YAAY,QAAQ,CAAC;AAEhE,QAAM,CAAC,EAAC,WAAW,IAAI,WAAW,YAAY;AAC5C,QAAI,cAAc,yBAAyB;AAEzC,YAAM,wBAAwB,MAAM;AAEpC,YAAM,wBAAwB,OAAO,CAAC,UAAU,CAAC;AAEjD,UAAI,oBAAoB;AAEtB,wBAAgB,MAAM;AACpB,gBAAM,YAAY,IAAI,gBAAgB;AACtC,qBAAW,SAAS,OAAO,OAAO,oBAAoB,GAAG;AACvD,sBAAU,OAAO,KAAK;AAAA,UACxB;AACA,iBAAO;AAAA,QACT,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,yBAAyB,YAAY,kBAAkB,CAAC;AAE5D,SAAO,EAAE,YAAY,OAAO,SAAS,YAAY;AACnD;","names":["useMemo","useSearchParams","archivist","useSearchParams","useMemo"]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export type PageStateKeys =
|
|
1
|
+
export type PageStateKeys = readonly string[];
|
|
2
2
|
//# sourceMappingURL=PageStateKeys.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageStateKeys.d.ts","sourceRoot":"","sources":["../../../../src/utm/lib/PageStateKeys.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,
|
|
1
|
+
{"version":3,"file":"PageStateKeys.d.ts","sourceRoot":"","sources":["../../../../src/utm/lib/PageStateKeys.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,SAAS,MAAM,EAAE,CAAA"}
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import type { Utm, UtmSchema } from '@xyo-network/advertising-payload-plugins';
|
|
2
|
-
import type { StorageArchivistParams } from '@xyo-network/archivist-storage';
|
|
3
2
|
import { StorageArchivist } from '@xyo-network/archivist-storage';
|
|
4
3
|
import type { Payload, Schema } from '@xyo-network/payload-model';
|
|
5
4
|
/**
|
|
6
5
|
* Find or create a single instance of the UtmStorageArchivist
|
|
7
6
|
* @returns Archivist instance
|
|
8
7
|
*/
|
|
9
|
-
export declare const UtmStorageArchivist: () => Promise<StorageArchivist
|
|
8
|
+
export declare const UtmStorageArchivist: () => Promise<StorageArchivist>;
|
|
10
9
|
export declare const LatestUtmPayload: () => Promise<Payload<Utm, Schema<UtmSchema>> | undefined>;
|
|
11
10
|
//# sourceMappingURL=UtmStorageArchivist.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UtmStorageArchivist.d.ts","sourceRoot":"","sources":["../../../../src/utm/lib/UtmStorageArchivist.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAA;
|
|
1
|
+
{"version":3,"file":"UtmStorageArchivist.d.ts","sourceRoot":"","sources":["../../../../src/utm/lib/UtmStorageArchivist.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAA;AAG9E,OAAO,EAAE,gBAAgB,EAAgC,MAAM,gCAAgC,CAAA;AAC/F,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAMjE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,QAAa,OAAO,CAAC,gBAAgB,CAYpE,CAAA;AAED,eAAO,MAAM,gBAAgB,QAAa,OAAO,CAAC,OAAO,CAAC,GAAG,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,GAAG,SAAS,CAG5F,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-advertising",
|
|
3
|
-
"version": "7.5.
|
|
3
|
+
"version": "7.5.11",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -36,42 +36,91 @@
|
|
|
36
36
|
},
|
|
37
37
|
"./package.json": "./package.json"
|
|
38
38
|
},
|
|
39
|
-
"module": "dist/browser/index.mjs",
|
|
40
|
-
"types": "dist/browser/index.d.ts",
|
|
41
39
|
"files": [
|
|
42
40
|
"dist",
|
|
43
|
-
"
|
|
41
|
+
"README.md"
|
|
44
42
|
],
|
|
45
|
-
"dependencies": {
|
|
46
|
-
"@xylabs/react-promise": "~7.1.17",
|
|
47
|
-
"@xyo-network/advertising-payload-plugins": "~5.3.1",
|
|
48
|
-
"@xyo-network/archivist-storage": "~5.3.17",
|
|
49
|
-
"@xyo-network/payload-model": "~5.3.17"
|
|
50
|
-
},
|
|
51
43
|
"devDependencies": {
|
|
52
|
-
"@
|
|
53
|
-
"@
|
|
44
|
+
"@bitauth/libauth": "~3.0.0",
|
|
45
|
+
"@mui/material": "^7.3.10",
|
|
46
|
+
"@opentelemetry/api": "^1.9.1",
|
|
47
|
+
"@opentelemetry/sdk-trace-base": "^2.7.0",
|
|
48
|
+
"@scure/base": "~2.2.0",
|
|
49
|
+
"@storybook/react-vite": "~10.3.5",
|
|
50
|
+
"@types/node": "~25.6.0",
|
|
54
51
|
"@types/react": "^19.2.14",
|
|
55
|
-
"@xylabs/
|
|
56
|
-
"@xylabs/
|
|
57
|
-
"@xylabs/
|
|
58
|
-
"@xylabs/
|
|
59
|
-
"@xylabs/tsconfig
|
|
60
|
-
"
|
|
61
|
-
"react
|
|
62
|
-
"
|
|
52
|
+
"@xylabs/react-promise": "~7.1.20",
|
|
53
|
+
"@xylabs/sdk-js": "^5.0.100",
|
|
54
|
+
"@xylabs/threads": "~5.0.100",
|
|
55
|
+
"@xylabs/toolchain": "~7.11.9",
|
|
56
|
+
"@xylabs/tsconfig": "^7.11.9",
|
|
57
|
+
"@xylabs/tsconfig-dom": "^7.11.9",
|
|
58
|
+
"@xylabs/tsconfig-react": "~7.11.9",
|
|
59
|
+
"@xyo-network/account": "~5.5.1",
|
|
60
|
+
"@xyo-network/account-model": "^5.5.1",
|
|
61
|
+
"@xyo-network/advertising-payload-plugins": "~5.4.9",
|
|
62
|
+
"@xyo-network/archivist-storage": "~5.5.5",
|
|
63
|
+
"@xyo-network/boundwitness-builder": "^5.5.1",
|
|
64
|
+
"@xyo-network/boundwitness-model": "^5.5.1",
|
|
65
|
+
"@xyo-network/boundwitness-wrapper": "~5.5.1",
|
|
66
|
+
"@xyo-network/config-payload-plugin": "~5.5.1",
|
|
67
|
+
"@xyo-network/manifest-model": "~5.5.1",
|
|
68
|
+
"@xyo-network/payload-builder": "^5.5.1",
|
|
69
|
+
"@xyo-network/payload-model": "^5.5.1",
|
|
70
|
+
"@xyo-network/query-payload-plugin": "~5.5.1",
|
|
71
|
+
"@xyo-network/wallet-model": "^5.5.1",
|
|
72
|
+
"async-mutex": "^0.5.0",
|
|
73
|
+
"axios": "^1.15.2",
|
|
74
|
+
"bn.js": "^5.2.3",
|
|
75
|
+
"buffer": "^6.0.3",
|
|
76
|
+
"chalk": "^5.6.2",
|
|
77
|
+
"debug": "~4.4.3",
|
|
78
|
+
"esbuild": "~0.28.0",
|
|
79
|
+
"eslint": "^10.2.1",
|
|
80
|
+
"ethers": "^6.16.0",
|
|
81
|
+
"hash-wasm": "~4.12.0",
|
|
82
|
+
"lru-cache": "^11.3.5",
|
|
83
|
+
"observable-fns": "~0.6.1",
|
|
84
|
+
"pako": "^2.1.0",
|
|
85
|
+
"react": "^19.2.5",
|
|
86
|
+
"react-dom": "^19.2.5",
|
|
87
|
+
"react-router-dom": "^7.14.2",
|
|
88
|
+
"store2": "~2.14.4",
|
|
89
|
+
"storybook": "^10.3.5",
|
|
63
90
|
"typescript": "^5.9.3",
|
|
64
|
-
"vite": "
|
|
91
|
+
"vite": "^8.0.10",
|
|
92
|
+
"wasm-feature-detect": "~1.8.0",
|
|
65
93
|
"zod": "^4.3.6"
|
|
66
94
|
},
|
|
67
95
|
"peerDependencies": {
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"react-
|
|
71
|
-
"
|
|
96
|
+
"@opentelemetry/api": "^1.9.1",
|
|
97
|
+
"@scure/base": "~2.2.0",
|
|
98
|
+
"@xylabs/react-promise": "~7.1.20",
|
|
99
|
+
"@xylabs/sdk-js": "^5.0.100",
|
|
100
|
+
"@xyo-network/account": "~5.5.1",
|
|
101
|
+
"@xyo-network/account-model": "^5.5.1",
|
|
102
|
+
"@xyo-network/advertising-payload-plugins": "~5.4.9",
|
|
103
|
+
"@xyo-network/archivist-storage": "~5.5.5",
|
|
104
|
+
"@xyo-network/boundwitness-builder": "^5.5.1",
|
|
105
|
+
"@xyo-network/boundwitness-model": "^5.5.1",
|
|
106
|
+
"@xyo-network/boundwitness-wrapper": "~5.5.1",
|
|
107
|
+
"@xyo-network/config-payload-plugin": "~5.5.1",
|
|
108
|
+
"@xyo-network/manifest-model": "~5.5.1",
|
|
109
|
+
"@xyo-network/payload-builder": "^5.5.1",
|
|
110
|
+
"@xyo-network/payload-model": "^5.5.1",
|
|
111
|
+
"@xyo-network/query-payload-plugin": "~5.5.1",
|
|
112
|
+
"@xyo-network/wallet-model": "^5.5.1",
|
|
113
|
+
"async-mutex": "^0.5.0",
|
|
114
|
+
"ethers": "^6.16.0",
|
|
115
|
+
"lru-cache": "^11.3.5",
|
|
116
|
+
"react": "^19.2.5",
|
|
117
|
+
"react-dom": "^19.2.5",
|
|
118
|
+
"react-router-dom": "^7.14.2",
|
|
119
|
+
"store2": "~2.14.4",
|
|
120
|
+
"zod": "^4.3.6"
|
|
72
121
|
},
|
|
73
122
|
"publishConfig": {
|
|
74
123
|
"access": "public"
|
|
75
124
|
},
|
|
76
125
|
"docs": "dist/docs.json"
|
|
77
|
-
}
|
|
126
|
+
}
|
package/src/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './utm/index.ts'
|
package/src/types/images.d.ts
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import { Box, Typography } from '@mui/material'
|
|
2
|
-
import type { Meta, StoryFn } from '@storybook/react-vite'
|
|
3
|
-
import { usePromise } from '@xylabs/react-promise'
|
|
4
|
-
import type { PropsWithChildren } from 'react'
|
|
5
|
-
import React, { useEffect } from 'react'
|
|
6
|
-
import { BrowserRouter, useSearchParams } from 'react-router-dom'
|
|
7
|
-
|
|
8
|
-
import { LatestUtmPayload, UtmStorageArchivist } from '../lib/index.ts'
|
|
9
|
-
import { useCaptureUtmLocation } from './useCaptureUtmLocation.ts'
|
|
10
|
-
|
|
11
|
-
export default { title: 'advertising/UseCaptureUtmLocation' } as Meta
|
|
12
|
-
|
|
13
|
-
const UtmStub: React.FC<PropsWithChildren> = ({ children }) => {
|
|
14
|
-
const [, setParams] = useSearchParams()
|
|
15
|
-
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
UtmStorageArchivist().then(async (archivist) => {
|
|
18
|
-
await archivist.clear()
|
|
19
|
-
}).catch(error => console.error(error))
|
|
20
|
-
|
|
21
|
-
setParams(() => {
|
|
22
|
-
const newParams = new URLSearchParams()
|
|
23
|
-
newParams.set('utm_campaign', 'test-campaign')
|
|
24
|
-
newParams.set('utm_content', 'test-content')
|
|
25
|
-
return newParams
|
|
26
|
-
})
|
|
27
|
-
}, [])
|
|
28
|
-
|
|
29
|
-
return children
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
const RouterDecorator = (Story: React.ElementType) => (
|
|
33
|
-
<BrowserRouter>
|
|
34
|
-
<UtmStub>
|
|
35
|
-
<Story />
|
|
36
|
-
</UtmStub>
|
|
37
|
-
</BrowserRouter>
|
|
38
|
-
)
|
|
39
|
-
|
|
40
|
-
const TemplateInner = ({ message }: { message: string }) => {
|
|
41
|
-
const [params] = useSearchParams()
|
|
42
|
-
|
|
43
|
-
const [payload] = usePromise(async () => await LatestUtmPayload(), [])
|
|
44
|
-
return (
|
|
45
|
-
<Box sx={{
|
|
46
|
-
display: 'flex', flexDirection: 'column', gap: 2,
|
|
47
|
-
}}
|
|
48
|
-
>
|
|
49
|
-
<Typography>
|
|
50
|
-
Stored Payload:
|
|
51
|
-
<code>
|
|
52
|
-
{JSON.stringify(payload, null, 2)}
|
|
53
|
-
</code>
|
|
54
|
-
</Typography>
|
|
55
|
-
<Typography>
|
|
56
|
-
{message}
|
|
57
|
-
<code>
|
|
58
|
-
{JSON.stringify(params.toString(), null, 2)}
|
|
59
|
-
</code>
|
|
60
|
-
</Typography>
|
|
61
|
-
</Box>
|
|
62
|
-
)
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
const Template: StoryFn = () => {
|
|
66
|
-
useCaptureUtmLocation()
|
|
67
|
-
|
|
68
|
-
return <TemplateInner message="Query Parameters (should be empty):" />
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
const TemplateWithoutClear: StoryFn = () => {
|
|
72
|
-
useCaptureUtmLocation(false)
|
|
73
|
-
|
|
74
|
-
return <TemplateInner message="Query Parameters (should NOT be empty):" />
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
const Default = Template.bind({})
|
|
78
|
-
Default.decorators = [RouterDecorator]
|
|
79
|
-
|
|
80
|
-
const WithNoClearAfterCapture = TemplateWithoutClear.bind({})
|
|
81
|
-
WithNoClearAfterCapture.decorators = [RouterDecorator]
|
|
82
|
-
|
|
83
|
-
export { Default, WithNoClearAfterCapture }
|
package/src/utm/hooks/index.ts
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { usePromise } from '@xylabs/react-promise'
|
|
2
|
-
import { type Utm, UtmSchema } from '@xyo-network/advertising-payload-plugins'
|
|
3
|
-
import { asSchema, type Payload } from '@xyo-network/payload-model'
|
|
4
|
-
import { useMemo } from 'react'
|
|
5
|
-
import { useSearchParams } from 'react-router-dom'
|
|
6
|
-
|
|
7
|
-
import { UtmStorageArchivist } from '../lib/index.ts'
|
|
8
|
-
import { useDefaultUtmPageState, UtmQueryParamStrings } from './useDefaultUtmPageState.ts'
|
|
9
|
-
|
|
10
|
-
export const useCaptureUtmLocation = (removeAfterCapture = true) => {
|
|
11
|
-
const [{
|
|
12
|
-
utm_campaign, utm_content, utm_medium, utm_source, utm_term,
|
|
13
|
-
}] = useDefaultUtmPageState()
|
|
14
|
-
const [,setSearchParams] = useSearchParams()
|
|
15
|
-
|
|
16
|
-
const [sessionStorageArchivist, error] = usePromise(async () => {
|
|
17
|
-
return await UtmStorageArchivist()
|
|
18
|
-
}, [])
|
|
19
|
-
|
|
20
|
-
const utmPayload = useMemo(() => {
|
|
21
|
-
// Construct the base UTM payload
|
|
22
|
-
const utm: Payload<Utm> = { schema: asSchema(UtmSchema, true) }
|
|
23
|
-
|
|
24
|
-
// determine if there's a utm field that still has a value
|
|
25
|
-
// if there is none, it means that either the page loaded
|
|
26
|
-
// with none or they've already been captured
|
|
27
|
-
const utmParams = {
|
|
28
|
-
utm_campaign, utm_content, utm_medium, utm_source, utm_term,
|
|
29
|
-
}
|
|
30
|
-
const foundUpdatedUtmParams = Object.entries(utmParams).some(([key, value]) => {
|
|
31
|
-
return key.includes('utm_') && value
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
if (foundUpdatedUtmParams) {
|
|
35
|
-
// Conditionally add all the UTM parameters present
|
|
36
|
-
if (utm_campaign) utm.utm_campaign = utm_campaign
|
|
37
|
-
if (utm_content) utm.utm_content = utm_content
|
|
38
|
-
if (utm_medium) utm.utm_medium = utm_medium
|
|
39
|
-
if (utm_source) utm.utm_source = utm_source
|
|
40
|
-
if (utm_term) utm.utm_term = utm_term
|
|
41
|
-
|
|
42
|
-
return utm
|
|
43
|
-
} else {
|
|
44
|
-
return null
|
|
45
|
-
}
|
|
46
|
-
}, [utm_campaign, utm_content, utm_medium, utm_source, utm_term])
|
|
47
|
-
|
|
48
|
-
const [,insertError] = usePromise(async () => {
|
|
49
|
-
if (utmPayload && sessionStorageArchivist) {
|
|
50
|
-
// clear all previous utm payloads
|
|
51
|
-
await sessionStorageArchivist.clear()
|
|
52
|
-
// insert params into session storage
|
|
53
|
-
await sessionStorageArchivist.insert([utmPayload])
|
|
54
|
-
|
|
55
|
-
if (removeAfterCapture) {
|
|
56
|
-
// remove the utm params from the URL
|
|
57
|
-
setSearchParams(() => {
|
|
58
|
-
const newParams = new URLSearchParams()
|
|
59
|
-
for (const value of Object.values(UtmQueryParamStrings)) {
|
|
60
|
-
newParams.delete(value)
|
|
61
|
-
}
|
|
62
|
-
return newParams
|
|
63
|
-
})
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
}, [sessionStorageArchivist, utmPayload, removeAfterCapture])
|
|
67
|
-
|
|
68
|
-
return { utmPayload, error: error ?? insertError }
|
|
69
|
-
}
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import { useMemo } from 'react'
|
|
2
|
-
import { useSearchParams } from 'react-router-dom'
|
|
3
|
-
|
|
4
|
-
import type { PageStateKeys } from '../lib/index.ts'
|
|
5
|
-
|
|
6
|
-
export interface DefaultPageStateParams<TQueryParams extends PageStateKeys = PageStateKeys> {
|
|
7
|
-
queryParams: TQueryParams
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export type DefaultPageStateReturn<TPageStateKeys extends PageStateKeys = PageStateKeys> = [
|
|
11
|
-
Record<TPageStateKeys[number], string>,
|
|
12
|
-
(source: keyof DefaultPageStateParams, key: TPageStateKeys[number], value: string) => void,
|
|
13
|
-
]
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* Hook to get default page state as key value pairs from various sources. It provides a convenient abstraction over free form
|
|
17
|
-
* page state like query params by narrowing the used params and centralizing their logic.
|
|
18
|
-
*
|
|
19
|
-
* Future work could include adding support for localStorage, sessionStorage, and precedence of sources.
|
|
20
|
-
* @param defaultPageStateParams various sources of default page state (i.e. queryParams, localStorage, etc.)
|
|
21
|
-
* @returns
|
|
22
|
-
*/
|
|
23
|
-
export const useDefaultPageState = <TQueryParams extends PageStateKeys = PageStateKeys>(
|
|
24
|
-
{ queryParams }: DefaultPageStateParams<TQueryParams>,
|
|
25
|
-
): DefaultPageStateReturn<TQueryParams> => {
|
|
26
|
-
const [searchParams, setSearchParams] = useSearchParams()
|
|
27
|
-
|
|
28
|
-
const patchDefaultPageState = (source: keyof DefaultPageStateParams, key: TQueryParams[number], value: string) => {
|
|
29
|
-
switch (source) {
|
|
30
|
-
case 'queryParams': {
|
|
31
|
-
setSearchParams((prevSearchParams) => {
|
|
32
|
-
const newSearchParams = new URLSearchParams(prevSearchParams)
|
|
33
|
-
newSearchParams.set(key, value)
|
|
34
|
-
return newSearchParams
|
|
35
|
-
})
|
|
36
|
-
break
|
|
37
|
-
}
|
|
38
|
-
default: {
|
|
39
|
-
throw new Error(`Invalid source for default page state: ${source}`)
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
const queryParamsState = useMemo(() => {
|
|
45
|
-
if (!queryParams) return {} as Record<TQueryParams[number], string>
|
|
46
|
-
let defaultState = {} as Record<TQueryParams[number], string>
|
|
47
|
-
for (const [key, value] of searchParams.entries()) {
|
|
48
|
-
if (queryParams.includes(key)) {
|
|
49
|
-
defaultState[key as TQueryParams[number]] = value
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
return defaultState
|
|
53
|
-
}, [searchParams, queryParams])
|
|
54
|
-
|
|
55
|
-
return [queryParamsState, patchDefaultPageState]
|
|
56
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useDefaultPageState } from './useDefaultPageState.ts'
|
|
2
|
-
|
|
3
|
-
export const UtmQueryParamStrings = {
|
|
4
|
-
utmCampaign: 'utm_campaign',
|
|
5
|
-
utmContent: 'utm_content',
|
|
6
|
-
utmMedium: 'utm_medium',
|
|
7
|
-
utmSource: 'utm_source',
|
|
8
|
-
utmTerm: 'utm_term',
|
|
9
|
-
} as const
|
|
10
|
-
|
|
11
|
-
export type UtmQueryParams = typeof UtmQueryParamStrings[keyof typeof UtmQueryParamStrings]
|
|
12
|
-
|
|
13
|
-
/** Get the default page state for utm values from specific query params */
|
|
14
|
-
export const useDefaultUtmPageState = () => useDefaultPageState<UtmQueryParams[]>({ queryParams: Object.values(UtmQueryParamStrings) })
|
package/src/utm/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type PageStateKeys = ReadonlyArray<string>
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import type { Utm, UtmSchema } from '@xyo-network/advertising-payload-plugins'
|
|
2
|
-
import { isUtm } from '@xyo-network/advertising-payload-plugins'
|
|
3
|
-
import type { StorageArchivistParams } from '@xyo-network/archivist-storage'
|
|
4
|
-
import { StorageArchivist, StorageArchivistConfigSchema } from '@xyo-network/archivist-storage'
|
|
5
|
-
import type { Payload, Schema } from '@xyo-network/payload-model'
|
|
6
|
-
|
|
7
|
-
const STORAGE_NAME_SPACE = 'utm' as const
|
|
8
|
-
|
|
9
|
-
let archivist: StorageArchivist | undefined
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Find or create a single instance of the UtmStorageArchivist
|
|
13
|
-
* @returns Archivist instance
|
|
14
|
-
*/
|
|
15
|
-
export const UtmStorageArchivist = async () => {
|
|
16
|
-
if (archivist) {
|
|
17
|
-
return archivist
|
|
18
|
-
} else {
|
|
19
|
-
archivist = await StorageArchivist.create({
|
|
20
|
-
account: 'random',
|
|
21
|
-
config: {
|
|
22
|
-
schema: StorageArchivistConfigSchema, namespace: STORAGE_NAME_SPACE, type: 'session',
|
|
23
|
-
},
|
|
24
|
-
} as StorageArchivistParams)
|
|
25
|
-
return archivist
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export const LatestUtmPayload = async (): Promise<Payload<Utm, Schema<UtmSchema>> | undefined> => {
|
|
30
|
-
const archivist = await UtmStorageArchivist()
|
|
31
|
-
return (await archivist.next()).find(isUtm) as Payload<Utm, Schema<UtmSchema>>
|
|
32
|
-
}
|
package/src/utm/lib/index.ts
DELETED