chore: Execute campaigns based on matching URL (#2254)

app/javascript/widget/helpers/campaignHelper.js

@@ -0,0 +1,23 @@
+export const stripTrailingSlash = ({ URL }) => {
+  return URL.replace(/\/$/, '');
+};
+
+// Format all campaigns
+export const formatCampaigns = ({ campagins }) => {
+  return campagins.map(item => {
+    return {
+      id: item.id,
+      timeOnPage: item?.trigger_rules?.time_on_page,
+      url: item?.trigger_rules?.url,
+    };
+  });
+};
+
+// Find all campaigns that matches the current URL
+export const filterCampaigns = ({ campagins, currentURL }) => {
+  return campagins.filter(
+    item =>
+      stripTrailingSlash({ URL: item.url }) ===
+      stripTrailingSlash({ URL: currentURL })
+  );
+};

app/javascript/widget/helpers/campaignTimer.js

@@ -1,14 +1,25 @@
 import { triggerCampaign } from 'widget/api/campaign';
-const startTimer = async ({ allCampaigns }) => {
-  allCampaigns.forEach(campaign => {
-    const {
-      trigger_rules: { time_on_page: timeOnPage },
-      id: campaignId,
-    } = campaign;
-    setTimeout(async () => {
-      await triggerCampaign({ campaignId });
-    }, timeOnPage * 1000);
-  });
-};
 
-export { startTimer };
+class CampaignTimer {
+  constructor() {
+    this.campaignTimers = [];
+  }
+
+  initTimers = ({ campagins }) => {
+    this.clearTimers();
+    campagins.forEach(campaign => {
+      const { timeOnPage, id: campaignId } = campaign;
+      this.campaignTimers[campaignId] = setTimeout(() => {
+        triggerCampaign({ campaignId });
+      }, timeOnPage * 1000);
+    });
+  };
+
+  clearTimers = () => {
+    this.campaignTimers.forEach(timerId => {
+      clearTimeout(timerId);
+      this.campaignTimers[timerId] = null;
+    });
+  };
+}
+export default new CampaignTimer();

app/javascript/widget/helpers/specs/camapginFixtures.js

@@ -0,0 +1,16 @@
+export default [
+  {
+    id: 1,
+    trigger_rules: {
+      time_on_page: 3,
+      url: 'https://www.chatwoot.com/pricing',
+    },
+  },
+  {
+    id: 2,
+    trigger_rules: {
+      time_on_page: 6,
+      url: 'https://www.chatwoot.com/about',
+    },
+  },
+];

app/javascript/widget/helpers/specs/campaignHelper.spec.js

@@ -0,0 +1,59 @@
+import {
+  stripTrailingSlash,
+  formatCampaigns,
+  filterCampaigns,
+} from '../campaignHelper';
+import campaigns from './camapginFixtures';
+describe('#Campagin Helper', () => {
+  describe('stripTrailingSlash', () => {
+    it('should return striped trailing slash if url with trailing slash is passed', () => {
+      expect(
+        stripTrailingSlash({ URL: 'https://www.chatwoot.com/pricing/' })
+      ).toBe('https://www.chatwoot.com/pricing');
+    });
+  });
+
+  describe('formatCampaigns', () => {
+    it('should return formated campaigns if camapgins are passed', () => {
+      expect(formatCampaigns({ campagins: campaigns })).toStrictEqual([
+        {
+          id: 1,
+          timeOnPage: 3,
+          url: 'https://www.chatwoot.com/pricing',
+        },
+        {
+          id: 2,
+          timeOnPage: 6,
+          url: 'https://www.chatwoot.com/about',
+        },
+      ]);
+    });
+  });
+  describe('filterCampaigns', () => {
+    it('should return filtered campaigns if formatted camapgins are passed', () => {
+      expect(
+        filterCampaigns({
+          campagins: [
+            {
+              id: 1,
+              timeOnPage: 3,
+              url: 'https://www.chatwoot.com/pricing',
+            },
+            {
+              id: 2,
+              timeOnPage: 6,
+              url: 'https://www.chatwoot.com/about',
+            },
+          ],
+          currentURL: 'https://www.chatwoot.com/about/',
+        })
+      ).toStrictEqual([
+        {
+          id: 2,
+          timeOnPage: 6,
+          url: 'https://www.chatwoot.com/about',
+        },
+      ]);
+    });
+  });
+});