Update booking-pages.test.ts

* allows deletion of disabled event

* some visual fixes

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.env.appStore.example

@@ -0,0 +1,89 @@
+# ********** INDEX **********
+#
+# - APP STORE
+#   - DAILY.CO VIDEO
+#   - GOOGLE CALENDAR/MEET/LOGIN
+#   - HUBSPOT
+#   - OFFICE 365
+#   - SLACK
+#   - STRIPE
+#   - TANDEM
+#   - ZOOM
+#   - GIPHY
+#   - VITAL
+
+# - APP STORE **********************************************************************************************
+# ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
+#   - DAILY.CO VIDEO
+DAILY_API_KEY=
+DAILY_SCALE_PLAN=''
+
+#   - GOOGLE CALENDAR/MEET/LOGIN
+# Needed to enable Google Calendar integration and Login with Google
+# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
+GOOGLE_API_CREDENTIALS='{}'
+# To enable Login with Google you need to:
+# 1. Set `GOOGLE_API_CREDENTIALS` above
+# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
+# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
+# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
+GOOGLE_LOGIN_ENABLED=false
+
+#   - HUBSPOT
+# Used for the HubSpot integration
+# @see https://github.com/calcom/cal.com/#obtaining-hubspot-client-id-and-secret
+HUBSPOT_CLIENT_ID=""
+HUBSPOT_CLIENT_SECRET=""
+
+#   - OFFICE 365
+# Used for the Office 365 / Outlook.com Calendar / MS Teams integration
+# @see https://github.com/calcom/cal.com/#Obtaining-Microsoft-Graph-Client-ID-and-Secret
+MS_GRAPH_CLIENT_ID=
+MS_GRAPH_CLIENT_SECRET=
+
+#   - SLACK
+# @see https://github.com/calcom/cal.com/#obtaining-slack-client-id-and-secret-and-signing-secret
+SLACK_SIGNING_SECRET=
+SLACK_CLIENT_ID=
+SLACK_CLIENT_SECRET=
+
+#   - STRIPE
+NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
+STRIPE_PRIVATE_KEY=            # sk_test_...
+STRIPE_WEBHOOK_SECRET=         # whsec_...
+STRIPE_CLIENT_ID=              # ca_...
+PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
+PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
+
+#   - TANDEM
+# Used for the Tandem integration -- contact support@tandem.chat for API access.
+TANDEM_CLIENT_ID=""
+TANDEM_CLIENT_SECRET=""
+TANDEM_BASE_URL="https://tandem.chat"
+
+#   - ZOOM
+# Used for the Zoom integration
+# @see https://github.com/calcom/cal.com/#obtaining-zoom-client-id-and-secret
+ZOOM_CLIENT_ID=
+ZOOM_CLIENT_SECRET=
+
+#   - GIPHY
+# Used for the Giphy integration
+# @see https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key
+GIPHY_API_KEY=
+
+#   - VITAL
+# Used for the vital integration
+# @see https://github.com/calcom/cal.com/#obtaining-vital-api-keys
+VITAL_API_KEY=
+VITAL_WEBHOOK_SECRET=
+# "sandbox" | "prod" | "production" | "development"
+VITAL_DEVELOPMENT_MODE="sandbox"
+# "us" | "eu"
+VITAL_REGION="us"
+
+#   - ZAPIER
+# Used for the Zapier integration
+# @see https://github.com/calcom/cal.com/blob/main/packages/app-store/zapier/README.md
+ZAPIER_INVITE_LINK=""
+# *********************************************************************************************************

.env.example

@@ -5,16 +5,6 @@
 # - SHARED
 #   - NEXTAUTH
 # - E-MAIL SETTINGS
-# - APP STORE
-#   - DAILY.CO VIDEO
-#   - GOOGLE CALENDAR/MEET/LOGIN
-#   - HUBSPOT
-#   - OFFICE 365
-#   - SLACK
-#   - STRIPE
-#   - TANDEM
-#   - ZOOM
-#   - GIPHY
 
 # - LICENSE *************************************************************************************************
 # Set this value to 'agree' to accept our license:
@@ -35,6 +25,7 @@ NEXT_PUBLIC_LICENSE_CONSENT=''
 NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
 # Change to 'http://localhost:3001' if running the website simultaneously
 NEXT_PUBLIC_WEBSITE_URL='http://localhost:3000'
+NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'
 
 # To enable SAML login, set both these variables
 # @see https://github.com/calcom/cal.com/tree/main/packages/ee#setting-up-saml-login
@@ -115,64 +106,3 @@ EMAIL_SERVER_PASSWORD='<office365_password>'
 ## @see https://support.google.com/accounts/answer/185833
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
 # **********************************************************************************************************
-
-# - APP STORE **********************************************************************************************
-# ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
-#   - DAILY.CO VIDEO
-DAILY_API_KEY=
-DAILY_SCALE_PLAN=''
-
-#   - GOOGLE CALENDAR/MEET/LOGIN
-# Needed to enable Google Calendar integration and Login with Google
-# @see https://github.com/calendso/calendso#obtaining-the-google-api-credentials
-GOOGLE_API_CREDENTIALS='{}'
-# To enable Login with Google you need to:
-# 1. Set `GOOGLE_API_CREDENTIALS` above
-# 2. Set `GOOGLE_LOGIN_ENABLED` to `true`
-# When self-hosting please ensure you configure the Google integration as an Internal app so no one else can login to your instance
-# @see https://support.google.com/cloud/answer/6158849#public-and-internal&zippy=%2Cpublic-and-internal-applications
-GOOGLE_LOGIN_ENABLED=false
-
-#   - HUBSPOT
-# Used for the HubSpot integration
-# @see https://github.com/calcom/cal.com/#obtaining-hubspot-client-id-and-secret
-HUBSPOT_CLIENT_ID=""
-HUBSPOT_CLIENT_SECRET=""
-
-#   - OFFICE 365
-# Used for the Office 365 / Outlook.com Calendar / MS Teams integration
-# @see https://github.com/calcom/cal.com/#Obtaining-Microsoft-Graph-Client-ID-and-Secret
-MS_GRAPH_CLIENT_ID=
-MS_GRAPH_CLIENT_SECRET=
-
-#   - SLACK
-# @see https://github.com/calcom/cal.com/#obtaining-slack-client-id-and-secret-and-signing-secret
-SLACK_SIGNING_SECRET=
-SLACK_CLIENT_ID=
-SLACK_CLIENT_SECRET=
-
-#   - STRIPE
-NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
-STRIPE_PRIVATE_KEY=            # sk_test_...
-STRIPE_WEBHOOK_SECRET=         # whsec_...
-STRIPE_CLIENT_ID=              # ca_...
-PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
-PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
-
-#   - TANDEM
-# Used for the Tandem integration -- contact support@tandem.chat for API access.
-TANDEM_CLIENT_ID=""
-TANDEM_CLIENT_SECRET=""
-TANDEM_BASE_URL="https://tandem.chat"
-
-#   - ZOOM
-# Used for the Zoom integration
-# @see https://github.com/calcom/cal.com/#obtaining-zoom-client-id-and-secret
-ZOOM_CLIENT_ID=
-ZOOM_CLIENT_SECRET=
-
-#   - GIPHY
-# Used for the Giphy integration
-# @see https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key
-GIPHY_API_KEY=
-# *********************************************************************************************************

.github/workflows/e2e.yml

@@ -7,7 +7,7 @@ on:
       - public/static/locales/**
 jobs:
   test:
-    timeout-minutes: 15
+    timeout-minutes: 20
     name: Testing ${{ matrix.node }} and ${{ matrix.os }}
     strategy:
       matrix:

.gitignore

@@ -39,6 +39,7 @@ yarn-error.log*
 .env.production.local
 .env.*
 !.env.example
+!.env.appStore.example
 
 # vercel
 .vercel

README.md

@@ -33,7 +33,7 @@
     <a href="https://hub.docker.com/r/calendso/calendso"><img src="https://img.shields.io/docker/pulls/calendso/calendso"></a>
     <a href="https://twitter.com/calcom"><img src="https://img.shields.io/twitter/follow/calcom?style=social"></a>
     <a href="https://calendso.slack.com/archives/C02BY67GMMW"><img src="https://img.shields.io/badge/translations-contribute-brightgreen" /></a>
-
+    <a href="https://www.contributor-covenant.org/version/1/4/code-of-conduct/ "><img src="https://img.shields.io/badge/Contributor%20Covenant-1.4-purple" /></a>
 </p>
 
 <!-- ABOUT THE PROJECT -->
@@ -107,7 +107,7 @@ Here is what you need to be able to run Cal.
    ```sh
    yarn
    ```
-   
+
 1. Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file.
 
 #### Quick start with `yarn dx`
@@ -190,8 +190,10 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 
 ### E2E-Testing
 
+Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If you are running locally, as the documentation within `.env.example` mentions, the value should be `http://localhost:3000`.
+
 ```sh
-# In a terminal. Just run:
+# In a terminal just run:
 yarn test-e2e
 
 # To open last HTML report run:
@@ -230,9 +232,9 @@ yarn workspace @calcom/web playwright-report
 
 1. Check for `.env` variables changes
 
-    ```sh
-    yarn predev
-    ```
+   ```sh
+   yarn predev
+   ```
 
 1. Start the server. In a development environment, just do:
 
@@ -401,6 +403,17 @@ Next make sure you have your app running `yarn dx`. Then in the slack chat type
 9. Click the "Save" button at the bottom footer.
 10. You're good to go. Now you can see any booking in Cal.com created as a meeting in HubSpot for your contacts.
 
+### Obtaining Vital API Keys
+
+1. Open [Vital](https://tryvital.io/) and click Get API Keys.
+1. Create a team with the team name you desire
+1. Head to the configuration section on the sidebar of the dashboard
+1. Click on API keys and you'll find your sandbox `api_key`.
+1. Copy your `api_key` to `VITAL_API_KEY` in the .env.appStore file.
+1. Open [Vital Webhooks](https://app.tryvital.io/team/{team_id}/webhooks) and add `<CALCOM BASE URL>/api/integrations/vital/webhook` as webhook for connected applications.
+1. Select all events for the webhook you interested, e.g. `sleep_created`
+1. Copy the webhook secret (`sec...`) to `VITAL_WEBHOOK_SECRET` in the .env.appStore file.
+
 <!-- LICENSE -->
 
 ## License
@@ -420,7 +433,7 @@ Special thanks to these amazing projects which help power Cal.com:
 - [Day.js](https://day.js.org/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - [Prisma](https://prisma.io/)
-
-[<img src="https://jitsu.com/img/powered-by-jitsu.png?gh=true">](https://jitsu.com/?utm_source=cal.com-gihub)
+  
+ <a href="https://jitsu.com/?utm_source=cal.com-gihub"><img height="40px" src="https://jitsu.com/img/powered-by-jitsu.png?gh=true" alt="Jitsu.com"></a>
 
 Cal.com is an [open startup](https://jitsu.com) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.

apps/docs/components/Anchor.tsx

@@ -0,0 +1,21 @@
+function getAnchor(text) {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9 ]/g, "")
+    .replace(/[ ]/g, "-")
+    .replace(/ /g, "%20");
+}
+
+export default function Anchor({ as, children }) {
+  const anchor = getAnchor(children);
+  const link = `#${anchor}`;
+  const Component = as || "div";
+  return (
+    <Component id={anchor}>
+      <a href={link} className="anchor-link">
+        §
+      </a>
+      {children}
+    </Component>
+  );
+}

apps/docs/lib/useWindowSize.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+// Define general type for useWindowSize hook, which includes width and height
+export interface Size {
+  width: number | undefined;
+  height: number | undefined;
+}
+// Hook from: https://usehooks.com/useWindowSize/
+export function useWindowSize(): Size {
+  // Initialize state with undefined width/height so server and client renders match
+  // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+  const [windowSize, setWindowSize] = useState<Size>({
+    width: undefined,
+    height: undefined,
+  });
+  useEffect(() => {
+    // Handler to call on window resize
+    function handleResize() {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+    // Add event listener
+    window.addEventListener("resize", handleResize);
+    // Call handler right away so state gets updated with initial window size
+    handleResize();
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+  return windowSize;
+}

apps/docs/package.json

@@ -15,6 +15,7 @@
   "author": "Cal.com, Inc.",
   "license": "MIT",
   "dependencies": {
+    "iframe-resizer-react": "^1.1.0",
     "next": "^12.1.0",
     "nextra": "^1.1.0",
     "nextra-theme-docs": "^1.2.2",

apps/docs/pages/integrations/embed.mdx

@@ -2,13 +2,16 @@
 title: Embed
 ---
 
+import Anchor from "../../components/Anchor"
+
 # Embed
 
 The Embed allows your website visitors to book a meeting with you directly from your website.
 
 ## Install on any website
 
-- _Step-1._ Install the Vanilla JS Snippet
+Install the following Vanilla JS Snippet to get embed to work on any website. After that you can <a href="#popular-ways-in-which-you-can-embed-on-your-website">choose any of the ways</a> to show your Cal Link embedded on your website.
+
 ```html
 <script>
   (function (C, A, L) {
@@ -57,7 +60,7 @@ yarn add @calcom/embed-react
 
 You can use Vanilla JS Snippet to install
 
-## Popular ways in which you can embed on your website
+<Anchor as="H2">Popular ways in which you can embed on your website</Anchor>
 
 Assuming that you have followed the steps of installing and initializing the snippet, you can show the embed in following ways:
 
@@ -82,8 +85,15 @@ Show the embed inline inside a container element. It would take the width and he
     },
   });
 </script>
-```
 
+*Sample sandbox*
+```
+<iframe src="https://codesandbox.io/embed/vanilla-js-inline-embed-r27n67?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 </details>
 
 ####
@@ -108,6 +118,14 @@ const MyComponent = () => (
 );
 ```
 
+*Sample sandbox*
+
+<iframe src="https://codesandbox.io/embed/cal-component-embed-inline-demo-react-typescript-d1zlcn?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 </details>
 
 ### Popup on any existing element
@@ -120,9 +138,16 @@ To show the embed as a popup on clicking an element, add `data-cal-link` attribu
 
 To show the embed as a popup on clicking an element, simply add `data-cal-link` attribute to the element.
 
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/popup-on-click-of-an-existing-element-y9lcuo?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
   <button data-cal-link="jane" data-cal-config="A valid config JSON"></button>
 </details>
-
 <details>
   <summary>React</summary>
   ```jsx
@@ -131,11 +156,37 @@ To show the embed as a popup on clicking an element, simply add `data-cal-link`
     const MyComponent = ()=> {
       return <button data-cal-link="jane" data-cal-config='A valid config JSON'></button>
     }
+```
 
-````
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/embed-popup-on-click-of-an-existing-element-demo-react-sc967e?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
 
 </details>
 
+### Floating pop-up button
+
+```html
+<script>
+  Cal("floatingButton", {
+    // The link that you want to embed. It would open https://cal.com/jane in embed
+    calLink: "jane",
+  });
+</script>
+```
+
+*Sample sandbox*
+<iframe src="https://codesandbox.io/embed/embed-floating-button-popup-all-websites-cg7pru?fontsize=14&hidenavigation=1&theme=dark"
+     style={{width:"100%", height:"500px", border:0, borderRadius: "4px", overflow:"hidden"}}
+     title="Cal Component - Embed Inline Demo[React][TypeScript]"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
 ## Supported Instructions
 
 Consider an instruction as a function with that name and that would be called with the given arguments.

apps/docs/pages/public-api.mdx

@@ -1,11 +1,20 @@
 import Bleed from 'nextra-theme-docs/bleed'
 import Head from "next/head";
+import IframeResizer from "iframe-resizer-react";
+import {useWindowSize} from "../lib/useWindowSize";
+
 
 <Bleed full>
-<Head><title>Public API | Cal.com</title></Head>
-  <iframe src="https://developer.cal.com"
-     width="100%"
-     height="900px"
-     title="Public API | Cal.com"
-   ></iframe>
+  <Head><title>Public API | Cal.com</title></Head>
+  <IframeResizer
+    autoResize
+    src={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://developer.cal.com"}
+    frameBorder="0"
+    style={{
+      width: useWindowSize().width > 768 ? "calc(100vw - 16rem)": "100vw",
+      minHeight: useWindowSize().width > 768 ? "100vh" : "200vh",
+      height: "auto",
+      border: 0,
+    }}
+  />
 </Bleed>

apps/swagger/.env.example

@@ -1 +1 @@
-NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/docs
+NEXT_PUBLIC_SWAGGER_DOCS_URL=http://localhost:3002/api/docs

apps/swagger/lib/snippets.ts

@@ -20,7 +20,7 @@ export const requestSnippets = {
     },
   },
   defaultExpanded: true,
-  languages: ["node"],
+  languages: ["node", "curl_bash"],
 };
 // Since swagger-ui-react was not configured to change the request snippets some workarounds required
 // configuration will be added programatically

apps/swagger/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "PORT=4200 next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "PORT=4200 next start"
   },
   "dependencies": {
     "highlight.js": "^11.5.1",

apps/swagger/pages/index.tsx

@@ -1,20 +1,25 @@
 import dynamic from "next/dynamic";
+import { SwaggerUI } from "swagger-ui-react";
 
 import { SnippedGenerator, requestSnippets } from "@lib/snippets";
 
-const SwaggerUI: any = dynamic(() => import("swagger-ui-react"), { ssr: false });
+const SwaggerUIDynamic: SwaggerUI & { url: string } = dynamic(() => import("swagger-ui-react"), {
+  ssr: false,
+});
 
 export default function APIDocs() {
   return (
-    <SwaggerUI
+    <SwaggerUIDynamic
       url={process.env.NEXT_PUBLIC_SWAGGER_DOCS_URL || "https://api.cal.com/docs"}
-      supportedSubmitMethods={["get", "post", "delete", "patch"]}
+      persistAuthorization={true}
+      supportedSubmitMethods={["get", "post", "delete", "put", "options", "patch"]}
       requestSnippetsEnabled={true}
       requestSnippets={requestSnippets}
       plugins={[SnippedGenerator]}
       tryItOutEnabled={true}
       syntaxHighlight={true}
-      docExpansion="none"
+      enableCORS={false} // Doesn't seem to work either
+      docExpansion="list"
       filter={true}
     />
   );

apps/swagger/styles/globals.css

@@ -14,3 +14,89 @@ a {
 * {
   box-sizing: border-box;
 }
+
+@media (max-width: 768px) {
+  .swagger-ui .opblock-tag {
+    font-size: 90% !important;
+  }
+  .swagger-ui .opblock .opblock-summary {
+    display: grid;
+  flex-direction: column;
+  }
+  .opblock-summary-path {
+    flex-shrink: 0;
+    max-width: 100% !important;
+    padding: 10px 5px !important;
+  }
+  .opblock-summary-description {
+    font-size: 16px !important;
+    padding: 0px 5px;
+  }
+  .swagger-ui .scheme-container .schemes {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+  }
+  .swagger-ui .info .title {
+    color: #3b4151;
+    font-family: sans-serif;
+    font-size: 22px;
+  }
+  .swagger-ui .scheme-container {
+  padding: 14px 0;
+  }
+  .swagger-ui .info {
+      margin: 10px 0;
+  }
+  .swagger-ui .auth-wrapper {
+    margin: 10px 0;
+  }
+  .swagger-ui .authorization__btn {
+  display: none;
+  }
+  .swagger-ui .opblock {
+    margin: 0 0 5px;
+  }
+  button.opblock-summary-control > svg {
+    display: none;  
+  }
+  .swagger-ui .filter .operation-filter-input {
+    border: 2px solid #d8dde7;
+    margin: 5px 5px;
+    padding: 5px;
+    width: 100vw;
+  }
+  .swagger-ui .wrapper {
+    padding: 0 4px;
+    width: 100%;
+  }
+  .swagger-ui .info .title small {
+    top: 5px;
+  }
+  .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
+    width: 100%;
+  }
+  div.request-snippets > div.curl-command > div:nth-child(1) {
+    overscroll-behavior: contain;
+    overflow-x: scroll;
+  }
+  .swagger-ui .opblock-body pre.microlight {  
+    font-size: 9px; 
+  }
+  .swagger-ui table tbody tr td {
+    padding: 0px 0 0;
+    vertical-align: none;
+  }
+  td.response-col_description > div > div > p {
+    font-size: 12px;
+  }
+  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
+        display: flex;
+    width: 100vw;
+    flex-direction: column;
+    font-size: 60%;
+  }
+  div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
+    display: none;
+  }
+}

apps/web/.gitignore

@@ -61,3 +61,6 @@ yarn-error.log*
 
 # Typescript
 tsconfig.tsbuildinfo
+
+# Autogenerated embed content
+public/embed

apps/web/components/App.tsx

@@ -84,7 +84,7 @@ export default function App({
   }, []);
   return (
     <>
-      <Shell large>
+      <Shell large isPublic>
         <div className="-mx-4 md:-mx-8">
           <div className="bg-gray-50 px-4">
             <Link href="/apps">

apps/web/components/BookingsShell.tsx

@@ -11,6 +11,10 @@ export default function BookingsShell({ children }: { children: React.ReactNode
       name: t("upcoming"),
       href: "/bookings/upcoming",
     },
+    {
+      name: t("recurring"),
+      href: "/bookings/recurring",
+    },
     {
       name: t("past"),
       href: "/bookings/past",

apps/web/components/Embed.tsx

@@ -0,0 +1,900 @@
+import { CodeIcon, EyeIcon, SunIcon, ChevronRightIcon, ArrowLeftIcon } from "@heroicons/react/solid";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
+import classNames from "classnames";
+import { useRouter } from "next/router";
+import { useRef, useState } from "react";
+import { components, ControlProps, SingleValue } from "react-select";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import showToast from "@calcom/lib/notification";
+import { EventType } from "@calcom/prisma/client";
+import { Button, Switch } from "@calcom/ui";
+import { Dialog, DialogContent, DialogClose } from "@calcom/ui/Dialog";
+import { InputLeading, Label, TextArea, TextField } from "@calcom/ui/form/fields";
+
+import { WEBAPP_URL, EMBED_LIB_URL } from "@lib/config/constants";
+import { trpc } from "@lib/trpc";
+
+import NavTabs from "@components/NavTabs";
+import ColorPicker from "@components/ui/colorpicker";
+import Select from "@components/ui/form/Select";
+
+type EmbedType = "inline" | "floating-popup" | "element-click";
+const queryParamsForDialog = ["embedType", "tabName", "eventTypeId"];
+
+const embeds: {
+  illustration: React.ReactElement;
+  title: string;
+  subtitle: string;
+  type: EmbedType;
+}[] = [
+  {
+    title: "Inline Embed",
+    subtitle: "Loads your Cal scheduling page directly inline with your other website content",
+    type: "inline",
+    illustration: (
+      <svg
+        width="100%"
+        height="100%"
+        className="rounded-md"
+        viewBox="0 0 308 265"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
+          fill="white"
+        />
+        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="24.5" y="51" width="139" height="163" rx="1.5" fill="#F8F8F8" />
+        <rect opacity="0.8" x="48" y="74.5" width="80" height="8" rx="2" fill="#E1E1E1" />
+        <rect x="48" y="86.5" width="48" height="4" rx="1" fill="#E1E1E1" />
+        <rect x="49" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="61" y="99.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="73" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="85" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="97" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="109" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="121" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="133" y="99.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="85" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="97" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="109" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="121" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="133" y="113.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="49" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="61" y="125.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <path
+          d="M61 124.5H67V122.5H61V124.5ZM68 125.5V131.5H70V125.5H68ZM67 132.5H61V134.5H67V132.5ZM60 131.5V125.5H58V131.5H60ZM61 132.5C60.4477 132.5 60 132.052 60 131.5H58C58 133.157 59.3431 134.5 61 134.5V132.5ZM68 131.5C68 132.052 67.5523 132.5 67 132.5V134.5C68.6569 134.5 70 133.157 70 131.5H68ZM67 124.5C67.5523 124.5 68 124.948 68 125.5H70C70 123.843 68.6569 122.5 67 122.5V124.5ZM61 122.5C59.3431 122.5 58 123.843 58 125.5H60C60 124.948 60.4477 124.5 61 124.5V122.5Z"
+          fill="#3E3E3E"
+        />
+        <rect x="73" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="85" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="97" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="109" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="121" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="133" y="125.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="49" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="61" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="73" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="85" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="97" y="137.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="109" y="137.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="121" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="133" y="137.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="49" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="61" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="73" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="85" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="97" y="149.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="109" y="149.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="121" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="133" y="149.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="49" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="61" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="73" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="85" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="97" y="161.5" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="109" y="161.5" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="24.5" y="51" width="139" height="163" rx="1.5" stroke="#292929" />
+        <rect x="176" y="50.5" width="108" height="164" rx="2" fill="#E1E1E1" />
+        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        {/* <path
+        d="M2 1H306V-1H2V1ZM307 2V263H309V2H307ZM306 264H2V266H306V264ZM1 263V1.99999H-1V263H1ZM2 264C1.44772 264 1 263.552 1 263H-1C-1 264.657 0.343147 266 2 266V264ZM307 263C307 263.552 306.552 264 306 264V266C307.657 266 309 264.657 309 263H307ZM306 1C306.552 1 307 1.44772 307 2H309C309 0.343145 307.657 -1 306 -1V1ZM2 -1C0.343151 -1 -1 0.343133 -1 1.99999H1C1 1.44771 1.44771 1 2 1V-1Z"
+        fill="#CFCFCF"
+      /> */}
+      </svg>
+    ),
+  },
+  {
+    title: "Floating pop-up button",
+    subtitle: "Adds a floating button on your site that launches Cal in a dialog.",
+    type: "floating-popup",
+    illustration: (
+      <svg
+        width="100%"
+        height="100%"
+        className="rounded-md"
+        viewBox="0 0 308 265"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
+          fill="white"
+        />
+        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="24" y="50.5" width="120" height="76" rx="2" fill="#E1E1E1" />
+        <rect x="24" y="138.5" width="120" height="76" rx="2" fill="#E1E1E1" />
+        <rect x="156" y="50.5" width="128" height="164" rx="2" fill="#E1E1E1" />
+        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="226" y="223.5" width="66" height="26" rx="2" fill="#292929" />
+        <rect x="242" y="235.5" width="34" height="2" rx="1" fill="white" />
+        {/* <path
+        d="M2 1H306V-1H2V1ZM307 2V263H309V2H307ZM306 264H2V266H306V264ZM1 263V1.99999H-1V263H1ZM2 264C1.44772 264 1 263.552 1 263H-1C-1 264.657 0.343147 266 2 266V264ZM307 263C307 263.552 306.552 264 306 264V266C307.657 266 309 264.657 309 263H307ZM306 1C306.552 1 307 1.44772 307 2H309C309 0.343145 307.657 -1 306 -1V1ZM2 -1C0.343151 -1 -1 0.343133 -1 1.99999H1C1 1.44771 1.44771 1 2 1V-1Z"
+        fill="#CFCFCF"
+      /> */}
+      </svg>
+    ),
+  },
+  {
+    title: "Pop up via element click",
+    subtitle: "Open your Cal dialog when someone clicks an element.",
+    type: "element-click",
+    illustration: (
+      <svg
+        width="100%"
+        height="100%"
+        className="rounded-md"
+        viewBox="0 0 308 265"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
+          fill="white"
+        />
+        <rect x="24" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="24" y="50.5" width="120" height="76" rx="2" fill="#E1E1E1" />
+        <rect x="24" y="138.5" width="120" height="76" rx="2" fill="#E1E1E1" />
+        <rect x="156" y="50.5" width="128" height="164" rx="2" fill="#E1E1E1" />
+        <rect x="24" y="226.5" width="260" height="38.5" rx="2" fill="#E1E1E1" />
+        <rect x="84.5" y="61.5" width="139" height="141" rx="1.5" fill="#F8F8F8" />
+        <rect opacity="0.8" x="108" y="85" width="80" height="8" rx="2" fill="#E1E1E1" />
+        <rect x="108" y="97" width="48" height="4" rx="1" fill="#E1E1E1" />
+        <rect x="109" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="121" y="110" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="133" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="145" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="157" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="169" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="181" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="193" y="110" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="145" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="157" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="169" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="181" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="193" y="124" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="109" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="121" y="136" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <path
+          d="M121 135H127V133H121V135ZM128 136V142H130V136H128ZM127 143H121V145H127V143ZM120 142V136H118V142H120ZM121 143C120.448 143 120 142.552 120 142H118C118 143.657 119.343 145 121 145V143ZM128 142C128 142.552 127.552 143 127 143V145C128.657 145 130 143.657 130 142H128ZM127 135C127.552 135 128 135.448 128 136H130C130 134.343 128.657 133 127 133V135ZM121 133C119.343 133 118 134.343 118 136H120C120 135.448 120.448 135 121 135V133Z"
+          fill="#3E3E3E"
+        />
+        <rect x="133" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="145" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="157" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="169" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="181" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="193" y="136" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="109" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="121" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="133" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="145" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="157" y="148" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="169" y="148" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="181" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="193" y="148" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="109" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="121" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="133" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="145" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="157" y="160" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="169" y="160" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="181" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="193" y="160" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="109" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="121" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="133" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="145" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="157" y="172" width="6" height="6" rx="1" fill="#3E3E3E" />
+        <rect x="169" y="172" width="6" height="6" rx="1" fill="#C6C6C6" />
+        <rect x="84.5" y="61.5" width="139" height="141" rx="1.5" stroke="#292929" />
+        {/* <path
+        d="M2 1H306V-1H2V1ZM307 2V263H309V2H307ZM306 264H2V266H306V264ZM1 263V1.99999H-1V263H1ZM2 264C1.44772 264 1 263.552 1 263H-1C-1 264.657 0.343147 266 2 266V264ZM307 263C307 263.552 306.552 264 306 264V266C307.657 266 309 264.657 309 263H307ZM306 1C306.552 1 307 1.44772 307 2H309C309 0.343145 307.657 -1 306 -1V1ZM2 -1C0.343151 -1 -1 0.343133 -1 1.99999H1C1 1.44771 1.44771 1 2 1V-1Z"
+        fill="#CFCFCF"
+      /> */}
+      </svg>
+    ),
+  },
+];
+
+function getEmbedSnippetString() {
+  // TODO: Import this string from @calcom/embed-snippet
+  return `
+(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, "${EMBED_LIB_URL}", "init");
+Cal("init", {origin:"${WEBAPP_URL}"});
+`;
+}
+
+const EmbedNavBar = () => {
+  const { t } = useLocale();
+  const tabs = [
+    {
+      name: t("Embed"),
+      tabName: "embed-code",
+      icon: CodeIcon,
+    },
+    {
+      name: t("Preview"),
+      tabName: "embed-preview",
+      icon: EyeIcon,
+    },
+  ];
+
+  return <NavTabs data-testid="embed-tabs" tabs={tabs} linkProps={{ shallow: true }} />;
+};
+const ThemeSelectControl = ({ children, ...props }: ControlProps<any, false>) => {
+  return (
+    <components.Control {...props}>
+      <SunIcon className="h-[32px] w-[32px] text-gray-500" />
+      {children}
+    </components.Control>
+  );
+};
+
+const ChooseEmbedTypesDialogContent = () => {
+  const { t } = useLocale();
+  const router = useRouter();
+  return (
+    <DialogContent size="lg">
+      <div className="mb-4">
+        <h3 className="text-lg font-bold leading-6 text-gray-900" id="modal-title">
+          {t("how_you_want_add_cal_site")}
+        </h3>
+        <div>
+          <p className="text-sm text-gray-500">{t("choose_ways_put_cal_site")}</p>
+        </div>
+      </div>
+      <div className="flex">
+        {embeds.map((embed, index) => (
+          <button
+            className="mr-2 w-1/3 p-3 text-left hover:rounded-md hover:border hover:bg-neutral-100"
+            key={index}
+            data-testid={embed.type}
+            onClick={() => {
+              router.push({
+                query: {
+                  ...router.query,
+                  embedType: embed.type,
+                },
+              });
+            }}>
+            <div className="order-none box-border flex-none rounded-sm border border-solid bg-white">
+              {embed.illustration}
+            </div>
+            <div className="mt-2 font-medium text-neutral-900">{embed.title}</div>
+            <p className="text-sm text-gray-500">{embed.subtitle}</p>
+          </button>
+        ))}
+      </div>
+    </DialogContent>
+  );
+};
+
+const EmbedTypeCodeAndPreviewDialogContent = ({
+  eventTypeId,
+  embedType,
+}: {
+  eventTypeId: EventType["id"];
+  embedType: EmbedType;
+}) => {
+  const { t } = useLocale();
+  const router = useRouter();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const embedCode = useRef<HTMLTextAreaElement>(null);
+  const embed = embeds.find((embed) => embed.type === embedType);
+
+  const { data: eventType, isLoading } = trpc.useQuery([
+    "viewer.eventTypes.get",
+    {
+      id: +eventTypeId,
+    },
+  ]);
+
+  const [isEmbedCustomizationOpen, setIsEmbedCustomizationOpen] = useState(true);
+  const [isBookingCustomizationOpen, setIsBookingCustomizationOpen] = useState(true);
+  const [previewState, setPreviewState] = useState({
+    inline: {
+      width: "100%",
+      height: "100%",
+    },
+    theme: "auto",
+    floatingPopup: {},
+    elementClick: {},
+    palette: {
+      brandColor: "#000000",
+    },
+  });
+
+  const close = () => {
+    const noPopupQuery = {
+      ...router.query,
+    };
+
+    delete noPopupQuery.dialog;
+
+    queryParamsForDialog.forEach((queryParam) => {
+      delete noPopupQuery[queryParam];
+    });
+
+    router.push({
+      query: noPopupQuery,
+    });
+  };
+
+  // Use embed-code as default tab
+  if (!router.query.tabName) {
+    router.query.tabName = "embed-code";
+    router.push({
+      query: {
+        ...router.query,
+      },
+    });
+  }
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (!embed || !eventType) {
+    close();
+    return null;
+  }
+
+  const calLink = `${eventType.team ? `team/${eventType.team.slug}` : eventType.users[0].username}/${
+    eventType.slug
+  }`;
+
+  // TODO: Not sure how to make these template strings look better formatted.
+  // This exact formatting is required to make the code look nicely formatted together.
+  const getEmbedUIInstructionString = () =>
+    `Cal("ui", {
+  ${getThemeForSnippet() ? 'theme: "' + previewState.theme + '",\n  ' : ""}styles: {
+    branding: ${JSON.stringify(previewState.palette)}
+  }
+})`;
+
+  const getEmbedTypeSpecificString = () => {
+    if (embedType === "inline") {
+      return `
+Cal("inline", {
+  elementOrSelector:"#my-cal-inline",
+  calLink: "${calLink}"
+});
+${getEmbedUIInstructionString().trim()}`;
+    } else if (embedType === "floating-popup") {
+      let floatingButtonArg = {
+        calLink,
+        ...previewState.floatingPopup,
+      };
+      return `
+Cal("floatingButton", ${JSON.stringify(floatingButtonArg)});
+${getEmbedUIInstructionString().trim()}`;
+    } else if (embedType === "element-click") {
+      return `//Important: Also, add data-cal-link="${calLink}" attribute to the element you want to open Cal on click
+${getEmbedUIInstructionString().trim()}`;
+    }
+    return "";
+  };
+
+  const getThemeForSnippet = () => {
+    return previewState.theme !== "auto" ? previewState.theme : null;
+  };
+
+  const getDimension = (dimension: string) => {
+    if (dimension.match(/^\d+$/)) {
+      dimension = `${dimension}%`;
+    }
+    return dimension;
+  };
+
+  const addToPalette = (update: typeof previewState["palette"]) => {
+    setPreviewState((previewState) => {
+      return {
+        ...previewState,
+        palette: {
+          ...previewState.palette,
+          ...update,
+        },
+      };
+    });
+  };
+
+  const previewInstruction = (instruction: { name: string; arg: any }) => {
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        mode: "cal:preview",
+        type: "instruction",
+        instruction,
+      },
+      "*"
+    );
+  };
+
+  const inlineEmbedDimensionUpdate = ({ width, height }: { width: string; height: string }) => {
+    iframeRef.current?.contentWindow?.postMessage(
+      {
+        mode: "cal:preview",
+        type: "inlineEmbedDimensionUpdate",
+        data: {
+          width: getDimension(width),
+          height: getDimension(height),
+        },
+      },
+      "*"
+    );
+  };
+
+  previewInstruction({
+    name: "ui",
+    arg: {
+      theme: previewState.theme,
+      styles: {
+        branding: {
+          ...previewState.palette,
+        },
+      },
+    },
+  });
+
+  if (embedType === "floating-popup") {
+    previewInstruction({
+      name: "floatingButton",
+      arg: {
+        attributes: {
+          id: "my-floating-button",
+        },
+        ...previewState.floatingPopup,
+      },
+    });
+  }
+
+  if (embedType === "inline") {
+    inlineEmbedDimensionUpdate({
+      width: previewState.inline.width,
+      height: previewState.inline.height,
+    });
+  }
+
+  const ThemeOptions = [
+    { value: "auto", label: "Auto Theme" },
+    { value: "dark", label: "Dark Theme" },
+    { value: "light", label: "Light Theme" },
+  ];
+
+  const FloatingPopupPositionOptions = [
+    {
+      value: "bottom-right",
+      label: "Bottom Right",
+    },
+    {
+      value: "bottom-left",
+      label: "Bottom Left",
+    },
+  ];
+
+  return (
+    <DialogContent size="xl">
+      <div className="flex">
+        <div className="flex w-1/3 flex-col bg-white p-6">
+          <h3 className="mb-2 flex text-xl font-bold leading-6 text-gray-900" id="modal-title">
+            <button
+              onClick={() => {
+                const newQuery = { ...router.query };
+                delete newQuery.embedType;
+                delete newQuery.tabName;
+                router.push({
+                  query: {
+                    ...newQuery,
+                  },
+                });
+              }}>
+              <ArrowLeftIcon className="mr-4 w-4"></ArrowLeftIcon>
+            </button>
+            {embed.title}
+          </h3>
+          <hr className={classNames("mt-4", embedType === "element-click" ? "hidden" : "")}></hr>
+          <div className={classNames("mt-4 font-medium", embedType === "element-click" ? "hidden" : "")}>
+            <Collapsible
+              open={isEmbedCustomizationOpen}
+              onOpenChange={() => setIsEmbedCustomizationOpen((val) => !val)}>
+              <CollapsibleTrigger
+                type="button"
+                className="flex w-full items-center text-base font-medium text-neutral-900">
+                <div>
+                  {embedType === "inline"
+                    ? "Inline Embed Customization"
+                    : embedType === "floating-popup"
+                    ? "Floating Popup Customization"
+                    : "Element Click Customization"}
+                </div>
+                <ChevronRightIcon
+                  className={`${
+                    isEmbedCustomizationOpen ? "rotate-90 transform" : ""
+                  } ml-auto h-5 w-5 text-neutral-500`}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent className="text-sm">
+                <div className={classNames("mt-6", embedType === "inline" ? "block" : "hidden")}>
+                  {/*TODO: Add Auto/Fixed toggle from Figma */}
+                  <div className="text-sm">Embed Window Sizing</div>
+                  <div className="justify-left flex items-center">
+                    <TextField
+                      name="width"
+                      labelProps={{ className: "hidden" }}
+                      required
+                      value={previewState.inline.width}
+                      onChange={(e) => {
+                        setPreviewState((previewState) => {
+                          let width = e.target.value || "100%";
+
+                          return {
+                            ...previewState,
+                            inline: {
+                              ...previewState.inline,
+                              width,
+                            },
+                          };
+                        });
+                      }}
+                      addOnLeading={<InputLeading>W</InputLeading>}
+                    />
+                    <span className="p-2">x</span>
+                    <TextField
+                      labelProps={{ className: "hidden" }}
+                      name="height"
+                      value={previewState.inline.height}
+                      required
+                      onChange={(e) => {
+                        const height = e.target.value || "100%";
+
+                        setPreviewState((previewState) => {
+                          return {
+                            ...previewState,
+                            inline: {
+                              ...previewState.inline,
+                              height,
+                            },
+                          };
+                        });
+                      }}
+                      addOnLeading={<InputLeading>H</InputLeading>}
+                    />
+                  </div>
+                </div>
+                <div
+                  className={classNames(
+                    "mt-4 items-center justify-between",
+                    embedType === "floating-popup" ? "flex" : "hidden"
+                  )}>
+                  <div className="text-sm">Button Text</div>
+                  {/* Default Values should come from preview iframe */}
+                  <TextField
+                    name="buttonText"
+                    labelProps={{ className: "hidden" }}
+                    onChange={(e) => {
+                      setPreviewState((previewState) => {
+                        return {
+                          ...previewState,
+                          floatingPopup: {
+                            ...previewState.floatingPopup,
+                            buttonText: e.target.value,
+                          },
+                        };
+                      });
+                    }}
+                    defaultValue="Book my Cal"
+                    required
+                  />
+                </div>
+                <div
+                  className={classNames(
+                    "mt-4 flex items-center justify-between",
+                    embedType === "floating-popup" ? "flex" : "hidden"
+                  )}>
+                  <div className="text-sm">Display Calendar Icon Button</div>
+                  <Switch
+                    defaultChecked={true}
+                    onCheckedChange={(checked) => {
+                      setPreviewState((previewState) => {
+                        return {
+                          ...previewState,
+                          floatingPopup: {
+                            ...previewState.floatingPopup,
+                            hideButtonIcon: !checked,
+                          },
+                        };
+                      });
+                    }}></Switch>
+                </div>
+                <div
+                  className={classNames(
+                    "mt-4 flex items-center justify-between",
+                    embedType === "floating-popup" ? "flex" : "hidden"
+                  )}>
+                  <div>Position of Button</div>
+                  <Select
+                    onChange={(position) => {
+                      setPreviewState((previewState) => {
+                        return {
+                          ...previewState,
+                          floatingPopup: {
+                            ...previewState.floatingPopup,
+                            buttonPosition: position?.value,
+                          },
+                        };
+                      });
+                    }}
+                    defaultValue={FloatingPopupPositionOptions[0]}
+                    options={FloatingPopupPositionOptions}></Select>
+                </div>
+                <div
+                  className={classNames(
+                    "mt-4 flex items-center justify-between",
+                    embedType === "floating-popup" ? "flex" : "hidden"
+                  )}>
+                  <div>Button Color</div>
+                  <div className="w-36">
+                    <ColorPicker
+                      defaultValue="#000000"
+                      onChange={(color) => {
+                        setPreviewState((previewState) => {
+                          return {
+                            ...previewState,
+                            floatingPopup: {
+                              ...previewState.floatingPopup,
+                              buttonColor: color,
+                            },
+                          };
+                        });
+                      }}></ColorPicker>
+                  </div>
+                </div>
+                <div
+                  className={classNames(
+                    "mt-4 flex items-center justify-between",
+                    embedType === "floating-popup" ? "flex" : "hidden"
+                  )}>
+                  <div>Text Color</div>
+                  <div className="w-36">
+                    <ColorPicker
+                      defaultValue="#000000"
+                      onChange={(color) => {
+                        setPreviewState((previewState) => {
+                          return {
+                            ...previewState,
+                            floatingPopup: {
+                              ...previewState.floatingPopup,
+                              buttonTextColor: color,
+                            },
+                          };
+                        });
+                      }}></ColorPicker>
+                  </div>
+                </div>
+                {/* <div
+                  className={classNames(
+                    "mt-4 items-center justify-between",
+                    embedType === "floating-popup" ? "flex" : "hidden"
+                  )}>
+                  <div>Button Color on Hover</div>
+                  <div className="w-36">
+                    <ColorPicker
+                      defaultValue="#000000"
+                      onChange={(color) => {
+                        addToPalette({
+                          "floating-popup-button-color-hover": color,
+                        });
+                      }}></ColorPicker>
+                  </div>
+                </div> */}
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+          <hr className="mt-4"></hr>
+          <div className="mt-4 font-medium">
+            <Collapsible
+              open={isBookingCustomizationOpen}
+              onOpenChange={() => setIsBookingCustomizationOpen((val) => !val)}>
+              <CollapsibleTrigger className="flex w-full" type="button">
+                <div className="text-base  font-medium text-neutral-900">Cal Booking Customization</div>
+                <ChevronRightIcon
+                  className={`${
+                    isBookingCustomizationOpen ? "rotate-90 transform" : ""
+                  } ml-auto h-5 w-5 text-neutral-500`}
+                />
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <div className="mt-6 text-sm">
+                  <Label className="flex items-center justify-between">
+                    <div>Theme</div>
+                    <Select
+                      className="w-36"
+                      defaultValue={ThemeOptions[0]}
+                      components={{
+                        Control: ThemeSelectControl,
+                      }}
+                      onChange={(option) => {
+                        if (!option) {
+                          return;
+                        }
+                        setPreviewState((previewState) => {
+                          return {
+                            ...previewState,
+                            theme: option.value,
+                          };
+                        });
+                      }}
+                      options={ThemeOptions}></Select>
+                  </Label>
+                  {[
+                    { name: "brandColor", title: "Brand Color" },
+                    // { name: "lightColor", title: "Light Color" },
+                    // { name: "lighterColor", title: "Lighter Color" },
+                    // { name: "lightestColor", title: "Lightest Color" },
+                    // { name: "highlightColor", title: "Highlight Color" },
+                    // { name: "medianColor", title: "Median Color" },
+                  ].map((palette) => (
+                    <Label key={palette.name} className="flex items-center justify-between">
+                      <div>{palette.title}</div>
+                      <div className="w-36">
+                        <ColorPicker
+                          defaultValue="#000000"
+                          onChange={(color) => {
+                            //@ts-ignore - How to support dynamic palette names?
+                            addToPalette({
+                              [palette.name]: color,
+                            });
+                          }}></ColorPicker>
+                      </div>
+                    </Label>
+                  ))}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </div>
+        </div>
+        <div className="w-2/3 bg-gray-50 p-6">
+          <EmbedNavBar />
+          <div>
+            <div
+              className={classNames(router.query.tabName === "embed-code" ? "block" : "hidden", "h-[75vh]")}>
+              <small className="flex py-4 text-neutral-500">{t("place_where_cal_widget_appear")}</small>
+              <TextArea
+                data-testid="embed-code"
+                ref={embedCode}
+                name="embed-code"
+                className="h-[36rem]"
+                readOnly
+                value={
+                  `<!-- Cal ${embedType} embed code begins -->\n` +
+                  (embedType === "inline"
+                    ? `<div style="width:${getDimension(previewState.inline.width)};height:${getDimension(
+                        previewState.inline.height
+                      )};overflow:scroll" id="my-cal-inline"></div>\n`
+                    : "") +
+                  `<script type="text/javascript">
+${getEmbedSnippetString().trim()}
+${getEmbedTypeSpecificString().trim()}
+</script>
+<!-- Cal ${embedType} embed code ends -->`
+                }></TextArea>
+              <p className="hidden text-sm text-gray-500">
+                {t(
+                  "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options."
+                )}
+              </p>
+            </div>
+            <div className={router.query.tabName == "embed-preview" ? "block" : "hidden"}>
+              <iframe
+                ref={iframeRef}
+                data-testid="embed-preview"
+                className="border-1 h-[75vh] border"
+                width="100%"
+                height="100%"
+                src={`${WEBAPP_URL}/embed/preview.html?embedType=${embedType}&calLink=${calLink}`}
+              />
+            </div>
+          </div>
+          <div className="mt-8 flex flex-row-reverse gap-x-2">
+            <Button
+              type="submit"
+              onClick={() => {
+                if (!embedCode.current) {
+                  return;
+                }
+                navigator.clipboard.writeText(embedCode.current.value);
+                showToast(t("code_copied"), "success");
+              }}>
+              {t("copy_code")}
+            </Button>
+            <DialogClose asChild>
+              <Button color="secondary">{t("Close")}</Button>
+            </DialogClose>
+          </div>
+        </div>
+      </div>
+    </DialogContent>
+  );
+};
+
+export const EmbedDialog = () => {
+  const router = useRouter();
+  const eventTypeId: EventType["id"] = +(router.query.eventTypeId as string);
+  return (
+    <Dialog name="embed" clearQueryParamsOnClose={queryParamsForDialog}>
+      {!router.query.embedType ? (
+        <ChooseEmbedTypesDialogContent />
+      ) : (
+        <EmbedTypeCodeAndPreviewDialogContent
+          eventTypeId={eventTypeId}
+          embedType={router.query.embedType as EmbedType}
+        />
+      )}
+    </Dialog>
+  );
+};
+
+export const EmbedButton = ({
+  eventTypeId,
+  className = "",
+  dark,
+  ...props
+}: {
+  eventTypeId: EventType["id"];
+  className: string;
+  dark?: boolean;
+}) => {
+  const { t } = useLocale();
+  const router = useRouter();
+  className = classNames(className, "hidden lg:flex");
+  const openEmbedModal = () => {
+    const query = {
+      ...router.query,
+      dialog: "embed",
+      eventTypeId,
+    };
+    router.push(
+      {
+        pathname: router.pathname,
+        query,
+      },
+      undefined,
+      { shallow: true }
+    );
+  };
+
+  return (
+    <Button
+      type="button"
+      color="minimal"
+      size="sm"
+      className={className}
+      {...props}
+      data-test-eventtype-id={eventTypeId}
+      data-testid={"event-type-embed"}
+      onClick={() => openEmbedModal()}>
+      <CodeIcon
+        className={classNames("h-4 w-4 ltr:mr-2 rtl:ml-2", dark ? "" : "text-neutral-500")}></CodeIcon>
+      {t("Embed")}
+    </Button>
+  );
+};

