@salla.sa/analytics 2.14.548

package/src/checkout/coupon-applied.js

@@ -0,0 +1,22 @@
+
+class CouponApplied {
+    constructor(details) {
+        this.transaction = details;
+    }
+
+
+    toSegment() {
+        return {
+            event: 'Coupon Applied',
+            properties: {
+                cart_id: this.transaction.cart_id,
+                order_id: this.transaction.order_id,
+                coupon_id: this.transaction.coupon_id,
+                coupon_name: this.transaction.coupon_name,
+                discount: this.transaction.discount,
+                currency: this.transaction.currency
+            }
+        };
+    }
+}
+export default CouponApplied;

package/src/checkout/coupon-denied.js

@@ -0,0 +1,20 @@
+class CouponDenied {
+    constructor(details) {
+        this.transaction = details;
+    }
+
+    toSegment() {
+        return {
+            event: 'Coupon Denied',
+            properties: {
+                cart_id: this.transaction.cart_id,
+                order_id: this.transaction.order_id,
+                coupon_id: this.transaction.coupon_id,
+                coupon_name: this.transaction.coupon_name,
+                reason: this.transaction.reason
+            }
+        };
+    }
+}
+
+export default CouponDenied;

package/src/checkout/coupon-entered.js

@@ -0,0 +1,21 @@
+
+class CouponEntered {
+    constructor(details) {
+        this.transaction = details;
+    }
+
+    toSegment() {
+        return {
+            event: 'Coupon Entered',
+            properties: {
+                cart_id:this.transaction.cart_id,
+                order_id: this.transaction.order_id,
+                coupon_id: this.transaction.coupon_id,
+                value: this.transaction.value,
+                currency: this.transaction.currency
+            }
+        };
+    }
+}
+
+export default CouponEntered;

package/src/checkout/coupon-removed.js

@@ -0,0 +1,21 @@
+class CouponRemoved {
+    constructor(details) {
+        this.transaction = details;
+    }
+
+    toSegment() {
+        return {
+            event: 'Coupon Removed',
+            properties: {
+                cart_id: this.transaction.cart_id,
+                order_id: this.transaction.order_id,
+                coupon_id: this.transaction.coupon_id,
+                coupon_name: this.transaction.coupon_name,
+                discount: this.transaction.discount,
+                currency: this.transaction.currency
+            }
+        };
+    }
+}
+
+export default CouponRemoved; 

package/src/checkout/event-transformer.js

@@ -0,0 +1,53 @@
+import CheckoutStarted from './checkout-started';
+import PaymentInfoEntered from './payment-info-entered';
+import CheckoutStepViewed from './checkout-step-viewed';
+import CheckoutStepCompleted from './checkout-step-completed';
+import CouponEntered from './coupon-entered';
+import CouponApplied from './coupon-applied';
+import CouponDenied from './coupon-denied';
+import CouponRemoved from './coupon-removed';
+import AddressAdded from './address-added';
+import AddressUpdated from './address-updated';
+import MapClicked from './map-clicked';
+import PaymentSubmitted from './payment-submitted';
+import PaymentFailed from './payment-failed';
+import PaymentSucceeded from './payment-succeeded';
+import PaymentPending from './payment-pending';
+
+class EventTransformer {
+  constructor() {
+    this.events = {
+      'Checkout Started'  : CheckoutStarted,
+      'Payment Info Entered' : PaymentInfoEntered,
+      'Checkout Step Viewed': CheckoutStepViewed,
+      'Checkout Step Completed': CheckoutStepCompleted,
+      'Coupon Entered': CouponEntered,
+      'Coupon Applied': CouponApplied,
+      'Coupon Denied': CouponDenied,
+      'Coupon Removed': CouponRemoved,
+      'Address Added': AddressAdded,
+      'Address Updated': AddressUpdated,
+      'Map Clicked': MapClicked,
+      'Payment Submitted': PaymentSubmitted,
+      'Payment Failed': PaymentFailed,
+      'Payment Succeeded': PaymentSucceeded,
+      'Payment Pending': PaymentPending,
+    };
+  }
+
+  transform(eventName, details) {
+    const segment = this.events[eventName];
+    if (!segment) {
+      return null;
+    }
+    
+    try {
+      return new segment(details).toSegment();
+    } catch (error) {
+      console.error('Failed to transform event:', error);
+      return null;
+    }
+  }
+}
+
+export default new EventTransformer();

