@ordergroove/offers 2.24.2 → 2.24.3

package/examples/index.js

@@ -31,10 +31,11 @@ const settings = {
 
 const textCopy = {
   showTooltip: true,
-  offerOptInLabel: 'Subscribe and SAVE {{ogIncentive DiscountAmount 10}}',
-  offerOptOutLabel: 'Purchase one time',
-  offerEveryLabel: 'Ships Every:',
-  offerTooltipTrigger: 'Hover for additional info',
+  offerOptInLabel: 'Subscribe and Save',
+  offerIncentiveText: 'Save {{ogIncentive DiscountPercent}} when you subscribe',
+  offerOptOutLabel: 'Deliver one-time only',
+  offerEveryLabel: 'Deliver every',
+  offerTooltipTrigger: '[?]',
   offerTooltipContent: 'Seems this is a great subscription offering. Many fun details about this program exist.',
   optinButtonLabel: '•',
   optoutButtonLabel: '•',
@@ -325,7 +326,11 @@ Add item to order on
     {
       name: 'Tooltip',
       selector: 'og-offer[location="tooltip-placement"]',
-      markup: [['top-left', 'top', 'top-right'], ['left', '', 'right'], ['bottom-left', 'bottom', 'bottom-right']]
+      markup: [
+        ['top-left', 'top', 'top-right'],
+        ['left', '', 'right'],
+        ['bottom-left', 'bottom', 'bottom-right']
+      ]
         .map(options =>
           options
             .map(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.24.2",
+  "version": "2.24.3",
   "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.2"
+    "@ordergroove/offers-templates": "^0.4.3"
   },
-  "gitHead": "15d044be78de0e47b82dd310d3d1c4d06fecc98f"
+  "gitHead": "34d771e75cc0a0a2261d0e8c2ef7eb86aa7e7d3b"
 }

package/schema.json

@@ -274,27 +274,32 @@
       "properties": {
         "defaultFrequencyCopy": {
           "type": "string",
-          "default": "Recommended",
+          "default": "(Most Popular)",
           "title": "Default frequency copy"
         },
         "offerOptInLabel": {
           "type": "string",
-          "default": "Subscribe and get 20% off",
-          "title": "Subscribe option copy"
+          "default": "Subscribe and Save",
+          "title": "Subscription copy"
+        },
+        "offerIncentiveText": {
+          "type": "string",
+          "default": "Save {{ogIncentive DiscountPercent}} when you subscribe",
+          "title": "Subscription sub copy"
         },
         "offerEveryLabel": {
           "type": "string",
-          "default": "Ships Every: ",
+          "default": "Deliver Every",
           "title": "Subscribe frequency label"
         },
         "offerOptOutLabel": {
           "type": "string",
-          "default": "One-time",
+          "default": "Deliver one-time only",
           "title": "One-time option copy"
         },
         "showTooltip": {
           "type": "boolean",
-          "default": false,
+          "default": true,
           "title": "Add a tool tip"
         }
       },
@@ -364,7 +369,7 @@
         },
         "tooltipPlacement": {
           "type": "string",
-          "default": "top",
+          "default": "bottom",
           "enum": ["top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "right", "left"]
         }
       }
@@ -441,11 +446,12 @@
           "offerType": "radio"
         },
         "textCopy": {
-          "defaultFrequencyCopy": "Recommended",
-          "offerOptInLabel": "Subscribe and get 20% off",
+          "defaultFrequencyCopy": "(Most Popular)",
+          "offerOptInLabel": "Subscribe and Save",
+          "offerIncentiveText": "Save {{ogIncentive DiscountPercent}} when you subscribe",
           "offerEveryLabel": "Ships Every: ",
           "offerOptOutLabel": "One-time",
-          "showTooltip": false,
+          "showTooltip": true,
           "upsellButtonLabel": "Add to upcoming subscription order and receive 20% off",
           "upsellButtonContent": "Add to Next Order on ",
           "upsellModalContent": "Subscribe to this product and have it conveniently delivered to you at the frequency you choose! Read the FAQ here. Promotion subject to change.",

package/src/components/Offer.js

@@ -142,7 +142,7 @@ export class Offer extends TemplateElement {
         <og-optin-button>
           <og-text key="offerOptInLabel"></og-text>
         </og-optin-button>
-        <og-tooltip placement="top-right">
+        <og-tooltip placement="bottom">
           <div slot="trigger">
             <og-text key="offerTooltipTrigger"></og-text>
           </div>
@@ -151,7 +151,7 @@ export class Offer extends TemplateElement {
           </div>
         </og-tooltip>
       </div>
-      <div style="margin-left: 1.5em">
+      <div style="margin-left: 2.2em">
         <og-text key="offerEveryLabel"></og-text>
         <og-select-frequency>
           <option value="3_1" selected>3 Days</option>

package/src/components/OptinStatus.js

@@ -31,9 +31,9 @@ export class OptinStatus extends withProduct(TemplateElement) {
 
       .btn {
         position: relative;
-        width: 1.4em;
-        height: 1.4em;
-        margin: 0;
+        width: var(--og-radio-width, 1.4em);
+        height: var(--og-radio-height, 1.4em);
+        margin: var(--og-radio-margin, 0);
         padding: 0;
         border: 1px solid var(--og-primary-color, black);
         background: #fff;

package/src/components/Select.js

@@ -54,7 +54,7 @@ export class Select extends LitElement {
         color: inherit;
         fill: white;
         pointer-events: none;
-        right: 0.4em;
+        right: 0.3em;
         top: 50%;
         z-index: 1;
         font-size: 1em;

package/src/components/Tooltip.js

@@ -3,7 +3,7 @@ import { LitElement, html, css } from 'lit-element';
 export class Tooltip extends LitElement {
   static get properties() {
     return {
-      placement: { type: String, default: 'top' }
+      placement: { type: String, default: 'bottom' }
     };
   }
 
@@ -33,12 +33,14 @@ export class Tooltip extends LitElement {
         display: block;
         width: 200px;
         opacity: 0;
-        padding: 0.5em;
+        padding: var(--og-tooltip-padding, 0.5em);
+        text-align: var(--og-tooltip-text-align, left);
         pointer-events: none;
         position: absolute;
         transform: translateY(10px);
         transition: transform 0.25s ease-out;
         z-index: 99999;
+        border-radius: var(--og-tooltip-border-radius, 0);
       }
 
       .content:after {
@@ -189,7 +191,7 @@ export class Tooltip extends LitElement {
             ${this.trigger}
           </slot>
         </span>
-        <div class="content ${this.placement || 'top'}">
+        <div class="content ${this.placement || 'bottom'}">
           <slot name="content">
             ${this.content}
           </slot>

package/src/core/reducer.js

@@ -332,10 +332,11 @@ export const environment = (state = {}, action) => {
 
 export const locale = (
   state = {
-    offerOptInLabel: 'Subscribe',
-    offerOptOutLabel: 'Purchase one time',
-    offerEveryLabel: 'Every',
-    offerTooltipTrigger: 'Hover for additional info',
+    offerOptInLabel: 'Subscribe and Save',
+    offerIncentiveText: 'Save {{ogIncentive DiscountPercent}} when you subscribe',
+    offerOptOutLabel: 'Deliver one-time only',
+    offerEveryLabel: 'Delivery Every',
+    offerTooltipTrigger: '[?]',
     offerTooltipContent: 'Seems this is a great subscription offering. Many fun details about this program exist.',
     optinButtonLabel: '•',
     optoutButtonLabel: '•',
@@ -350,7 +351,7 @@ export const locale = (
     upsellModalTitle: 'Impulse Upsell',
     upsellModalConfirmLabel: 'Ok',
     upsellModalCancelLabel: 'Cancel',
-    defaultFrequencyCopy: '(Recommended)',
+    defaultFrequencyCopy: '(Most Popular)',
     frequencyPeriods: {
       '1': 'day',
       '2': 'week',