@blotoutio/providers-blotout-wallet-sdk 0.42.1 → 0.43.0

package/index.js

@@ -2,6 +2,58 @@ var ProvidersBlotoutWalletSdk = (function () {
     'use strict';
 
     const packageName = 'blotoutWallet';
+    const customAttributes = {
+        '--bw-primary': { type: 'color', defaultValue: '#f25c2b' },
+        '--bw-secondary': { type: 'color', defaultValue: '#172a41' },
+        '--bw-button': { type: 'color', defaultValue: '#da2e3a' },
+        '--bw-foreground': { type: 'color', defaultValue: 'white' },
+        '--bw-input-border': { type: 'color', defaultValue: '#dbe2eb' },
+        '--bw-input-foreground': { type: 'color', defaultValue: '#172a41' },
+        '--bw-input-background': { type: 'color', defaultValue: 'white' },
+        '--bw-backdrop': { type: 'color', defaultValue: '#00000077' },
+        '--bw-z-index': { type: 'number', defaultValue: '9999' },
+    };
+
+    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);
+            }
+        },
+    };
 
     class APIError extends Error {
         constructor(...args) {
@@ -9,11 +61,13 @@ var ProvidersBlotoutWalletSdk = (function () {
         }
     }
     class WalletAPI {
-        constructor({ baseUrl, userId }) {
+        constructor({ baseUrl, userId, enabled }) {
             this.listeners = new Set();
             this._cart = { cartId: null, items: [], email: false };
             this.baseUrl = baseUrl;
             this.userId = userId;
+            this.enabled = enabled;
+            logger.info(`[Blotout Wallet] User is ${enabled ? 'enabled' : 'disabled'}`);
         }
         getHeaders(json = false) {
             const headers = new Headers({
@@ -44,6 +98,9 @@ var ProvidersBlotoutWalletSdk = (function () {
             this._cart = value;
             this.notify();
         }
+        get segmentEnabled() {
+            return this.enabled;
+        }
         subscribe(listener) {
             this.listeners.add(listener);
             return () => {
@@ -115,19 +172,6 @@ var ProvidersBlotoutWalletSdk = (function () {
                 return (this.cart = await response.json());
             });
         }
-        purchase(orderId) {
-            return fetch(this.getUrl('/cart/purchase'), {
-                method: 'POST',
-                body: JSON.stringify({ orderId }),
-                headers: this.getHeaders(true),
-            }).then((response) => {
-                if (!response.ok) {
-                    throw new APIError(`Could not mark purchase`, { cause: response });
-                }
-                this.cart = { cartId: null, email: this.cart.email, items: [] };
-                this.notify();
-            });
-        }
         saveEmail(email) {
             return fetch(this.getUrl('/cart/email'), {
                 method: 'POST',
@@ -274,15 +318,42 @@ var ProvidersBlotoutWalletSdk = (function () {
 
     const cssVars = i$4 `
   :host {
-    --primary: var(--bw-primary, #f25c2b);
-    --secondary: var(--bw-secondary, #172a41);
-    --button: var(--bw-primary, #da2e3a);
-    --foreground: var(--bw-foreground, white);
-    --input-border: var(--bw-input-border, #dbe2eb);
-    --input-foreground: var(--wb-input-foreground, var(--secondary));
-    --input-background: var(--wb-input-background, white);
-    --backdrop: var(--wb-backdrop, #00000077);
-    --z-index: var(--wb-z-index, 9999);
+    --primary: var(
+      --bw-primary,
+      ${r$5(customAttributes['--bw-primary'].defaultValue)}
+    );
+    --secondary: var(
+      --bw-secondary,
+      ${r$5(customAttributes['--bw-secondary'].defaultValue)}
+    );
+    --button: var(
+      --bw-button,
+      ${r$5(customAttributes['--bw-button'].defaultValue)}
+    );
+    --foreground: var(
+      --bw-foreground,
+      ${r$5(customAttributes['--bw-foreground'].defaultValue)}
+    );
+    --input-border: var(
+      --bw-input-border,
+      ${r$5(customAttributes['--bw-input-border'].defaultValue)}
+    );
+    --input-foreground: var(
+      --bw-input-foreground,
+      ${r$5(customAttributes['--bw-input-foreground'].defaultValue)}
+    );
+    --input-background: var(
+      --bw-input-background,
+      ${r$5(customAttributes['--bw-input-background'].defaultValue)}
+    );
+    --backdrop: var(
+      --bw-backdrop,
+      ${r$5(customAttributes['--bw-backdrop'].defaultValue)}
+    );
+    --z-index: var(
+      --bw-z-index,
+      ${r$5(customAttributes['--bw-z-index'].defaultValue)}
+    );
 
     --spring-easing: ${r$5(spring)};
 
@@ -421,22 +492,22 @@ var ProvidersBlotoutWalletSdk = (function () {
         'top-left',
         'top-right',
     ]);
-    const getItemKey = (item) => `${item.productId}-${item.variantId}`;
     const wait = (timeout) => new Promise((res) => setTimeout(res, timeout));
     let BlotoutWallet = class BlotoutWallet extends s {
         constructor() {
             super(...arguments);
-            this._buttonVisible = false;
-            this._bannerVisible = false;
-            this._hasItemsInWallet = false;
-            this._hasEmail = false;
-            this.onWalletUpdated = () => {
-                const cart = this._walletApi.cart;
-                this._hasItemsInWallet = cart.items.length > 0;
-                if (this._hasItemsInWallet || !this._hasEmail) {
+            this.buttonVisible = false;
+            this.bannerVisible = false;
+            this.hasItemsInWallet = false;
+            this.hasEmail = false;
+            this.onWalletUpdated = (walletContent) => {
+                logger.log({ walletContent });
+                this.hasItemsInWallet = walletContent.items.length > 0;
+                this.hasEmail = walletContent.email;
+                if (this.isSegmentEnabled && (this.hasItemsInWallet || !this.hasEmail)) {
                     this.showButton();
                 }
-                else if (!this._hasItemsInWallet && this._hasEmail) {
+                else if (!this.hasItemsInWallet && this.hasEmail) {
                     this.hideButton();
                 }
             };
@@ -445,164 +516,152 @@ var ProvidersBlotoutWalletSdk = (function () {
                 ev.preventDefault();
                 ev.stopPropagation();
                 const modalAnimation = this.hideModal();
-                const email = (_a = this._email) === null || _a === void 0 ? void 0 : _a.value.trim();
+                const email = (_a = this.email) === null || _a === void 0 ? void 0 : _a.value.trim();
                 if (email) {
-                    this._walletApi.saveEmail(email)
+                    this.walletApi.saveEmail(email)
                         .then(() => {
-                        this._email.value = '';
-                        this._hasEmail = true;
+                        this.email.value = '';
+                        this.hasEmail = true;
                         this.dispatchEvent(new CustomEvent('blotout-wallet-email-saved', { bubbles: true }));
                     })
-                        .catch((err) => console.error(err));
+                        .catch((err) => logger.error(err));
                 }
-                if (this._hasItemsInWallet) {
-                    this._storeApi.clearCart()
-                        .then(() => this._storeApi.addItems(this._walletApi.cart.items))
-                        .then(() => this._walletApi.restore())
+                if (this.hasItemsInWallet) {
+                    this.storeApi.addItems(this.walletApi.cart.items)
+                        .then(() => this.walletApi.restore())
                         .then(() => {
                         this.dispatchEvent(new CustomEvent('blotout-wallet-restored', { bubbles: true }));
                         return modalAnimation.then(() => this.showRestorationBanner());
                     })
-                        .catch((err) => console.error(err));
+                        .then(() => wait(1000))
+                        .then(() => (window.location.href = `${window.Shopify.routes.root}cart`))
+                        .catch((err) => logger.error(err));
                 }
             };
             this.showRestorationBanner = async () => {
-                this._bannerVisible = true;
+                if (this.bannerVisible) {
+                    return;
+                }
+                this.bannerVisible = true;
                 await new Promise(requestAnimationFrame);
-                await springInFromBottom(this._banner, '120%');
-                await wait(5000);
-                await springOutToBottom(this._banner, '120%');
-                this._bannerVisible = false;
+                await springInFromBottom(this.banner, '120%');
+            };
+            this.hideRestorationBanner = async () => {
+                if (!this.bannerVisible) {
+                    return;
+                }
+                await springOutToBottom(this.banner, '120%');
+                this.bannerVisible = false;
             };
         }
-        get _storeApi() {
+        get storeApi() {
             var _a;
             return (_a = window[registryKey]) === null || _a === void 0 ? void 0 : _a.storeAPI;
         }
-        get _walletApi() {
+        get walletApi() {
             var _a;
             return (_a = window[registryKey]) === null || _a === void 0 ? void 0 : _a.walletAPI;
         }
+        get isSegmentEnabled() {
+            var _a;
+            return (_a = this.walletApi) === null || _a === void 0 ? void 0 : _a.segmentEnabled;
+        }
         get _position() {
             return validPositions.has(this.position) ? this.position : 'bottom-left';
         }
         connectedCallback() {
             var _a;
             super.connectedCallback();
-            this._unsubscribe = (_a = this._walletApi) === null || _a === void 0 ? void 0 : _a.subscribe(this.onWalletUpdated);
-            this.syncItems().then((hasItemsSaved) => {
+            this.unsubscribe = (_a = this.walletApi) === null || _a === void 0 ? void 0 : _a.subscribe(this.onWalletUpdated);
+            this.syncItems().then(() => {
                 this.dispatchEvent(new CustomEvent('blotout-wallet-loaded', { bubbles: true }));
-                this._hasItemsInWallet = hasItemsSaved;
-                if (this._hasItemsInWallet) {
-                    this.showButton();
-                }
             });
         }
         disconnectedCallback() {
             var _a;
             super.disconnectedCallback();
-            (_a = this._unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
-            this._unsubscribe = undefined;
+            (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.unsubscribe = undefined;
         }
         async syncItems() {
-            if (!this._walletApi || !this._storeApi) {
-                console.error('The required APIs are not available');
+            if (!this.walletApi) {
+                logger.error('The required APIs are not available');
                 return false;
             }
-            const [savedCart, shopItems] = await Promise.all([
-                this._walletApi.getCart(),
-                this._storeApi.getCart(),
-            ]);
-            this._hasEmail = savedCart.email;
-            const savedItemsLookup = new Map(savedCart.items.map((item) => [getItemKey(item), item]));
-            const missingItems = [];
-            for (const item of shopItems) {
-                const walletItem = savedItemsLookup.get(getItemKey(item));
-                if (!walletItem) {
-                    missingItems.push(item);
-                }
-                else if (walletItem.amount < item.amount) {
-                    missingItems.push({
-                        ...item,
-                        amount: item.amount - walletItem.amount,
-                    });
-                }
-            }
-            if (missingItems.length > 0) {
-                await this._walletApi.addItems(missingItems);
-            }
+            const savedCart = await this.walletApi.getCart();
+            this.hasEmail = savedCart.email;
             return savedCart.items.length > 0;
         }
         async showButton() {
-            if (this._buttonVisible) {
+            if (this.buttonVisible) {
                 return;
             }
-            this._buttonVisible = true;
+            this.buttonVisible = true;
             await new Promise(requestAnimationFrame).then(() => {
-                switch (this._position) {
+                switch (this.position) {
                     case 'top-left':
                     case 'left':
                     case 'bottom-left': {
-                        return springInFromLeft(this._button);
+                        return springInFromLeft(this.button);
                     }
                     case 'top-right':
                     case 'right':
                     case 'bottom-right': {
-                        return springInFromRight(this._button);
+                        return springInFromRight(this.button);
                     }
                     case 'bottom': {
-                        return springInFromBottom(this._button);
+                        return springInFromBottom(this.button);
                     }
                     case 'top': {
-                        return springInFromTop(this._button);
+                        return springInFromTop(this.button);
                     }
                     default: {
-                        return springInFromLeft(this._button);
+                        return springInFromLeft(this.button);
                     }
                 }
             });
             this.dispatchEvent(new CustomEvent('blotout-wallet-shown', { bubbles: true }));
         }
         async hideButton() {
-            if (!this._buttonVisible) {
+            if (!this.buttonVisible) {
                 return;
             }
-            switch (this._position) {
+            switch (this.position) {
                 case 'top-left':
                 case 'left':
                 case 'bottom-left': {
-                    await springOutToLeft(this._button);
+                    await springOutToLeft(this.button);
                     break;
                 }
                 case 'top-right':
                 case 'right':
                 case 'bottom-right': {
-                    await springOutToRight(this._button);
+                    await springOutToRight(this.button);
                     break;
                 }
                 case 'bottom': {
-                    await springOutToBottom(this._button);
+                    await springOutToBottom(this.button);
                     break;
                 }
                 case 'top': {
-                    await springOutToTop(this._button);
+                    await springOutToTop(this.button);
                     break;
                 }
                 default: {
-                    await springOutToLeft(this._button);
+                    await springOutToLeft(this.button);
                 }
             }
-            this._buttonVisible = false;
+            this.buttonVisible = false;
             this.dispatchEvent(new CustomEvent('blotout-wallet-hidden', { bubbles: true }));
         }
         async showModal() {
-            this._dialog.showModal();
+            this.dialog.showModal();
             await new Promise(requestAnimationFrame);
-            await fadeInDialog(this._dialog);
+            await fadeInDialog(this.dialog);
         }
         async hideModal() {
-            await fadeOutToBottom(this._dialog);
-            this._dialog.close();
+            await fadeOutToBottom(this.dialog);
+            this.dialog.close();
         }
         render() {
             return x `
@@ -610,7 +669,7 @@ var ProvidersBlotoutWalletSdk = (function () {
         class="${e({
             cta: true,
             [this._position]: true,
-            hidden: !this._buttonVisible,
+            hidden: !this.buttonVisible,
         })}"
         @click=${this.showModal}
       >
@@ -621,7 +680,7 @@ var ProvidersBlotoutWalletSdk = (function () {
         <button class="dismiss" @click=${this.hideModal}>${cross()}</button>
         ${blotout({ class: 'logo' })}
         <form method="dialog" @submit=${this.onSubmit}>
-          ${this._hasItemsInWallet
+          ${this.hasItemsInWallet
             ? x `<p>
                 Hey! Your <strong>cart has expired!</strong><br />But we've got
                 you covered. ${wink({ style: 'vertical-align:middle' })}
@@ -636,15 +695,15 @@ var ProvidersBlotoutWalletSdk = (function () {
               type="email"
               name="email"
               placeholder="Enter your email ID"
-              ?required=${!this._hasEmail}
+              ?required=${!this.hasEmail}
               style=${o({
-            display: this._hasEmail ? 'none' : 'block',
+            display: this.hasEmail ? 'none' : 'block',
         })}
             />
           </p>
           <p>
             <button class="restore" type="submit">
-              ${this._hasItemsInWallet ? 'Restore Cart' : 'Save Cart'}
+              ${this.hasItemsInWallet ? 'Restore Cart' : 'Save Cart'}
             </button>
           </p>
         </form>
@@ -652,7 +711,7 @@ var ProvidersBlotoutWalletSdk = (function () {
 
       <div
         class="banner"
-        style=${o({ display: this._bannerVisible ? '' : 'none' })}
+        style=${o({ display: this.bannerVisible ? '' : 'none' })}
       >
         ${blotout({
             class: 'logo',
@@ -755,7 +814,6 @@ var ProvidersBlotoutWalletSdk = (function () {
       }
 
       dialog {
-        position: relative;
         width: 430px;
         max-width: 100vw;
         background: var(--secondary);
@@ -839,97 +897,92 @@ var ProvidersBlotoutWalletSdk = (function () {
     __decorate([
         e$2('dialog'),
         __metadata("design:type", HTMLDialogElement)
-    ], BlotoutWallet.prototype, "_dialog", void 0);
+    ], BlotoutWallet.prototype, "dialog", void 0);
     __decorate([
         e$2('button.cta'),
         __metadata("design:type", HTMLButtonElement)
-    ], BlotoutWallet.prototype, "_button", void 0);
+    ], BlotoutWallet.prototype, "button", void 0);
     __decorate([
         e$2('input[name=email]'),
         __metadata("design:type", HTMLInputElement)
-    ], BlotoutWallet.prototype, "_email", void 0);
+    ], BlotoutWallet.prototype, "email", void 0);
     __decorate([
         e$2('.banner'),
         __metadata("design:type", HTMLDivElement)
-    ], BlotoutWallet.prototype, "_banner", void 0);
+    ], BlotoutWallet.prototype, "banner", void 0);
     __decorate([
         r(),
         __metadata("design:type", Boolean)
-    ], BlotoutWallet.prototype, "_buttonVisible", void 0);
+    ], BlotoutWallet.prototype, "buttonVisible", void 0);
     __decorate([
         r(),
         __metadata("design:type", Boolean)
-    ], BlotoutWallet.prototype, "_bannerVisible", void 0);
+    ], BlotoutWallet.prototype, "bannerVisible", void 0);
     __decorate([
         r(),
         __metadata("design:type", Boolean)
-    ], BlotoutWallet.prototype, "_hasItemsInWallet", void 0);
+    ], BlotoutWallet.prototype, "hasItemsInWallet", void 0);
     __decorate([
         r(),
         __metadata("design:type", Boolean)
-    ], BlotoutWallet.prototype, "_hasEmail", void 0);
+    ], BlotoutWallet.prototype, "hasEmail", void 0);
     BlotoutWallet = __decorate([
         t$1('blotout-wallet')
     ], BlotoutWallet);
 
     const init = (params) => {
-        var _a, _b;
-        if (window && document && !window[registryKey].wallet) {
-            window[registryKey].walletAPI = new WalletAPI({
+        var _a, _b, _c;
+        if (
+        // if loaded in non-browser SDKs
+        !window ||
+            !document) {
+            return;
+        }
+        let walletAPI = window[registryKey].walletAPI;
+        if (!window[registryKey].walletAPI) {
+            walletAPI = window[registryKey].walletAPI = new WalletAPI({
                 baseUrl: params.baseUrl,
                 userId: params.userId,
+                enabled: !!((_a = params.manifest.variables) === null || _a === void 0 ? void 0 : _a['enabled']),
             });
-            const store = (window[registryKey].storeAPI =
-                (_b = (_a = window[registryKey]).storeAPIFactory) === null || _b === void 0 ? void 0 : _b.call(_a));
+        }
+        let store = window[registryKey].storeAPI;
+        if (!store) {
+            store = window[registryKey].storeAPI =
+                (_c = (_b = window[registryKey]).storeAPIFactory) === null || _c === void 0 ? void 0 : _c.call(_b);
             if (!store) {
                 throw new Error('Implementation for store API missing!');
             }
+        }
+        const initComponent = () => {
+            var _a, _b;
             const element = (window[registryKey].wallet =
                 document.createElement('blotout-wallet'));
-            element.setAttribute('tag-name', params.manifest.tagName);
-            document.body.append(element);
-        }
-    };
-
-    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);
+            const theme = (_a = params.manifest.variables) === null || _a === void 0 ? void 0 : _a['theme'];
+            if (theme) {
+                element.style.cssText = Object.entries(theme)
+                    .map(([name, value]) => `${name}:${value}`)
+                    .join(';');
             }
-        },
-        trace: (...args) => {
-            if (canLog()) {
-                console.trace(...args);
+            const position = (_b = params.manifest.variables) === null || _b === void 0 ? void 0 : _b['position'];
+            if (position) {
+                element.setAttribute('position', position);
             }
-        },
-        table: (...args) => {
-            if (canLog()) {
-                console.table(...args);
+            document.body.append(element);
+        };
+        if (window.top === window && !window[registryKey].wallet) {
+            if (params.isNewUser) {
+                // sync items from cart to wallet if a new user is detected
+                store
+                    .getCart()
+                    .then((cartContent) => walletAPI.addItems(cartContent).catch(logger.error))
+                    .then(() => initComponent())
+                    .catch((err) => logger.error(err));
             }
-        },
-        dir: (...args) => {
-            if (canLog()) {
-                console.dir(...args);
+            else {
+                initComponent();
             }
-        },
+        }
     };
 
     const transformItems = (data) => {
@@ -943,44 +996,28 @@ var ProvidersBlotoutWalletSdk = (function () {
         }));
     };
     const tag = (params) => {
-        const wallet = window[registryKey].walletAPI;
-        if (!wallet) {
+        var _a;
+        if (!((_a = window === null || window === void 0 ? void 0 : window[registryKey]) === null || _a === void 0 ? void 0 : _a.walletAPI)) {
+            logger.error(`[Blotout Wallet] No wallet API available`);
             return;
         }
+        const wallet = window[registryKey].walletAPI;
         switch (params.eventName) {
             case 'AddToCart': {
                 const items = transformItems(params.data);
-                if (items) {
+                if (items === null || items === void 0 ? void 0 : items.length) {
                     wallet.addItems(items).catch(logger.error);
                 }
                 return;
             }
-            case 'InitiateCheckout': {
-                const items = transformItems(params.data);
-                if (items) {
-                    wallet.setItems(items).catch(logger.error);
-                }
-                return;
-            }
-            case 'Purchase': {
-                const { orderId } = params.data;
-                wallet.purchase(orderId).catch(logger.error);
-                return;
-            }
         }
     };
 
-    // eslint-disable-next-line @nx/enforce-module-boundaries
-    const user = (params) => {
-        console.log(`[${packageName}]: user`, params);
-    };
-
     // eslint-disable-next-line @nx/enforce-module-boundaries
     const data = {
         name: packageName,
         init,
         tag,
-        user,
     };
     try {
         if (window) {