@ordergroove/offers 2.27.19-alpha-PR-659-2.1 → 2.27.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.19-alpha-PR-659-2.1+ce990eef",
+  "version": "2.27.20",
   "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.15"
   },
-  "gitHead": "ce990eef6d106e43adf08c563903844bd8d45e13"
+  "gitHead": "16bf0121e814d5488ec969ca1af480074be5a198"
 }

package/src/components/OptinButton.js

@@ -16,11 +16,7 @@ export class OptinButton extends OptinStatus {
   }
 
   handleClick(ev) {
-    this.optinProduct(
-      resolveProduct(this),
-      this.offer ? this.offer.defaultFrequency : this.defaultFrequency,
-      this.offer
-    );
+    this.optinProduct(resolveProduct(this), this.defaultFrequency || this.offer.defaultFrequency, this.offer);
     ev.preventDefault();
   }
 

package/src/core/utils.ts

@@ -49,15 +49,15 @@ export const safeProductId = product => {
 /**
  * Returns the OG frequency if platform is running on selling plans
  * @param initialFrequency
- * @param param1
+ * @param config 
  */
  export const safeOgFrequency = (initialFrequency, config) => {
-  if (platform?.shopify_selling_plans) {
-    const ix = config?.frequencies?.indexOf(initialFrequency);
-    if (ix >= 0 && config?.frequenciesEveryPeriod[ix]) {
-      return config?.frequenciesEveryPeriod[ix];
+  if (platform.shopify_selling_plans) {
+    const ix = config.frequencies?.indexOf(initialFrequency);
+    if (ix >= 0 && config.frequenciesEveryPeriod[ix]) {
+      return config.frequenciesEveryPeriod[ix];
     } else {
-      throw `OG Can't convert selling_plain_id ${initialFrequency} to OG frequency every period`;
+      throw `OG Can't convert selling_plan_id ${initialFrequency} to OG frequency every period`;
     }
   }
   return initialFrequency;

package/src/shopify/__tests__/shopifyMiddleware.spec.js

@@ -112,15 +112,27 @@ describe('synchronizeCartOptin', () => {
     expect(called).toBeTruthy();
   });
 
-  it('should pass closest section to shopify api', async () => {
+  it('should pass closest section cart-items to shopify api to ajax refresh', async () => {
     const sectionDiv = document.createElement('div');
-    sectionDiv.id = 'shopify-section-123456789';
+    sectionDiv.id = 'shopify-section-123456789__cart-items';
     sectionDiv.classList.add('shopify-section');
     sectionDiv.appendChild(offer);
     document.body.appendChild(sectionDiv);
 
     await synchronizeCartOptin({ type: OPTIN_PRODUCT, payload: { offer, frequency, product } }, store);
-    expect(fetchMock.lastOptions().body).toContain('"sections":["123456789"]');
+    expect(fetchMock.lastOptions().body).toContain('"sections":["123456789__cart-items"]');
+    sectionDiv.remove();
+  });
+
+  it('should pass closest section cart-footer to shopify api to ajax refresh', async () => {
+    const sectionDiv = document.createElement('div');
+    sectionDiv.id = 'shopify-section-123456789__cart-footer';
+    sectionDiv.classList.add('shopify-section');
+    sectionDiv.appendChild(offer);
+    document.body.appendChild(sectionDiv);
+
+    await synchronizeCartOptin({ type: OPTIN_PRODUCT, payload: { offer, frequency, product } }, store);
+    expect(fetchMock.lastOptions().body).toContain('"sections":["123456789__cart-footer"]');
     sectionDiv.remove();
   });
 });

package/src/shopify/shopifyMiddleware.ts

@@ -20,6 +20,11 @@ const CART_PAGE_URL = '/cart';
 const CART_JS_URL = `${SHOPIFY_ROOT}cart.js`;
 const PRODUCTS_URL = `${SHOPIFY_ROOT}products/`;
 
+/**
+ * List of section DOM elements to update via section-rendering api https://shopify.dev/api/section-rendering
+ */
+const DEFAULT_SHOPIFY_CART_AJAX_SECTIONS =
+  '[id^="shopify-section-"][id$=__cart-items], [id^="shopify-section-"][id$="__cart-footer"],#cart-live-region-text,#cart-icon-bubble';
 const syncProductId = debounce(100, false, function(form, offer) {
   const { id } = Object.fromEntries([...new FormData(form).entries()]);
   if (id) {
@@ -147,8 +152,7 @@ export async function synchronizeCartOptin(action: any, store: any) {
     offerElement.style.pointerEvents = 'none';
     offerElement.style.opacity = '.7';
 
-    const closestSection = offerElement.closest('.shopify-section');
-    const closestSectionId = (closestSection?.id.match(/^shopify-section-(.+)/) || [])[1];
+    const sectionsToUpdate = Array.from(document.querySelectorAll(DEFAULT_SHOPIFY_CART_AJAX_SECTIONS));
 
     const key = action.payload.product.id; // shopify cart.item.key
     const cart = await getCart();
@@ -167,7 +171,7 @@ export async function synchronizeCartOptin(action: any, store: any) {
         attributes: Object.fromEntries([trackingEvent]),
         properties: item.properties,
         selling_plan: selling_plan || null,
-        sections: closestSectionId ? [closestSectionId] : undefined
+        sections: sectionsToUpdate.map((el: HTMLElement) => el.id.replace(/^shopify-section-/, ''))
       })
     });
 
@@ -203,15 +207,20 @@ export async function synchronizeCartOptin(action: any, store: any) {
 
     const sections = newCart.sections;
 
-    if (sections && closestSectionId in sections) {
-      const sectionRawHtml = sections[closestSectionId];
+    if (Object.values(sections).length) {
+      sectionsToUpdate.forEach((sectionElement: HTMLElement) => {
+        const sectionId = sectionElement.id.replace(/^shopify-section-/, '');
+        if (!(sectionId in sections)) return;
 
-      const el = new DOMParser()
-        .parseFromString(sectionRawHtml.toString() || '', 'text/html')
-        .getElementById('shopify-section-' + closestSectionId);
-      if (el) {
-        closestSection.innerHTML = el.innerHTML;
-      }
+        const sectionRawHtml = sections[sectionId];
+
+        const el = new DOMParser()
+          .parseFromString(sectionRawHtml.toString() || '', 'text/html')
+          .getElementById(sectionElement.id);
+        if (el) {
+          sectionElement.innerHTML = el.innerHTML;
+        }
+      });
     } else if (window.location.pathname.startsWith(CART_PAGE_URL)) {
       // only do if we are on the cart page
       window.location.reload();