From c4fe69d8265ba632c10f3a90ea05e4a74ff14c85 Mon Sep 17 00:00:00 2001
From: Ben Hybert <53020786+Hybes@users.noreply.github.com>
Date: Tue, 18 Apr 2023 14:54:51 +0100
Subject: [PATCH] Add Plausible (Custom) App (#8189)

Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>
---
 packages/app-store/BookingPageTagManager.tsx  | 30 +++++++++++++++----
 .../app-store/_utils/getEventTypeAppData.ts   |  8 ++++-
 .../components/EventTypeAppCardInterface.tsx  | 11 +++++++
 packages/app-store/plausible/config.json      |  2 +-
 packages/app-store/plausible/zod.ts           |  1 +
 5 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/app-store/BookingPageTagManager.tsx b/packages/app-store/BookingPageTagManager.tsx
index 8d7b744b38..db333ec0a9 100644
--- a/packages/app-store/BookingPageTagManager.tsx
+++ b/packages/app-store/BookingPageTagManager.tsx
@@ -17,13 +17,33 @@ export default function BookingPageTagManager({
         if (!tag) {
           return null;
         }
-        const trackingId = getEventTypeAppData(eventType, appId as keyof typeof appDataSchemas)?.trackingId;
-        if (!trackingId) {
+
+        const appData = getEventTypeAppData(eventType, appId as keyof typeof appDataSchemas);
+
+        if (!appData) {
           return null;
         }
-        const parseValue = <T extends string | undefined>(val: T): T =>
-          //TODO: Support more template variables.
-          val ? (val.replace(/\{TRACKING_ID\}/g, trackingId) as T) : val;
+
+        const parseValue = <T extends string | undefined>(val: T): T => {
+          if (!val) {
+            return val;
+          }
+
+          // Only support UpperCase,_and numbers in template variables. This prevents accidental replacement of other strings.
+          const regex = /\{([A-Z_\d]+)\}/g;
+          let matches;
+          while ((matches = regex.exec(val))) {
+            const variableName = matches[1];
+            if (appData[variableName]) {
+              // Replace if value is available. It can possible not be a template variable that just matches the regex.
+              val = val.replace(
+                new RegExp(`{${variableName}}`, "g"),
+                appData[variableName]
+              ) as NonNullable<T>;
+            }
+          }
+          return val;
+        };
 
         return tag.scripts.map((script, index) => {
           const parsedAttributes: NonNullable<(typeof tag.scripts)[number]["attrs"]> = {};
diff --git a/packages/app-store/_utils/getEventTypeAppData.ts b/packages/app-store/_utils/getEventTypeAppData.ts
index e279539186..1cf5668ca0 100644
--- a/packages/app-store/_utils/getEventTypeAppData.ts
+++ b/packages/app-store/_utils/getEventTypeAppData.ts
@@ -15,7 +15,13 @@ export const getEventTypeAppData = <T extends EventTypeAppsList>(
   const appMetadata = metadata?.apps && metadata.apps[appId];
   if (appMetadata) {
     const allowDataGet = forcedGet ? true : appMetadata.enabled;
-    return allowDataGet ? appMetadata : null;
+    return allowDataGet
+      ? {
+          ...appMetadata,
+          // trackingId is legacy way to store value for TRACKING_ID. So, we need to support both.
+          TRACKING_ID: appMetadata.TRACKING_ID || appMetadata.trackingId,
+        }
+      : null;
   }
 
   // Backward compatibility for existing event types.
diff --git a/packages/app-store/plausible/components/EventTypeAppCardInterface.tsx b/packages/app-store/plausible/components/EventTypeAppCardInterface.tsx
index 1d35515358..33cb11f4d0 100644
--- a/packages/app-store/plausible/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/plausible/components/EventTypeAppCardInterface.tsx
@@ -9,6 +9,7 @@ import type { appDataSchema } from "../zod";
 
 const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ app }) {
   const [getAppData, setAppData] = useAppContextWithSchema<typeof appDataSchema>();
+  const plausibleUrl = getAppData("PLAUSIBLE_URL");
   const trackingId = getAppData("trackingId");
   const [enabled, setEnabled] = useState(getAppData("enabled"));
 
@@ -24,8 +25,18 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
         }
       }}
       switchChecked={enabled}>
+      <TextField
+        name="Plausible URL"
+        defaultValue="https://plausible.io/js/script.js"
+        placeholder="https://plausible.io/js/script.js"
+        value={plausibleUrl}
+        onChange={(e) => {
+          setAppData("PLAUSIBLE_URL", e.target.value);
+        }}
+      />
       <TextField
         name="Tracked Domain"
+        placeholder="yourdomain.com"
         value={trackingId}
         onChange={(e) => {
           setAppData("trackingId", e.target.value);
diff --git a/packages/app-store/plausible/config.json b/packages/app-store/plausible/config.json
index 61bd705505..e46024e0f1 100644
--- a/packages/app-store/plausible/config.json
+++ b/packages/app-store/plausible/config.json
@@ -15,7 +15,7 @@
     "tag": {
       "scripts": [
         {
-          "src": "https://plausible.io/js/script.js",
+          "src": "{PLAUSIBLE_URL}",
           "attrs": {
             "data-domain": "{TRACKING_ID}"
           }
diff --git a/packages/app-store/plausible/zod.ts b/packages/app-store/plausible/zod.ts
index 674bf3405d..ee8d9a8dc4 100644
--- a/packages/app-store/plausible/zod.ts
+++ b/packages/app-store/plausible/zod.ts
@@ -4,6 +4,7 @@ import { eventTypeAppCardZod } from "../eventTypeAppCardZod";
 
 export const appDataSchema = eventTypeAppCardZod.merge(
   z.object({
+    PLAUSIBLE_URL: z.string().optional().default("https://plausible.io/js/script.js").or(z.undefined()),
     trackingId: z.string().default("").optional(),
   })
 );