@ordergroove/offers 2.32.0 → 2.32.1-alpha-PR-727-3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.32.0",
+  "version": "2.32.1-alpha-PR-727-3.3+d76cb26d",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,7 +45,7 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.7.0"
+    "@ordergroove/offers-templates": "^0.7.1-alpha-PR-727-3.3+d76cb26d"
   },
-  "gitHead": "0ef304c34b1b2ed80c2da25f63b49e90f2dd6a60"
+  "gitHead": "d76cb26d161d1053a3b0d037a73cff98fa63eeba"
 }

package/src/components/PrepaidToggle.js

@@ -20,7 +20,8 @@ export class PrepaidToggle extends withProduct(LitElement) {
       options: { type: Array },
       text: { type: String },
       shipmentsOptedIn: { type: Number },
-      prepaidShipmentsSelected: { type: Number }
+      prepaidShipmentsSelected: { type: Number },
+      defaultPrepaidShipments: { type: Number, attribute: 'default-prepaid-shipments' }
     };
   }
 
@@ -50,10 +51,19 @@ export class PrepaidToggle extends withProduct(LitElement) {
     return this.shipmentsOptedIn > 1;
   }
 
+  get selectedShipments() {
+    return this.prepaidShipmentsSelected || this.shipmentsOptedIn || this.getDefaultPrepaidShipments();
+  }
+
+  getDefaultPrepaidShipments() {
+    return this.options.includes(this.defaultPrepaidShipments)
+      ? this.defaultPrepaidShipments
+      : this.options[1] || this.options[0];
+  }
+
   handleChange(e) {
     if (e.target.checked) {
-      const selectedShipments = this.prepaidShipmentsSelected || this.options[0];
-      this.productChangePrepaidShipments(this.product, selectedShipments, this.offer);
+      this.productChangePrepaidShipments(this.product, this.selectedShipments, this.offer);
     } else {
       this.productChangePrepaidShipments(this.product, null, this.offer);
     }
@@ -83,7 +93,7 @@ export class PrepaidToggle extends withProduct(LitElement) {
             ? html`
                 <og-select
                   .options=${displayOptions}
-                  .selected=${this.prepaidShipmentsSelected || this.shipmentsOptedIn}
+                  .selected=${this.selectedShipments}
                   .onChange="${e => this.handleSelect(e)}"
                 ></og-select>
               `

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

@@ -61,29 +61,35 @@ describe('PrepaidToggle', () => {
     ]);
   });
 
-  it('should render static text when only one option', async () => {
+  it('should render static text when only one option and opt in', async () => {
     const toggle = await renderTemplate(getPrepaidToggleTemplate([3]));
+    toggle.productChangePrepaidShipments = jasmine.createSpy('productChangePrepaidShipments');
+
     const select = toggle.shadowRoot.querySelector('og-select');
     expect(select).toBeFalsy();
     const label = toggle.shadowRoot.querySelector('label');
     expect(label.innerText).toBe('Prepay for 3 shipments');
+
+    const checkbox = toggle.shadowRoot.querySelector('input');
+    toggleCheckbox(checkbox);
+    expectPrepaidShipmentsAction(toggle, 3);
   });
 
-  it('should opt into prepaid', async () => {
+  it('should opt into prepaid when no default shipments set', async () => {
     const toggle = await renderTemplate(getPrepaidToggleTemplate());
     toggle.productChangePrepaidShipments = jasmine.createSpy('productChangePrepaidShipments');
     const checkbox = toggle.shadowRoot.querySelector('input');
 
     // checking checkbox selects default value
     toggleCheckbox(checkbox);
-    expectPrepaidShipmentsAction(toggle, 3);
+    expectPrepaidShipmentsAction(toggle, 6);
 
     // changing select changes selection
     const select = toggle.shadowRoot.querySelector('og-select');
-    selectOption(select, 6);
+    selectOption(select, 3);
     // This is changed on the prepaidShipmentsSelected reducer by the productChangePrepaidShipments action
-    toggle.prepaidShipmentsSelected = 6;
-    expectPrepaidShipmentsAction(toggle, 6);
+    toggle.prepaidShipmentsSelected = 3;
+    expectPrepaidShipmentsAction(toggle, 3);
 
     // unchecking checkbox opts out of prepaid
     toggleCheckbox(checkbox);
@@ -91,7 +97,7 @@ describe('PrepaidToggle', () => {
 
     // checking checkbox again opts into previously selected value
     toggleCheckbox(checkbox);
-    expectPrepaidShipmentsAction(toggle, 6);
+    expectPrepaidShipmentsAction(toggle, 3);
   });
 
   it('should preselect a value if shipments is set', async () => {
@@ -112,4 +118,19 @@ describe('PrepaidToggle', () => {
     // should render an empty component and not throw
     expect(toggle.shadowRoot.textContent).toBe('');
   });
+
+  it('should select default prepaid shipments if provided', async () => {
+    const toggle = await renderTemplate(getPrepaidToggleTemplate([3, 6, 9]));
+    toggle.defaultPrepaidShipments = 9;
+
+    await toggle.updateComplete;
+
+    const select = toggle.shadowRoot.querySelector('og-select');
+    expect(select.selected).toBe(9);
+
+    // if provided default value is not present in options, it should fall back to the 2nd option
+    toggle.defaultPrepaidShipments = 10;
+    await toggle.updateComplete;
+    expect(select.selected).toBe(6);
+  });
 });

package/src/core/__tests__/selectors.spec.js

@@ -117,4 +117,27 @@ describe('makeProductPrepaidShipmentOptionsSelector', () => {
     const selector = makeProductPrepaidShipmentOptionsSelector(123);
     expect(selector({ config: { prepaidSellingPlans: { 456: [{ numberShipments: 3 }] } } })).toEqual([]);
   });
+
+  it('should sort the options', () => {
+    const selector = makeProductPrepaidShipmentOptionsSelector(123);
+    expect(
+      selector({
+        config: {
+          prepaidSellingPlans: {
+            123: [
+              {
+                numberShipments: 6
+              },
+              {
+                numberShipments: 3
+              },
+              {
+                numberShipments: 12
+              }
+            ]
+          }
+        }
+      })
+    ).toEqual([3, 6, 12]);
+  });
 });

package/src/core/selectors.js

@@ -140,10 +140,10 @@ export const makeProductPrepaidShipmentsOptedInSelector = memoize(productId =>
 );
 
 export const makeProductPrepaidShipmentOptionsSelector = memoize(productId =>
-  createSelector(
-    prepaidSellingPlansSelector,
-    prepaidSellingPlans => prepaidSellingPlans[productId]?.map(({ numberShipments }) => numberShipments) || []
-  )
+  createSelector(prepaidSellingPlansSelector, prepaidSellingPlans => {
+    const shipmentsList = prepaidSellingPlans[productId]?.map(({ numberShipments }) => numberShipments) || [];
+    return shipmentsList.sort((a, b) => a - b);
+  })
 );
 
 /**