@magic-spells/gift-with-purchase 0.2.0 → 2.0.0

package/dist/gift-with-purchase.esm.js

@@ -1,297 +1,408 @@
+//#region src/gift-with-purchase.js
 /**
- * Gift With Purchase Component - automatically adds/removes gift when cart threshold is met
- * Emits gwp:added/gwp:removed/gwp:error events and broadcasts cart updates
- */
-class GiftWithPurchase extends HTMLElement {
-	// private fields
+* Gift With Purchase Component - automatically adds/removes gift when cart threshold is met
+* Emits gwp:added/gwp:removed/gwp:error events and broadcasts cart updates
+*/
+var GiftWithPurchase = class extends HTMLElement {
 	#threshold = 0;
 	#currentAmount = 0;
 	#variantId = null;
 	#isActive = false;
 	#isAdded = false;
 	#promoEnded = false;
-	#cartDialog = null;
-	#boundHandleCartDataChange = null; // pre-bound listener ref for clean-up
-	#debounceTimer = null; // debouncing cart updates
-	#messageAbove = null; // message when threshold is met
-	#messageBelow = null; // message when below threshold
-
+	#productAvailable = true;
+	#isDisabled = false;
+	#cartPanel = null;
+	#handlers = {};
+	#debounceTimer = null;
+	#attachRetryTimer = null;
+	#isMutating = false;
+	#missedUpdate = false;
+	#messageAbove = null;
+	#messageBelow = null;
+	#moneyFormat = null;
 	static get observedAttributes() {
-		return ['threshold', 'current', 'variant-id', 'promo-ended', 'message-above', 'message-below'];
+		return [
+			"threshold",
+			"current",
+			"variant-id",
+			"promo-ended",
+			"product-available",
+			"message-above",
+			"message-below",
+			"money-format"
+		];
 	}
-
 	constructor() {
 		super();
-		// read initial attributes once
-		this.#threshold = parseFloat(this.getAttribute('threshold')) || 0;
-		this.#currentAmount = parseFloat(this.getAttribute('current')) || 0;
-		this.#variantId = this.getAttribute('variant-id');
-		this.#promoEnded = this.hasAttribute('promo-ended');
-		this.#messageAbove = this.getAttribute('message-above');
-		this.#messageBelow = this.getAttribute('message-below');
-		this.#boundHandleCartDataChange = this.#handleCartDataChange.bind(this);
-	}
-
+		const _ = this;
+		_.#threshold = parseFloat(_.getAttribute("threshold")) || 0;
+		_.#currentAmount = parseFloat(_.getAttribute("current")) || 0;
+		_.#variantId = _.getAttribute("variant-id");
+		_.#promoEnded = _.hasAttribute("promo-ended");
+		_.#productAvailable = _.#parseBooleanValue(_.getAttribute("product-available"), true);
+		_.#messageAbove = _.getAttribute("message-above");
+		_.#messageBelow = _.getAttribute("message-below");
+		_.#moneyFormat = _.getAttribute("money-format");
+		_.#handlers = { cartDataChange: _.#handleCartDataChange.bind(_) };
+	}
 	connectedCallback() {
-		this.#render();
-		this.#attachListeners();
+		const _ = this;
+		_.#calculateInitialState();
+		_.#render();
+		_.#updateVisualState();
+		_.#attachListeners();
+		if (_.#isDisabled && (!_.#cartPanel || _.#cartPanel.hasAttribute("manual"))) _.#updateState(null);
+	}
+	#calculateInitialState() {
+		const _ = this;
+		const convertedThreshold = _.#getConvertedThreshold();
+		_.#isDisabled = _.#promoEnded || !_.#productAvailable;
+		_.#isActive = _.#currentAmount >= convertedThreshold && !_.#isDisabled;
 	}
-
 	disconnectedCallback() {
-		if (this.#debounceTimer) clearTimeout(this.#debounceTimer);
-		if (this.#cartDialog)
-			this.#cartDialog.removeEventListener(
-				'cart-dialog:data-changed',
-				this.#boundHandleCartDataChange
-			);
-	}
-
+		const _ = this;
+		if (_.#debounceTimer) clearTimeout(_.#debounceTimer);
+		if (_.#attachRetryTimer) clearTimeout(_.#attachRetryTimer);
+		if (_.#cartPanel) _.#cartPanel.removeEventListener("cart-panel:data-changed", _.#handlers.cartDataChange);
+	}
+	attributeChangedCallback(name, oldValue, newValue) {
+		const _ = this;
+		if (oldValue === newValue) return;
+		switch (name) {
+			case "threshold":
+				_.#threshold = parseFloat(newValue) || 0;
+				break;
+			case "current":
+				_.#currentAmount = parseFloat(newValue) || 0;
+				break;
+			case "variant-id":
+				_.#variantId = newValue;
+				break;
+			case "promo-ended":
+				_.#promoEnded = newValue !== null;
+				break;
+			case "product-available":
+				_.#productAvailable = _.#parseBooleanValue(newValue, true);
+				break;
+			case "message-above":
+				_.#messageAbove = newValue;
+				break;
+			case "message-below":
+				_.#messageBelow = newValue;
+				break;
+			case "money-format": _.#moneyFormat = newValue;
+		}
+		if (!_.isConnected) return;
+		const wasDisabled = _.#isDisabled;
+		_.#calculateInitialState();
+		_.#updateVisualState();
+		_.#updateMessages();
+		if (_.#isDisabled && !wasDisabled) _.#updateState(null);
+	}
 	#render() {
-		this.classList.add('gift-with-purchase');
+		this.classList.add("gift-with-purchase");
 		this.#renderMessages();
 	}
-
 	#renderMessages() {
-		// Look for existing message element with data-content-gwp-message
 		this.#updateMessages();
 	}
-
+	#formatMoney(amount) {
+		if (!this.#moneyFormat) return amount.toFixed(2).replace(/\.00$/, "");
+		const amountFixed = amount.toFixed(2);
+		const amountNoDecimals = Math.round(amount).toString();
+		const amountWithComma = amountFixed.replace(".", ",");
+		const amountNoDecimalsWithComma = amountNoDecimals.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+		return this.#moneyFormat.replace(/\{\{\s*amount_no_decimals_with_comma_separator\s*\}\}/g, amountNoDecimalsWithComma).replace(/\{\{\s*amount_with_comma_separator\s*\}\}/g, amountWithComma).replace(/\{\{\s*amount_no_decimals\s*\}\}/g, amountNoDecimals).replace(/\{\{\s*amount\s*\}\}/g, amountFixed);
+	}
+	#getConvertedThreshold() {
+		const rate = parseFloat(window.Shopify?.currency?.rate) || 1;
+		return this.#threshold * rate;
+	}
+	#parseBooleanValue(value, defaultValue = true) {
+		if (value === null || typeof value === "undefined") return defaultValue;
+		if (value === "") return true;
+		const normalized = String(value).trim().toLowerCase();
+		if (normalized === "false" || normalized === "0") return false;
+		if (normalized === "true" || normalized === "1") return true;
+		return defaultValue;
+	}
 	#updateMessages() {
-		const messageEl = this.querySelector('[data-content-gwp-message]');
+		const _ = this;
+		const messageEl = _.querySelector("[data-content-gwp-message]");
 		if (!messageEl) return;
-
-		let message = '';
-
-		// console.log('updateMessages - this.#isActive', this.#isActive);
-
-		if (this.#isActive && this.#messageAbove) {
-			// set message to above threshold message
-			message = this.#messageAbove;
-		} else if (!this.#isActive && this.#messageBelow) {
-			// set message to below threshold message
-			const remaining = this.#threshold - this.#currentAmount;
-			const formattedAmount = remaining.toFixed(2).replace(/\.00$/, '');
-			message = this.#messageBelow
-				.replace(/\{\s*amount\s*\}/g, formattedAmount)
-				.replace(/\{amount\}/g, formattedAmount);
+		let message = "";
+		if (_.#isActive && _.#messageAbove) message = _.#messageAbove;
+		else if (!_.#isActive && _.#messageBelow) {
+			const remaining = _.#getConvertedThreshold() - _.#currentAmount;
+			const formattedAmount = _.#formatMoney(remaining);
+			message = _.#messageBelow.replace(/\[\s*amount\s*\]/g, formattedAmount).replace(/\[amount\]/g, formattedAmount);
 		}
-
 		messageEl.textContent = message;
-		messageEl.style.display = message ? 'block' : 'none';
+		messageEl.style.display = message ? "block" : "none";
 	}
-
 	#attachListeners() {
-		// Look for cart-dialog element when attaching listeners (more reliable timing)
-		this.#cartDialog = this.closest('cart-dialog');
-
-		if (this.#cartDialog) {
-			// console.log('cartDialog exists and is attaching events');
-			this.#cartDialog.addEventListener(
-				'cart-dialog:data-changed',
-				this.#boundHandleCartDataChange
-			);
-		} else {
-			// Try again after a short delay in case the DOM isn't fully ready
-			setTimeout(() => {
-				// console.log('cartDialog DIDNT exist and we waited to attach events');
-				this.#cartDialog = this.closest('cart-dialog');
-				if (this.#cartDialog) {
-					this.#cartDialog.addEventListener(
-						'cart-dialog:data-changed',
-						this.#boundHandleCartDataChange
-					);
-				} else {
-					console.error('GWP - cart-dialog still not found after delay');
-				}
-			}, 100);
-		}
+		const _ = this;
+		_.#cartPanel = _.closest("cart-panel");
+		if (_.#cartPanel) _.#cartPanel.addEventListener("cart-panel:data-changed", _.#handlers.cartDataChange);
+		else _.#attachRetryTimer = setTimeout(() => {
+			_.#attachRetryTimer = null;
+			_.#cartPanel = _.closest("cart-panel");
+			if (_.#cartPanel) _.#cartPanel.addEventListener("cart-panel:data-changed", _.#handlers.cartDataChange);
+			else console.error("GWP - cart-panel still not found after delay");
+		}, 100);
+	}
+	/**
+	* Ask the parent cart-panel to re-fetch and re-render the cart.
+	* refreshCart() is the public API across every published cart-panel (0.3.x - 2.x);
+	* getCartAndRefresh() is only tried as a fallback for custom panels written against
+	* the name earlier versions of this component mistakenly called. Missing methods are
+	* ignored rather than thrown so a successful add/remove never reports a spurious error.
+	*/
+	#refreshCartPanel() {
+		const panel = this.#cartPanel;
+		if (!panel) return;
+		if (typeof panel.refreshCart === "function") panel.refreshCart();
+		else if (typeof panel.getCartAndRefresh === "function") panel.getCartAndRefresh();
 	}
