feat: twipla app added (#14780)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/app-store/apps.browser.generated.tsx

@@ -45,6 +45,7 @@ export const EventTypeAddonMap = {
   "event-type-app-card": dynamic(() =>
     import("./templates/event-type-app-card/components/EventTypeAppCardInterface")
   ),
+  twipla: dynamic(() => import("./twipla/components/EventTypeAppCardInterface")),
   "zoho-bigin": dynamic(() => import("./zoho-bigin/components/EventTypeAppCardInterface")),
   zohocrm: dynamic(() => import("./zohocrm/components/EventTypeAppCardInterface")),
 };

packages/app-store/apps.keys-schemas.generated.ts

@@ -36,6 +36,7 @@ import { appKeysSchema as stripepayment_zod_ts } from "./stripepayment/zod";
 import { appKeysSchema as tandemvideo_zod_ts } from "./tandemvideo/zod";
 import { appKeysSchema as booking_pages_tag_zod_ts } from "./templates/booking-pages-tag/zod";
 import { appKeysSchema as event_type_app_card_zod_ts } from "./templates/event-type-app-card/zod";
+import { appKeysSchema as twipla_zod_ts } from "./twipla/zod";
 import { appKeysSchema as vital_zod_ts } from "./vital/zod";
 import { appKeysSchema as webex_zod_ts } from "./webex/zod";
 import { appKeysSchema as wordpress_zod_ts } from "./wordpress/zod";
@@ -80,6 +81,7 @@ export const appKeysSchemas = {
   tandemvideo: tandemvideo_zod_ts,
   "booking-pages-tag": booking_pages_tag_zod_ts,
   "event-type-app-card": event_type_app_card_zod_ts,
+  twipla: twipla_zod_ts,
   vital: vital_zod_ts,
   webex: webex_zod_ts,
   wordpress: wordpress_zod_ts,

packages/app-store/apps.metadata.generated.ts

@@ -75,6 +75,7 @@ import event_type_app_card_config_json from "./templates/event-type-app-card/con
 import event_type_location_video_static_config_json from "./templates/event-type-location-video-static/config.json";
 import general_app_settings_config_json from "./templates/general-app-settings/config.json";
 import link_as_an_app_config_json from "./templates/link-as-an-app/config.json";
+import twipla_config_json from "./twipla/config.json";
 import typeform_config_json from "./typeform/config.json";
 import vimcal_config_json from "./vimcal/config.json";
 import { metadata as vital__metadata_ts } from "./vital/_metadata";
@@ -164,6 +165,7 @@ export const appStoreMetadata = {
   "event-type-location-video-static": event_type_location_video_static_config_json,
   "general-app-settings": general_app_settings_config_json,
   "link-as-an-app": link_as_an_app_config_json,
+  twipla: twipla_config_json,
   typeform: typeform_config_json,
   vimcal: vimcal_config_json,
   vital: vital__metadata_ts,

packages/app-store/apps.schemas.generated.ts

@@ -36,6 +36,7 @@ import { appDataSchema as stripepayment_zod_ts } from "./stripepayment/zod";
 import { appDataSchema as tandemvideo_zod_ts } from "./tandemvideo/zod";
 import { appDataSchema as booking_pages_tag_zod_ts } from "./templates/booking-pages-tag/zod";
 import { appDataSchema as event_type_app_card_zod_ts } from "./templates/event-type-app-card/zod";
+import { appDataSchema as twipla_zod_ts } from "./twipla/zod";
 import { appDataSchema as vital_zod_ts } from "./vital/zod";
 import { appDataSchema as webex_zod_ts } from "./webex/zod";
 import { appDataSchema as wordpress_zod_ts } from "./wordpress/zod";
@@ -80,6 +81,7 @@ export const appDataSchemas = {
   tandemvideo: tandemvideo_zod_ts,
   "booking-pages-tag": booking_pages_tag_zod_ts,
   "event-type-app-card": event_type_app_card_zod_ts,
+  twipla: twipla_zod_ts,
   vital: vital_zod_ts,
   webex: webex_zod_ts,
   wordpress: wordpress_zod_ts,

packages/app-store/apps.server.generated.ts

@@ -75,6 +75,7 @@ export const apiHandlers = {
   "event-type-location-video-static": import("./templates/event-type-location-video-static/api"),
   "general-app-settings": import("./templates/general-app-settings/api"),
   "link-as-an-app": import("./templates/link-as-an-app/api"),
+  twipla: import("./twipla/api"),
   typeform: import("./typeform/api"),
   vimcal: import("./vimcal/api"),
   vital: import("./vital/api"),

packages/app-store/bookerApps.metadata.generated.ts

@@ -35,6 +35,7 @@ import { metadata as tandemvideo__metadata_ts } from "./tandemvideo/_metadata";
 import telegram_config_json from "./telegram/config.json";
 import booking_pages_tag_config_json from "./templates/booking-pages-tag/config.json";
 import event_type_location_video_static_config_json from "./templates/event-type-location-video-static/config.json";
+import twipla_config_json from "./twipla/config.json";
 import webex_config_json from "./webex/config.json";
 import whatsapp_config_json from "./whatsapp/config.json";
 import whereby_config_json from "./whereby/config.json";
@@ -74,6 +75,7 @@ export const appStoreMetadata = {
   telegram: telegram_config_json,
   "booking-pages-tag": booking_pages_tag_config_json,
   "event-type-location-video-static": event_type_location_video_static_config_json,
+  twipla: twipla_config_json,
   webex: webex_config_json,
   whatsapp: whatsapp_config_json,
   whereby: whereby_config_json,

packages/app-store/twipla/DESCRIPTION.md

@@ -0,0 +1,6 @@
+---
+items:
+  - 1.png
+---
+
+{DESCRIPTION}

packages/app-store/twipla/api/add.ts

@@ -0,0 +1,16 @@
+import { createDefaultInstallation } from "@calcom/app-store/_utils/installation";
+import type { AppDeclarativeHandler } from "@calcom/types/AppHandler";
+
+import appConfig from "../config.json";
+
+const handler: AppDeclarativeHandler = {
+  appType: appConfig.type,
+  variant: appConfig.variant,
+  slug: appConfig.slug,
+  supportsMultipleInstalls: false,
+  handlerType: "add",
+  createCredential: ({ appType, user, slug, teamId }) =>
+    createDefaultInstallation({ appType, user: user, slug, key: {}, teamId }),
+};
+
+export default handler;

packages/app-store/twipla/api/index.ts

@@ -0,0 +1 @@
+export { default as add } from "./add";

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

@@ -0,0 +1,35 @@
+import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
+import AppCard from "@calcom/app-store/_components/AppCard";
+import useIsAppEnabled from "@calcom/app-store/_utils/useIsAppEnabled";
+import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
+import { TextField } from "@calcom/ui";
+
+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 { enabled, updateEnabled } = useIsAppEnabled(app);
+
+  return (
+    <AppCard
+      app={app}
+      switchOnClick={(e) => {
+        updateEnabled(e);
+      }}
+      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);
+        }}
+      />
+    </AppCard>
+  );
+};
+
+export default EventTypeAppCard;

packages/app-store/twipla/config.json

@@ -0,0 +1,25 @@
+{
+  "name": "Twipla",
+  "slug": "twipla",
+  "type": "twipla_analytics",
+  "logo": "icon.svg",
+  "url": "https://cal.com/",
+  "variant": "analytics",
+  "categories": ["analytics"],
+  "publisher": "Cal.com, Inc.",
+  "email": "help@cal.com",
+  "description": "Twipla.com, formerly known as Visitor Analytics, is a website intelligence platform that helps you understand how visitors interact with your website.",
+  "extendsFeature": "EventType",
+  "appData": {
+    "tag": {
+      "scripts": [
+        {
+          "content": "(function(v, i, s, a, t) {\n  v[t] = v[t] || function() {\n    (v[t].v = v[t].v || []).push(arguments);\n  };\n  if (!v._visaSettings) {\n    v._visaSettings = {};\n  }\n  v._visaSettings[a] = {\n    v: '1.0',\n    s: a,\n    a: '1',\n    t: t\n  };\n  var b = i.getElementsByTagName('body')[0];\n  var p = i.createElement('script');\n  p.defer = 1;\n  p.async = 1;\n  p.src = s + '?s=' + a;\n  b.appendChild(p);\n})(window, document, '//app-worker.visitor-analytics.io/main.js', '{SITE_ID}', 'va');"
+        }
+      ]
+    }
+  },
+  "isTemplate": false,
+  "__createdUsingCli": true,
+  "__template": "booking-pages-tag"
+}

packages/app-store/twipla/index.ts

@@ -0,0 +1 @@
+export * as api from "./api";

packages/app-store/twipla/package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/twipla",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  },
+  "description": "Twipla.com, formerly known as Visitor Analytics, is a website intelligence platform that helps you understand how visitors interact with your website."
+}

packages/app-store/twipla/static/icon.svg

@@ -0,0 +1,19 @@
+<svg width="128" height="128" viewBox="0 0 51 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9956 26.4735H10.7972L-0.000488281 0.526855H7.19797L17.9956 26.4735Z" fill="url(#paint0_linear_7749_3937)"/>
+<path d="M39.592 26.4735H32.3935L27.5945 14.9413L25.1951 9.17574L20.3961 20.708L16.7969 12.0591L21.5959 0.526855H33.5933L31.1938 6.29242L35.9927 17.8246L39.592 26.4735Z" fill="url(#paint1_linear_7749_3937)"/>
+<path d="M50.3905 0.526855L41.9923 20.708L38.3931 12.0591L43.1921 0.526855H50.3905Z" fill="url(#paint2_linear_7749_3937)"/>
+<defs>
+<linearGradient id="paint0_linear_7749_3937" x1="8.99757" y1="0.526855" x2="8.99757" y2="26.4735" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6B1EB8"/>
+<stop offset="1" stop-color="#FB8537"/>
+</linearGradient>
+<linearGradient id="paint1_linear_7749_3937" x1="28.1944" y1="0.526855" x2="28.1944" y2="26.4735" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6B1EB8"/>
+<stop offset="1" stop-color="#FB8537"/>
+</linearGradient>
+<linearGradient id="paint2_linear_7749_3937" x1="44.3918" y1="0.526855" x2="44.3918" y2="20.708" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6B1EB8"/>
+<stop offset="1" stop-color="#FB8537"/>
+</linearGradient>
+</defs>
+</svg>

packages/app-store/twipla/zod.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+import { eventTypeAppCardZod } from "@calcom/app-store/eventTypeAppCardZod";
+
+export const appDataSchema = eventTypeAppCardZod.merge(
+  z.object({
+    SITE_ID: z.string().optional(),
+  })
+);
+
+export const appKeysSchema = z.object({});