notify-me-wl 1.4.2 → 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
 

package/index.js

@@ -3,6 +3,38 @@ 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' },
@@ -298,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>
@@ -316,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');
 
@@ -333,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',
@@ -418,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;
@@ -472,14 +510,26 @@ document.addEventListener('DOMContentLoaded', function () {
 
         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.2",
+  "version": "1.4.3",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"