@blotoutio/providers-blotout-wallet-sdk 0.62.0 → 0.63.0

package/index.js

@@ -37,6 +37,54 @@ var ProvidersBlotoutWalletSdk = (function () {
 
     const delay = (n, resolvedValue) => new Promise((resolve) => setTimeout(() => resolve(resolvedValue), n));
 
+    const createEnabled = () => ({
+        name: 'enabled',
+        groupNames: new Set(),
+        segment: 0,
+        groupName: '',
+        isEnabled: true,
+    });
+    const createDisabled = () => ({
+        name: 'disabled',
+        groupNames: new Set(),
+        segment: 0,
+        groupName: '',
+        isEnabled: false,
+    });
+    const createABTest = ({ userId }) => {
+        const [sample] = userId.split('-');
+        const segment = parseInt(sample, 16) % 2;
+        return {
+            name: 'ab-test',
+            groupNames: new Set(['enabled', 'control']),
+            segment,
+            groupName: segment == 1 ? 'enabled' : 'control',
+            isEnabled: segment == 1,
+        };
+    };
+    const createPreview = ({ previewKey, userPreviewKey }) => {
+        const isEnabled = !!(previewKey && previewKey === userPreviewKey);
+        return {
+            name: 'preview',
+            groupNames: new Set(['preview']),
+            groupName: isEnabled ? 'preview' : '',
+            segment: isEnabled ? 1 : 0,
+            isEnabled,
+        };
+    };
+    const createExperiment = (props) => {
+        switch (props.name) {
+            case 'enabled':
+                return createEnabled();
+            case 'disabled':
+                return createDisabled();
+            case 'ab-test':
+                return createABTest(props);
+            case 'preview':
+                return createPreview(props);
+        }
+    };
+
     const customAttributes = {
         '--bw-primary': { type: 'color', defaultValue: '#000000' },
         '--bw-title-color': { type: 'color', defaultValue: '#000000' },
@@ -62,143 +110,37 @@ var ProvidersBlotoutWalletSdk = (function () {
     };
 
     const packageName = 'blotoutWallet';
-    const cartTokenCookie = 'cart';
-    const cartTokenTwoCookie = 'cart2';
-    const cartTokenLinkCookie = 'bwCartLinkToken';
+    const PREVIEW_KEY_NAME = '_blotoutWalletPreview';
 
-    const getCookieValue = (key) => {
-        var _a;
-        try {
-            if (!document || !document.cookie) {
-                return '';
-            }
-            const cookies = parseCookies(document.cookie);
-            return (_a = cookies[key]) !== null && _a !== void 0 ? _a : '';
-        }
-        catch {
-            return '';
-        }
-    };
-    const parseCookies = (cookie) => {
-        return Object.fromEntries(cookie
-            .split(/;\s+/)
-            .map((r) => r.split('=').map((str) => str.trim()))
-            .map(([cookieKey, cookieValue]) => {
-            if (!cookieKey) {
-                return [];
-            }
-            let decodedValue = '';
-            if (cookieValue) {
-                try {
-                    decodedValue = decodeURIComponent(cookieValue);
-                }
-                catch (e) {
-                    console.log(`Unable to decode cookie ${cookieKey}: ${e}`);
-                    decodedValue = cookieValue;
-                }
-            }
-            return [cookieKey, decodedValue];
-        }));
-    };
-    const setCookie = (key, value, options) => {
-        var _a;
-        try {
-            if (!document) {
-                return;
-            }
-            const extras = [`path=${(_a = options === null || options === void 0 ? void 0 : options.path) !== null && _a !== void 0 ? _a : '/'}`];
-            if (options === null || options === void 0 ? void 0 : options['maxAge']) {
-                extras.push(`max-age=${options['maxAge']}`);
-            }
-            if (options === null || options === void 0 ? void 0 : options.expires) {
-                extras.push(`expires=${options.expires}`);
-            }
-            if (options === null || options === void 0 ? void 0 : options.partitioned) {
-                extras.push('partitioned');
-            }
-            if (options === null || options === void 0 ? void 0 : options.samesite) {
-                extras.push(`samesite=${options.samesite}`);
-            }
-            if (options === null || options === void 0 ? void 0 : options.secure) {
-                extras.push('secure');
-            }
-            document.cookie = `${key}=${value};${extras.join(';')}`;
-        }
-        catch {
-            return;
-        }
-    };
+    var _a;
+    const registryKey = Symbol.for('blotout-wallet');
+    (_a = window[registryKey]) !== null && _a !== void 0 ? _a : (window[registryKey] = {});
 
-    const canLog = () => {
+    // eslint-disable-next-line @nx/enforce-module-boundaries
+    const getPreviewKey = () => {
+        let key = null;
         try {
-            return localStorage.getItem('edgeTagDebug') === '1';
+            key = localStorage.getItem(PREVIEW_KEY_NAME) || null;
         }
         catch {
-            return false;
+            /* do nothing */
         }
+        return key;
     };
-    const logger = {
-        log: (...args) => {
-            if (canLog()) {
-                console.log(...args);
-            }
-        },
-        error: (...args) => {
-            if (canLog()) {
-                console.error(...args);
-            }
-        },
-        info: (...args) => {
-            if (canLog()) {
-                console.info(...args);
-            }
-        },
-        trace: (...args) => {
-            if (canLog()) {
-                console.trace(...args);
-            }
-        },
-        table: (...args) => {
-            if (canLog()) {
-                console.table(...args);
-            }
-        },
-        dir: (...args) => {
-            if (canLog()) {
-                console.dir(...args);
-            }
-        },
-    };
-
-    var _a;
-    const registryKey = Symbol.for('blotout-wallet');
-    (_a = window[registryKey]) !== null && _a !== void 0 ? _a : (window[registryKey] = {});
 
-    // eslint-disable-next-line @nx/enforce-module-boundaries
-    const tag = ({ eventName }) => {
+    const tag = () => {
+        const result = {
+            cartToken: null,
+            previewKey: getPreviewKey(),
+        };
         if (!window) {
-            return;
+            return result;
         }
-        const platform = window[registryKey].platform;
-        switch (platform) {
-            case 'SHOPIFY': {
-                let cartToken = getCookieValue(cartTokenCookie);
-                const cartTokenLink = getCookieValue(cartTokenLinkCookie);
-                if (!cartToken) {
-                    cartToken = getCookieValue(cartTokenTwoCookie);
-                }
-                if (eventName === 'Purchase') {
-                    setCookie(cartTokenTwoCookie, cartToken, { path: '/', maxAge: 10 });
-                }
-                if (cartTokenLink) {
-                    setCookie(cartTokenLinkCookie, '', { maxAge: 0 });
-                }
-                return { cartToken, cartTokenLink };
-            }
-            default: {
-                return {};
-            }
+        const store = window[registryKey].storeAPI;
+        if (store) {
+            result.cartToken = store.getCartToken();
         }
+        return result;
     };
 
     /******************************************************************************
@@ -418,6 +360,111 @@ var ProvidersBlotoutWalletSdk = (function () {
         return animation.finished;
     };
 
+    const getCookieValue = (key) => {
+        var _a;
+        try {
+            if (!document || !document.cookie) {
+                return '';
+            }
+            const cookies = parseCookies(document.cookie);
+            return (_a = cookies[key]) !== null && _a !== void 0 ? _a : '';
+        }
+        catch {
+            return '';
+        }
+    };
+    const parseCookies = (cookie) => {
+        return Object.fromEntries(cookie
+            .split(/;\s+/)
+            .map((r) => r.split('=').map((str) => str.trim()))
+            .map(([cookieKey, ...cookieValues]) => {
+            const cookieValue = cookieValues.join('=');
+            if (!cookieKey) {
+                return [];
+            }
+            let decodedValue = '';
+            if (cookieValue) {
+                try {
+                    decodedValue = decodeURIComponent(cookieValue);
+                }
+                catch (e) {
+                    console.log(`Unable to decode cookie ${cookieKey}: ${e}`);
+                    decodedValue = cookieValue;
+                }
+            }
+            return [cookieKey, decodedValue];
+        }));
+    };
+    const setCookie = (key, value, options) => {
+        var _a;
+        try {
+            if (!document) {
+                return;
+            }
+            const extras = [`path=${(_a = options === null || options === void 0 ? void 0 : options.path) !== null && _a !== void 0 ? _a : '/'}`];
+            if (options === null || options === void 0 ? void 0 : options['maxAge']) {
+                extras.push(`max-age=${options['maxAge']}`);
+            }
+            if (options === null || options === void 0 ? void 0 : options.expires) {
+                extras.push(`expires=${options.expires}`);
+            }
+            if (options === null || options === void 0 ? void 0 : options.partitioned) {
+                extras.push('partitioned');
+            }
+            if (options === null || options === void 0 ? void 0 : options.samesite) {
+                extras.push(`samesite=${options.samesite}`);
+            }
+            if (options === null || options === void 0 ? void 0 : options.secure) {
+                extras.push('secure');
+            }
+            document.cookie = `${key}=${encodeURIComponent(value)};${extras.join(';')}`;
+        }
+        catch {
+            return;
+        }
+    };
+
+    const canLog = () => {
+        try {
+            return localStorage.getItem('edgeTagDebug') === '1';
+        }
+        catch {
+            return false;
+        }
+    };
+    const logger = {
+        log: (...args) => {
+            if (canLog()) {
+                console.log(...args);
+            }
+        },
+        error: (...args) => {
+            if (canLog()) {
+                console.error(...args);
+            }
+        },
+        info: (...args) => {
+            if (canLog()) {
+                console.info(...args);
+            }
+        },
+        trace: (...args) => {
+            if (canLog()) {
+                console.trace(...args);
+            }
+        },
+        table: (...args) => {
+            if (canLog()) {
+                console.table(...args);
+            }
+        },
+        dir: (...args) => {
+            if (canLog()) {
+                console.dir(...args);
+            }
+        },
+    };
+
     const cart = (attrs) => b `<svg class=${attrs === null || attrs === void 0 ? void 0 : attrs.class} style=${attrs === null || attrs === void 0 ? void 0 : attrs.style} width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g clip-path="url(#clip0_10367_379)">
     <path d="M20 60C22.2091 60 24 58.2091 24 56C24 53.7909 22.2091 52 20 52C17.7909 52 16 53.7909 16 56C16 58.2091 17.7909 60 20 60Z" fill="currentColor"/>
@@ -450,6 +497,7 @@ var ProvidersBlotoutWalletSdk = (function () {
   <path d="M47.5332 12.334L51.2443 16.0451L15.5379 51.7515L11.8268 48.0404L47.5332 12.334Z" fill="currentColor"/>
 </svg>
 `;
+    const logoImage = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAgCAYAAABU1PscAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEt0lEQVRYhdWYX4hUdRTHP+d358+6azNGqUVqilrQXaNIClKSQHsQpJceSu4IBSFIvQRWLwWW9dBD0IMYvUTNSAUGGVRYGLFQQU8aO2VhhVpBlOHcdXd2Z+b+vj3MrG6z7c7OpO32hTt/DjO/+/2ec37nnPszgJEoXCvYB2w3WCIwFi5+B44AB3Kl8nEbKYTrJT4ZSLlV1cSb13zzmx2BGWlneGmo5rUvJfH8QMqtGm34hez1i0gkvBeIzUDkgO3V5P9BfhISYDgzdqQMFrenjQGZwDAgEdQXYF5J4IxrXTs1ZyCojHs9UU30QN3rlZSzsXlh2QFe4NqNzgzgvEnFfKn8ruCoQW2h5tg0AS0YWF8lCg3I/JeEukVqvgmYzezFuWBeBQRmeClJoAokvawxbwICMzz6WbAf7BhQp4cJYE4CDEg7I3CGJERzs0ui7kXSQ5UNHJjsq4b0ea40fKr7FZqYi4Ag5Yxqw39X8zoKHBfEhpYCdwPbsoEtq3k5dSNEgPCtT8RRuBK4AUhP2i6PAOOPsYbfCxwWVsmXhqcu/mqlEK6ZSLQ37WxnIuV9FxraUMg4e9wZ1xmGEA0vGppdTEcB+WJ5CBia/D5S2JAWygJjueKwzxfLPwF74ig8lQnsqbrXsq4icQlBzavevJd+aHG73ZndhJSZack5b+KRaPB6occkfx+wBPgljsJDwDu5UjnOlcovx1G4OhvYrrpXvofpw4DXgTdypfKPAHEUbnLGCx62zOSUOZXgkcLgeqEjAyn3ZNbZxrSzdX2B25IN7DVnvBRH4XIAwcGJRKfpIofb0P6/oFOb6BiB8d0brTZafbE/5W4da/jU5B3qCGcQmO0GfR1HYSlXKn8bR+GXKbPVDZTrMgoCHgG2xlF4BgiADYlYyyxPWB0F1MaqG4B7qonPtvPxgowzEmkH8AEQA8PO7AJSriv6kGScpZ2xCdgkoOFFIolZItp5D8hWpB2ZxgzuTCQkVgDZlumcGY0uyQMUa16fctnLKDqfNOv1P8IZmBFLF0kvphn+2WGt1xbVXKl8Fjjbmc/fMYc+YCe89H0msI31RKl21zgMB8c8qrRM673U32nZxINHdwKb4yic4EqNErni8Ggchc/VEhWzgV1T92o9DRl9gTGe+C8ScUimP+PC4FKku+qeqzr1gkQiMFvp0QH9i2FuTmU0Vyp/hLFzItGQF+MtAiOjDf9WIh4WnMoXvxFSIRvYzTA9UjOJwAgCY3Fg5Hu55tzIcsXyx5Vdt3xm3tYLloD9CpzNlYYbACOFwa2S9tS9lndTPqUeXd/CTAIEjOdLZVUK4ToTi4CTuTfLNaA89Yf+0dvsQrX+kKT9zuxG9ThH9AqLo9AzZfM4Ay8qwNPAGWAbUADea10nMRszKS+4A3gw7exeSf2Jem/BPQsYiULf3ugMSLmmSYAk0s5R955EjNGsGH2ZwDImrOY7jIxXCM6MlCB2xt+GL9E8CzIueTRJPAY4o3/SXuvlSeYywQyEzjngw0XBtOMhYHo6iOb4kKj5Pl+wpge9xGEn7NnRhj89kHJyC/XwZwoCM7LOkXY2BLxtAJUoXGPwDHC/wdUL8Xi9lbYe+A14HziYK5VP/AXU+TX099lFgwAAAABJRU5ErkJggg==`;
 
     /**
      * Sets the max-age for the dismissed popup cookie
@@ -474,7 +522,8 @@ var ProvidersBlotoutWalletSdk = (function () {
             this.transitionTo = (newState) => {
                 return flipOut(this.dialog)
                     .then(() => (this.state = newState))
-                    .then(() => flipIn(this.dialog));
+                    .then(() => flipIn(this.dialog))
+                    .catch(logger.error);
             };
             this.restoreCart = async () => {
                 if (!this.lastExpiredCart) {
@@ -500,8 +549,6 @@ var ProvidersBlotoutWalletSdk = (function () {
                 }
                 await this.storeApi.addItems(this.lastExpiredCart.items);
                 const expiredCartId = this.lastExpiredCart.cartId;
-                // this cookie will be cleared once the next event is processed
-                setCookie(cartTokenLinkCookie, expiredCartId, { path: '/' });
                 // We attempt to mark the cart as restored, but if the request fails,
                 // we log the error in the console and let the user continue. Since the
                 // problem is probably in the `/cart/restore` endpoint, further attempts
@@ -634,7 +681,13 @@ var ProvidersBlotoutWalletSdk = (function () {
                 method: 'POST',
                 headers: this.getHeaders(),
                 body: JSON.stringify({ action: 'popupDismissed' }),
-            }).catch(logger.error);
+            })
+                .then(async (response) => {
+                if (!response.ok) {
+                    throw new Error(`Error while recording user event - ${response.status}: ${response.statusText}\n\n${await response.text()}`);
+                }
+            })
+                .catch(logger.error);
         }
         connectedCallback() {
             var _a;
@@ -702,7 +755,13 @@ var ProvidersBlotoutWalletSdk = (function () {
                 method: 'POST',
                 headers: this.getHeaders(),
                 body: JSON.stringify({ action: 'popupShown' }),
-            }).catch(logger.error);
+            })
+                .then(async (response) => {
+                if (!response.ok) {
+                    throw new Error(`Error while recording user event - ${response.status}: ${response.statusText}\n\n${await response.text()}`);
+                }
+            })
+                .catch(logger.error);
         }
         hideModal(action) {
             fadeOutToBottom(this.dialog)
@@ -722,8 +781,14 @@ var ProvidersBlotoutWalletSdk = (function () {
         getUrl(path) {
             const url = new URL(`/providers/blotoutWallet${path}`, this.edgeURL);
             if (this.storeApi) {
-                const { cartToken } = this.storeApi.getCartInfo();
-                url.searchParams.set('t', cartToken);
+                const cartToken = this.storeApi.getCartToken();
+                if (cartToken) {
+                    url.searchParams.set('t', cartToken);
+                }
+                const previewKey = getPreviewKey();
+                if (previewKey) {
+                    url.searchParams.set('pk', previewKey);
+                }
             }
             return url;
         }
@@ -920,8 +985,25 @@ var ProvidersBlotoutWalletSdk = (function () {
         t$1('blotout-wallet')
     ], BlotoutWallet);
 
+    const logStyles = `
+  padding: 4px 8px 4px 36px;
+  border: 1px dashed red;
+  border-radius: 3px;
+  font-weight: bold;
+  background: url(${logoImage}) 8px 50% no-repeat;
+  background-size: 24px 16px;
+`;
+    const log = (message) => console.log(`%c${message}`, logStyles);
     const init = (params) => {
         var _a, _b, _c, _d, _e, _f;
+        let store = window[registryKey].storeAPI;
+        if (!store) {
+            store = window[registryKey].storeAPI =
+                (_b = (_a = window[registryKey]).storeAPIFactory) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        if (!store) {
+            throw new Error('Implementation for store API missing!');
+        }
         if (
         // if loaded in non-browser SDKs
         !window ||
@@ -929,15 +1011,22 @@ var ProvidersBlotoutWalletSdk = (function () {
             window.top !== window) {
             return;
         }
-        let store = window[registryKey].storeAPI;
-        if (!store) {
-            store = window[registryKey].storeAPI =
-                (_b = (_a = window[registryKey]).storeAPIFactory) === null || _b === void 0 ? void 0 : _b.call(_a);
-            if (!store) {
-                throw new Error('Implementation for store API missing!');
+        const { enabled, previewKey, mode = 'disabled', } = (_c = params.manifest.variables) !== null && _c !== void 0 ? _c : {};
+        const experiment = createExperiment({
+            name: mode,
+            userId: params.userId,
+            previewKey,
+            userPreviewKey: getPreviewKey(),
+        });
+        if (experiment.name == 'preview') {
+            if (experiment.isEnabled) {
+                log('Previewing functionality using preview key');
+            }
+            else {
+                log('Preview key set but does not match the configured key');
             }
         }
-        if ((_c = params.manifest.variables) === null || _c === void 0 ? void 0 : _c['enabled']) {
+        if (enabled || experiment.isEnabled) {
             // if the component is already defined, skip creating the element to avoid
             // layering multiple widgets
             if (window[registryKey].wallet) {