@ordergroove/offers 2.28.7-alpha-PR-690-12.10 → 2.28.7

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.28.7](https://github.com/ordergroove/plush-toys/compare/@ordergroove/offers@2.28.6...@ordergroove/offers@2.28.7) (2022-11-08)
+
+
+### Bug Fixes
+
+* **offers:** tracking for shopify default to sub ([46a0366](https://github.com/ordergroove/plush-toys/commit/46a036687e468534a20872a71751bbe897963b33))
+
+
+
+
+
 ## [2.28.6](https://github.com/ordergroove/plush-toys/compare/@ordergroove/offers@2.28.5...@ordergroove/offers@2.28.6) (2022-11-01)
 
 

package/README.md

@@ -8,32 +8,31 @@ Ordergroove's offers library allows you to display and track subscription optins
   npm install --save @ordergroove/offers
 ```
 
-## Local Development
 
-To start local development server you can do
+## Local Development
 
+To start local development server you can do 
 ```sh
   cd packages/offers
-  npm start
+  npm start 
 ```
-
 Browse http://localhost:8080
 
 ### Merchant specific local development
-
 You need to use [http redirector chrome extension](https://chrome.google.com/webstore/detail/redirector/ocgpenflpmgnfapjedencafcfakcekcd?hl=en). And configure it to redirect staging/prod main.js to localhost:8080.
 
 **main.js**
-
 ```
 Pattern: https?://(staging\.)?static.ordergroove.com/\w+/main.js$
 Redirect to: http://localhost:8080/dist/offers.js
 ```
 
+
 **soucemap**
 Pattern: https?://(staging\.)?static.ordergroove.com/\w+/offers.js.map
 Redirect to: http://localhost:8080/dist/offers.js.map
 
+
 ## Configuration
 
 ## Add og-offer elements
@@ -57,7 +56,6 @@ The offers library registers a custom element, `<og-offer></og-offer>`, that can
 ```html
 <og-offer first-order-place-date="2020-12-24"></og-offer>
 ```
-
 Note supported format is `YY-MM-DD` and needs to be a day in the future. If some of these is missing, will be ignored.
 
 4. The `product-to-subscribe` is optional and allows to set an alternative product which the subscription is going to be created with.
@@ -65,7 +63,6 @@ Note supported format is `YY-MM-DD` and needs to be a day in the future. If some
 ```html
 <og-offer product="123" product-to-subscribe="678"></og-offer>
 ```
-
 Even though offer applies to product "123", the subscription is created with product "678"
 
 ## Behavior & Functionality
@@ -76,38 +73,42 @@ The state of the offer is maintained for all products. If you set the product at
 
 The state of opted-in products is stored in local storage, with the key `OG_STATE`. On page load, the offer element reads from local storage to recreate state for opted-in products. For example, if a user opts in to a product on a given page, offers for that same product will appear as opted in on all other pages.
 
+
 ### DOM Events
 
-| Event                       | Description                              | common scenarios                                                |
-| --------------------------- | ---------------------------------------- | --------------------------------------------------------------- |
-| og-receive-offer            | offers is ready to be rendered in the UI | Initialize custom UI logic when offer shows up                  |
-| og-optout-product           | user has opted out the product           |
-| og-optin-product            | user has opted in the product            |
-| og-product-change-frequency | user has changed the delivery frequency  |
-| og-cart-updated             | offer in the cart page has been changed  | Perform side effect such as update the subtotal or total fields |
+|Event | Description | common scenarios |
+|-|-|-|
+| og-receive-offer | offers is ready to be rendered in the UI  | Initialize custom UI logic when offer shows up |
+| og-optout-product | user has opted out the product |
+| og-optin-product |  user has opted in the product |
+| og-product-change-frequency | user has changed the delivery frequency |
+| og-cart-updated | offer in the cart page has been changed | Perform side effect such as update the subtotal or total fields |
+
 
 ```js
-document.addEventListener('og-receive-offer', ev => {
-  // ocurs when offers is ready to be rendered in the UI
-  // initialize custom UI, style shadow dom
-  const offer = ev.target;
-});
 
-document.addEventListener('og-optout-product', ev => {
-  // perform a side-effect when OPTOUT_PRODUCT action happens
-});
+  document.addEventListener('og-receive-offer', ev => {
+    // ocurs when offers is ready to be rendered in the UI 
+    // initialize custom UI, style shadow dom
+    const offer = ev.target;
+  })
 
-document.addEventListener('og-optin-product', ev => {
-  // perform a side-effect when OPTIN_PRODUCT action happens
-});
+  document.addEventListener('og-optout-product', ev => {
+    // perform a side-effect when OPTOUT_PRODUCT action happens
+  })
 
-document.addEventListener('og-product-change-frequency', ev => {
-  // perform a side-effect when PRODUCT_CHANGE_FREQUENCY action happens
-});
-```
+  document.addEventListener('og-optin-product', ev => {
+    // perform a side-effect when OPTIN_PRODUCT action happens
+  })
+
+  document.addEventListener('og-product-change-frequency', ev => {
+    // perform a side-effect when PRODUCT_CHANGE_FREQUENCY action happens
+  })
 
+```
 ### Features
 
+
 #### Default optin by product
 
 The library supports the notion of default optin on a product-by-product basis. If a product is marked as optedin by default, the offer will appear as opted in upon initial load and for as long as the user has not explictly opted out. If a user explicitly opts out, the opt-out selection will be remembered for all offers across all pages for that same product.
@@ -124,6 +125,7 @@ If a product is marked as opted in by default and the user has not explicitly op
 
 The library resgisters a global variable, `og.offers`, that contains the following helper methods:
 
+
 ### initialize(merchantId, environment, authUrl);
 
 In order to initilize the library you need to call `initialize()` method or shortcut in UMD `og.offers`.
@@ -203,60 +205,64 @@ Configures the library options for advance usage or customization.
 import { config } from '@ordergroove/offers';
 
 config({
-  frequencies: [
-    {
-      every: 3,
-      period: 2
-    },
-    {
-      every: 2,
-      period: 2
-    }
+  "frequencies": [
+      {
+          "every": 3,
+          "period": 2
+      },
+      {
+          "every": 2,
+          "period": 2
+      }
   ],
-  defaultFrequency: {
-    every: 2,
-    period: 2
+  "defaultFrequency": {
+      "every": 2,
+      "period": 2
   },
-  offerType: 'radio'
+  "offerType": "radio"
 });
 ```
 
 #### UMD
 
 ```javascript
-og.offers('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging', '/auth').config({
-  frequencies: [
-    {
-      every: 3,
-      period: 2
+og.offers('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging', '/auth')
+  .config({
+    "frequencies": [
+        {
+            "every": 3,
+            "period": 2
+        },
+        {
+            "every": 2,
+            "period": 2
+        }
+    ],
+    "defaultFrequency": {
+        "every": 2,
+        "period": 2
     },
-    {
-      every: 2,
-      period: 2
-    }
-  ],
-  defaultFrequency: {
-    every: 2,
-    period: 2
-  },
-  offerType: 'radio'
-});
+    "offerType": "radio"
+})
 ```
 
+
 ### setLocale(localeObject);
 
 Configures the library locale text copies
 
-| Property                          | Description                        | Default value                                                                                                                 |
-| --------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| **defaultFrequencyCopy** _string_ | Default frequency copy             | Recommended                                                                                                                   |
-| **offerEveryLabel** _string_      | Subscribe frequency label          | Ships Every:                                                                                                                  |
-| **offerOptInLabel** _string_      | Subscribe option copy              | Subscribe and get 20% off                                                                                                     |
-| **offerOptOutLabel** _string_     | One-time option copy               | One-time                                                                                                                      |
-| **offerTooltipContent** _string_  | Tool tip copy                      | Subscribe to this product and have it conveniently delivered to you at the frequency you choose. Promotion subject to change. |
-| **offerTooltipTrigger** _string_  | Tool tip link copy                 | More info                                                                                                                     |
-| **showTooltip** _boolean_         | Add a tool tip                     | false                                                                                                                         |
-| **frequencyPeriods** _object_     | defines the frequency period names | `{1:"days",2:"weeks",3:"months"}`                                                                                             |
+| Property | Description | Default value |
+|----------|-------------|---------------|
+| **defaultFrequencyCopy** *string* | Default frequency copy | Recommended |
+| **offerEveryLabel** *string* | Subscribe frequency label | Ships Every:  |
+| **offerOptInLabel** *string* | Subscribe option copy | Subscribe and get 20% off |
+| **offerOptOutLabel** *string* | One-time option copy | One-time |
+| **offerTooltipContent** *string* | Tool tip copy | Subscribe to this product and have it conveniently delivered to you at the frequency you choose. Promotion subject to change. |
+| **offerTooltipTrigger** *string* | Tool tip link copy | More info |
+| **showTooltip** *boolean* | Add a tool tip | false |
+| **frequencyPeriods** *object* | defines the frequency period names | `{1:"days",2:"weeks",3:"months"}` |
+
+
 
 **Returns** Object as offers module to chain method calls.
 
@@ -266,26 +272,24 @@ Configures the library locale text copies
 import { setLocale } from '@ordergroove/offers';
 
 setLocale({
-  defaultFrequencyCopy: 'Recommended',
-  offerOptInLabel: 'Save Lots and Lots of Money',
-  offerEveryLabel: 'Ships Every: ',
-  offerOptOutLabel: "Don't save money",
-  showTooltip: !0,
-  offerTooltipTrigger: 'More info',
-  offerTooltipContent:
-    'Subscribe to this product and have it conveniently delivered to you at the frequency you choose. Promotion subject to change.',
-  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. Promotion subject to change.',
-  upsellModalOptOutLabel: 'Get one-time',
-  upsellModalOptInLabel: 'Subscribe and get 10% off on every order',
-  upsellModalConfirmLabel: 'Add',
-  frequencyPeriods: {
-    1: 'days',
-    2: 'weeks',
-    3: 'months'
-  }
+    defaultFrequencyCopy: "Recommended",
+    offerOptInLabel: "Save Lots and Lots of Money",
+    offerEveryLabel: "Ships Every: ",
+    offerOptOutLabel: "Don't save money",
+    showTooltip: !0,
+    offerTooltipTrigger: "More info",
+    offerTooltipContent: "Subscribe to this product and have it conveniently delivered to you at the frequency you choose. Promotion subject to change.",
+    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. Promotion subject to change.",
+    upsellModalOptOutLabel: "Get one-time",
+    upsellModalOptInLabel: "Subscribe and get 10% off on every order",
+    upsellModalConfirmLabel: "Add",
+    frequencyPeriods: {
+        1: "days",
+        2: "weeks",
+        3: "months"
+    }
 });
 ```
 
@@ -321,7 +325,7 @@ An object containing the properties `productId` `components` and `optedIn`
 ```javascript
 import { addOptinChangedCallback } from '@ordergroove/offers';
 
-function onOptinChanged({ productId, components, optedIn }) {}
+function onOptinChanged({ productId, components, optedIn }) {};
 addOptinChangedCallback(onOptinChanged);
 ```
 
@@ -428,6 +432,7 @@ og.offers.clear();
 Global styling can be styled by using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
 
 ```css
+
 * {
   --og-global-font-family: Arial, Helvetica, sans-serif;
   --og-global-font-size: 15px;
@@ -437,7 +442,6 @@ Global styling can be styled by using [CSS Variables](https://developer.mozilla.
   --og-tooltip-background: #ececec;
   --og-tooltip-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
   --og-tooltip-font-color: #298266;
-  --og-checkbox-border-color: #000000;
   --og-upsell-font-family: Arial, Helvetica, sans-serif;
   --og-upsell-font-size: 13px;
   --og-upsell-font-color: #298266;
@@ -462,12 +466,12 @@ The offer element supports customized content via slots.
 </of-offer>
 ```
 
-## Date Formating
 
+## Date Formating 
 Elements such as `<og-next-upcoming-order>` supports date formatting by passing format attribute
 
 | {{day}}           | Day of the month as a decimal number (range 01 to 31).       |
-| ----------------- | ------------------------------------------------------------ |
+|-------------------|--------------------------------------------------------------|
 | {{day-numeric}}   | Day of the month as a decimal number (range 1 to 31).        |
 | {{day-short}}     | Abbreviated name of the day of the week.                     |
 | {{day-long}}      | Full name of the day of the week.                            |
@@ -478,16 +482,17 @@ Elements such as `<og-next-upcoming-order>` supports date formatting by passing
 | {{year}}          | Year as a decimal number without a century (range 00 to 99). |
 | {{year-numeric}}  | Year as a decimal number including the century.              |
 
+
 ### Examples
 
 ```html
-<og-next-upcoming-order format="{{month-long}} {{day}}, {{year-numeric}}"></og-next-upcoming-order>
+  <og-next-upcoming-order format="{{month-long}} {{day}}, {{year-numeric}}"></og-next-upcoming-order>
 ```
 
+
 ## API
 
 ### og-tooltip
-
 Displays a tooltop with some content.
 
 ```html
@@ -500,14 +505,12 @@ Displays a tooltop with some content.
 ```
 
 **Options**
-_placement_ top|bottom|left|right
+*placement* top|bottom|left|right 
 
 **Css customization**
-
 #### og-tooltip
 
 Suports the following css variables
-
 - --og-tooltip-family
 - --og-tooltip-size
 - --og-tooltip-color
@@ -516,18 +519,18 @@ Suports the following css variables
 
 The `placement` attribute can be one of top, top-left, top-right, bottom, bottom-left, bottom-right, right or left
 
-### og-incentive-text
 
+### og-incentive-text
 Display information from dynamic incentives.
-By default the component will search for a ongoing discount class. Attribute _initial_ can be specified to force search in initial incentives.
-
-Current keys allowed in from clause are:
+By default the component will search for a ongoing discount class. Attribute *initial* can be specified to force search in initial incentives.
 
+Current keys allowed in from clause are: 
 - DiscountAmount Shows discount amount in dollars
 - DiscountPercent Shows discount amount in percent
 - ShippingDiscountPercent Shows whether or not is free shipping
 
-#### og-incentive-text examples
+
+#### og-incentive-text examples 
 
 ```html
 <og-incentive-text from="DiscountPercent"></og-incentive-text>
@@ -535,25 +538,24 @@ Current keys allowed in from clause are:
 <og-incentive-text from="ShippingDiscountPercent"></og-incentive-text>
 ```
 
+
 ### og-when
+Element that renders it chilren when test condition matches 
 
-Element that renders it chilren when test condition matches
 
-| DESCRIPTOR                   | SUMMARY                                                                                         | Example                                         |
-| ---------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------- |
-| inStock                      | When the product that offers is linked to is in stock                                           | `<og-when test="inStock">`                      |
-| eligible                     | If product is configured as eligible for subscription program                                   | `<og-when test="eligible">`                     |
-| subscriptionEligible         | Product is eligible for create a subscription. Is true when inStock and eligible are both true. | `<og-when test="subscriptionEligible">`         |
-| hasUpsellGroup               | If product in DB is configure to be eligible for upsell                                         | `<og-when test="hasUpsellGroup">`               |
-| hasUpcomingOrder             | If user is authenticated and has an upcoming order                                              | `<og-when test="hasUpcomingOrder">`             |
-| upcomingOrderContainsProduct | If the upcoming order contains the product being offered                                        | `<og-when test="upcomingOrderContainsProduct">` |
-| upsellEligible               | when an offer and product are eligible for upsell and usr has an upcomming order                | `<og-when test="upsellEligible">`               |
-| regularEligible              | this is similar to subscriptionEligible but it also checks that is not upsellEligible           | `<og-when test="regularEligible">`              |
+| DESCRIPTOR                   | SUMMARY                                                                                         | Example |
+|------------------------------|-------------------------------------------------------------------------------------------------|---------------------------|
+| inStock                      | When the product that offers is linked to is in stock                                           | `<og-when test="inStock">`|
+| eligible                     | If product is configured as eligible for subscription program                                   | `<og-when test="eligible">`|
+| subscriptionEligible         | Product is eligible for create a subscription. Is true when inStock and eligible are both true. | `<og-when test="subscriptionEligible">`|
+| hasUpsellGroup               | If product in DB is configure to be eligible for upsell                                         | `<og-when test="hasUpsellGroup">`|
+| hasUpcomingOrder             | If user is authenticated and has an upcoming order                                              | `<og-when test="hasUpcomingOrder">`|
+| upcomingOrderContainsProduct | If the upcoming order contains the product being offered                                        | `<og-when test="upcomingOrderContainsProduct">`|
+| upsellEligible               | when an offer and product are eligible for upsell and usr has an upcomming order                | `<og-when test="upsellEligible">`|
+| regularEligible              | this is similar to subscriptionEligible but it also checks that is not upsellEligible           | `<og-when test="regularEligible">`|
 
 #### Combine descriptors
-
 Supported logical operators
-
 ```
 | Or
 & And
@@ -562,13 +564,13 @@ Supported logical operators
 ```
 
 **Examples**
-
 ```
 !inStock
 inStock&(!eligible)
 regularEligible|upsellEligible
 ```
 
+
 #### 1. Simple use case: show a regular offer
 
 The folowing code will show and offer only if regular and it will show nothing if upsell
@@ -581,6 +583,7 @@ The folowing code will show and offer only if regular and it will show nothing i
 </og-offer>
 ```
 
+
 #### 2. Simple use case: show a regular and upsell offer
 
 The folowing code will show and offer only if regular and it will show nothing if upsell
@@ -596,6 +599,8 @@ The folowing code will show and offer only if regular and it will show nothing i
 </og-offer>
 ```
 
+
+
 #### 3. Advance show same offer for both cases
 
 The folowing code will show and offer only if regular and it will show nothing if upsell

package/dist/bundle-report.html

@@ -1,14 +1,14 @@
 <pre id="esbuild-metadata">
-  dist/examples.js ─────────────────────────────────────────── 258.9kb ─ 100.0%
-   ├ ../offers-templates/dist/main.js ──────────────────────── 249.3kb ── 96.3%
+  dist/examples.js ─────────────────────────────────────────── 258.8kb ─ 100.0%
+   ├ ../offers-templates/dist/main.js ──────────────────────── 249.2kb ── 96.3%
    │  └ examples/index.js
    └ examples/index.js ───────────────────────────────────────── 8.5kb ─── 3.3%
 
-  dist/offers.js ───────────────────────────────────────────── 127.1kb ─ 100.0%
+  dist/offers.js ───────────────────────────────────────────── 127.5kb ─ 100.0%
    ├ src/components/Offer.js ─────────────────────────────────── 8.2kb ─── 6.4%
    │  └ src/make-api.js
    │     └ src/index.js
-   ├ node_modules/redux/es/redux.js ──────────────────────────── 6.7kb ─── 5.3%
+   ├ node_modules/redux/es/redux.js ──────────────────────────── 6.7kb ─── 5.2%
    │  └ src/shopify/shopifyReducer.js
    │     └ src/index.js
    ├ src/core/reducer.js ─────────────────────────────────────── 6.1kb ─── 4.8%
@@ -34,7 +34,7 @@
    ├ src/components/Modal.js ─────────────────────────────────── 4.7kb ─── 3.7%
    │  └ src/make-api.js
    │     └ src/index.js
-   ├ src/shopify/shopifyMiddleware.ts ────────────────────────── 4.5kb ─── 3.6%
+   ├ src/shopify/shopifyMiddleware.ts ────────────────────────── 4.6kb ─── 3.6%
    │  └ src/index.js
    ├ src/components/Tooltip.js ───────────────────────────────── 4.4kb ─── 3.4%
    │  └ src/make-api.js
@@ -42,7 +42,7 @@
    ├ node_modules/lodash.memoize/index.js ────────────────────── 4.0kb ─── 3.1%
    │  └ src/shopify/shopifyMiddleware.ts
    │     └ src/index.js
-   ├ src/core/actions.js ─────────────────────────────────────── 3.8kb ─── 3.0%
+   ├ src/core/actions.js ─────────────────────────────────────── 3.8kb ─── 2.9%
    │  └ src/shopify/shopifyBootstrap.ts
    │     └ src/index.js
    ├ src/core/api.js ─────────────────────────────────────────── 2.6kb ─── 2.0%
@@ -119,6 +119,8 @@
    ├ src/components/UpsellButton.js ──────────────────────────── 1.1kb ─── 0.9%
    │  └ src/make-api.js
    │     └ src/index.js
+   ├ src/shopify/shopifyTrackingMiddleware.ts ────────────────── 1.1kb ─── 0.8%
+   │  └ src/index.js
    ├ node_modules/lit-html/lib/modify-template.js ────────────── 1.0kb ─── 0.8%
    │  └ node_modules/lit-html/lib/shady-render.js
    │     └ node_modules/lit-element/lit-element.js
@@ -147,7 +149,7 @@
    ├ src/components/OptinButton.js ──────────────────────────── 1005b ──── 0.8%
    │  └ src/make-api.js
    │     └ src/index.js
-   ├ node_modules/lit-element/lib/css-tag.js ─────────────────── 978b ──── 0.8%
+   ├ node_modules/lit-element/lib/css-tag.js ─────────────────── 978b ──── 0.7%
    │  └ node_modules/lit-element/lit-element.js
    │     └ src/components/Price.js
    │        └ src/make-api.js
@@ -179,8 +181,6 @@
    │        └ src/components/Price.js
    │           └ src/make-api.js
    │              └ src/index.js
-   ├ src/shopify/shopifyTrackingMiddleware.ts ────────────────── 620b ──── 0.5%
-   │  └ src/index.js
    ├ node_modules/logical-expression-parser/polish.js ────────── 594b ──── 0.5%
    │  └ node_modules/logical-expression-parser/index.js
    │     └ src/components/When.js
@@ -218,7 +218,7 @@
    │     └ src/components/When.js
    │        └ src/make-api.js
    │           └ src/index.js
-   ├ src/core/props.js ───────────────────────────────────────── 326b ──── 0.3%
+   ├ src/core/props.js ───────────────────────────────────────── 326b ──── 0.2%
    │  └ src/components/FrequencyStatus.js
    │     └ src/make-api.js
    │        └ src/index.js