From d527b4351da5dae39a9ef3ea10009252ae485ed9 Mon Sep 17 00:00:00 2001 From: Alexander Sapountzis Date: Tue, 7 Jan 2025 09:57:52 -0500 Subject: [PATCH 1/7] refactor: Create Interfaces for Events --- src/events.interfaces.ts | 77 ++++++++++++++++++++++++++++++++++++++++ src/sdkRuntimeModels.ts | 18 +++++----- 2 files changed, 86 insertions(+), 9 deletions(-) create mode 100644 src/events.interfaces.ts diff --git a/src/events.interfaces.ts b/src/events.interfaces.ts new file mode 100644 index 000000000..0c2e522af --- /dev/null +++ b/src/events.interfaces.ts @@ -0,0 +1,77 @@ +import { + Callback, + Dictionary, + SDKEventAttrs, + SDKEventOptions, + TransactionAttributes, +} from '@mparticle/web-sdk'; +import { + BaseEvent, + SDKEventCustomFlags, + SDKProduct, + SDKProductImpression, + SDKPromotion, +} from './sdkRuntimeModels'; +import { valueof } from './utils'; +import { EventType, ProductActionType, PromotionActionType } from './types'; + +type dataFunction = (element: HTMLElement) => Dictionary; +type dataObject = Dictionary; + +export interface IEvents { + addEventHandler( + domEvent: string, + selector: string | Node, + eventName: string, + + // QUESTION: In what cases would data be a function? + data: dataObject | dataFunction, + + eventType: valueof + ): void; + logCheckoutEvent( + step: number, + option?: SDKEventOptions, + attrs?: SDKEventAttrs, + customFlags?: SDKEventCustomFlags + ); + logEvent(event: BaseEvent, eventOptions?: SDKEventOptions): void; + logImpressionEvent( + impression: SDKProductImpression, + attrs?: SDKEventAttrs, + customFlags?: SDKEventCustomFlags, + eventOptions?: SDKEventOptions + ); + logOptOut(): void; + logProductActionEvent( + productActionType: valueof, + product: SDKProduct, + attrs?: SDKEventAttrs, + customFlags?: SDKEventCustomFlags, + transactionAttributes?: TransactionAttributes, + eventOptions?: SDKEventOptions + ); + logPromotionEvent( + promotionType: valueof, + promotion: SDKPromotion, + attrs?: SDKEventAttrs, + customFlags?: SDKEventCustomFlags, + eventOptions?: SDKEventOptions + ); + logPurchaseEvent( + product: SDKProduct, + transactionAttributes?: TransactionAttributes, + attrs?: SDKEventAttrs, + customFlags?: SDKEventCustomFlags + ); + logRefundEvent( + transactionAttributes: TransactionAttributes, + product: SDKProduct, + attrs?: SDKEventAttrs, + customFlags?: SDKEventCustomFlags + ); + startTracking(callback: Callback): void; + stopTracking(): void; + + +} diff --git a/src/sdkRuntimeModels.ts b/src/sdkRuntimeModels.ts index b4637b5b2..ba9f2c25e 100644 --- a/src/sdkRuntimeModels.ts +++ b/src/sdkRuntimeModels.ts @@ -4,6 +4,8 @@ import { MPConfiguration, MPID, IdentityApiData, + SDKEventOptions, + SDKEventAttrs, } from '@mparticle/web-sdk'; import { IStore } from './store'; import Validators from './validators'; @@ -37,6 +39,7 @@ import { import IntegrationCapture from './integrationCapture'; import { INativeSdkHelpers } from './nativeSdkHelpers.interfaces'; import { ICookieSyncManager, IPixelConfiguration } from './cookieSyncManager'; +import { IEvents } from './events.interfaces'; // TODO: Resolve this with version in @mparticle/web-sdk export type SDKEventCustomFlags = Dictionary; @@ -150,11 +153,6 @@ export interface SDKProduct { Attributes?: { [key: string]: string }; } -// Temporary Interfaces for Events Module -interface IEvents { - logEvent?(event: BaseEvent): void; -} - export interface MParticleWebSDK { addForwarder(mockForwarder: MPForwarder): void; _IntegrationCapture: IntegrationCapture; @@ -204,11 +202,12 @@ export interface MParticleWebSDK { startNewSession(): void; logEvent( eventName: string, - eventType?: number, - attrs?: { [key: string]: string }, - customFlags?: SDKEventCustomFlags + eventType?: valueof, + attrs?: SDKEventAttrs, + customFlags?: SDKEventCustomFlags, + eventOptions?: SDKEventOptions ): void; - logBaseEvent(event: any): void; + logBaseEvent(event: BaseEvent, eventOptions?: SDKEventOptions): void; eCommerce: any; logLevel: string; ProductActionType: SDKProductActionType; @@ -293,6 +292,7 @@ export interface SDKHelpersApi { timeoutStart: number, now: number ): boolean; + isEventType?(type: valueof): boolean; isObject?(item: any); invokeCallback?( callback: IdentityCallback, From af9ca1cfd48e3654259a61c2c971e549bc690315 Mon Sep 17 00:00:00 2001 From: Alexander Sapountzis Date: Tue, 14 Jan 2025 10:48:12 -0500 Subject: [PATCH 2/7] Address PR Comments --- src/events.interfaces.ts | 26 +++++++++++++++++++------- src/mp-instance.js | 2 +- 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/events.interfaces.ts b/src/events.interfaces.ts index 0c2e522af..4e666d647 100644 --- a/src/events.interfaces.ts +++ b/src/events.interfaces.ts @@ -7,6 +7,7 @@ import { } from '@mparticle/web-sdk'; import { BaseEvent, + SDKEvent, SDKEventCustomFlags, SDKProduct, SDKProductImpression, @@ -18,6 +19,11 @@ import { EventType, ProductActionType, PromotionActionType } from './types'; type dataFunction = (element: HTMLElement) => Dictionary; type dataObject = Dictionary; +// User options specified during the checkout process +// e.g., FedEx, DHL, UPS for delivery options; +// Visa, MasterCard, AmEx for payment options. +type checkoutOption = string; + export interface IEvents { addEventHandler( domEvent: string, @@ -29,12 +35,18 @@ export interface IEvents { eventType: valueof ): void; + logAST(): void; logCheckoutEvent( step: number, - option?: SDKEventOptions, + option?: checkoutOption, attrs?: SDKEventAttrs, customFlags?: SDKEventCustomFlags - ); + ): void; + logCommerceEvent( + commerceEvent: SDKEvent, + attrs?: SDKEventAttrs, + options?: SDKEventOptions, + ): void; logEvent(event: BaseEvent, eventOptions?: SDKEventOptions): void; logImpressionEvent( impression: SDKProductImpression, @@ -50,26 +62,26 @@ export interface IEvents { customFlags?: SDKEventCustomFlags, transactionAttributes?: TransactionAttributes, eventOptions?: SDKEventOptions - ); + ): void; logPromotionEvent( promotionType: valueof, promotion: SDKPromotion, attrs?: SDKEventAttrs, customFlags?: SDKEventCustomFlags, eventOptions?: SDKEventOptions - ); + ): void; logPurchaseEvent( + transactionAttributes: TransactionAttributes, product: SDKProduct, - transactionAttributes?: TransactionAttributes, attrs?: SDKEventAttrs, customFlags?: SDKEventCustomFlags - ); + ): void; logRefundEvent( transactionAttributes: TransactionAttributes, product: SDKProduct, attrs?: SDKEventAttrs, customFlags?: SDKEventCustomFlags - ); + ): void; startTracking(callback: Callback): void; stopTracking(): void; diff --git a/src/mp-instance.js b/src/mp-instance.js index c34f7c020..66ba52a2b 100644 --- a/src/mp-instance.js +++ b/src/mp-instance.js @@ -824,7 +824,7 @@ export default function mParticleInstance(instanceName) { * @for mParticle.eCommerce * @method logCheckout * @param {Number} step checkout step number - * @param {String} option + * @param {String} option checkout option string * @param {Object} attrs * @param {Object} [customFlags] Custom flags for the event * @deprecated From 4ebc7f020036623eb9fc135dfdf21051b1a8677c Mon Sep 17 00:00:00 2001 From: Alexander Sapountzis Date: Tue, 14 Jan 2025 15:25:06 -0500 Subject: [PATCH 3/7] Address PR Comments --- src/events.interfaces.ts | 18 ++++++++---------- src/events.js | 3 +++ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/events.interfaces.ts b/src/events.interfaces.ts index 4e666d647..c09dc4434 100644 --- a/src/events.interfaces.ts +++ b/src/events.interfaces.ts @@ -15,9 +15,12 @@ import { } from './sdkRuntimeModels'; import { valueof } from './utils'; import { EventType, ProductActionType, PromotionActionType } from './types'; +import { CommonEventData } from '@mparticle/event-models'; -type dataFunction = (element: HTMLElement) => Dictionary; -type dataObject = Dictionary; +// Supports wrapping event handlers functions that will ideally return a specific type +interface eventHandlerFunction{ + (element: HTMLLinkElement | HTMLFormElement): T; +} // User options specified during the checkout process // e.g., FedEx, DHL, UPS for delivery options; @@ -28,11 +31,8 @@ export interface IEvents { addEventHandler( domEvent: string, selector: string | Node, - eventName: string, - - // QUESTION: In what cases would data be a function? - data: dataObject | dataFunction, - + eventName: eventHandlerFunction | string, + data: eventHandlerFunction | CommonEventData, eventType: valueof ): void; logAST(): void; @@ -45,7 +45,7 @@ export interface IEvents { logCommerceEvent( commerceEvent: SDKEvent, attrs?: SDKEventAttrs, - options?: SDKEventOptions, + options?: SDKEventOptions ): void; logEvent(event: BaseEvent, eventOptions?: SDKEventOptions): void; logImpressionEvent( @@ -84,6 +84,4 @@ export interface IEvents { ): void; startTracking(callback: Callback): void; stopTracking(): void; - - } diff --git a/src/events.js b/src/events.js index 4dfde7f93..73969b5df 100644 --- a/src/events.js +++ b/src/events.js @@ -438,10 +438,13 @@ export default function Events(mpInstance) { element = elements[i]; if (element.addEventListener) { + // Modern browsers element.addEventListener(domEvent, handler, false); } else if (element.attachEvent) { + // IE < 9 element.attachEvent('on' + domEvent, handler); } else { + // All other browsers element['on' + domEvent] = handler; } } From 98c405c5936b84574202ab0b9dec52dc454c9ec0 Mon Sep 17 00:00:00 2001 From: Alexander Sapountzis Date: Tue, 14 Jan 2025 15:56:02 -0500 Subject: [PATCH 4/7] Address PR Comments --- src/events.interfaces.ts | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/events.interfaces.ts b/src/events.interfaces.ts index c09dc4434..a0c4cce30 100644 --- a/src/events.interfaces.ts +++ b/src/events.interfaces.ts @@ -1,6 +1,5 @@ import { Callback, - Dictionary, SDKEventAttrs, SDKEventOptions, TransactionAttributes, @@ -18,27 +17,25 @@ import { EventType, ProductActionType, PromotionActionType } from './types'; import { CommonEventData } from '@mparticle/event-models'; // Supports wrapping event handlers functions that will ideally return a specific type -interface eventHandlerFunction{ - (element: HTMLLinkElement | HTMLFormElement): T; -} +type EventHandlerFunction = (element: HTMLLinkElement | HTMLFormElement) => T; // User options specified during the checkout process // e.g., FedEx, DHL, UPS for delivery options; // Visa, MasterCard, AmEx for payment options. -type checkoutOption = string; +type CheckoutOption = string; export interface IEvents { addEventHandler( domEvent: string, selector: string | Node, - eventName: eventHandlerFunction | string, - data: eventHandlerFunction | CommonEventData, + eventName: EventHandlerFunction | string, + data: EventHandlerFunction | CommonEventData, eventType: valueof ): void; logAST(): void; logCheckoutEvent( step: number, - option?: checkoutOption, + option?: CheckoutOption, attrs?: SDKEventAttrs, customFlags?: SDKEventCustomFlags ): void; From 461ab55cedcff95b5cc848abf83c22180cebaff5 Mon Sep 17 00:00:00 2001 From: Alexander Sapountzis Date: Tue, 14 Jan 2025 15:57:58 -0500 Subject: [PATCH 5/7] Address PR Comments --- src/events.interfaces.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/events.interfaces.ts b/src/events.interfaces.ts index a0c4cce30..2f6459d91 100644 --- a/src/events.interfaces.ts +++ b/src/events.interfaces.ts @@ -19,11 +19,6 @@ import { CommonEventData } from '@mparticle/event-models'; // Supports wrapping event handlers functions that will ideally return a specific type type EventHandlerFunction = (element: HTMLLinkElement | HTMLFormElement) => T; -// User options specified during the checkout process -// e.g., FedEx, DHL, UPS for delivery options; -// Visa, MasterCard, AmEx for payment options. -type CheckoutOption = string; - export interface IEvents { addEventHandler( domEvent: string, @@ -35,7 +30,12 @@ export interface IEvents { logAST(): void; logCheckoutEvent( step: number, - option?: CheckoutOption, + + // User options specified during the checkout process + // e.g., FedEx, DHL, UPS for delivery options; + // Visa, MasterCard, AmEx for payment options. + option?: string, + attrs?: SDKEventAttrs, customFlags?: SDKEventCustomFlags ): void; From c3bcf9fa3ac37e5dfa357ea51e1d7e5c768e4178 Mon Sep 17 00:00:00 2001 From: Alexander Sapountzis Date: Wed, 15 Jan 2025 10:09:52 -0500 Subject: [PATCH 6/7] Address PR Comments --- src/events.interfaces.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/events.interfaces.ts b/src/events.interfaces.ts index 2f6459d91..82290777a 100644 --- a/src/events.interfaces.ts +++ b/src/events.interfaces.ts @@ -14,7 +14,6 @@ import { } from './sdkRuntimeModels'; import { valueof } from './utils'; import { EventType, ProductActionType, PromotionActionType } from './types'; -import { CommonEventData } from '@mparticle/event-models'; // Supports wrapping event handlers functions that will ideally return a specific type type EventHandlerFunction = (element: HTMLLinkElement | HTMLFormElement) => T; @@ -24,7 +23,7 @@ export interface IEvents { domEvent: string, selector: string | Node, eventName: EventHandlerFunction | string, - data: EventHandlerFunction | CommonEventData, + data: EventHandlerFunction | SDKEventAttrs, eventType: valueof ): void; logAST(): void; From 9082411aa81f7e9992ab2aa7d8a560a704c576ec Mon Sep 17 00:00:00 2001 From: Alex S <49695018+alexs-mparticle@users.noreply.github.com> Date: Wed, 15 Jan 2025 10:10:11 -0500 Subject: [PATCH 7/7] Update src/mp-instance.js Co-authored-by: Robert Ing --- src/mp-instance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/mp-instance.js b/src/mp-instance.js index 66ba52a2b..56ef1adcf 100644 --- a/src/mp-instance.js +++ b/src/mp-instance.js @@ -824,7 +824,7 @@ export default function mParticleInstance(instanceName) { * @for mParticle.eCommerce * @method logCheckout * @param {Number} step checkout step number - * @param {String} option checkout option string + * @param {String} checkout option string * @param {Object} attrs * @param {Object} [customFlags] Custom flags for the event * @deprecated