feat: ✨ support for adding script url added for umami (#16300)

* feat: ✨ support for adding script url added for umami

This will help self hosters in setting up umami.

* feat: ✨ set default value for script URL in the form field

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>

packages/app-store/umami/components/EventTypeAppCardInterface.tsx

@@ -9,6 +9,7 @@ import type { appDataSchema } from "../zod";
 const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ app, eventType }) {
   const { getAppData, setAppData, disabled } = useAppContextWithSchema<typeof appDataSchema>();
   const siteId = getAppData("SITE_ID");
+  const scriptURL = getAppData("SCRIPT_URL");
   const { enabled, updateEnabled } = useIsAppEnabled(app);
 
   return (
@@ -19,15 +20,27 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       }}
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
-      <TextField
-        disabled={disabled}
-        name="Site ID"
-        value={siteId}
-        placeholder="Enter your Site ID"
-        onChange={(e) => {
-          setAppData("SITE_ID", e.target.value);
-        }}
-      />
+      <fieldset className="space-y-2" disabled={disabled}>
+        <TextField
+          disabled={disabled}
+          name="Script URL"
+          value={scriptURL}
+          defaultValue="https://us.umami.is/script.js"
+          placeholder="Enter the script source URL"
+          onChange={(e) => {
+            setAppData("SCRIPT_URL", e.target.value);
+          }}
+        />
+        <TextField
+          disabled={disabled}
+          name="Site ID"
+          value={siteId}
+          placeholder="Enter your Site ID"
+          onChange={(e) => {
+            setAppData("SITE_ID", e.target.value);
+          }}
+        />
+      </fieldset>
     </AppCard>
   );
 };

packages/app-store/umami/config.json

@@ -14,7 +14,7 @@
     "tag": {
       "scripts": [
         {
-          "src": "https://us.umami.is/script.js",
+          "src": "{SCRIPT_URL}",
           "attrs": {
             "data-website-id": "{SITE_ID}"
           }

packages/app-store/umami/zod.ts

@@ -5,6 +5,7 @@ import { eventTypeAppCardZod } from "@calcom/app-store/eventTypeAppCardZod";
 export const appDataSchema = eventTypeAppCardZod.merge(
   z.object({
     SITE_ID: z.string().optional(),
+    SCRIPT_URL: z.string().optional(),
   })
 );