@mparticle/web-sdk 3.27.0 → 3.29.0

package/dist/types/src/buttonTracking/buttonDescription.d.ts

@@ -19,8 +19,8 @@ export interface IButtonClick {
     linkPath?: string;
     fileExtension?: string;
     checked?: boolean;
-    pick?: true;
 }
+export declare const TEST_ID_ATTRIBUTES: string[];
 export declare function isLinkClick(click: IButtonClick): boolean;
 export declare function describeButtonClick(control: Element, path?: Array<EventTarget | null>): IButtonClick | undefined;
 export interface IPaymentChoice {
@@ -28,4 +28,5 @@ export interface IPaymentChoice {
     names: string[];
 }
 export declare function describePaymentChoice(control: Element, path?: Array<EventTarget | null>): IPaymentChoice | undefined;
+export declare function describeCheckedPaymentChoice(): IPaymentChoice | undefined;
 export declare function isPicked(radio: Element): boolean;

package/dist/types/src/buttonTracking/buttonTracker.d.ts

@@ -20,9 +20,6 @@ export declare class ButtonTracker {
     private pagePath;
     private pageEvents;
     private pending;
-    private uploadTimerId;
-    private uploadHeld;
-    private leaving;
     constructor(mpInstance: IMParticleWebSDKInstance);
     get isActive(): boolean;
     init(options: IButtonTrackerOptions): void;
@@ -37,9 +34,6 @@ export declare class ButtonTracker {
     private readonly onEvent;
     private observe;
     private logClick;
-    private queuedForUpload;
-    private uploadNow;
-    private cancelUpload;
     private emit;
     private pickPayment;
     private eventsEnabled;

package/dist/types/src/buttonTracking/checkoutIntent.d.ts

@@ -1,3 +1,4 @@
+import { IButtonClick } from './buttonDescription';
 export type CheckoutIntentKind = 'commit' | 'wallet' | 'checkout_step' | 'frame' | 'cart';
 export type PaymentFrameFamily = 'apple_pay' | 'google_pay' | 'amazon_pay' | 'shop_pay' | 'card';
 export type CheckoutIntentSource = 'vendor' | 'label' | 'brand' | 'frame' | 'submit' | 'name' | 'api';
@@ -7,6 +8,7 @@ export interface ICheckoutIntent {
     adds?: true;
 }
 export declare function classifyIntent(control: Element, pathname: string): ICheckoutIntent | undefined;
+export declare function namesWallet(control: Element, click?: IButtonClick): boolean;
 export declare function classifyIntentControl(control: Element, pathname: string): Exclude<CheckoutIntentKind, 'frame'> | undefined;
 export interface IPaymentFrame {
     kind: 'wallet' | 'frame';

package/dist/types/src/pathMasking.d.ts

@@ -1,7 +1,9 @@
 export declare const LEFTOVER_ESCAPE: RegExp;
+export declare function hidesSegmentAfter(route: string, segment: string): boolean;
 export declare function hidesNextSegment(route: string): boolean;
 export declare function decodeFully(text: string): string | undefined;
 export declare function routeSegment(segments: string[], i: number): string;
 export declare function isTokenSegment(segment: string): boolean;
+export declare function maskTokenSegment(segment: string, text: string, route: string | undefined): string | undefined;
 export declare function pagePath(pathname: string): string;
 export declare function pageUrlPath(pathname: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mparticle/web-sdk",
-    "version": "3.27.0",
+    "version": "3.29.0",
     "description": "mParticle core SDK for web applications",
     "license": "Apache-2.0",
     "keywords": [

package/src/batchUploader.ts

@@ -479,14 +479,16 @@ export class BatchUploader {
             this.batchesQueuedForProcessing.unshift(...batchesThatDidNotUpload);
         }
 
-        // Update Offline Storage with current state of batch queue
-        if (!useBeacon && this.offlineStorageEnabled && this.batchVault) {
-            // Note: since beacon is "Fire and forget" it will empty `batchesThatDidNotUplod`
-            // regardless of whether the batches were successfully uploaded or not. We should
-            // therefore NOT overwrite Offline Storage when beacon returns, so that we can retry
-            // uploading saved batches at a later time. Batches should only be removed from
-            // Local Storage once we can confirm they are successfully uploaded.
-            
+        // Update Offline Storage with current state of batch queue. Storage was
+        // purged before sending. A beacon the browser accepted counts as sent, so
+        // the beacon path writes nothing unless the browser refused a batch: then
+        // `batchesThatDidNotUpload` holds it, and it is stored since the page may
+        // be going away.
+        if (
+            this.offlineStorageEnabled &&
+            this.batchVault &&
+            (!useBeacon || !isEmpty(batchesThatDidNotUpload))
+        ) {
             this.storeBatchesQueuedForProcessing();
         }
 
@@ -570,6 +572,7 @@ export class BatchUploader {
             this.mpInstance.Logger.verbose(`Batch count: ${uploads.length}`);
         }
 
+        const refused: Batch[] = [];
         for (let i = 0; i < uploads.length; i++) {
             const fetchPayload: IFetchPayload = {
                 method: 'POST',
@@ -586,7 +589,13 @@ export class BatchUploader {
                     type: 'text/plain;charset=UTF-8',
                 });
 
-                navigator.sendBeacon(this.uploadUrl, blob);
+                // The browser refuses a beacon it won't send, such as one over its
+                // size limit, which says nothing about the next batch. Keep it and
+                // try the rest. Only false is a refusal: a wrapper that returns
+                // nothing has still sent it.
+                if (navigator.sendBeacon(this.uploadUrl, blob) === false) {
+                    refused.push(uploads[i]);
+                }
             } else {
                 try {
                     const response = await this.uploader.upload(fetchPayload);
@@ -629,6 +638,13 @@ export class BatchUploader {
                 }
             }
         }
+
+        if (!isEmpty(refused)) {
+            this.mpInstance.Logger.warning(
+                `The browser refused the exit upload of ${refused.length} batch(es). Keeping them for the next upload.`
+            );
+            return refused;
+        }
         return null;
     }
 }

package/src/buttonTracking/buttonDescription.ts

@@ -10,9 +10,9 @@ import {
 import { maskLabel, maskNumbers, MAX_RAW_LABEL_LENGTH } from './labelMasking';
 import {
     decodeFully,
-    hidesNextSegment,
-    isTokenSegment,
+    hidesSegmentAfter,
     LEFTOVER_ESCAPE,
+    maskTokenSegment,
     routeSegment,
 } from '../pathMasking';
 
@@ -54,8 +54,6 @@ export interface IButtonClick {
     linkPath?: string;
     fileExtension?: string;
     checked?: boolean;
-    // A pick among options or tabs, which waits for the batch interval.
-    pick?: true;
 }
 
 function elementKind(control: Element): ButtonElementKind {
@@ -205,12 +203,19 @@ function textOf(element: Element | null): string | undefined {
         : '';
 }
 
-// The control itself is already known to be shown.
+// The control itself is already known to be shown. An inline icon names
+// itself with aria-label rather than alt.
 function shownImageAlt(control: Element): string | undefined {
-    const images = control.querySelectorAll('img[alt]');
+    const images = control.querySelectorAll(
+        'img[alt], svg[aria-label], [role="img"][aria-label]'
+    );
     for (let i = 0; i < images.length && i < MAX_READS; i++) {
-        if (isShown(images[i], control) && isVisible(images[i])) {
-            return nonBlank(images[i].getAttribute('alt'));
+        const alt = nonBlank(
+            images[i].getAttribute('alt') ||
+                images[i].getAttribute('aria-label')
+        );
+        if (alt && isShown(images[i], control) && isVisible(images[i])) {
+            return alt;
         }
     }
     return undefined;
@@ -390,7 +395,7 @@ function questionName(value: string | null): string | undefined {
     return stableIdentifier(value && value.trim().replace(/[-_][0-9]{4,}$/, ''));
 }
 
-const TEST_ID_ATTRIBUTES = [
+export const TEST_ID_ATTRIBUTES = [
     'data-testid',
     'data-test-id',
     'data-test',
@@ -497,12 +502,21 @@ function linkPath(link: HTMLAnchorElement): string | undefined {
         return undefined;
     }
     const segments = path.split('/');
-    const masked = segments.map((segment, i) =>
-        isTokenSegment(segment) ||
-        (i > 0 && segment && hidesNextSegment(routeSegment(segments, i)))
-            ? '*'
-            : segment
-    );
+    const masked = segments.map((segment, i) => {
+        if (
+            i > 0 &&
+            segment &&
+            hidesSegmentAfter(routeSegment(segments, i), segment)
+        ) {
+            return '*';
+        }
+        const tokens = maskTokenSegment(
+            segment,
+            segment,
+            i > 0 ? routeSegment(segments, i) : undefined
+        );
+        return tokens === undefined ? segment : tokens;
+    });
     return maskNumbers(masked.join('/'));
 }
 
@@ -677,7 +691,6 @@ export function describeButtonClick(
         // The box as the click left it: the browser toggles it before the click
         // reaches listeners, and puts it back if the click is cancelled.
         checked: box ? box.checked : undefined,
-        pick: choice || control.matches('[role~="tab"]') ? true : undefined,
     };
 }
 
@@ -685,7 +698,9 @@ export function describeButtonClick(
 // aria-label, aria-labelledby or legend, masked like a label and cut at its
 // first colon, since a legend can repeat the pick ("Color: Navy"). Never the
 // option's own text, which is the shopper's answer.
-const NAMED_GROUP = '[role="radiogroup"], [role="listbox"], [role="group"], fieldset';
+const NAMED_GROUP =
+    '[role="radiogroup"], [role="listbox"], [role="group"], fieldset, ' +
+    '[role="region"][aria-label], [role="region"][aria-labelledby]';
 // A control such as the button that opens a list box shows the option picked.
 const NOT_A_QUESTION =
     CHOICE +
@@ -734,6 +749,144 @@ function sameQuestion(option: Element, choice: Element): boolean {
     );
 }
 
+function isTransparent(element: Element, until: Element): boolean {
+    return someComposedAncestor(
+        element,
+        node => window.getComputedStyle(node).opacity === '0',
+        until
+    );
+}
+
+// Content that is never painted where it sits: SVG that is only referenced or
+// read, and a canvas's fallback, which some browsers still give boxes.
+const UNDRAWN =
+    'svg title, svg desc, svg metadata, svg defs, svg symbol, svg clipPath, ' +
+    'svg mask, svg pattern, svg marker, svg linearGradient, ' +
+    'svg radialGradient, svg filter, canvas';
+
+// Whether text sits in any closed details element outside its summary.
+function isInClosedDetails(text: Node, parent: Element): boolean {
+    let details = parent.closest('details:not([open])');
+    while (details) {
+        const summary = Array.from(details.children).filter(
+            child => child.tagName === 'SUMMARY'
+        )[0];
+        if (!summary || !summary.contains(text)) {
+            return true;
+        }
+        details = details.parentElement
+            ? details.parentElement.closest('details:not([open])')
+            : null;
+    }
+    return false;
+}
+
+// Whether the browser shows an element through every ancestor it renders
+// under, shadow trees included, which a walk of light ancestors can't see
+// into when a shadow root is closed. Where it can't say (checkVisibility
+// arrived in Chrome 105, Firefox 125 and Safari 17.4), the element counts as
+// not shown, so option rows name no group in older browsers.
+function isComposedVisible(element: Element): boolean {
+    const check = (element as Element & {
+        checkVisibility?: (options: { [key: string]: boolean }) => boolean;
+    }).checkVisibility;
+    return (
+        isFunction(check) &&
+        // Older Chrome versions read the first two names, newer browsers the rest.
+        check.call(element, {
+            checkOpacity: true,
+            checkVisibilityCSS: true,
+            opacityProperty: true,
+            visibilityProperty: true,
+        })
+    );
+}
+
+// Whether the browser lays a text node out in a box of its own. Text it never
+// draws, such as an SVG definition, canvas fallback, closed details or an
+// unslotted child of a shadow host, has none. Where boxes can't be read, the
+// text counts as not drawn.
+function isDrawn(text: Node): boolean {
+    const range = isFunction(document.createRange)
+        ? document.createRange()
+        : null;
+    if (!range || !isFunction(range.getClientRects)) {
+        return false;
+    }
+    range.selectNodeContents(text);
+    return Array.from(range.getClientRects()).some(
+        box => box.width > 0 && box.height > 0
+    );
+}
+
+// Whether a row shows text of its own: a drawn, shown, non-transparent text
+// node, outside any form field, editable area or opted-out part, beside
+// nothing but the row's own input. Not a row with a shadow root, slot or
+// custom element, whose rendered text a walk of its light children can't see.
+function showsText(row: Element, own: Element): boolean {
+    if (
+        isUnsafeTextSource(row, own) ||
+        hasComposedAncestor(own, '[data-mp-no-track]') ||
+        row.shadowRoot ||
+        row.tagName.indexOf('-') !== -1 ||
+        row.querySelector('slot')
+    ) {
+        return false;
+    }
+    // A row too large to check in full counts as showing nothing.
+    const descendants = row.querySelectorAll('*');
+    if (descendants.length > MAX_READS) {
+        return false;
+    }
+    for (let i = 0; i < descendants.length; i++) {
+        if (
+            descendants[i].shadowRoot ||
+            descendants[i].tagName.indexOf('-') !== -1
+        ) {
+            return false;
+        }
+    }
+    const walker = document.createTreeWalker(row, NodeFilter.SHOW_TEXT);
+    for (let i = 0; i < MAX_READS && walker.nextNode(); i++) {
+        const parent = walker.currentNode.parentElement;
+        if (
+            parent &&
+            nonBlank(walker.currentNode.nodeValue) &&
+            // Undrawn content, and the body of a closed details element,
+            // which browsers still give layout boxes.
+            !parent.closest(UNDRAWN) &&
+            !isInClosedDetails(walker.currentNode, parent) &&
+            isShown(parent, row) &&
+            isVisible(parent) &&
+            !isTransparent(parent, row) &&
+            isComposedVisible(parent) &&
+            isDrawn(walker.currentNode)
+        ) {
+            return true;
+        }
+    }
+    return false;
+}
+
+// A native input inside a shown control of its own, such as a menu option row
+// with a styled radio, which shows text of its own and doesn't also hold the
+// option picked.
+function showsRow(option: Element, choice: Element, group: Element): boolean {
+    const row =
+        option instanceof HTMLInputElement && option.parentElement
+            ? option.parentElement.closest(CONTROL_SELECTOR)
+            : null;
+    return (
+        !!row &&
+        group.contains(row) &&
+        !row.contains(choice) &&
+        isShown(row, group) &&
+        isVisible(row) &&
+        !isTransparent(row, group) &&
+        showsText(row, option)
+    );
+}
+
 // Whether a group offers another answer to the question picked: a shown option
 // to the same question that isn't part of the one picked. A card around one
 // address radio and a "make default" checkbox, or around a role radio and the
@@ -749,12 +902,9 @@ function holdsOptions(group: Element, choice: Element): boolean {
             isShown(option, group) &&
             isVisible(option) &&
             // A fully transparent option, as a native input behind a styled
-            // one often is, shows the shopper no second answer.
-            !someComposedAncestor(
-                option,
-                node => window.getComputedStyle(node).opacity === '0',
-                group
-            )
+            // one often is, shows the shopper no second answer, unless a
+            // shown row around it does.
+            (!isTransparent(option, group) || showsRow(option, choice, group))
         ) {
             return true;
         }
@@ -782,34 +932,39 @@ function optionLabels(option: Element, root: Document | ShadowRoot): Element[] {
     return labels;
 }
 
-// The group asking the question a pick answers. A role radio's is its
-// radiogroup and an option's its list box; a role toggle, such as a switch,
-// stands alone. A native box's is the nearest group offering other answers,
-// since a group around one option, such as a saved address card, can be
-// named by that option.
-function questionGroup(choice: Element): Element | null {
+// The name of the group asking the question a pick answers. A role radio's
+// group is its radiogroup and an option's its list box; a role toggle, such as
+// a switch, stands alone. A native box's is the nearest group offering other
+// answers, since a group around one option, such as a saved address card, can
+// be named by that option. A region with no usable name is passed over, so a
+// group around it can still name the pick. Each group's name is read once.
+function groupName(choice: Element): string | undefined {
     if (!(choice instanceof HTMLInputElement)) {
         const container = choice.matches('[role~="option"]')
             ? choice.closest('[role="listbox"]')
             : choice.matches('[role~="radio"]')
             ? choice.closest('[role="radiogroup"]')
             : null;
-        return container && holdsOptions(container, choice) ? container : null;
+        return container && holdsOptions(container, choice)
+            ? nameOf(container)
+            : undefined;
     }
     let group = choice.closest(NAMED_GROUP);
-    while (group && !holdsOptions(group, choice)) {
+    while (group) {
+        if (holdsOptions(group, choice)) {
+            const name = nameOf(group);
+            if (name || !group.matches('[role="region"]')) {
+                return name;
+            }
+        }
         group = group.parentElement
             ? group.parentElement.closest(NAMED_GROUP)
             : null;
     }
-    return group;
+    return undefined;
 }
 
-function groupName(choice: Element): string | undefined {
-    const group = questionGroup(choice);
-    if (!group) {
-        return undefined;
-    }
+function nameOf(group: Element): string | undefined {
     let raw = nonBlank(group.getAttribute('aria-label'));
     if (!raw) {
         const ids = group.getAttribute('aria-labelledby');
@@ -822,11 +977,24 @@ function groupName(choice: Element): string | undefined {
         const root = (isFunction(group.getRootNode)
             ? group.getRootNode()
             : document) as Document | ShadowRoot;
-        const source = ids
+        const target = ids
             ? root.getElementById
                 ? root.getElementById(ids.trim().split(/\s+/)[0])
                 : null
             : legend || null;
+        // A region opened by an accordion header outside a tab list is named
+        // by the header's first heading, never the rest of what it shows.
+        const header =
+            target &&
+            group.matches('[role="region"]') &&
+            (target.getAttribute('role') || '').trim() === 'tab' &&
+            !hasComposedAncestor(target, '[role~="tablist"]') &&
+            !target.querySelector(NOT_A_QUESTION)
+                ? target
+                : null;
+        const source = header
+            ? header.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]')
+            : target;
         // A label that is, holds or sits in an option or a control, or in an
         // option's label, would name the answer.
         const holder = source ? source.closest('label') : null;
@@ -842,7 +1010,10 @@ function groupName(choice: Element): string | undefined {
         raw =
             source &&
             !labelsOption &&
-            !hasComposedAncestor(source, NOT_A_QUESTION) &&
+            !someComposedAncestor(
+                source,
+                node => node !== header && node.matches(NOT_A_QUESTION)
+            ) &&
             !source.querySelector(NOT_A_QUESTION) &&
             !(holder && (holder.control || holder.querySelector(CHOICE)))
                 ? textOf(source)
@@ -871,9 +1042,9 @@ function isPaymentQuestion(radio: Element): boolean {
     return question.some(words => PAYMENT_QUESTION.test(nameWords(words)));
 }
 
-// What names a payment option: the radio's accessible name, the text and
-// image of each label, and its hand-written ids, text masked like a label.
-function optionNames(radio: Element): string[] {
+// What names a payment option to shoppers: the radio's accessible name and the
+// text and image of each label, masked like a label.
+function shownOptionNames(radio: Element): Array<string | undefined> {
     const names: Array<string | undefined> = [
         maskLabel(accessibleName(radio).raw),
     ];
@@ -887,15 +1058,26 @@ function optionNames(radio: Element): string[] {
             names.push(maskLabel(shownImageAlt(label)));
         }
     });
-    names.push(
-        stableIdentifier(radio.getAttribute('id')),
-        firstIdentifier(radio, TEST_ID_ATTRIBUTES)
-    );
+    return names;
+}
+
+function distinctNames(names: Array<string | undefined>): string[] {
     return names.filter(
         (name, index) => !!name && names.indexOf(name) === index
     );
 }
 
+// What names a payment option: the names shoppers read, then its hand-written
+// ids.
+function optionNames(radio: Element): string[] {
+    return distinctNames(
+        shownOptionNames(radio).concat(
+            stableIdentifier(radio.getAttribute('id')),
+            firstIdentifier(radio, TEST_ID_ATTRIBUTES)
+        )
+    );
+}
+
 // The payment radio a click picks and the names of its option, for the Rokt
 // kit alone to read a payment method from. A radio's option is the shopper's
 // answer, so these names never go into the logged click.
@@ -920,6 +1102,44 @@ export function describePaymentChoice(
     return names.length ? { radio: choice, names } : undefined;
 }
 
+const CHECKED_RADIO =
+    'input[type="radio"]:checked, [role~="radio"][aria-checked="true"], [role~="menuitemradio"][aria-checked="true"]';
+
+// The payment radio the page holds checked, such as a card option checked by
+// default that the shopper never clicked. A page holding more than one option
+// names no single method, so it describes nothing. One option drawn twice
+// counts once: a role radio wrapping its native input, a hidden input a
+// component library keeps beside its role radio, or one group rendered for two
+// layouts, whose copies share the names shoppers read but not their ids. An
+// option shoppers see no name for is told apart by its ids.
+export function describeCheckedPaymentChoice(): IPaymentChoice | undefined {
+    const radios = Array.from(document.querySelectorAll(CHECKED_RADIO)).filter(
+        radio =>
+            isPicked(radio) &&
+            radio.getAttribute('aria-hidden') !== 'true' &&
+            !hasComposedAncestor(radio, '[data-mp-no-track]') &&
+            isPaymentQuestion(radio)
+    );
+    const choices = radios
+        .filter(
+            radio =>
+                !radios.some(other => other !== radio && radio.contains(other))
+        )
+        .map(radio => {
+            const shown = distinctNames(shownOptionNames(radio));
+            const names = optionNames(radio);
+            return {
+                radio,
+                names,
+                option: (shown.length ? shown : names).join('\n'),
+            };
+        });
+    const options = new Set(choices.map(choice => choice.option));
+    return options.size === 1 && choices[0].names.length
+        ? { radio: choices[0].radio, names: choices[0].names }
+        : undefined;
+}
+
 // Read once the page has handled the click, which may have cancelled it.
 export function isPicked(radio: Element): boolean {
     return radio instanceof HTMLInputElement