@blotoutio/providers-blotout-wallet-sdk 0.42.2 → 0.44.0

package/index.mjs

@@ -1,16 +1,147 @@
+/**
+ * Returns whether A contains the entirety of B (A superset of B)
+ *
+ * A ⊇ B
+ */
+const isSuperset = (a, b) => {
+    for (const item of b) {
+        if (!a.has(item)) {
+            return false;
+        }
+    }
+    return true;
+};
+/**
+ * Returns whether A is entirely contained within B (A subset of B)
+ *
+ * A ⊆ B
+ */
+const isSubset = (a, b) => {
+    for (const item of a) {
+        if (!b.has(item)) {
+            return false;
+        }
+    }
+    return true;
+};
+/**
+ * Returns true when the two ets contain the same set of elements
+ *
+ * A = B
+ */
+const areEquivalent = (a, b) => a.size == b.size && isSuperset(a, b) && isSubset(a, b);
+
+const expand = (str) => str.split(',').flatMap((entry) => {
+    if (!entry.includes('-')) {
+        return entry;
+    }
+    const result = [];
+    const [start, end] = entry.split('-').map(Number);
+    for (let i = start; i <= end; i++) {
+        result.push(i.toString());
+    }
+    return result;
+});
+/**
+ * Exported from https://en.wikipedia.org/wiki/List_of_North_American_Numbering_Plan_area_codes
+ *
+ * In Dev Tools, select the `tbody` element containing the area codes and run the following code,
+ * replacing the emdash character with a simple endash:
+ *
+ * ```ts
+ * [...$0.querySelectorAll('td:first-child')]
+ *   .filter(cell => cell.firstChild.nodeName != 'A')
+ *   .map(cell => cell.textContent.trim()).join(',')
+ * ```
+ */
+new Set([
+    ...expand('200,211,221,222,230,232,233,235,237-238,241,243,244,245,247,255,257,258-259,261,265,266,271,273,274,275,277,278,280,282,283,285-287,288,290-299'),
+    ...expand('300,311,322,324,327,328,333,335,338,342,344,348-349,353,355,356,357-359,362,366,369,370-379,381,382,383-384,387,388,389,390-399'),
+    ...expand('400,411,420,421-422,426-427,428,429,433,439,444,446,449,451-454,455,456,457,459,460,461-462,465,466,467,471,476,477,481-483,485-486,487,488,489,490-499'),
+    ...expand('511,532,535,536,537,538,542-543,545-547,549-550,552-554,555,556,558,560,565,568,569,576,578,583,589,590-599'),
+    ...expand('611,621,624,625,627,632,633,634-635,637-638,642-643,644,648,652-654,655,663,665,666,668,673-676,677,679,685,686,687,688,690-699'),
+    ...expand('711,722,723,729,733,735-736,739,741,744,745-746,748,749-751,752,755,756,759,761,764,766,768,776,777,783,788,789,790-799'),
+    ...expand('811,821,822,823-824,827,834,836,841-842,846,851,852-853,871,874-875,879,880-887,889,890-899'),
+    ...expand('911,921,922,923,924,926,927,932,933,935,942,944,946,950,953,955,957-958,960-969,974,975,976,977,981-982,987,988,990-999'),
+]);
+
 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);
+        }
+    },
+};
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
 class APIError extends Error {
     constructor(...args) {
         super(...args);
     }
 }