package/src/checkout/index.js

@@ -0,0 +1,197 @@
+import { jitsuAnalytics } from '@jitsu/js';
+import initialData from './initial-data.js';
+import SessionService from './session.js';
+import EventTransformer from './event-transformer.js';
+import { resolveAnalyticsHost } from '../shared/host-resolver.js';
+import { captureSallaCookies } from '../shared/cookie-capture.js';
+import { isValidTracker, replayHistory, pushEventToTrackers } from '../shared/tracker-registry.js';
+import { applyExtraContext } from '../shared/extra-context.js';
+
+export default class Analytics {
+    constructor() {
+        this.history = [];
+        this.customTrackers = [];
+        this.context = {};
+        this.events = [];
+        this._sessionId = null;
+        this.mappedEvents = {
+            'payment::method_updated': 'Payment Info Entered',
+            'checkout::step_viewed': 'Checkout Step Viewed',
+            'checkout::step_completed': 'Checkout Step Completed',
+            'coupon::applied': 'Coupon Applied',
+            'coupon::denied': 'Coupon Denied',
+            'coupon::entered': 'Coupon Entered',
+            'coupon::removed': 'Coupon Removed',
+            'address::added': 'Address Added',
+            'address::updated': 'Address Updated',
+            'map::clicked': 'Map Clicked',
+            'payment::submitted': 'Payment Submitted',
+            'payment::failed': 'Payment Failed',
+            'payment::succeeded': 'Payment Succeeded',
+            'payment::pending': 'Payment Pending',
+        };
+        const config = initialData.get('config.jitsu', {});
+        const storeUrl = initialData.get('store.url', null);
+        const { host, key : writeKey } = config || {};
+        this.analytics = null;
+        if (!host || !writeKey) {
+            return;
+        }
+        this.analytics = jitsuAnalytics({
+            host: this.getAnalyticsHost(storeUrl),
+            writeKey: writeKey,
+            cookieCapture: this.captureCookies(),
+            fetch: this.customFetch,
+
+        });
+        this.events = initialData.get('config.jitsu.events', []);
+        if (initialData.get('config.jitsu.context.extra', {})) {
+            this.setExtraContext(initialData.get('config.jitsu.context.extra', {}));
+        }
+        
+        this.initSessionId();
+
+        this.analytics.identify(initialData.get('customer'));
+        this.page();
+    }
+
+    initSessionId() {
+        this._sessionId = SessionService.resolve();
+        this.setContext('session_id', this._sessionId);
+    }
+
+    captureCookies() {
+        return captureSallaCookies();
+    }
+
+    getAnalyticsHost(storeUrl) {
+        return resolveAnalyticsHost(storeUrl, { log: console.log });
+    }
+
+    trackSallaEvent(event) {
+        const mappedEventName = this.mappedEvents[event.type] ?? event.type;
+        if (!this.analytics || !this.events.includes(mappedEventName)) {
+            return;
+        }
+        try {
+            if (!mappedEventName) {
+                return;
+            }           
+            const segmentEvent = EventTransformer.transform(mappedEventName, event.detail);
+            if(segmentEvent) {
+                this.track(segmentEvent.event, segmentEvent.properties);
+            } 
+        } catch (error) {
+            console.log(error);
+        }
+    }
+
+    track(eventName, payload = {}) {
+        if (!this.analytics) {
+            return Promise.resolve();
+        }
+        payload = this.finalPayload(payload);
+
+        return this.analytics
+            .track(eventName, payload)
+            .then((jitsuPayload) => {
+                this.pushEventToCustomTrackers('track', eventName, payload);
+                return jitsuPayload;
+            })
+            .then(() => {
+                this.history.push({ action: 'track', eventName, payload });
+            })
+            .catch((error) => {
+                return Promise.reject(error);
+            });
+    }
+
+    page(eventProperties = {}) {
+        if (!this.analytics) {
+            return Promise.resolve();
+        }
+        const payload = this.finalPayload(eventProperties);
+        return this.analytics
+            .page(payload)
+            .then((jitsuPayload) => {
+                this.pushEventToCustomTrackers('page', payload);
+                return jitsuPayload;
+            })
+            .then(() => {
+                this.history.push({ action: 'page', payload });
+            })
+            .catch((error) => {
+                return Promise.reject(error);
+            });
+    }
+
+    finalPayload(eventProperties = {}) {
+        let defaultPayload = {
+            // resolve() is sticky (same id all page long) and refreshes the
+            // 30-min storage TTL on every event, so an active checkout never
+            // rotates its session mid-flow.
+            session_id: SessionService.resolve(),
+            cart_id: initialData.get('cart.id') || eventProperties.cart_id || eventProperties.checkout_id || null,
+        };
+        this.setContext('version', initialData.get('config.jitsu.version', 1));
+        this.setContext('store_id', initialData.get('config.store.id'));
+        if (defaultPayload.session_id) {
+            this.setContext('session_id', defaultPayload.session_id);
+        }
+        //todo:: support passing utms via local storage
+
+        return {
+            ...defaultPayload,
+            ...eventProperties,
+            session_id: eventProperties.session_id || defaultPayload.session_id,
+            cart_id: eventProperties.cart_id || defaultPayload.cart_id,
+        };
+    }
+
+    registerTracker(tracker) {
+        if (!isValidTracker(tracker, this.customTrackers, console.log)) {
+            return;
+        }
+        this.customTrackers.push(tracker);
+        replayHistory(tracker, this.history);
+    }
+
+    pushEventToCustomTrackers(action, eventName, payload = {}) {
+        return pushEventToTrackers(this.customTrackers, action, eventName, payload, console.log);
+    }
+
+    customFetch(url, options) {
+        if (!window.navigator?.sendBeacon) {
+            return fetch(url, { ...options, keepalive: true });
+        }
+
+        const beaconUrl = `${url}?writekey=${options?.headers?.['X-Write-Key']}`;
+        const body = typeof options?.body === "string" ? options?.body : JSON.stringify(options?.body || {});
+        const blob = new Blob([body], { type: "application/json" });
+
+        const ok = navigator.sendBeacon(beaconUrl, blob);
+        if (!ok) {
+            // Beacon queue full or payload over quota — keepalive keeps the
+            // request alive through page navigation like a beacon would.
+            return fetch(url, { ...options, keepalive: true });
+        }
+
+        return Promise.resolve(new Response('{"status":"sent_via_beacon"}', {
+            status: 200,
+            headers: { "Content-Type": "application/json" }
+        }));
+    }
+
+    setContext(key, value){
+        this.analytics?.setContextProperty(key, value);
+        this.context[key] = value;
+    }
+
+    setExtraContext(extra){
+        applyExtraContext((key, value) => this.setContext(key, value), extra, console.log);
+    }
+}
+
+export { default as SessionService } from './session.js';
+export { default as initialData } from './initial-data.js';
+export { sanitizeErrorMessage, sanitizeFieldErrors } from './sanitizers.js';

