@rebilly/instruments 3.39.4 → 3.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.39.4",
+  "version": "3.40.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",

package/src/functions/mount/fetch-data.js

@@ -10,6 +10,7 @@ import { fetchAccountAndWebsite as FetchAccountAndWebsite } from '../../storefro
 import { fetchPaymentInstrument as FetchInstruments } from '../../storefront/payment-instruments';
 import { fetchDepositRequest as FetchDepositRequest } from '../../storefront/deposit-requests';
 import DepositRequestModel from '../../storefront/models/deposit-request-model';
+import { getLeadSourceData } from './get-lead-source-data';
 
 export class DataInstance {
   constructor({
@@ -116,7 +117,8 @@ export class DataInstance {
       hasAmountDue: this.hasAmountDue,
       summaryItems: this.summaryItems,
       summaryLineItems: this.summaryLineItems,
-      isShippingRequired: this.isShippingRequired
+      isShippingRequired: this.isShippingRequired,
+      leadSource: getLeadSourceData(),
     }))
   }
 }

package/src/functions/mount/get-lead-source-data.js

@@ -0,0 +1,46 @@
+const collectedProperties = [
+  // Google UTM fields
+  'utm_source',
+  'utm_medium',
+  'utm_campaign',
+  'utm_term',
+  'utm_content',
+  // FramePay specific fields
+  'affiliate',
+  'subAffiliate',
+  'clickId',
+  'salesAgent'
+];
+const prefix = /utm_/g;
+
+/**
+ * Generates the lead source data object that framepay expects as part of
+ * the extraData property. We generate it in the top level of instruments
+ * so that it has the correct path and query parameters.
+ * @returns {Object} The lead source data object
+ */
+export const getLeadSourceData = () => {
+  const { href, origin, pathname, search } = window.location;
+
+  const leadSource = {
+    // Large query parameters including JWTs will cause issues, so make sure we dont
+    // use anything longer than 255 characters.
+    path: href.length <= 255 ? href : `${origin}${pathname}`
+  };
+
+  const query = search.replace('?', '');
+
+  // Process query parameters and add them to the leadSource object
+  return query
+    .split('&')
+    .map((field) => field.split('='))
+    .filter((field) => {
+      const [name] = field;
+      return collectedProperties.indexOf(name) > -1;
+    })
+    .reduce((data, field) => {
+      const [name, value = null] = field;
+      data[name.replace(prefix, '')] = value;
+      return data;
+    }, leadSource);
+};

package/src/functions/mount/get-lead-source-data.spec.js

@@ -0,0 +1,38 @@
+import { getLeadSourceData } from './get-lead-source-data';
+
+export const mockLocation = (url) => {
+  const location = new URL(url);
+  delete window.location;
+  window.location = location;
+};
+
+describe('getLeadSourceData', () => {
+  it('should return an object with a path property that matches the current URL', () => {
+    const result = getLeadSourceData();
+    expect(result.path).toBe(window.location.href);
+  });
+
+  it('should return the path without the query if the query is longer than 255 characters', () => {
+    const query = Array(300).fill('a').join('');
+
+    const pathWithoutQuery = 'http://www.example.com/path';
+    mockLocation(`${pathWithoutQuery}?${query}`);
+
+    const result = getLeadSourceData();
+    expect(result.path).toBe(pathWithoutQuery);
+  });
+
+  it('should add the query parameters to the returned object', () => {
+    const query = 'utm_source=google&utm_medium=cpc&utm_campaign=example';
+    mockLocation(`http://www.example.com/path?${query}`);
+
+    expect(getLeadSourceData()).toMatchInlineSnapshot(`
+      Object {
+        "campaign": "example",
+        "medium": "cpc",
+        "path": "http://www.example.com/path?utm_source=google&utm_medium=cpc&utm_campaign=example",
+        "source": "google",
+      }
+    `);
+  });
+});