@ordergroove/offers 2.26.2 → 2.26.3-alpha-PR-593-11.14

package/examples/cart.js

@@ -0,0 +1,105 @@
+{
+  "#################################    README   ":"This file is for Dev only and meant to match shopify /cart.js api. Should be json but with js extension",
+  "note": null,
+  "attributes": {},
+  "original_total_price": 2670,
+  "total_price": 2670,
+  "total_discount": 0,
+  "total_weight": 0.0,
+  "item_count": 3,
+  "items": [
+    {
+      "id": 40909392609469,
+      "properties": {
+        "_og-cart-interactions": [
+          "frequency change",
+          "frequency change",
+          "frequency change",
+          "frequency change",
+          "frequency change",
+          "frequency change"
+        ]
+      },
+      "quantity": 3,
+      "variant_id": 40909392609469,
+      "key": "40909392609469:e0e784cd9cab078d741e3fb4a5f35a94",
+      "title": "Cheap Watch",
+      "price": 890,
+      "original_price": 890,
+      "discounted_price": 890,
+      "line_price": 2670,
+      "original_line_price": 2670,
+      "total_discount": 0,
+      "discounts": [],
+      "sku": "",
+      "grams": 0,
+      "vendor": "Clara's Clocks",
+      "taxable": true,
+      "product_id": 7032252694717,
+      "product_has_only_default_variant": true,
+      "gift_card": false,
+      "final_price": 890,
+      "final_line_price": 2670,
+      "url": "\/products\/cheap-watch?variant=40909392609469",
+      "featured_image": {
+        "aspect_ratio": 0.728,
+        "alt": "Cheap Watch",
+        "height": 717,
+        "url": "https:\/\/cdn.shopify.com\/s\/files\/1\/0596\/3526\/9821\/products\/71unaYjYidL._AC_UX522.jpg?v=1634657932",
+        "width": 522
+      },
+      "image": "https:\/\/cdn.shopify.com\/s\/files\/1\/0596\/3526\/9821\/products\/71unaYjYidL._AC_UX522.jpg?v=1634657932",
+      "handle": "cheap-watch",
+      "requires_shipping": true,
+      "product_type": "",
+      "product_title": "Cheap Watch",
+      "product_description": "A cheap rainbow watch.",
+      "variant_title": null,
+      "variant_options": ["Default Title"],
+      "options_with_values": [
+        {
+          "name": "Title",
+          "value": "Default Title"
+        }
+      ],
+      "line_level_discount_allocations": [],
+      "line_level_total_discount": 0,
+      "selling_plan_allocation": {
+        "price_adjustments": [
+          {
+            "position": 1,
+            "price": 890
+          }
+        ],
+        "price": 890,
+        "compare_at_price": 1000,
+        "per_delivery_price": 890,
+        "selling_plan": {
+          "id": 547455165,
+          "name": "Delivered every 3 months, get 11% off your first order",
+          "description": null,
+          "options": [
+            {
+              "name": "Delivery every",
+              "position": 1,
+              "value": "3 months"
+            }
+          ],
+          "recurring_deliveries": true,
+          "price_adjustments": [
+            {
+              "order_count": null,
+              "position": 1,
+              "value_type": "percentage",
+              "value": 11
+            }
+          ]
+        }
+      }
+    }
+  ],
+  "requires_shipping": true,
+  "currency": "USD",
+  "items_subtotal_price": 2670,
+  "cart_level_discount_applications": []
+}

package/examples/index.html

@@ -121,8 +121,8 @@
 
     <pre id="the-html"></pre>
     <textarea id="the-js" readonly></textarea>
-    <script type="text/javascript" src="examples.js"></script>
+    <script type="text/javascript" src="../dist/examples.js"></script>
     <!-- offers should be latest since it overides og.offers namespace -->
-    <script type="text/javascript" src="offers.js"></script>
+    <script type="text/javascript" src="../dist/offers.js"></script>
   </body>
 </html>

package/examples/products/cheap-watch.js