package/src/checkout/initial-data.js

@@ -0,0 +1,23 @@
+/**
+ * Dotted-path reader over the server-rendered `window.initialData` payload
+ * (rendered by the checkout blade views). Single source of truth for the
+ * initial-data access the analytics layer needs.
+ */
+export default {
+    get(key, defaultValue = null) {
+        const initialData = typeof window !== 'undefined' ? window.initialData : null;
+        if (!initialData || typeof initialData !== 'object') {
+            return defaultValue;
+        }
+
+        let result = initialData;
+        for (const keyPart of key.split('.')) {
+            if (result === null || result === undefined || typeof result !== 'object' || !(keyPart in result)) {
+                return defaultValue;
+            }
+            result = result[keyPart];
+        }
+
+        return result !== undefined ? result : defaultValue;
+    },
+};

package/src/checkout/map-clicked.js

@@ -0,0 +1,27 @@
+export default class MapClicked {
+    constructor(details) {
+        this.transaction = details;
+    }
+
+    toSegment() {
+      return {
+        event: 'Map Clicked',
+        properties: {
+          checkout_id: this.transaction.cart_id,
+          order_id: this.transaction.order_id,
+          cart_id: this.transaction.cart_id,
+          customer: {
+            id: this.transaction.customer?.id,
+            name: this.transaction.customer?.first_name + ' ' + this.transaction.customer?.last_name,
+            mobile: this.transaction.customer?.mobile,
+            email: this.transaction.customer?.email,
+            gender: this.transaction.customer?.gender,
+          },
+          address : {
+            lat : this.transaction.address?.lat,
+            lng : this.transaction.address?.lng,
+          }
+        }
+      }
+    }
+}

