added wordpress plugin (#5168)

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

@@ -38,4 +38,5 @@ export const EventTypeAddonMap = {
   qr_code: dynamic(() => import("./qr_code/extensions/EventTypeAppCard")),
   rainbow: dynamic(() => import("./rainbow/extensions/EventTypeAppCard")),
   stripepayment: dynamic(() => import("./stripepayment/extensions/EventTypeAppCard")),
+  wordpress: dynamic(() => import("./wordpress/extensions/EventTypeAppCard")),
 };

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

@@ -43,6 +43,7 @@ import { metadata as weather_in_your_calendar_meta } from "./weather_in_your_cal
 import { metadata as whatsapp_meta } from "./whatsapp/_metadata";
 import { metadata as whereby_meta } from "./whereby/_metadata";
 import { metadata as wipemycalother_meta } from "./wipemycalother/_metadata";
+import { metadata as wordpress_meta } from "./wordpress/_metadata";
 import { metadata as zapier_meta } from "./zapier/_metadata";
 import { metadata as zoomvideo_meta } from "./zoomvideo/_metadata";
 
@@ -88,6 +89,7 @@ export const appStoreMetadata = {
   whatsapp: whatsapp_meta,
   whereby: whereby_meta,
   wipemycalother: wipemycalother_meta,
+  wordpress: wordpress_meta,
   zapier: zapier_meta,
   zoomvideo: zoomvideo_meta,
 };

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

@@ -9,6 +9,7 @@ import { appDataSchema as giphy_schema } from "./giphy/zod";
 import { appDataSchema as qr_code_schema } from "./qr_code/zod";
 import { appDataSchema as rainbow_schema } from "./rainbow/zod";
 import { appDataSchema as stripepayment_schema } from "./stripepayment/zod";
+import { appDataSchema as wordpress_schema } from "./wordpress/zod";
 
 export const appDataSchemas = {
   "routing-forms": routing_forms_schema,
@@ -18,4 +19,5 @@ export const appDataSchemas = {
   qr_code: qr_code_schema,
   rainbow: rainbow_schema,
   stripe: stripepayment_schema,
+  wordpress: wordpress_schema,
 };

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

@@ -42,6 +42,7 @@ export const apiHandlers = {
   whatsapp: import("./whatsapp/api"),
   whereby: import("./whereby/api"),
   wipemycalother: import("./wipemycalother/api"),
+  wordpress: import("./wordpress/api"),
   zapier: import("./zapier/api"),
   zoomvideo: import("./zoomvideo/api"),
 };

packages/app-store/wordpress/README.mdx

@@ -0,0 +1,16 @@
+Embedded booking pages right into your wordpress page. 
+
+#### FEATURES
+- Add Cal.com booking calendar to any WordPress page/post with a simple shortcode.
+- Display your Cal.com booking calendar inline or in a popup.
+- Customize your booking button to suit you.
+
+#### SHORTCODE
+
+<code>[cal url=/username/meetingid type=2 text="Schedule a call with me"]</code> 
+
+#### SHORTCODE CUSTOMIZATION
+- url: URL of the booking calendar
+- type: Add inline or popup embed. Inline embed: 1, Popup embed: 2
+- text: For popup embed, customize the text/button that triggers the popup.
+

packages/app-store/wordpress/_metadata.ts

@@ -0,0 +1,10 @@
+import type { AppMeta } from "@calcom/types/App";
+
+import config from "./config.json";
+
+export const metadata = {
+  category: "other",
+  ...config,
+} as AppMeta;
+
+export default metadata;

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

@@ -0,0 +1,21 @@
+import { AppDeclarativeHandler } from "@calcom/types/AppHandler";
+
+import { createDefaultInstallation } from "../../_utils/installation";
+import appConfig from "../config.json";
+
+const handler: AppDeclarativeHandler = {
+  // Instead of passing appType and slug from here, api/integrations/[..args] should be able to derive and pass these directly to createCredential
+  appType: appConfig.type,
+  variant: appConfig.variant,
+  slug: appConfig.slug,
+  supportsMultipleInstalls: false,
+  handlerType: "add",
+  redirect: {
+    newTab: true,
+    url: "https://wordpress.org/plugins/cal-com/",
+  },
+  createCredential: ({ appType, user, slug }) =>
+    createDefaultInstallation({ appType, userId: user.id, slug, key: {} }),
+};
+
+export default handler;

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

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

packages/app-store/wordpress/config.json

@@ -0,0 +1,16 @@
+{
+  "/*": "Don't modify slug - If required, do it using cli edit command",
+  "name": "Wordpress",
+  "slug": "wordpress",
+  "type": "wordpress_other",
+  "imageSrc": "/api/app-store/wordpress/icon.svg",
+  "logo": "/api/app-store/wordpress/icon.svg",
+  "url": "https://github.com/calcom/wp-plugin",
+  "variant": "other",
+  "categories": ["other"],
+  "publisher": "Cal.com, Inc.",
+  "email": "support@cal.com",
+  "description": "Embedded booking pages right into your wordpress page",
+  "extendsFeature": "EventType",
+  "__createdUsingCli": true
+}

packages/app-store/wordpress/extensions/EventTypeAppCard.tsx

@@ -0,0 +1,43 @@
+import { useState } from "react";
+
+import { useAppContextWithSchema } from "@calcom/app-store/EventTypeAppContext";
+import AppCard from "@calcom/app-store/_components/AppCard";
+import type { EventTypeAppCardComponent } from "@calcom/app-store/types";
+import { Icon } from "@calcom/ui";
+
+import { appDataSchema } from "../zod";
+
+const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({ eventType, app }) {
+  const [getAppData, setAppData] = useAppContextWithSchema<typeof appDataSchema>();
+  const isSunrise = getAppData("isSunrise");
+  const [enabled, setEnabled] = useState(getAppData("enabled"));
+
+  return (
+    <AppCard
+      setAppData={setAppData}
+      app={app}
+      switchOnClick={(e) => {
+        if (!e) {
+          setEnabled(false);
+          setAppData("isSunrise", false);
+        } else {
+          setEnabled(true);
+          setAppData("isSunrise", true);
+        }
+      }}
+      switchChecked={enabled}>
+      <div className="mt-2 text-sm">
+        <div className="flex">
+          <span className="mr-2">{isSunrise ? <Icon.FiSunrise /> : <Icon.FiSunset />}</span>I am an AppCard
+          for Event with Title: {eventType.title}
+        </div>{" "}
+        <div className="mt-2">
+          Edit <span className="italic">packages/app-store/{app.slug}/extensions/EventTypeAppCard.tsx</span>{" "}
+          to play with me
+        </div>
+      </div>
+    </AppCard>
+  );
+};
+
+export default EventTypeAppCard;

packages/app-store/wordpress/index.ts

@@ -0,0 +1,2 @@
+export * as api from "./api";
+export { metadata } from "./_metadata";

packages/app-store/wordpress/package.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/wordpress",
+  "version": "0.0.0",
+  "main": "./index.ts",
+  "description": "Embedded booking pages right into your wordpress page",
+  "dependencies": {
+    "@calcom/lib": "*"
+  },
+  "devDependencies": {
+    "@calcom/types": "*"
+  }
+}

packages/app-store/wordpress/plugin.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Plugin Name:       Cal.com 
+ * Plugin URI:        https://cal.com/apps/wordpress
+ * Description:       Embed your Cal.com in Wordpress
+ * Version:           0.1
+ * Author:            Cal.com, Inc.
+ * Author URI:        https://cal.com
+ * License:           AGPLv3
+ * License URI:       https://www.gnu.org/licenses/agpl-3.0.en.html
+ * Text Domain:       calcom-embed
+ */
+
+function cal_shortcode( $atts, $content = null) {
+global $post;extract(shortcode_atts(array(
+'for' => $post->post_title,
+), $atts));
+if(empty($content)) $content='Embed Cal.com';
+
+return '<script>(function (C, A, L){let p=function (a, ar){a.q.push(ar);}; let d=C.document; C.Cal=C.Cal || function (){let cal=C.Cal; let ar=arguments; if (!cal.loaded){cal.ns={}; cal.q=cal.q || []; d.head.appendChild(d.createElement("script")).src=A; cal.loaded=true;}if (ar[0]===L){const api=function (){p(api, arguments);}; const namespace=ar[1]; api.q=api.q || []; typeof namespace==="string" ? (cal.ns[namespace]=api) && p(api, ar) : p(cal, ar); return;}p(cal, ar);};})(window, "https://cal.com/embed.js", "init"); Cal("init") </script> <script>Cal("inline",{calLink: '.$content.'});</script>'
+}
+add_shortcode('cal', 'cal_shortcode');

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

@@ -0,0 +1 @@
+<svg viewBox="0 0 122.52 122.523" xmlns="http://www.w3.org/2000/svg"><g fill="#464342"><path d="m8.708 61.26c0 20.802 12.089 38.779 29.619 47.298l-25.069-68.686c-2.916 6.536-4.55 13.769-4.55 21.388z"/><path d="m96.74 58.608c0-6.495-2.333-10.993-4.334-14.494-2.664-4.329-5.161-7.995-5.161-12.324 0-4.831 3.664-9.328 8.825-9.328.233 0 .454.029.681.042-9.35-8.566-21.807-13.796-35.489-13.796-18.36 0-34.513 9.42-43.91 23.688 1.233.037 2.395.063 3.382.063 5.497 0 14.006-.667 14.006-.667 2.833-.167 3.167 3.994.337 4.329 0 0-2.847.335-6.015.501l19.138 56.925 11.501-34.493-8.188-22.434c-2.83-.166-5.511-.501-5.511-.501-2.832-.166-2.5-4.496.332-4.329 0 0 8.679.667 13.843.667 5.496 0 14.006-.667 14.006-.667 2.835-.167 3.168 3.994.337 4.329 0 0-2.853.335-6.015.501l18.992 56.494 5.242-17.517c2.272-7.269 4.001-12.49 4.001-16.989z"/><path d="m62.184 65.857-15.768 45.819c4.708 1.384 9.687 2.141 14.846 2.141 6.12 0 11.989-1.058 17.452-2.979-.141-.225-.269-.464-.374-.724z"/><path d="m107.376 36.046c.226 1.674.354 3.471.354 5.404 0 5.333-.996 11.328-3.996 18.824l-16.053 46.413c15.624-9.111 26.133-26.038 26.133-45.426.001-9.137-2.333-17.729-6.438-25.215z"/><path d="m61.262 0c-33.779 0-61.262 27.481-61.262 61.26 0 33.783 27.483 61.263 61.262 61.263 33.778 0 61.265-27.48 61.265-61.263-.001-33.779-27.487-61.26-61.265-61.26zm0 119.715c-32.23 0-58.453-26.223-58.453-58.455 0-32.23 26.222-58.451 58.453-58.451 32.229 0 58.45 26.221 58.45 58.451 0 32.232-26.221 58.455-58.45 58.455z"/></g></svg>

packages/app-store/wordpress/zod.ts

@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+import { eventTypeAppCardZod } from "../eventTypeAppCardZod";
+
+export const appDataSchema = eventTypeAppCardZod.merge(
+  z.object({
+    isSunrise: z.boolean(),
+  })
+);

packages/prisma/seed-app-store.config.json

@@ -84,6 +84,12 @@
     "slug": "fathom",
     "type": "fathom_analytics"
   },
+  {
+    "dirName": "wordpress",
+    "categories": ["other"],
+    "slug": "wordpress",
+    "type": "wordpress_other"
+  },
   {
     "dirName": "ga4",
     "categories": ["analytics"],