@ordergroove/offers 2.24.0 → 2.24.2-alpha-PR-568-5.12

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.0",
+  "version": "2.24.2-alpha-PR-568-5.12+8d911f4f",
   "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.0"
+    "@ordergroove/offers-templates": "^0.4.2-alpha-PR-568-5.12+8d911f4f"
   },
-  "gitHead": "5a104d20766e12bc957a4f052eb293facf8f26e5"
+  "gitHead": "8d911f4fdf6099e66242a1a43c6a0fd7f2a57b5a"
 }

package/schema.json

@@ -274,22 +274,27 @@
       "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": {
@@ -442,7 +447,8 @@
         },
         "textCopy": {
           "defaultFrequencyCopy": "Recommended",
-          "offerOptInLabel": "Subscribe and get 20% off",
+          "offerOptInLabel": "Subscribe and Save",
+          "offerIncentiveText": "Save {{ogIncentive DiscountPercent}} when you subscribe",
           "offerEveryLabel": "Ships Every: ",
           "offerOptOutLabel": "One-time",
           "showTooltip": false,

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: 1.9em">
         <og-text key="offerEveryLabel"></og-text>
         <og-select-frequency>
           <option value="3_1" selected>3 Days</option>

package/src/components/OptinButton.js

@@ -1,4 +1,4 @@
-import { html } from 'lit-element';
+import { html, css } from 'lit-element';
 import { optinProduct } from '../core/actions';
 import { OptinStatus, mapStateToProps } from './OptinStatus';
 import { connect } from '../core/connect';

package/src/components/OptinStatus.js

@@ -23,6 +23,8 @@ export class OptinStatus extends withProduct(TemplateElement) {
       :host {
         cursor: default;
         display: inline-block;
+        font-family: var(--og-global-family, Roboto, sans-serif);
+        color: var(--og-global-color, #090909);
       }
 
       :host[hidden] {
@@ -42,6 +44,13 @@ export class OptinStatus extends withProduct(TemplateElement) {
         color: var(--og-primary-color, black);
       }
 
+      .radio,
+      .checkbox {
+        margin: 0 0.5em;
+        transform: scale(1.2);
+        cursor: pointer;
+      }
+
       .radio {
         text-indent: -9999px;
       }
@@ -49,6 +58,7 @@ export class OptinStatus extends withProduct(TemplateElement) {
       .checkbox {
         border-radius: 3px;
       }
+
       .checkbox.active::after,
       .radio.active::after {
         content: ' ';

package/src/components/Select.js

@@ -21,9 +21,10 @@ export class Select extends LitElement {
         font-family: inherit;
         font-size: 1em;
         line-height: 1.3;
-        padding: var(--og-select-padding, 0.4em 1.8em 0.3em 0.5em);
+        padding: var(--og-select-padding, 0.4em 2.8em 0.4em 0.5em);
         width: 100%;
         max-width: 100%;
+        min-width: 150px;
         box-sizing: border-box;
         margin: 0;
         border: none;
@@ -50,11 +51,10 @@ export class Select extends LitElement {
       }
       span {
         position: absolute;
-        // background: white;
         color: inherit;
         fill: white;
         pointer-events: none;
-        right: 0.4em;
+        right: 0.3em;
         top: 50%;
         z-index: 1;
         font-size: 1em;

package/src/components/SelectFrequency.js

@@ -32,14 +32,15 @@ export class SelectFrequency extends withChildOptions(FrequencyStatus) {
   static get styles() {
     return css`
       :host {
-        display: inline-block;
+        display: table;
         cursor: pointer;
-        background-color: var(--og-select-bg-color, #fff);
-        border: var(--og-select-border, 1px solid #aaa);
+        background-color: var(--og-select-bg-color, #f8f8f8);
+        border: var(--og-select-border, 1px solid #090909);
         border-radius: var(--og-select-border-radius, 0.5em);
         border-width: var(--og-select-border-width, 1px);
         box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
         z-index: 1;
+        font-size: var(--og-select-font-size, 12px);
       }
     `;
   }

package/src/components/Tooltip.js

@@ -25,20 +25,24 @@ export class Tooltip extends LitElement {
 
       .content {
         box-sizing: border-box;
-        font-family: var(--og-tooltip-family, inherit);
-        font-size: var(--og-tooltip-size, inherit);
-        color: var(--og-tooltip-color, inherit);
-        background-color: var(--og-tooltip-background, #ececec);
+        font-family: var(--og-tooltip-family, Roboto, sans-serif);
+        font-size: var(--og-tooltip-size, 12px);
+        color: var(--og-tooltip-color, #090909);
+        background-color: var(--og-tooltip-background, #ffffff);
         box-shadow: var(--og-tooltip-box-shadow, 2px 2px 6px rgba(0, 0, 0, 0.28));
+        border: var(--og-tooltop-border, 1px solid #cdcdcd);
         display: block;
         width: 200px;
         opacity: 0;
-        padding: 0.5em;
+        padding: 1em;
+        border-radius: 5px;
         pointer-events: none;
         position: absolute;
         transform: translateY(10px);
         transition: transform 0.25s ease-out;
         z-index: 99999;
+        text-align: center;
+        line-height: 1.3;
       }
 
       .content:after {
@@ -112,7 +116,7 @@ export class Tooltip extends LitElement {
       .top-right:after,
       .top:after {
         bottom: -10px;
-        border-top: solid var(--og-tooltip-background, #ececec) 10px;
+        border-top: solid var(--og-tooltip-background, #ffffff) 10px;
       }
       .bottom-left:after,
       .top-left:after {
@@ -131,7 +135,7 @@ export class Tooltip extends LitElement {
       .bottom-right:after,
       .bottom:after {
         top: -10px;
-        border-bottom: solid var(--og-tooltip-background, #ececec) 10px;
+        border-bottom: solid var(--og-tooltip-background, #ffffff) 10px;
       }
 
       .left:after,
@@ -143,11 +147,11 @@ export class Tooltip extends LitElement {
       }
       .right:after {
         left: -10px;
-        border-right: solid var(--og-tooltip-background, #ececec) 10px;
+        border-right: solid var(--og-tooltip-background, #ffffff) 10px;
       }
       .left:after {
         right: -10px;
-        border-left: solid var(--og-tooltip-background, #ececec) 10px;
+        border-left: solid var(--og-tooltip-background, #ffffff) 10px;
       }
 
       .tooltip:hover .content {
@@ -183,13 +187,13 @@ export class Tooltip extends LitElement {
 
   render() {
     return html`
-      <span class="tooltip">
+      <span class="tooltip bottom">
         <span class="trigger">
           <slot name="trigger">
             ${this.trigger}
           </slot>
         </span>
-        <div class="content ${this.placement || 'top'}">
+        <div class="content ${this.placement || 'bottom'}">
           <slot name="content">
             ${this.content}
           </slot>

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

@@ -61,11 +61,11 @@ describe('Tooltip', () => {
   });
 
   it('should set the "top" style property if placement is left', async () => {
-    await checkContentStyles({ top: '-8px', left: '' }, 'left');
+    await checkContentStyles({ top: '-13px', left: '' }, 'left');
   });
 
   it('should set the "top" style property if placement is right', async () => {
-    await checkContentStyles({ top: '-8px', left: '' }, 'right');
+    await checkContentStyles({ top: '-13px', left: '' }, 'right');
   });
 
   it('should not set style properties if placement is top-right', async () => {

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',