-
 	#handleCartDataChange(event) {
+		const _ = this;
 		const cart = event.detail;
-		// console.log('GWP - handleCartDataChange cart: ', cart.calculated_subtotal, cart);
-
-		if (!cart || typeof cart.calculated_subtotal === 'undefined') return;
-		if (this.#debounceTimer) clearTimeout(this.#debounceTimer);
-
-		this.#debounceTimer = setTimeout(() => {
-			this.#debounceTimer = null;
-			this.#currentAmount = parseFloat(cart.calculated_subtotal / 100) || 0;
-			this.#checkGiftInCart(cart);
-			this.#updateState(cart);
+		if (!cart || typeof cart.calculated_subtotal === "undefined") return;
+		if (_.#debounceTimer) clearTimeout(_.#debounceTimer);
+		_.#debounceTimer = setTimeout(() => {
+			_.#debounceTimer = null;
+			if (_.#isMutating) {
+				_.#missedUpdate = true;
+				return;
+			}
+			_.#currentAmount = parseFloat(cart.calculated_subtotal / 100) || 0;
+			_.#checkGiftInCart(cart);
+			_.#updateState(cart);
 		}, 300);
 	}
-
-	// checks to see if the gift is already in the cart
 	#checkGiftInCart(cart) {
-		if (!cart.items || !this.#variantId) {
-			this.#isAdded = false;
-			return;
+		const _ = this;
+		const giftLines = _.#getGiftLines(cart);
+		_.#isAdded = giftLines.length > 0;
+		const duplicate = giftLines.find((item) => item.quantity > 1);
+		if (duplicate) _.#trimGiftQuantity(duplicate);
+	}
+	async #trimGiftQuantity(item) {
+		const _ = this;
+		_.#isMutating = true;
+		try {
+			const res = await fetch("/cart/change.js", {
+				method: "POST",
+				credentials: "same-origin",
+				headers: {
+					"Content-Type": "application/json",
+					"X-Requested-With": "XMLHttpRequest"
+				},
+				body: JSON.stringify({
+					id: item.key,
+					quantity: 1
+				})
+			});
+			if (!res.ok) throw new Error(`http ${res.status}`);
+			_.#refreshCartPanel();
+		} catch (err) {
+			console.error("giftwithpurchase: quantity trim error", err);
+			_.dispatchEvent(new CustomEvent("gwp:error", {
+				detail: {
+					action: "trim",
+					error: err.message
+				},
+				bubbles: true
+			}));
+		} finally {
+			_.#isMutating = false;
+			_.#discardStaleCart();
 		}