package/src/checkout/payment-failed.js

@@ -0,0 +1,28 @@
+import initialData from './initial-data.js';
+import { sanitizeErrorMessage, sanitizeFieldErrors } from './sanitizers.js';
+
+export default class PaymentFailed {
+    constructor(details) {
+        this.details = details || {};
+    }
+
+    toSegment() {
+        const errorFields = this.details.error_fields || {};
+        const fieldNames = errorFields && typeof errorFields === 'object' ? Object.keys(errorFields) : [];
+
+        return {
+            event: 'Payment Failed',
+            properties: {
+                checkout_id: this.details.checkout_id || initialData.get('cart.id'),
+                payment_method: this.details.payment_method,
+                gateway: this.details.gateway,
+                error_code: this.details.error_code,
+                error_type: this.details.error_type,
+                error_message: sanitizeErrorMessage(this.details.error_message),
+                http_status: this.details.http_status,
+                error_fields: fieldNames,
+                field_errors: sanitizeFieldErrors(errorFields),
+            }
+        };
+    }
+}

package/src/checkout/payment-info-entered.js

@@ -0,0 +1,17 @@
+import initialData from './initial-data.js';
+export default class PaymentInfoEntered {
+    constructor(details) {
+        this.transaction = details;
+    }
+
+    toSegment() {
+        return {
+            event: 'Payment Info Entered',
+            properties: {
+                order_id: this.transaction.order_id,
+                payment_method: this.transaction.payment_method,
+                checkout_id: this.transaction.checkout_id,
+            }
+        };
+    }
+}

package/src/checkout/payment-pending.js

@@ -0,0 +1,21 @@
+import initialData from './initial-data.js';
+
+export default class PaymentPending {
+    constructor(details) {
+        this.details = details || {};
+    }
+
+    toSegment() {
+        return {
+            event: 'Payment Pending',
+            properties: {
+                checkout_id: this.details.checkout_id || initialData.get('cart.id'),
+                payment_method: this.details.payment_method,
+                gateway: this.details.gateway,
+                redirect_url: this.details.redirect_url || null,
+                order_id: this.details.order_id || null,
+                cart_total: this.details.cart_total || initialData.get('cart.total_in_customer_currency', 0),
+            }
+        };
+    }
+}

package/src/checkout/payment-submitted.js

