@ordergroove/offers 2.27.13-alpha-PR-652-3.1 → 2.27.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.13-alpha-PR-652-3.1+5885ff1e",
+  "version": "2.27.13",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -43,7 +43,7 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.4.14"
+    "@ordergroove/offers-templates": "^0.4.15"
   },
-  "gitHead": "5885ff1efc7aeb945e7b3bdbd3f9f13d943c6fbf"
+  "gitHead": "bfa13e68a501ae5898fe6aa8abaf745fcec9333d"
 }

package/src/components/FrequencyStatus.js

@@ -36,7 +36,6 @@ export class FrequencyStatus extends withProduct(TemplateElement) {
       frequency: { type: String },
       defaultFrequency,
       productDefaultFrequency: { type: String },
-      config: { type: Object },
       frequencies: {
         converter: {
           fromAttribute: parseFrequenciesList
@@ -94,7 +93,6 @@ export const mapStateToProps = (state, ownProps) => ({
   productDefaultFrequency: makeProductDefaultFrequencySelector((ownProps.product || {}).id)(state),
   configDefaultFrequency: state.config?.defaultFrequency,
   frequenciesText: state.config?.frequenciesText,
-  config: state.config,
   ...configSelector(state, ownProps, 'frequencies'),
   ...configSelector(state, ownProps, 'defaultFrequency'),
   ...templatesSelector(state, ownProps)

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);
     ev.preventDefault();
   }
 

package/src/components/OptinStatus.js

@@ -44,6 +44,7 @@ export class OptinStatus extends withProduct(TemplateElement) {
 
       .radio {
         text-indent: -9999px;
+        flex-shrink: 0;
       }
 
       .checkbox {

package/src/components/SelectFrequency.js

@@ -50,20 +50,13 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
 
   // default frequency comes from redux store first, then default option value, and then finally attribute value.
   get defaultFrequency() {
-    const { options, isSelected } = this.childOptions;
-
-    if (isSelected && this.frequencies?.length) {
-      const ix = options.findIndex(it => it.value === isSelected) || 0;
-      return this.frequencies[ix];
-    }
-
     if (this.configDefaultFrequency) {
       return this.configDefaultFrequency;
     }
     if (this.productDefaultFrequency) {
       return this.productDefaultFrequency;
     }
-
+    const { options, isSelected } = this.childOptions;
     if (isSelected) {
       return isSelected;
     }
@@ -86,17 +79,14 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
 
   render() {
     let options;
-    let defaultFrequency = this.defaultFrequency;
 
     if (this.frequencies?.length) {
-      const { isSelected } = this.childOptions;
-      if (isSelected && this.config.frequenciesEveryPeriod) {
-        const index = this.config.frequenciesEveryPeriod.findIndex(it => it === isSelected);
-        if (index >= 0) defaultFrequency = this.frequencies[index];
-      }
       options = this.frequencies.map((value, ix) => ({
         value,
-        text: frequencyText(this.config.frequenciesEveryPeriod[ix], defaultFrequency, this.defaultTest)
+        text:
+          this.frequenciesText && ix in this.frequenciesText
+            ? this.frequenciesText[ix]
+            : frequencyText(value, this.defaultFrequency)
       }));
     } else {
       ({ options } = this.childOptions);
@@ -105,17 +95,13 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
     if (!options.length) {
       options = (this.frequencies || []).map(value => ({
         value,
-        text: frequencyText(value, defaultFrequency)
+        text: frequencyText(value, this.defaultFrequency)
       }));
     }
+    const defaultFrequency = this.defaultFrequency;
 
     options = options.map(({ text, value }) => ({
-      text:
-        value === defaultFrequency
-          ? html`
-              ${text} ${this.defaultText || ''}
-            `
-          : text,
+      text: value === defaultFrequency ? `${text} ${(this.defaultText || '').trim()}` : text,
       value
     }));
     return html`

package/src/components/UpsellModal.js

@@ -52,7 +52,7 @@ export class UpsellModal extends withProduct(TemplateElement) {
               <slot name="every-label">
                 <og-text key="offerEveryLabel"></og-text>
               </slot>
-              <og-select-frequency default-frequency=${this.defaultFrequency}></og-select-frequency>
+              <og-select-frequency det{this.defaultFrequency}></og-select-frequency>
             </slot>
           </slot>
         </div>

package/src/components/__tests__/SelectFrequency.spec.js

@@ -1,4 +1,3 @@
-import { html, render } from 'lit-html';
 import { SelectFrequency, frequencyEquals } from '../SelectFrequency';
 import { simulateChange } from './utils';
 
@@ -16,26 +15,23 @@ describe('SelectFrequency', () => {
 
   it('should append default-text to selected frequency', async () => {
     const element = document.createElement(TAG_NAME_UNDER_TEST);
-    element.setAttribute('default-text', ' (recommended)');
+    element.setAttribute('default-text', ' (recomended)');
     element.innerHTML = `
     <option value="optedOut">Buy one time</option>
     <option value="2w" selected>2 weeks</option>
     <option value="1m">1 month </option>
     `;
     document.body.appendChild(element);
+
     await element.updateComplete;
-    await element.shadowRoot.querySelector('og-select').updateComplete;
     expect(element.shadowRoot.querySelector('og-select').shadowRoot.querySelector('select').value).toEqual('2_2');
     expect(element.shadowRoot.querySelector('og-select').shadowRoot.querySelector('select').selectedIndex).toEqual(1);
-
-    // Comment this since returns [object Object] only in unit-test.
-    // const result = element.shadowRoot
-    //   .querySelector('og-select')
-    //   .shadowRoot.querySelector('select')
-    //   .options[1].innerText.trim();
-
-    // expect(result).toContain('2 weeks');
-    // expect(result).toContain('(recommended)');
+    expect(
+      element.shadowRoot
+        .querySelector('og-select')
+        .shadowRoot.querySelector('select')
+        .options[1].innerText.trim()
+    ).toEqual('2 weeks (recomended)');
   });
 
   it('should use clicked frequency given default frequency and no product-specfic default frequency', () => {

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

@@ -8,8 +8,7 @@ import {
   offerId,
   optedin,
   productOffer,
-  productPlans,
-  textToFreq
+  productPlans
 } from '../shopifyReducer';
 
 describe('autoshipEligible', () => {
@@ -485,26 +484,3 @@ describe('productPlans', () => {
     expect(actual).toEqual({ 'yum existing key': 'yum existing value' });
   });
 });
-
-describe('textToFreq', () => {
-  it('textToFreq should return freq', () => {
-    expect(textToFreq('DAY')).toEqual('1_1');
-    expect(textToFreq('DAYS')).toEqual('1_1');
-    expect(textToFreq('DAYLY')).toEqual('1_1');
-    expect(textToFreq('1 DAY')).toEqual('1_1');
-    expect(textToFreq('2 DAYS')).toEqual('2_1');
-    expect(textToFreq('2 day(s)')).toEqual('2_1');
-
-    expect(textToFreq('week')).toEqual('1_2');
-    expect(textToFreq('weekly')).toEqual('1_2');
-    expect(textToFreq('1 week')).toEqual('1_2');
-    expect(textToFreq('2 weeks')).toEqual('2_2');
-    expect(textToFreq('2 week(s)')).toEqual('2_2');
-
-    expect(textToFreq('MONTH')).toEqual('1_3');
-    expect(textToFreq('MONTHLY')).toEqual('1_3');
-    expect(textToFreq('1 month')).toEqual('1_3');
-    expect(textToFreq('2 months')).toEqual('2_3');
-    expect(textToFreq('2 month(s)')).toEqual('2_3');
-  });
-});

package/src/shopify/shopifyReducer.js

@@ -99,15 +99,6 @@ export const autoshipEligible = (state = {}, action) => {
   return state;
 };
 
-export function textToFreq(text) {
-  const period = ['day', 'week', 'month'].findIndex(it => text.toLowerCase().includes(it)) + 1;
-  const every = (text.match(/(\d+)/) || ['', 1])[1];
-  if (every && period) {
-    return `${every}_${period}`;
-  }
-  return null;
-}
-
 export const config = (
   state = {
     frequencies: [],
@@ -134,15 +125,10 @@ export const config = (
     const sellingPlanGroup = getOGSellingPlanGroup(product);
     const frequencies = sellingPlanGroup?.selling_plans?.map(({ id }) => `${id}`);
     if (frequencies?.length) {
-      const frequenciesEveryPeriod = sellingPlanGroup?.selling_plans
-        ?.map(({ options }) => options || [])
-        .flat()
-        .map(({ value }) => textToFreq(value));
       const frequenciesText = sellingPlanGroup.options?.[0]?.values || frequencies;
       return {
         ...state,
         defaultFrequency: frequencies[0],
-        frequenciesEveryPeriod,
         frequencies,
         frequenciesText
       };