@ordergroove/offers 2.28.7 → 2.28.9

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.28.9](https://github.com/ordergroove/plush-toys/compare/@ordergroove/offers@2.28.8...@ordergroove/offers@2.28.9) (2022-11-11)
+
+
+### Bug Fixes
+
+* **offers:** Kickstart canary ([47a7a97](https://github.com/ordergroove/plush-toys/commit/47a7a97f87256ba1749327dd1d2b6c7df76a9f73))
+* **offers:** Use border var for cart template ([d5cad20](https://github.com/ordergroove/plush-toys/commit/d5cad20039510fcb4cdeef1fa379c7e08fab80a8))
+
+
+
+
+
+## [2.28.8](https://github.com/ordergroove/plush-toys/compare/@ordergroove/offers@2.28.7...@ordergroove/offers@2.28.8) (2022-11-10)
+
+
+### Bug Fixes
+
+* **offers:** optin-button selection updates when frequency or default frequency updates ([2a6a6b4](https://github.com/ordergroove/plush-toys/commit/2a6a6b46b92c635067ba86a6e9ccf27df0bc92da))
+
+
+
+
+
 ## [2.28.7](https://github.com/ordergroove/plush-toys/compare/@ordergroove/offers@2.28.6...@ordergroove/offers@2.28.7) (2022-11-08)
 
 

package/README.md

@@ -8,31 +8,32 @@ 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 
+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
@@ -56,6 +57,7 @@ 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.
@@ -63,6 +65,7 @@ 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
@@ -73,41 +76,37 @@ 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-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-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
 
+### Features
 
 #### Default optin by product
 
@@ -125,7 +124,6 @@ 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`.
@@ -205,64 +203,60 @@ 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
-        },
-        {
-            "every": 2,
-            "period": 2
-        }
-    ],
-    "defaultFrequency": {
-        "every": 2,
-        "period": 2
+og.offers('0e5de2bedc5e11e3a2e4bc764e106cf4', 'staging', '/auth').config({
+  frequencies: [
+    {
+      every: 3,
+      period: 2
     },
-    "offerType": "radio"
-})
+    {
+      every: 2,
+      period: 2
+    }
+  ],
+  defaultFrequency: {
+    every: 2,
+    period: 2
+  },
+  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.
 
@@ -272,24 +266,26 @@ 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'
+  }
 });
 ```
 
@@ -325,7 +321,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);
 ```
 
@@ -432,7 +428,6 @@ 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;
@@ -442,6 +437,7 @@ 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;
@@ -466,12 +462,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.                            |
@@ -482,17 +478,16 @@ 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
@@ -505,12 +500,14 @@ 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
@@ -519,18 +516,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
+
 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.
+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:
 
-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>
@@ -538,24 +535,25 @@ 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
@@ -564,13 +562,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
@@ -583,7 +581,6 @@ 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
@@ -599,8 +596,6 @@ 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,10 +1,10 @@
 <pre id="esbuild-metadata">
-  dist/examples.js ─────────────────────────────────────────── 258.8kb ─ 100.0%
-   ├ ../offers-templates/dist/main.js ──────────────────────── 249.2kb ── 96.3%
+  dist/examples.js ─────────────────────────────────────────── 259.1kb ─ 100.0%
+   ├ ../offers-templates/dist/main.js ──────────────────────── 249.6kb ── 96.3%
    │  └ examples/index.js
    └ examples/index.js ───────────────────────────────────────── 8.5kb ─── 3.3%
 
-  dist/offers.js ───────────────────────────────────────────── 127.5kb ─ 100.0%
+  dist/offers.js ───────────────────────────────────────────── 127.8kb ─ 100.0%
    ├ src/components/Offer.js ─────────────────────────────────── 8.2kb ─── 6.4%
    │  └ src/make-api.js
    │     └ src/index.js
@@ -48,7 +48,7 @@
    ├ src/core/api.js ─────────────────────────────────────────── 2.6kb ─── 2.0%
    │  └ src/core/reducer.js
    │     └ src/index.js
-   ├ src/components/OptinStatus.js ───────────────────────────── 2.5kb ─── 2.0%
+   ├ src/components/OptinStatus.js ───────────────────────────── 2.6kb ─── 2.0%
    │  └ src/make-api.js
    │     └ src/index.js
    ├ src/make-api.js ─────────────────────────────────────────── 2.5kb ─── 1.9%
@@ -110,6 +110,9 @@
    │  └ src/components/When.js
    │     └ src/make-api.js
    │        └ src/index.js
+   ├ src/components/OptinButton.js ───────────────────────────── 1.2kb ─── 0.9%
+   │  └ src/make-api.js
+   │     └ src/index.js
    ├ src/shopify/shopifyBootstrap.ts ─────────────────────────── 1.1kb ─── 0.9%
    │  └ src/index.js
    ├ src/core/constants.js ───────────────────────────────────── 1.1kb ─── 0.9%
@@ -146,9 +149,6 @@
    │        └ src/components/Price.js
    │           └ src/make-api.js
    │              └ src/index.js
-   ├ src/components/OptinButton.js ──────────────────────────── 1005b ──── 0.8%
-   │  └ src/make-api.js
-   │     └ src/index.js
    ├ node_modules/lit-element/lib/css-tag.js ─────────────────── 978b ──── 0.7%
    │  └ node_modules/lit-element/lit-element.js
    │     └ src/components/Price.js
@@ -257,7 +257,7 @@
    │     └ src/components/Price.js
    │        └ src/make-api.js
    │           └ src/index.js
-   ├ node_modules/logical-expression-parser/index.js ─────────── 196b ──── 0.2%
+   ├ node_modules/logical-expression-parser/index.js ─────────── 196b ──── 0.1%
    │  └ src/components/When.js
    │     └ src/make-api.js
    │        └ src/index.js