@@ -0,0 +1,22 @@
+import initialData from './initial-data.js';
+
+export default class PaymentSubmitted {
+    constructor(details) {
+        this.details = details || {};
+    }
+
+    toSegment() {
+        return {
+            event: 'Payment Submitted',
+            properties: {
+                checkout_id: this.details.checkout_id || initialData.get('cart.id'),
+                payment_method: this.details.payment_method,
+                gateway: this.details.gateway,
+                is_order_free: this.details.is_order_free,
+                cart_total: this.details.cart_total || initialData.get('cart.total_in_customer_currency', 0),
+                shipping_method: this.details.shipping_method,
+                has_partial_payment: this.details.has_partial_payment || false,
+            }
+        };
+    }
+}

package/src/checkout/payment-succeeded.js

@@ -0,0 +1,23 @@
+import initialData from './initial-data.js';
+
+export default class PaymentSucceeded {
+    constructor(details) {
+        this.details = details || {};
+    }
+
+    toSegment() {
+        return {
+            event: 'Payment Succeeded',
+            properties: {
+                checkout_id: this.details.checkout_id || initialData.get('cart.id'),
+                payment_method: this.details.payment_method,
+                gateway: this.details.gateway,
+                response_status: this.details.response_status,
+                has_redirect: this.details.has_redirect || false,
+                redirect_url: this.details.redirect_url || null,
+                order_id: this.details.order_id || null,
+                cart_total: this.details.cart_total || initialData.get('cart.total_in_customer_currency', 0),
+            }
+        };
+    }
+}

package/src/checkout/sanitizers.js

@@ -0,0 +1,21 @@
+const PAN_REGEX = /\b(?:\d[ -]?){13,19}\b/g;
+const EMAIL_REGEX = /[\w.+-]+@[\w-]+(\.[\w-]+)+/g;
+const MAX_MESSAGE_LENGTH = 500;
+
+/** Redact card numbers / emails from analytics error messages and cap length. */
+export const sanitizeErrorMessage = (message) => {
+    if (!message) return '';
+    return String(message)
+        .replace(PAN_REGEX, '[REDACTED]')
+        .replace(EMAIL_REGEX, '[REDACTED]')
+        .slice(0, MAX_MESSAGE_LENGTH);
+};
+
+export const sanitizeFieldErrors = (errorFields) => {
+    if (!errorFields || typeof errorFields !== 'object') return [];
+    return Object.keys(errorFields).map(field => {
+        const raw = Array.isArray(errorFields[field]) ? errorFields[field][0] : errorFields[field];
+        const message = raw && typeof raw === 'object' ? (raw.message || JSON.stringify(raw)) : raw;
+        return { field, message: sanitizeErrorMessage(message) };
+    });
+};

package/src/checkout/session.js

