@ordergroove/offers 2.27.15 → 2.27.16

package/examples/index.js

@@ -68,11 +68,13 @@ const exampleTemplates = [
     'Offers example',
     {
       name: 'empty',
-      selector: 'og-offer:not([location])'
+      selector: 'og-offer:not([location])',
+      id: '1'
     },
     {
       name: 'built-in',
       selector: 'og-offer[location="initial"]',
+      id: '2',
       config: {
         settings: {
           ...settings,
@@ -84,6 +86,7 @@ const exampleTemplates = [
     {
       name: 'checkbox',
       selector: 'og-offer[location="initial-checkbox"]',
+      id: '3',
       config: {
         settings: {
           ...settings,
@@ -97,6 +100,7 @@ const exampleTemplates = [
     {
       name: 'select',
       selector: 'og-offer[location="initial-select"]',
+      id: '4',
       config: {
         settings: {
           ...settings,
@@ -108,6 +112,7 @@ const exampleTemplates = [
     {
       name: 'cart',
       selector: 'og-offer[location="cart"]',
+      id: '5',
       defaultPreviewMode: 'subscribed',
       config: {
         settings: {
@@ -120,6 +125,7 @@ const exampleTemplates = [
     {
       name: 'side-by-side',
       selector: 'og-offer[location="side-by-side"]',
+      id: '6',
       config: {
         settings: {
           ...settings,
@@ -135,6 +141,7 @@ const exampleTemplates = [
     {
       name: 'read-only',
       selector: 'og-offer[location="read-only"]',
+      id: '7',
       defaultPreviewMode: 'subscribed',
       config: {
         settings: {
@@ -151,6 +158,7 @@ const exampleTemplates = [
     {
       name: 'buttons',
       selector: 'og-offer[location="buttons"]',
+      id: '8',
       config: {
         settings: {
           ...settings,
@@ -167,6 +175,7 @@ const exampleTemplates = [
     {
       name: 'first-test',
       selector: 'og-offer[location="first-test"]',
+      id: '9',
       config: {
         settings: {
           ...settings,
@@ -181,6 +190,7 @@ const exampleTemplates = [
     {
       name: 'second-test no tooltip',
       selector: 'og-offer[location="second-test"]',
+      id: '10',
       config: {
         settings: {
           ...settings,
@@ -196,6 +206,7 @@ const exampleTemplates = [
     {
       name: 'Select mode',
       selector: 'og-offer[location="select1"]',
+      id: '11',
       markup: `
 <og-optin-select>
 <option value="optedOut">Buy one time</option>
@@ -206,6 +217,7 @@ const exampleTemplates = [
     {
       name: 'Custom markup',
       selector: 'og-offer[location="custom1"]',
+      id: '12',
       markup: `
 <og-when test="regularEligible">
 <p>
@@ -259,6 +271,7 @@ Add item to order on
       name: 'Upsell modal - radio',
       defaultPreviewMode: 'upsell',
       selector: 'og-offer[location="upsell-radio"]',
+      id: '13',
       markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-radio">
@@ -283,6 +296,7 @@ Add item to order on
       name: 'Upsell modal - select',
       defaultPreviewMode: 'upsell',
       selector: 'og-offer[location="upsell-select"]',
+      id: '14',
       markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-select">
@@ -297,6 +311,7 @@ Add item to order on
       name: 'Upsell modal - toggle',
       defaultPreviewMode: 'upsell',
       selector: 'og-offer[location="upsell-toggle"]',
+      id: '15',
       markup: `
 <og-when test="upsellEligible">
 <og-upsell-button target="#upsell-toggle">
@@ -315,6 +330,7 @@ Add item to order on
     {
       name: 'Product-specific default frequencies',
       selector: 'og-offer[location="psdf"]',
+      id: '16',
       markup: `
 <og-when test="regularEligible">
   <og-select-frequency default-text=" Most common!">
@@ -331,6 +347,7 @@ Add item to order on
     {
       name: 'og-optin-button',
       selector: 'og-offer[location=og-optin-button]',
+      id: '17',
       markup: `
 <og-optin-button>
   I want to subscribe to this product
@@ -340,6 +357,7 @@ Add item to order on
     {
       name: 'Frequency Status',
       selector: 'og-offer[location="frequency"]',
+      id: '18',
       markup: `
 <og-frequency-status>
   <span slot="not-subscribed">you are not subscribed </span>
@@ -348,6 +366,7 @@ Add item to order on
     {
       name: 'Tooltip',
       selector: 'og-offer[location="tooltip-placement"]',
+      id: '19',
       markup: [
         ['top-left', 'top', 'top-right'],
         ['left', '', 'right'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.27.15",
+  "version": "2.27.16",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@ordergroove/offers-templates": "^0.4.15"
   },
-  "gitHead": "9ec6370c33f9ac82e46d35f1085e759c8b686a67"
+  "gitHead": "9d55bfe3c5bac0e80acbe1d6bfdddc8ecf222842"
 }

package/src/components/Offer.js

@@ -54,7 +54,8 @@ export class Offer extends TemplateElement {
       frequency: { type: String, reflect: true },
       productFrequency: { type: String },
       isCart: { type: Boolean, attribute: 'cart' },
-      optedin: { type: Object }
+      optedin: { type: Object },
+      variationId: { type: String }
     };
   }
 
@@ -236,7 +237,8 @@ export class Offer extends TemplateElement {
 
   applyTemplate(template) {
     super.applyTemplate(template);
-    const { locale } = template;
+    const { id: variationId, locale } = template;
+    this.variationId = variationId;
     this.locale = locale;
     const event = new CustomEvent('template-changed');
     this.dispatchEvent(event);

package/src/shopify/shopifyMiddleware.ts

@@ -227,13 +227,27 @@ export async function synchronizeCartOptin(action: any, store: any) {
 /**
  * Returns a tracking event adhering to the below format:
  *
- * og__<ts in seconds>: "<product_id>,<action>,<location>,<selling_plan optional>"
+ * og__<ts in seconds>: "<product_id>,<action>,<location>,<selling_plan optional>,<variation_id optional>"
  *
  * Examples:
- * og__165653130: "offer_show,pdp,123456789"
- * og__165653137: "optin,pdp,123,456"
- * og__165653138: "optout,pdp,123,"
- * og__165653139: "optin,cart,123,456",
+ *
+ *   - optin_product with selling plan ID 123 and variation ID 456:
+ *     og__165653130: "optin_product,pdp,123,456"
+ *
+ *   - optin_product with no selling plan and variation ID 456:
+ *     og__165653137: "optin_product,pdp,,456"
+ *
+ *   - optin_product with selling plan ID 123 and no variation ID:
+ *     og__165653139: "optin_product,pdp,123,"
+ *
+ *   - optin_product with no selling plan and no variation ID:
+ *     og__165653141: "optin_product,pdp,,"
+ *
+ *   - optout_product with variation id 456:
+ *     og__165653135: "optout_product,pdp,,456"
+ *
+ *   - product_change_frequency with selling plan ID 123 and variation ID 456:
+ *     og__165653131: "product_change_frequency,pdp,123,456"
  *
  * @param  action a Redux action
  * @return {Array} an array with positional values key, value
@@ -243,16 +257,19 @@ export function getTrackingEvent(action): Array<string> {
   if (!product_id) return [];
   const key = `og__${Math.ceil(new Date().getTime() / 1000)}`;
   const location = action.payload.offer?.location || '';
+  const variation = action.payload.offer?.variationId || '';
   const value = [product_id, action.type.toLowerCase(), location];
 
   switch (action.type) {
     case REQUEST_OFFER:
     case OPTOUT_PRODUCT:
-      value.push('');
+      value.push(''); // No selling plan should be associated with these actions
+      value.push(variation);
       break;
     case OPTIN_PRODUCT:
     case PRODUCT_CHANGE_FREQUENCY:
       value.push(action.payload.frequency);
+      value.push(variation);
       break;
     default:
       return []; // we dont track anything else