@ordergroove/offers 2.28.9 → 2.28.11-alpha-PR-703-17.87

package/examples/index.js

@@ -63,162 +63,158 @@ const textCopy = {
   defaultFrequencyCopy: '(Recommended)'
 };
 
-const exampleTemplates = [
-  [
-    'Offers example',
-    {
-      name: 'empty',
-      selector: 'og-offer:not([location])',
-      id: '1'
-    },
-    {
-      name: 'built-in',
-      selector: 'og-offer[location="initial"]',
-      id: '2',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'radio'
-        },
-        textCopy: { ...textCopy }
-      }
-    },
-    {
-      name: 'checkbox',
-      selector: 'og-offer[location="initial-checkbox"]',
-      id: '3',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'toggle'
-        },
-        textCopy: {
-          ...textCopy
-        }
-      }
-    },
-    {
-      name: 'select',
-      selector: 'og-offer[location="initial-select"]',
-      id: '4',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'select'
-        },
-        textCopy: { ...textCopy }
-      }
-    },
-    {
-      name: 'cart',
-      selector: 'og-offer[location="cart"]',
-      id: '5',
-      defaultPreviewMode: 'subscribed',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'cart'
-        },
-        textCopy: { ...textCopy }
+const offersExamples = [
+  {
+    name: 'empty',
+    selector: 'og-offer:not([location])'
+  },
+  {
+    name: 'built-in',
+    selector: 'og-offer[location="initial"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'radio'
+      },
+      textCopy: { ...textCopy }
+    }
+  },
+  {
+    name: 'checkbox',
+    selector: 'og-offer[location="initial-checkbox"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'toggle'
+      },
+      textCopy: {
+        ...textCopy
       }
-    },
-    {
-      name: 'side-by-side',
-      selector: 'og-offer[location="side-by-side"]',
-      id: '6',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'side-by-side'
-        },
-        textCopy: { ...textCopy },
-        styles: {
-          primaryColor: 'navy',
-          defaultColor: 'pink'
-        }
+    }
+  },
+  {
+    name: 'select',
+    selector: 'og-offer[location="initial-select"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'select'
+      },
+      textCopy: { ...textCopy }
+    }
+  },
+  {
+    name: 'cart',
+    selector: 'og-offer[location="cart"]',
+    defaultPreviewMode: 'subscribed',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'cart'
+      },
+      textCopy: { ...textCopy }
+    }
+  },
+  {
+    name: 'side-by-side',
+    selector: 'og-offer[location="side-by-side"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'side-by-side'
+      },
+      textCopy: { ...textCopy },
+      styles: {
+        primaryColor: 'navy',
+        defaultColor: 'pink'
       }
-    },
-    {
-      name: 'read-only',
-      selector: 'og-offer[location="read-only"]',
-      id: '7',
-      defaultPreviewMode: 'subscribed',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'read-only'
-        },
-        textCopy: { ...textCopy },
-        styles: {
-          primaryColor: 'navy',
-          defaultColor: 'pink'
-        }
+    }
+  },
+  {
+    name: 'read-only',
+    selector: 'og-offer[location="read-only"]',
+    defaultPreviewMode: 'subscribed',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'read-only'
+      },
+      textCopy: { ...textCopy },
+      styles: {
+        primaryColor: 'navy',
+        defaultColor: 'pink'
       }
-    },
-    {
-      name: 'buttons',
-      selector: 'og-offer[location="buttons"]',
-      id: '8',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'buttons'
-        },
-        textCopy: { ...textCopy },
-        styles: {
-          primaryColor: 'navy',
-          defaultColor: 'pink'
-        }
+    }
+  },
+  {
+    name: 'buttons',
+    selector: 'og-offer[location="buttons"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'buttons'
+      },
+      textCopy: { ...textCopy },
+      styles: {
+        primaryColor: 'navy',
+        defaultColor: 'pink'
       }
