notify-me-wl 1.4.1 → 1.4.3

package/CLAUDE.md

@@ -0,0 +1,199 @@
+# CLAUDE.md — The Wishlist Company (TWC / Wishlist.io)
+
+This file gives Claude Code persistent context about the TWC platform so every session starts informed. Update it as the platform evolves.
+
+---
+
+## This Repository
+
+**Repo:** `notify-me_coming-soon-wl-widget`
+**GitHub:** https://github.com/The-Wishlist-Co/notify-me_coming-soon-wl-widget
+
+Customer-facing widget for 'Notify Me' and 'Coming Soon' wishlist functionality. Embedded on retailer product pages.
+
+---
+
+---
+
+## Platform Overview
+
+**Wishlist.io** is a SaaS retail platform focused on capturing and activating consumer intent data, primarily in fashion retail. It surfaces wishlist and engagement data to frontline retail staff and powers personalised outreach via messaging templates.
+
+**GitHub org:** https://github.com/The-Wishlist-Co
+
+---
+
+## Service Architecture
+
+Microservices stack deployed on **AWS EKS**, service mesh via **Istio + Consul**. Netflix OSS for gateway/resilience. All services are **Spring Boot / JHipster**, Java 13.
+
+| Service | Role |
+|---|---|
+| `twcgateway` | API gateway (Zuul) |
+| `wsservice` | Wishlist core service |
+| `customerservice` | Customer profile service |
+| `productsvc` | Product catalogue service |
+| `eventcollector` | Event ingestion |
+| `inventorysvc` | Inventory service |
+| `merchantsvc` | Merchant/retailer management |
+| `ordersvc` | Order service |
+
+**Observability:** OpenTelemetry + Datadog. Logs via Filebeat → Elasticsearch (`twc-ops` cluster, ECK on EKS, Elasticsearch 8.3.3, 4-node).
+
+---
+
+## Critical Infrastructure Constraints
+
+### Java / JVM (ALL services)
+
+All services run Java 13 in containers and **cannot auto-detect CPU limits correctly via cgroups**. Every service deployment MUST include:
+
+```
+-XX:ActiveProcessorCount=N
+```
+
+in `JAVA_OPTS`, where N matches the container's CPU allocation. Omitting this causes Undertow thread pool over-sizing → Consul health check failures → Hystrix circuit breaker trips → 500 SHORTCIRCUIT errors at the gateway.
+
+Affected services (apply to all eight): `twcgateway`, `wsservice`, `customerservice`, `productsvc`, `eventcollector`, `inventorysvc`, `merchantsvc`, `ordersvc`.
+
+### Elasticsearch / ECK
+
+- Cluster: `twc-ops`, 4 nodes on EKS via ECK operator
+- **Memory:** each node must be configured with **4Gi** (`-Xms2g -Xmx2g`). Nodes with 2Gi will OOM-kill under load.
+- **ILM:** Filebeat data stream indices require an ILM policy with **3-day retention** to prevent disk exhaustion.
+- Yellow cluster state will block ECK rolling restarts — resolve unassigned shards before patching the CR.
+
+### EKS Scaling Lambda
+
+A Lambda (`eks_node_scaleup`) has hardcoded node group values and will override manual EKS scaling changes. Do not rely on manual scaling being durable — any fix must go into the Lambda source.
+
+---
+
+## Data Architecture
+
+### ClickHouse (Analytics / Reporting)
+
+Used for conversion reporting and analytics. All ETL queries follow strict conventions — see Query Conventions below.
+
+### DynamoDB (Operational)
+
+Key tables:
+
+| Table | PK | SK | Notes |
+|---|---|---|---|
+| `TWCTEMPLATE_TOPIC` | `tenantId` | `topicId` | Soft-delete via `active` flag |
+| `MESSAGE` | — | — | `messageTopic` stored directly at send time — single source of truth |
+
+`messageTopic` is captured on the MESSAGE record at send time and is **not** looked up from `TWCTEMPLATE_TOPIC` at query time. This is intentional.
+
+---
+
+## ClickHouse Query Conventions
+
+These conventions are non-negotiable. All new queries must follow them.
+
+### Named Queries (Conversion Reporting Dashboard)
+
+| Query ID | Description |
+|---|---|
+| `CONV_KPI_SUMMARY` | Top-level KPI summary |
+| `CONV_TREND_DAILY` | Daily trend over period |
+| `CONV_BREAKDOWN_STORE` | Breakdown by store |
+| `CONV_BREAKDOWN_STAFF` | Breakdown by staff |
+| `CONV_BREAKDOWN_TOPIC` | Breakdown by message topic |
+| `CONV_BREAKDOWN_TEMPLATE_TAG` | Breakdown by template tag |
+| `CONV_BREAKDOWN_CUSTOMER_TAG` | Breakdown by customer tag |
+| `CONV_BREAKDOWN_CHANNEL` | Breakdown by channel |
+
+### API Parameter Naming Convention
+
+| Parameter | Maps to |
+|---|---|
+| `value1` | channel |
+| `value2` | topic |
+| `value3` | templateTag |
+| `value4` | customerTag |
+| `param5` | storeRefs (array) |
+| `param6` | staffRefs (array) |
+
+### Filter Syntax Rules
+
+**`storeRef` and `staffRef` are ALWAYS multi-select.** These are never single-value filters.
+
+```sql
+-- ✅ CORRECT — always use IN with empty() guard
+AND (empty({param5: Array(String)}) OR storeRef IN {param5: Array(String)})
+AND (empty({param6: Array(String)}) OR staffRef IN {param6: Array(String)})
+
+-- ❌ WRONG — never use equality for store or staff
+AND storeRef = {param5: String}
+AND staffRef = {param6: String}
+```
+
+All other filters (`value1`–`value4`) follow the same array pattern if they are multi-select dropdowns.
+
+---
+
+## Integrations
+
+### Shopify
+
+- Custom pixel integration on `twc-fashion-demo.myshopify.com` (pixel `87425273`)
+- Pixels require `analytics.subscribe('init', ...)` capture and `Content-Type: application/json` header
+- App updates auto-deploy to all merchants unless new OAuth permission scopes are required
+
+### Gorgias
+
+Backend proxy integration surfacing support ticket data on customer profile screens.
+
+- Per-customer credentials stored encrypted (AES-256) in `gorgias_credentials` table
+- Ticket data cached in `gorgias_ticket_cache`
+- Cache TTLs: 15 min (summary), 2 min (full ticket list)
+- Five API endpoints for credential management and ticket retrieval
+
+### Emarsys
+
+Marketing automation platform integration. Customer data synced from TWC to Emarsys for campaign targeting. Webhook updates received via `emarsys-webhook-updates` Lambda.
+
+### Newstore
+
+POS platform integration. TWC builds plugins/webviews for the Newstore POS environment. Webhooks received via `twc-newstore-webhook`. Proxy via `infinityAPI` for Triquestra Infinity POS.
+
+---
+
+## Development Conventions
+
+### General
+
+- Full-stack ownership: data modelling, API design, backend, infra/DevOps, frontend
+- Prefer explicit over implicit — document intent in code comments for complex query logic
+- All schema changes should consider soft-delete patterns (see `TWCTEMPLATE_TOPIC` above)
+- Default branch: `main`
+- Feature branches cut from `main`, kebab-case description (e.g. `suppression-change`)
+- PR back to `main` when complete
+
+### Code Review Checklist (for Claude Code to apply)
+
+Before suggesting or approving any change, verify:
+
+- [ ] All ClickHouse queries touching store/staff use `IN` + `empty()` guard, not `=`
+- [ ] Any new or modified Spring Boot service includes `-XX:ActiveProcessorCount` in JAVA_OPTS config
+- [ ] DynamoDB table designs include `tenantId` as PK for all multi-tenant tables
+- [ ] New Elasticsearch indices have an ILM policy assigned
+- [ ] API parameter names follow the `value1`–`value4` / `param5`/`param6` convention
+
+---
+
+## Key External References
+
+- Anthropic Claude Code docs: https://docs.claude.com/en/docs/claude-code/overview
+- ECK operator docs: https://www.elastic.co/guide/en/cloud-on-k8s/current/index.html
+- Shopify custom pixels: https://shopify.dev/docs/api/web-pixels-api
+
+---
+
+*Last updated: May 2026. Keep this file current as the platform evolves — it is the primary context source for all Claude Code sessions.*
+
+## References
+- **Engineering Standards:** https://github.com/The-Wishlist-Co/twc-api-specs/blob/main/standards/TWC-STANDARDS.md
+- **API Specifications:** https://github.com/The-Wishlist-Co/twc-api-specs/blob/main/apis/

