feat: Allow wildcard URL in the campaigns (#6056)

app/javascript/widget/components/Form/Input.vue

@@ -14,6 +14,12 @@
     <div v-if="error" class="text-red-400 mt-2 text-xs font-medium">
       {{ error }}
     </div>
+    <div
+      v-if="!error && helpText"
+      class="text-red-400 mt-2 text-xs font-medium"
+    >
+      {{ helpText }}
+    </div>
   </label>
 </template>
 <script>
@@ -41,6 +47,10 @@ export default {
       type: String,
       default: '',
     },
+    helpText: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     labelClass() {

app/javascript/widget/helpers/campaignHelper.js

@@ -1,5 +1,19 @@
-export const stripTrailingSlash = ({ URL }) => {
-  return URL.replace(/\/$/, '');
+import { URLPattern } from 'urlpattern-polyfill';
+
+export const isPatternMatchingWithURL = (urlPattern, url) => {
+  let updatedUrlPattern = urlPattern;
+  const locationObj = new URL(url);
+
+  if (updatedUrlPattern.endsWith('/')) {
+    updatedUrlPattern = updatedUrlPattern.slice(0, -1) + '*\\?*\\#*';
+  }
+
+  if (locationObj.pathname.endsWith('/')) {
+    locationObj.pathname = locationObj.pathname.slice(0, -1);
+  }
+
+  const pattern = new URLPattern(updatedUrlPattern);
+  return pattern.test(locationObj.toString());
 };
 
 // Format all campaigns
@@ -22,10 +36,7 @@ export const filterCampaigns = ({
   isInBusinessHours,
 }) => {
   return campaigns.filter(campaign => {
-    const hasMatchingURL =
-      stripTrailingSlash({ URL: campaign.url }) ===
-      stripTrailingSlash({ URL: currentURL });
-    if (!hasMatchingURL) {
+    if (!isPatternMatchingWithURL(campaign.url, currentURL)) {
       return false;
     }
     if (campaign.triggerOnlyDuringBusinessHours) {

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

@@ -1,7 +1,7 @@
 import {
-  stripTrailingSlash,
   formatCampaigns,
   filterCampaigns,
+  isPatternMatchingWithURL,
 } from '../campaignHelper';
 import campaigns from './campaignFixtures';
 
@@ -9,11 +9,35 @@ global.chatwootWebChannel = {
   workingHoursEnabled: false,
 };
 describe('#Campaigns Helper', () => {
-  describe('stripTrailingSlash', () => {
-    it('should return striped trailing slash if url with trailing slash is passed', () => {
+  describe('#isPatternMatchingWithURL', () => {
+    it('returns correct value if a valid URL is passed', () => {
       expect(
-        stripTrailingSlash({ URL: 'https://www.chatwoot.com/pricing/' })
-      ).toBe('https://www.chatwoot.com/pricing');
+        isPatternMatchingWithURL(
+          'https://chatwoot.com/pricing*',
+          'https://chatwoot.com/pricing/'
+        )
+      ).toBe(true);
+
+      expect(
+        isPatternMatchingWithURL(
+          'https://*.chatwoot.com/pricing/',
+          'https://app.chatwoot.com/pricing/'
+        )
+      ).toBe(true);
+
+      expect(
+        isPatternMatchingWithURL(
+          'https://{*.}?chatwoot.com/pricing?test=true',
+          'https://app.chatwoot.com/pricing/?test=true'
+        )
+      ).toBe(true);
+
+      expect(
+        isPatternMatchingWithURL(
+          'https://{*.}?chatwoot.com/pricing*\\?*',
+          'https://chatwoot.com/pricing/?test=true'
+        )
+      ).toBe(true);
     });
   });