@@ -0,0 +1,183 @@
+{
+  "#################################    README   ":"This file is for Dev only and meant to match shopify /products/<handle>.js api. Should be json but with js extension",
+  "id": 7032252694717,
+  "title": "Cheap Watch",
+  "handle": "cheap-watch",
+  "description": "A cheap rainbow watch.",
+  "published_at": "2021-10-19T11:38:52-04:00",
+  "created_at": "2021-10-19T11:38:51-04:00",
+  "vendor": "Clara's Clocks",
+  "type": "",
+  "tags": [],
+  "price": 1000,
+  "price_min": 1000,
+  "price_max": 1000,
+  "available": true,
+  "price_varies": false,
+  "compare_at_price": null,
+  "compare_at_price_min": 0,
+  "compare_at_price_max": 0,
+  "compare_at_price_varies": false,
+  "variants": [
+    {
+      "id": 40909392609469,
+      "title": "Default Title",
+      "option1": "Default Title",
+      "option2": null,
+      "option3": null,
+      "sku": "",
+      "requires_shipping": true,
+      "taxable": true,
+      "featured_image": null,
+      "available": true,
+      "name": "Cheap Watch",
+      "public_title": null,
+      "options": ["Default Title"],
+      "price": 1000,
+      "weight": 0,
+      "compare_at_price": null,
+      "inventory_management": null,
+      "barcode": "",
+      "requires_selling_plan": true,
+      "selling_plan_allocations": [
+        {
+          "price_adjustments": [
+            {
+              "position": 1,
+              "price": 890
+            }
+          ],
+          "price": 890,
+          "compare_at_price": 1000,
+          "per_delivery_price": 890,
+          "selling_plan_id": 547389629,
+          "selling_plan_group_id": "1a1dc6d22dd730c6851c3596f5c46e26ff776cc2"
+        }, {
+          "price_adjustments": [
+            {
+              "position": 1,
+              "price": 890
+            }
+          ],
+          "price": 890,
+          "compare_at_price": 1000,
+          "per_delivery_price": 890,
+          "selling_plan_id": 547422397,
+          "selling_plan_group_id": "1a1dc6d22dd730c6851c3596f5c46e26ff776cc2"
+        }, {
+          "price_adjustments": [
+            {
+              "position": 1,
+              "price": 890
+            }
+          ],
+          "price": 890,
+          "compare_at_price": 1000,
+          "per_delivery_price": 890,
+          "selling_plan_id": 547455165,
+          "selling_plan_group_id": "1a1dc6d22dd730c6851c3596f5c46e26ff776cc2"
+        }
+      ]
+    }
+  ],
+  "images": ["//cdn.shopify.com/s/files/1/0596/3526/9821/products/71unaYjYidL._AC_UX522.jpg?v=1634657932"],
+  "featured_image": "//cdn.shopify.com/s/files/1/0596/3526/9821/products/71unaYjYidL._AC_UX522.jpg?v=1634657932",
+  "options": ["Title"],
+  "media": [
+    {
+      "alt": null,
+      "id": 22999019061437,
+      "position": 1,
+      "preview_image": {
+        "aspect_ratio": 0.728,
+        "height": 717,
+        "width": 522,
+        "src": "https://cdn.shopify.com/s/files/1/0596/3526/9821/products/71unaYjYidL._AC_UX522.jpg?v=1634657932"
+      },
+      "aspect_ratio": 0.728,
+      "height": 717,
+      "media_type": "image",
+      "src": "https://cdn.shopify.com/s/files/1/0596/3526/9821/products/71unaYjYidL._AC_UX522.jpg?v=1634657932",
+      "width": 522
+    }
+  ],
+  "requires_selling_plan": true,
+  "selling_plan_groups": [
+    {
+      "id": "1a1dc6d22dd730c6851c3596f5c46e26ff776cc2",
+      "name": "Subscribe and Save",
+      "options": [
+        {
+          "name": "Delivery every",
+          "position": 1,
+          "values": ["month", "2 months", "3 months"]
+        }
+      ],
+      "selling_plans": [
+        {
+          "id": 547389629,
+          "name": "Delivered every month, get 11% off your first order",
+          "description": null,
+          "options": [
+            {
+              "name": "Delivery every",
+              "position": 1,
+              "value": "month"
+            }
+          ],
+          "recurring_deliveries": true,
+          "price_adjustments": [
+            {
+              "order_count": null,
+              "position": 1,
+              "value_type": "percentage",
+              "value": 11
+            }
+          ]
+        }, {
+          "id": 547422397,
+          "name": "Delivered every 2 months, get 11% off your first order",
+          "description": null,
+          "options": [
+            {
+              "name": "Delivery every",
+              "position": 1,
+              "value": "2 months"
+            }
+          ],
+          "recurring_deliveries": true,
+          "price_adjustments": [
+            {
+              "order_count": null,
+              "position": 1,
+              "value_type": "percentage",
+              "value": 11
+            }
+          ]
+        }, {
+          "id": 547455165,
+          "name": "Delivered every 3 months, get 11% off your first order",
+          "description": null,
+          "options": [
+            {
+              "name": "Delivery every",
+              "position": 1,
+              "value": "3 months"
+            }
+          ],
+          "recurring_deliveries": true,
+          "price_adjustments": [
+            {
+              "order_count": null,
+              "position": 1,
+              "value_type": "percentage",
+              "value": 11
+            }
+          ]
+        }
+      ],
+      "app_id": null
+    }
+  ],
+  "content": "A cheap rainbow watch."
+}