package/README.md

@@ -29,6 +29,14 @@ Add a button to your HTML where you want the widget to appear. The button should
 
 - `data-fields`: A JSON array specifying the fields to include in the form. Possible values are `"mobile"`, `"firstName"`, and `"lastName"`.
 - `data-type`: Specifies the type of the widget. Possible values are `"notify-me"` and `"coming-soon"`.
+- `data-auth`: Auth mode. `"token"` (default) uses the bundled server-issued access token. `"proxy"` uses the Shopify App Proxy at `/apps/twc-sdk/auth/token` to obtain a tenant-scoped token (requires the customer to be logged in to the storefront).
+- `data-tenant`: The TWC tenant sent as the `X-Twc-Tenant` header. Used in both auth modes. Falls back to the bundled `TENANT_ID` if omitted.
+
+### Proxy auth mode
+
+When `data-auth="proxy"` is set, the widget does not use the bundled access token. Instead, on form submit it lazily fetches a tenant-scoped access token from the same-origin Shopify App Proxy endpoint `/apps/twc-sdk/auth/token` (Shopify signs and forwards the request). The token is cached for the page session and reused across submissions.
+
+Because the proxy only issues a token for a logged-in customer, if the token cannot be obtained the popup stays open and shows an inline "Please log in to your account to continue." message; submission is blocked until a token is available.
 
 ### Example
 