-		const giftLines = cart.items.filter(
-			(lineItem) =>
-				lineItem.variant_id.toString() === this.#variantId.toString() &&
-				lineItem.properties?._gwp_item === 'true'
-		);
-		this.#isAdded = giftLines.length > 0;
-		if (this.#promoEnded && giftLines.length) this.#removeAllGiftItems(giftLines);
-	}
-
-	#updateState(cart) {
-		// console.log('********** ----------   Updating state....');
-		const wasActive = this.#isActive;
-		this.#isActive = this.#currentAmount >= this.#threshold && !this.#promoEnded;
-
-		// console.log('********** ----------   this.#isActive', this.#isActive);
-
-		if (this.#promoEnded) {
-			// remove GWP from cart
-			this.#removeGiftFromCart(cart);
+	}
+	#getGiftLines(cart) {
+		const _ = this;
+		if (!cart?.items || !_.#variantId) return [];
+		return cart.items.filter((item) => {
+			if (item.properties?._gwp_item !== "true") return false;
+			return item.variant_id?.toString() === _.#variantId.toString();
+		});
+	}
+	/**
+	* Cart snapshots held across a mutation predate it - drop them and ask for fresh truth.
+	*/
+	#discardStaleCart() {
+		const _ = this;
+		if (_.#debounceTimer) {
+			clearTimeout(_.#debounceTimer);
+			_.#debounceTimer = null;
+			_.#missedUpdate = true;
 		}
-
-		if (this.#isActive && !wasActive && !this.#isAdded && this.#variantId) {
-			this.#addGiftToCart();
-		} else if (!this.#isActive && wasActive && this.#isAdded && this.#variantId) {
-			this.#removeGiftFromCart(cart);
+		if (!_.#missedUpdate) return;
+		_.#missedUpdate = false;
+		if (_.#cartPanel) _.#refreshCartPanel();
+		else _.#updateState(null);
+	}
+	#updateState(cart) {
+		const _ = this;
+		if (_.#isMutating) {
+			_.#missedUpdate = true;
+			return;
 		}
-
-		this.#updateVisualState();
-		this.#updateMessages();
+		const convertedThreshold = _.#getConvertedThreshold();
+		_.#isDisabled = _.#promoEnded || !_.#productAvailable;
+		_.#isActive = _.#currentAmount >= convertedThreshold && !_.#isDisabled;
+		if (_.#isDisabled) _.#removeGiftFromCart(cart);
+		else if (_.#isActive && !_.#isAdded && _.#variantId) _.#addGiftToCart();
+		else if (!_.#isActive && _.#isAdded && _.#variantId) _.#removeGiftFromCart(cart);
+		_.#updateVisualState();
+		_.#updateMessages();
 	}
-
 	#updateVisualState() {
-		if (this.#promoEnded) {
-			this.setAttribute('state', 'ended');
-			this.style.display = 'none';
+		const _ = this;
+		if (_.#promoEnded) {
+			_.setAttribute("state", "ended");
+			_.style.display = "none";
 			return;
 		}
-
-		this.style.display = '';
-		if (this.#isAdded) {
-			this.setAttribute('state', 'added');
-		} else if (this.#isActive) {
-			this.setAttribute('state', 'active');
+		if (!_.#productAvailable) {
+			_.setAttribute("state", "disabled");
+			_.style.display = "none";
+			return;
 		}
-		// Note: no 'inactive' state since component wouldn't be loaded if inactive
+		_.style.display = "";
+		if (_.#isAdded) _.setAttribute("state", "added");
+		else if (_.#isActive) _.setAttribute("state", "active");
+		else _.setAttribute("state", "inactive");
 	}
-
 	async #addGiftToCart() {
+		const _ = this;
+		_.#isMutating = true;
 		try {
-			const res = await fetch('/cart/add.js', {
-				method: 'POST',
-				credentials: 'same-origin',
+			const res = await fetch("/cart/add.js", {
+				method: "POST",
+				credentials: "same-origin",
 				headers: {
-					'Content-Type': 'application/json',
-					'X-Requested-With': 'XMLHttpRequest',
+					"Content-Type": "application/json",
+					"X-Requested-With": "XMLHttpRequest"
 				},
-				body: JSON.stringify({
-					items: [
-						{
-							id: this.#variantId,
-							quantity: 1,
-							properties: {
-								_gwp_item: 'true',
-								_hide_in_cart: 'true',
-								_ignore_price_in_subtotal: 'true',
-							},
-						},
-					],
-				}),
+				body: JSON.stringify({ items: [{
+					id: _.#variantId,
+					quantity: 1,
+					properties: {
+						_gwp_item: "true",
+						_hide_in_cart: "true",
+						_ignore_price_in_subtotal: "true"
+					}
+				}] })
 			});
 			if (!res.ok) throw new Error(`http ${res.status}`);
 			await res.json();
-			this.#isAdded = true;
-			this.dispatchEvent(
-				new CustomEvent('gwp:added', {
-					detail: { variantId: this.#variantId },
-					bubbles: true,
-				})
-			);
+			_.#isAdded = true;
+			_.dispatchEvent(new CustomEvent("gwp:added", {
+				detail: { variantId: _.#variantId },
+				bubbles: true
+			}));
+			_.#refreshCartPanel();
 		} catch (err) {
-			console.error('giftwithpurchase: add error', err);
-			this.dispatchEvent(
-				new CustomEvent('gwp:error', {
-					detail: { action: 'add', error: err.message },
-					bubbles: true,
-				})
-			);
+			console.error("giftwithpurchase: add error", err);
+			_.dispatchEvent(new CustomEvent("gwp:error", {
+				detail: {
+					action: "add",
+					error: err.message
+				},
+				bubbles: true
+			}));
+		} finally {
+			_.#isMutating = false;
+			_.#discardStaleCart();
 		}
 	}
-
 	async #removeGiftFromCart(cart) {
+		const _ = this;
+		_.#isMutating = true;
 		try {
-			// get all GWP items in the cart
-			const giftLines = cart.items.filter(
-				(lineItem) =>
-					lineItem.variant_id.toString() === this.#variantId.toString() &&
-					lineItem.properties?._gwp_item === 'true'
-			);
-
-			// exit if no items in the cart
+			if (!cart?.items) cart = await _.#fetchCart();
+			if (!cart?.items) return;
+			const giftLines = _.#getGiftLines(cart);
 			if (!giftLines.length) {
-				this.#isAdded = false;
+				_.#isAdded = false;
 				return;
 			}
-
-			// remove all GWP items from the cart
-			await this.#removeAllGiftItems(giftLines);
+			await _.#removeAllGiftItems(giftLines);
+		} finally {
+			_.#isMutating = false;
+			_.#discardStaleCart();
+		}
+	}
+	async #fetchCart() {
+		const _ = this;
+		try {
+			let cart;
+			if (typeof _.#cartPanel?.getCart === "function") cart = await _.#cartPanel.getCart();
+			else {
+				const res = await fetch("/cart.js", { credentials: "same-origin" });
+				if (!res.ok) throw new Error(`http ${res.status}`);
+				cart = await res.json();
+			}
+			return cart?.error ? null : cart;
 		} catch (err) {
-			console.error('giftwithpurchase: remove error', err);
-			this.dispatchEvent(
-				new CustomEvent('gwp:error', {
-					detail: { action: 'remove', error: err.message },
-					bubbles: true,
-				})
-			);
+			console.error("giftwithpurchase: cart fetch error", err);
+			return null;
 		}
 	}
-
 	async #removeAllGiftItems(giftLines) {
+		const _ = this;
 		try {
-			await Promise.all(
-				giftLines.map((giftItem) =>
-					fetch('/cart/change.js', {
-						method: 'POST',
-						credentials: 'same-origin',
-						headers: {
-							'Content-Type': 'application/json',
-							'X-Requested-With': 'XMLHttpRequest',
-						},
-						body: JSON.stringify({ id: giftItem.key, quantity: 0 }),
+			await Promise.all(giftLines.map(async (item) => {
+				const res = await fetch("/cart/change.js", {
+					method: "POST",
+					credentials: "same-origin",
+					headers: {
+						"Content-Type": "application/json",
+						"X-Requested-With": "XMLHttpRequest"
+					},
+					body: JSON.stringify({
+						id: item.key,
+						quantity: 0
 					})
-				)
-			);
-			this.#isAdded = false;
-			// note: you can broadcast cart again here if you want real-time re-render after remove
-			this.dispatchEvent(
-				new CustomEvent('gwp:removed', {
-					detail: { variantId: this.#variantId },
-					bubbles: true,
-				})
-			);
+				});
+				if (!res.ok) throw new Error(`http ${res.status}`);
+			}));
+			_.#isAdded = false;
+			_.dispatchEvent(new CustomEvent("gwp:removed", {
+				detail: { variantId: _.#variantId },
+				bubbles: true
+			}));
+			_.#refreshCartPanel();
 		} catch (err) {
-			console.error('giftwithpurchase: bulk remove error', err);
-			this.dispatchEvent(
-				new CustomEvent('gwp:error', {
-					detail: { action: 'remove', error: err.message },
-					bubbles: true,
-				})
-			);
+			console.error("giftwithpurchase: bulk remove error", err);
+			_.dispatchEvent(new CustomEvent("gwp:error", {
+				detail: {
+					action: "remove",
+					error: err.message
+				},
+				bubbles: true
+			}));
 		}
 	}
-
 	getState() {
+		const _ = this;
+		const convertedThreshold = _.#getConvertedThreshold();
 		return {
-			currentAmount: this.#currentAmount,
-			threshold: this.#threshold,
-			variantId: this.#variantId,
-			isActive: this.#isActive,
-			isAdded: this.#isAdded,
-			promoEnded: this.#promoEnded,
-			remainingAmount: Math.max(0, this.#threshold - this.#currentAmount),
+			currentAmount: _.#currentAmount,
+			threshold: _.#threshold,
+			convertedThreshold,
+			variantId: _.#variantId,
+			isActive: _.#isActive,
+			isAdded: _.#isAdded,
+			promoEnded: _.#promoEnded,
+			productAvailable: _.#productAvailable,
+			isDisabled: _.#isDisabled,
+			remainingAmount: Math.max(0, convertedThreshold - _.#currentAmount),
+			currencyRate: parseFloat(window.Shopify?.currency?.rate) || 1
 		};
 	}
-
 	get currentAmount() {
 		return this.#currentAmount;
 	}
@@ -310,28 +421,28 @@ class GiftWithPurchase extends HTMLElement {
 	get promoEnded() {
 		return this.#promoEnded;
 	}
-
-	// Public setter methods for programmatic control
+	get productAvailable() {
+		return this.#productAvailable;
+	}
+	get isDisabled() {
+		return this.#isDisabled;
+	}
 	setCurrentAmount(amount) {
-		this.#currentAmount = parseFloat(amount) || 0;
-		this.#updateState({ items: [] }); // Pass empty cart to avoid cart operations
-		this.#updateMessages();
+		const _ = this;
+		_.#currentAmount = parseFloat(amount) || 0;
+		_.#updateState(null);
+		_.#updateMessages();
 	}
-
 	setThreshold(threshold) {
-		this.#threshold = parseFloat(threshold) || 0;
-		this.#updateState({ items: [] }); // Pass empty cart to avoid cart operations
-		this.#updateMessages();
+		const _ = this;
+		_.#threshold = parseFloat(threshold) || 0;
+		_.#updateState(null);
+		_.#updateMessages();
 	}
-
 	setVariantId(variantId) {
 		this.#variantId = variantId;
 	}
-}
-
-if (!customElements.get('gift-with-purchase')) {
-	customElements.define('gift-with-purchase', GiftWithPurchase);
-}
-
+};
+if (!customElements.get("gift-with-purchase")) customElements.define("gift-with-purchase", GiftWithPurchase);
+//#endregion
 export { GiftWithPurchase };
-//# sourceMappingURL=gift-with-purchase.esm.js.map