+const getItemKey = (item) => `${item.productId}-${item.variantId}`;
+const postMessageKey = 'blotoutWallet';
 class WalletAPI {
-    constructor({ baseUrl, userId }) {
+    constructor({ baseUrl, userId, enabled }) {
         this.listeners = new Set();
         this._cart = { cartId: null, items: [], email: false };
+        this.onWindowMessage = (event) => {
+            var _a;
+            if (((_a = event.data) === null || _a === void 0 ? void 0 : _a.name) == postMessageKey) {
+                this.cart = event.data.cart;
+            }
+        };
         this.baseUrl = baseUrl;
         this.userId = userId;
+        this.enabled = enabled;
+        logger.info(`[Blotout Wallet] User is ${enabled ? 'enabled' : 'disabled'}`);
+        window.addEventListener('message', this.onWindowMessage);
     }
     getHeaders(json = false) {
         const headers = new Headers({
@@ -25,6 +156,7 @@ class WalletAPI {
         return `${this.baseUrl}/providers/blotoutWallet${path}`;
     }
     notify() {
+        var _a;
         for (const listener of this.listeners) {
             try {
                 listener(this.cart);
@@ -33,13 +165,44 @@ class WalletAPI {
                 console.error(err);
             }
         }
+        (_a = window.top) === null || _a === void 0 ? void 0 : _a.postMessage({ name: postMessageKey, cart: this.cart }, '*');
     }
     get cart() {
         return this._cart;
     }
     set cart(value) {
-        this._cart = value;
-        this.notify();
+        if (this.isCartUpdated(value)) {
+            this._cart = value;
+            this.notify();
+        }
+    }
+    isCartUpdated(value) {
+        if (value.cartId != this.cart.cartId ||
+            value.email != this.cart.email ||
+            value.items.length != this.cart.items.length) {
+            return true;
+        }
+        const newItemsMap = new Map(value.items.map((item) => [item.itemId, item]));
+        const newItemsKeys = new Set(newItemsMap.keys());
+        const currenItemsMap = new Map(this.cart.items.map((item) => [item.itemId, item]));
+        const currentItemsKeys = new Set(currenItemsMap.keys());
+        if (!areEquivalent(newItemsKeys, currentItemsKeys)) {
+            return true;
+        }
+        for (const [key, newItem] of newItemsMap) {
+            const currentItem = currenItemsMap.get(key);
+            if (newItem.amount != currentItem.amount ||
+                newItem.value != currentItem.value ||
+                newItem.name != currentItem.name ||
+                newItem.productId != currentItem.productId ||
+                newItem.variantId != currentItem.variantId) {
+                return true;
+            }
+        }
+        return false;
+    }
+    get segmentEnabled() {
+        return this.enabled;
     }
     subscribe(listener) {
         this.listeners.add(listener);
@@ -72,6 +235,26 @@ class WalletAPI {
             return (this.cart = await response.json());
         });
     }
+    removeItems(items) {
+        const cartLookup = new Map(this._cart.items.map((item) => [getItemKey(item), item]));
+        const itemLookup = new Map(items.map((item) => [getItemKey(item), item]));
+        const updatedCartItems = [];
+        for (const [itemKey, walletItem] of cartLookup.entries()) {
+            const itemToRemove = itemLookup.get(itemKey);
+            if (itemToRemove) {
+                // if the removed amount is equal or greater, we simply don't push the
+                // wallet item into the updated cart contents
+                if (walletItem.amount > itemToRemove.amount) {
+                    walletItem.amount -= itemToRemove.amount;
+                    updatedCartItems.push(walletItem);
+                }
+            }
+            else {
+                updatedCartItems.push(walletItem);
+            }
+        }
+        return this.setItems(updatedCartItems);
+    }
     setItems(items) {
         return fetch(this.getUrl('/items'), {
             method: 'PUT',
@@ -85,7 +268,7 @@ class WalletAPI {
         });
     }
     updateItem(item) {
-        fetch(this.getUrl(`/items/${item.itemId}`), {
+        return fetch(this.getUrl(`/items/${item.itemId}`), {
             method: 'PUT',
             headers: this.getHeaders(true),
             body: JSON.stringify({
@@ -102,7 +285,7 @@ class WalletAPI {
         });
     }
     removeItem(itemId) {
-        fetch(this.getUrl(`/items/${itemId}`), {
+        return fetch(this.getUrl(`/items/${itemId}`), {
             method: 'DELETE',
             headers: this.getHeaders(),
         }).then(async (response) => {
@@ -112,19 +295,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 +441,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 +615,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('[Blotout Wallet] Cart updated', 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 +639,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 +792,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 +803,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 +818,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 +834,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 +937,6 @@ BlotoutWallet.styles = [
       }
 
       dialog {
-        position: relative;
         width: 430px;
         max-width: 100vw;
         background: var(--secondary);
@@ -836,97 +1020,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 +1119,35 @@ 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': {
+        case 'RemoveFromCart': {
             const items = transformItems(params.data);
-            if (items) {
-                wallet.setItems(items).catch(logger.error);
+            if (items === null || items === void 0 ? void 0 : items.length) {
+                wallet.removeItems(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) {