@ordergroove/offers 2.29.0 → 2.29.1-alpha-PR-707-2.113

package/examples/index.js

@@ -11,7 +11,23 @@ window.og_settings = {
     UD729: {
       '3_1': ['30.00', '10%', '$27.00'],
       '1_2': ['30.00', '20%', '$24.00']
-    }
+    },
+    UD728: [
+      {
+        frequency: '1_2',
+        prepaidShipments: '3',
+        regularPrice: '$15.00',
+        subscriptionPrice: '$13.50',
+        discountRate: '10%'
+      },
+      {
+        frequency: '3_1',
+        prepaidShipments: null,
+        regularPrice: '$15.00',
+        subscriptionPrice: '$12.00',
+        discountRate: '20%'
+      }
+    ]
   }
 };
 
@@ -63,162 +79,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 +278,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 +302,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 +316,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 +334,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 +347,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.29.0",
+  "version": "2.29.1-alpha-PR-707-2.113+0ae21bc6",
   "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": "f1717c291817ec17495295cbfa2ca873fd85e77a"
+  "gitHead": "0ae21bc6fbf1055284f1f51cc9591ae32075921d"
 }

package/src/components/PrepaidData.js

@@ -0,0 +1,110 @@
+import { css, html } from 'lit-element';
+import { connect } from '../core/connect';
+
+import { withProduct } from '../core/resolveProperties';
+import { TemplateElement } from '../core/base';
+import { makeProductPrepaidShipmentsOptedInSelector, makePrepaidShipmentsSelectedSelector } from '../core/selectors';
+import { safeProductId } from '../core/utils';
+
+export class PrepaidData extends withProduct(TemplateElement) {
+  static get properties() {
+    return {
+      ...super.properties,
+      shipmentsOptedIn: { type: Number },
+      productPlans: { type: Object },
+      prepaidShipmentsSelected: { type: Number },
+      totalPrice: { type: Boolean, reflect: true, attribute: 'total-price' },
+      perDeliveryPrice: { type: Boolean, reflect: true, attribute: 'per-delivery-price' },
+      totalSavings: { type: Boolean, reflect: true, attribute: 'total-savings' },
+      perDeliverySavings: { type: Boolean, reflect: true, attribute: 'per-delivery-savings' },
+      percentageSavings: { type: Boolean, reflect: true, attribute: 'percentage-savings' },
+      extraPercentageSavings: { type: Boolean, reflect: true, attribute: 'extra-percentage-savings' },
+      numberOfShipments: { type: Boolean, reflect: true, attribute: 'number-of-shipments' }
+    };
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+        text-indent: initial;
+      }
+    `;
+  }
+
+  get value() {
+    const realProductId = safeProductId(this.product);
+    const plans = this.productPlans[realProductId] || [];
+
+    const targetShipments = this.prepaidShipmentsSelected ? this.prepaidShipmentsSelected : this.shipmentsOptedIn;
+    let currentPlan = plans.find(plan => plan.prepaidShipments > 1 && plan.prepaidShipments === targetShipments);
+
+    if (!currentPlan) {
+      currentPlan = plans.find(plan => plan.prepaidShipments > 1);
+      if (!currentPlan) return '';
+    }
+
+    const {
+      discountRate,
+      subscriptionPrice,
+      prepaidShipments,
+      regularPrepaidPrice,
+      prepaidSavingsPerShipment,
+      prepaidSavingsTotal,
+      prepaidExtraSavingsPercentage
+    } = currentPlan;
+
+    if (this.totalPrice) {
+      return regularPrepaidPrice;
+    }
+
+    if (this.perDeliveryPrice) {
+      return subscriptionPrice;
+    }
+
+    if (this.totalSavings) {
+      return prepaidSavingsTotal;
+    }
+
+    if (this.perDeliverySavings) {
+      return prepaidSavingsPerShipment;
+    }
+
+    if (this.percentageSavings) {
+      return discountRate;
+    }
+
+    if (this.extraPercentageSavings) {
+      return prepaidExtraSavingsPercentage;
+    }
+
+    if (this.numberOfShipments) {
+      return prepaidShipments;
+    }
+
+    return '';
+  }
+
+  render() {
+    const value = this.value;
+    if (value)
+      return html`
+        <slot name="prepend"></slot>
+        ${value}
+        <slot name="append"></slot>
+      `;
+
+    return html`
+      <slot name="fallback"></slot>
+    `;
+  }
+}
+const mapStateToProps = (state, ownProps) => ({
+  shipmentsOptedIn: makeProductPrepaidShipmentsOptedInSelector(ownProps.product)(state),
+  prepaidShipmentsSelected: makePrepaidShipmentsSelectedSelector(ownProps.product)(state),
+  productPlans: state.productPlans
+});
+
+const ConnectedPrepaidData = connect(mapStateToProps)(PrepaidData);
+
+export { ConnectedPrepaidData };