feature/space-booking-app (#2673)

* Reschedule for dynamic events

* Fix lint

* feature/space-booking-app initial commit

* added loom video and fixes for main branch

* Revert previous commmit

* Renames spacebookingother to spacebooking

* Type and perf improvements

* Updated comment

* Update seed-app-store.ts

Co-authored-by: zomars <zomars@me.com>

apps/web/pages/success.tsx

@@ -10,21 +10,21 @@ import { GetServerSidePropsContext } from "next";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 
+import { SpaceBookingSuccessPage } from "@calcom/app-store/spacebooking/components";
 import {
-  useIsEmbed,
-  useEmbedStyles,
-  useIsBackgroundTransparent,
+  sdkActionManager,
   useEmbedNonStylesConfig,
+  useIsBackgroundTransparent,
+  useIsEmbed,
 } from "@calcom/embed-core";
-import { sdkActionManager } from "@calcom/embed-core";
 import { getDefaultEvent } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { EmailInput } from "@calcom/ui/form/fields";
 
-import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull";
+import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
 import { getEventName } from "@lib/event";
 import useTheme from "@lib/hooks/useTheme";
 import { isBrandingHidden } from "@lib/isBrandingHidden";
@@ -215,6 +215,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
   const userIsOwner = !!(session?.user?.id && eventType.users.find((user) => (user.id = session.user.id)));
   return (
     (isReady && (
+      <>
         <div
           className={isEmbed ? "" : "h-screen bg-neutral-100 dark:bg-neutral-900"}
           data-testid="success-page">
@@ -253,7 +254,9 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                           !giphyImage ? "h-12 w-12 rounded-full bg-green-100" : ""
                         )}>
                         {giphyImage && !needsConfirmation && <img src={giphyImage} alt={"Gif from Giphy"} />}
-                      {!giphyImage && !needsConfirmation && <CheckIcon className="h-8 w-8 text-green-600" />}
+                        {!giphyImage && !needsConfirmation && (
+                          <CheckIcon className="h-8 w-8 text-green-600" />
+                        )}
                         {needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
                       </div>
                       <div className="mt-3 text-center sm:mt-5">
@@ -271,6 +274,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                               : t("emailed_you_and_attendees")}
                           </p>
                         </div>
+
                         <div className="border-bookinglightest text-bookingdark mt-4 grid grid-cols-3 border-t border-b py-4 text-left dark:border-gray-900 dark:text-gray-300">
                           <div className="font-medium">{t("what")}</div>
                           <div className="col-span-2 mb-6">{eventName}</div>
@@ -316,7 +320,9 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
                                 .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
                                 props.eventType.description
                               }` +
-                            (typeof location === "string" ? "&location=" + encodeURIComponent(location) : "")
+                              (typeof location === "string"
+                                ? "&location=" + encodeURIComponent(location)
+                                : "")
                             }>
                             <a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">
                               <svg
@@ -437,6 +443,30 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
             </div>
           </main>
         </div>
+        {/* SPACE BOOKING APP */}
+        {props.userHasSpaceBooking && (
+          <SpaceBookingSuccessPage
+            open={props.userHasSpaceBooking}
+            what={` 
+            ${needsConfirmation ? t("submitted") : `${t("meeting_is_scheduled")}.`}
+               ${
+                 needsConfirmation
+                   ? props.profile.name !== null
+                     ? t("user_needs_to_confirm_or_reject_booking", { user: props.profile.name })
+                     : t("needs_to_be_confirmed_or_rejected")
+                   : t("emailed_you_and_attendees")
+               } ${t("what")}: ${eventName}`}
+            where={`${t("where")}: ${
+              location ? (location?.startsWith("http") ? { location } : location) : "Far far a way galaxy"
+            }`}
+            when={`${t("when")}: ${date.format("dddd, DD MMMM YYYY")} ${date.format(
+              is24h ? "H:mm" : "h:mma"
+            )} - ${props.eventType.length} mins (${
+              localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()
+            })`}
+          />
+        )}
+      </>
     )) ||
     null
   );
@@ -499,6 +529,21 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       notFound: true,
     };
   }
+  let spaceBookingAvailable = false;
+
+  let userHasSpaceBooking = false;
+  if (eventType.users[0] && eventType.users[0].id) {
+    const credential = await prisma.credential.findFirst({
+      where: {
+        type: "spacebooking_other",
+        userId: eventType.users[0].id,
+      },
+    });
+    if (credential && credential.type === "spacebooking_other") {
+      userHasSpaceBooking = true;
+    }
+  }
+
   if (!eventType.users.length && eventType.userId) {
     // TODO we should add `user User` relation on `EventType` so this extra query isn't needed
     const user = await prisma.user.findUnique({
@@ -545,6 +590,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       eventType,
       trpcState: ssr.dehydrate(),
       dynamicEventName,
+      userHasSpaceBooking,
     },
   };
 }

packages/app-store/apiHandlers.tsx

@@ -15,6 +15,7 @@ export const apiHandlers = {
   huddle01video: import("./huddle01video/api"),
   metamask: import("./metamask/api"),
   giphy: import("./giphy/api"),
+  spacebookingother: import("./spacebooking/api"),
   // @todo Until we use DB slugs everywhere
   zapierother: import("./zapier/api"),
 };

packages/app-store/components.tsx

@@ -26,6 +26,7 @@ export const InstallAppButtonMap = {
   huddle01video: dynamic(() => import("./huddle01video/components/InstallAppButton")),
   metamask: dynamic(() => import("./metamask/components/InstallAppButton")),
   giphy: dynamic(() => import("./giphy/components/InstallAppButton")),
+  spacebookingother: dynamic(() => import("./spacebooking/components/InstallAppButton")),
 };
 
 export const InstallAppButton = (

packages/app-store/index.ts

@@ -12,6 +12,7 @@ import * as metamask from "./metamask";
 import * as office365calendar from "./office365calendar";
 import * as office365video from "./office365video";
 import * as slackmessaging from "./slackmessaging";
+import * as spacebooking from "./spacebooking";
 import * as stripepayment from "./stripepayment";
 import * as tandemvideo from "./tandemvideo";
 import * as wipemycalother from "./wipemycalother";
@@ -32,6 +33,7 @@ const appStore = {
   office365video,
   slackmessaging,
   stripepayment,
+  spacebooking,
   tandemvideo,
   zoomvideo,
   wipemycalother,

packages/app-store/metadata.ts

@@ -11,6 +11,7 @@ import { metadata as metamask } from "./metamask/_metadata";
 import { metadata as office365calendar } from "./office365calendar/_metadata";
 import { metadata as office365video } from "./office365video/_metadata";
 import { metadata as slackmessaging } from "./slackmessaging/_metadata";
+import { metadata as spacebooking } from "./spacebooking/_metadata";
 import { metadata as stripepayment } from "./stripepayment/_metadata";
 import { metadata as tandemvideo } from "./tandemvideo/_metadata";
 import { metadata as wipemycalother } from "./wipemycalother/_metadata";
@@ -30,6 +31,7 @@ export const appStoreMetadata = {
   office365video,
   slackmessaging,
   stripepayment,
+  spacebooking,
   tandemvideo,
   zoomvideo,
   wipemycalother,

packages/app-store/spacebooking/README.mdx

@@ -0,0 +1,10 @@
+<iframe
+  width="640"
+  height="360"
+  src="https://www.loom.com/embed/f8d2cd9b2ac74f0c916f20c4441bd1da"
+  frameborder="0"
+  webkitallowfullscreen
+  mozallowfullscreen
+  allowfullscreen></iframe>
+
+Looking to honor May 4th? Search no further. Download this app to make your booking success page resemble a long time ago in a galaxy far far away.

packages/app-store/spacebooking/_metadata.ts

@@ -0,0 +1,26 @@
+import type { App } from "@calcom/types/App";
+
+import _package from "./package.json";
+
+export const metadata = {
+  name: "SpaceBooking",
+  description: _package.description,
+  installed: true,
+  category: "other",
+  // If using static next public folder, can then be referenced from the base URL (/).
+  imageSrc: "/api/app-store/spacebooking/spacebooking.webp",
+  logo: "/api/app-store/spacebooking/spacebooking.webp",
+  publisher: "Cal.com",
+  rating: 0,
+  reviews: 0,
+  slug: "space-booking",
+  title: "SpaceBooking",
+  trending: true,
+  type: "spacebooking_other",
+  url: "https://cal.com/apps/spacebooking",
+  variant: "other",
+  verified: true,
+  email: "help@cal.com",
+} as App;
+
+export default metadata;

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

@@ -0,0 +1,43 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import prisma from "@calcom/prisma";
+
+/**
+ * @param req
+ * @param res
+ */
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session?.user?.id) {
+    return res.status(401).json({ message: "You must be logged in to do this" });
+  }
+  const appType = "spacebooking_other";
+  try {
+    const alreadyInstalled = await prisma.credential.findFirst({
+      where: {
+        type: appType,
+        userId: req.session.user.id,
+      },
+    });
+    if (alreadyInstalled) {
+      throw new Error("Already installed");
+    }
+    const installation = await prisma.credential.create({
+      data: {
+        type: appType,
+        key: {},
+        userId: req.session.user.id,
+        appId: "space-booking",
+      },
+    });
+    if (!installation) {
+      throw new Error("Unable to create user credential for spacebooking");
+    }
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return res.status(500).json({ message: error.message });
+    }
+    return res.status(500);
+  }
+
+  return res.status(200).json({ url: "/apps/installed" });
+}

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

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

packages/app-store/spacebooking/components/FullScreenDialog.tsx

@@ -0,0 +1,30 @@
+import { XIcon } from "@heroicons/react/solid";
+import { useState } from "react";
+
+import { Dialog, DialogContent } from "@calcom/ui/Dialog";
+
+const FullScreenDialog = (props: React.PropsWithChildren<{ open: boolean }>) => {
+  const [open, setOpen] = useState(props.open);
+  return (
+    <>
+      <Dialog open={open} onOpenChange={() => setOpen(false)}>
+        <DialogContent className="h-full w-full min-w-[30rem] bg-black p-0 sm:max-h-[50rem] sm:w-full sm:max-w-[60rem] sm:align-middle">
+          <div
+            className="flex h-8 w-8 justify-center text-white hover:bg-gray-200 hover:text-black"
+            onClick={() => setOpen(false)}
+            style={{
+              position: "absolute",
+              top: 16,
+              right: 16,
+              zIndex: "inherit",
+            }}>
+            <XIcon className="w-4" />
+          </div>
+          {props.children}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export { FullScreenDialog };

packages/app-store/spacebooking/components/InstallAppButton.tsx

@@ -0,0 +1,17 @@
+import useAddAppMutation from "../../_utils/useAddAppMutation";
+import { InstallAppButtonProps } from "../../types";
+
+export default function InstallAppButton(props: InstallAppButtonProps) {
+  const mutation = useAddAppMutation("spacebooking_other");
+
+  return (
+    <>
+      {props.render({
+        onClick() {
+          mutation.mutate("");
+        },
+        loading: mutation.isLoading,
+      })}
+    </>
+  );
+}

packages/app-store/spacebooking/components/SpaceBookingSuccessPage.tsx

@@ -0,0 +1,230 @@
+import { useEffect } from "react";
+
+import { FullScreenDialog } from "./FullScreenDialog";
+
+const SpaceBookingSuccessPage = (props: { what: string; where: string; when: string; open: boolean }) => {
+  const { what, where, when, open } = props;
+
+  useEffect(() => {
+    const canvas = document.getElementById("canvas") as HTMLCanvasElement;
+    const c = canvas.getContext("2d") as CanvasRenderingContext2D;
+
+    let w: number;
+    let h: number;
+
+    const setCanvasExtents = () => {
+      w = document.body.clientWidth;
+      h = document.body.clientHeight;
+      canvas.width = Math.min(1600, w);
+      canvas.height = Math.min(900, h);
+    };
+
+    setCanvasExtents();
+
+    const crawl = document.getElementById("crawl") as HTMLDivElement;
+    const crawlContent = document.getElementById("crawl-content") as HTMLDivElement;
+    const crawlContentStyle = crawlContent.style;
+
+    // start crawl at bottom of 3d plane
+    let crawlPos = crawl.clientHeight;
+
+    const makeStars = (count: number) => {
+      const out = [];
+      for (let i = 0; i < count; i++) {
+        const s = {
+          x: Math.random() * 1600 - 800,
+          y: Math.random() * 900 - 450,
+          z: Math.random() * 1000,
+        };
+        out.push(s);
+      }
+      return out;
+    };
+
+    let stars = makeStars(2000);
+
+    window.onresize = () => {
+      setCanvasExtents();
+    };
+
+    const clear = () => {
+      c.fillStyle = "black";
+      c.fillRect(0, 0, canvas.width, canvas.height);
+    };
+
+    const putPixel = (x: number, y: number, brightness: number) => {
+      const intensity = brightness * 255;
+      const rgb = "rgb(" + intensity + "," + intensity + "," + intensity + ")";
+      c.fillStyle = rgb;
+      c.fillRect(x, y, 1, 1);
+    };
+
+    const moveStars = (distance: number) => {
+      const count = stars.length;
+      for (var i = 0; i < count; i++) {
+        const s = stars[i];
+        s.z -= distance;
+        if (s.z <= 1) {
+          s.z += 999;
+        }
+      }
+    };
+
+    const moveCrawl = (distance: number) => {
+      crawlPos -= distance;
+      crawlContentStyle.top = crawlPos + "px";
+
+      // if we've scrolled all content past the top edge
+      // of the plane, reposition content at bottom of plane
+      if (crawlPos < -crawlContent.clientHeight) {
+        crawlPos = crawl.clientHeight;
+      }
+    };
+
+    const paintStars = () => {
+      const cx = canvas.width / 2;
+      const cy = canvas.height / 2;
+
+      const count = stars.length;
+      for (var i = 0; i < count; i++) {
+        const star = stars[i];
+
+        const x = cx + star.x / (star.z * 0.001);
+        const y = cy + star.y / (star.z * 0.001);
+
+        if (x < 0 || x >= w || y < 0 || y >= h) {
+          continue;
+        }
+
+        const d = star.z / 1000.0;
+        const b = 1 - d * d;
+
+        putPixel(x, y, b);
+      }
+    };
+
+    let prevTime: number;
+    const init = (time: number) => {
+      prevTime = time;
+      requestAnimationFrame(tick);
+    };
+
+    const tick = (time: number) => {
+      let elapsed = time - prevTime;
+      prevTime = time;
+
+      moveStars(elapsed * 0.02);
+
+      // time-scale of crawl, increase factor to go faster
+      moveCrawl(elapsed * 0.06);
+
+      clear();
+      paintStars();
+
+      requestAnimationFrame(tick);
+    };
+
+    requestAnimationFrame(init);
+  }, []);
+
+  const episodeDetails = [
+    { number: "IV", name: "A new hope" },
+    { number: "V", name: "The Empire" },
+    { number: "VI", name: "Return of the Jedi" },
+    { number: "I", name: "The Phantom menace" },
+    { number: "II", name: "Attack of the Clones" },
+    { number: "III", name: "Revenge of the Sith" },
+  ];
+  const randomEpisodeNumber = episodeDetails[Math.floor(Math.random() * episodeDetails.length)];
+
+  const css = `
+  #crawl-container {
+    perspective: calc(100vh * 0.4);
+  }
+  #crawl {
+    color: #f5c91c;
+    position: absolute;
+    width: 110%;
+    left: -5%;
+    bottom: -5%;
+    height: 200%;
+    overflow: hidden;
+
+    transform: rotate3d(1, 0, 0, 45deg);
+    transform-origin: 50% 100%;
+
+    mask-image: linear-gradient(
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0.66),
+      rgba(0, 0, 0, 1)
+    );
+
+    -webkit-mask-image: -webkit-linear-gradient(
+      rgba(0, 0, 0, 0),
+      rgba(0, 0, 0, 0.66),
+      rgba(0, 0, 0, 1)
+    );
+  }
+
+  #crawl-content {
+    font-family: "Roboto";
+    font-size: calc(100vw * 0.074);
+    letter-spacing: 0.09em;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+  }
+
+  #crawl p {
+    text-align: justify;
+    width: 100%;
+    margin: 0 0 1.25em 0;
+    line-height: 1.25em;
+  }
+
+  #crawl h1 {
+    font-size: 1em;
+    margin: 0 0 0.3em 0;
+  }
+
+  #crawl h2 {
+    font-size: 1.5em;
+    margin: 0 0 0.7em 0;
+  }
+
+  #crawl h1,
+  #crawl h2 {
+    text-align: center;
+  }
+`;
+
+  return (
+    <>
+      <FullScreenDialog open={open}>
+        <canvas id="canvas" className="absolute m-0 h-full w-full overflow-hidden p-0"></canvas>
+        <div
+          id="crawl-container"
+          className="perspective-[calc(100vh * 0.4)] absolute m-0 h-full w-full overflow-hidden p-0">
+          <div
+            id="crawl"
+            className="color-[#f5c91c] transform=[rotate3d(1, 0, 0, 45deg)] transform-origin-[50% 100%] absolute -left-[5%] -bottom-[5%] h-[200%] w-[110%] overflow-hidden">
+            <div id="crawl-content">
+              <h1>Episode {randomEpisodeNumber.number}</h1>
+              <h2>{randomEpisodeNumber.name}</h2>
+              <p>{what}</p>
+              <p>
+                {when}
+                <br />
+              </p>
+              <p>{where}</p>
+            </div>
+          </div>
+        </div>
+        <style>{css}</style>
+      </FullScreenDialog>
+    </>
+  );
+};
+
+export default SpaceBookingSuccessPage;

packages/app-store/spacebooking/components/index.ts

@@ -0,0 +1,5 @@
+import dynamic from "next/dynamic";
+
+export { default as InstallAppButton } from "./InstallAppButton";
+/** These are like 12kb that not every user needs */
+export const SpaceBookingSuccessPage = dynamic(() => import("./SpaceBookingSuccessPage"));

packages/app-store/spacebooking/index.ts

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

packages/app-store/spacebooking/lib/index.ts

@@ -0,0 +1 @@
+export {};

packages/app-store/spacebooking/package.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "private": true,
+  "name": "@calcom/spacebooking",
+  "version": "0.1.0",
+  "main": "./index.ts",
+  "description": "Looking to honor May 4th? Search no further. Install this app to make your booking success page resemble a long time ago in a galaxy far far away.",
+  "dependencies": {},
+  "devDependencies": {
+    "@calcom/types": "*"
+  }
+}

packages/prisma/seed-app-store.ts

@@ -9,6 +9,7 @@ async function createApp(
   /** The directory name for `/packages/app-store/[dirName]` */
   dirName: Prisma.AppCreateInput["dirName"],
   categories: Prisma.AppCreateInput["categories"],
+  /** This is used so credentials gets linked to the correct app */
   type: Prisma.CredentialCreateInput["type"],
   keys?: Prisma.AppCreateInput["keys"]
 ) {
@@ -84,6 +85,7 @@ async function main() {
       api_key: process.env.GIPHY_API_KEY,
     });
   }
+  await createApp("space-booking", "spacebooking", ["other"], "spacebooking_other");
   await createApp("zapier", "zapier", ["other"], "zapier_other");
   // Web3 apps
   await createApp("huddle01", "huddle01video", ["web3", "video"], "huddle01_video");

packages/ui/Dialog.tsx

@@ -2,6 +2,8 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useRouter } from "next/router";
 import React, { ReactNode, useState } from "react";
 
+import classNames from "@calcom/lib/classNames";
+
 export type DialogProps = React.ComponentProps<typeof DialogPrimitive["Root"]> & {
   name?: string;
   clearQueryParamsOnClose?: string[];
@@ -63,7 +65,10 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
       <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-40 bg-black bg-opacity-50 transition-opacity" />
       <DialogPrimitive.Content
         {...props}
-        className="fadeIn fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl focus-visible:outline-none sm:w-full sm:max-w-[35rem] sm:align-middle"
+        className={classNames(
+          "fadeIn fixed left-1/2 top-1/2 z-[9999999999] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded bg-white p-6 text-left shadow-xl focus-visible:outline-none sm:w-full sm:max-w-[35rem] sm:align-middle",
+          `${props.className}`
+        )}
         ref={forwardedRef}>
         {children}
       </DialogPrimitive.Content>