@ordergroove/offers 2.27.6 → 2.27.8-alpha-PR-646-1.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.6",
+  "version": "2.27.8-alpha-PR-646-1.22+71bf566b",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.13"
   },
-  "gitHead": "feff65dfd7c912f7be69e48d68ce403ac0cf24aa"
+  "gitHead": "71bf566bafea5781f2a883b6d499057aef1b33ca"
 }

package/src/components/OptinSelect.js

@@ -31,8 +31,14 @@ export class OptinSelect extends withChildOptions(OptinStatus) {
     `;
   }
 
-  get isSelected() {
-    return this.subscribed ? this.frequency : 'optedOut';
+  get currentFrequency() {
+    if (!this.subscribed) {
+      return 'optedOut';
+    }
+    if (this.frequency) {
+      return this.frequency;
+    }
+    return this.defaultFrequency;
   }
 
   onOptinChange(value) {
@@ -44,7 +50,7 @@ export class OptinSelect extends withChildOptions(OptinStatus) {
   }
 
   render() {
-    const { options: childOptions, isSelected } = this.childOptions;
+    const { options: childOptions } = this.childOptions;
     let options;
     if (this.frequencies?.length) {
       options = [
@@ -63,13 +69,21 @@ export class OptinSelect extends withChildOptions(OptinStatus) {
         }))
       ];
     } else {
-      options = childOptions;
+      options = [
+        {
+          value: 'optedOut',
+          text: html`
+            <og-text key="offerOptOutLabel"></og-text>
+          `
+        },
+        ...childOptions
+      ];
     }
 
     return html`
       <og-select
         .options="${options}"
-        .selected="${isSelected}"
+        .selected="${this.currentFrequency}"
         .onChange="${({ target: { value } }) => this.onOptinChange(value)}"
       ></og-select>
     `;

package/src/shopify/shopifyMiddleware.ts

@@ -34,11 +34,19 @@ async function setupPdp(store, offer) {
       console.warn('OG: Unable to fetch product details for PDP', err);
     }
   }
-
   const form = offer.closest('form');
-
-  // keep product.id form in sync with offer serving.
-  new MutationObserver(() => syncProductId(form, offer)).observe(form, { subtree: true, childList: true });
+  if (form) {
+    const mo = new MutationObserver(() => syncProductId(form, offer));
+    mo.observe(form, { subtree: true, childList: true });
+  } else {
+    for (let it of document.querySelectorAll('form[action="/cart/add"] [name=id]')) {
+      const input = it as HTMLFormElement;
+      if (input.getAttribute('value') === offer.getAttribute('product')) {
+        const mo = new MutationObserver(() => syncProductId(input.form, offer));
+        mo.observe(input.form, { subtree: true, childList: true });
+      }
+    }
+  }
 }
 
 const getCart = async () => await (await fetch(CART_JS_URL)).json();