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

package/index.mjs

@@ -1,4 +1,56 @@
 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) {
@@ -6,11 +58,13 @@ class APIError extends Error {
     }
 }
 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({
@@ -41,6 +95,9 @@ class WalletAPI {
         this._cart = value;
         this.notify();
     }
+    get segmentEnabled() {
+        return this.enabled;
+    }
     subscribe(listener) {
         this.listeners.add(listener);
         return () => {
@@ -112,19 +169,6 @@ class WalletAPI {
             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',
@@ -271,15 +315,42 @@ const spring = 'linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.9
 
 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)};
 
@@ -418,22 +489,22 @@ const validPositions = new Set([
     '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();
             }
         };
@@ -442,164 +513,152 @@ let BlotoutWallet = class BlotoutWallet extends s {
             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 `
@@ -607,7 +666,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
         class="${e({
             cta: true,
             [this._position]: true,
-            hidden: !this._buttonVisible,
+            hidden: !this.buttonVisible,
         })}"
         @click=${this.showModal}
       >
@@ -618,7 +677,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
         <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' })}
@@ -633,15 +692,15 @@ let BlotoutWallet = class BlotoutWallet extends s {
               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>
@@ -649,7 +708,7 @@ let BlotoutWallet = class BlotoutWallet extends s {
 
       <div
         class="banner"
-        style=${o({ display: this._bannerVisible ? '' : 'none' })}
+        style=${o({ display: this.bannerVisible ? '' : 'none' })}
       >
         ${blotout({
             class: 'logo',
@@ -752,7 +811,6 @@ BlotoutWallet.styles = [
       }
 
       dialog {
-        position: relative;
         width: 430px;
         max-width: 100vw;
         background: var(--secondary);
@@ -836,97 +894,92 @@ __decorate([
 __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) => {
@@ -940,44 +993,28 @@ const transformItems = (data) => {
     }));
 };
 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blotoutio/providers-blotout-wallet-sdk",
-  "version": "0.42.1",
+  "version": "0.43.0",
   "description": "Blotout Wallet SDK for EdgeTag",
   "author": "Blotout",
   "license": "MIT",