-    },
-
-    {
-      name: 'first-test',
-      selector: 'og-offer[location="first-test"]',
-      id: '9',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'toggle'
-        },
-        textCopy: {
-          ...textCopy,
-          offerOptOutLabel: '1st offerOptOutLabel'
-        }
+    }
+  },
+  {
+    name: 'Prepaid',
+    selector: 'og-offer[location="initial"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'prepaid-enabled-radio'
+      },
+      textCopy: { ...textCopy }
+    }
+  },
+  {
+    name: 'first-test',
+    selector: 'og-offer[location="first-test"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'toggle'
+      },
+      textCopy: {
+        ...textCopy,
+        offerOptOutLabel: '1st offerOptOutLabel'
       }
-    },
-    {
-      name: 'second-test no tooltip',
-      selector: 'og-offer[location="second-test"]',
-      id: '10',
-      config: {
-        settings: {
-          ...settings,
-          offerType: 'radio'
-        },
-        textCopy: {
-          ...textCopy,
-          showTooltip: false,
-          offerOptOutLabel: '2st offerOptOutLabel'
-        }
+    }
+  },
+  {
+    name: 'second-test no tooltip',
+    selector: 'og-offer[location="second-test"]',
+    config: {
+      settings: {
+        ...settings,
+        offerType: 'radio'
+      },
+      textCopy: {
+        ...textCopy,
+        showTooltip: false,
+        offerOptOutLabel: '2st offerOptOutLabel'
       }
-    },
-    {
-      name: 'Select mode',
-      selector: 'og-offer[location="select1"]',
-      id: '11',
-      markup: `
+    }
+  },
+  {
+    name: 'Select mode',
+    selector: 'og-offer[location="select1"]',
+    markup: `
 <og-optin-select>
 <option value="optedOut">Buy one time</option>
 <option value="2w" selected>2 weeks (recomended)</option>
 <option value="1m">1 month </option>
 </og-optin-select>`
-    },
-    {
-      name: 'Custom markup',
-      selector: 'og-offer[location="custom1"]',
-      id: '12',
-      markup: `
+  },
+  {
+    name: 'Custom markup',
+    selector: 'og-offer[location="custom1"]',
+    markup: `
 <og-when test="regularEligible">
 <p>
 <og-optout-button>Buy one time</og-optout-button>
@@ -266,13 +262,12 @@ Add item to order on
   <span slot="cancel">cancel</span>
 </og-upsell-modal>
 </og-when>`
-    },
-    {
-      name: 'Upsell modal - radio',
-      defaultPreviewMode: 'upsell',
-      selector: 'og-offer[location="upsell-radio"]',
-      id: '13',
-      markup: `
+  },
+  {
+    name: 'Upsell modal - radio',
+    defaultPreviewMode: 'upsell',
+    selector: 'og-offer[location="upsell-radio"]',
+    markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-radio">
   <a href="#">Add item to next order via radio</a>
@@ -291,13 +286,12 @@ Add item to order on
   </p>
 </og-upsell-modal>
 </og-when>`
-    },
-    {
-      name: 'Upsell modal - select',
-      defaultPreviewMode: 'upsell',
-      selector: 'og-offer[location="upsell-select"]',
-      id: '14',
-      markup: `
+  },
+  {
+    name: 'Upsell modal - select',
+    defaultPreviewMode: 'upsell',
+    selector: 'og-offer[location="upsell-select"]',
+    markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-select">
   <a href="#">Add item to next order via select</a>
@@ -306,13 +300,12 @@ Add item to order on
   <og-optin-select></og-optin-select>
 </og-upsell-modal>
 </og-when>`
-    },
-    {
-      name: 'Upsell modal - toggle',
-      defaultPreviewMode: 'upsell',
-      selector: 'og-offer[location="upsell-toggle"]',
-      id: '15',
-      markup: `
+  },
+  {
+    name: 'Upsell modal - toggle',
+    defaultPreviewMode: 'upsell',
+    selector: 'og-offer[location="upsell-toggle"]',
+    markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-toggle">
   <a href="#">Add item to next order via toggle</a>
@@ -325,13 +318,12 @@ Add item to order on
   <span slot="cancel">Nope</span>
 </og-upsell-modal>
 </og-when>
-    `
-    },
-    {
-      name: 'Product-specific default frequencies',
-      selector: 'og-offer[location="psdf"]',
-      id: '16',
-      markup: `
+  `
+  },
+  {
+    name: 'Product-specific default frequencies',
+    selector: 'og-offer[location="psdf"]',
+    markup: `
 <og-when test="regularEligible">
   <og-select-frequency default-text=" Most common!">
     <option value="1w">1 week</option>
@@ -339,56 +331,60 @@ Add item to order on
     <option value="3w">3 weeks</option>
   </og-select-frequency>
 </og-when>
-    `
-    }
-  ],
-  [
-    'Individual components',
-    {
-      name: 'og-optin-button',
-      selector: 'og-offer[location=og-optin-button]',
-      id: '17',
-      markup: `
+  `
+  }
+];
+
+const componentExamples = [
+  {
+    name: 'og-optin-button',
+    selector: 'og-offer[location=og-optin-button]',
+    markup: `
 <og-optin-button>
   I want to subscribe to this product
 </og-optin-button>
-    `
-    },
-    {
-      name: 'Frequency Status',
-      selector: 'og-offer[location="frequency"]',
-      id: '18',
-      markup: `
+  `
+  },
+  {
+    name: 'Frequency Status',
+    selector: 'og-offer[location="frequency"]',
+    markup: `
 <og-frequency-status>
   <span slot="not-subscribed">you are not subscribed </span>
 </og-frequency-status>`
-    },
-    {
-      name: 'Tooltip',
-      selector: 'og-offer[location="tooltip-placement"]',
-      id: '19',
-      markup: [
-        ['top-left', 'top', 'top-right'],
-        ['left', '', 'right'],
-        ['bottom-left', 'bottom', 'bottom-right']
-      ]
-        .map(options =>
-          options
-            .map(
-              it =>
-                `<span class="tooltip-example">${
-                  it
-                    ? `<og-tooltip placement="${it}" style="width:100%">
-    <div slot="trigger">${it}</div>
-    <div slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
-  </og-tooltip>`
-                    : ' &nbsp; '
-                }</span>`
-            )
-            .join('\n')
-        )
-        .join('<br>\n')
-    }
+  },
+  {
+    name: 'Tooltip',
+    selector: 'og-offer[location="tooltip-placement"]',
+    markup: [
+      ['top-left', 'top', 'top-right'],
+      ['left', '', 'right'],
+      ['bottom-left', 'bottom', 'bottom-right']
+    ]
+      .map(options =>
+        options
+          .map(
+            it =>
+              `<span class="tooltip-example">${
+                it
+                  ? `<og-tooltip placement="${it}" style="width:100%">
+  <div slot="trigger">${it}</div>
+  <div slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+</og-tooltip>`
+                  : ' &nbsp; '
+              }</span>`
+          )
+          .join('\n')
+      )
+      .join('<br>\n')
+  }
+];
+
+const exampleTemplates = [
+  ['Offers example', ...offersExamples.map((x, idx) => ({ ...x, id: idx.toString() }))],
+  [
+    'Individual components',
+    ...componentExamples.map((x, idx) => ({ ...x, id: (idx + offersExamples.length).toString() }))
   ]
 ];
 function updateTemplate(target) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.28.9",
