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

package/index.cjs.js

@@ -36,6 +36,54 @@ new Set([
 
 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' },
@@ -61,144 +109,37 @@ const customAttributes = {
 };
 
 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, ...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;
-    }
-};
+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 +359,111 @@ const flipIn = (element) => {
     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 +496,7 @@ const circleCross = (attrs) => b `<svg class=${attrs === null || attrs === void
   <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 +521,8 @@ let BlotoutWallet = class BlotoutWallet extends s {
         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 +548,6 @@ let BlotoutWallet = class BlotoutWallet extends s {
             }
             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 +680,13 @@ let BlotoutWallet = class BlotoutWallet extends s {
             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 +754,13 @@ let BlotoutWallet = class BlotoutWallet extends s {
             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 +780,14 @@ let BlotoutWallet = class BlotoutWallet extends s {
     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 +984,25 @@ BlotoutWallet = __decorate([
     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 +1010,22 @@ const init = (params) => {
         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) {