package/examples/shopify-cart.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ordergroove Offers</title>
+  </head>
+  <body id="single-offer" >
+    <h1>cart</h1>
+    <og-offer product="40909392609469" id="regular1" location="cart" cart></og-offer>
+    <!-- offers should be latest since it overides og.offers namespace -->
+
+    <script type="text/javascript">
+      var Shopify = {
+        routes: {
+          root: './'
+        }
+      }
+    </script>
+    <script type="text/javascript" src="../dist/offers.js"></script>
+    <script type="text/javascript">
+      og
+        .offers
+        .initialize('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging')
+    </script>
+
+  </body>
+</html>

package/examples/shopify-pdp.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ordergroove Offers</title>
+
+    <meta property="og:type" content="product">
+    <meta property="og:url" content="https://claras-clocks.myshopify.com/products/cheap-watch">
+
+  </head>
+  <body id="single-offer" >
+
+    <form action="shopify-cart.html" menthod="POST">
+      <og-offer product="40909392609469" id="regular1"></og-offer>
+      <!-- offers should be latest since it overides og.offers namespace -->
+      <button> Add to cart</button>
+    </form>
+
+    <script type="text/javascript">
+      var Shopify = {
+        routes: {
+          root: './'
+        }
+      }
+    </script>
+
+    <script type="text/javascript" src="../dist/offers.js"></script>
+
+    <script type="text/javascript">
+      og
+        .offers
+        .initialize('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging')
+    </script>
+  </body>
+</html>

package/karma.conf.js

@@ -9,8 +9,9 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
+      // make sure is the first on the list that inits the offers module
       {
-        pattern: 'src/init-test.js',
+        pattern: 'src/__tests__/offers.spec.js',
         type: 'js',
         included: true,
         served: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.26.2",
+  "version": "2.26.3-alpha-PR-593-11.14+d9bad25e",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -12,14 +12,14 @@
   },
   "scripts": {
     "start": "npm run build -- --serve",
-    "build": "rm -rf dist && mkdir dist && cp examples/index.html dist/index.html && node build.js",
+    "build": "rm -rf dist && mkdir dist && node build.js",
     "build:prod": "rm -rf dist && node build.js --prod",
     "bundlesize": "../../node_modules/.bin/bundlesize",
     "lint": "../../node_modules/.bin/eslint --ignore-path ../../.gitignore ./src",
     "prepublishOnly": "npm run -s build:prod && npm run -s bundlesize",
     "test": "../../node_modules/.bin/karma start --single-run --log-level error --reporters progress && npm run build && ../../node_modules/.bin/karma start --single-run --log-level error --reporters progress karma-functional.conf.js",
     "test:watch": "../../node_modules/.bin/karma start",
-    "test:watch:functional": "npm run build:dev && ../../node_modules/.bin/karma start karma-functional.conf.js",
+    "test:watch:functional": "npm run build && ../../node_modules/.bin/karma start karma-functional.conf.js",
     "test:functional": "npm run test:watch:functional -- --single-run --log-level error --reporters progress",
     "test:watch:silent": "../../node_modules/.bin/karma start --log-level error  --reporters dots"
   },
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.5"
   },
-  "gitHead": "a75024a8bbd51b8a06c6a384f53800ae350530d4"
+  "gitHead": "d9bad25ec1dda9bc89dacaa172c91f689be0df5d"
 }

package/src/__tests__/offers.spec.js

@@ -1,6 +1,36 @@
-import { offers } from '../index';
+import * as offersAll from '../index';
 import { api } from '../core/api';
 
