notify-me-wl 1.4.3 → 1.4.4

package/README.md

@@ -3,10 +3,13 @@
 This JavaScript widget allows users to register their interest in a product that is either "coming soon" or "out of stock" (aka "notify me"). Depending on the `data-type` attribute provided, the widget will display appropriate messages and functionality.
 
 #### Features:
-- Dynamically display a form to collect user information (mobile, first name, last name).
-- Adjust form and button text based on the widget type (`notify-me` or `coming-soon`).
-- Submit user data to a specified API endpoint with email or mobile as a path parameter and appropriate query parameters.
-- An option for the user to subscribe to the database (opt-in)
+- Clean, centered modal that inherits the host store's font and stays out of the theme's way (all styles are namespaced under `#twc-nm-overlay`).
+- Dynamically display a labeled form to collect user information (email, mobile, first/last name, country, province).
+- Adjust form copy and button text based on the widget type (`notify-me` or `coming-soon`).
+- Inline success/error feedback (no browser `alert`s); the submit button shows a "Sending…" loading state.
+- Closes on the × button, clicking the backdrop, or pressing `Esc`; locks background scroll while open and respects `prefers-reduced-motion`.
+- Optional email/SMS marketing opt-ins.
+- Two auth modes: bundled server token (default) or Shopify App Proxy — see [Configuration](#configuration).
 
 ### Installation
 
@@ -27,7 +30,7 @@ Add a button to your HTML where you want the widget to appear. The button should
 
 ### Configuration
 
-- `data-fields`: A JSON array specifying the fields to include in the form. Possible values are `"mobile"`, `"firstName"`, and `"lastName"`.
+- `data-fields`: A JSON array specifying the optional fields to include in the form. Possible values are `"email"`, `"mobile"`, `"firstName"`, `"lastName"`, `"countryCode"`, and `"provinceCode"`. Defaults to `["email"]`. (A required Size selector is always shown and populated from the product's variants.)
 - `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.
@@ -52,10 +55,10 @@ Because the proxy only issues a token for a logged-in customer, if the token can
 ### How It Works
 
 1. **Initialization**: The script listens for the `DOMContentLoaded` event to initialize the widget.
-2. **Styles Injection**: It injects necessary styles for the modal and form elements.
+2. **Styles Injection**: It injects the modal/form styles, all namespaced under `#twc-nm-overlay` so they don't collide with the host theme.
 3. **Modal Creation**: Creates the modal structure and appends it to the `notification-widget` div.
-4. **Dynamic Content**: Based on the `data-type`, it sets the appropriate messages and button text.
-5. **Form Submission**: Collects form data and submits it to the API with the mandatory email field and other possible fields.
+4. **Dynamic Content**: Based on the `data-type`, it sets the appropriate copy and button text, and builds the fields listed in `data-fields` plus the always-present Size selector.
+5. **Form Submission**: On submit, the button enters a "Sending…" state, the configured auth token is resolved, and the form data is POSTed to the API. The result is shown inline (success message then auto-close, or an error message); the popup is never closed on failure.
 
 ### API Request Example 
 

package/index.html

@@ -6,16 +6,29 @@
       <title>Notify me</title>
       <style>
          body {
-            height: 100vh;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             margin: 100px auto;
-            width: 300px;
+            max-width: 320px;
          }
       </style>
    </head>
    <body>
       <div id="notification-widget">
-         <button id="popup-open" class="notification-btn" type="button" data-type="notify-me" data-fields='["firstName", "lastName"]'>Notify Me - Join Waitlist</button>
-     </div>
+         <button id="popup-open" class="notification-btn" type="button" data-type="notify-me" data-fields='["email", "firstName", "lastName"]'>Notify Me - Join Waitlist</button>
+      </div>
+
+      <!-- Mock product so the demo popup can populate (Shopify provides this on the storefront). -->
+      <script>
+         window.currentProduct = {
+            id: 123456789,
+            title: 'Sample Product',
+            variants: [
+               { id: 1, title: 'Small' },
+               { id: 2, title: 'Medium' },
+               { id: 3, title: 'Large' },
+            ],
+         };
+      </script>
+      <script src="index.js"></script>
    </body>
-   <script src="/index.js"></script>
 </html>

package/index.js

@@ -190,130 +190,200 @@ document.addEventListener('DOMContentLoaded', function () {
   const wrapper = document.getElementById('notification-widget');
   if (!wrapper) return;
 
-  // Define and apply styles for the popup and button
+  // Define and apply styles. Everything is namespaced under #twc-nm-overlay and
+  // uses `font: inherit` so the widget blends into the host store's theme
+  // without colliding with (or being broken by) the store's own CSS.
   const styles = `
         .notification-btn {
-            background-color: #fff;
-            border: 1px solid black;
-            color: black;
+            display: inline-block;
+            width: 100%;
             padding: 12px 24px;
+            background: #fff;
+            border: 1px solid #111827;
+            border-radius: 8px;
+            color: #111827;
+            font: inherit;
             text-align: center;
-            width: 100%;
-            cursor: pointer;
             text-transform: uppercase;
+            cursor: pointer;
+        }
+        .notification-btn:hover {
+            background: #111827;
+            color: #fff;
         }
-        #popup-body.overlay {
+        #twc-nm-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;
+            inset: 0;
+            z-index: 99999;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 16px;
+            background: rgba(17, 17, 17, 0.55);
             opacity: 0;
+            visibility: hidden;
+            transition: opacity 200ms ease;
         }
-        #popup-wrapper {
-            margin: 70px auto;
-            z-index: 9999;
-            padding: 15px;
-            background: #fff;
-            border-radius: 5px;
-            max-width: 360px;
+        #twc-nm-overlay.is-open {
+            opacity: 1;
+            visibility: visible;
+        }
+        #twc-nm-overlay * {
+            box-sizing: border-box;
+        }
+        #twc-nm-overlay .twc-nm-card {
             position: relative;
+            width: 100%;
+            max-width: 400px;
+            max-height: calc(100vh - 32px);
+            overflow-y: auto;
+            padding: 24px;
+            background: #fff;
+            color: #111827;
+            border-radius: 12px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
+            font: inherit;
+            transform: translateY(8px);
+            transition: transform 200ms ease;
+        }
+        #twc-nm-overlay.is-open .twc-nm-card {
+            transform: translateY(0);
         }
-        #popup-close {
+        #twc-nm-overlay .twc-nm-close {
             position: absolute;
-            top: 5px;
-            right: 15px;
-            transition: all 200ms;
-            font-size: 30px;
-            font-weight: bold;
-            text-decoration: none;
-            color: #333;
+            top: 12px;
+            right: 12px;
+            width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+            border: none;
+            background: transparent;
+            border-radius: 6px;
+            font-size: 24px;
+            line-height: 1;
+            color: #6b7280;
             cursor: pointer;
         }
-        #popup-close:hover {
-            color: #d80606;
+        #twc-nm-overlay .twc-nm-close:hover {
+            background: #f3f4f6;
+            color: #111827;
         }
-        #popup-title {
-            margin: 0;
-            font-size: 20px;
-            max-width: 350px;
-            text-transform: uppercase;
+        #twc-nm-overlay .twc-nm-title {
+            margin: 0 32px 4px 0;
+            font-size: 18px;
+            font-weight: 600;
         }
-        #popup-text {
-            margin: 10px 0;
+        #twc-nm-overlay .twc-nm-text {
+            margin: 0 0 16px;
             font-size: 14px;
+            line-height: 1.5;
+            color: #6b7280;
         }
-        #popup-form {
+        #twc-nm-overlay .twc-nm-form {
             display: flex;
             flex-direction: column;
-            gap: 10px;
+            gap: 14px;
         }
-        #popup-form input {
-            padding: 0.475em 1em;
-            border: 1px solid #caced1;
-            border-radius: 0.25rem;
-            font-size: 1.15rem;
-            max-width: 100%;
+        #twc-nm-overlay .twc-nm-field {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
         }
-        #popup-form input::placeholder {
-            font-size: 1rem;
+        #twc-nm-overlay .twc-nm-label {
+            font-size: 13px;
+            font-weight: 500;
+            color: #374151;
         }
-        #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;
+        #twc-nm-overlay .twc-nm-input,
+        #twc-nm-overlay .twc-nm-select {
+            width: 100%;
+            padding: 10px 12px;
+            font-size: 14px;
+            font-family: inherit;
+            color: #111827;
+            background: #fff;
+            border: 1px solid #e5e7eb;
+            border-radius: 8px;
         }
-      .checkbox-item {
-         display: flex;
-         align-items: center;
-         gap: 8px;
-      }
-      .checkbox-item input[type="checkbox"] {
-         width: auto;
-         margin: 0;
-      }
-        .custom-select {
-            position: relative;
+        #twc-nm-overlay .twc-nm-input:focus,
+        #twc-nm-overlay .twc-nm-select:focus {
+            outline: none;
+            border-color: #111827;
+            box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
         }
-        .custom-select select {
+        #twc-nm-overlay .twc-nm-select {
             appearance: none;
+            -webkit-appearance: none;
+            padding-right: 36px;
+            cursor: pointer;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right 12px center;
+        }
+        #twc-nm-overlay .twc-nm-checks {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        #twc-nm-overlay .twc-nm-check {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 13px;
+            color: #374151;
+            cursor: pointer;
+        }
+        #twc-nm-overlay .twc-nm-check input {
+            width: 16px;
+            height: 16px;
+            margin: 0;
+            accent-color: #111827;
+        }
+        #twc-nm-overlay .twc-nm-status {
+            font-size: 13px;
+            line-height: 1.5;
+            padding: 10px 12px;
+            border-radius: 8px;
+        }
+        #twc-nm-overlay .twc-nm-status--error {
+            color: #b91c1c;
+            background: #fef2f2;
+        }
+        #twc-nm-overlay .twc-nm-status--success {
+            color: #15803d;
+            background: #f0fdf4;
+        }
+        #twc-nm-overlay .twc-nm-submit {
             width: 100%;
-            font-size: 1.15rem;
-            padding: 0.475em 1em;
-            background-color: #fff;
-            border: 1px solid #caced1;
-            border-radius: 0.25rem;
-            color: #000;
+            padding: 12px 16px;
+            font-size: 14px;
+            font-weight: 600;
+            font-family: inherit;
+            color: #fff;
+            background: #111827;
+            border: none;
+            border-radius: 8px;
             cursor: pointer;
+            transition: background 150ms ease;
         }
-        .custom-select::before,
-        .custom-select::after {
-            --size: 0.3rem;
-            content: "";
-            position: absolute;
-            right: 1rem;
-            pointer-events: none;
+        #twc-nm-overlay .twc-nm-submit:hover {
+            background: #374151;
         }
-        .custom-select::before {
-            border-left: var(--size) solid transparent;
-            border-right: var(--size) solid transparent;
-            border-bottom: var(--size) solid black;
-            top: 40%;
+        #twc-nm-overlay .twc-nm-submit:disabled {
+            opacity: 0.6;
+            cursor: default;
         }
-        .custom-select::after {
-            border-left: var(--size) solid transparent;
-            border-right: var(--size) solid transparent;
-            border-top: var(--size) solid black;
-            top: 55%;
+        @media (prefers-reduced-motion: reduce) {
+            #twc-nm-overlay,
+            #twc-nm-overlay .twc-nm-card {
+                transition: none;
+            }
+            #twc-nm-overlay .twc-nm-card {
+                transform: none;
+            }
         }
     `;
 
@@ -325,18 +395,18 @@ document.addEventListener('DOMContentLoaded', function () {
   // 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>
-                <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>
+        <div id="twc-nm-overlay" role="dialog" aria-modal="true" aria-labelledby="popup-title">
+            <div class="twc-nm-card">
+                <button type="button" id="popup-close" class="twc-nm-close" aria-label="Close">&times;</button>
+                <h2 id="popup-title" class="twc-nm-title"></h2>
+                <p id="popup-text" class="twc-nm-text"></p>
+                <form id="popup-form" class="twc-nm-form">
+                    <div class="twc-nm-field">
+                        <label class="twc-nm-label" for="twc-nm-size">Size</label>
+                        <select class="twc-nm-select" id="twc-nm-size" name="select-size" required>
+                            <option value="" disabled selected>Select a size</option>
                         </select>
                     </div>
-                    <input name="email" placeholder="Email" type="email" required />
                 </form>
             </div>
         </div>
@@ -344,17 +414,16 @@ document.addEventListener('DOMContentLoaded', function () {
 
   wrapper.appendChild(overlay);
 
-  const popupBody = document.getElementById('popup-body');
+  const overlayEl = document.getElementById('twc-nm-overlay');
   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 loginMsg = document.getElementById('popup-login-msg');
   const sizeSelect = document.querySelector("select[name='select-size']");
-  const form = overlay.querySelector('#popup-form');
+  const form = document.getElementById('popup-form');
 
   if (
-    !popupBody ||
+    !overlayEl ||
     !popupClose ||
     !popupOpenButton ||
     !popupTitle ||
@@ -374,7 +443,7 @@ document.addEventListener('DOMContentLoaded', function () {
   const typeConfig = {
     'notify-me': {
       text: 'Register to receive a notification as soon as this item is back in stock',
-      buttonText: 'Notify me',
+      buttonText: 'Notify Me',
     },
     'coming-soon': {
       text: 'Register your interest to hear more about this item',
@@ -397,157 +466,228 @@ document.addEventListener('DOMContentLoaded', function () {
       `<option value="${c.code}"${c.code === countryCtx.countryCode ? ' selected' : ''}>${c.name}</option>`,
   ).join('');
 
+  // Wrap an input/select in a labeled field row.
+  const field = (id, label, control) =>
+    `<div class="twc-nm-field"><label class="twc-nm-label" for="${id}">${label}</label>${control}</div>`;
+
   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 || ''}" />`,
+    email: field(
+      'twc-nm-email',
+      'Email',
+      `<input class="twc-nm-input" id="twc-nm-email" name="email" type="email" placeholder="you@example.com" required />`,
+    ),
+    mobile: field(
+      'twc-nm-mobile',
+      'Mobile',
+      `<input class="twc-nm-input" id="twc-nm-mobile" name="mobile" type="tel" placeholder="Mobile number" required />`,
+    ),
+    firstName: field(
+      'twc-nm-firstname',
+      'First name',
+      `<input class="twc-nm-input" id="twc-nm-firstname" name="firstName" type="text" placeholder="First name" required />`,
+    ),
+    lastName: field(
+      'twc-nm-lastname',
+      'Last name',
+      `<input class="twc-nm-input" id="twc-nm-lastname" name="lastName" type="text" placeholder="Last name" required />`,
+    ),
+    countryCode: field(
+      'twc-nm-country',
+      'Country',
+      `<select class="twc-nm-select" id="twc-nm-country" name="countryCode"><option value="">Select country</option>${countryOptions}</select>`,
+    ),
+    provinceCode: field(
+      'twc-nm-province',
+      'State / Province',
+      `<input class="twc-nm-input" id="twc-nm-province" name="provinceCode" type="text" placeholder="State / province code" value="${countryCtx.provinceCode || ''}" />`,
+    ),
   };
 
   // Add fields to the form based on the parsed fields
-  fields.forEach((field) => {
-    if (fieldMap[field]) {
-      form.insertAdjacentHTML('beforeend', fieldMap[field]);
+  fields.forEach((name) => {
+    if (fieldMap[name]) {
+      form.insertAdjacentHTML('beforeend', fieldMap[name]);
     }
   });
 
-  form.insertAdjacentHTML('beforeend', `<div id="checkbox-wrapper"></div>`);
-  const checkboxWrapper = document.getElementById('checkbox-wrapper');
-  checkboxWrapper.insertAdjacentHTML(
+  form.insertAdjacentHTML(
     'beforeend',
-    `<div class="checkbox-item"><input type="checkbox" name="mailList" id="mailList" /><label for="mailList">Subscribe to our mailing list</label></div>`,
+    `<div class="twc-nm-checks">
+        <label class="twc-nm-check"><input type="checkbox" name="mailList" /> Email me store updates</label>
+        <label class="twc-nm-check"><input type="checkbox" name="mailListSms" /> Text me store updates</label>
+    </div>`,
   );
-  checkboxWrapper.insertAdjacentHTML(
+  form.insertAdjacentHTML(
     'beforeend',
-    `<div class="checkbox-item"><input type="checkbox" name="mailListSms" id="mailListSms" /><label for="mailListSms">Subscribe to our mailing list via SMS</label></div>`,
+    `<div id="popup-status" class="twc-nm-status" role="status" aria-live="polite" hidden></div>`,
   );
   form.insertAdjacentHTML(
     'beforeend',
-    `<button type="submit">${typeConfig[type].buttonText}</button>`,
+    `<button type="submit" class="twc-nm-submit">${typeConfig[type].buttonText}</button>`,
   );
 
-  // Show/hide the popup
+  const popupStatus = document.getElementById('popup-status');
+  const submitBtn = form.querySelector('.twc-nm-submit');
+
+  // Inline status messaging (replaces alert()).
+  function setStatus(kind, message) {
+    popupStatus.textContent = message;
+    popupStatus.className = `twc-nm-status twc-nm-status--${kind}`;
+    popupStatus.hidden = false;
+  }
+  function clearStatus() {
+    popupStatus.hidden = true;
+    popupStatus.textContent = '';
+  }
+
+  // Open / close the popup.
+  let variantsPopulated = false;
+  let lastFocused = null;
+
+  function onKeydown(event) {
+    if (event.key === 'Escape') closePopup();
+  }
+
+  function openPopup() {
+    lastFocused = document.activeElement;
+    overlayEl.classList.add('is-open');
+    document.body.style.overflow = 'hidden';
+    document.addEventListener('keydown', onKeydown);
+  }
+
+  function closePopup() {
+    overlayEl.classList.remove('is-open');
+    document.body.style.overflow = '';
+    document.removeEventListener('keydown', onKeydown);
+    clearStatus();
+    if (lastFocused && typeof lastFocused.focus === 'function') {
+      lastFocused.focus();
+    }
+  }
+
   function showPopup() {
+    openPopup();
+
     if (!productData) {
-      alert('Product data not found');
+      form.hidden = true;
+      setStatus('error', 'Product information is unavailable. Please refresh the page.');
       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;
+    popupTitle.textContent = productData.title;
+
+    if (!variantsPopulated) {
+      (productData.variants || []).forEach((variant) => {
+        const option = document.createElement('option');
+        option.value = variant.title;
+        option.textContent = variant.title;
+        sizeSelect.appendChild(option);
+      });
+      variantsPopulated = true;
+    }
+
+    const firstControl = form.querySelector('select, input');
+    if (firstControl) firstControl.focus();
   }
 
   popupOpenButton.addEventListener('click', showPopup);
-  popupClose.addEventListener('click', hidePopup);
+  popupClose.addEventListener('click', closePopup);
+  // Close when clicking the backdrop (but not the card).
+  overlayEl.addEventListener('click', function (event) {
+    if (event.target === overlayEl) closePopup();
+  });
 
   // Form submission handler
-  if (form) {
-    form.addEventListener('submit', async 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,
-          subscribeSms: form.querySelector("input[name='mailListSms']").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;
-        }
+  form.addEventListener('submit', async function (event) {
+    event.preventDefault();
+
+    const selectedVariant = (productData?.variants || []).find(
+      (variant) => variant.title === sizeSelect.value,
+    );
+    if (!selectedVariant) {
+      setStatus('error', 'Please select a size.');
+      return;
+    }
 
-        // 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;
-        }
+    const formData = {
+      variantRef: selectedVariant.id,
+      email: form.querySelector("input[name='email']").value,
+      subscribe: form.querySelector("input[name='mailList']").checked,
+      subscribeSms: form.querySelector("input[name='mailListSms']").checked,
+    };
+
+    if (type === 'coming-soon') {
+      formData.comingSoon = true;
+    } 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;
+    }
 
-        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;
-        }
+    // 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}`;
+    if (resolvedMarketId) formData.marketId = resolvedMarketId;
+
+    clearStatus();
+    const originalButtonText = submitBtn.textContent;
+    submitBtn.disabled = true;
+    submitBtn.textContent = 'Sending…';
+
+    try {
+      // Resolve the Authorization token based on auth mode.
+      let authToken = ACCESS_TOKEN;
+      if (authMode === 'proxy') {
+        const proxyToken = await getProxyAccessToken();
+        if (!proxyToken) {
+          setStatus('error', 'Please log in to your account to continue.');
+          return;
         }
+        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: authToken,
-            'X-Twc-Tenant': tenant,
-          },
-          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');
-          });
+      const url = `https://api.au-sandbox.thewishlist.io/services/wsservice/api/wishlist/items/customerInterest`;
+      const response = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: authToken,
+          'X-Twc-Tenant': tenant,
+        },
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        setStatus('success', "You're on the list. We'll be in touch.");
+        setTimeout(closePopup, 1500);
       } else {
-        alert('Selected variant not found');
+        setStatus('error', 'Something went wrong. Please try again.');
       }
-    });
-  }
+    } catch (error) {
+      console.error('Error submitting form:', error);
+      setStatus('error', 'Something went wrong. Please try again.');
+    } finally {
+      submitBtn.disabled = false;
+      submitBtn.textContent = originalButtonText;
+    }
+  });
 });

package/package.json

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