+  "version": "2.28.11-alpha-PR-703-17.87+e0434fb5",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.20"
   },
-  "gitHead": "e6ea1ceb9b29e0b63acba4380870c222997baf2b"
+  "gitHead": "e0434fb512e57c225bc1a957163e8a57bbda1418"
 }

package/src/components/Modal.js

@@ -51,11 +51,11 @@ export class Modal extends LitElement {
       }
 
       .og-modal__container {
-        background-color: #fff;
-        padding: 30px;
+        background-color: var(--og-modal-background-color, #fff);
+        padding: var(--og-modal-padding, 30px);
         max-width: 500px;
         max-height: 100vh;
-        border-radius: 4px;
+        border-radius: var(--og-modal-border-radius, 4px);
         box-sizing: border-box;
       }
 

package/src/components/PrepaidToggle.js

@@ -0,0 +1,100 @@
+import { LitElement, html, css } from 'lit-element';
+import { connect } from '../core/connect';
+import { makeProductPrepaidShipmentsSelector } from '../core/selectors';
+import { productChangePrepaidShipments } from '../core/actions';
+import { withProduct } from '../core/resolveProperties';
+
+export class PrepaidToggle extends withProduct(LitElement) {
+  constructor() {
+    super();
+    this._selectedOption = null;
+  }
+
+  static get properties() {
+    return {
+      shipments: { type: Number }
+    };
+  }
+
+  // copied from SelectFrequency
+  static get styles() {
+    return css`
+      og-select {
+        display: inline-block;
+        cursor: pointer;
+        background-color: #fff;
+        border: var(--og-select-border, 1px solid #aaa);
+        border-width: var(--og-select-border-width, 1px);
+        box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
+        z-index: 1;
+      }
+
+      input {
+        width: 1.2em;
+        height: 1.2em;
+        accent-color: black;
+        border-radius: 4px;
+      }
+    `;
+  }
+
+  get childOptions() {
+    const options = Array.from(this.querySelectorAll('option'));
+    return options.map(option => ({
+      value: +option.value,
+      text: option.text || `${option.value} shipments`
+    }));
+  }
+
+  get checked() {
+    return this.shipments > 1;
+  }
+
+  handleChange(e) {
+    if (e.target.checked) {
+      const selectedShipments = this._selectedOption || +this.querySelector('option').value;
+      this.productChangePrepaidShipments(this.product, selectedShipments, this.offer);
+    } else {
+      this.productChangePrepaidShipments(this.product, null, this.offer);
+    }
+  }
+
+  handleSelect({ target: { value } }) {
+    const valueAsNumber = +value;
+    // keep track of selected option so that checking the checkbox opts them into the currently selected value in the dropdown
+    // this only happens if they opt-out then opt back in.
+    this._selectedOption = valueAsNumber;
+    this.productChangePrepaidShipments(this.product, valueAsNumber, this.offer);
+  }
+
+  render() {
+    return html`
+      <div>
+        <input id="cbx" type="checkbox" .checked=${this.checked} @change=${this.handleChange} />
+        <label for="cbx">
+          <slot name="label">Prepay for</slot>
+          ${this.childOptions.length > 1
+            ? html`
+                <og-select
+                  .options=${this.childOptions}
+                  .selected=${this._selectedOption || this.shipments}
+                  .onChange="${e => this.handleSelect(e)}"
+                ></og-select>
+              `
+            : html`
+                <span>${this.childOptions[0].text}</span>
+              `}
+          <slot name="append"></slot>
+        </label>
+      </div>
+    `;
+  }
+}
+
+const mapStateToProps = (state, ownProps) => ({
+  shipments: makeProductPrepaidShipmentsSelector(ownProps.product)(state)
+});
+
+const ConnectedPrepaidToggle = connect(mapStateToProps, { productChangePrepaidShipments })(PrepaidToggle);
+
+export { ConnectedPrepaidToggle };

package/src/components/Select.js

@@ -70,7 +70,7 @@ export class Select extends LitElement {
       <select @change="${handleOnChange}">
         ${this.options.map(
           option => html`
-            <option value="${option.value}" ?selected=${option.value === this.selected}>${option.text}</option>
+            <option value="${option.value}" .selected=${option.value === this.selected}>${option.text}</option>
           `
         )}
       </select>