+const offers = offersAll.offers;
+
+offers.initialize('some-merchant', 'staging');
+describe('Offers API', () => {
+  const facade = jasmine.objectContaining({
+    store: jasmine.any(Object),
+    addOptinChangedCallback: jasmine.any(Function),
+    addTemplate: jasmine.any(Function),
+    clear: jasmine.any(Function),
+    config: jasmine.any(Function),
+    disableOptinChangedCallbacks: jasmine.any(Function),
+    getOptins: jasmine.any(Function),
+    getProductsForPurchasePost: jasmine.any(Function),
+    initialize: jasmine.any(Function),
+    previewMode: jasmine.any(Function),
+    register: jasmine.any(Function),
+    resolveSettings: jasmine.any(Function),
+    setAuthUrl: jasmine.any(Function),
+    setEnvironment: jasmine.any(Function),
+    setLocale: jasmine.any(Function),
+    setMerchantId: jasmine.any(Function),
+    setPublicPath: jasmine.any(Function),
+    setTemplates: jasmine.any(Function)
+  });
+  it('imported ', () => {
+    expect(offersAll).toEqual(facade);
+    expect(offers).toEqual(facade);
+  });
+});
+
 describe('Offers', () => {
   let register, fetchOfferSpy, mockStore;
   // TODO revisit chunks
@@ -30,7 +60,7 @@ describe('Offers', () => {
 
     offers.initialize('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging');
     expect(warn).toHaveBeenCalledWith('og.offers has been initialized already. Skipping.');
-    expect(register).toHaveBeenCalledTimes(1);
+    expect(register).not.toHaveBeenCalled();
   });
 
   it('should warn if attempting to initialize twice', () => {

package/src/components/FrequencyStatus.js

@@ -14,16 +14,17 @@ import { TemplateElement } from '../core/base';
 
 export const frequencyText = (frequency, initial) => {
   const { every, every_period: period } = parseFrequency(frequency);
-
-  return html`
-    ${every}
-    <og-text key="frequencyPeriods" variant="${period}" pluralize="${every}"></og-text>
-    ${initial && initial === frequency
-      ? html`
-          <og-text key="defaultFrequencyCopy"></og-text>
-        `
-      : ''}
-  `;
+  return every && period
+    ? html`
+        ${every}
+        <og-text key="frequencyPeriods" variant="${period}" pluralize="${every}"></og-text>
+        ${initial && initial === frequency
+          ? html`
+              <og-text key="defaultFrequencyCopy"></og-text>
+            `
+          : ''}
+      `
+    : frequency;
 };
 
 export class FrequencyStatus extends withProduct(TemplateElement) {
@@ -90,7 +91,9 @@ export const mapStateToProps = (state, ownProps) => ({
   subscribed: makeOptedinSelector(ownProps.product)(state),
   frequency: makeProductFrequencySelector(ownProps.product)(state),
   productDefaultFrequency: makeProductDefaultFrequencySelector((ownProps.product || {}).id)(state),
-  ...configSelector(state, ownProps, 'frequencies', []),
+  configDefaultFrequency: state.config?.defaultFrequency,
+  frequenciesText: state.config?.frequenciesText,
+  ...configSelector(state, ownProps, 'frequencies'),
   ...configSelector(state, ownProps, 'defaultFrequency'),
   ...templatesSelector(state, ownProps)
 });

package/src/components/Offer.js

@@ -49,7 +49,10 @@ export class Offer extends TemplateElement {
       firstOrderPlaceDate: { type: String, attribute: 'first-order-place-date' },
       productToSubscribe: { type: String, attribute: 'product-to-subscribe' },
       subscribed: { type: Boolean, reflect: true },
-      frequency: { type: String, reflect: true }
+      frequency: { type: String, reflect: true },
+      productFrequency: { type: String },
+      isCart: { type: Boolean, attribute: 'cart' },
+      optedin: { type: Object }
     };
   }
 
@@ -141,11 +144,10 @@ export class Offer extends TemplateElement {
       </div>
       <div>
         <og-optin-button>
-          
-          
           <og-price discount>
             <span slot="prepend">Subscribe and get</span>
             <span slot="append">off</span>
+            <og-text key="offerOptInLabel" slot="fallback"></og-text> 
           </og-price>
           <og-price regular></og-price>
           <og-price subscription></og-price>
@@ -213,6 +215,7 @@ export class Offer extends TemplateElement {
         The product is in your next upcomming order
       </og-when>
     </og-when>
+    
     `;
   }
 
@@ -242,9 +245,8 @@ export class Offer extends TemplateElement {
       this.setPreview(this.preview, changed.get('preview'), this);
     }
 
-    this.frequency = this.defaultFrequency;
     if (changed.has('product') && this.product.id && !this.isPreview) {
-      this.fetchOffer(this.product.id);
+      this.fetchOffer(this.product.id, 'pdp', this);
     }
 
     if (changed.has('firstOrderPlaceDate') && this.product.id && !this.isPreview) {
@@ -277,7 +279,7 @@ export class Offer extends TemplateElement {
         changed.has('product')) &&
       this.offerId &&
       this.autoshipByDefault &&
-      this.location === 'cart' &&
+      (this.location === 'cart' || this.isCart) &&
       this.product.id &&
       this.optinProduct &&
       !(this.optedin || []).find(product => isSameProduct(product, this.product))
@@ -287,7 +289,8 @@ export class Offer extends TemplateElement {
           ...this.product,
           ...(this.productComponents.length && { components: this.productComponents })
         },
-        this.defaultFrequency
+        this.defaultFrequency,
+        this
       );
     }
   }
@@ -329,6 +332,7 @@ export const mapStateToProps = (state, ownProps) => ({
   subscribed: makeOptedinSelector(ownProps.product)(state),
   ...templatesSelector(state)
 });
+
 export const ConnectedOffer = connect(mapStateToProps, {
   fetchOffer,
   fetchOrders,

package/src/components/OptinButton.js

@@ -16,7 +16,7 @@ export class OptinButton extends OptinStatus {
   }
 
   handleClick(ev) {
-    this.optinProduct(resolveProduct(this), this.defaultFrequency);
+    this.optinProduct(resolveProduct(this), this.defaultFrequency, this.offer);
     ev.preventDefault();
   }
 

package/src/components/OptinSelect.js

@@ -36,9 +36,9 @@ export class OptinSelect extends withChildOptions(OptinStatus) {
 
   onOptinChange(value) {
     if (value === 'optedOut') {
-      this.optoutProduct(this.product);
+      this.optoutProduct(this.product, this.offer);
     } else {
-      this.productChangeFrequency(this.product, value);
+      this.productChangeFrequency(this.product, value, this.offer);
     }
   }
 

package/src/components/OptinToggle.js

@@ -13,8 +13,8 @@ export class OptinToggle extends OptinStatus {
   }
 
   handleClick(ev) {
-    if (this.subscribed) this.optoutProduct(this.product);
-    else this.optinProduct(this.product, this.frequency || this.defaultFrequency);
+    if (this.subscribed) this.optoutProduct(this.product, this.offer);
+    else this.optinProduct(this.product, this.frequency || this.defaultFrequency, this.offer);
     ev.preventDefault();
   }
 

package/src/components/OptoutButton.js

@@ -12,7 +12,7 @@ export class OptoutButton extends OptinStatus {
   }
 
   handleClick(ev) {
-    this.optoutProduct(this.product);
+    this.optoutProduct(this.product, this.offer);
     ev.preventDefault();
   }
 

package/src/components/Price.js

@@ -18,7 +18,7 @@ export class Price extends withProduct(TemplateElement) {
   }
 
   get value() {
-    const frequency = this.frequency || (this.offer && this.offer.defaultFrequency);
+    const frequency = this.frequency || this.offer?.defaultFrequency;
     const plans = this.productPlans[this.product.id] || {};
     const currentPlan = plans[frequency] || [];
     if (!currentPlan) return '';
@@ -42,13 +42,13 @@ export class Price extends withProduct(TemplateElement) {
       `;
 
     return html`
-      <slot></slot>
+      <slot name="fallback"></slot>
     `;
   }
 }
 const mapStateToProps = (state, ownProps) => ({
   productPlans: state.productPlans,
-  frequency: makeProductFrequencySelector(ownProps.product)(state)
+  frequency: ownProps.offer?.frequency || makeProductFrequencySelector(ownProps.product)(state)
 });
 
 export default connect(mapStateToProps)(Price);

package/src/components/Select.js

@@ -35,14 +35,7 @@ export class Select extends LitElement {
       select::-ms-expand {
         display: none;
       }
-      select:hover {
-        // border-color: #888;
-      }
       select:focus {
-        // border-color: #aaa;
-        // box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
-        // box-shadow: 0 0 0 3px -moz-mac-focusring;
-        // color: #222;
         outline: none;
       }
       select option {
@@ -72,19 +65,16 @@ export class Select extends LitElement {
   }
 
   render() {
+    const handleOnChange = ev => this.onChange(ev);
     return html`
-      <select @change="${this.onChange}" .value="${this.selected}">
+      <select @change="${handleOnChange}">
         ${this.options.map(
           option => html`
-            <option value="${option.value}" ?selected=${this.selected === option.value}>${option.text}</option>
+            <option value="${option.value}" ?selected=${option.value === this.selected}>${option.text}</option>
           `
         )}
       </select>
       <span>&#9660;</span>
-      <!-- <svg xmlns="http://www.w3.org/2000/svg" width="36" height="100%" viewBox="0 0 36 36">
-        <path d="M10.5 15l7.5 7.5 7.5-7.5z" />
-        <path d="M0 0h36v36h-36z" fill="none" />
-      </svg> -->
     `;
   }
 }