@@ -0,0 +1,80 @@
+import initialData from './initial-data.js';
+import { generateSessionId } from '../shared/uuid.js';
+
+/**
+ * SessionService
+ *
+ * Provides a tracking session id that is shared with the storefront (twilight).
+ *
+ * twilight persists the session id via `Salla.storage.setWithTTL('s-session-id', id, 30)`,
+ * which — because the store-engine is created without a namespace — writes a plain
+ * localStorage entry:
+ *
+ *   key:   `s-session-id_<storeId>`
+ *   value: `{"value":"<uuid>","expiry":<epochMillis>}`
+ *
+ * Checkout runs on the same origin as the storefront, so by reading/writing the exact
+ * same key + shape we continue the same session instead of starting a new one. No Salla
+ * SDK is required here — we only need plain localStorage and the store id.
+ */
+
+const SESSION_STORAGE_KEY = 's-session-id';
+const SESSION_TTL_MINUTES = 30;
+
+// Memoized per page load — see resolve().
+let resolvedSessionId = null;
+
+// Mirrors twilight's Storage.prefixKey: `${key}_${Salla.config.get('store.id')}`.
+function prefixKey(key) {
+    return `${key}_${initialData.get('store.id')}`;
+}
+
+function getWithTTL(key, defaultValue = null) {
+    try {
+        const raw = localStorage.getItem(prefixKey(key));
+        if (!raw) {
+            return defaultValue;
+        }
+        const item = JSON.parse(raw);
+        if (!item || typeof item !== 'object') {
+            return defaultValue;
+        }
+        if (new Date().getTime() > item.expiry) {
+            localStorage.removeItem(prefixKey(key));
+            return defaultValue;
+        }
+        return item.value;
+    } catch (error) {
+        return defaultValue;
+    }
+}
+
+function setWithTTL(key, value, ttlInMinutes = SESSION_TTL_MINUTES) {
+    try {
+        const expiry = new Date().getTime() + ttlInMinutes * 60 * 1000;
+        localStorage.setItem(prefixKey(key), JSON.stringify({ value, expiry }));
+    } catch (error) {
+        // localStorage may be unavailable (private mode / disabled) — fail silently.
+    }
+}
+
+export default {
+    SESSION_STORAGE_KEY,
+    SESSION_TTL_MINUTES,
+
+    /**
+     * Resolve the tracking session id.
+     *
+     * Continues the storefront session when one exists in the shared (same-origin)
+     * localStorage; otherwise starts a new one. Either way the resolved id is written
+     * back with a fresh 30-minute sliding window, so an active session stays alive and
+     * the storefront picks up the same id on the next navigation.
+     */
+    resolve() {
+        if (!resolvedSessionId) {
+            resolvedSessionId = getWithTTL(SESSION_STORAGE_KEY) || generateSessionId();
+        }
+        setWithTTL(SESSION_STORAGE_KEY, resolvedSessionId);
+        return resolvedSessionId;
+    },
+};

package/src/index.js

@@ -0,0 +1,7 @@
+export { default as StorefrontAnalytics } from './storefront/index.js';
+export { default as CheckoutAnalytics } from './checkout/index.js';
+export { resolveAnalyticsHost, FALLBACK_ANALYTICS_HOST } from './shared/host-resolver.js';
+export { captureSallaCookies } from './shared/cookie-capture.js';
+export { isValidTracker, replayHistory, pushEventToTrackers } from './shared/tracker-registry.js';
+export { applyExtraContext } from './shared/extra-context.js';
+export { generateSessionId } from './shared/uuid.js';

package/src/shared/cookie-capture.js

@@ -0,0 +1,17 @@
+/**
+ * Collect cookie names with the given prefix in the {name: name} shape Jitsu's
+ * cookieCapture option expects (Jitsu reads the values itself).
+ */
+export function captureSallaCookies(prefix = 'sa_') {
+    try {
+        return document.cookie.split(';').reduce((acc, cookie) => {
+            const [name] = cookie.trim().split('=');
+            if (name.startsWith(prefix)) {
+                acc[name] = name;
+            }
+            return acc;
+        }, {});
+    } catch (error) {
+        return {};
+    }
+}

package/src/shared/extra-context.js

@@ -0,0 +1,23 @@
+/**
+ * Map the server-provided `config.jitsu.context.extra` node (s-* request
+ * headers, release version) onto Jitsu context: mobile-app headers become the
+ * `app` context, the remainder becomes `system`.
+ */
+export function applyExtraContext(setContext, extra, log = () => {}) {
+    try {
+        if (extra?.headers?.['s-app-os']) {
+            setContext('app', {
+                version: extra.headers['s-app-os-version'],
+                app_release_tag: extra.headers['s-app-version'],
+                platform: extra.headers['s-app-os'].toLowerCase()
+            });
+            delete extra.headers['s-app-os'];
+            delete extra.headers['s-app-os-version'];
+            delete extra.headers['s-app-version'];
+            delete extra.headers['s-source'];
+        }
+        setContext('system', extra);
+    } catch (error) {
+        log('Error applying extra analytics context:', error);
+    }
+}