apps/web/components/Loader.tsx

@@ -1,7 +1 @@
-export default function Loader() {
-  return (
-    <div className="loader border-brand dark:border-darkmodebrand">
-      <span className="loader-inner bg-brand dark:bg-darkmodebrand"></span>
-    </div>
-  );
-}
+export { default } from "@calcom/ui/Loader";

apps/web/components/NavTabs.tsx

@@ -1,32 +1,62 @@
 import { AdminRequired } from "components/ui/AdminRequired";
 import Link, { LinkProps } from "next/link";
 import { useRouter } from "next/router";
-import React, { ElementType, FC, Fragment } from "react";
+import React, { ElementType, FC, Fragment, MouseEventHandler } from "react";
 
 import classNames from "@lib/classNames";
 
 export interface NavTabProps {
   tabs: {
     name: string;
-    href: string;
+    /** If you want to change the path as per current tab */
+    href?: string;
+    /** If you want to change query param tabName as per current tab */
+    tabName?: string;
     icon?: ElementType;
     adminRequired?: boolean;
   }[];
   linkProps?: Omit<LinkProps, "href">;
 }
 
-const NavTabs: FC<NavTabProps> = ({ tabs, linkProps }) => {
+const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
   const router = useRouter();
   return (
     <>
-      <nav className="-mb-px flex space-x-5 rtl:space-x-reverse sm:rtl:space-x-reverse" aria-label="Tabs">
+      <nav
+        className="-mb-px flex space-x-5 rtl:space-x-reverse sm:rtl:space-x-reverse"
+        aria-label="Tabs"
+        {...props}>
         {tabs.map((tab) => {
-          const isCurrent = router.asPath === tab.href;
+          let href: string;
+          let isCurrent;
+          if ((tab.tabName && tab.href) || (!tab.tabName && !tab.href)) {
+            throw new Error("Use either tabName or href");
+          }
+          if (tab.href) {
+            href = tab.href;
+            isCurrent = router.asPath === tab.href;
+          } else if (tab.tabName) {
+            href = "";
+            isCurrent = router.query.tabName === tab.tabName;
+          }
+          const onClick: MouseEventHandler = tab.tabName
+            ? (e) => {
+                e.preventDefault();
+                router.push({
+                  query: {
+                    ...router.query,
+                    tabName: tab.tabName,
+                  },
+                });
+              }
+            : () => {};
+
           const Component = tab.adminRequired ? AdminRequired : Fragment;
           return (
             <Component key={tab.name}>
-              <Link href={tab.href} {...linkProps}>
+              <Link key={tab.name} href={href!} {...linkProps}>
                 <a
+                  onClick={onClick}
                   className={classNames(
                     isCurrent
                       ? "border-neutral-900 text-neutral-900"

apps/web/components/Shell.tsx

@@ -34,6 +34,7 @@ import HelpMenuItem from "@ee/components/support/HelpMenuItem";
 import classNames from "@lib/classNames";
 import { WEBAPP_URL } from "@lib/config/constants";
 import { shouldShowOnboarding } from "@lib/getting-started";
+import useMeQuery from "@lib/hooks/useMeQuery";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { trpc } from "@lib/trpc";
 
@@ -46,16 +47,6 @@ import pkg from "../package.json";
 import { useViewerI18n } from "./I18nLanguageHandler";
 import Logo from "./Logo";
 
-export function useMeQuery() {
-  const meQuery = trpc.useQuery(["viewer.me"], {
-    retry(failureCount) {
-      return failureCount > 3;
-    },
-  });
-
-  return meQuery;
-}
-
 function useRedirectToLoginIfUnauthenticated(isPublic = false) {
   const { data: session, status } = useSession();
   const loading = status === "loading";

apps/web/components/availability/Schedule.tsx

@@ -14,9 +14,9 @@ import Dropdown, { DropdownMenuTrigger, DropdownMenuContent } from "@calcom/ui/D
 
 import { defaultDayRange } from "@lib/availability";
 import { weekdayNames } from "@lib/core/i18n/weekday";
+import useMeQuery from "@lib/hooks/useMeQuery";
 import { TimeRange } from "@lib/types/schedule";
 
-import { useMeQuery } from "@components/Shell";
 import Select from "@components/ui/form/Select";
 
 dayjs.extend(utc);

apps/web/components/availability/SkeletonLoader.tsx

@@ -31,3 +31,16 @@ function SkeletonItem() {
     </li>
   );
 }
+
+export const AvailabilitySelectSkeletonLoader = () => {
+  return (
+    <li className="group flex w-full items-center justify-between rounded-sm border border-gray-200 px-[10px] py-3">
+      <div className="flex-grow truncate text-sm">
+        <div className="flex justify-between">
+          <SkeletonText width="32" height="4"></SkeletonText>
+          <SkeletonText width="4" height="4"></SkeletonText>
+        </div>
+      </div>
+    </li>
+  );
+};

apps/web/components/booking/AvailableTimes.tsx

@@ -1,6 +1,6 @@
 import { ExclamationIcon } from "@heroicons/react/solid";
 import { SchedulingType } from "@prisma/client";
-import { Dayjs } from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { FC, useEffect, useState } from "react";
@@ -8,6 +8,7 @@ import React, { FC, useEffect, useState } from "react";
 import { nameOfDay } from "@calcom/lib/weekday";
 
 import classNames from "@lib/classNames";
+import { timeZone } from "@lib/clock";
 import { useLocale } from "@lib/hooks/useLocale";
 import { useSlots } from "@lib/hooks/useSlots";
 
@@ -20,6 +21,7 @@ type AvailableTimesProps = {
   afterBufferTime: number;
   eventTypeId: number;
   eventLength: number;
+  recurringCount: number | undefined;
   eventTypeSlug: string;
   slotInterval: number | null;
   date: Dayjs;
@@ -36,6 +38,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
   eventTypeSlug,
   slotInterval,
   minimumBookingNotice,
+  recurringCount,
   timeFormat,
   users,
   schedulingType,
@@ -89,6 +92,8 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                 date: slot.time.format(),
                 type: eventTypeId,
                 slug: eventTypeSlug,
+                /** Treat as recurring only when a count exist and it's not a rescheduling workflow */
+                count: recurringCount && !rescheduleUid ? recurringCount : undefined,
               },
             };
 
@@ -109,7 +114,7 @@ const AvailableTimes: FC<AvailableTimesProps> = ({
                       brand === "#fff" || brand === "#ffffff" ? "border-brandcontrast" : "border-brand"
                     )}
                     data-testid="time">
-                    {slot.time.format(timeFormat)}
+                    {dayjs.tz(slot.time, timeZone()).format(timeFormat)}
                   </a>
                 </Link>
               </div>

apps/web/components/booking/BookingListItem.tsx

@@ -1,26 +1,37 @@
 import { BanIcon, CheckIcon, ClockIcon, XIcon, PencilAltIcon } from "@heroicons/react/outline";
 import { PaperAirplaneIcon } from "@heroicons/react/outline";
+import { RefreshIcon } from "@heroicons/react/solid";
 import { BookingStatus } from "@prisma/client";
 import dayjs from "dayjs";
 import { useState } from "react";
 import { useMutation } from "react-query";
+import { Frequency as RRuleFrequency } from "rrule";
 
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui/Dialog";
+import { Tooltip } from "@calcom/ui/Tooltip";
 import { TextArea } from "@calcom/ui/form/fields";
 
 import { HttpError } from "@lib/core/http/error";
-import { inferQueryOutput, trpc } from "@lib/trpc";
+import useMeQuery from "@lib/hooks/useMeQuery";
+import { parseRecurringDates } from "@lib/parseDate";
+import { inferQueryOutput, trpc, inferQueryInput } from "@lib/trpc";
 
-import { useMeQuery } from "@components/Shell";
 import { RescheduleDialog } from "@components/dialog/RescheduleDialog";
 import TableActions, { ActionType } from "@components/ui/TableActions";
 
+type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
+
 type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number];
 
-function BookingListItem(booking: BookingItem) {
+type BookingItemProps = BookingItem & {
+  listingStatus: BookingListingStatus;
+  recurringCount?: number;
+};
+
+function BookingListItem(booking: BookingItemProps) {
   // Get user so we can determine 12/24 hour format preferences
   const query = useMeQuery();
   const user = query.data;
@@ -30,14 +41,22 @@ function BookingListItem(booking: BookingItem) {
   const [rejectionDialogIsOpen, setRejectionDialogIsOpen] = useState(false);
   const mutation = useMutation(
     async (confirm: boolean) => {
+      let body = {
+        id: booking.id,
+        confirmed: confirm,
+        language: i18n.language,
+        reason: rejectionReason,
+      };
+      /**
+       * Only pass down the recurring event id when we need to confirm the entire series, which happens in
+       * the "Upcoming" tab, to support confirming discretionally in the "Recurring" tab.
+       */
+      if (booking.listingStatus === "upcoming" && booking.recurringEventId !== null) {
+        body = Object.assign({}, body, { recurringEventId: booking.recurringEventId });
+      }
       const res = await fetch("/api/book/confirm", {
         method: "PATCH",
-        body: JSON.stringify({
-          id: booking.id,
-          confirmed: confirm,
-          language: i18n.language,
-          reason: rejectionReason,
-        }),
+        body: JSON.stringify(body),
         headers: {
           "Content-Type": "application/json",
         },
@@ -58,14 +77,20 @@ function BookingListItem(booking: BookingItem) {
   const pendingActions: ActionType[] = [
     {
       id: "reject",
-      label: t("reject"),
+      label:
+        booking.listingStatus === "upcoming" && booking.recurringEventId !== null
+          ? t("reject_all")
+          : t("reject"),
       onClick: () => setRejectionDialogIsOpen(true),
       icon: BanIcon,
       disabled: mutation.isLoading,
     },
     {
       id: "confirm",
-      label: t("confirm"),
+      label:
+        booking.listingStatus === "upcoming" && booking.recurringEventId !== null
+          ? t("confirm_all")
+          : t("confirm"),
       onClick: () => mutation.mutate(true),
       icon: CheckIcon,
       disabled: mutation.isLoading,
@@ -112,6 +137,19 @@ function BookingListItem(booking: BookingItem) {
 
   const startTime = dayjs(booking.startTime).format(isUpcoming ? "ddd, D MMM" : "D MMMM YYYY");
   const [isOpenRescheduleDialog, setIsOpenRescheduleDialog] = useState(false);
+
+  // Calculate the booking date(s)
+  let recurringStrings: string[] = [];
+  if (booking.recurringCount && booking.eventType.recurringEvent?.freq !== null) {
+    [recurringStrings] = parseRecurringDates(
+      {
+        startDate: booking.startTime,
+        recurringEvent: booking.eventType.recurringEvent,
+        recurringCount: booking.recurringCount,
+      },
+      i18n
+    );
+  }
   return (
     <>
       <RescheduleDialog
@@ -154,12 +192,40 @@ function BookingListItem(booking: BookingItem) {
       </Dialog>
 
       <tr className="flex">
-        <td className="hidden whitespace-nowrap py-4 align-top ltr:pl-6 rtl:pr-6 sm:table-cell">
+        <td className="hidden whitespace-nowrap py-4 align-top ltr:pl-6 rtl:pr-6 sm:table-cell sm:w-56">
           <div className="text-sm leading-6 text-gray-900">{startTime}</div>
           <div className="text-sm text-gray-500">
             {dayjs(booking.startTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")} -{" "}
             {dayjs(booking.endTime).format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
           </div>
+          <div className="text-sm text-gray-400">
+            {booking.recurringCount &&
+              booking.eventType?.recurringEvent?.freq &&
+              booking.listingStatus === "upcoming" && (
+                <div className="underline decoration-gray-400 decoration-dashed underline-offset-2">
+                  <div className="flex">
+                    <Tooltip
+                      content={recurringStrings.map((aDate, key) => (
+                        <p key={key}>{aDate}</p>
+                      ))}>
+                      <p className="text-gray-600 dark:text-white">
+                        <RefreshIcon className="mr-1 -mt-1 inline-block h-4 w-4 text-gray-400" />
+                        {`${t("every_for_freq", {
+                          freq: t(
+                            `${RRuleFrequency[booking.eventType.recurringEvent.freq]
+                              .toString()
+                              .toLowerCase()}`
+                          ),
+                        })} ${booking.recurringCount} ${t(
+                          `${RRuleFrequency[booking.eventType.recurringEvent.freq].toString().toLowerCase()}`,
+                          { count: booking.recurringCount }
+                        )}`}
+                      </p>
+                    </Tooltip>
+                  </div>
+                </div>
+              )}
+          </div>
         </td>
         <td className={"flex-1 py-4 ltr:pl-4 rtl:pr-4" + (booking.rejected ? " line-through" : "")}>
           <div className="sm:hidden">

apps/web/components/booking/SkeletonLoader.tsx

@@ -2,8 +2,6 @@ import React from "react";
 
 import { SkeletonText } from "@calcom/ui";
 
-import BookingsShell from "@components/BookingsShell";
-
 function SkeletonLoader() {
   return (
     <ul className="mt-6 animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
@@ -22,10 +20,9 @@ function SkeletonItem() {
       <div className="flex-grow truncate text-sm">
         <div className="flex">
           <div className="flex flex-col space-y-2">
-            <SkeletonText width="32" height="5" />
-            <SkeletonText width="16" height="4" />
+            <SkeletonText width="16" height="5" />
+            <SkeletonText width="32" height="4" />
           </div>
-          <SkeletonText width="24" height="5" className="ml-4" />
         </div>
       </div>
       <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">

apps/web/components/booking/pages/AvailabilityPage.tsx

@@ -8,6 +8,7 @@ import {
   CreditCardIcon,
   GlobeIcon,
   InformationCircleIcon,
+  RefreshIcon,
 } from "@heroicons/react/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useContracts } from "contexts/contractsContext";
@@ -17,6 +18,7 @@ import utc from "dayjs/plugin/utc";
 import { useRouter } from "next/router";
 import { useEffect, useMemo, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
+import { Frequency as RRuleFrequency } from "rrule";
 
 import {
   useEmbedStyles,
@@ -27,11 +29,12 @@ import {
   useEmbedNonStylesConfig,
 } from "@calcom/embed-core";
 import classNames from "@calcom/lib/classNames";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { localStorage } from "@calcom/lib/webstorage";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { timeZone } from "@lib/clock";
-import { BASE_URL, WEBAPP_URL } from "@lib/config/constants";
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import useTheme from "@lib/hooks/useTheme";
 import { isBrandingHidden } from "@lib/isBrandingHidden";
@@ -101,6 +104,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
   }
   const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
   const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
+  const [recurringEventCount, setRecurringEventCount] = useState(eventType.recurringEvent?.count);
 
   const telemetry = useTelemetry();
 
@@ -109,8 +113,8 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
 
     telemetry.withJitsu((jitsu) =>
       jitsu.track(
-        telemetryEventTypes.pageView,
-        collectPageParameters("availability", { isTeamBooking: document.URL.includes("team/") })
+        top !== window ? telemetryEventTypes.embedView : telemetryEventTypes.pageView,
+        collectPageParameters("/availability", { isTeamBooking: document.URL.includes("team/") })
       )
     );
   }, [telemetry]);
@@ -142,6 +146,15 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
     setTimeFormat(is24hClock ? "HH:mm" : "h:mma");
   };
 
+  // Recurring event sidebar requires more space
+  const maxWidth = selectedDate
+    ? recurringEventCount
+      ? "max-w-6xl"
+      : "max-w-5xl"
+    : recurringEventCount
+    ? "max-w-4xl"
+    : "max-w-3xl";
+
   return (
     <>
       <Theme />
@@ -158,9 +171,8 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
             isEmbed
-              ? classNames(selectedDate ? "max-w-5xl" : "max-w-3xl")
-              : "transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24 " +
-                  (selectedDate ? "max-w-5xl" : "max-w-3xl")
+              ? classNames(maxWidth)
+              : classNames("transition-max-width mx-auto my-0 duration-500 ease-in-out md:my-24", maxWidth)
           )}>
           {isReady && (
             <div
@@ -168,7 +180,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
               className={classNames(
                 isBackgroundTransparent ? "" : "bg-white dark:bg-gray-800 sm:dark:border-gray-600",
                 "border-bookinglightest rounded-md md:border",
-                isEmbed ? "mx-auto" : selectedDate ? "max-w-5xl" : "max-w-3xl"
+                isEmbed ? "mx-auto" : maxWidth
               )}>
               {/* mobile: details */}
               <div className="block p-4 sm:p-8 md:hidden">
@@ -243,7 +255,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                 <div
                   className={
                     "hidden pr-8 sm:border-r sm:dark:border-gray-700 md:flex md:flex-col " +
-                    (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
+                    (selectedDate ? "sm:w-1/3" : recurringEventCount ? "sm:w-2/3" : "sm:w-1/2")
                   }>
                   <AvatarGroup
                     border="border-2 dark:border-gray-800 border-white"
@@ -267,15 +279,42 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                     {eventType.title}
                   </h1>
                   {eventType?.description && (
-                    <p className="text-bookinglight mb-2 dark:text-white">
+                    <p className="text-bookinglight mb-3 dark:text-white">
                       <InformationCircleIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
                       {eventType.description}
                     </p>
                   )}
-                  <p className="text-bookinglight mb-2 dark:text-white">
+                  <p className="text-bookinglight mb-3 dark:text-white">
                     <ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
                     {eventType.length} {t("minutes")}
                   </p>
+                  {!rescheduleUid && eventType.recurringEvent?.count && eventType.recurringEvent?.freq && (
+                    <div className="mb-3 text-gray-600 dark:text-white">
+                      <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                      <p className="mb-1 -ml-2 inline px-2 py-1">
+                        {t("every_for_freq", {
+                          freq: t(
+                            `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`
+                          ),
+                        })}
+                      </p>
+                      <input
+                        type="number"
+                        min="1"
+                        max={eventType.recurringEvent.count}
+                        className="w-16 rounded-sm border-gray-300 bg-white text-gray-600 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 dark:border-gray-500 dark:bg-gray-600 dark:text-white sm:text-sm"
+                        defaultValue={eventType.recurringEvent.count}
+                        onChange={(event) => {
+                          setRecurringEventCount(parseInt(event?.target.value));
+                        }}
+                      />
+                      <p className="inline text-gray-600 dark:text-white">
+                        {t(`${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`, {
+                          count: recurringEventCount,
+                        })}
+                      </p>
+                    </div>
+                  )}
                   {eventType.price > 0 && (
                     <p className="mb-1 -ml-2 px-2 py-1 text-gray-600 dark:text-white">
                       <CreditCardIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
@@ -302,7 +341,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                   {booking?.startTime && rescheduleUid && (
                     <div>
                       <p
-                        className="mt-4 mb-2 text-gray-600 dark:text-white"
+                        className="mt-4 mb-3 text-gray-600 dark:text-white"
                         data-testid="former_time_p_desktop">
                         {t("former_time")}
                       </p>
@@ -340,6 +379,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
                     eventTypeSlug={eventType.slug}
                     slotInterval={eventType.slotInterval}
                     eventLength={eventType.length}
+                    recurringCount={recurringEventCount}
                     date={selectedDate}
                     users={eventType.users}
                     schedulingType={eventType.schedulingType ?? null}

apps/web/components/booking/pages/BookingPage.tsx

@@ -2,8 +2,10 @@ import {
   CalendarIcon,
   ClockIcon,
   CreditCardIcon,
+  ExclamationCircleIcon,
   ExclamationIcon,
   InformationCircleIcon,
+  RefreshIcon,
 } from "@heroicons/react/solid";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { EventTypeCustomInputType } from "@prisma/client";
@@ -18,20 +20,17 @@ import { Controller, useForm, useWatch } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { ReactMultiEmail } from "react-multi-email";
 import { useMutation } from "react-query";
+import { Frequency as RRuleFrequency } from "rrule";
+import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
-import {
-  useIsEmbed,
-  useEmbedStyles,
-  useIsBackgroundTransparent,
-  useEmbedType,
-  useEmbedNonStylesConfig,
-} from "@calcom/embed-core";
+import { useEmbedNonStylesConfig, useIsBackgroundTransparent, useIsEmbed } from "@calcom/embed-core";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { createPaymentLink } from "@calcom/stripe/client";
 import { Button } from "@calcom/ui/Button";
+import { Tooltip } from "@calcom/ui/Tooltip";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
@@ -40,7 +39,8 @@ import { ensureArray } from "@lib/ensureArray";
 import useTheme from "@lib/hooks/useTheme";
 import { LocationType } from "@lib/location";
 import createBooking from "@lib/mutations/bookings/create-booking";
-import { parseDate } from "@lib/parseDate";
+import createRecurringBooking from "@lib/mutations/bookings/create-recurring-booking";
+import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 
@@ -76,6 +76,7 @@ const BookingPage = ({
   booking,
   profile,
   isDynamicGroupBooking,
+  recurringEventCount,
   locationLabels,
   hasHashedBookingLink,
   hashedLink,
@@ -89,6 +90,15 @@ const BookingPage = ({
   const { data: session } = useSession();
   const isBackgroundTransparent = useIsBackgroundTransparent();
 
+  useEffect(() => {
+    telemetry.withJitsu((jitsu) =>
+      jitsu.track(
+        top !== window ? telemetryEventTypes.embedView : telemetryEventTypes.pageView,
+        collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
+      )
+    );
+  }, []);
+
   useEffect(() => {
     if (eventType.metadata.smartContractAddress) {
       const eventOwner = eventType.users[0];
@@ -101,7 +111,7 @@ const BookingPage = ({
 
   const mutation = useMutation(createBooking, {
     onSuccess: async (responseData) => {
-      const { attendees, paymentUid } = responseData;
+      const { id, attendees, paymentUid } = responseData;
       if (paymentUid) {
         return await router.push(
           createPaymentLink({
@@ -135,6 +145,39 @@ const BookingPage = ({
           email: attendees[0].email,
           location,
           eventName: profile.eventName || "",
+          bookingId: id,
+        },
+      });
+    },
+  });
+
+  const recurringMutation = useMutation(createRecurringBooking, {
+    onSuccess: async (responseData = []) => {
+      const { attendees = [], id, recurringEventId } = responseData[0] || {};
+      const location = (function humanReadableLocation(location) {
+        if (!location) {
+          return;
+        }
+        if (location.includes("integration")) {
+          return t("web_conferencing_details_to_follow");
+        }
+        return location;
+      })(responseData[0].location);
+
+      return router.push({
+        pathname: "/success",
+        query: {
+          date,
+          type: eventType.id,
+          eventSlug: eventType.slug,
+          recur: recurringEventId,
+          user: profile.slug,
+          reschedule: !!rescheduleUid,
+          name: attendees[0].name,
+          email: attendees[0].email,
+          location,
+          eventName: profile.eventName || "",
+          bookingId: id,
         },
       });
     },
@@ -243,10 +286,24 @@ const BookingPage = ({
     }
   };
 
+  // Calculate the booking date(s)
+  let recurringStrings: string[] = [],
+    recurringDates: Date[] = [];
+  if (eventType.recurringEvent?.freq && recurringEventCount !== null) {
+    [recurringStrings, recurringDates] = parseRecurringDates(
+      {
+        startDate: date,
+        recurringEvent: eventType.recurringEvent,
+        recurringCount: parseInt(recurringEventCount.toString()),
+      },
+      i18n
+    );
+  }
+
   const bookEvent = (booking: BookingFormValues) => {
     telemetry.withJitsu((jitsu) =>
       jitsu.track(
-        telemetryEventTypes.bookingConfirmed,
+        top !== window ? telemetryEventTypes.embedBookingConfirmed : telemetryEventTypes.bookingConfirmed,
         collectPageParameters("/book", { isTeamBooking: document.URL.includes("team/") })
       )
     );
@@ -265,7 +322,7 @@ const BookingPage = ({
         {}
       );
 
-    let web3Details;
+    let web3Details: Record<"userWallet" | "userSignature", string> | undefined;
     if (eventTypeDetail.metadata.smartContractAddress) {
       web3Details = {
         // @ts-ignore
@@ -274,28 +331,59 @@ const BookingPage = ({
       };
     }
 
-    mutation.mutate({
-      ...booking,
-      web3Details,
-      start: dayjs(date).format(),
-      end: dayjs(date).add(eventType.length, "minute").format(),
-      eventTypeId: eventType.id,
-      eventTypeSlug: eventType.slug,
-      timeZone: timeZone(),
-      language: i18n.language,
-      rescheduleUid,
-      user: router.query.user,
-      location: getLocationValue(
-        booking.locationType ? booking : { ...booking, locationType: selectedLocation }
-      ),
-      metadata,
-      customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
-        label: eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
-        value: booking.customInputs![inputId],
-      })),
-      hasHashedBookingLink,
-      hashedLink,
-    });
+    if (recurringDates.length) {
+      // Identify set of bookings to one intance of recurring event to support batch changes
+      const recurringEventId = uuidv4();
+      const recurringBookings = recurringDates.map((recurringDate) => ({
+        ...booking,
+        web3Details,
+        start: dayjs(recurringDate).format(),
+        end: dayjs(recurringDate).add(eventType.length, "minute").format(),
+        eventTypeId: eventType.id,
+        eventTypeSlug: eventType.slug,
+        recurringEventId,
+        // Added to track down the number of actual occurrences selected by the user
+        recurringCount: recurringDates.length,
+        timeZone: timeZone(),
+        language: i18n.language,
+        rescheduleUid,
+        user: router.query.user,
+        location: getLocationValue(
+          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+        ),
+        metadata,
+        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
+          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
+          value: booking.customInputs![inputId],
+        })),
+        hasHashedBookingLink,
+        hashedLink,
+      }));
+      recurringMutation.mutate(recurringBookings);
+    } else {
+      mutation.mutate({
+        ...booking,
+        web3Details,
+        start: dayjs(date).format(),
+        end: dayjs(date).add(eventType.length, "minute").format(),
+        eventTypeId: eventType.id,
+        eventTypeSlug: eventType.slug,
+        timeZone: timeZone(),
+        language: i18n.language,
+        rescheduleUid,
+        user: router.query.user,
+        location: getLocationValue(
+          booking.locationType ? booking : { ...booking, locationType: selectedLocation }
+        ),
+        metadata,
+        customInputs: Object.keys(booking.customInputs || {}).map((inputId) => ({
+          label: eventType.customInputs.find((input) => input.id === parseInt(inputId))!.label,
+          value: booking.customInputs![inputId],
+        })),
+        hasHashedBookingLink,
+        hashedLink,
+      });
+    }
   };
 
   const disableInput = !!rescheduleUid;
@@ -375,10 +463,41 @@ const BookingPage = ({
                     </IntlProvider>
                   </p>
                 )}
-                <p className="text-bookinghighlight mb-4">
-                  <CalendarIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
-                  {parseDate(date, i18n)}
-                </p>
+                {!rescheduleUid && eventType.recurringEvent?.freq && recurringEventCount && (
+                  <div className="mb-3 text-gray-600 dark:text-white">
+                    <RefreshIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
+                    <p className="mb-1 -ml-2 inline px-2 py-1">
+                      {`${t("every_for_freq", {
+                        freq: t(`${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`),
+                      })} ${recurringEventCount} ${t(
+                        `${RRuleFrequency[eventType.recurringEvent.freq].toString().toLowerCase()}`,
+                        { count: parseInt(recurringEventCount.toString()) }
+                      )}`}
+                    </p>
+                  </div>
+                )}
+                <div className="text-bookinghighlight mb-4 flex">
+                  <CalendarIcon className="mr-[10px] ml-[2px] inline-block h-4 w-4" />
+                  <div className="-mt-1">
+                    {(rescheduleUid || !eventType.recurringEvent.freq) &&
+                      parseDate(dayjs.tz(date, timeZone()), i18n)}
+                    {!rescheduleUid &&
+                      eventType.recurringEvent.freq &&
+                      recurringStrings.slice(0, 5).map((aDate, key) => <p key={key}>{aDate}</p>)}
+                    {!rescheduleUid && eventType.recurringEvent.freq && recurringStrings.length > 5 && (
+                      <div className="flex">
+                        <Tooltip
+                          content={recurringStrings.slice(5).map((aDate, key) => (
+                            <p key={key}>{aDate}</p>
+                          ))}>
+                          <p className="text-gray-600 dark:text-white">
+                            {t("plus_more", { count: recurringStrings.length - 5 })}
+                          </p>
+                        </Tooltip>
+                      </div>
+                    )}
+                  </div>
+                </div>
                 {eventTypeDetail.isWeb3Active && eventType.metadata.smartContractAddress && (
                   <p className="text-bookinglight mb-1 -ml-2 px-2 py-1">
                     {t("requires_ownership_of_a_token") + " " + eventType.metadata.smartContractAddress}
@@ -429,13 +548,22 @@ const BookingPage = ({
                         {...bookingForm.register("email")}
                         required
                         className={classNames(
-                          "focus:border-brand block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm",
-                          disableInput ? "bg-gray-200 dark:text-gray-500" : ""
+                          "focus:border-brand block w-full rounded-sm shadow-sm focus:ring-black dark:bg-gray-700 dark:text-white dark:selection:bg-green-500 sm:text-sm",
+                          disableInput ? "bg-gray-200 dark:text-gray-500" : "",
+                          bookingForm.formState.errors.email
+                            ? "border-red-700 focus:ring-red-700"
+                            : " border-gray-300  dark:border-gray-900"
                         )}
                         placeholder="you@example.com"
                         type="search" // Disables annoying 1password intrusive popup (non-optimal, I know I know...)
                         disabled={disableInput}
                       />
+                      {bookingForm.formState.errors.email && (
+                        <div className="mt-2 flex items-center text-sm text-red-700 ">
+                          <ExclamationCircleIcon className="mr-2 h-3 w-3" />
+                          <p>{t("email_validation_error")}</p>
+                        </div>
+                      )}
                     </div>
                   </div>
                   {locations.length > 1 && (

apps/web/components/dialog/RescheduleDialog.tsx

@@ -77,7 +77,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
             />
 
             <DialogFooter>
-              <DialogClose>
+              <DialogClose asChild>
                 <Button color="secondary">{t("cancel")}</Button>
               </DialogClose>
               <Button

apps/web/components/eventtype/EventTypeDescription.tsx

@@ -1,11 +1,13 @@
-import { ClockIcon, CreditCardIcon, UserIcon, UsersIcon } from "@heroicons/react/solid";
+import { ClockIcon, CreditCardIcon, RefreshIcon, UserIcon, UsersIcon } from "@heroicons/react/solid";
 import { SchedulingType } from "@prisma/client";
 import { Prisma } from "@prisma/client";
-import React from "react";
+import React, { useMemo } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { RecurringEvent } from "@calcom/types/Calendar";
+
 import classNames from "@lib/classNames";
-import { useLocale } from "@lib/hooks/useLocale";
 
 const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
   select: {
@@ -14,6 +16,7 @@ const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({
     price: true,
     currency: true,
     schedulingType: true,
+    recurringEvent: true,
     description: true,
   },
 });
@@ -28,6 +31,11 @@ export type EventTypeDescriptionProps = {
 export const EventTypeDescription = ({ eventType, className }: EventTypeDescriptionProps) => {
   const { t } = useLocale();
 
+  const recurringEvent: RecurringEvent = useMemo(
+    () => (eventType.recurringEvent as RecurringEvent) || [],
+    [eventType.recurringEvent]
+  );
+
   return (
     <>
       <div className={classNames("text-neutral-500 dark:text-white", className)}>
@@ -54,6 +62,12 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
               {t("1_on_1")}
             </li>
           )}
+          {recurringEvent?.count && recurringEvent.count > 0 && (
+            <li className="flex whitespace-nowrap">
+              <RefreshIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />
+              {t("repeats_up_to", { count: recurringEvent.count })}
+            </li>
+          )}
           {eventType.price > 0 && (
             <li className="flex whitespace-nowrap">
               <CreditCardIcon className="mt-0.5 mr-1.5 inline h-4 w-4 text-neutral-400" aria-hidden="true" />

apps/web/components/eventtype/RecurringEventController.tsx

@@ -0,0 +1,132 @@
+import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible";
+import React, { useState } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { Frequency as RRuleFrequency } from "rrule";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { RecurringEvent } from "@calcom/types/Calendar";
+
+import Select from "@components/ui/form/Select";
+
+type RecurringEventControllerProps = { recurringEvent: RecurringEvent; formMethods: UseFormReturn<any, any> };
+
+export default function RecurringEventController({
+  recurringEvent,
+  formMethods,
+}: RecurringEventControllerProps) {
+  const { t } = useLocale();
+
+  const [recurringEventDefined, setRecurringEventDefined] = useState(recurringEvent?.count !== undefined);
+
+  const [recurringEventInterval, setRecurringEventInterval] = useState(recurringEvent?.interval || 1);
+  const [recurringEventFrequency, setRecurringEventFrequency] = useState(
+    recurringEvent?.freq || RRuleFrequency.WEEKLY
+  );
+  const [recurringEventCount, setRecurringEventCount] = useState(recurringEvent?.count || 12);
+
+  /* Just yearly-0, monthly-1 and weekly-2 */
+  const recurringEventFreqOptions = Object.entries(RRuleFrequency)
+    .filter(([key, value]) => isNaN(Number(key)) && Number(value) < 3)
+    .map(([key, value]) => ({
+      label: t(`${key.toString().toLowerCase()}`, { count: recurringEventInterval }),
+      value: value.toString(),
+    }));
+
+  return (
+    <div className="block items-start sm:flex">
+      <div className="min-w-48 mb-4 sm:mb-0">
+        <label htmlFor="recurringEvent" className="flex text-sm font-medium text-neutral-700">
+          {t("recurring_event")}
+        </label>
+      </div>
+      <div className="w-full">
+        <div className="relative flex items-start">
+          <div className="flex h-5 items-center">
+            <input
+              onChange={(event) => {
+                setRecurringEventDefined(event?.target.checked);
+                if (!event?.target.checked) {
+                  formMethods.setValue("recurringEvent", {});
+                } else {
+                  formMethods.setValue(
+                    "recurringEvent",
+                    recurringEventDefined
+                      ? recurringEvent
+                      : {
+                          interval: 1,
+                          count: 12,
+                          freq: RRuleFrequency.WEEKLY,
+                        }
+                  );
+                }
+                recurringEvent = formMethods.getValues("recurringEvent");
+              }}
+              type="checkbox"
+              className="text-primary-600  h-4 w-4 rounded border-gray-300"
+              defaultChecked={recurringEventDefined}
+              data-testid="recurring-event-check"
+            />
+          </div>
+          <div className="text-sm ltr:ml-3 rtl:mr-3">
+            <p className="text-neutral-900">{t("recurring_event_description")}</p>
+          </div>
+        </div>
+        <Collapsible
+          open={recurringEventDefined}
+          data-testid="recurring-event-collapsible"
+          onOpenChange={() => setRecurringEventDefined(!recurringEventDefined)}>
+          <CollapsibleContent className="mt-4 text-sm">
+            <div className="flex items-center">
+              <p className="mr-2 text-neutral-900">{t("repeats_every")}</p>
+              <input
+                type="number"
+                min="1"
+                max="20"
+                className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                defaultValue={recurringEvent?.interval || 1}
+                onChange={(event) => {
+                  setRecurringEventInterval(parseInt(event?.target.value));
+                  recurringEvent.interval = parseInt(event?.target.value);
+                  formMethods.setValue("recurringEvent", recurringEvent);
+                }}
+              />
+              <Select
+                options={recurringEventFreqOptions}
+                value={recurringEventFreqOptions[recurringEventFrequency]}
+                isSearchable={false}
+                className="w-18 block min-w-0 rounded-sm sm:text-sm"
+                onChange={(e) => {
+                  if (e?.value) {
+                    setRecurringEventFrequency(parseInt(e?.value));
+                    recurringEvent.freq = parseInt(e?.value);
+                    formMethods.setValue("recurringEvent", recurringEvent);
+                  }
+                }}
+              />
+            </div>
+            <div className="mt-4 flex items-center">
+              <p className="mr-2 text-neutral-900">{t("max")}</p>
+              <input
+                type="number"
+                min="1"
+                max="20"
+                className="block w-16 rounded-sm border-gray-300 shadow-sm [appearance:textfield] ltr:mr-2 rtl:ml-2 sm:text-sm"
+                defaultValue={recurringEvent?.count || 12}
+                onChange={(event) => {
+                  setRecurringEventCount(parseInt(event?.target.value));
+                  recurringEvent.count = parseInt(event?.target.value);
+                  formMethods.setValue("recurringEvent", recurringEvent);
+                }}
+              />
+              <p className="mr-2 text-neutral-900">
+                {t(`${RRuleFrequency[recurringEventFrequency].toString().toLowerCase()}`, {
+                  count: recurringEventCount,
+                })}
+              </p>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </div>
+  );
+}

apps/web/components/security/ChangePasswordSection.tsx

@@ -61,8 +61,8 @@ const ChangePasswordSection = () => {
           <div className="my-3">
             <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("change_password")}</h2>
           </div>
-          <div className="flex">
-            <div className="w-1/2 ltr:mr-2 rtl:ml-2">
+          <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0">
+            <div className="w-full ltr:mr-2 rtl:ml-2 sm:w-1/2">
               <label htmlFor="current_password" className="block text-sm font-medium text-gray-700">
                 {t("current_password")}
               </label>
@@ -79,7 +79,7 @@ const ChangePasswordSection = () => {
                 />
               </div>
             </div>
-            <div className="ml-2 w-1/2">
+            <div className="w-full sm:w-1/2">
               <label htmlFor="new_password" className="block text-sm font-medium text-gray-700">
                 {t("new_password")}
               </label>
@@ -98,7 +98,7 @@ const ChangePasswordSection = () => {
             </div>
           </div>
           {errorMessage && <p className="mt-1 text-sm text-red-700">{errorMessage}</p>}
-          <div className="flex justify-end py-8">
+          <div className="flex py-8 sm:justify-end">
             <Button color="secondary" type="submit">
               {t("save")}
             </Button>

apps/web/components/security/TwoFactorAuthSection.tsx

@@ -17,7 +17,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
 
   return (
     <>
-      <div className="flex flex-row justify-between truncate pt-9 pl-2">
+      <div className="flex flex-col justify-between pt-9 pl-2 sm:flex-row">
         <div>
           <div className="flex flex-row items-center">
             <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("2fa")}</h2>
@@ -27,7 +27,7 @@ const TwoFactorAuthSection = ({ twoFactorEnabled }: { twoFactorEnabled: boolean
           </div>
           <p className="mt-1 text-sm text-gray-500">{t("add_an_extra_layer_of_security")}</p>
         </div>
-        <div className="self-center">
+        <div className="mt-5 sm:mt-0 sm:self-center">
           <Button
             type="submit"
             color="secondary"

apps/web/components/team/MemberChangeRoleModal.tsx

@@ -15,10 +15,11 @@ type MembershipRoleOption = {
   label?: string;
 };
 
-const options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }];
+const options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }, { value: "OWNER" }];
 
 export default function MemberChangeRoleModal(props: {
   isOpen: boolean;
+  currentMember: MembershipRole;
   memberId: number;
   teamId: number;
   initialRole: MembershipRole;
@@ -57,7 +58,6 @@ export default function MemberChangeRoleModal(props: {
       role: role.value,
     });
   }
-
   return (
     <ModalContainer isOpen={props.isOpen} onExit={props.onExit}>
       <>
@@ -76,7 +76,7 @@ export default function MemberChangeRoleModal(props: {
             {/*<option value="OWNER">{t("owner")}</option> - needs dialog to confirm change of ownership */}
             <Select
               isSearchable={false}
-              options={options}
+              options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
               value={role}
               onChange={(option) => option && setRole(option)}
               id="role"

apps/web/components/team/MemberInvitationModal.tsx

@@ -16,6 +16,7 @@ import Select from "@components/ui/form/Select";
 type MemberInvitationModalProps = {
   isOpen: boolean;
   team: TeamWithMembers | null;
+  currentMember: MembershipRole;
   onExit: () => void;
 };
 
@@ -24,7 +25,7 @@ type MembershipRoleOption = {
   label?: string;
 };
 
-const _options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }];
+const _options: MembershipRoleOption[] = [{ value: "MEMBER" }, { value: "ADMIN" }, { value: "OWNER" }];
 
 export default function MemberInvitationModal(props: MemberInvitationModalProps) {
   const [errorMessage, setErrorMessage] = useState("");
@@ -100,7 +101,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
               </label>
               <Select
                 defaultValue={options[0]}
-                options={options}
+                options={props.currentMember !== MembershipRole.OWNER ? options.slice(0, 2) : options}
                 id="role"
                 name="role"
                 className="mt-1 block w-full rounded-sm border-gray-300 shadow-sm sm:text-sm"

apps/web/components/team/MemberListItem.tsx

@@ -1,9 +1,10 @@
-import { UserRemoveIcon, PencilIcon } from "@heroicons/react/outline";
-import { ClockIcon, ExternalLinkIcon, DotsHorizontalIcon } from "@heroicons/react/solid";
+import { PencilIcon, UserRemoveIcon } from "@heroicons/react/outline";
+import { ClockIcon, DotsHorizontalIcon, ExternalLinkIcon } from "@heroicons/react/solid";
 import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
-import React, { useState } from "react";
+import { useState } from "react";
 
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
@@ -14,12 +15,12 @@ import Dropdown, {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@calcom/ui/Dropdown";
+import { Tooltip } from "@calcom/ui/Tooltip";
 import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
-import { trpc, inferQueryOutput } from "@lib/trpc";
+import useCurrentUserId from "@lib/hooks/useCurrentUserId";
+import { inferQueryOutput, trpc } from "@lib/trpc";
 
-import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";
 import ModalContainer from "@components/ui/ModalContainer";
@@ -49,6 +50,14 @@ export default function MemberListItem(props: Props) {
     },
   });
 
+  const ownersInTeam = () => {
+    const { members } = props.team;
+    const owners = members.filter((member) => member["role"] === MembershipRole.OWNER && member["accepted"]);
+    return owners.length;
+  };
+
+  const currentUserId = useCurrentUserId();
+
   const name =
     props.member.name ||
     (() => {
@@ -65,7 +74,7 @@ export default function MemberListItem(props: Props) {
         <div className="flex w-full flex-col justify-between sm:flex-row">
           <div className="flex">
             <Avatar
-              imageSrc={getPlaceholderAvatar(props.member?.avatar, name)}
+              imageSrc={WEBSITE_URL + "/" + props.member.username + "/avatar.png"}
               alt={name || ""}
               className="h-9 w-9 rounded-full"
             />
@@ -121,8 +130,12 @@ export default function MemberListItem(props: Props) {
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuSeparator className="h-px bg-gray-200" />
-              {(props.team.membership.role === MembershipRole.OWNER ||
-                props.team.membership.role === MembershipRole.ADMIN) && (
+              {((props.team.membership.role === MembershipRole.OWNER &&
+                (props.member.role !== MembershipRole.OWNER ||
+                  ownersInTeam() > 1 ||
+                  props.member.id !== currentUserId)) ||
+                (props.team.membership.role === MembershipRole.ADMIN &&
+                  props.member.role !== MembershipRole.OWNER)) && (
                 <>
                   <DropdownMenuItem>
                     <Button
@@ -165,6 +178,7 @@ export default function MemberListItem(props: Props) {
       {showChangeMemberRoleModal && (
         <MemberChangeRoleModal
           isOpen={showChangeMemberRoleModal}
+          currentMember={props.team.membership.role}
           teamId={props.team?.id}
           memberId={props.member.id}
           initialRole={props.member.role as MembershipRole}
@@ -181,7 +195,7 @@ export default function MemberListItem(props: Props) {
           <div className="space-x-2 border-t py-5 rtl:space-x-reverse">
             <Button onClick={() => setShowTeamAvailabilityModal(false)}>{t("done")}</Button>
             {props.team.membership.role !== MembershipRole.MEMBER && (
-              <Link href={`/settings/teams/${props.team.id}/availability`}>
+              <Link href={`/settings/teams/${props.team.id}/availability`} passHref>
                 <Button color="secondary">{t("Open Team Availability")}</Button>
               </Link>
             )}

apps/web/components/team/TeamListItem.tsx

@@ -19,12 +19,12 @@ import Dropdown, {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from "@calcom/ui/Dropdown";
+import { Tooltip } from "@calcom/ui/Tooltip";
 
 import classNames from "@lib/classNames";
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import { trpc, inferQueryOutput } from "@lib/trpc";
 
-import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Avatar from "@components/ui/Avatar";
 

apps/web/components/team/screens/Team.tsx

@@ -5,9 +5,9 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 import React from "react";
 
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import { useLocale } from "@lib/hooks/useLocale";
 
 import Avatar from "@components/ui/Avatar";
@@ -52,7 +52,7 @@ const Team = ({ team }: TeamPageProps) => {
           <div>
             <Avatar
               alt={member.name || ""}
-              imageSrc={getPlaceholderAvatar(member.avatar, member.username)}
+              imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
               className="-mt-4 h-12 w-12"
             />
             <section className="mt-2 w-full space-y-1">

apps/web/components/ui/InfoBadge.tsx

@@ -1,6 +1,6 @@
 import { InformationCircleIcon } from "@heroicons/react/solid";
 
-import { Tooltip } from "@components/Tooltip";
+import { Tooltip } from "@calcom/ui/Tooltip";
 
 export default function InfoBadge({ content }: { content: string }) {
   return (

apps/web/components/webhook/WebhookDialogForm.tsx

@@ -29,7 +29,7 @@ export default function WebhookDialogForm(props: {
       subscriberUrl: "",
       active: true,
       payloadTemplate: null,
-    } as Omit<TWebhook, "userId" | "createdAt" | "eventTypeId">,
+    } as Omit<TWebhook, "userId" | "createdAt" | "eventTypeId" | "appId">,
   } = props;
 
   const [useCustomPayloadTemplate, setUseCustomPayloadTemplate] = useState(!!defaultValues.payloadTemplate);
@@ -58,7 +58,9 @@ export default function WebhookDialogForm(props: {
         props.handleClose();
       }}
       className="space-y-4">
-      <input type="hidden" {...form.register("id")} />
+      <div>
+        <input type="hidden" {...form.register("id")} />
+      </div>
       <fieldset className="space-y-2">
         <InputGroupBox className="border-0 bg-gray-50">
           <Controller
@@ -76,20 +78,21 @@ export default function WebhookDialogForm(props: {
           />
         </InputGroupBox>
       </fieldset>
-      <TextField
-        label={t("subscriber_url")}
-        {...form.register("subscriberUrl")}
-        required
-        type="url"
-        onChange={(e) => {
-          form.setValue("subscriberUrl", e.target.value);
-          if (hasTemplateIntegration({ url: e.target.value })) {
-            setUseCustomPayloadTemplate(true);
-            form.setValue("payloadTemplate", customTemplate({ url: e.target.value }));
-          }
-        }}
-      />
-
+      <div>
+        <TextField
+          label={t("subscriber_url")}
+          {...form.register("subscriberUrl")}
+          required
+          type="url"
+          onChange={(e) => {
+            form.setValue("subscriberUrl", e.target.value);
+            if (hasTemplateIntegration({ url: e.target.value })) {
+              setUseCustomPayloadTemplate(true);
+              form.setValue("payloadTemplate", customTemplate({ url: e.target.value }));
+            }
+          }}
+        />
+      </div>
       <fieldset className="space-y-2">
         <FieldsetLegend>{t("event_triggers")}</FieldsetLegend>
         <InputGroupBox className="border-0 bg-gray-50">

apps/web/components/webhook/WebhookListItem.tsx

@@ -3,12 +3,12 @@ import { PencilAltIcon, TrashIcon } from "@heroicons/react/outline";
 import classNames from "@calcom/lib/classNames";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { useLocale } from "@lib/hooks/useLocale";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import { ListItem } from "@components/List";
-import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 
 export type TWebhook = inferQueryOutput<"viewer.webhook.list">[number];

apps/web/contexts/contractsContext.tsx

@@ -1,5 +1,7 @@
 import { createContext, ReactNode, useContext } from "react";
 
+import { localStorage } from "@calcom/lib/webstorage";
+
 type contractsContextType = Record<string, string>;
 
 const contractsContextDefaultValue: contractsContextType = {};
@@ -21,18 +23,17 @@ interface addContractsPayload {
 
 export function ContractsProvider({ children }: Props) {
   const addContract = (payload: addContractsPayload) => {
-    window.localStorage.setItem(
+    localStorage.setItem(
       "contracts",
       JSON.stringify({
-        ...JSON.parse(window.localStorage.getItem("contracts") || "{}"),
+        ...JSON.parse(localStorage.getItem("contracts") || "{}"),
         [payload.address]: payload.signature,
       })
     );
   };
 
   const value = {
-    contracts:
-      typeof window !== "undefined" ? JSON.parse(window.localStorage.getItem("contracts") || "{}") : {},
+    contracts: typeof window !== "undefined" ? JSON.parse(localStorage.getItem("contracts") || "{}") : {},
     addContract,
   };
 

apps/web/ee/components/TrialBanner.tsx

@@ -4,8 +4,7 @@ import Button from "@calcom/ui/Button";
 
 import { TRIAL_LIMIT_DAYS } from "@lib/config/constants";
 import { useLocale } from "@lib/hooks/useLocale";
-
-import { useMeQuery } from "@components/Shell";
+import useMeQuery from "@lib/hooks/useMeQuery";
 
 const TrialBanner = () => {
   const { t } = useLocale();

apps/web/ee/components/apiKeys/ApiKeyDialogForm.tsx

@@ -8,11 +8,11 @@ import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
 import { DialogFooter } from "@calcom/ui/Dialog";
 import Switch from "@calcom/ui/Switch";
+import { Tooltip } from "@calcom/ui/Tooltip";
 import { Form, TextField } from "@calcom/ui/form/fields";
 
 import { trpc } from "@lib/trpc";
 
-import { Tooltip } from "@components/Tooltip";
 import { DatePicker } from "@components/ui/form/DatePicker";
 
 import { TApiKeys } from "./ApiKeyListItem";
@@ -102,17 +102,18 @@ export default function ApiKeyDialogForm(props: {
             setSuccessfulNewApiKeyModal(true);
           }}
           className="space-y-4">
-          <div className=" mb-10 mt-1">
+          <div className="mb-10 mt-1">
             <h2 className="font-semi-bold font-cal text-xl tracking-wide text-gray-900">{props.title}</h2>
             <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_key_modal_subtitle")}</p>
           </div>
-          <TextField
-            label={t("personal_note")}
-            placeholder={t("personal_note_placeholder")}
-            {...form.register("note")}
-            type="text"
-          />
-
+          <div>
+            <TextField
+              label={t("personal_note")}
+              placeholder={t("personal_note_placeholder")}
+              {...form.register("note")}
+              type="text"
+            />
+          </div>
           <div className="flex flex-col">
             <div className="flex justify-between py-2">
               <span className="block text-sm font-medium text-gray-700">{t("expire_date")}</span>

apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx

@@ -24,12 +24,12 @@ export default function ApiKeyListContainer() {
       query={query}
       success={({ data }) => (
         <>
-          <div className="flex flex-row justify-between truncate pl-2 pr-1 ">
+          <div className="flex flex-col justify-between truncate pl-2 pr-1 sm:flex-row">
             <div className="mt-9">
               <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("api_keys")}</h2>
               <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_keys_subtitle")}</p>
             </div>
-            <div className="self-center">
+            <div className="mb-9 sm:self-center">
               <Button StartIcon={PlusIcon} color="secondary" onClick={() => setNewApiKeyModal(true)}>
                 {t("generate_new_api_key")}
               </Button>

apps/web/ee/components/apiKeys/ApiKeyListItem.tsx

@@ -7,11 +7,11 @@ import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogTrigger } from "@calcom/ui/Dialog";
+import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
 import { ListItem } from "@components/List";
-import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import Badge from "@components/ui/Badge";
 

apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx

@@ -3,7 +3,8 @@ import utc from "dayjs/plugin/utc";
 import React, { useState, useEffect } from "react";
 import TimezoneSelect, { ITimezone } from "react-timezone-select";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
+import { WEBSITE_URL } from "@calcom/lib/constants";
+
 import { trpc, inferQueryOutput } from "@lib/trpc";
 
 import Avatar from "@components/ui/Avatar";
@@ -36,7 +37,7 @@ export default function TeamAvailabilityModal(props: Props) {
       <div className="min-w-64 w-64 space-y-5 p-5 pr-0">
         <div className="flex">
           <Avatar
-            imageSrc={getPlaceholderAvatar(props.member?.avatar, props.member?.name as string)}
+            imageSrc={WEBSITE_URL + "/" + props.member?.username + "/avatar.png"}
             alt={props.member?.name || ""}
             className="h-14 w-14 rounded-full"
           />

apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx

@@ -4,7 +4,8 @@ import TimezoneSelect, { ITimezone } from "react-timezone-select";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
+import { WEBSITE_URL } from "@calcom/lib/constants";
+
 import { trpc, inferQueryOutput } from "@lib/trpc";
 
 import Avatar from "@components/ui/Avatar";
@@ -45,7 +46,7 @@ export default function TeamAvailabilityScreen(props: Props) {
           HeaderComponent={
             <div className="mb-6 flex items-center">
               <Avatar
-                imageSrc={getPlaceholderAvatar(member?.avatar, member?.name as string)}
+                imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
                 alt={member?.name || ""}
                 className="min-w-10 min-h-10 mt-1 h-10 w-10 rounded-full"
               />

apps/web/ee/lib/stripe/server.ts

@@ -2,6 +2,7 @@ import { PaymentType, Prisma } from "@prisma/client";
 import Stripe from "stripe";
 import { v4 as uuidv4 } from "uuid";
 
+import getAppKeysFromSlug from "@calcom/app-store/_utils/getAppKeysFromSlug";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import prisma from "@calcom/prisma";
 import { createPaymentLink } from "@calcom/stripe/client";
@@ -16,8 +17,8 @@ export type PaymentInfo = {
   id?: string | null;
 };
 
-const paymentFeePercentage = process.env.PAYMENT_FEE_PERCENTAGE!;
-const paymentFeeFixed = process.env.PAYMENT_FEE_FIXED!;
+let paymentFeePercentage: number | undefined;
+let paymentFeeFixed: number | undefined;
 
 export async function handlePayment(
   evt: CalendarEvent,
@@ -33,6 +34,10 @@ export async function handlePayment(
     uid: string;
   }
 ) {
+  const appKeys = await getAppKeysFromSlug("stripe");
+  if (typeof appKeys.payment_fee_fixed === "number") paymentFeePercentage = appKeys.payment_fee_fixed;
+  if (typeof appKeys.payment_fee_percentage === "number") paymentFeeFixed = appKeys.payment_fee_percentage;
+
   const paymentFee = Math.round(
     selectedEventType.price * parseFloat(`${paymentFeePercentage}`) + parseInt(`${paymentFeeFixed}`)
   );

apps/web/ee/pages/api/integrations/stripepayment/webhook.ts

@@ -7,7 +7,7 @@ import EventManager from "@calcom/core/EventManager";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import prisma from "@calcom/prisma";
 import stripe from "@calcom/stripe/server";
-import { CalendarEvent } from "@calcom/types/Calendar";
+import { CalendarEvent, RecurringEvent } from "@calcom/types/Calendar";
 
 import { IS_PRODUCTION } from "@lib/config/constants";
 import { HttpError as HttpCode } from "@lib/core/http/error";
@@ -49,6 +49,7 @@ async function handlePaymentSuccess(event: Stripe.Event) {
       confirmed: true,
       attendees: true,
       location: true,
+      eventTypeId: true,
       userId: true,
       id: true,
       uid: true,
@@ -70,6 +71,23 @@ async function handlePaymentSuccess(event: Stripe.Event) {
 
   if (!booking) throw new Error("No booking found");
 
+  const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({ recurringEvent: true });
+  const eventTypeData = Prisma.validator<Prisma.EventTypeArgs>()({ select: eventTypeSelect });
+  type EventTypeRaw = Prisma.EventTypeGetPayload<typeof eventTypeData>;
+  let eventTypeRaw: EventTypeRaw | null = null;
+  if (booking.eventTypeId) {
+    eventTypeRaw = await prisma.eventType.findUnique({
+      where: {
+        id: booking.eventTypeId,
+      },
+      select: eventTypeSelect,
+    });
+  }
+
+  const eventType = {
+    recurringEvent: (eventTypeRaw?.recurringEvent || {}) as RecurringEvent,
+  };
+
   const { user } = booking;
 
   if (!user) throw new Error("No user found");
@@ -137,7 +155,7 @@ async function handlePaymentSuccess(event: Stripe.Event) {
 
   await prisma.$transaction([paymentUpdate, bookingUpdate]);
 
-  await sendScheduledEmails({ ...evt });
+  await sendScheduledEmails({ ...evt }, eventType.recurringEvent);
 
   throw new HttpCode({
     statusCode: 200,

apps/web/ee/pages/settings/teams/[id]/availability.tsx

@@ -5,10 +5,11 @@ import { Alert } from "@calcom/ui/Alert";
 import TeamAvailabilityScreen from "@ee/components/team/availability/TeamAvailabilityScreen";
 
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
+import useMeQuery from "@lib/hooks/useMeQuery";
 import { trpc } from "@lib/trpc";
 
 import Loader from "@components/Loader";
-import Shell, { useMeQuery } from "@components/Shell";
+import Shell from "@components/Shell";
 import Avatar from "@components/ui/Avatar";
 
 export function TeamAvailabilityPage() {

apps/web/lib/clock.ts

@@ -3,6 +3,8 @@ import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 
+import { localStorage } from "@calcom/lib/webstorage";
+
 import { isBrowserLocale24h } from "./timeFormat";
 
 dayjs.extend(utc);
@@ -21,11 +23,11 @@ const timeOptions: TimeOptions = {
 const isInitialized = false;
 
 const initClock = () => {
-  if (typeof localStorage === "undefined" || isInitialized) {
+  if (isInitialized) {
     return;
   }
   // This only sets browser locale if there's no preference on localStorage.
-  if (!localStorage || !localStorage.getItem("timeOption.is24hClock")) set24hClock(isBrowserLocale24h());
+  if (!localStorage.getItem("timeOption.is24hClock")) set24hClock(isBrowserLocale24h());
   timeOptions.is24hClock = localStorage.getItem("timeOption.is24hClock") === "true";
   timeOptions.inviteeTimeZone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess();
 };

apps/web/lib/emails/email-manager.ts

@@ -1,4 +1,5 @@
-import type { CalendarEvent, Person } from "@calcom/types/Calendar";
+import { recurringEvent } from "@calcom/prisma/zod-utils";
+import type { CalendarEvent, Person, RecurringEvent } from "@calcom/types/Calendar";
 
 import AttendeeAwaitingPaymentEmail from "@lib/emails/templates/attendee-awaiting-payment-email";
 import AttendeeCancelledEmail from "@lib/emails/templates/attendee-cancelled-email";
@@ -17,14 +18,14 @@ import OrganizerRescheduledEmail from "@lib/emails/templates/organizer-reschedul
 import OrganizerScheduledEmail from "@lib/emails/templates/organizer-scheduled-email";
 import TeamInviteEmail, { TeamInvite } from "@lib/emails/templates/team-invite-email";
 
-export const sendScheduledEmails = async (calEvent: CalendarEvent) => {
+export const sendScheduledEmails = async (calEvent: CalendarEvent, recurringEvent: RecurringEvent = {}) => {
   const emailsToSend: Promise<unknown>[] = [];
 
   emailsToSend.push(
     ...calEvent.attendees.map((attendee) => {
       return new Promise((resolve, reject) => {
         try {
-          const scheduledEmail = new AttendeeScheduledEmail(calEvent, attendee);
+          const scheduledEmail = new AttendeeScheduledEmail(calEvent, attendee, recurringEvent);
           resolve(scheduledEmail.sendEmail());
         } catch (e) {
           reject(console.error("AttendeeRescheduledEmail.sendEmail failed", e));
@@ -36,7 +37,7 @@ export const sendScheduledEmails = async (calEvent: CalendarEvent) => {
   emailsToSend.push(
     new Promise((resolve, reject) => {
       try {
-        const scheduledEmail = new OrganizerScheduledEmail(calEvent);
+        const scheduledEmail = new OrganizerScheduledEmail(calEvent, recurringEvent);
         resolve(scheduledEmail.sendEmail());
       } catch (e) {
         reject(console.error("OrganizerScheduledEmail.sendEmail failed", e));
@@ -47,14 +48,14 @@ export const sendScheduledEmails = async (calEvent: CalendarEvent) => {
   await Promise.all(emailsToSend);
 };
 
-export const sendRescheduledEmails = async (calEvent: CalendarEvent) => {
+export const sendRescheduledEmails = async (calEvent: CalendarEvent, recurringEvent: RecurringEvent = {}) => {
   const emailsToSend: Promise<unknown>[] = [];
 
   emailsToSend.push(
     ...calEvent.attendees.map((attendee) => {
       return new Promise((resolve, reject) => {
         try {
-          const scheduledEmail = new AttendeeRescheduledEmail(calEvent, attendee);
+          const scheduledEmail = new AttendeeRescheduledEmail(calEvent, attendee, recurringEvent);
           resolve(scheduledEmail.sendEmail());
         } catch (e) {
           reject(console.error("AttendeeRescheduledEmail.sendEmail failed", e));
@@ -66,7 +67,7 @@ export const sendRescheduledEmails = async (calEvent: CalendarEvent) => {
   emailsToSend.push(
     new Promise((resolve, reject) => {
       try {
-        const scheduledEmail = new OrganizerRescheduledEmail(calEvent);
+        const scheduledEmail = new OrganizerRescheduledEmail(calEvent, recurringEvent);
         resolve(scheduledEmail.sendEmail());
       } catch (e) {
         reject(console.error("OrganizerScheduledEmail.sendEmail failed", e));
@@ -77,10 +78,13 @@ export const sendRescheduledEmails = async (calEvent: CalendarEvent) => {
   await Promise.all(emailsToSend);
 };
 
-export const sendOrganizerRequestEmail = async (calEvent: CalendarEvent) => {
+export const sendOrganizerRequestEmail = async (
+  calEvent: CalendarEvent,
+  recurringEvent: RecurringEvent = {}
+) => {
   await new Promise((resolve, reject) => {
     try {
-      const organizerRequestEmail = new OrganizerRequestEmail(calEvent);
+      const organizerRequestEmail = new OrganizerRequestEmail(calEvent, recurringEvent);
       resolve(organizerRequestEmail.sendEmail());
     } catch (e) {
       reject(console.error("OrganizerRequestEmail.sendEmail failed", e));
@@ -88,10 +92,14 @@ export const sendOrganizerRequestEmail = async (calEvent: CalendarEvent) => {
   });
 };
 
-export const sendAttendeeRequestEmail = async (calEvent: CalendarEvent, attendee: Person) => {
+export const sendAttendeeRequestEmail = async (
+  calEvent: CalendarEvent,
+  attendee: Person,
+  recurringEvent: RecurringEvent = {}
+) => {
   await new Promise((resolve, reject) => {
     try {
-      const attendeeRequestEmail = new AttendeeRequestEmail(calEvent, attendee);
+      const attendeeRequestEmail = new AttendeeRequestEmail(calEvent, attendee, recurringEvent);
       resolve(attendeeRequestEmail.sendEmail());
     } catch (e) {
       reject(console.error("AttendRequestEmail.sendEmail failed", e));
@@ -99,14 +107,14 @@ export const sendAttendeeRequestEmail = async (calEvent: CalendarEvent, attendee
   });
 };
 
-export const sendDeclinedEmails = async (calEvent: CalendarEvent) => {
+export const sendDeclinedEmails = async (calEvent: CalendarEvent, recurringEvent: RecurringEvent = {}) => {
   const emailsToSend: Promise<unknown>[] = [];
 
   emailsToSend.push(
     ...calEvent.attendees.map((attendee) => {
       return new Promise((resolve, reject) => {
         try {
-          const declinedEmail = new AttendeeDeclinedEmail(calEvent, attendee);
+          const declinedEmail = new AttendeeDeclinedEmail(calEvent, attendee, recurringEvent);
           resolve(declinedEmail.sendEmail());
         } catch (e) {
           reject(console.error("AttendeeRescheduledEmail.sendEmail failed", e));
@@ -118,14 +126,14 @@ export const sendDeclinedEmails = async (calEvent: CalendarEvent) => {
   await Promise.all(emailsToSend);
 };
 
-export const sendCancelledEmails = async (calEvent: CalendarEvent) => {
+export const sendCancelledEmails = async (calEvent: CalendarEvent, recurringEvent: RecurringEvent = {}) => {
   const emailsToSend: Promise<unknown>[] = [];
 
   emailsToSend.push(
     ...calEvent.attendees.map((attendee) => {
       return new Promise((resolve, reject) => {
         try {
-          const scheduledEmail = new AttendeeCancelledEmail(calEvent, attendee);
+          const scheduledEmail = new AttendeeCancelledEmail(calEvent, attendee, recurringEvent);
           resolve(scheduledEmail.sendEmail());
         } catch (e) {
           reject(console.error("AttendeeCancelledEmail.sendEmail failed", e));
@@ -137,7 +145,7 @@ export const sendCancelledEmails = async (calEvent: CalendarEvent) => {
   emailsToSend.push(
     new Promise((resolve, reject) => {
       try {
-        const scheduledEmail = new OrganizerCancelledEmail(calEvent);
+        const scheduledEmail = new OrganizerCancelledEmail(calEvent, recurringEvent);
         resolve(scheduledEmail.sendEmail());
       } catch (e) {
         reject(console.error("OrganizerCancelledEmail.sendEmail failed", e));
@@ -148,10 +156,13 @@ export const sendCancelledEmails = async (calEvent: CalendarEvent) => {
   await Promise.all(emailsToSend);
 };
 
-export const sendOrganizerRequestReminderEmail = async (calEvent: CalendarEvent) => {
+export const sendOrganizerRequestReminderEmail = async (
+  calEvent: CalendarEvent,
+  recurringEvent: RecurringEvent = {}
+) => {
   await new Promise((resolve, reject) => {
     try {
-      const organizerRequestReminderEmail = new OrganizerRequestReminderEmail(calEvent);
+      const organizerRequestReminderEmail = new OrganizerRequestReminderEmail(calEvent, recurringEvent);
       resolve(organizerRequestReminderEmail.sendEmail());
     } catch (e) {
       reject(console.error("OrganizerRequestReminderEmail.sendEmail failed", e));
@@ -159,14 +170,17 @@ export const sendOrganizerRequestReminderEmail = async (calEvent: CalendarEvent)
   });
 };
 
-export const sendAwaitingPaymentEmail = async (calEvent: CalendarEvent) => {
+export const sendAwaitingPaymentEmail = async (
+  calEvent: CalendarEvent,
+  recurringEvent: RecurringEvent = {}
+) => {
   const emailsToSend: Promise<unknown>[] = [];
 
   emailsToSend.push(
     ...calEvent.attendees.map((attendee) => {
       return new Promise((resolve, reject) => {
         try {
-          const paymentEmail = new AttendeeAwaitingPaymentEmail(calEvent, attendee);
+          const paymentEmail = new AttendeeAwaitingPaymentEmail(calEvent, attendee, recurringEvent);
           resolve(paymentEmail.sendEmail());
         } catch (e) {
           reject(console.error("AttendeeAwaitingPaymentEmail.sendEmail failed", e));
@@ -178,10 +192,13 @@ export const sendAwaitingPaymentEmail = async (calEvent: CalendarEvent) => {
   await Promise.all(emailsToSend);
 };
 
-export const sendOrganizerPaymentRefundFailedEmail = async (calEvent: CalendarEvent) => {
+export const sendOrganizerPaymentRefundFailedEmail = async (
+  calEvent: CalendarEvent,
+  recurringEvent: RecurringEvent = {}
+) => {
   await new Promise((resolve, reject) => {
     try {
-      const paymentRefundFailedEmail = new OrganizerPaymentRefundFailedEmail(calEvent);
+      const paymentRefundFailedEmail = new OrganizerPaymentRefundFailedEmail(calEvent, recurringEvent);
       resolve(paymentRefundFailedEmail.sendEmail());
     } catch (e) {
       reject(console.error("OrganizerPaymentRefundFailedEmail.sendEmail failed", e));
@@ -213,14 +230,19 @@ export const sendTeamInviteEmail = async (teamInviteEvent: TeamInvite) => {
 
 export const sendRequestRescheduleEmail = async (
   calEvent: CalendarEvent,
-  metadata: { rescheduleLink: string }
+  metadata: { rescheduleLink: string },
+  recurringEvent: RecurringEvent = {}
 ) => {
   const emailsToSend: Promise<unknown>[] = [];
 
   emailsToSend.push(
     new Promise((resolve, reject) => {
       try {
-        const requestRescheduleEmail = new AttendeeRequestRescheduledEmail(calEvent, metadata);
+        const requestRescheduleEmail = new AttendeeRequestRescheduledEmail(
+          calEvent,
+          metadata,
+          recurringEvent
+        );
         resolve(requestRescheduleEmail.sendEmail());
       } catch (e) {
         reject(console.error("AttendeeRequestRescheduledEmail.sendEmail failed", e));
@@ -231,7 +253,11 @@ export const sendRequestRescheduleEmail = async (
   emailsToSend.push(
     new Promise((resolve, reject) => {
       try {
-        const requestRescheduleEmail = new OrganizerRequestRescheduleEmail(calEvent, metadata);
+        const requestRescheduleEmail = new OrganizerRequestRescheduleEmail(
+          calEvent,
+          metadata,
+          recurringEvent
+        );
         resolve(requestRescheduleEmail.sendEmail());
       } catch (e) {
         reject(console.error("OrganizerRequestRescheduledEmail.sendEmail failed", e));

apps/web/lib/emails/templates/attendee-declined-email.ts

@@ -42,7 +42,9 @@ export default class AttendeeDeclinedEmail extends AttendeeScheduledEmail {
 
   protected getTextBody(): string {
     return `
-${this.attendee.language.translate("event_request_declined")}
+${this.attendee.language.translate(
+  this.recurringEvent?.count ? "event_request_declined_recurring" : "event_request_declined"
+)}
 ${this.attendee.language.translate("emailed_you_and_any_other_attendees")}
 ${this.getWhat()}
 ${this.getWhen()}
@@ -75,7 +77,9 @@ ${this.getRejectionReason()}
       <div style="background-color:#F5F5F5;">
         ${emailSchedulingBodyHeader("xCircle")}
         ${emailScheduledBodyHeaderContent(
-          this.attendee.language.translate("event_request_declined"),
+          this.attendee.language.translate(
+            this.recurringEvent?.count ? "event_request_declined_recurring" : "event_request_declined"
+          ),
           this.attendee.language.translate("emailed_you_and_any_other_attendees")
         )}
         ${emailSchedulingBodyDivider()}

apps/web/lib/emails/templates/attendee-request-email.ts

@@ -87,10 +87,17 @@ ${this.getAdditionalNotes()}
       <div style="background-color:#F5F5F5;">
         ${emailSchedulingBodyHeader("calendarCircle")}
         ${emailScheduledBodyHeaderContent(
-          this.calEvent.organizer.language.translate("booking_submitted"),
-          this.calEvent.organizer.language.translate("user_needs_to_confirm_or_reject_booking", {
-            user: this.calEvent.organizer.name,
-          })
+          this.calEvent.organizer.language.translate(
+            this.recurringEvent?.count ? "booking_submitted_recurring" : "booking_submitted"
+          ),
+          this.calEvent.organizer.language.translate(
+            this.recurringEvent.count
+              ? "user_needs_to_confirm_or_reject_booking_recurring"
+              : "user_needs_to_confirm_or_reject_booking",
+            {
+              user: this.calEvent.organizer.name,
+            }
+          )
         )}
         ${emailSchedulingBodyDivider()}
         <!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" style="width:600px;" width="600" bgcolor="#FFFFFF" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->

apps/web/lib/emails/templates/attendee-request-reschedule-email.ts

@@ -6,7 +6,7 @@ import utc from "dayjs/plugin/utc";
 import { createEvent, DateArray, Person } from "ics";
 
 import { getCancelLink } from "@calcom/lib/CalEventParser";
-import { CalendarEvent } from "@calcom/types/Calendar";
+import { CalendarEvent, RecurringEvent } from "@calcom/types/Calendar";
 
 import {
   emailHead,
@@ -24,8 +24,8 @@ dayjs.extend(toArray);
 
 export default class AttendeeRequestRescheduledEmail extends OrganizerScheduledEmail {
   private metadata: { rescheduleLink: string };
-  constructor(calEvent: CalendarEvent, metadata: { rescheduleLink: string }) {
-    super(calEvent);
+  constructor(calEvent: CalendarEvent, metadata: { rescheduleLink: string }, recurringEvent: RecurringEvent) {
+    super(calEvent, recurringEvent);
     this.metadata = metadata;
   }
   protected getNodeMailerPayload(): Record<string, unknown> {

apps/web/lib/emails/templates/attendee-scheduled-email.ts

@@ -4,13 +4,15 @@ import timezone from "dayjs/plugin/timezone";
 import toArray from "dayjs/plugin/toArray";
 import utc from "dayjs/plugin/utc";
 import { createEvent, DateArray } from "ics";
+import { DatasetJsonLdProps } from "next-seo";
 import nodemailer from "nodemailer";
+import rrule from "rrule";
 
 import { getAppName } from "@calcom/app-store/utils";
 import { getCancelLink, getRichDescription } from "@calcom/lib/CalEventParser";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { serverConfig } from "@calcom/lib/serverConfig";
-import type { Person, CalendarEvent } from "@calcom/types/Calendar";
+import type { Person, CalendarEvent, RecurringEvent } from "@calcom/types/Calendar";
 
 import {
   emailHead,
@@ -29,10 +31,12 @@ dayjs.extend(toArray);
 export default class AttendeeScheduledEmail {
   calEvent: CalendarEvent;
   attendee: Person;
+  recurringEvent: RecurringEvent;
 
-  constructor(calEvent: CalendarEvent, attendee: Person) {
+  constructor(calEvent: CalendarEvent, attendee: Person, recurringEvent: RecurringEvent) {
     this.calEvent = calEvent;
     this.attendee = attendee;
+    this.recurringEvent = recurringEvent;
   }
 
   public sendEmail() {
@@ -53,6 +57,11 @@ export default class AttendeeScheduledEmail {
   }
 
   protected getiCalEventAsString(): string | undefined {
+    // Taking care of recurrence rule beforehand
+    let recurrenceRule: string | undefined = undefined;
+    if (this.recurringEvent?.count) {
+      recurrenceRule = new rrule(this.recurringEvent).toString().replace("RRULE:", "");
+    }
     const icsEvent = createEvent({
       start: dayjs(this.calEvent.startTime)
         .utc()
@@ -72,6 +81,7 @@ export default class AttendeeScheduledEmail {
         name: attendee.name,
         email: attendee.email,
       })),
+      ...{ recurrenceRule },
       status: "CONFIRMED",
     });
     if (icsEvent.error) {
@@ -125,7 +135,9 @@ export default class AttendeeScheduledEmail {
   }
   protected getTextBody(): string {
     return `
-${this.calEvent.attendees[0].language.translate("your_event_has_been_scheduled")}
+${this.calEvent.attendees[0].language.translate(
+  this.recurringEvent?.count ? "your_event_has_been_scheduled_recurring" : "your_event_has_been_scheduled"
+)}
 ${this.calEvent.attendees[0].language.translate("emailed_you_and_any_other_attendees")}
 
 ${getRichDescription(this.calEvent)}
@@ -157,7 +169,11 @@ ${getRichDescription(this.calEvent)}
       <div style="background-color:#F5F5F5;">
         ${emailSchedulingBodyHeader("checkCircle")}
         ${emailScheduledBodyHeaderContent(
-          this.calEvent.attendees[0].language.translate("your_event_has_been_scheduled"),
+          this.calEvent.attendees[0].language.translate(
+            this.recurringEvent?.count
+              ? "your_event_has_been_scheduled_recurring"
+              : "your_event_has_been_scheduled"
+          ),
           this.calEvent.attendees[0].language.translate("emailed_you_and_any_other_attendees")
         )}
         ${emailSchedulingBodyDivider()}
@@ -250,12 +266,30 @@ ${getRichDescription(this.calEvent)}
     </div>`;
   }
 
+  protected getRecurringWhen(): string {
+    if (this.recurringEvent?.freq) {
+      return ` - ${this.calEvent.attendees[0].language.translate("every_for_freq", {
+        freq: this.calEvent.attendees[0].language.translate(
+          `${rrule.FREQUENCIES[this.recurringEvent.freq].toString().toLowerCase()}`
+        ),
+      })} ${this.recurringEvent.count} ${this.calEvent.attendees[0].language.translate(
+        `${rrule.FREQUENCIES[this.recurringEvent.freq].toString().toLowerCase()}`,
+        { count: this.recurringEvent.count }
+      )}`;
+    } else {
+      return "";
+    }
+  }
+
   protected getWhen(): string {
     return `
     <p style="height: 6px"></p>
     <div style="line-height: 6px;">
-      <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("when")}</p>
+      <p style="color: #494949;">${this.calEvent.attendees[0].language.translate("when")}${
+      this.recurringEvent?.count ? this.getRecurringWhen() : ""
+    }</p>
       <p style="color: #494949; font-weight: 400; line-height: 24px;">
+      ${this.recurringEvent?.count ? `${this.calEvent.attendees[0].language.translate("starting")} ` : ""}
       ${this.calEvent.attendees[0].language.translate(
         this.getInviteeStart().format("dddd").toLowerCase()
       )}, ${this.calEvent.attendees[0].language.translate(

apps/web/lib/emails/templates/organizer-request-email.ts

@@ -86,7 +86,9 @@ ${process.env.NEXT_PUBLIC_WEBAPP_URL} + "/bookings/upcoming"
       <div style="background-color:#F5F5F5;">
         ${emailSchedulingBodyHeader("calendarCircle")}
         ${emailScheduledBodyHeaderContent(
-          this.calEvent.organizer.language.translate("event_awaiting_approval"),
+          this.calEvent.organizer.language.translate(
+            this.recurringEvent?.count ? "event_awaiting_approval_recurring" : "event_awaiting_approval"
+          ),
           this.calEvent.organizer.language.translate("someone_requested_an_event")
         )}
         ${emailSchedulingBodyDivider()}

apps/web/lib/emails/templates/organizer-request-reschedule-email.ts

@@ -6,7 +6,7 @@ import utc from "dayjs/plugin/utc";
 import { createEvent, DateArray, Person } from "ics";
 
 import { getCancelLink } from "@calcom/lib/CalEventParser";
-import { CalendarEvent } from "@calcom/types/Calendar";
+import { CalendarEvent, RecurringEvent } from "@calcom/types/Calendar";
 
 import {
   emailHead,
@@ -24,8 +24,8 @@ dayjs.extend(toArray);
 
 export default class OrganizerRequestRescheduledEmail extends OrganizerScheduledEmail {
   private metadata: { rescheduleLink: string };
-  constructor(calEvent: CalendarEvent, metadata: { rescheduleLink: string }) {
-    super(calEvent);
+  constructor(calEvent: CalendarEvent, metadata: { rescheduleLink: string }, recurringEvent: RecurringEvent) {
+    super(calEvent, recurringEvent);
     this.metadata = metadata;
   }
   protected getNodeMailerPayload(): Record<string, unknown> {

apps/web/lib/emails/templates/organizer-scheduled-email.ts

@@ -5,12 +5,13 @@ import toArray from "dayjs/plugin/toArray";
 import utc from "dayjs/plugin/utc";
 import { createEvent, DateArray, Person } from "ics";
 import nodemailer from "nodemailer";
+import rrule from "rrule";
 
 import { getAppName } from "@calcom/app-store/utils";
 import { getCancelLink, getRichDescription } from "@calcom/lib/CalEventParser";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import { serverConfig } from "@calcom/lib/serverConfig";
-import type { CalendarEvent } from "@calcom/types/Calendar";
+import type { CalendarEvent, RecurringEvent } from "@calcom/types/Calendar";
 
 import {
   emailHead,
@@ -28,9 +29,11 @@ dayjs.extend(toArray);
 
 export default class OrganizerScheduledEmail {
   calEvent: CalendarEvent;
+  recurringEvent: RecurringEvent;
 
-  constructor(calEvent: CalendarEvent) {
+  constructor(calEvent: CalendarEvent, recurringEvent: RecurringEvent) {
     this.calEvent = calEvent;
+    this.recurringEvent = recurringEvent;
   }
 
   public sendEmail() {
@@ -51,6 +54,11 @@ export default class OrganizerScheduledEmail {
   }
 
   protected getiCalEventAsString(): string | undefined {
+    // Taking care of recurrence rule beforehand
+    let recurrenceRule: string | undefined = undefined;
+    if (this.recurringEvent?.count) {
+      recurrenceRule = new rrule(this.recurringEvent).toString().replace("RRULE:", "");
+    }
     const icsEvent = createEvent({
       start: dayjs(this.calEvent.startTime)
         .utc()
@@ -66,6 +74,7 @@ export default class OrganizerScheduledEmail {
       description: this.getTextBody(),
       duration: { minutes: dayjs(this.calEvent.endTime).diff(dayjs(this.calEvent.startTime), "minute") },
       organizer: { name: this.calEvent.organizer.name, email: this.calEvent.organizer.email },
+      ...{ recurrenceRule },
       attendees: this.calEvent.attendees.map((attendee: Person) => ({
         name: attendee.name,
         email: attendee.email,
@@ -121,7 +130,9 @@ export default class OrganizerScheduledEmail {
 
   protected getTextBody(): string {
     return `
-${this.calEvent.organizer.language.translate("new_event_scheduled")}
+${this.calEvent.organizer.language.translate(
+  this.recurringEvent?.count ? "new_event_scheduled_recurring" : "new_event_scheduled"
+)}
 ${this.calEvent.organizer.language.translate("emailed_you_and_any_other_attendees")}
 
 ${getRichDescription(this.calEvent)}
@@ -153,7 +164,9 @@ ${getRichDescription(this.calEvent)}
       <div style="background-color:#F5F5F5;">
         ${emailSchedulingBodyHeader("checkCircle")}
         ${emailScheduledBodyHeaderContent(
-          this.calEvent.organizer.language.translate("new_event_scheduled"),
+          this.calEvent.organizer.language.translate(
+            this.recurringEvent?.count ? "new_event_scheduled_recurring" : "new_event_scheduled"
+          ),
           this.calEvent.organizer.language.translate("emailed_you_and_any_other_attendees")
         )}
         ${emailSchedulingBodyDivider()}
@@ -240,12 +253,30 @@ ${getRichDescription(this.calEvent)}
     </div>`;
   }
 
+  protected getRecurringWhen(): string {
+    if (this.recurringEvent?.freq) {
+      return ` - ${this.calEvent.attendees[0].language.translate("every_for_freq", {
+        freq: this.calEvent.attendees[0].language.translate(
+          `${rrule.FREQUENCIES[this.recurringEvent.freq].toString().toLowerCase()}`
+        ),
+      })} ${this.recurringEvent.count} ${this.calEvent.attendees[0].language.translate(
+        `${rrule.FREQUENCIES[this.recurringEvent.freq].toString().toLowerCase()}`,
+        { count: this.recurringEvent.count }
+      )}`;
+    } else {
+      return "";
+    }
+  }
+
   protected getWhen(): string {
     return `
     <p style="height: 6px"></p>
     <div style="line-height: 6px;">
-      <p style="color: #494949;">${this.calEvent.organizer.language.translate("when")}</p>
+      <p style="color: #494949;">${this.calEvent.organizer.language.translate("when")}${
+      this.recurringEvent?.count ? this.getRecurringWhen() : ""
+    }</p>
       <p style="color: #494949; font-weight: 400; line-height: 24px;">
+      ${this.recurringEvent?.count ? `${this.calEvent.attendees[0].language.translate("starting")} ` : ""}
       ${this.calEvent.organizer.language.translate(
         this.getOrganizerStart().format("dddd").toLowerCase()
       )}, ${this.calEvent.organizer.language.translate(

apps/web/lib/hooks/useCurrentUserId.ts

@@ -0,0 +1,9 @@
+import useMeQuery from "./useMeQuery";
+
+export const useCurrentUserId = () => {
+  const query = useMeQuery();
+  const user = query.data;
+  return user?.id;
+};
+
+export default useCurrentUserId;

apps/web/lib/hooks/useMeQuery.ts

@@ -0,0 +1,13 @@
+import { trpc } from "../trpc";
+
+export function useMeQuery() {
+  const meQuery = trpc.useQuery(["viewer.me"], {
+    retry(failureCount) {
+      return failureCount > 3;
+    },
+  });
+
+  return meQuery;
+}
+
+export default useMeQuery;

apps/web/lib/hooks/useTheme.tsx

@@ -40,7 +40,7 @@ export default function useTheme(theme?: Maybe<string>) {
     // TODO: isReady doesn't seem required now. This is also impacting PSI Score for pages which are using isReady.
     setIsReady(true);
     setTheme(theme);
-  }, []);
+  }, [theme]);
 
   function Theme() {
     const code = applyThemeAndAddListener.toString();

apps/web/lib/mutations/bookings/create-recurring-booking.ts

@@ -0,0 +1,22 @@
+import * as fetch from "@lib/core/http/fetch-wrapper";
+import { BookingCreateBody, BookingResponse } from "@lib/types/booking";
+
+type ExtendedBookingCreateBody = BookingCreateBody & { noEmail?: boolean; recurringCount?: number };
+
+const createRecurringBooking = async (data: ExtendedBookingCreateBody[]) => {
+  return Promise.all(
+    data.map((booking, key) => {
+      // We only want to send the first occurrence of the meeting at the moment, not all at once
+      if (key === 0) {
+        return fetch.post<ExtendedBookingCreateBody, BookingResponse>("/api/book/event", booking);
+      } else {
+        return fetch.post<ExtendedBookingCreateBody, BookingResponse>("/api/book/event", {
+          ...booking,
+          noEmail: true,
+        });
+      }
+    })
+  );
+};
+
+export default createRecurringBooking;

apps/web/lib/parseDate.ts

@@ -1,14 +1,42 @@
 import dayjs, { Dayjs } from "dayjs";
 import { I18n } from "next-i18next";
+import { RRule } from "rrule";
+
+import { recurringEvent } from "@calcom/prisma/zod-utils";
+import { RecurringEvent } from "@calcom/types/Calendar";
 
 import { detectBrowserTimeFormat } from "@lib/timeFormat";
 
 import { parseZone } from "./parseZone";
 
-export const parseDate = (date: string | null | Dayjs, i18n: I18n) => {
-  if (!date) return "No date";
+const processDate = (date: string | null | Dayjs, i18n: I18n) => {
   const parsedZone = parseZone(date);
   if (!parsedZone?.isValid()) return "Invalid date";
   const formattedTime = parsedZone?.format(detectBrowserTimeFormat);
   return formattedTime + ", " + dayjs(date).toDate().toLocaleString(i18n.language, { dateStyle: "full" });
 };
+
+export const parseDate = (date: string | null | Dayjs, i18n: I18n) => {
+  if (!date) return ["No date"];
+  return processDate(date, i18n);
+};
+
+export const parseRecurringDates = (
+  {
+    startDate,
+    recurringEvent,
+    recurringCount,
+  }: { startDate: string | null | Dayjs; recurringEvent: RecurringEvent; recurringCount: number },
+  i18n: I18n
+): [string[], Date[]] => {
+  const { count, ...restRecurringEvent } = recurringEvent;
+  const rule = new RRule({
+    ...restRecurringEvent,
+    count: recurringCount,
+    dtstart: dayjs(startDate).toDate(),
+  });
+  const dateStrings = rule.all().map((r) => {
+    return processDate(dayjs(r), i18n);
+  });
+  return [dateStrings, rule.all()];
+};

apps/web/lib/queries/teams/index.ts

@@ -11,7 +11,6 @@ export type TeamWithMembers = AsyncReturnType<typeof getTeamWithMembers>;
 export async function getTeamWithMembers(id?: number, slug?: string) {
   const userSelect = Prisma.validator<Prisma.UserSelect>()({
     username: true,
-    avatar: true,
     email: true,
     name: true,
     id: true,
@@ -44,6 +43,7 @@ export async function getTeamWithMembers(id?: number, slug?: string) {
         length: true,
         slug: true,
         schedulingType: true,
+        recurringEvent: true,
         price: true,
         currency: true,
         users: {
@@ -72,7 +72,7 @@ export async function getTeamWithMembers(id?: number, slug?: string) {
       ...obj.user,
       isMissingSeat: obj.user.plan === UserPlan.FREE,
       role: membership?.role,
-      accepted: membership?.role === "OWNER" ? true : membership?.accepted,
+      accepted: membership?.accepted,
     };
   });
 

apps/web/lib/telemetry.ts

@@ -13,6 +13,8 @@ export const telemetryEventTypes = {
   googleLogin: "google_login",
   samlLogin: "saml_login",
   samlConfig: "saml_config",
+  embedView: "embed_view",
+  embedBookingConfirmed: "embed_booking_confirmed",
 };
 
 /**

apps/web/lib/types/booking.ts

@@ -19,6 +19,7 @@ export type BookingCreateBody = {
   name: string;
   notes?: string;
   rescheduleUid?: string;
+  recurringEventId?: string;
   start: string;
   timeZone: string;
   user?: string | string[];

apps/web/lib/webhooks/sendPayload.tsx

@@ -1,3 +1,4 @@
+import { Webhook } from "@prisma/client";
 import { compile } from "handlebars";
 
 import type { CalendarEvent } from "@calcom/types/Calendar";
@@ -24,13 +25,13 @@ function jsonParse(jsonString: string) {
 const sendPayload = async (
   triggerEvent: string,
   createdAt: string,
-  subscriberUrl: string,
+  webhook: Pick<Webhook, "subscriberUrl" | "appId" | "payloadTemplate">,
   data: CalendarEvent & {
     metadata?: { [key: string]: string };
     rescheduleUid?: string;
-  },
-  template?: string | null
+  }
 ) => {
+  const { subscriberUrl, appId, payloadTemplate: template } = webhook;
   if (!subscriberUrl || !data) {
     throw new Error("Missing required elements to send webhook payload.");
   }
@@ -38,13 +39,22 @@ const sendPayload = async (
   const contentType =
     !template || jsonParse(template) ? "application/json" : "application/x-www-form-urlencoded";
 
-  const body = template
-    ? applyTemplate(template, data, contentType)
-    : JSON.stringify({
-        triggerEvent: triggerEvent,
-        createdAt: createdAt,
-        payload: data,
-      });
+  data.description = data.description || data.additionalNotes;
+
+  let body;
+
+  /* Zapier id is hardcoded in the DB, we send the raw data for this case  */
+  if (appId === "zapier") {
+    body = JSON.stringify(data);
+  } else if (template) {
+    body = applyTemplate(template, data, contentType);
+  } else {
+    body = JSON.stringify({
+      triggerEvent: triggerEvent,
+      createdAt: createdAt,
+      payload: data,
+    });
+  }
 
   const response = await fetch(subscriberUrl, {
     method: "POST",

apps/web/lib/webhooks/subscriptions.tsx

@@ -8,7 +8,7 @@ export type GetSubscriberOptions = {
   triggerEvent: WebhookTriggerEvents;
 };
 
-const getSubscribers = async (options: GetSubscriberOptions) => {
+const getWebhooks = async (options: GetSubscriberOptions) => {
   const { userId, eventTypeId } = options;
   const allWebhooks = await prisma.webhook.findMany({
     where: {
@@ -32,10 +32,11 @@ const getSubscribers = async (options: GetSubscriberOptions) => {
     select: {
       subscriberUrl: true,
       payloadTemplate: true,
+      appId: true,
     },
   });
 
   return allWebhooks;
 };
 
-export default getSubscribers;
+export default getWebhooks;

apps/web/next-i18next.config.js

@@ -1,6 +1,7 @@
 const path = require("path");
 
-module.exports = {
+/** @type {import("next-i18next").UserConfig} */
+const config = {
   i18n: {
     defaultLocale: "en",
     locales: [
@@ -31,3 +32,5 @@ module.exports = {
   localePath: path.resolve("./public/static/locales"),
   reloadOnPrerender: process.env.NODE_ENV !== "production",
 };
+
+module.exports = config;

apps/web/next.config.js

@@ -9,6 +9,7 @@ const withTM = require("next-transpile-modules")([
   "@calcom/stripe",
   "@calcom/ui",
   "@calcom/embed-core",
+  "@calcom/embed-snippet",
 ]);
 const { i18n } = require("./next-i18next.config");
 

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",
@@ -22,7 +22,7 @@
     "check-changed-files": "ts-node scripts/ts-check-changed-files.ts"
   },
   "engines": {
-    "node": ">=14.x",
+    "node": ">=14.x < 15",
     "yarn": ">=1.19.0 < 2.0.0"
   },
   "dependencies": {
@@ -35,6 +35,7 @@
     "@calcom/stripe": "*",
     "@calcom/tsconfig": "*",
     "@calcom/ui": "*",
+    "@calcom/embed-core": "*",
     "@daily-co/daily-js": "^0.21.0",
     "@glidejs/glide": "^3.5.2",
     "@heroicons/react": "^1.0.6",
@@ -104,6 +105,7 @@
     "react-use-intercom": "1.4.0",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
+    "rrule": "^2.6.9",
     "short-uuid": "^4.2.0",
     "stripe": "^8.191.0",
     "superjson": "1.8.1",

apps/web/pages/[user].tsx

@@ -18,6 +18,7 @@ import defaultEvents, {
   getUsernameSlugLink,
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { RecurringEvent } from "@calcom/types/Calendar";
 
 import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import useTheme from "@lib/hooks/useTheme";
@@ -118,7 +119,10 @@ export default function User(props: inferSSRProps<typeof getServerSideProps>) {
 
   useEffect(() => {
     telemetry.withJitsu((jitsu) =>
-      jitsu.track(telemetryEventTypes.pageView, collectPageParameters("/[user]"))
+      jitsu.track(
+        top !== window ? telemetryEventTypes.embedView : telemetryEventTypes.pageView,
+        collectPageParameters("/[user]")
+      )
     );
   }, [telemetry]);
   return (
@@ -272,6 +276,7 @@ const getEventTypesWithHiddenFromDB = async (userId: number, plan: UserPlan) =>
       description: true,
       hidden: true,
       schedulingType: true,
+      recurringEvent: true,
       price: true,
       currency: true,
       metadata: true,

apps/web/pages/[user]/[type].tsx

@@ -5,6 +5,7 @@ import { JSONObject } from "superjson/dist/types";
 
 import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { RecurringEvent } from "@calcom/types/Calendar";
 
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { getWorkingHours } from "@lib/availability";
@@ -84,6 +85,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     periodDays: true,
     periodCountCalendarDays: true,
     schedulingType: true,
+    recurringEvent: true,
     schedule: {
       select: {
         availability: true,
@@ -256,6 +258,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     metadata: (eventType.metadata || {}) as JSONObject,
     periodStartDate: eventType.periodStartDate?.toString() ?? null,
     periodEndDate: eventType.periodEndDate?.toString() ?? null,
+    recurringEvent: (eventType.recurringEvent || {}) as RecurringEvent,
   });
 
   const schedule = eventType.schedule

apps/web/pages/[user]/book.tsx

@@ -12,8 +12,9 @@ import {
   getUsernameList,
 } from "@calcom/lib/defaultEvents";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { RecurringEvent } from "@calcom/types/Calendar";
 
-import { asStringOrThrow } from "@lib/asStringOrNull";
+import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull";
 import getBooking, { GetBookingType } from "@lib/getBooking";
 import prisma from "@lib/prisma";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -69,6 +70,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   const usernameList = getUsernameList(asStringOrThrow(context.query.user as string));
   const eventTypeSlug = context.query.slug as string;
+  const recurringEventCountQuery = asStringOrNull(context.query.count);
   const users = await prisma.user.findMany({
     where: {
       username: {
@@ -92,6 +94,13 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   if (!users.length) return { notFound: true };
   const [user] = users;
+  const isDynamicGroupBooking = users.length > 1;
+
+  // Dynamic Group link doesn't need a type but it must have a slug
+  if ((!isDynamicGroupBooking && !context.query.type) || (isDynamicGroupBooking && !eventTypeSlug)) {
+    return { notFound: true };
+  }
+
   const eventTypeRaw =
     usernameList.length > 1
       ? getDefaultEvent(eventTypeSlug)
@@ -111,6 +120,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
             periodDays: true,
             periodStartDate: true,
             periodEndDate: true,
+            recurringEvent: true,
             metadata: true,
             periodCountCalendarDays: true,
             price: true,
@@ -150,6 +160,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const eventType = {
     ...eventTypeRaw,
     metadata: (eventTypeRaw.metadata || {}) as JSONObject,
+    recurringEvent: (eventTypeRaw.recurringEvent || {}) as RecurringEvent,
     isWeb3Active:
       web3Credentials && web3Credentials.key
         ? (((web3Credentials.key as JSONObject).isWeb3Active || false) as boolean)
@@ -169,8 +180,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     booking = await getBooking(prisma, context.query.rescheduleUid as string);
   }
 
-  const isDynamicGroupBooking = users.length > 1;
-
   const dynamicNames = isDynamicGroupBooking
     ? users.map((user) => {
         return user.name || "";
@@ -204,6 +213,15 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   const t = await getTranslation(context.locale ?? "en", "common");
 
+  // Checking if number of recurring event ocurrances is valid against event type configuration
+  const recurringEventCount =
+    (eventType.recurringEvent?.count &&
+      recurringEventCountQuery &&
+      (parseInt(recurringEventCountQuery) <= eventType.recurringEvent.count
+        ? recurringEventCountQuery
+        : eventType.recurringEvent.count)) ||
+    null;
+
   return {
     props: {
       away: user.away,
@@ -211,6 +229,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       profile,
       eventType: eventTypeObject,
       booking,
+      recurringEventCount,
       trpcState: ssr.dehydrate(),
       isDynamicGroupBooking,
       hasHashedBookingLink: false,

apps/web/pages/api/app-store/installed.ts

@@ -25,6 +25,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         res.status(404);
       }
     } catch (error) {
+      console.log(error);
       res.status(500);
     }
   } else {

apps/web/pages/api/book/confirm.ts

@@ -1,9 +1,10 @@
 import { Prisma, User, Booking, SchedulingType, BookingStatus } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
+import rrule from "rrule";
 
 import EventManager from "@calcom/core/EventManager";
 import logger from "@calcom/lib/logger";
-import type { AdditionInformation } from "@calcom/types/Calendar";
+import type { AdditionInformation, RecurringEvent } from "@calcom/types/Calendar";
 import type { CalendarEvent } from "@calcom/types/Calendar";
 import { refund } from "@ee/lib/stripe/server";
 
@@ -94,12 +95,18 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         confirmed: true,
         attendees: true,
         eventTypeId: true,
+        eventType: {
+          select: {
+            recurringEvent: true,
+          },
+        },
         location: true,
         userId: true,
         id: true,
         uid: true,
         payment: true,
         destinationCalendar: true,
+        recurringEventId: true,
       },
     });
 
@@ -147,6 +154,21 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       destinationCalendar: booking?.destinationCalendar || currentUser.destinationCalendar,
     };
 
+    const recurringEvent = booking.eventType?.recurringEvent as RecurringEvent;
+
+    if (req.body.recurringEventId && recurringEvent) {
+      const groupedRecurringBookings = await prisma.booking.groupBy({
+        where: {
+          recurringEventId: booking.recurringEventId,
+        },
+        by: [Prisma.BookingScalarFieldEnum.recurringEventId],
+        _count: true,
+      });
+      // Overriding the recurring event configuration count to be the actual number of events booked for
+      // the recurring event (equal or less than recurring event configuration count)
+      recurringEvent.count = groupedRecurringBookings[0]._count;
+    }
+
     if (reqBody.confirmed) {
       const eventManager = new EventManager(currentUser);
       const scheduleResult = await eventManager.create(evt);
@@ -170,43 +192,93 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           metadata.entryPoints = results[0].createdEvent?.entryPoints;
         }
         try {
-          await sendScheduledEmails({ ...evt, additionInformation: metadata });
+          await sendScheduledEmails(
+            { ...evt, additionInformation: metadata },
+            req.body.recurringEventId ? recurringEvent : {} // Send email with recurring event info only on recurring event context
+          );
         } catch (error) {
           log.error(error);
         }
       }
 
-      // @NOTE: be careful with this as if any error occurs before this booking doesn't get confirmed
-      // Should perform update on booking (confirm) -> then trigger the rest handlers
-      await prisma.booking.update({
-        where: {
-          id: bookingId,
-        },
-        data: {
-          confirmed: true,
-          references: {
-            create: scheduleResult.referencesToCreate,
+      if (req.body.recurringEventId) {
+        // The booking to confirm is a recurring event and comes from /booking/upcoming, proceeding to mark all related
+        // bookings as confirmed. Prisma updateMany does not support relations, so doing this in two steps for now.
+        const unconfirmedRecurringBookings = await prisma.booking.findMany({
+          where: {
+            recurringEventId: req.body.recurringEventId,
+            confirmed: false,
           },
-        },
-      });
+        });
+        unconfirmedRecurringBookings.map(async (recurringBooking) => {
+          await prisma.booking.update({
+            where: {
+              id: recurringBooking.id,
+            },
+            data: {
+              confirmed: true,
+              references: {
+                create: scheduleResult.referencesToCreate,
+              },
+            },
+          });
+        });
+      } else {
+        // @NOTE: be careful with this as if any error occurs before this booking doesn't get confirmed
+        // Should perform update on booking (confirm) -> then trigger the rest handlers
+        await prisma.booking.update({
+          where: {
+            id: bookingId,
+          },
+          data: {
+            confirmed: true,
+            references: {
+              create: scheduleResult.referencesToCreate,
+            },
+          },
+        });
+      }
 
       res.status(204).end();
     } else {
-      await refund(booking, evt);
       const rejectionReason = asStringOrNull(req.body.reason) || "";
       evt.rejectionReason = rejectionReason;
-      await prisma.booking.update({
-        where: {
-          id: bookingId,
-        },
-        data: {
-          rejected: true,
-          status: BookingStatus.REJECTED,
-          rejectionReason: rejectionReason,
-        },
-      });
+      if (req.body.recurringEventId) {
+        // The booking to reject is a recurring event and comes from /booking/upcoming, proceeding to mark all related
+        // bookings as rejected. Prisma updateMany does not support relations, so doing this in two steps for now.
+        const unconfirmedRecurringBookings = await prisma.booking.findMany({
+          where: {
+            recurringEventId: req.body.recurringEventId,
+            confirmed: false,
+          },
+        });
+        unconfirmedRecurringBookings.map(async (recurringBooking) => {
+          await prisma.booking.update({
+            where: {
+              id: recurringBooking.id,
+            },
+            data: {
+              rejected: true,
+              status: BookingStatus.REJECTED,
+              rejectionReason: rejectionReason,
+            },
+          });
+        });
+      } else {
+        await refund(booking, evt); // No payment integration for recurring events for v1
+        await prisma.booking.update({
+          where: {
+            id: bookingId,
+          },
+          data: {
+            rejected: true,
+            status: BookingStatus.REJECTED,
+            rejectionReason: rejectionReason,
+          },
+        });
+      }
 
-      await sendDeclinedEmails(evt);
+      await sendDeclinedEmails(evt, req.body.recurringEventId ? recurringEvent : {}); // Send email with recurring event info only on recurring event context
 
       res.status(204).end();
     }

apps/web/pages/api/book/event.ts

@@ -1,11 +1,4 @@
-import {
-  BookingStatus,
-  Credential,
-  Payment,
-  Prisma,
-  SchedulingType,
-  WebhookTriggerEvents,
-} from "@prisma/client";
+import { BookingStatus, Credential, Prisma, SchedulingType, WebhookTriggerEvents } from "@prisma/client";
 import async from "async";
 import dayjs from "dayjs";
 import dayjsBusinessTime from "dayjs-business-time";
@@ -13,18 +6,24 @@ import isBetween from "dayjs/plugin/isBetween";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import type { NextApiRequest, NextApiResponse } from "next";
+import rrule from "rrule";
 import short from "short-uuid";
 import { v5 as uuidv5 } from "uuid";
 
 import { getBusyCalendarTimes } from "@calcom/core/CalendarManager";
 import EventManager from "@calcom/core/EventManager";
 import { getBusyVideoTimes } from "@calcom/core/videoClient";
-import { getDefaultEvent, getUsernameList, getGroupName } from "@calcom/lib/defaultEvents";
+import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
 import { getErrorFromUnknown } from "@calcom/lib/errors";
 import logger from "@calcom/lib/logger";
 import notEmpty from "@calcom/lib/notEmpty";
 import type { BufferedBusyTime } from "@calcom/types/BufferedBusyTime";
-import type { AdditionInformation, CalendarEvent, EventBusyDate, Person } from "@calcom/types/Calendar";
+import type {
+  AdditionInformation,
+  CalendarEvent,
+  EventBusyDate,
+  RecurringEvent,
+} from "@calcom/types/Calendar";
 import type { EventResult, PartialReference } from "@calcom/types/EventManager";
 import { handlePayment } from "@ee/lib/stripe/server";
 
@@ -83,7 +82,7 @@ async function refreshCredentials(credentials: Array<Credential>): Promise<Array
   return await async.mapLimit(credentials, 5, refreshCredential);
 }
 
-function isAvailable(busyTimes: BufferedBusyTimes, time: string, length: number): boolean {
+function isAvailable(busyTimes: BufferedBusyTimes, time: dayjs.ConfigType, length: number): boolean {
   // Check for conflicts
   let t = true;
 
@@ -190,7 +189,7 @@ const getUserNameWithBookingCounts = async (eventTypeId: number, selectedUserNam
 };
 
 const getEventTypesFromDB = async (eventTypeId: number) => {
-  return await prisma.eventType.findUnique({
+  const eventType = await prisma.eventType.findUnique({
     rejectOnNotFound: true,
     where: {
       id: eventTypeId,
@@ -220,14 +219,22 @@ const getEventTypesFromDB = async (eventTypeId: number) => {
       metadata: true,
       destinationCalendar: true,
       hideCalendarNotes: true,
+      recurringEvent: true,
     },
   });
+
+  return {
+    ...eventType,
+    recurringEvent: (eventType.recurringEvent || undefined) as RecurringEvent,
+  };
 };
 
 type User = Prisma.UserGetPayload<typeof userSelect>;
 
+type ExtendedBookingCreateBody = BookingCreateBody & { noEmail?: boolean; recurringCount?: number };
+
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
-  const reqBody = req.body as BookingCreateBody;
+  const { recurringCount, noEmail, ...reqBody } = req.body as ExtendedBookingCreateBody;
 
   // handle dynamic user
   const dynamicUserList = Array.isArray(reqBody.user)
@@ -382,6 +389,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     }; // used for invitee emails
   }
 
+  if (reqBody.recurringEventId && eventType.recurringEvent) {
+    // Overriding the recurring event configuration count to be the actual number of events booked for
+    // the recurring event (equal or less than recurring event configuration count)
+    eventType.recurringEvent = Object.assign({}, eventType.recurringEvent, { count: recurringCount });
+  }
+
   // Initialize EventManager with credentials
   const rescheduleUid = reqBody.rescheduleUid;
   async function getOriginalRescheduledBooking(uid: string) {
@@ -481,6 +494,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           }
         : undefined,
     };
+    if (reqBody.recurringEventId) {
+      newBookingData.recurringEventId = reqBody.recurringEventId;
+    }
     if (originalRescheduledBooking) {
       newBookingData["paid"] = originalRescheduledBooking.paid;
       newBookingData["fromReschedule"] = originalRescheduledBooking.uid;
@@ -573,7 +589,18 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
     let isAvailableToBeBooked = true;
     try {
-      isAvailableToBeBooked = isAvailable(bufferedBusyTimes, reqBody.start, eventType.length);
+      if (eventType.recurringEvent) {
+        const allBookingDates = new rrule({
+          dtstart: new Date(reqBody.start),
+          ...eventType.recurringEvent,
+        }).all();
+        // Go through each date for the recurring event and check if each one's availability
+        isAvailableToBeBooked = allBookingDates
+          .map((aDate) => isAvailable(bufferedBusyTimes, aDate, eventType.length)) // <-- array of booleans
+          .reduce((acc, value) => acc && value, true); // <-- checks boolean array applying "AND" to each value and the current one, starting in true
+      } else {
+        isAvailableToBeBooked = isAvailable(bufferedBusyTimes, reqBody.start, eventType.length);
+      }
     } catch {
       log.debug({
         message: "Unable set isAvailableToBeBooked. Using true. ",
@@ -674,11 +701,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         }
       }
 
-      await sendRescheduledEmails({
-        ...evt,
-        additionInformation: metadata,
-        additionalNotes, // Resets back to the addtionalNote input and not the overriden value
-      });
+      if (noEmail !== true) {
+        await sendRescheduledEmails(
+          {
+            ...evt,
+            additionInformation: metadata,
+            additionalNotes, // Resets back to the addtionalNote input and not the overriden value
+          },
+          reqBody.recurringEventId ? (eventType.recurringEvent as RecurringEvent) : {}
+        );
+      }
     }
     // If it's not a reschedule, doesn't require confirmation and there's no price,
     // Create a booking
@@ -708,17 +740,29 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         metadata.conferenceData = results[0].createdEvent?.conferenceData;
         metadata.entryPoints = results[0].createdEvent?.entryPoints;
       }
-      await sendScheduledEmails({
-        ...evt,
-        additionInformation: metadata,
-        additionalNotes,
-      });
+      if (noEmail !== true) {
+        await sendScheduledEmails(
+          {
+            ...evt,
+            additionInformation: metadata,
+            additionalNotes,
+          },
+          reqBody.recurringEventId ? (eventType.recurringEvent as RecurringEvent) : {}
+        );
+      }
     }
   }
 
-  if (eventType.requiresConfirmation && !rescheduleUid) {
-    await sendOrganizerRequestEmail({ ...evt, additionalNotes });
-    await sendAttendeeRequestEmail({ ...evt, additionalNotes }, attendeesList[0]);
+  if (eventType.requiresConfirmation && !rescheduleUid && noEmail !== true) {
+    await sendOrganizerRequestEmail(
+      { ...evt, additionalNotes },
+      reqBody.recurringEventId ? (eventType.recurringEvent as RecurringEvent) : {}
+    );
+    await sendAttendeeRequestEmail(
+      { ...evt, additionalNotes },
+      attendeesList[0],
+      reqBody.recurringEventId ? (eventType.recurringEvent as RecurringEvent) : {}
+    );
   }
 
   if (typeof eventType.price === "number" && eventType.price > 0 && !originalRescheduledBooking?.paid) {
@@ -753,17 +797,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     metadata: reqBody.metadata,
   });
   const promises = subscribers.map((sub) =>
-    sendPayload(
-      eventTrigger,
-      new Date().toISOString(),
-      sub.subscriberUrl,
-      {
-        ...evt,
-        rescheduleUid,
-        metadata: reqBody.metadata,
-      },
-      sub.payloadTemplate
-    ).catch((e) => {
+    sendPayload(eventTrigger, new Date().toISOString(), sub, {
+      ...evt,
+      rescheduleUid,
+      metadata: reqBody.metadata,
+    }).catch((e) => {
       console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${sub.subscriberUrl}`, e);
     })
   );

apps/web/pages/api/book/request-reschedule.ts

@@ -1,4 +1,4 @@
-import { BookingStatus, User, Booking, Attendee, BookingReference } from "@prisma/client";
+import { BookingStatus, User, Booking, Attendee, BookingReference, EventType } from "@prisma/client";
 import dayjs from "dayjs";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { getSession } from "next-auth/react";
@@ -6,7 +6,6 @@ import type { TFunction } from "next-i18next";
 import { z, ZodError } from "zod";
 
 import { getCalendar } from "@calcom/core/CalendarManager";
-import EventManager from "@calcom/core/EventManager";
 import { CalendarEventBuilder } from "@calcom/core/builders/CalendarEvent/builder";
 import { CalendarEventDirector } from "@calcom/core/builders/CalendarEvent/director";
 import { deleteMeeting } from "@calcom/core/videoClient";
@@ -29,7 +28,7 @@ const rescheduleSchema = z.object({
   rescheduleReason: z.string().optional(),
 });
 
-const findUserOwnerByUserId = async (userId: number) => {
+const findUserDataByUserId = async (userId: number) => {
   return await prisma.user.findUnique({
     rejectOnNotFound: true,
     where: {
@@ -57,10 +56,10 @@ const handler = async (
     bookingId,
     rescheduleReason: cancellationReason,
   }: { bookingId: string; rescheduleReason: string; cancellationReason: string } = req.body;
-  let userOwner: Awaited<ReturnType<typeof findUserOwnerByUserId>>;
+  let userOwner: Awaited<ReturnType<typeof findUserDataByUserId>>;
   try {
     if (session?.user?.id) {
-      userOwner = await findUserOwnerByUserId(session?.user.id);
+      userOwner = await findUserDataByUserId(session?.user.id);
     } else {
       return res.status(501);
     }
@@ -76,6 +75,10 @@ const handler = async (
         location: true,
         attendees: true,
         references: true,
+        userId: true,
+        dynamicEventSlugRef: true,
+        dynamicGroupSlugRef: true,
+        destinationCalendar: true,
       },
       rejectOnNotFound: true,
       where: {
@@ -88,18 +91,22 @@ const handler = async (
       },
     });
 
-    if (bookingToReschedule && bookingToReschedule.eventTypeId && userOwner) {
-      const event = await prisma.eventType.findFirst({
-        select: {
-          title: true,
-          users: true,
-          schedulingType: true,
-        },
-        rejectOnNotFound: true,
-        where: {
-          id: bookingToReschedule.eventTypeId,
-        },
-      });
+    if (bookingToReschedule && userOwner) {
+      let event: Partial<EventType> = {};
+      if (bookingToReschedule.eventTypeId) {
+        event = await prisma.eventType.findFirst({
+          select: {
+            title: true,
+            users: true,
+            schedulingType: true,
+            recurringEvent: true,
+          },
+          rejectOnNotFound: true,
+          where: {
+            id: bookingToReschedule.eventTypeId,
+          },
+        });
+      }
       await prisma.booking.update({
         where: {
           id: bookingToReschedule.id,
@@ -136,7 +143,7 @@ const handler = async (
       const builder = new CalendarEventBuilder();
       builder.init({
         title: bookingToReschedule.title,
-        type: event.title,
+        type: event && event.title ? event.title : bookingToReschedule.title,
         startTime: bookingToReschedule.startTime.toISOString(),
         endTime: bookingToReschedule.endTime.toISOString(),
         attendees: usersToPeopleType(
@@ -149,9 +156,13 @@ const handler = async (
 
       const director = new CalendarEventDirector();
       director.setBuilder(builder);
-      director.setExistingBooking(bookingToReschedule as unknown as Booking);
+      director.setExistingBooking(bookingToReschedule);
       director.setCancellationReason(cancellationReason);
-      await director.buildForRescheduleEmail();
+      if (!!event) {
+        await director.buildWithoutEventTypeForRescheduleEmail();
+      } else {
+        await director.buildForRescheduleEmail();
+      }
 
       // Handling calendar and videos cancellation
       // This can set previous time as available, until virtual calendar is done
@@ -174,6 +185,31 @@ const handler = async (
         }
       });
 
+      // Updating attendee destinationCalendar if required
+      if (
+        bookingToReschedule.destinationCalendar &&
+        bookingToReschedule.destinationCalendar.userId &&
+        bookingToReschedule.destinationCalendar.integration.endsWith("_calendar")
+      ) {
+        const { destinationCalendar } = bookingToReschedule;
+        if (destinationCalendar.userId) {
+          const bookingRefsFiltered: BookingReference[] = bookingToReschedule.references.filter(
+            (ref) => !!credentialsMap.get(ref.type)
+          );
+          const attendeeData = await findUserDataByUserId(destinationCalendar.userId);
+          const attendeeCredentialsMap = new Map();
+          attendeeData.credentials.forEach((credential) => {
+            attendeeCredentialsMap.set(credential.type, credential);
+          });
+          bookingRefsFiltered.forEach((bookingRef) => {
+            if (bookingRef.uid) {
+              const calendar = getCalendar(attendeeCredentialsMap.get(destinationCalendar.integration));
+              calendar?.deleteEvent(bookingRef.uid, builder.calendarEvent);
+            }
+          });
+        }
+      }
+
       // Send emails
       await sendRequestRescheduleEmail(builder.calendarEvent, {
         rescheduleLink: builder.rescheduleLink,

apps/web/pages/api/cancel.ts

@@ -14,7 +14,7 @@ import { getSession } from "@lib/auth";
 import { sendCancelledEmails } from "@lib/emails/email-manager";
 import prisma from "@lib/prisma";
 import sendPayload from "@lib/webhooks/sendPayload";
-import getSubscribers from "@lib/webhooks/subscriptions";
+import getWebhooks from "@lib/webhooks/subscriptions";
 
 import { getTranslation } from "@server/lib/i18n";
 
@@ -136,13 +136,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     eventTypeId: (bookingToDelete.eventTypeId as number) || 0,
     triggerEvent: eventTrigger,
   };
-  const subscribers = await getSubscribers(subscriberOptions);
-  const promises = subscribers.map((sub) =>
-    sendPayload(eventTrigger, new Date().toISOString(), sub.subscriberUrl, evt, sub.payloadTemplate).catch(
-      (e) => {
-        console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${sub.subscriberUrl}`, e);
-      }
-    )
+  const webhooks = await getWebhooks(subscriberOptions);
+  const promises = webhooks.map((webhook) =>
+    sendPayload(eventTrigger, new Date().toISOString(), webhook, evt).catch((e) => {
+      console.error(`Error executing webhook for event: ${eventTrigger}, URL: ${webhook.subscriberUrl}`, e);
+    })
   );
   await Promise.all(promises);
 

apps/web/pages/api/integrations.ts

@@ -1,3 +1,4 @@
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 import { getSession } from "@lib/auth";
@@ -10,8 +11,9 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   // Check that user is authenticated
   const session = await getSession({ req });
+  const userId = session?.user?.id;
 
-  if (!session) {
+  if (!userId) {
     res.status(401).json({ message: "You must be logged in to do this" });
     return;
   }
@@ -19,7 +21,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   if (req.method === "GET") {
     const credentials = await prisma.credential.findMany({
       where: {
-        userId: session.user?.id,
+        userId,
       },
       select: {
         type: true,
@@ -31,18 +33,40 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
   if (req.method == "DELETE") {
     const id = req.body.id;
+    const data: Prisma.UserUpdateInput = {
+      credentials: {
+        delete: {
+          id,
+        },
+      },
+    };
+    const integration = await prisma.credential.findUnique({
+      where: {
+        id,
+      },
+    });
+    /* If the user deletes a zapier integration, we delete all his api keys as well. */
+    if (integration?.appId === "zapier") {
+      data.apiKeys = {
+        deleteMany: {
+          userId,
+          appId: "zapier",
+        },
+      };
+      /* We also delete all user's zapier wehbooks */
+      data.webhooks = {
+        deleteMany: {
+          userId,
+          appId: "zapier",
+        },
+      };
+    }
 
     await prisma.user.update({
       where: {
-        id: session?.user?.id,
-      },
-      data: {
-        credentials: {
-          delete: {
-            id,
-          },
-        },
+        id: userId,
       },
+      data,
     });
 
     res.status(200).json({ message: "Integration deleted successfully" });

apps/web/pages/apps/[slug]/index.tsx

@@ -54,7 +54,7 @@ function SingleAppPage({ data, source }: inferSSRProps<typeof getStaticProps>) {
       type={data.type}
       logo={data.logo}
       categories={[data.category]}
-      author="Cal.com"
+      author={data.publisher}
       feeType={data.feeType || "usage-based"}
       price={data.price || 0}
       commission={data.commission || 0}

apps/web/pages/apps/[slug]/setup.tsx

@@ -0,0 +1,45 @@
+import { InferGetStaticPropsType } from "next";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+
+import { AppSetupPage } from "@calcom/app-store/_pages/setup";
+import { AppSetupPageMap, getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
+import prisma from "@calcom/prisma";
+import Loader from "@calcom/ui/Loader";
+
+export default function SetupInformation(props: InferGetStaticPropsType<typeof getStaticProps>) {
+  const router = useRouter();
+  const slug = router.query.slug as string;
+  const { status } = useSession();
+
+  if (status === "loading") {
+    return (
+      <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200">
+        <Loader />
+      </div>
+    );
+  }
+
+  if (status === "unauthenticated") {
+    router.replace({
+      pathname: "/auth/login",
+      query: {
+        callbackUrl: `/apps/${slug}/setup`,
+      },
+    });
+  }
+
+  return <AppSetupPage slug={slug} {...props} />;
+}
+
+export const getStaticPaths = async () => {
+  const appStore = await prisma.app.findMany({ select: { slug: true } });
+  const paths = appStore.filter((a) => a.slug in AppSetupPageMap).map((app) => app.slug);
+
+  return {
+    paths: paths.map((slug) => ({ params: { slug } })),
+    fallback: false,
+  };
+};
+
+export { getStaticProps };

apps/web/pages/apps/installed.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import { JSONObject } from "superjson/dist/types";
 
-import { InstallAppButton } from "@calcom/app-store/components";
+import { AppConfiguration, InstallAppButton } from "@calcom/app-store/components";
 import showToast from "@calcom/lib/notification";
 import { App } from "@calcom/types/App";
 import { Alert } from "@calcom/ui/Alert";
@@ -26,93 +26,12 @@ import IntegrationListItem from "@components/integrations/IntegrationListItem";
 import SubHeadingTitleWithConnections from "@components/integrations/SubHeadingTitleWithConnections";
 import WebhookListContainer from "@components/webhook/WebhookListContainer";
 
-function IframeEmbedContainer() {
-  const { t } = useLocale();
-  // doesn't need suspense as it should already be loaded
-  const user = trpc.useQuery(["viewer.me"]).data;
-
-  const iframeTemplate = `<iframe src="${process.env.NEXT_PUBLIC_WEBAPP_URL}/${user?.username}" frameborder="0" allowfullscreen></iframe>`;
-  const htmlTemplate = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>${t(
-    "schedule_a_meeting"
-  )}</title><style>body {margin: 0;}iframe {height: calc(100vh - 4px);width: calc(100vw - 4px);box-sizing: border-box;}</style></head><body>${iframeTemplate}</body></html>`;
-
-  return (
-    <>
-      <ShellSubHeading title={t("iframe_embed")} subtitle={t("embed_calcom")} className="mt-10" />
-      <div className="lg:col-span-9 lg:pb-8">
-        <List>
-          <ListItem className={classNames("flex-col")}>
-            <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-              <Image width={40} height={40} src="/apps/embed.svg" alt="Embed" />
-              <div className="flex-grow truncate pl-2">
-                <ListItemTitle component="h3">{t("standard_iframe")}</ListItemTitle>
-                <ListItemText component="p">{t("embed_your_calendar")}</ListItemText>
-              </div>
-              <div className="text-right">
-                <input
-                  id="iframe"
-                  className="px-2 py-1 text-sm text-gray-500 "
-                  placeholder={t("loading")}
-                  defaultValue={iframeTemplate}
-                  readOnly
-                />
-                <button
-                  onClick={() => {
-                    navigator.clipboard.writeText(iframeTemplate);
-                    showToast("Copied to clipboard", "success");
-                  }}>
-                  <ClipboardIcon className="-mb-0.5 h-4 w-4 text-gray-800 ltr:mr-2 rtl:ml-2" />
-                </button>
-              </div>
-            </div>
-          </ListItem>
-          <ListItem className={classNames("flex-col")}>
-            <div className={classNames("flex w-full flex-1 items-center space-x-2 p-3 rtl:space-x-reverse")}>
-              <Image width={40} height={40} src="/apps/embed.svg" alt="Embed" />
-              <div className="flex-grow truncate pl-2">
-                <ListItemTitle component="h3">{t("responsive_fullscreen_iframe")}</ListItemTitle>
-                <ListItemText component="p">A fullscreen scheduling experience on your website</ListItemText>
-              </div>
-              <div>
-                <input
-                  id="fullscreen"
-                  className="px-2 py-1 text-sm text-gray-500 "
-                  placeholder={t("loading")}
-                  defaultValue={htmlTemplate}
-                  readOnly
-                />
-                <button
-                  onClick={() => {
-                    navigator.clipboard.writeText(htmlTemplate);
-                    showToast("Copied to clipboard", "success");
-                  }}>
-                  <ClipboardIcon className="-mb-0.5 h-4 w-4 text-gray-800 ltr:mr-2 rtl:ml-2" />
-                </button>
-              </div>
-            </div>
-          </ListItem>
-        </List>
-        <div className="grid grid-cols-2 space-x-4 rtl:space-x-reverse">
-          <div>
-            <label htmlFor="iframe" className="block text-sm font-medium text-gray-700"></label>
-            <div className="mt-1"></div>
-          </div>
-          <div>
-            <label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700"></label>
-            <div className="mt-1"></div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}
-
 function ConnectOrDisconnectIntegrationButton(props: {
   //
   credentialIds: number[];
   type: App["type"];
   isGlobal?: boolean;
-  installed: boolean;
+  installed?: boolean;
 }) {
   const { t } = useLocale();
   const [credentialId] = props.credentialIds;
@@ -190,7 +109,7 @@ function IntegrationsContainer() {
                     credentialIds={item.credentialIds}
                     type={item.type}
                     isGlobal={item.isGlobal}
-                    installed={item.installed}
+                    installed
                   />
                 }
               />
@@ -242,8 +161,9 @@ function IntegrationsContainer() {
                     isGlobal={item.isGlobal}
                     installed={item.installed}
                   />
-                }
-              />
+                }>
+                <AppConfiguration type={item.type} credentialIds={item.credentialIds} />
+              </IntegrationListItem>
             ))}
           </List>
         </>
@@ -342,7 +262,6 @@ export default function IntegrationsPage() {
           <IntegrationsContainer />
           <CalendarListContainer />
           <WebhookListContainer title={t("webhooks")} subtitle={t("receive_cal_meeting_data")} />
-          <IframeEmbedContainer />
           <Web3Container />
         </ClientSuspense>
       </AppsShell>

apps/web/pages/auth/login.tsx

@@ -118,8 +118,14 @@ export default function Login({
               .catch(() => setErrorMessage(errorMessages[ErrorCode.InternalServerError]));
           }}
           data-testid="login-form">
-          <input defaultValue={csrfToken || undefined} type="hidden" hidden {...form.register("csrfToken")} />
-
+          <div>
+            <input
+              defaultValue={csrfToken || undefined}
+              type="hidden"
+              hidden
+              {...form.register("csrfToken")}
+            />
+          </div>
           <div className={classNames("space-y-6", { hidden: twoFactorRequired })}>
             <EmailField
               id="email"

apps/web/pages/bookings/[status].tsx

@@ -8,7 +8,7 @@ import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 
 import { useInViewObserver } from "@lib/hooks/useInViewObserver";
-import { inferQueryInput, trpc } from "@lib/trpc";
+import { inferQueryInput, inferQueryOutput, trpc } from "@lib/trpc";
 
 import BookingsShell from "@components/BookingsShell";
 import EmptyScreen from "@components/EmptyScreen";
@@ -17,6 +17,8 @@ import BookingListItem from "@components/booking/BookingListItem";
 import SkeletonLoader from "@components/booking/SkeletonLoader";
 
 type BookingListingStatus = inferQueryInput<"viewer.bookings">["status"];
+type BookingOutput = inferQueryOutput<"viewer.bookings">["bookings"][0];
+type BookingPage = inferQueryOutput<"viewer.bookings">;
 
 export default function Bookings() {
   const router = useRouter();
@@ -26,6 +28,7 @@ export default function Bookings() {
 
   const descriptionByStatus: Record<BookingListingStatus, string> = {
     upcoming: t("upcoming_bookings"),
+    recurring: t("recurring_bookings"),
     past: t("past_bookings"),
     cancelled: t("cancelled_bookings"),
   };
@@ -44,11 +47,20 @@ export default function Bookings() {
 
   const isEmpty = !query.data?.pages[0]?.bookings.length;
 
+  // Get the recurrentCount value from the grouped recurring bookings
+  // created with the same recurringEventId
+  const defineRecurrentCount = (booking: BookingOutput, page: BookingPage) => {
+    let recurringCount = undefined;
+    if (booking.recurringEventId !== null) {
+      recurringCount = page.groupedRecurringBookings.filter(
+        (group) => group.recurringEventId === booking.recurringEventId
+      )[0]._count; // If found, only one object exists, just assing the needed _count value
+    }
+    return { recurringCount };
+  };
+
   return (
-    <Shell
-      heading={t("bookings")}
-      subtitle={t("bookings_description")}
-      customLoader={<SkeletonLoader></SkeletonLoader>}>
+    <Shell heading={t("bookings")} subtitle={t("bookings_description")} customLoader={<SkeletonLoader />}>
       <WipeMyCalActionButton trpc={trpc} bookingStatus={status} bookingsEmpty={isEmpty} />
       <BookingsShell>
         <div className="-mx-4 flex flex-col sm:mx-auto">
@@ -66,7 +78,12 @@ export default function Bookings() {
                         {query.data.pages.map((page, index) => (
                           <Fragment key={index}>
                             {page.bookings.map((booking) => (
-                              <BookingListItem key={booking.id} {...booking} />
+                              <BookingListItem
+                                key={booking.id}
+                                listingStatus={status}
+                                {...defineRecurrentCount(booking, page)}
+                                {...booking}
+                              />
                             ))}
                           </Fragment>
                         ))}

apps/web/pages/d/[link]/[slug].tsx

@@ -2,6 +2,8 @@ import { Prisma } from "@prisma/client";
 import { GetServerSidePropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 
+import { RecurringEvent } from "@calcom/types/Calendar";
+
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { getWorkingHours } from "@lib/availability";
 import { GetBookingType } from "@lib/getBooking";
@@ -37,6 +39,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     periodEndDate: true,
     periodDays: true,
     periodCountCalendarDays: true,
+    recurringEvent: true,
     schedulingType: true,
     userId: true,
     schedule: {
@@ -131,6 +134,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const [user] = users;
   const eventTypeObject = Object.assign({}, hashedLink.eventType, {
     metadata: {} as JSONObject,
+    recurringEvent: (eventTypeSelect.recurringEvent || {}) as RecurringEvent,
     periodStartDate: hashedLink.eventType.periodStartDate?.toString() ?? null,
     periodEndDate: hashedLink.eventType.periodEndDate?.toString() ?? null,
     slug,

apps/web/pages/d/[link]/book.tsx

@@ -6,8 +6,9 @@ import { GetServerSidePropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 
 import { getLocationLabels } from "@calcom/app-store/utils";
+import { RecurringEvent } from "@calcom/types/Calendar";
 
-import { asStringOrThrow } from "@lib/asStringOrNull";
+import { asStringOrThrow, asStringOrNull } from "@lib/asStringOrNull";
 import prisma from "@lib/prisma";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -28,6 +29,7 @@ export default function Book(props: HashLinkPageProps) {
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   const link = asStringOrThrow(context.query.link as string);
+  const recurringEventCountQuery = asStringOrNull(context.query.count);
   const slug = context.query.slug as string;
 
   const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
@@ -41,6 +43,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     periodType: true,
     periodDays: true,
     periodStartDate: true,
+    recurringEvent: true,
     periodEndDate: true,
     metadata: true,
     periodCountCalendarDays: true,
@@ -122,6 +125,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
   const eventType = {
     ...eventTypeRaw,
     metadata: (eventTypeRaw.metadata || {}) as JSONObject,
+    recurringEvent: (eventTypeRaw.recurringEvent || {}) as RecurringEvent,
     isWeb3Active:
       web3Credentials && web3Credentials.key
         ? (((web3Credentials.key as JSONObject).isWeb3Active || false) as boolean)
@@ -148,6 +152,15 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
 
   const t = await getTranslation(context.locale ?? "en", "common");
 
+  // Checking if number of recurring event ocurrances is valid against event type configuration
+  const recurringEventCount =
+    (eventTypeObject?.recurringEvent?.count &&
+      recurringEventCountQuery &&
+      (parseInt(recurringEventCountQuery) <= eventTypeObject.recurringEvent.count
+        ? recurringEventCountQuery
+        : eventType.recurringEvent.count)) ||
+    null;
+
   return {
     props: {
       locationLabels: getLocationLabels(t),
@@ -155,6 +168,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       eventType: eventTypeObject,
       booking: null,
       trpcState: ssr.dehydrate(),
+      recurringEventCount,
       isDynamicGroupBooking: false,
       hasHashedBookingLink: true,
       hashedLink: link,

apps/web/pages/event-types/[type].tsx

@@ -26,17 +26,21 @@ import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { Controller, Noop, useForm, UseFormReturn } from "react-hook-form";
 import { FormattedNumber, IntlProvider } from "react-intl";
+import short, { generate } from "short-uuid";
 import { JSONObject } from "superjson/dist/types";
+import { v5 as uuidv5 } from "uuid";
 import { z } from "zod";
 
 import { SelectGifInput } from "@calcom/app-store/giphy/components";
-import getApps, { getLocationOptions, hasIntegration } from "@calcom/app-store/utils";
+import getApps, { getLocationOptions } from "@calcom/app-store/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import { StripeData } from "@calcom/stripe/server";
+import { RecurringEvent } from "@calcom/types/Calendar";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import Switch from "@calcom/ui/Switch";
+import { Tooltip } from "@calcom/ui/Tooltip";
 import { Form } from "@calcom/ui/form/fields";
 
 import { QueryCell } from "@lib/QueryCell";
@@ -52,11 +56,13 @@ import { inferSSRProps } from "@lib/types/inferSSRProps";
 
 import { ClientSuspense } from "@components/ClientSuspense";
 import DestinationCalendarSelector from "@components/DestinationCalendarSelector";
+import { EmbedButton, EmbedDialog } from "@components/Embed";
 import Loader from "@components/Loader";
 import Shell from "@components/Shell";
-import { Tooltip } from "@components/Tooltip";
 import { UpgradeToProDialog } from "@components/UpgradeToProDialog";
+import { AvailabilitySelectSkeletonLoader } from "@components/availability/SkeletonLoader";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
+import RecurringEventController from "@components/eventtype/RecurringEventController";
 import CustomInputTypeForm from "@components/pages/eventtypes/CustomInputTypeForm";
 import Badge from "@components/ui/Badge";
 import InfoBadge from "@components/ui/InfoBadge";
@@ -64,7 +70,7 @@ import CheckboxField from "@components/ui/form/CheckboxField";
 import CheckedSelect from "@components/ui/form/CheckedSelect";
 import { DateRangePicker } from "@components/ui/form/DateRangePicker";
 import MinutesField from "@components/ui/form/MinutesField";
-import Select, { SelectProps } from "@components/ui/form/Select";
+import Select from "@components/ui/form/Select";
 import * as RadioArea from "@components/ui/form/radio-area";
 import WebhookListContainer from "@components/webhook/WebhookListContainer";
 
@@ -159,6 +165,7 @@ const AvailabilitySelect = ({
   return (
     <QueryCell
       query={query}
+      customLoader={<AvailabilitySelectSkeletonLoader />}
       success={({ data }) => {
         const options = data.schedules.map((schedule) => ({
           value: schedule.id,
@@ -271,9 +278,21 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
     PERIOD_TYPES.find((s) => s.type === eventType.periodType) ||
     PERIOD_TYPES.find((s) => s.type === "UNLIMITED");
 
-  const [requirePayment, setRequirePayment] = useState(eventType.price > 0);
   const [advancedSettingsVisible, setAdvancedSettingsVisible] = useState(false);
+
+  const [requirePayment, setRequirePayment] = useState(
+    eventType.price > 0 && eventType.recurringEvent?.count !== undefined
+  );
+
   const [hashedLinkVisible, setHashedLinkVisible] = useState(!!eventType.hashedLink);
+  const [hashedUrl, setHashedUrl] = useState(eventType.hashedLink?.link);
+
+  const generateHashedLink = (id: number) => {
+    const translator = short();
+    const seed = `${id}:${new Date().getTime()}`;
+    const uid = translator.fromUUID(uuidv5(seed, uuidv5.URL));
+    return uid;
+  };
 
   useEffect(() => {
     const fetchTokens = async () => {
@@ -308,6 +327,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
     console.log(tokensList); // Just here to make sure it passes the gc hook. Can remove once actual use is made of tokensList.
 
     fetchTokens();
+
+    !hashedUrl && setHashedUrl(generateHashedLink(eventType.users[0].id));
   }, []);
 
   async function deleteEventTypeHandler(event: React.MouseEvent<HTMLElement, MouseEvent>) {
@@ -454,9 +475,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
     team ? `team/${team.slug}` : eventType.users[0].username
   }/${eventType.slug}`;
 
-  const placeholderHashedLink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/d/${
-    eventType.hashedLink ? eventType.hashedLink.link : "xxxxxxxxxxxxxxxxx"
-  }/${eventType.slug}`;
+  const placeholderHashedLink = `${process.env.NEXT_PUBLIC_WEBSITE_URL}/d/${hashedUrl}/${eventType.slug}`;
 
   const mapUserToValue = ({
     id,
@@ -482,12 +501,13 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
     description: string;
     disableGuests: boolean;
     requiresConfirmation: boolean;
+    recurringEvent: RecurringEvent;
     schedulingType: SchedulingType | null;
     price: number;
     currency: string;
     hidden: boolean;
     hideCalendarNotes: boolean;
-    hashedLink: boolean;
+    hashedLink: string | undefined;
     locations: { type: LocationType; address?: string; link?: string }[];
     customInputs: EventTypeCustomInput[];
     users: string[];
@@ -509,6 +529,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
   }>({
     defaultValues: {
       locations: eventType.locations || [],
+      recurringEvent: eventType.recurringEvent || {},
       schedule: eventType.schedule?.id,
       periodDates: {
         startDate: periodDates.startDate,
@@ -927,15 +948,15 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       giphyThankYouPage,
                       beforeBufferTime,
                       afterBufferTime,
+                      recurringEvent,
                       locations,
                       ...input
                     } = values;
 
-                    if (requirePayment) input.currency = currency;
-
                     updateMutation.mutate({
                       ...input,
                       locations,
+                      recurringEvent,
                       periodStartDate: periodDates.startDate,
                       periodEndDate: periodDates.endDate,
                       periodCountCalendarDays: periodCountCalendarDays === "1",
@@ -1333,6 +1354,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           )}
                         />
 
+                        <RecurringEventController
+                          recurringEvent={eventType.recurringEvent}
+                          formMethods={formMethods}
+                        />
+
                         <Controller
                           name="disableGuests"
                           control={formMethods.control}
@@ -1354,27 +1380,31 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <Controller
                           name="hashedLink"
                           control={formMethods.control}
-                          defaultValue={eventType.hashedLink ? true : false}
+                          defaultValue={hashedUrl}
                           render={() => (
                             <>
                               <CheckboxField
-                                id="hashedLink"
-                                name="hashedLink"
-                                label={t("hashed_link")}
-                                description={t("hashed_link_description")}
+                                id="hashedLinkCheck"
+                                name="hashedLinkCheck"
+                                label={t("private_link")}
+                                description={t("private_link_description")}
                                 defaultChecked={eventType.hashedLink ? true : false}
                                 onChange={(e) => {
                                   setHashedLinkVisible(e?.target.checked);
-                                  formMethods.setValue("hashedLink", e?.target.checked);
+                                  formMethods.setValue(
+                                    "hashedLink",
+                                    e?.target.checked ? hashedUrl : undefined
+                                  );
                                 }}
                               />
                               {hashedLinkVisible && (
-                                <div className="block items-center sm:flex">
+                                <div className="!mt-1 block items-center sm:flex">
                                   <div className="min-w-48 mb-4 sm:mb-0"></div>
                                   <div className="w-full">
                                     <div className="relative mt-1 flex w-full">
                                       <input
                                         disabled
+                                        name="hashedLink"
                                         data-testid="generated-hash-url"
                                         type="text"
                                         className="  grow select-none border-gray-300 bg-gray-50 text-sm text-gray-500 ltr:rounded-l-sm rtl:rounded-r-sm"
@@ -1389,9 +1419,11 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                         <Button
                                           color="minimal"
                                           onClick={() => {
+                                            navigator.clipboard.writeText(placeholderHashedLink);
                                             if (eventType.hashedLink) {
-                                              navigator.clipboard.writeText(placeholderHashedLink);
-                                              showToast("Link copied!", "success");
+                                              showToast(t("private_link_copied"), "success");
+                                            } else {
+                                              showToast(t("enabled_after_update_description"), "warning");
                                             }
                                           }}
                                           type="button"
@@ -1640,7 +1672,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         <SuccessRedirectEdit<typeof formMethods>
                           formMethods={formMethods}
                           eventType={eventType}></SuccessRedirectEdit>
-                        {hasPaymentIntegration && (
+                        {hasPaymentIntegration && eventType.recurringEvent?.count !== undefined && (
                           <>
                             <hr className="border-neutral-200" />
                             <div className="block sm:flex">
@@ -1822,6 +1854,26 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   <LinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
                   {t("copy_link")}
                 </button>
+                {hashedLinkVisible && (
+                  <button
+                    onClick={() => {
+                      navigator.clipboard.writeText(placeholderHashedLink);
+                      if (eventType.hashedLink) {
+                        showToast(t("private_link_copied"), "success");
+                      } else {
+                        showToast(t("enabled_after_update_description"), "warning");
+                      }
+                    }}
+                    type="button"
+                    className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900">
+                    <LinkIcon className="h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+                    {t("copy_private_link")}
+                  </button>
+                )}
+                <EmbedButton
+                  className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900"
+                  eventTypeId={eventType.id}
+                />
                 <Dialog>
                   <DialogTrigger className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-red-500 hover:bg-gray-200">
                     <TrashIcon className="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2" />
@@ -1870,28 +1922,30 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                     addLocation(newLocation, details);
                     setShowLocationModal(false);
                   }}>
-                  <Controller
-                    name="locationType"
-                    control={locationFormMethods.control}
-                    render={() => (
-                      <Select
-                        maxMenuHeight={100}
-                        name="location"
-                        defaultValue={selectedLocation}
-                        options={locationOptions}
-                        isSearchable={false}
-                        className="  my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
-                        onChange={(val) => {
-                          if (val) {
-                            locationFormMethods.setValue("locationType", val.value);
-                            locationFormMethods.unregister("locationLink");
-                            locationFormMethods.unregister("locationAddress");
-                            setSelectedLocation(val);
-                          }
-                        }}
-                      />
-                    )}
-                  />
+                  <div>
+                    <Controller
+                      name="locationType"
+                      control={locationFormMethods.control}
+                      render={() => (
+                        <Select
+                          maxMenuHeight={100}
+                          name="location"
+                          defaultValue={selectedLocation}
+                          options={locationOptions}
+                          isSearchable={false}
+                          className="  my-4 block w-full min-w-0 flex-1 rounded-sm border border-gray-300 sm:text-sm"
+                          onChange={(val) => {
+                            if (val) {
+                              locationFormMethods.setValue("locationType", val.value);
+                              locationFormMethods.unregister("locationLink");
+                              locationFormMethods.unregister("locationAddress");
+                              setSelectedLocation(val);
+                            }
+                          }}
+                        />
+                      )}
+                    />
+                  </div>
                   <LocationOptions />
                   <div className="mt-4 flex justify-end space-x-2">
                     <Button onClick={() => setShowLocationModal(false)} type="button" color="secondary">
@@ -1969,6 +2023,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
             />
           )}
         </ClientSuspense>
+        <EmbedDialog />
       </Shell>
     </div>
   );
@@ -2048,6 +2103,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       periodEndDate: true,
       periodCountCalendarDays: true,
       requiresConfirmation: true,
+      recurringEvent: true,
       hideCalendarNotes: true,
       disableGuests: true,
       minimumBookingNotice: true,
@@ -2112,6 +2168,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const { locations, metadata, ...restEventType } = rawEventType;
   const eventType = {
     ...restEventType,
+    recurringEvent: (restEventType.recurringEvent || {}) as RecurringEvent,
     locations: locations as unknown as Location[],
     metadata: (metadata || {}) as JSONObject,
     isWeb3Active:
@@ -2137,8 +2194,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
   const t = await getTranslation(currentUser?.locale ?? "en", "common");
   const integrations = getApps(credentials);
   const locationOptions = getLocationOptions(integrations, t);
-
-  const hasPaymentIntegration = hasIntegration(integrations, "stripe_payment");
+  const hasPaymentIntegration = !!credentials.find((credential) => credential.type === "stripe_payment");
   const currency =
     (credentials.find((integration) => integration.type === "stripe_payment")?.key as unknown as StripeData)
       ?.default_currency || "usd";

apps/web/pages/event-types/index.tsx

@@ -10,13 +10,14 @@ import {
   ClipboardCopyIcon,
   TrashIcon,
   PencilIcon,
+  CodeIcon,
 } from "@heroicons/react/solid";
 import { UsersIcon } from "@heroicons/react/solid";
 import { Trans } from "next-i18next";
 import Head from "next/head";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import React, { Fragment, useEffect, useState } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -30,15 +31,16 @@ import Dropdown, {
   DropdownMenuItem,
   DropdownMenuSeparator,
 } from "@calcom/ui/Dropdown";
+import { Tooltip } from "@calcom/ui/Tooltip";
 
 import { withQuery } from "@lib/QueryCell";
 import classNames from "@lib/classNames";
 import { HttpError } from "@lib/core/http/error";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
+import { EmbedButton, EmbedDialog } from "@components/Embed";
 import EmptyScreen from "@components/EmptyScreen";
 import Shell from "@components/Shell";
-import { Tooltip } from "@components/Tooltip";
 import ConfirmationDialogContent from "@components/dialog/ConfirmationDialogContent";
 import CreateEventTypeButton from "@components/eventtype/CreateEventType";
 import EventTypeDescription from "@components/eventtype/EventTypeDescription";
@@ -76,7 +78,10 @@ const Item = ({ type, group, readOnly }: any) => {
   return (
     <Link href={"/event-types/" + type.id}>
       <a
-        className="flex-grow truncate text-sm"
+        className={classNames(
+          "flex-grow truncate text-sm ",
+          type.$disabled && "pointer-events-none cursor-not-allowed opacity-30"
+        )}
         title={`${type.title} ${type.description ? `– ${type.description}` : ""}`}>
         <div>
           <span
@@ -205,17 +210,19 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
         {types.map((type, index) => (
           <li
             key={type.id}
-            className={classNames(
-              type.$disabled && "pointer-events-none cursor-not-allowed select-none opacity-30"
-            )}
+            className={classNames(type.$disabled && "select-none")}
             data-disabled={type.$disabled ? 1 : 0}>
             <div
               className={classNames(
                 "flex items-center justify-between hover:bg-neutral-50 ",
-                type.$disabled && "pointer-events-none"
+                type.$disabled && "hover:bg-white"
               )}>
-              <div className="group flex w-full items-center justify-between px-4 py-4 hover:bg-neutral-50 sm:px-6">
-                {types.length > 1 && (
+              <div
+                className={classNames(
+                  "group flex w-full items-center justify-between px-4 py-4 hover:bg-neutral-50 sm:px-6",
+                  type.$disabled && "hover:bg-white"
+                )}>
+                {types.length > 1 && !type.$disabled && (
                   <>
                     <button
                       className="invisible absolute left-1/2 -mt-4 mb-4 -ml-4 hidden h-7 w-7 scale-0 rounded-full border bg-white p-1 text-gray-400 transition-all hover:border-transparent hover:text-black hover:shadow group-hover:visible group-hover:scale-100 sm:left-[19px] sm:ml-0 sm:block"
@@ -236,7 +243,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                     {type.users?.length > 1 && (
                       <AvatarGroup
                         border="border-2 border-white"
-                        className="relative top-1 right-3"
+                        className={classNames("relative top-1 right-3", type.$disabled && " opacity-30")}
                         size={8}
                         truncateAfter={4}
                         items={type.users.map((organizer) => ({
@@ -245,28 +252,38 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         }))}
                       />
                     )}
-                    <Tooltip content={t("preview")}>
-                      <a
-                        href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`}
-                        target="_blank"
-                        rel="noreferrer"
-                        className="btn-icon appearance-none">
-                        <ExternalLinkIcon className="h-5 w-5 group-hover:text-black" />
-                      </a>
-                    </Tooltip>
+                    <div
+                      className={classNames(
+                        "flex justify-between space-x-2 rtl:space-x-reverse ",
+                        type.$disabled && "pointer-events-none cursor-not-allowed"
+                      )}>
+                      <Tooltip content={t("preview")}>
+                        <a
+                          href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`}
+                          target="_blank"
+                          rel="noreferrer"
+                          className={classNames("btn-icon appearance-none", type.$disabled && " opacity-30")}>
+                          <ExternalLinkIcon
+                            className={classNames("h-5 w-5", !type.$disabled && "group-hover:text-black")}
+                          />
+                        </a>
+                      </Tooltip>
 
-                    <Tooltip content={t("copy_link")}>
-                      <button
-                        onClick={() => {
-                          showToast(t("link_copied"), "success");
-                          navigator.clipboard.writeText(
-                            `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`
-                          );
-                        }}
-                        className="btn-icon">
-                        <LinkIcon className="h-5 w-5 group-hover:text-black" />
-                      </button>
-                    </Tooltip>
+                      <Tooltip content={t("copy_link")}>
+                        <button
+                          onClick={() => {
+                            showToast(t("link_copied"), "success");
+                            navigator.clipboard.writeText(
+                              `${process.env.NEXT_PUBLIC_WEBSITE_URL}/${group.profile.slug}/${type.slug}`
+                            );
+                          }}
+                          className={classNames("btn-icon", type.$disabled && " opacity-30")}>
+                          <LinkIcon
+                            className={classNames("h-5 w-5", !type.$disabled && "group-hover:text-black")}
+                          />
+                        </button>
+                      </Tooltip>
+                    </div>
                     <Dropdown>
                       <DropdownMenuTrigger
                         className="h-10 w-10 cursor-pointer rounded-sm border border-transparent text-neutral-500 hover:border-gray-300 hover:text-neutral-900 focus:border-gray-300"
@@ -280,7 +297,10 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               type="button"
                               size="sm"
                               color="minimal"
-                              className="w-full rounded-none"
+                              className={classNames(
+                                "w-full rounded-none",
+                                type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
+                              )}
                               StartIcon={PencilIcon}>
                               {" "}
                               {t("edit")}
@@ -292,13 +312,25 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             type="button"
                             color="minimal"
                             size="sm"
-                            className="w-full rounded-none"
+                            className={classNames(
+                              "w-full rounded-none",
+                              type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
+                            )}
                             data-testid={"event-type-duplicate-" + type.id}
                             StartIcon={DuplicateIcon}
                             onClick={() => openModal(group, type)}>
                             {t("duplicate")}
                           </Button>
                         </DropdownMenuItem>
+                        <DropdownMenuItem>
+                          <EmbedButton
+                            dark
+                            className={classNames(
+                              "w-full rounded-none",
+                              type.$disabled && " pointer-events-none cursor-not-allowed opacity-30"
+                            )}
+                            eventTypeId={type.id}></EmbedButton>
+                        </DropdownMenuItem>
                         <DropdownMenuSeparator className="h-px bg-gray-200" />
                         <DropdownMenuItem>
                           <Dialog>
@@ -519,9 +551,9 @@ const CTA = () => {
 };
 
 const WithQuery = withQuery(["viewer.eventTypes"]);
+
 const EventTypesPage = () => {
   const { t } = useLocale();
-
   return (
     <div>
       <Head>
@@ -574,6 +606,7 @@ const EventTypesPage = () => {
               {data.eventTypeGroups.length === 0 && (
                 <CreateFirstEventTypeView profiles={data.profiles} canAddEvents={data.viewer.canAddEvents} />
               )}
+              <EmbedDialog></EmbedDialog>
             </>
           )}
         />

apps/web/pages/settings/billing.tsx

@@ -5,9 +5,10 @@ import { useIntercom } from "react-use-intercom";
 import Button from "@calcom/ui/Button";
 
 import { useLocale } from "@lib/hooks/useLocale";
+import useMeQuery from "@lib/hooks/useMeQuery";
 
 import SettingsShell from "@components/SettingsShell";
-import Shell, { useMeQuery } from "@components/Shell";
+import Shell from "@components/Shell";
 
 type CardProps = { title: string; description: string; className?: string; children: ReactNode };
 const Card = ({ title, description, className = "", children }: CardProps): JSX.Element => (

apps/web/pages/settings/teams/[id]/index.tsx

@@ -145,6 +145,7 @@ export function TeamSettingsPage() {
             <MemberInvitationModal
               isOpen={showMemberInvitationModal}
               team={team}
+              currentMember={team.membership.role}
               onExit={() => setShowMemberInvitationModal(false)}
             />
           )}

apps/web/pages/settings/teams/index.tsx

@@ -8,12 +8,13 @@ import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 
 import { useLocale } from "@lib/hooks/useLocale";
+import useMeQuery from "@lib/hooks/useMeQuery";
 import { trpc } from "@lib/trpc";
 
 import EmptyScreen from "@components/EmptyScreen";
 import Loader from "@components/Loader";
 import SettingsShell from "@components/SettingsShell";
-import Shell, { useMeQuery } from "@components/Shell";
+import Shell from "@components/Shell";
 import TeamCreateModal from "@components/team/TeamCreateModal";
 import TeamList from "@components/team/TeamList";
 

apps/web/pages/success.tsx

@@ -1,7 +1,9 @@
 import { CheckIcon } from "@heroicons/react/outline";
 import { ArrowLeftIcon, ClockIcon, XIcon } from "@heroicons/react/solid";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible";
 import classNames from "classnames";
 import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
 import timezone from "dayjs/plugin/timezone";
 import toArray from "dayjs/plugin/toArray";
 import utc from "dayjs/plugin/utc";
@@ -10,26 +12,30 @@ 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 RRule from "rrule";
 
+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 { localStorage } from "@calcom/lib/webstorage";
+import { RecurringEvent } from "@calcom/types/Calendar";
 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";
 import { isSuccessRedirectAvailable } from "@lib/isSuccessRedirectAvailable";
 import prisma from "@lib/prisma";
+import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { isBrowserLocale24h } from "@lib/timeFormat";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
 
@@ -41,6 +47,7 @@ import { ssrInit } from "@server/lib/ssr";
 dayjs.extend(utc);
 dayjs.extend(toArray);
 dayjs.extend(timezone);
+dayjs.extend(localizedFormat);
 
 function redirectToExternalUrl(url: string) {
   window.parent.location.href = url;
@@ -133,7 +140,9 @@ function RedirectionToast({ url }: { url: string }) {
   );
 }
 
-export default function Success(props: inferSSRProps<typeof getServerSideProps>) {
+type SuccessProps = inferSSRProps<typeof getServerSideProps>;
+
+export default function Success(props: SuccessProps) {
   const { t } = useLocale();
   const router = useRouter();
   const { location: _location, name, reschedule } = router.query;
@@ -143,7 +152,7 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
 
   const [date, setDate] = useState(dayjs.utc(asStringOrThrow(router.query.date)));
   const { isReady, Theme } = useTheme(props.profile.theme);
-  const { eventType } = props;
+  const { eventType, bookingInfo } = props;
 
   const isBackgroundTransparent = useIsBackgroundTransparent();
   const isEmbed = useIsEmbed();
@@ -164,6 +173,15 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
 
   const eventName = getEventName(eventNameObject);
   const needsConfirmation = eventType.requiresConfirmation && reschedule != "true";
+  const telemetry = useTelemetry();
+  useEffect(() => {
+    telemetry.withJitsu((jitsu) =>
+      jitsu.track(
+        top !== window ? telemetryEventTypes.embedView : telemetryEventTypes.pageView,
+        collectPageParameters("/success")
+      )
+    );
+  }, [telemetry]);
 
   useEffect(() => {
     const users = eventType.users;
@@ -212,236 +230,367 @@ export default function Success(props: inferSSRProps<typeof getServerSideProps>)
 
     return encodeURIComponent(event.value ? event.value : false);
   }
+
+  function getTitle(): string {
+    const titleSuffix = props.recurringBookings ? "_recurring" : "";
+    if (needsConfirmation) {
+      if (props.profile.name !== null) {
+        return t("user_needs_to_confirm_or_reject_booking" + titleSuffix, {
+          user: props.profile.name,
+        });
+      }
+      return t("needs_to_be_confirmed_or_rejected" + titleSuffix);
+    }
+    return t("emailed_you_and_attendees" + titleSuffix);
+  }
   const userIsOwner = !!(session?.user?.id && eventType.users.find((user) => (user.id = session.user.id)));
+  const title = t(
+    `booking_${needsConfirmation ? "submitted" : "confirmed"}${props.recurringBookings ? "_recurring" : ""}`
+  );
   return (
     (isReady && (
-      <div
-        className={isEmbed ? "" : "h-screen bg-neutral-100 dark:bg-neutral-900"}
-        data-testid="success-page">
-        <Theme />
-        <HeadSeo
-          title={needsConfirmation ? t("booking_submitted") : t("booking_confirmed")}
-          description={needsConfirmation ? t("booking_submitted") : t("booking_confirmed")}
-        />
-        <CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
-        <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
-          <div className={classNames("overflow-y-auto", isEmbed ? "" : "z-50 ")}>
-            {isSuccessRedirectAvailable(eventType) && eventType.successRedirectUrl ? (
-              <RedirectionToast url={eventType.successRedirectUrl}></RedirectionToast>
-            ) : null}{" "}
-            <div
-              className={classNames(
-                shouldAlignCentrally ? "text-center" : "",
-                "flex items-end justify-center px-4 pt-4 pb-20  sm:block sm:p-0"
-              )}>
+      <>
+        <div
+          className={isEmbed ? "" : "h-screen bg-neutral-100 dark:bg-neutral-900"}
+          data-testid="success-page">
+          <Theme />
+          <HeadSeo title={title} description={title} />
+          <CustomBranding lightVal={props.profile.brandColor} darkVal={props.profile.darkBrandColor} />
+          <main className={classNames(shouldAlignCentrally ? "mx-auto" : "", isEmbed ? "" : "max-w-3xl")}>
+            <div className={classNames("overflow-y-auto", isEmbed ? "" : "z-50 ")}>
+              {isSuccessRedirectAvailable(eventType) && eventType.successRedirectUrl ? (
+                <RedirectionToast url={eventType.successRedirectUrl}></RedirectionToast>
+              ) : null}{" "}
               <div
-                className={classNames("my-4 transition-opacity sm:my-0", isEmbed ? "" : " inset-0")}
-                aria-hidden="true">
+                className={classNames(
+                  shouldAlignCentrally ? "text-center" : "",
+                  "flex items-end justify-center px-4 pt-4 pb-20  sm:block sm:p-0"
+                )}>
                 <div
-                  className={classNames(
-                    "inline-block transform overflow-hidden rounded-md border sm:my-8 sm:max-w-lg",
-                    isBackgroundTransparent ? "" : "bg-white dark:border-neutral-700 dark:bg-gray-800",
-                    "px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full  sm:py-6 sm:align-middle"
-                  )}
-                  role="dialog"
-                  aria-modal="true"
-                  aria-labelledby="modal-headline">
-                  <div>
-                    <div
-                      className={classNames(
-                        "mx-auto flex items-center justify-center",
-                        !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" />}
-                      {needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
-                    </div>
-                    <div className="mt-3 text-center sm:mt-5">
-                      <h3
-                        className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
-                        id="modal-headline">
-                        {needsConfirmation ? t("submitted") : t("meeting_is_scheduled")}
-                      </h3>
-                      <div className="mt-3">
-                        <p className="text-sm text-neutral-600 dark:text-gray-300">
-                          {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")}
-                        </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>
-                        <div className="font-medium">{t("when")}</div>
-                        <div className="col-span-2">
-                          {date.format("dddd, DD MMMM YYYY")}
-                          <br />
-                          {date.format(is24h ? "H:mm" : "h:mma")} - {props.eventType.length} mins{" "}
-                          <span className="text-bookinglight">
-                            ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
-                          </span>
-                        </div>
-                        {location && (
-                          <>
-                            <div className="mt-6 font-medium">{t("where")}</div>
-                            <div className="col-span-2 mt-6">
-                              {location.startsWith("http") ? (
-                                <a title="Meeting Link" href={location}>
-                                  {location}
-                                </a>
-                              ) : (
-                                location
-                              )}
-                            </div>
-                          </>
+                  className={classNames("my-4 transition-opacity sm:my-0", isEmbed ? "" : " inset-0")}
+                  aria-hidden="true">
+                  <div
+                    className={classNames(
+                      "inline-block transform overflow-hidden rounded-md border sm:my-8 sm:max-w-lg",
+                      isBackgroundTransparent ? "" : "bg-white dark:border-neutral-700 dark:bg-gray-800",
+                      "px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full  sm:py-6 sm:align-middle"
+                    )}
+                    role="dialog"
+                    aria-modal="true"
+                    aria-labelledby="modal-headline">
+                    <div>
+                      <div
+                        className={classNames(
+                          "mx-auto flex items-center justify-center",
+                          !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" />
                         )}
+                        {needsConfirmation && <ClockIcon className="h-8 w-8 text-green-600" />}
+                      </div>
+                      <div className="mt-3 text-center sm:mt-5">
+                        <h3
+                          className="text-2xl font-semibold leading-6 text-neutral-900 dark:text-white"
+                          id="modal-headline">
+                          {needsConfirmation
+                            ? props.recurringBookings
+                              ? t("submitted_recurring")
+                              : t("submitted")
+                            : props.recurringBookings
+                            ? t("meeting_is_scheduled_recurring")
+                            : t("meeting_is_scheduled")}
+                        </h3>
+                        <div className="mt-3">
+                          <p className="text-sm text-neutral-600 dark:text-gray-300">{getTitle()}</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>
+                          <div className="font-medium">{t("when")}</div>
+                          <div className="col-span-2 mb-6">
+                            <RecurringBookings
+                              isReschedule={reschedule === "true"}
+                              eventType={props.eventType}
+                              recurringBookings={props.recurringBookings}
+                              date={date}
+                              is24h={is24h}
+                            />
+                          </div>
+                          <div className="font-medium">{t("who")}</div>
+                          <div className="col-span-2 mb-6">
+                            {bookingInfo?.user && (
+                              <div className="mb-3">
+                                <p>{bookingInfo.user.name}</p>
+                                <p className="text-bookinglight">{bookingInfo.user.email}</p>
+                              </div>
+                            )}
+                            {bookingInfo?.attendees.map((attendee, index) => (
+                              <div
+                                key={attendee.name}
+                                className={index === bookingInfo.attendees.length - 1 ? "" : "mb-3"}>
+                                <p>{attendee.name}</p>
+                                <p className="text-bookinglight">{attendee.email}</p>
+                              </div>
+                            ))}
+                          </div>
+                          {location && (
+                            <>
+                              <div className="mt-6 font-medium">{t("where")}</div>
+                              <div className="col-span-2 mt-6">
+                                {location.startsWith("http") ? (
+                                  <a title="Meeting Link" href={location}>
+                                    {location}
+                                  </a>
+                                ) : (
+                                  location
+                                )}
+                              </div>
+                            </>
+                          )}
+                          {bookingInfo?.description && (
+                            <>
+                              <div className="mt-6 font-medium">{t("additional_notes")}</div>
+                              <div className="col-span-2 mt-6 mb-6">
+                                <p>{bookingInfo.description}</p>
+                              </div>
+                            </>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  {!needsConfirmation && (
-                    <div className="border-bookinglightest mt-5 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
-                      <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
-                        {t("add_to_calendar")}
-                      </span>
-                      <div className="flex flex-grow justify-center text-center">
-                        <Link
-                          href={
-                            `https://calendar.google.com/calendar/r/eventedit?dates=${date
-                              .utc()
-                              .format("YYYYMMDDTHHmmss[Z]")}/${date
-                              .add(props.eventType.length, "minute")
-                              .utc()
-                              .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
-                              props.eventType.description
-                            }` +
-                            (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
-                              className="-mt-1 inline-block h-4 w-4"
-                              fill="currentColor"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24">
-                              <title>Google</title>
-                              <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
-                            </svg>
-                          </a>
-                        </Link>
-                        <Link
-                          href={
-                            encodeURI(
-                              "https://outlook.live.com/calendar/0/deeplink/compose?body=" +
-                                props.eventType.description +
-                                "&enddt=" +
-                                date.add(props.eventType.length, "minute").utc().format() +
-                                "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
-                                date.utc().format() +
-                                "&subject=" +
-                                eventName
-                            ) + (location ? "&location=" + 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"
-                            target="_blank">
-                            <svg
-                              className="mr-1 -mt-1 inline-block h-4 w-4"
-                              fill="currentColor"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24">
-                              <title>Microsoft Outlook</title>
-                              <path d="M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z" />
-                            </svg>
-                          </a>
-                        </Link>
-                        <Link
-                          href={
-                            encodeURI(
-                              "https://outlook.office.com/calendar/0/deeplink/compose?body=" +
-                                props.eventType.description +
-                                "&enddt=" +
-                                date.add(props.eventType.length, "minute").utc().format() +
-                                "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
-                                date.utc().format() +
-                                "&subject=" +
-                                eventName
-                            ) + (location ? "&location=" + 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"
-                            target="_blank">
-                            <svg
-                              className="mr-1 -mt-1 inline-block h-4 w-4"
-                              fill="currentColor"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 24 24">
-                              <title>Microsoft Office</title>
-                              <path d="M21.53 4.306v15.363q0 .807-.472 1.433-.472.627-1.253.85l-6.888 1.974q-.136.037-.29.055-.156.019-.293.019-.396 0-.72-.105-.321-.106-.656-.292l-4.505-2.544q-.248-.137-.391-.366-.143-.23-.143-.515 0-.434.304-.738.304-.305.739-.305h5.831V4.964l-4.38 1.563q-.533.187-.856.658-.322.472-.322 1.03v8.078q0 .496-.248.912-.25.416-.683.651l-2.072 1.13q-.286.148-.571.148-.497 0-.844-.347-.348-.347-.348-.844V6.563q0-.62.33-1.19.328-.571.874-.881L11.07.285q.248-.136.534-.21.285-.075.57-.075.211 0 .38.031.166.031.364.093l6.888 1.899q.384.11.7.329.317.217.547.52.23.305.353.67.125.367.125.764zm-1.588 15.363V4.306q0-.273-.16-.478-.163-.204-.423-.28l-3.388-.93q-.397-.111-.794-.23-.397-.117-.794-.216v19.68l4.976-1.427q.26-.074.422-.28.161-.204.161-.477z" />
-                            </svg>
-                          </a>
-                        </Link>
-                        <Link href={"data:text/calendar," + eventLink()}>
-                          <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"
-                            download={props.eventType.title + ".ics"}>
-                            <svg
-                              version="1.1"
-                              fill="currentColor"
-                              xmlns="http://www.w3.org/2000/svg"
-                              viewBox="0 0 1000 1000"
-                              className="mr-1 -mt-1 inline-block h-4 w-4">
-                              <title>{t("other")}</title>
-                              <path d="M971.3,154.9c0-34.7-28.2-62.9-62.9-62.9H611.7c-1.3,0-2.6,0.1-3.9,0.2V10L28.7,87.3v823.4L607.8,990v-84.6c1.3,0.1,2.6,0.2,3.9,0.2h296.7c34.7,0,62.9-28.2,62.9-62.9V154.9z M607.8,636.1h44.6v-50.6h-44.6v-21.9h44.6v-50.6h-44.6v-92h277.9v230.2c0,3.8-3.1,7-7,7H607.8V636.1z M117.9,644.7l-50.6-2.4V397.5l50.6-2.2V644.7z M288.6,607.3c17.6,0.6,37.3-2.8,49.1-7.2l9.1,48c-11,5.1-35.6,9.9-66.9,8.3c-85.4-4.3-127.5-60.7-127.5-132.6c0-86.2,57.8-136.7,133.2-140.1c30.3-1.3,53.7,4,64.3,9.2l-12.2,48.9c-12.1-4.9-28.8-9.2-49.5-8.6c-45.3,1.2-79.5,30.1-79.5,87.4C208.8,572.2,237.8,605.7,288.6,607.3z M455.5,665.2c-32.4-1.6-63.7-11.3-79.1-20.5l12.6-50.7c16.8,9.1,42.9,18.5,70.4,19.4c30.1,1,46.3-10.7,46.3-29.3c0-17.8-14-28.1-48.8-40.6c-46.9-16.4-76.8-41.7-76.8-81.5c0-46.6,39.3-84.1,106.8-87.1c33.3-1.5,58.3,4.2,76.5,11.2l-15.4,53.3c-12.1-5.3-33.5-12.8-62.3-12c-28.3,0.8-41.9,13.6-41.9,28.1c0,17.8,16.1,25.5,53.6,39c52.9,18.5,78.4,45.3,78.4,86.4C575.6,629.7,536.2,669.2,455.5,665.2z M935.3,842.7c0,14.9-12.1,27-27,27H611.7c-1.3,0-2.6-0.2-3.9-0.4V686.2h270.9c19.2,0,34.9-15.6,34.9-34.9V398.4c0-19.2-15.6-34.9-34.9-34.9h-47.1v-32.3H808v32.3h-44.8v-32.3h-22.7v32.3h-43.3v-32.3h-22.7v32.3H628v-32.3h-20.2v-203c1.31.2,2.6-0.4,3.9-0.4h296.7c14.9,0,27,12.1,27,27L935.3,842.7L935.3,842.7z" />
-                            </svg>
-                          </a>
-                        </Link>
+                    {!needsConfirmation && (
+                      <div className="border-bookinglightest mt-5 flex border-b pt-2 pb-4 text-center dark:border-gray-900 sm:mt-0 sm:pt-4">
+                        <span className="flex self-center font-medium text-gray-700 ltr:mr-2 rtl:ml-2 dark:text-gray-50">
+                          {t("add_to_calendar")}
+                        </span>
+                        <div className="flex flex-grow justify-center text-center">
+                          <Link
+                            href={
+                              `https://calendar.google.com/calendar/r/eventedit?dates=${date
+                                .utc()
+                                .format("YYYYMMDDTHHmmss[Z]")}/${date
+                                .add(props.eventType.length, "minute")
+                                .utc()
+                                .format("YYYYMMDDTHHmmss[Z]")}&text=${eventName}&details=${
+                                props.eventType.description
+                              }` +
+                              (typeof location === "string"
+                                ? "&location=" + encodeURIComponent(location)
+                                : "") +
+                              (props.eventType.recurringEvent
+                                ? "&recur=" +
+                                  encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
+                                : "")
+                            }>
+                            <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
+                                className="-mt-1 inline-block h-4 w-4"
+                                fill="currentColor"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24">
+                                <title>Google</title>
+                                <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
+                              </svg>
+                            </a>
+                          </Link>
+                          <Link
+                            href={
+                              encodeURI(
+                                "https://outlook.live.com/calendar/0/deeplink/compose?body=" +
+                                  props.eventType.description +
+                                  "&enddt=" +
+                                  date.add(props.eventType.length, "minute").utc().format() +
+                                  "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
+                                  date.utc().format() +
+                                  "&subject=" +
+                                  eventName
+                              ) + (location ? "&location=" + 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"
+                              target="_blank">
+                              <svg
+                                className="mr-1 -mt-1 inline-block h-4 w-4"
+                                fill="currentColor"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24">
+                                <title>Microsoft Outlook</title>
+                                <path d="M7.88 12.04q0 .45-.11.87-.1.41-.33.74-.22.33-.58.52-.37.2-.87.2t-.85-.2q-.35-.21-.57-.55-.22-.33-.33-.75-.1-.42-.1-.86t.1-.87q.1-.43.34-.76.22-.34.59-.54.36-.2.87-.2t.86.2q.35.21.57.55.22.34.31.77.1.43.1.88zM24 12v9.38q0 .46-.33.8-.33.32-.8.32H7.13q-.46 0-.8-.33-.32-.33-.32-.8V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h6.5V2.55q0-.44.3-.75.3-.3.75-.3h12.9q.44 0 .75.3.3.3.3.75V10.85l1.24.72h.01q.1.07.18.18.07.12.07.25zm-6-8.25v3h3v-3zm0 4.5v3h3v-3zm0 4.5v1.83l3.05-1.83zm-5.25-9v3h3.75v-3zm0 4.5v3h3.75v-3zm0 4.5v2.03l2.41 1.5 1.34-.8v-2.73zM9 3.75V6h2l.13.01.12.04v-2.3zM5.98 15.98q.9 0 1.6-.3.7-.32 1.19-.86.48-.55.73-1.28.25-.74.25-1.61 0-.83-.25-1.55-.24-.71-.71-1.24t-1.15-.83q-.68-.3-1.55-.3-.92 0-1.64.3-.71.3-1.2.85-.5.54-.75 1.3-.25.74-.25 1.63 0 .85.26 1.56.26.72.74 1.23.48.52 1.17.81.69.3 1.56.3zM7.5 21h12.39L12 16.08V17q0 .41-.3.7-.29.3-.7.3H7.5zm15-.13v-7.24l-5.9 3.54Z" />
+                              </svg>
+                            </a>
+                          </Link>
+                          <Link
+                            href={
+                              encodeURI(
+                                "https://outlook.office.com/calendar/0/deeplink/compose?body=" +
+                                  props.eventType.description +
+                                  "&enddt=" +
+                                  date.add(props.eventType.length, "minute").utc().format() +
+                                  "&path=%2Fcalendar%2Faction%2Fcompose&rru=addevent&startdt=" +
+                                  date.utc().format() +
+                                  "&subject=" +
+                                  eventName
+                              ) + (location ? "&location=" + 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"
+                              target="_blank">
+                              <svg
+                                className="mr-1 -mt-1 inline-block h-4 w-4"
+                                fill="currentColor"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 24 24">
+                                <title>Microsoft Office</title>
+                                <path d="M21.53 4.306v15.363q0 .807-.472 1.433-.472.627-1.253.85l-6.888 1.974q-.136.037-.29.055-.156.019-.293.019-.396 0-.72-.105-.321-.106-.656-.292l-4.505-2.544q-.248-.137-.391-.366-.143-.23-.143-.515 0-.434.304-.738.304-.305.739-.305h5.831V4.964l-4.38 1.563q-.533.187-.856.658-.322.472-.322 1.03v8.078q0 .496-.248.912-.25.416-.683.651l-2.072 1.13q-.286.148-.571.148-.497 0-.844-.347-.348-.347-.348-.844V6.563q0-.62.33-1.19.328-.571.874-.881L11.07.285q.248-.136.534-.21.285-.075.57-.075.211 0 .38.031.166.031.364.093l6.888 1.899q.384.11.7.329.317.217.547.52.23.305.353.67.125.367.125.764zm-1.588 15.363V4.306q0-.273-.16-.478-.163-.204-.423-.28l-3.388-.93q-.397-.111-.794-.23-.397-.117-.794-.216v19.68l4.976-1.427q.26-.074.422-.28.161-.204.161-.477z" />
+                              </svg>
+                            </a>
+                          </Link>
+                          <Link href={"data:text/calendar," + eventLink()}>
+                            <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"
+                              download={props.eventType.title + ".ics"}>
+                              <svg
+                                version="1.1"
+                                fill="currentColor"
+                                xmlns="http://www.w3.org/2000/svg"
+                                viewBox="0 0 1000 1000"
+                                className="mr-1 -mt-1 inline-block h-4 w-4">
+                                <title>{t("other")}</title>
+                                <path d="M971.3,154.9c0-34.7-28.2-62.9-62.9-62.9H611.7c-1.3,0-2.6,0.1-3.9,0.2V10L28.7,87.3v823.4L607.8,990v-84.6c1.3,0.1,2.6,0.2,3.9,0.2h296.7c34.7,0,62.9-28.2,62.9-62.9V154.9z M607.8,636.1h44.6v-50.6h-44.6v-21.9h44.6v-50.6h-44.6v-92h277.9v230.2c0,3.8-3.1,7-7,7H607.8V636.1z M117.9,644.7l-50.6-2.4V397.5l50.6-2.2V644.7z M288.6,607.3c17.6,0.6,37.3-2.8,49.1-7.2l9.1,48c-11,5.1-35.6,9.9-66.9,8.3c-85.4-4.3-127.5-60.7-127.5-132.6c0-86.2,57.8-136.7,133.2-140.1c30.3-1.3,53.7,4,64.3,9.2l-12.2,48.9c-12.1-4.9-28.8-9.2-49.5-8.6c-45.3,1.2-79.5,30.1-79.5,87.4C208.8,572.2,237.8,605.7,288.6,607.3z M455.5,665.2c-32.4-1.6-63.7-11.3-79.1-20.5l12.6-50.7c16.8,9.1,42.9,18.5,70.4,19.4c30.1,1,46.3-10.7,46.3-29.3c0-17.8-14-28.1-48.8-40.6c-46.9-16.4-76.8-41.7-76.8-81.5c0-46.6,39.3-84.1,106.8-87.1c33.3-1.5,58.3,4.2,76.5,11.2l-15.4,53.3c-12.1-5.3-33.5-12.8-62.3-12c-28.3,0.8-41.9,13.6-41.9,28.1c0,17.8,16.1,25.5,53.6,39c52.9,18.5,78.4,45.3,78.4,86.4C575.6,629.7,536.2,669.2,455.5,665.2z M935.3,842.7c0,14.9-12.1,27-27,27H611.7c-1.3,0-2.6-0.2-3.9-0.4V686.2h270.9c19.2,0,34.9-15.6,34.9-34.9V398.4c0-19.2-15.6-34.9-34.9-34.9h-47.1v-32.3H808v32.3h-44.8v-32.3h-22.7v32.3h-43.3v-32.3h-22.7v32.3H628v-32.3h-20.2v-203c1.31.2,2.6-0.4,3.9-0.4h296.7c14.9,0,27,12.1,27,27L935.3,842.7L935.3,842.7z" />
+                              </svg>
+                            </a>
+                          </Link>
+                        </div>
                       </div>
-                    </div>
-                  )}
-                  {!(userIsOwner || props.hideBranding) && (
-                    <div className="border-bookinglightest text-booking-lighter pt-4 text-center text-xs dark:border-gray-900 dark:text-white">
-                      <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
+                    )}
+                    {!(userIsOwner || props.hideBranding) && (
+                      <div className="border-bookinglightest text-booking-lighter pt-4 text-center text-xs dark:border-gray-900 dark:text-white">
+                        <a href="https://cal.com/signup">{t("create_booking_link_with_calcom")}</a>
 
-                      <form
-                        onSubmit={(e) => {
-                          e.preventDefault();
-                          router.push(`https://cal.com/signup?email=` + (e as any).target.email.value);
-                        }}
-                        className="mt-4 flex">
-                        <EmailInput
-                          name="email"
-                          id="email"
-                          defaultValue={router.query.email}
-                          className="focus:border-brand border-bookinglightest mt-0 block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
-                          placeholder="rick.astley@cal.com"
-                        />
-                        <Button size="lg" type="submit" className="min-w-max" color="primary">
-                          {t("try_for_free")}
-                        </Button>
-                      </form>
-                    </div>
-                  )}
-                  {userIsOwner && !isEmbed && (
-                    <div className="mt-4">
-                      <Link href="/bookings">
-                        <a className="flex items-center text-black dark:text-white">
-                          <ArrowLeftIcon className="mr-1 h-4 w-4" /> {t("back_to_bookings")}
-                        </a>
-                      </Link>
-                    </div>
-                  )}
+                        <form
+                          onSubmit={(e) => {
+                            e.preventDefault();
+                            router.push(`https://cal.com/signup?email=` + (e as any).target.email.value);
+                          }}
+                          className="mt-4 flex">
+                          <EmailInput
+                            name="email"
+                            id="email"
+                            defaultValue={router.query.email}
+                            className="focus:border-brand border-bookinglightest mt-0 block w-full rounded-sm border-gray-300 shadow-sm focus:ring-black dark:border-gray-900 dark:bg-black dark:text-white sm:text-sm"
+                            placeholder="rick.astley@cal.com"
+                          />
+                          <Button size="lg" type="submit" className="min-w-max" color="primary">
+                            {t("try_for_free")}
+                          </Button>
+                        </form>
+                      </div>
+                    )}
+                    {userIsOwner && !isEmbed && (
+                      <div className="mt-4">
+                        <Link href="/bookings">
+                          <a className="flex items-center text-black dark:text-white">
+                            <ArrowLeftIcon className="mr-1 h-4 w-4" /> {t("back_to_bookings")}
+                          </a>
+                        </Link>
+                      </div>
+                    )}
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </main>
-      </div>
+          </main>
+        </div>
+        {/* SPACE BOOKING APP */}
+        {props.userHasSpaceBooking && (
+          <SpaceBookingSuccessPage
+            open={props.userHasSpaceBooking}
+            what={`
+            ${needsConfirmation ? t("submitted") : `${t("meeting_is_scheduled")}.`}
+               ${getTitle()} ${t("what")}: ${eventName}`}
+            where={`${t("where")}: ${
+              location ? (location?.startsWith("http") ? { location } : location) : "Far far a way galaxy"
+            }`}
+            when={`${t("when")}: ${props.recurringBookings ? t("starting") : ""} ${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
   );
 }
 
+type RecurringBookingsProps = {
+  isReschedule: boolean;
+  eventType: SuccessProps["eventType"];
+  recurringBookings: SuccessProps["recurringBookings"];
+  date: dayjs.Dayjs;
+  is24h: boolean;
+};
+
+function RecurringBookings({
+  isReschedule = false,
+  eventType,
+  recurringBookings,
+  date,
+  is24h,
+}: RecurringBookingsProps) {
+  const [moreEventsVisible, setMoreEventsVisible] = useState(false);
+  const { t } = useLocale();
+  return !isReschedule && recurringBookings ? (
+    <>
+      {eventType.recurringEvent?.count &&
+        recurringBookings.slice(0, 4).map((dateStr, idx) => (
+          <div key={idx} className="mb-2">
+            {dayjs(dateStr).format("MMMM DD, YYYY")}
+            <br />
+            {dayjs(dateStr).format("LT")} - {dayjs(dateStr).add(eventType.length, "m").format("LT")}{" "}
+            <span className="text-bookinglight">
+              ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
+            </span>
+          </div>
+        ))}
+      {recurringBookings.length > 4 && (
+        <Collapsible open={moreEventsVisible} onOpenChange={() => setMoreEventsVisible(!moreEventsVisible)}>
+          <CollapsibleTrigger
+            type="button"
+            className={classNames("flex w-full", moreEventsVisible ? "hidden" : "")}>
+            {t("plus_more", { count: recurringBookings.length - 4 })}
+          </CollapsibleTrigger>
+          <CollapsibleContent>
+            {eventType.recurringEvent?.count &&
+              recurringBookings.slice(4).map((dateStr, idx) => (
+                <div key={idx} className="mb-2">
+                  {dayjs(dateStr).format("MMMM DD, YYYY")}
+                  <br />
+                  {dayjs(dateStr).format("LT")} - {dayjs(dateStr).add(eventType.length, "m").format("LT")}{" "}
+                  <span className="text-bookinglight">
+                    ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
+                  </span>
+                </div>
+              ))}
+          </CollapsibleContent>
+        </Collapsible>
+      )}
+    </>
+  ) : !eventType.recurringEvent.freq ? (
+    <>
+      {date.format("MMMM DD, YYYY")}
+      <br />
+      {date.format("LT")} - {date.add(eventType.length, "m").format("LT")}{" "}
+      <span className="text-bookinglight">
+        ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
+      </span>
+    </>
+  ) : null;
+}
+
 const getEventTypesFromDB = async (typeId: number) => {
   return await prisma.eventType.findUnique({
     where: {
@@ -453,6 +602,7 @@ const getEventTypesFromDB = async (typeId: number) => {
       description: true,
       length: true,
       eventName: true,
+      recurringEvent: true,
       requiresConfirmation: true,
       userId: true,
       successRedirectUrl: true,
@@ -483,8 +633,10 @@ const getEventTypesFromDB = async (typeId: number) => {
 export async function getServerSideProps(context: GetServerSidePropsContext) {
   const ssr = await ssrInit(context);
   const typeId = parseInt(asStringOrNull(context.query.type) ?? "");
+  const recurringEventIdQuery = asStringOrNull(context.query.recur);
   const typeSlug = asStringOrNull(context.query.eventSlug) ?? "15min";
   const dynamicEventName = asStringOrNull(context.query.eventName) ?? "";
+  const bookingId = parseInt(context.query.bookingId as string);
 
   if (isNaN(typeId)) {
     return {
@@ -492,18 +644,33 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     };
   }
 
-  const eventType = !typeId ? getDefaultEvent(typeSlug) : await getEventTypesFromDB(typeId);
+  let eventTypeRaw = !typeId ? getDefaultEvent(typeSlug) : await getEventTypesFromDB(typeId);
 
-  if (!eventType) {
+  if (!eventTypeRaw) {
     return {
       notFound: true,
     };
   }
-  if (!eventType.users.length && eventType.userId) {
+  let spaceBookingAvailable = false;
+
+  let userHasSpaceBooking = false;
+  if (eventTypeRaw.users[0] && eventTypeRaw.users[0].id) {
+    const credential = await prisma.credential.findFirst({
+      where: {
+        type: "spacebooking_other",
+        userId: eventTypeRaw.users[0].id,
+      },
+    });
+    if (credential && credential.type === "spacebooking_other") {
+      userHasSpaceBooking = true;
+    }
+  }
+
+  if (!eventTypeRaw.users.length && eventTypeRaw.userId) {
     // TODO we should add `user User` relation on `EventType` so this extra query isn't needed
     const user = await prisma.user.findUnique({
       where: {
-        id: eventType.userId,
+        id: eventTypeRaw.userId,
       },
       select: {
         id: true,
@@ -518,17 +685,20 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       },
     });
     if (user) {
-      eventType.users.push(user);
+      eventTypeRaw.users.push(user as any);
     }
   }
 
-  if (!eventType.users.length) {
+  if (!eventTypeRaw.users.length) {
     return {
       notFound: true,
     };
   }
 
-  // if (!typeId) eventType["eventName"] = getDynamicEventName(users, typeSlug);
+  const eventType = {
+    ...eventTypeRaw,
+    recurringEvent: (eventTypeRaw.recurringEvent || {}) as RecurringEvent,
+  };
 
   const profile = {
     name: eventType.team?.name || eventType.users[0]?.name || null,
@@ -538,13 +708,49 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
     darkBrandColor: eventType.team ? null : eventType.users[0].darkBrandColor || null,
   };
 
+  const bookingInfo = await prisma.booking.findUnique({
+    where: {
+      id: bookingId,
+    },
+    select: {
+      description: true,
+      user: {
+        select: {
+          name: true,
+          email: true,
+        },
+      },
+      attendees: {
+        select: {
+          name: true,
+          email: true,
+        },
+      },
+    },
+  });
+  let recurringBookings = null;
+  if (recurringEventIdQuery) {
+    // We need to get the dates for the bookings to be able to show them in the UI
+    recurringBookings = await prisma.booking.findMany({
+      where: {
+        recurringEventId: recurringEventIdQuery,
+      },
+      select: {
+        startTime: true,
+      },
+    });
+  }
+
   return {
     props: {
       hideBranding: eventType.team ? eventType.team.hideBranding : isBrandingHidden(eventType.users[0]),
       profile,
       eventType,
+      recurringBookings: recurringBookings ? recurringBookings.map((obj) => obj.startTime.toString()) : null,
       trpcState: ssr.dehydrate(),
       dynamicEventName,
+      userHasSpaceBooking,
+      bookingInfo,
     },
   };
 }

apps/web/pages/team/[slug].tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import React, { useEffect } from "react";
 
 import { useIsEmbed } from "@calcom/embed-core";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
@@ -13,7 +14,6 @@ import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import { useLocale } from "@lib/hooks/useLocale";
 import useTheme from "@lib/hooks/useTheme";
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
-import { defaultAvatarSrc } from "@lib/profile";
 import { getTeamWithMembers } from "@lib/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -68,7 +68,7 @@ function TeamPage({ team }: TeamPageProps) {
                   size={10}
                   items={type.users.map((user) => ({
                     alt: user.name || "",
-                    image: user.avatar || "",
+                    image: WEBSITE_URL + "/" + user.username + "/avatar.png" || "",
                   }))}
                 />
               </div>
@@ -86,7 +86,7 @@ function TeamPage({ team }: TeamPageProps) {
       <div>
         <Theme />
         <HeadSeo title={teamName} description={teamName} />
-        <div className="rounded-md bg-white px-4 pt-24 pb-12 dark:bg-gray-800 md:border">
+        <div className="rounded-md bg-white px-4 pt-24 pb-12 dark:bg-gray-900">
           <div className="max-w-96 mx-auto mb-8 text-center">
             <Avatar
               alt={teamName}
@@ -104,7 +104,6 @@ function TeamPage({ team }: TeamPageProps) {
           {!showMembers.isOn && team.eventTypes.length > 0 && (
             <div className="mx-auto max-w-3xl">
               {eventTypes}
-
               <div className="relative mt-12">
                 <div className="absolute inset-0 flex items-center" aria-hidden="true">
                   <div className="w-full border-t border-gray-200 dark:border-gray-700" />
@@ -148,7 +147,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     ...type,
     users: type.users.map((user) => ({
       ...user,
-      avatar: user.avatar || defaultAvatarSrc({ email: user.email || "" }),
+      avatar: WEBSITE_URL + "/" + user.username + "/avatar.png",
     })),
   }));
 

apps/web/pages/team/[slug]/[type].tsx

@@ -2,6 +2,8 @@ import { UserPlan } from "@prisma/client";
 import { GetServerSidePropsContext } from "next";
 import { JSONObject } from "superjson/dist/types";
 
+import { RecurringEvent } from "@calcom/types/Calendar";
+
 import { asStringOrNull } from "@lib/asStringOrNull";
 import { getWorkingHours } from "@lib/availability";
 import getBooking, { GetBookingType } from "@lib/getBooking";
@@ -68,6 +70,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
           minimumBookingNotice: true,
           beforeEventBuffer: true,
           afterEventBuffer: true,
+          recurringEvent: true,
           price: true,
           currency: true,
           timeZone: true,
@@ -107,6 +110,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     metadata: (eventType.metadata || {}) as JSONObject,
     periodStartDate: eventType.periodStartDate?.toString() ?? null,
     periodEndDate: eventType.periodEndDate?.toString() ?? null,
+    recurringEvent: (eventType.recurringEvent || {}) as RecurringEvent,
   });
 
   eventTypeObject.availability = [];