@@ -60,301 +68,5 @@ https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/cust
 https://api.au-aws.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest
 ```
 
-
-### Full Script
-
-```javascript
-// Access token for the API
-const ACCESS_TOKEN = "123"; // Replace `ACCESS_TOKEN` with your actual access token to authenticate API requests.
-const TENANT_ID = "victoria-woods"; // Replace `TENANT_ID` with your actual tenant ID.
-
-document.addEventListener("DOMContentLoaded", function () {
-   const wrapper = document.getElementById("notification-widget");
-   if (!wrapper) return;
-
-   // Define and apply styles for the popup and button
-   const styles = `
-        .notification-btn {
-            background-color: #fff;
-            border: 1px solid black;
-            color: black;
-            padding: 12px 24px;
-            text-align: center;
-            width: 100%;
-            cursor: pointer;
-            text-transform: uppercase;
-        }
-        #popup-body.overlay {
-            position: fixed;
-            z-index: 9998;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0, 0, 0, 0.7);
-            transition: opacity 200ms;
-            visibility: hidden;
-            opacity: 0;
-        }
-        #popup-wrapper {
-            margin: 70px auto;
-            z-index: 9999;
-            padding: 15px;
-            background: #fff;
-            border-radius: 5px;
-            max-width: 360px;
-            position: relative;
-        }
-        #popup-close {
-            position: absolute;
-            top: 5px;
-            right: 15px;
-            transition: all 200ms;
-            font-size: 30px;
-            font-weight: bold;
-            text-decoration: none;
-            color: #333;
-            cursor: pointer;
-        }
-        #popup-close:hover {
-            color: #d80606;
-        }
-        #popup-title {
-            margin: 0;
-            font-size: 20px;
-            max-width: 350px;
-            text-transform: uppercase;
-        }
-        #popup-text {
-            margin: 10px 0;
-            font-size: 14px;
-        }
-        #popup-form {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        #popup-form input {
-            padding: 0.475em 1em;
-            border: 1px solid #caced1;
-            border-radius: 0.25rem;
-            font-size: 1.15rem;
-            max-width: 100%;
-        }
-        #popup-form input::placeholder {
-            font-size: 1rem;
-        }
-        #popup-form button {
-            font-size: 0.85rem;
-            padding: 0.975em 1em;
-            font-weight: 600;
-            border: none;
-            text-transform: uppercase;
-            background: #aca475;
-            color: #fff;
-            cursor: pointer;
-        }
-        .custom-select {
-            position: relative;
-        }
-        .custom-select select {
-            appearance: none;
-            width: 100%;
-            font-size: 1.15rem;
-            padding: 0.475em 1em;
-            background-color: #fff;
-            border: 1px solid #caced1;
-            border-radius: 0.25rem;
-            color: #000;
-            cursor: pointer;
-        }
-        .custom-select::before,
-        .custom-select::after {
-            --size: 0.3rem;
-            content: "";
-            position: absolute;
-            right: 1rem;
-            pointer-events: none;
-        }
-        .custom-select::before {
-            border-left: var(--size) solid transparent;
-            border-right: var(--size) solid transparent;
-            border-bottom: var(--size) solid black;
-            top: 40%;
-        }
-        .custom-select::after {
-            border-left: var(--size) solid transparent;
-            border-right: var(--size) solid transparent;
-            border-top: var(--size) solid black;
-            top: 55%;
-        }
-    `;
-
-   const styleSheet = document.createElement("style");
-   styleSheet.type = "text/css";
-   styleSheet.innerText = styles;
-   document.head.appendChild(styleSheet);
-
-   // Create and append the overlay for the popup
-   const overlay = document.createElement("div");
-   overlay.innerHTML = `
-        <div id="popup-body" class="overlay">
-            <div id="popup-wrapper">
-                <h3 id="popup-title"></h3>
-                <span id="popup-close">&times;</span>
-                <div id="popup-text"></div>
-                <form id="popup-form">
-                    <div class="custom-select">
-                        <select name="select-size" required>
-                        </select>
-                    </div>
-                    <input name="email" placeholder="Email" type="email" required />
-                </form>
-            </div>
-        </div>
-    `;
-
-   wrapper.appendChild(overlay);
-
-   const popupBody = document.getElementById("popup-body");
-   const popupClose = document.getElementById("popup-close");
-   const popupOpenButton = document.getElementById("popup-open");
-   const popupTitle = document.getElementById("popup-title");
-   const popupText = document.getElementById("popup-text");
-   const sizeSelect = document.querySelector("select[name='select-size']");
-   const form = overlay.querySelector("#popup-form");
-
-   if (!popupBody || !popupClose || !popupOpenButton || !popupTitle || !sizeSelect) return;
-
-   // Parse fields and type to be included in the form from data attribute
-   const fields = JSON.parse(popupOpenButton.getAttribute("data-fields") || '["email"]');
-   const type = popupOpenButton.getAttribute("data-type") || "notify-me";
-   const typeConfig = {
-      "notify-me": {
-         text: "Register to receive a notification as soon as this item is back in stock",
-         buttonText: "Notify me",
-      },
-      "coming-soon": {
-         text: "Register your interest to hear more about this item",
-         buttonText: "Register Interest",
-      },
-   };
-
-   // Get product data from Shopify's global variable
-   const productData = window?.currentProduct;
-
-   // Map for form fields
-   popupText.innerText = typeConfig[type].text;
-
-   const fieldMap = {
-      email: `<input name="email" placeholder="Email" type="email" required />`,
-      mobile: `<input name="mobile" placeholder="Mobile" type="tel" required />`,
-      firstName: `<input name="firstName" placeholder="First name" type="text" required />`,
-      lastName: `<input name="lastName" placeholder="Last name" type="text" required />`,
-   };
-
-   // Add fields to the form based on the parsed fields
-   fields.forEach((field) => {
-      if (fieldMap[field]) {
-         form.insertAdjacentHTML("beforeend", fieldMap[field]);
-      }
-   });
-
-   form.insertAdjacentHTML("beforeend", `<div id="checkbox-wrapper"></div>`);
-   const checkboxWrapper = document.getElementById("checkbox-wrapper");
-   checkboxWrapper.insertAdjacentHTML("beforeend", `<input type="checkbox" name="mailList" id="mailList" />`);
-   checkboxWrapper.insertAdjacentHTML("beforeend", `<label for="mailList">Subscribe to our mailing list</label>`);
-   form.insertAdjacentHTML("beforeend", `<button type="submit">${typeConfig[type].buttonText}</button>`);
-
-   // Show/hide the popup
-   function showPopup() {
-      if (!productData) {
-         alert("Product data not found");
-         return;
-      }
-      // Set the popup title and populate the size dropdown
-      popupTitle.innerHTML = productData.title;
-      productData.variants.forEach((variant) => {
-         const option = document.createElement("option");
-         option.value = variant.title;
-         option.textContent = variant.title;
-         sizeSelect.appendChild(option);
-      });
-      popupBody.style.visibility = "visible";
-      popupBody.style.opacity = 1;
-   }
-
-   function hidePopup() {
-      popupBody.style.visibility = "hidden";
-      popupBody.style.opacity = 0;
-   }
-
-   popupOpenButton.addEventListener("click", showPopup);
-   popupClose.addEventListener("click", hidePopup);
-
-   // Form submission handler
-   if (form) {
-      form.addEventListener("submit", function (event) {
-         event.preventDefault();
-
-         const selectedSize = sizeSelect.value;
-         const selectedVariant = productData.variants.find((variant) => variant.title === selectedSize);
-
-         if (selectedVariant) {
-            const formData = {
-               variantRef: selectedVariant.id,
-               email: form.querySelector("input[name='email']").value,
-               subscribe: form.querySelector("input[name='mailList']").checked,
-            };
-
-            if (type === "coming-soon") {
-               formData.comingSoon = true;
-               // formData.productRef = productData.id;
-            } else {
-               formData.notifyMe = true;
-            }
-            if (fields.includes("firstName")) {
-               formData.firstName = form.querySelector("input[name='firstName']").value;
-            }
-            if (fields.includes("lastName")) {
-               formData.lastName = form.querySelector("input[name='lastName']").value;
-            }
-            if (fields.includes("mobile")) {
-               formData.mobile = form.querySelector("input[name='mobile']").value;
-               // formData.phone = form.querySelector("input[name='mobile']").value;
-            }
-
-            let url = `https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest`;
-
-            fetch(url, {
-               method: "POST",
-               headers: {
-                  "Content-Type": "application/json",
-                  Authorization: ACCESS_TOKEN,
-                  "X-Twc-Tenant": TENANT_ID,
-               },
-               body: JSON.stringify(formData),
-            })
-               .then((response) => {
-                  if (response.ok) {
-                     alert("Form submitted");
-                     hidePopup();
-                  } else {
-                     alert("Form submission failed");
-                  }
-               })
-               .catch((error) => {
-                  console.error("Error submitting form:", error);
-                  alert("Form submission failed");
-               });
-         } else {
-            alert("Selected variant not found");
-         }
-      });
-   }
-});
-
-```
-
 Replace `ACCESS_TOKEN` with your actual access token to authenticate API requests.
 Replace `TENANT_ID` with your actual tenant to authenticate API requests.

package/index.js

@@ -3,6 +3,189 @@ const ACCESS_TOKEN =
   'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJRWlJkS3JabXJmMEk3WkhXRUtqNWRLTEhQanFubWJFeV9iNmpSbHdya1drIn0.eyJleHAiOjE3MjMwMzI3NzIsImlhdCI6MTcyMzAyOTE3MiwianRpIjoiNDJiNGYwM2QtMDNiNS00NmZlLTk5YmItZDQ2NTdhNjk5NGNiIiwiaXNzIjoiaHR0cHM6Ly9hdXRoLmF1LWF3cy50aGV3aXNobGlzdC5pby9hdXRoL3JlYWxtcy90d2NNYWluIiwiYXVkIjoiYWNjb3VudCIsInN1YiI6IjI2YTIyNTAyLWRhNzQtNDhkMC1iZWFiLTgzY2E0YTlmMDdlOSIsInR5cCI6IkJlYXJlciIsImF6cCI6InR3Yy1wb3MtY2xpZW50Iiwic2Vzc2lvbl9zdGF0ZSI6IjQxYWQwMDc4LWVmYTItNGVjMi1hM2I2LTIzYjBkNDM3YjEzOCIsImFjciI6IjEiLCJhbGxvd2VkLW9yaWdpbnMiOlsiaHR0cHM6Ly9sb2NhbGhvc3QiXSwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbInR3Yy1wb3MtdXNlciIsIm9mZmxpbmVfYWNjZXNzIiwidHdjLXN0b3JlLW93bmVyIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6InRlbmFudGlkIHN0b3JlIHByb2ZpbGUgZW1haWwiLCJlbWFpbF92ZXJpZmllZCI6ZmFsc2UsInRlbmFudGlkIjoidmlrdG9yaWEtd29vZHMiLCJuYW1lIjoiTWF0dCBIYW1wc2hpcmUiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJtYXR0QHRoZXdpc2hsaXN0LmlvIiwic3RvcmUiOiIyMDUiLCJnaXZlbl9uYW1lIjoiTWF0dCIsImZhbWlseV9uYW1lIjoiSGFtcHNoaXJlIiwiZW1haWwiOiJtYXR0QHRoZXdpc2hsaXN0LmlvIn0.iZkMgwH74njjXUWvImkJomHYr91Lr8ZGrZGwslEGcV3vbNuoNc5CocvNWW476o-LoSh-LsKf-MLiYN1XvOuPDF3fGoGCEbMh6_M0RJcrhVWogkj81fx4ukvDPCFIjgoDCV9WIuehV9dsSWa7E0irZeE6MUVhLwRIaTzKtxgzUUKrAqBtI_HKpyo8TUGQBiYlrc85QFUyuoKbKg-QaRn_SObRLDB8ooIBJvIlgklXQt1ZYBM2HUOc5L1bAQwfzcrWEvl6eYiQHXCSPqS0rPGoaGC6v5ydBo9VMxtVHGladDHLrO3Gt2BnIGMBoYrKTAmt7j0KABwPyB3CmAIwj_pOBQ'; // Replace `ACCESS_TOKEN` with your actual access token to authenticate API requests.
 const TENANT_ID = 'victoria-woods'; // Replace `TENANT_ID` with your actual tenant ID.
 
+// Session-cached access token obtained from the Shopify App Proxy (proxy auth mode).
+let cachedProxyToken = null;
+
+// Fetch a tenant-scoped access token from the Shopify App Proxy.
+// The path is relative/same-origin, so Shopify's App Proxy layer appends and
+// signs `shop`, `logged_in_customer_id`, `timestamp`, and `signature`.
+// Returns the access token string, or null on failure (e.g. customer not logged in).
+async function getProxyAccessToken() {
+  if (cachedProxyToken) return cachedProxyToken;
+  try {
+    const response = await fetch('/apps/twc-sdk/auth/token', {
+      method: 'GET',
+      headers: { Accept: 'application/json' },
+    });
+    const body = await response.json().catch(() => null);
+    if (
+      response.ok &&
+      body &&
+      body.success &&
+      body.data &&
+      body.data.access_token
+    ) {
+      cachedProxyToken = body.data.access_token;
+      return cachedProxyToken;
+    }
+    return null;
+  } catch (error) {
+    console.error('Error fetching proxy access token:', error);
+    return null;
+  }
+}
+
+const COUNTRY_CODES = [
+  { code: 'AF', name: 'Afghanistan' }, { code: 'AX', name: 'Åland Islands' },
+  { code: 'AL', name: 'Albania' }, { code: 'DZ', name: 'Algeria' },
+  { code: 'AS', name: 'American Samoa' }, { code: 'AD', name: 'Andorra' },
+  { code: 'AO', name: 'Angola' }, { code: 'AI', name: 'Anguilla' },
+  { code: 'AG', name: 'Antigua and Barbuda' }, { code: 'AR', name: 'Argentina' },
+  { code: 'AM', name: 'Armenia' }, { code: 'AW', name: 'Aruba' },
+  { code: 'AU', name: 'Australia' }, { code: 'AT', name: 'Austria' },
+  { code: 'AZ', name: 'Azerbaijan' }, { code: 'BS', name: 'Bahamas' },
+  { code: 'BH', name: 'Bahrain' }, { code: 'BD', name: 'Bangladesh' },
+  { code: 'BB', name: 'Barbados' }, { code: 'BY', name: 'Belarus' },
+  { code: 'BE', name: 'Belgium' }, { code: 'BZ', name: 'Belize' },
+  { code: 'BJ', name: 'Benin' }, { code: 'BM', name: 'Bermuda' },
+  { code: 'BT', name: 'Bhutan' }, { code: 'BO', name: 'Bolivia' },
+  { code: 'BA', name: 'Bosnia and Herzegovina' }, { code: 'BW', name: 'Botswana' },
+  { code: 'BR', name: 'Brazil' }, { code: 'BN', name: 'Brunei' },
+  { code: 'BG', name: 'Bulgaria' }, { code: 'BF', name: 'Burkina Faso' },
+  { code: 'BI', name: 'Burundi' }, { code: 'CV', name: 'Cabo Verde' },
+  { code: 'KH', name: 'Cambodia' }, { code: 'CM', name: 'Cameroon' },
+  { code: 'CA', name: 'Canada' }, { code: 'KY', name: 'Cayman Islands' },
+  { code: 'CF', name: 'Central African Republic' }, { code: 'TD', name: 'Chad' },
+  { code: 'CL', name: 'Chile' }, { code: 'CN', name: 'China' },
+  { code: 'CO', name: 'Colombia' }, { code: 'KM', name: 'Comoros' },
+  { code: 'CG', name: 'Congo' }, { code: 'CD', name: 'Congo, DR' },
+  { code: 'CK', name: 'Cook Islands' }, { code: 'CR', name: 'Costa Rica' },
+  { code: 'HR', name: 'Croatia' }, { code: 'CU', name: 'Cuba' },
+  { code: 'CW', name: 'Curaçao' }, { code: 'CY', name: 'Cyprus' },
+  { code: 'CZ', name: 'Czech Republic' }, { code: 'DK', name: 'Denmark' },
+  { code: 'DJ', name: 'Djibouti' }, { code: 'DM', name: 'Dominica' },
+  { code: 'DO', name: 'Dominican Republic' }, { code: 'EC', name: 'Ecuador' },
+  { code: 'EG', name: 'Egypt' }, { code: 'SV', name: 'El Salvador' },
+  { code: 'GQ', name: 'Equatorial Guinea' }, { code: 'ER', name: 'Eritrea' },
+  { code: 'EE', name: 'Estonia' }, { code: 'SZ', name: 'Eswatini' },
+  { code: 'ET', name: 'Ethiopia' }, { code: 'FO', name: 'Faroe Islands' },
+  { code: 'FJ', name: 'Fiji' }, { code: 'FI', name: 'Finland' },
+  { code: 'FR', name: 'France' }, { code: 'GF', name: 'French Guiana' },
+  { code: 'PF', name: 'French Polynesia' }, { code: 'GA', name: 'Gabon' },
+  { code: 'GM', name: 'Gambia' }, { code: 'GE', name: 'Georgia' },
+  { code: 'DE', name: 'Germany' }, { code: 'GH', name: 'Ghana' },
+  { code: 'GI', name: 'Gibraltar' }, { code: 'GR', name: 'Greece' },
+  { code: 'GL', name: 'Greenland' }, { code: 'GD', name: 'Grenada' },
+  { code: 'GP', name: 'Guadeloupe' }, { code: 'GU', name: 'Guam' },
+  { code: 'GT', name: 'Guatemala' }, { code: 'GN', name: 'Guinea' },
+  { code: 'GW', name: 'Guinea-Bissau' }, { code: 'GY', name: 'Guyana' },
+  { code: 'HT', name: 'Haiti' }, { code: 'HN', name: 'Honduras' },
+  { code: 'HK', name: 'Hong Kong' }, { code: 'HU', name: 'Hungary' },
+  { code: 'IS', name: 'Iceland' }, { code: 'IN', name: 'India' },
+  { code: 'ID', name: 'Indonesia' }, { code: 'IR', name: 'Iran' },
+  { code: 'IQ', name: 'Iraq' }, { code: 'IE', name: 'Ireland' },
+  { code: 'IM', name: 'Isle of Man' }, { code: 'IL', name: 'Israel' },
+  { code: 'IT', name: 'Italy' }, { code: 'JM', name: 'Jamaica' },
+  { code: 'JP', name: 'Japan' }, { code: 'JE', name: 'Jersey' },
+  { code: 'JO', name: 'Jordan' }, { code: 'KZ', name: 'Kazakhstan' },
+  { code: 'KE', name: 'Kenya' }, { code: 'KI', name: 'Kiribati' },
+  { code: 'KR', name: 'Korea, South' }, { code: 'XK', name: 'Kosovo' },
+  { code: 'KW', name: 'Kuwait' }, { code: 'KG', name: 'Kyrgyzstan' },
+  { code: 'LA', name: 'Laos' }, { code: 'LV', name: 'Latvia' },
+  { code: 'LB', name: 'Lebanon' }, { code: 'LS', name: 'Lesotho' },
+  { code: 'LR', name: 'Liberia' }, { code: 'LY', name: 'Libya' },
+  { code: 'LI', name: 'Liechtenstein' }, { code: 'LT', name: 'Lithuania' },
+  { code: 'LU', name: 'Luxembourg' }, { code: 'MO', name: 'Macao' },
+  { code: 'MG', name: 'Madagascar' }, { code: 'MW', name: 'Malawi' },
+  { code: 'MY', name: 'Malaysia' }, { code: 'MV', name: 'Maldives' },
+  { code: 'ML', name: 'Mali' }, { code: 'MT', name: 'Malta' },
+  { code: 'MH', name: 'Marshall Islands' }, { code: 'MQ', name: 'Martinique' },
+  { code: 'MR', name: 'Mauritania' }, { code: 'MU', name: 'Mauritius' },
+  { code: 'MX', name: 'Mexico' }, { code: 'FM', name: 'Micronesia' },
+  { code: 'MD', name: 'Moldova' }, { code: 'MC', name: 'Monaco' },
+  { code: 'MN', name: 'Mongolia' }, { code: 'ME', name: 'Montenegro' },
+  { code: 'MS', name: 'Montserrat' }, { code: 'MA', name: 'Morocco' },
+  { code: 'MZ', name: 'Mozambique' }, { code: 'MM', name: 'Myanmar' },
+  { code: 'NA', name: 'Namibia' }, { code: 'NR', name: 'Nauru' },
+  { code: 'NP', name: 'Nepal' }, { code: 'NL', name: 'Netherlands' },
+  { code: 'NC', name: 'New Caledonia' }, { code: 'NZ', name: 'New Zealand' },
+  { code: 'NI', name: 'Nicaragua' }, { code: 'NE', name: 'Niger' },
+  { code: 'NG', name: 'Nigeria' }, { code: 'NU', name: 'Niue' },
+  { code: 'MK', name: 'North Macedonia' }, { code: 'NO', name: 'Norway' },
+  { code: 'OM', name: 'Oman' }, { code: 'PK', name: 'Pakistan' },
+  { code: 'PW', name: 'Palau' }, { code: 'PS', name: 'Palestine' },
+  { code: 'PA', name: 'Panama' }, { code: 'PG', name: 'Papua New Guinea' },
+  { code: 'PY', name: 'Paraguay' }, { code: 'PE', name: 'Peru' },
+  { code: 'PH', name: 'Philippines' }, { code: 'PL', name: 'Poland' },
+  { code: 'PT', name: 'Portugal' }, { code: 'PR', name: 'Puerto Rico' },
+  { code: 'QA', name: 'Qatar' }, { code: 'RE', name: 'Réunion' },
+  { code: 'RO', name: 'Romania' },
+  { code: 'RW', name: 'Rwanda' }, { code: 'KN', name: 'Saint Kitts and Nevis' },
+  { code: 'LC', name: 'Saint Lucia' }, { code: 'VC', name: 'Saint Vincent and the Grenadines' },
+  { code: 'WS', name: 'Samoa' }, { code: 'SM', name: 'San Marino' },
+  { code: 'SA', name: 'Saudi Arabia' }, { code: 'SN', name: 'Senegal' },
+  { code: 'RS', name: 'Serbia' }, { code: 'SC', name: 'Seychelles' },
+  { code: 'SL', name: 'Sierra Leone' }, { code: 'SG', name: 'Singapore' },
+  { code: 'SK', name: 'Slovakia' }, { code: 'SI', name: 'Slovenia' },
+  { code: 'SB', name: 'Solomon Islands' }, { code: 'SO', name: 'Somalia' },
+  { code: 'ZA', name: 'South Africa' }, { code: 'SS', name: 'South Sudan' },
+  { code: 'ES', name: 'Spain' }, { code: 'LK', name: 'Sri Lanka' },
+  { code: 'SD', name: 'Sudan' }, { code: 'SR', name: 'Suriname' },
+  { code: 'SE', name: 'Sweden' }, { code: 'CH', name: 'Switzerland' },
+  { code: 'SY', name: 'Syria' }, { code: 'TW', name: 'Taiwan' },
+  { code: 'TJ', name: 'Tajikistan' }, { code: 'TZ', name: 'Tanzania' },
+  { code: 'TH', name: 'Thailand' }, { code: 'TL', name: 'Timor-Leste' },
+  { code: 'TG', name: 'Togo' }, { code: 'TO', name: 'Tonga' },
+  { code: 'TT', name: 'Trinidad and Tobago' }, { code: 'TN', name: 'Tunisia' },
+  { code: 'TR', name: 'Turkey' }, { code: 'TM', name: 'Turkmenistan' },
+  { code: 'TC', name: 'Turks and Caicos Islands' }, { code: 'TV', name: 'Tuvalu' },
+  { code: 'UG', name: 'Uganda' }, { code: 'UA', name: 'Ukraine' },
+  { code: 'AE', name: 'United Arab Emirates' }, { code: 'GB', name: 'United Kingdom' },
+  { code: 'US', name: 'United States' }, { code: 'UY', name: 'Uruguay' },
+  { code: 'UZ', name: 'Uzbekistan' }, { code: 'VU', name: 'Vanuatu' },
+  { code: 'VE', name: 'Venezuela' }, { code: 'VN', name: 'Vietnam' },
+  { code: 'VG', name: 'Virgin Islands, British' }, { code: 'VI', name: 'Virgin Islands, U.S.' },
+  { code: 'YE', name: 'Yemen' }, { code: 'ZM', name: 'Zambia' },
+  { code: 'ZW', name: 'Zimbabwe' },
+];
+
+// Detect country/province/market context using priority fallback chain
+function detectCountryContext() {
+  const ctx = { countryCode: null, provinceCode: null, marketId: null };
+
+  // Priority 1: Shopify localization/country context
+  const shopify = window.Shopify;
+  if (shopify) {
+    if (typeof shopify.country === 'string') ctx.countryCode = shopify.country;
+    const mkt = shopify.markets?.currentMarket;
+    if (mkt) {
+      if (mkt.countryCode) ctx.countryCode = mkt.countryCode;
+      if (mkt.id != null) ctx.marketId = String(mkt.id);
+    }
+    if (!ctx.countryCode && typeof shopify.locale === 'string') {
+      const parts = shopify.locale.split('-');
+      if (parts.length > 1) ctx.countryCode = parts[parts.length - 1].toUpperCase();
+    }
+  }
+
+  // Priority 2: Existing customer shipping country
+  if (!ctx.countryCode || !ctx.provinceCode) {
+    const addr = window.customer?.default_address;
+    if (addr) {
+      if (!ctx.countryCode && addr.country_code) ctx.countryCode = addr.country_code;
+      if (!ctx.provinceCode && addr.province_code) ctx.provinceCode = addr.province_code;
+    }
+  }
+
+  // Priority 3: Browser locale fallback
+  if (!ctx.countryCode) {
+    const parts = (navigator.language || '').split('-');
+    if (parts.length > 1) ctx.countryCode = parts[parts.length - 1].toUpperCase();
+  }
+
+  return ctx;
+}
+
 document.addEventListener('DOMContentLoaded', function () {
   const wrapper = document.getElementById('notification-widget');
   if (!wrapper) return;
@@ -147,6 +330,7 @@ document.addEventListener('DOMContentLoaded', function () {
                 <h3 id="popup-title"></h3>
                 <span id="popup-close">&times;</span>
                 <div id="popup-text"></div>
+                <div id="popup-login-msg" style="display:none; color:#d80606; font-size:14px; margin:10px 0;">Please log in to your account to continue.</div>
                 <form id="popup-form">
                     <div class="custom-select">
                         <select name="select-size" required>
@@ -165,6 +349,7 @@ document.addEventListener('DOMContentLoaded', function () {
   const popupOpenButton = document.getElementById('popup-open');
   const popupTitle = document.getElementById('popup-title');
   const popupText = document.getElementById('popup-text');
+  const loginMsg = document.getElementById('popup-login-msg');
   const sizeSelect = document.querySelector("select[name='select-size']");
   const form = overlay.querySelector('#popup-form');
 
@@ -182,6 +367,10 @@ document.addEventListener('DOMContentLoaded', function () {
     popupOpenButton.getAttribute('data-fields') || '["email"]',
   );
   const type = popupOpenButton.getAttribute('data-type') || 'notify-me';
+  // Auth mode: 'token' (default, hardcoded ACCESS_TOKEN) or 'proxy' (Shopify App Proxy).
+  const authMode = popupOpenButton.getAttribute('data-auth') || 'token';
+  // Tenant for X-Twc-Tenant header; used in both auth modes.
+  const tenant = popupOpenButton.getAttribute('data-tenant') || TENANT_ID;
   const typeConfig = {
     'notify-me': {
       text: 'Register to receive a notification as soon as this item is back in stock',
@@ -196,14 +385,25 @@ document.addEventListener('DOMContentLoaded', function () {
   // Get product data from Shopify's global variable
   const productData = window?.currentProduct;
 
+  const countryCtx = detectCountryContext();
+  const resolvedMarketId =
+    popupOpenButton.getAttribute('data-market-id') || countryCtx.marketId;
+
   // Map for form fields
   popupText.innerText = typeConfig[type].text;
 
+  const countryOptions = COUNTRY_CODES.map(
+    (c) =>
+      `<option value="${c.code}"${c.code === countryCtx.countryCode ? ' selected' : ''}>${c.name}</option>`,
+  ).join('');
+
   const fieldMap = {
     email: `<input name="email" placeholder="Email" type="email" required />`,
     mobile: `<input name="mobile" placeholder="Mobile" type="tel" required />`,
     firstName: `<input name="firstName" placeholder="First name" type="text" required />`,
     lastName: `<input name="lastName" placeholder="Last name" type="text" required />`,
+    countryCode: `<div class="custom-select"><select name="countryCode"><option value="">Select country</option>${countryOptions}</select></div>`,
+    provinceCode: `<input name="provinceCode" placeholder="State / Province code" type="text" value="${countryCtx.provinceCode || ''}" />`,
   };
 
   // Add fields to the form based on the parsed fields
@@ -256,7 +456,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
   // Form submission handler
   if (form) {
-    form.addEventListener('submit', function (event) {
+    form.addEventListener('submit', async function (event) {
       event.preventDefault();
 
       const selectedSize = sizeSelect.value;
@@ -293,14 +493,43 @@ document.addEventListener('DOMContentLoaded', function () {
           // formData.phone = form.querySelector("input[name='mobile']").value;
         }
 
+        // Country / province / market — manual fields take precedence over auto-detected values
+        if (fields.includes('countryCode')) {
+          const selected = form.querySelector("select[name='countryCode']").value;
+          if (selected) formData.countryCode = selected;
+        } else if (countryCtx.countryCode) {
+          formData.countryCode = countryCtx.countryCode;
+        }
+
+        if (fields.includes('provinceCode')) {
+          const val = form.querySelector("input[name='provinceCode']").value;
+          if (val) formData.provinceCode = val;
+        } else if (countryCtx.provinceCode) {
+          formData.provinceCode = countryCtx.provinceCode;
+        }
+
+        if (resolvedMarketId) formData.marketId = resolvedMarketId;
+
+        // Resolve the Authorization token based on auth mode.
+        let authToken = ACCESS_TOKEN;
+        if (authMode === 'proxy') {
+          const proxyToken = await getProxyAccessToken();
+          if (!proxyToken) {
+            loginMsg.style.display = 'block';
+            return;
+          }
+          loginMsg.style.display = 'none';
+          authToken = `Bearer ${proxyToken}`;
+        }
+
         let url = `https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest`;
 
         fetch(url, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
-            Authorization: ACCESS_TOKEN,
-            'X-Twc-Tenant': TENANT_ID,
+            Authorization: authToken,
+            'X-Twc-Tenant': tenant,
           },
           body: JSON.stringify(formData),
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notify-me-wl",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"