v1.7.0

* Extracted UI related logic on the DatePicker, stripped out all logic

* wip

* fixed small regression due to merge

* Fix alignment of the chevrons

* Added isToday dot, added onMonthChange so we can fetch this month slots

* Added includedDates to inverse excludedDates

* removed trpcState

* Improvements to the state

* All params are now dynamic

* This builds the flat map so not all paths block on every new build

* Added requiresConfirmation

* Correctly take into account getFilteredTimes to make the calendar function

* Rewritten team availability, seems to work

* Circumvent i18n flicker by showing the loader instead

* 'You can remove this code. Its not being used now' - Hariom

* Nailed a persistent little bug, new Date() caused the current day to flicker on and off

* TS fixes

* Fix some eventType details in AvailableTimes

* '5 / 6 Seats Available' instead of '6 / Seats Available'

* More type fixes

* Removed unrelated merge artifact

* Use WEBAPP_URL instead of hardcoded

* Next round of TS fixes

* I believe this was mistyped

* Temporarily disabled rescheduling 'this is when you originally scheduled', so removed dep

* Sorting some dead code

* This page has a lot of red, not all related to this PR

* A PR to your PR (#3067)

* Cleanup

* Cleanup

* Uses zod to parse params

* Type fixes

* Fixes ISR

* E2E fixes

* Disabled dynamic bookings until post v1.7

* More test fixes

* Fixed border position (transparent border) to prevent dot from jumping - and possibly fix spacing

* Disabled style nitpicks

* Delete useSlots.ts

Removed early design artifact

* Unlock DatePicker locale

* Adds mini spinner to DatePicker

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: zomars <zomars@me.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

@@ -1,60 +1,100 @@
+# ********** INDEX **********
+#
+# - LICENSE
+# - DATABASE
+# - SHARED
+#   - NEXTAUTH
+# - E-MAIL SETTINGS
+
+# - LICENSE *************************************************************************************************
 # Set this value to 'agree' to accept our license:
 # LICENSE: https://github.com/calendso/calendso/blob/main/LICENSE
 #
 # Summary of terms:
 # - The codebase has to stay open source, whether it was modified or not
 # - You can not repackage or sell the codebase
-# - Acquire a commercial license to remove these terms by emailing: license@cal.com
+# - Acquire a commercial license to remove these terms by visiting: cal.com/sales
 NEXT_PUBLIC_LICENSE_CONSENT=''
+# To enable enterprise-only features, fill your license key in here.
+# @see https://console.cal.com
+CALCOM_LICENSE_KEY=
+# ***********************************************************************************************************
 
-# DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>/<db-name>'
-DATABASE_URL="postgresql://postgres:@localhost:5450/calendso"
+# - DATABASE ************************************************************************************************
+# ⚠️ ⚠️ ⚠️ DATABASE_URL got moved to `packages/prisma/.env.example` ⚠️ ⚠️ ⚠️
+# ***********************************************************************************************************
 
-# Needed to enable Google Calendar integrationa 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`
-GOOGLE_LOGIN_ENABLED=false
-
-BASE_URL='http://localhost:3000'
-NEXT_PUBLIC_APP_URL='http://localhost:3000'
-
-JWT_SECRET='secret'
-# This is used so we can bypass emails in auth flows for E2E testing
-PLAYWRIGHT_SECRET=
+# - SHARED **************************************************************************************************
+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_CONSOLE_URL='http://localhost:3004'
+NEXT_PUBLIC_EMBED_LIB_URL='http://localhost:3000/embed/embed.js'
 
 # To enable SAML login, set both these variables
-# @see https://github.com/calendso/calendso/tree/main/ee#setting-up-saml-login
+# @see https://github.com/calcom/cal.com/tree/main/packages/ee#setting-up-saml-login
 # SAML_DATABASE_URL="postgresql://postgres:@localhost:5450/cal-saml"
+SAML_DATABASE_URL=
 # SAML_ADMINS='pro@example.com'
+SAML_ADMINS=
+# If you use Heroku to deploy Postgres (or use self-signed certs for Postgres) then uncomment the follow line.
+# @see https://devcenter.heroku.com/articles/connecting-heroku-postgres#connecting-in-node-js
+# PGSSLMODE='no-verify'
+PGSSLMODE=
 
+#   - NEXTAUTH
 # @see: https://github.com/calendso/calendso/issues/263
-# Required for Vercel hosting - set NEXTAUTH_URL to equal your BASE_URL
+# @see: https://next-auth.js.org/configuration/options#nextauth_url
+# Required for Vercel hosting - set NEXTAUTH_URL to equal your NEXT_PUBLIC_WEBAPP_URL
 # NEXTAUTH_URL='http://localhost:3000'
+NEXTAUTH_URL=
+# @see: https://next-auth.js.org/configuration/options#nextauth_secret
+# You can use: `openssl rand -base64 32` to generate one
+NEXTAUTH_SECRET=
+# Used for cross-domain cookie authentication
+NEXTAUTH_COOKIE_DOMAIN=.example.com
 
-# Remove this var if you don't want Cal to collect anonymous usage
-NEXT_PUBLIC_TELEMETRY_KEY=js.2pvs2bbpqq1zxna97wcml.oi2jzirnbj1ev4tc57c5r
+# Set this to '1' if you don't want Cal to collect anonymous usage
+CALCOM_TELEMETRY_DISABLED=
 
-# Used for the Office 365 / Outlook.com Calendar integration
-MS_GRAPH_CLIENT_ID=
-MS_GRAPH_CLIENT_SECRET=
+# ApiKey for cronjobs
+CRON_API_KEY='0cc0e6c35519bba620c9360cfe3e68d0'
 
-# Used for the Zoom integration
-ZOOM_CLIENT_ID=
-ZOOM_CLIENT_SECRET=
+# Application Key for symmetric encryption and decryption
+# must be 32 bytes for AES256 encryption algorithm
+# You can use: `openssl rand -base64 24` to generate one
+CALENDSO_ENCRYPTION_KEY=
 
-#Used for the Daily integration
-DAILY_API_KEY=
-DAILY_SCALE_PLAN=''
+# Intercom Config
+NEXT_PUBLIC_INTERCOM_APP_ID=
 
-# E-mail settings
+# Zendesk Config
+NEXT_PUBLIC_ZENDESK_KEY=
 
+# Help Scout Config
+NEXT_PUBLIC_HELPSCOUT_KEY=
+
+# Inbox to send user feedback
+SEND_FEEDBACK_EMAIL=
+
+# This is used so we can bypass emails in auth flows for E2E testing
+# Set it to "1" if you need to run E2E tests locally
+NEXT_PUBLIC_IS_E2E=
+
+# Used for internal billing system
+NEXT_PUBLIC_STRIPE_PRO_PLAN_PRODUCT=
+NEXT_PUBLIC_STRIPE_PRO_PLAN_PRICE=
+NEXT_PUBLIC_STRIPE_PREMIUM_PLAN_PRICE=
+NEXT_PUBLIC_STRIPE_FREE_PLAN_PRICE=
+STRIPE_WEBHOOK_SECRET=
+
+# Use for internal Public API Keys and optional
+API_KEY_PREFIX=cal_
+# ***********************************************************************************************************
+
+# - E-MAIL SETTINGS *****************************************************************************************
 # Cal uses nodemailer (@see https://nodemailer.com/about/) to provide email sending. As such we are trying to
 # allow access to the nodemailer transports from the .env file. E-mail templates are accessible within lib/emails/
-
 # Configures the global From: header whilst sending emails.
 EMAIL_FROM='notifications@yourselfhostedcal.com'
 
@@ -65,20 +105,12 @@ EMAIL_SERVER_PORT=587
 EMAIL_SERVER_USER='<office365_emailAddress>'
 # Keep in mind that if you have 2FA enabled, you will need to provision an App Password.
 EMAIL_SERVER_PASSWORD='<office365_password>'
-# ApiKey for cronjobs
-CRON_API_KEY='0cc0e6c35519bba620c9360cfe3e68d0'
 
-# Stripe Config
-NEXT_PUBLIC_STRIPE_PUBLIC_KEY= # pk_test_...
-STRIPE_PRIVATE_KEY=            # sk_test_...
-STRIPE_CLIENT_ID=              # ca_...
-STRIPE_WEBHOOK_SECRET=         # whsec_...
-PAYMENT_FEE_PERCENTAGE=0.005   # Take 0.5% commission
-PAYMENT_FEE_FIXED=10           # Take 10 additional cents commission
-
-# Application Key for symmetric encryption and decryption
-# must be 32 bytes for AES256 encryption algorithm
-CALENDSO_ENCRYPTION_KEY=
-
-# Intercom Config
-NEXT_PUBLIC_INTERCOM_APP_ID=
+# The following configuration for Gmail has been verified to work.
+# EMAIL_SERVER_HOST='smtp.gmail.com'
+# EMAIL_SERVER_PORT=465
+# EMAIL_SERVER_USER='<gmail_emailAddress>'
+## You will need to provision an App Password.
+## @see https://support.google.com/accounts/answer/185833
+# EMAIL_SERVER_PASSWORD='<gmail_app_password>'
+# **********************************************************************************************************

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require("./packages/config/eslint-preset");

.eslintrc.json

@@ -1,48 +0,0 @@
-{
-  "root": true,
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2018,
-    "sourceType": "module",
-    "modules": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended"
-  ],
-  "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks"],
-  "rules": {
-    "prettier/prettier": ["error"],
-    "@typescript-eslint/no-unused-vars": "error",
-    "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off",
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off"
-  },
-  "overrides": [
-    {
-      "files": ["playwright/**/*.{js,jsx,tsx,ts}"],
-      "rules": {
-        "no-undef": "off",
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-implicit-any": "off"
-      }
-    }
-  ],
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}

.github/ISSUE_TEMPLATE/bug_report.md

@@ -22,6 +22,6 @@ Any other relevant information. For example, why do you consider this a bug and
 
 ### Technical details
 
-- Browser version: You can use https://www.whatsmybrowser.org/ to find this out.
+- Browser version, screen recording, console logs, network requests: You can make a recording with [Bird Eats Bug](https://birdeatsbug.com/).
 - Node.js version
 - Anything else that you think could be an issue.

.github/ISSUE_TEMPLATE/config.yml

@@ -2,4 +2,4 @@ blank_issues_enabled: false
 contact_links:
   - name: Questions
     url: https://cal.com/slack
-    about: Ask a general question about the project on our Slack workspace
+    about: Ask a general question about the project on our Slack workspace

.github/PULL_REQUEST_TEMPLATE.md

@@ -4,6 +4,12 @@
 
 Fixes # (issue)
 
+<!-- Please provide a loom video for visual changes to speed up reviews
+ Loom Video: https://www.loom.com/
+-->
+
+**Environment**: Staging(main branch) / Production
+
 ## Type of change
 
 <!-- Please delete options that are not relevant. -->
@@ -20,12 +26,15 @@ Fixes # (issue)
 - [ ] Test A
 - [ ] Test B
 
-## Checklist:
+## Checklist
 
-- [ ] My code follows the style guidelines of this project
-- [ ] I have performed a self-review of my own code and corrected any misspellings
-- [ ] I have commented my code, particularly in hard-to-understand areas
-- [ ] I have made corresponding changes to the documentation
-- [ ] My changes generate no new warnings
-- [ ] I have added tests that prove my fix is effective or that my feature works
-- [ ] New and existing unit tests pass locally with my changes
+<!-- Please remove all the irrelevant bullets to your PR -->
+
+- I haven't read the [contributing guide](https://github.com/calcom/cal.com/blob/main/CONTRIBUTING.md)
+- My code doesn't follow the style guidelines of this project
+- I haven't performed a self-review of my own code and corrected any misspellings
+- I haven't commented my code, particularly in hard-to-understand areas
+- I haven't checked if my PR needs changes to the documentation
+- I haven't checked if my changes generate no new warnings
+- I haven't added tests that prove my fix is effective or that my feature works
+- I haven't checked if new and existing unit tests pass locally with my changes

.github/workflows/check-types.yml

@@ -1,15 +1,14 @@
 name: Check types
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
 jobs:
   types:
     name: Check types
-
     strategy:
       matrix:
-        node: ["14.x"]
+        node: ["16.x"]
         os: [ubuntu-latest]
     runs-on: ${{ matrix.os }}
 
@@ -17,14 +16,13 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 2
 
       - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-
-      - name: Install deps
-        uses: bahmutov/npm-install@v1
-
-      - run: yarn check-changed-files
+          cache: "yarn"
+      - run: yarn --frozen-lockfile
+      - run: yarn type-check

.github/workflows/crowdin.yml

@@ -15,7 +15,7 @@ jobs:
       uses: actions/checkout@v2
 
     - name: crowdin action
-      uses: crowdin/github-action@1.4.2
+      uses: crowdin/github-action@1.4.9
       with:
         upload_translations: true
         download_translations: true

.github/workflows/e2e-embed.yml

@@ -0,0 +1,108 @@
+name: E2E test
+on:
+  pull_request_target: # So we can test on forks
+    branches:
+      - main
+    # Embed e2e - tests verify booking flow which is applicable to non-embed case also. So, don't ignore apps/web changes.
+    paths-ignore:
+      - apps/api/**
+      - apps/console/**
+      - apps/docs/**
+      - apps/swagger/**
+      - apps/website/**
+      - apps/web/public/**
+      - tests/**
+      - playwright/**
+jobs:
+  test:
+    timeout-minutes: 20
+    name: Embed and booking flow(for non-embed as well)
+    strategy:
+      matrix:
+        node: ["16.x"]
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
+
+    env:
+      DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
+      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
+      NEXTAUTH_SECRET: secret
+      GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+      GOOGLE_LOGIN_ENABLED: true
+      # CRON_API_KEY: xxx
+      CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+      NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+      STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+      STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+      STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+      PAYMENT_FEE_PERCENTAGE: 0.005
+      PAYMENT_FEE_FIXED: 10
+      SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
+      SAML_ADMINS: pro@example.com
+      NEXTAUTH_URL: http://localhost:3000/api/auth
+      NEXT_PUBLIC_IS_E2E: 1
+      # EMAIL_FROM: e2e@cal.com
+      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
+      # MS_GRAPH_CLIENT_ID: xxx
+      # MS_GRAPH_CLIENT_SECRET: xxx
+      # ZOOM_CLIENT_ID: xxx
+      # ZOOM_CLIENT_SECRET: xxx
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+    services:
+      postgres:
+        image: postgres:12.1
+        env:
+          POSTGRES_USER: postgres
+          POSTGRES_DB: calendso
+        ports:
+          - 5432:5432
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
+          fetch-depth: 2
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: "yarn"
+
+      - name: Cache playwright binaries
+        uses: actions/cache@v2
+        id: playwright-cache
+        with:
+          path: |
+            ~/Library/Caches/ms-playwright
+            ~/.cache/ms-playwright
+            ${{ github.workspace }}/node_modules/playwright
+          key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: cache-playwright-
+      - run: yarn --frozen-lockfile
+      - name: Install playwright deps
+        # if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: yarn playwright install --with-deps
+      - run: yarn embed-tests-prepare
+      - run: yarn workspace @calcom/embed-core embed-tests-update-snapshots:ci
+      - run: yarn workspace @calcom/embed-react embed-tests-update-snapshots:ci
+
+      - name: Upload embed-core results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results-core
+          path: packages/embeds/embed-core/playwright/results
+
+      - name: Upload embed-react results
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: test-results-react
+          path: packages/embeds/embed-react/playwright/results

.github/workflows/e2e.yml

@@ -1,17 +1,25 @@
 name: E2E test
 on:
-  pull_request_target:
+  pull_request_target: # So we can test on forks
     branches:
       - main
+    paths-ignore:
+      - apps/web/public/static/locales/**
 jobs:
   test:
-    timeout-minutes: 10
-    name: ${{ matrix.node }} and ${{ matrix.os }}
+    timeout-minutes: 20
+    name: Testing ${{ matrix.node }} and ${{ matrix.os }}
+    strategy:
+      matrix:
+        node: ["16.x"]
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
+
     env:
       DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-      BASE_URL: http://localhost:3000
-      JWT_SECRET: secret
-      PLAYWRIGHT_SECRET: ${{ secrets.CI_PLAYWRIGHT_SECRET }}
+      NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
+      NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
+      NEXTAUTH_SECRET: secret
       GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
       GOOGLE_LOGIN_ENABLED: true
       # CRON_API_KEY: xxx
@@ -24,15 +32,19 @@ jobs:
       PAYMENT_FEE_FIXED: 10
       SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
       SAML_ADMINS: pro@example.com
-      # NEXTAUTH_URL: xxx
-      # EMAIL_FROM: xxx
-      # EMAIL_SERVER_HOST: xxx
-      # EMAIL_SERVER_PORT: xxx
-      # EMAIL_SERVER_USER: xxx
+      NEXTAUTH_URL: http://localhost:3000/api/auth
+      NEXT_PUBLIC_IS_E2E: 1
+      # EMAIL_FROM: e2e@cal.com
+      # EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
+      # EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
+      # EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
+      # EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
       # MS_GRAPH_CLIENT_ID: xxx
       # MS_GRAPH_CLIENT_SECRET: xxx
       # ZOOM_CLIENT_ID: xxx
       # ZOOM_CLIENT_SECRET: xxx
+      TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+      TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
     services:
       postgres:
         image: postgres:12.1
@@ -41,40 +53,19 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        node: ["14.x"]
-        os: [ubuntu-latest]
 
     steps:
       - name: Checkout repo
         uses: actions/checkout@v2
         with:
-          ref: ${{ github.event.pull_request.head.sha }}
+          ref: ${{ github.event.pull_request.head.sha }} # So we can test on forks
           fetch-depth: 2
-
+      - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
-
-      - name: Install deps
-        uses: bahmutov/npm-install@v1
-      - name: Next.js cache
-        uses: actions/cache@v2
-        with:
-          path: ${{ github.workspace }}/.next/cache
-          # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
-
-      - run: yarn prisma migrate deploy
-      - run: yarn db-seed
-      - run: yarn test
-      - run: yarn build
+          cache: "yarn"
 
       - name: Cache playwright binaries
         uses: actions/cache@v2
@@ -83,20 +74,18 @@ jobs:
           path: |
             ~/Library/Caches/ms-playwright
             ~/.cache/ms-playwright
-            **/node_modules/playwright
+            ${{ github.workspace }}/node_modules/playwright
           key: cache-playwright-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: cache-playwright-
+      - run: yarn --frozen-lockfile
       - name: Install playwright deps
         if: steps.playwright-cache.outputs.cache-hit != 'true'
         run: yarn playwright install --with-deps
+      - run: yarn test-e2e
 
-      - run: yarn test-playwright
-
-      - name: Upload videos
+      - name: Upload test results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: videos
-          path: |
-            playwright/screenshots
-            playwright/videos
-            playwright/results
+          name: test-results
+          path: test-results

.github/workflows/lint.yml

@@ -1,24 +1,49 @@
 name: Lint
 on:
-  pull_request:
+  pull_request_target:
     branches:
       - main
 jobs:
   lint:
-    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ["16.x"]
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
 
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout repo
+        uses: actions/checkout@v2
         with:
-          fetch-depth: 0
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 2
 
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - name: Use Node ${{ matrix.node }}
+        uses: actions/setup-node@v3
         with:
-          version: 14.x
+          node-version: ${{ matrix.node }}
+          cache: "yarn"
 
       - name: Install deps
-        uses: bahmutov/npm-install@v1
+        if: steps.yarn-cache.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile
 
       - name: Lint
-        run: yarn lint
+        run: yarn lint:report
+        continue-on-error: true
+
+      - name: Merge lint reports
+        run: jq -s '[.[]]|flatten' lint-results/*.json &> lint-results/eslint_report.json
+
+      - name: Annotate Code Linting Results
+        uses: ataylorme/eslint-annotate-action@1.2.0
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          report-json: "lint-results/eslint_report.json"
+
+      - name: Upload ESLint report
+        if: ${{ always() }}
+        uses: actions/upload-artifact@v2
+        with:
+          name: lint-results
+          path: lint-results

.github/workflows/submodule-sync.yml

@@ -0,0 +1,21 @@
+name: Submodule Sync
+on:
+  schedule:
+    - cron: "15 */4 * * *"
+  workflow_dispatch: ~
+
+jobs:
+  submodule-sync:
+    name: Submodule update
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v2
+      - name: run action
+        uses: releasehub-com/github-action-create-pr-parent-submodule@v1
+        with:
+          github_token: ${{ secrets.GH_ACCESS_TOKEN }}
+          parent_repository: "calcom/cal.com"
+          checkout_branch: "main"
+          pr_against_branch: "main"
+          owner: "calcom"

.gitignore

@@ -4,25 +4,23 @@
 .env
 
 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js
-/.yarn
 
 # testing
-/coverage
-.nyc_output
-playwright/videos
-playwright/screenshots
-playwright/artifacts
-playwright/results
+coverage
+/test-results/
+**/playwright/videos
+**/playwright/screenshots
+**/playwright/artifacts
+**/playwright/results
+**/playwright/reports/*
 
 # next.js
-/.next/
-/out/
-
-# production
-/build
+.next/
+out/
+build
 
 # misc
 .DS_Store
@@ -32,6 +30,7 @@ playwright/results
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
 .env.local
@@ -39,6 +38,8 @@ yarn-error.log*
 .env.test.local
 .env.production.local
 .env.*
+!.env.example
+!.env.appStore.example
 
 # vercel
 .vercel
@@ -57,5 +58,17 @@ yarn-error.log*
 # Local History for Visual Studio Code
 .history/
 
-# Typescript 
+# Typescript
 tsconfig.tsbuildinfo
+
+# turbo
+.turbo
+
+# Prisma-Zod
+packages/prisma/zod/*.ts
+
+# Builds
+dist
+
+# Linting
+lint-results

.gitmodules

@@ -0,0 +1,12 @@
+[submodule "apps/console"]
+	path = apps/console
+	url = https://github.com/calcom/console.git
+	branch = main
+[submodule "apps/api"]
+	path = apps/api
+	url = https://github.com/calcom/api.git
+	branch = main
+[submodule "apps/website"]
+	path = apps/website
+	url = https://github.com/calcom/website.git
+	branch = main

.husky/post-receive

@@ -0,0 +1,6 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+echo "Updating submodules recursively"
+pwd
+git submodule update --init --recursive

.kodiak.toml

@@ -4,5 +4,5 @@ version = 1
 autoupdate_label = "♻️ autoupdate"
 
 [approve]
-auto_approve_usernames = ["dependabot", "PeerRich", "baileypumfleet"]
+auto_approve_usernames = ["dependabot"]
 

.nvmrc

@@ -1 +1 @@
-14.17
+v16

.prettierignore

@@ -13,3 +13,4 @@ public
 .prettierignore
 .DS_Store
 .eslintignore
+packages/prisma/zod

.prettierrc.js

@@ -1,12 +1 @@
-module.exports = {
-  bracketSpacing: true,
-  bracketSameLine: true,
-  singleQuote: false,
-  jsxSingleQuote: false,
-  trailingComma: "es5",
-  semi: true,
-  printWidth: 110,
-  arrowParens: "always",
-  importOrder: ["^@ee/(.*)$", "^@lib/(.*)$", "^@components/(.*)$", "^@(server|trpc)/(.*)$", "^[./]"],
-  importOrderSeparation: true,
-};
+module.exports = require("./packages/config/prettier-preset");

.vercelignore

@@ -1 +0,0 @@
-.github

.vscode/extensions.json

@@ -1,10 +1,13 @@
 {
   "recommendations": [
+    "DavidAnson.vscode-markdownlint", // markdown linting
     "yzhang.markdown-all-in-one", // nicer markdown support
     "esbenp.prettier-vscode", // prettier plugin
     "dbaeumer.vscode-eslint", // eslint plugin
     "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
-    "heybourn.headwind", // automatically sort tailwind classes in predictable order, kinda like "prettier for tailwind",
-    "stripe.vscode-stripe" // stripe VSCode extension
+    "ban.spellright", // Spell check for docs
+    "stripe.vscode-stripe", // stripe VSCode extension
+    "Prisma.prisma", // syntax|format|completion for prisma
+    "rebornix.project-snippets" // Share useful snippets between collaborators
   ]
 }

.vscode/launch.json

@@ -1,15 +1,39 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "pwa-chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: Server",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "skipFiles": ["<node_internals>/**"],
+      "outFiles": [
+        "${workspaceFolder}/**/*.js",
+        "!**/node_modules/**"
+      ],
+      "sourceMaps": true,
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/**",
+        "!**/node_modules/**"
+      ]
+    },
+    {
+      "name": "Next.js: Client",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: Full Stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
 }

.vscode/settings.json

@@ -1,10 +1,10 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.formatOnSave": true,
-  // Auto-fix issues with ESLint when you save code changes
+  "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "eslint.run": "onSave",
-  "typescript.preferences.importModuleSpecifier": "non-relative"
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "spellright.language": ["en"],
+  "spellright.documentTypes": ["markdown"]
 }

.vscode/tasks.json

@@ -0,0 +1,78 @@
+{
+  "version": "2.0.0",
+  "presentation": {
+    "echo": false,
+    "reveal": "always",
+    "focus": false,
+    "panel": "dedicated",
+    "showReuseMessage": true
+  },
+  "tasks": [
+    {
+      "label": "Launch Cal.com Development terminals",
+      "dependsOn": [
+        "Web App(3000)",
+        "Website(3001)",
+        "Embed Core(3100)",
+        "Embed React(3101)",
+        "Prisma Studio(5555)",
+        "Maildev(587)"
+      ],
+      // Mark as the default build task so cmd/ctrl+shift+b will create them
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      // Try start the task on folder open
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    },
+    {
+      // The name that shows up in terminal tab
+      "label": "Web App(3000)",
+      // The task will launch a shell
+      "type": "shell",
+      "command": "yarn dev",
+      // Set the shell type
+      // Mark as a background task to avoid the spinner animation on the terminal tab
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Website(3001)",
+      "type": "shell",
+      "command": "cd apps/website && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Embed Core(3100)",
+      "type": "shell",
+      "command": "cd packages/embeds/embed-core && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Embed React(3101)",
+      "type": "shell",
+      "command": "cd packages/embeds/embed-react && yarn dev",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Prisma Studio(5555)",
+      "type": "shell",
+      "command": "yarn db-studio",
+      "isBackground": false,
+      "problemMatcher": []
+    },
+    {
+      "label": "Maildev(587)",
+      "type": "shell",
+      "command": "maildev -s 587",
+      "isBackground": false,
+      "problemMatcher": []
+    }
+  ]
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+bailey@cal.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

CONTRIBUTING.md

@@ -0,0 +1,99 @@
+# Contributing to Cal.com
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+- Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.
+
+## Areas of expertise
+
+### Legend
+
+✅ = has knowledge 
+
+🥇 = is their main priority
+
+⚠️ = is the only one with knowledge 
+
+👀 = has no knowledge but wants to be onboarded 
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://dynamic-svgs.vercel.app/image.svg?dark">
+  <img alt="Areas of expertise table" src="https://dynamic-svgs.vercel.app/image.svg">
+</picture>
+
+
+
+
+## Developing
+
+The development branch is `main`. This is the branch that all pull
+requests should be made against. The changes on the `main`
+branch are tagged into a release monthly.
+
+To develop locally:
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your
+   own GitHub account and then
+   [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+2. Create a new branch:
+
+   ```sh
+   git checkout -b MY_BRANCH_NAME
+   ```
+
+3. Install yarn:
+
+   ```sh
+   npm install -g yarn
+   ```
+
+4. Install the dependencies with:
+
+   ```sh
+   yarn
+   ```
+
+5. Start developing and watch for code changes:
+
+   ```sh
+   yarn dev
+   ```
+
+## Building
+
+You can build the project with:
+
+```bash
+yarn build
+```
+
+Please be sure that you can make a full production build before pushing code.
+
+## Testing
+
+More info on how to add new tests coming soon.
+
+### Running tests
+
+This will run and test all flows in multiple Chromium windows to verify that no critical flow breaks:
+
+```sh
+yarn test-e2e
+```
+
+## Linting
+
+To check the formatting of your code:
+
+```sh
+yarn lint
+```
+
+If you get errors, be sure to fix them before committing.
+
+## Making a Pull Request
+
+- Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating you PR.
+- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. Se more about [Linking a pull request to an issue
+  ](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
+- Be sure to fill the PR Template accordingly.

LICENSE

@@ -2,7 +2,7 @@ Copyright (c) 2020-present Cal.com, Inc.
 
 Portions of this software are licensed as follows:
 
-* All content that resides under "ee/" directory of this repository (Enterprise Edition) is licensed under the license defined in "ee/LICENSE".
+* All content that resides under "apps/web/ee/" (https://github.com/calcom/cal.com/tree/main/apps/web/ee) directory of this repository (Enterprise Edition) is licensed under the license defined in "ee/LICENSE".
 * All third party components incorporated into the Cal.com Software are licensed under the original license provided by the owner of the applicable component.
 * Content outside of the above mentioned directories or restrictions above is available under the "AGPLv3" license as defined below.
 
@@ -666,4 +666,4 @@ specific requirements.
   You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
 For more information on this, and how to apply and follow the GNU AGPL, see
-<https://www.gnu.org/licenses/>.
+<https://www.gnu.org/licenses/>.

Procfile

@@ -0,0 +1 @@
+web: npx turbo run @calcom/web#start

README.md

@@ -1,6 +1,6 @@
 <!-- PROJECT LOGO -->
 <p align="center">
-  <a href="https://github.com/calendso/calendso">
+  <a href="https://github.com/calcom/cal.com">
     <img src="https://user-images.githubusercontent.com/8019099/133430653-24422d2a-3c8d-4052-9ad6-0580597151ee.png" alt="Logo">
 
   </a>
@@ -17,20 +17,27 @@
     ·
     <a href="https://cal.com">Website</a>
     ·
-    <a href="https://github.com/calendso/calendso/issues">Issues</a>
+    <a href="https://github.com/calcom/cal.com/issues">Issues</a>
+    ·
+    <a href="https://cal.com/roadmap">Roadmap</a>
   </p>
 </p>
 
 <p align="center">
    <a href="https://cal.com/slack"><img src="https://img.shields.io/badge/Slack-calendso.slack.com-%234A154B" alt="Join Cal.com Slack"></a>
    <a href="https://www.producthunt.com/posts/calendso"><img src="https://img.shields.io/badge/Product%20Hunt-%231%20Product%20of%20the%20Month-%23DA552E" alt="Product Hunt"></a>
-  <a href="https://github.com/calendso/calendso/stargazers"><img src="https://img.shields.io/github/stars/calendso/calendso" alt="Github Stars"></a>
-  <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
-  <a href="https://github.com/calendso/calendso/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
-  <img src="https://img.shields.io/github/package-json/v/calendso/calendso">
-  <a href="https://github.com/calendso/calendso/pulse"><img src="https://img.shields.io/github/commit-activity/m/calendso/calendso" alt="Commits-per-month"></a>
-  <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
-  <a href="https://cal.crowdin.com/Cal"><img src="https://badges.crowdin.net/e/5a55420475b48696779e30e0208a1899/localized.svg" alt="Translate Slack"></a>
+   <a href="https://github.com/calcom/cal.com/stargazers"><img src="https://img.shields.io/github/stars/calcom/cal.com" alt="Github Stars"></a>
+   <a href="https://news.ycombinator.com/item?id=26817795"><img src="https://img.shields.io/badge/Hacker%20News-311-%23FF6600" alt="Hacker News"></a>
+   <a href="https://github.com/calcom/cal.com/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-AGPLv3-purple" alt="License"></a>
+   <a href="https://github.com/calcom/cal.com/pulse"><img src="https://img.shields.io/github/commit-activity/m/calcom/cal.com" alt="Commits-per-month"></a>
+   <a href="https://cal.com/pricing"><img src="https://img.shields.io/badge/Pricing-%2412%2Fmonth-brightgreen" alt="Pricing"></a>
+   <a href="https://jitsu.com?utm_source=github/calcom/cal.com"><img src="https://img.shields.io/badge/Metrics_tracked_by-JITSU-AA00FF?logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACKSURBVHgBrZDRCYAwDEQv6gCOoKO4hOCXI9QVnEZwiY5iF5GaVClaBNtioCSUvCR3tMJaxIfZgW4AGUoEPVwgPZoS0Dmgg3NBVDFNbMIsmYCak3J1jDk9iCQvsKJvkzr71N81Gj6vDT/LU2P6RhY63jcafk3YJEbgeZpiFyc/5HJKv8Ef273NSfABGbQfUZhnOSAAAAAASUVORK5CYII=" alt="Jitsu Tracked"></a>
+   <img src="https://api.checklyhq.com/v1/badges/checks/5e048048-1b51-47ba-9209-60607507622e?responseTime=true" alt="Checkly Availability" />
+   <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=flat"></a>
+   <a href="https://twitch.tv/calcomtv"><img src="https://img.shields.io/twitch/status/calcomtv?style=flat"></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 -->
@@ -39,7 +46,7 @@
 
 <img width="100%" alt="booking-screen" src="https://user-images.githubusercontent.com/8019099/134363898-4b29e18f-3e61-42b7-95bc-10891056249d.gif">
 
-# Scheduling infrastructure for absolutely everyone.
+# Scheduling infrastructure for absolutely everyone
 
 The open source Calendly alternative. You are in charge
 of your own data, workflow and appearance.
@@ -48,7 +55,7 @@ Calendly and other scheduling tools are awesome. It made our lives massively eas
 
 That's where Cal.com comes in. Self-hosted or hosted by us. White-label by design. API-driven and ready to be deployed on your own domain. Full control of your events and data.
 
-### Product of the Month: April
+## Product of the Month: April
 
 #### Support us on [Product Hunt](https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso)
 
@@ -65,7 +72,7 @@ That's where Cal.com comes in. Self-hosted or hosted by us. White-label by desig
 
 Cal officially launched as v.1.0 on 15th of September, however a lot of new features are coming. Watch **releases** of this repository to be notified for future updates:
 
-![cal-star-github](https://user-images.githubusercontent.com/8019099/116010176-5d9c9900-a615-11eb-92d0-aa0e892f7056.gif)
+![cal-star-github](https://user-images.githubusercontent.com/8019099/154853944-a9e3c999-3da3-4048-b149-b4f73893c6fb.gif)
 
 <!-- GETTING STARTED -->
 
@@ -77,49 +84,63 @@ To get a local copy up and running, please follow these simple steps.
 
 Here is what you need to be able to run Cal.
 
-- Node.js
+- Node.js (Version: >=14.x <17)
 - PostgreSQL
 - Yarn _(recommended)_
 
-You will also need Google API credentials. You can get this from the [Google API Console](https://console.cloud.google.com/apis/dashboard). More details on this can be found below under the [Obtaining the Google API Credentials section](#Obtaining-the-Google-API-Credentials).
+> If you want to enable any of the available integrations, you may want to obtain additional credentials for each one. More details on this can be found below under the [integrations section](#integrations).
 
 ## Development
 
 ### Setup
 
+1. Clone the repo into a public GitHub repository (to comply with AGPLv3. To clone in a private repository, [acquire a commercial license](https://cal.com/sales))
+
+   ```sh
+   git clone https://github.com/calcom/cal.com.git
+   ```
+
+1. Go to the project folder
+
+   ```sh
+   cd cal.com
+   ```
+
+1. Install packages with yarn
+
+   ```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`
 
 > - **Requires Docker and Docker Compose to be installed**
 > - Will start a local Postgres instance with a few test users - the credentials will be logged in the console
 
-```bash
-git clone git@github.com:calendso/calendso.git
-cd calendso
-yarn
-cp .env.example .env
+```sh
 yarn dx
 ```
 
-#### Manual
+#### Development tip
 
-1. Clone the repo
-   ```sh
-   git clone https://github.com/calendso/calendso.git
-   ```
-2. Install packages with yarn
-   ```sh
-   yarn install
-   ```
-3. Copy `.env.example` to `.env`
-4. Configure environment variables in the .env file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `.env` to get logging information for all the queries and mutations driven by **trpc**.
+
+```sh
+echo 'NEXT_PUBLIC_DEBUG=1' >> .env
+```
+
+#### Manual setup
+
+1. Configure environment variables in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
 
    ```
    DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
-   GOOGLE_API_CREDENTIALS='secret'
    ```
 
    <details>
-   <summary>If you don't know how to configure the DATABASE_URL, then follow the steps here</summary>
+   <summary>If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB using Heroku</summary>
 
    1. Create a free account with [Heroku](https://www.heroku.com/).
 
@@ -145,73 +166,94 @@ yarn dx
    8. To view your DB, once you add new data in Prisma, you can use [Heroku Data Explorer](https://heroku-data-explorer.herokuapp.com/).
    </details>
 
-5. Set up the database using the Prisma schema (found in `prisma/schema.prisma`)
+1. Set a 32 character random string in your .env file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
+1. Set up the database using the Prisma schema (found in `apps/web/prisma/schema.prisma`)
+
    ```sh
-   npx prisma migrate deploy
+   yarn workspace @calcom/prisma db-deploy
    ```
-6. Run (in development mode)
+
+1. Run (in development mode)
+
    ```sh
    yarn dev
    ```
-7. Open [Prisma Studio](https://www.prisma.io/studio) to look at or modify the database content:
+
+#### Setting up your first user
+
+1. Open [Prisma Studio](https://www.prisma.io/studio) to look at or modify the database content:
+
+   ```sh
+   yarn db-studio
    ```
-   npx prisma studio
-   ```
-8. Click on the `User` model to add a new user record.
-9. Fill out the fields `email`, `username`, `password`, and set `metadata` to empty `{}` (remembering to encrypt your password with [BCrypt](https://bcrypt-generator.com/)) and click `Save 1 Record` to create your first user.
-10. Open a browser to [http://localhost:3000](http://localhost:3000) and login with your just created, first user.
-11. Set a 32 character random string in your .env file for the CALENDSO_ENCRYPTION_KEY.
+
+1. Click on the `User` model to add a new user record.
+1. Fill out the fields `email`, `username`, `password`, and set `metadata` to empty `{}` (remembering to encrypt your password with [BCrypt](https://bcrypt-generator.com/)) and click `Save 1 Record` to create your first user.
+   > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `apps/web/prisma/schema.prisma` file.
+1. Open a browser to [http://localhost:3000](http://localhost:3000) and login with your just created, first user.
 
 ### E2E-Testing
 
-```bash
-# In first terminal
-yarn dx
-# In second terminal
-yarn test-playwright
+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:
+yarn test-e2e
+
+# To open last HTML report run:
+yarn workspace @calcom/web playwright-report
 ```
 
 ### Upgrading from earlier versions
 
 1. Pull the current version:
-   ```
+
+   ```sh
    git pull
    ```
-2. Apply database migrations by running <b>one of</b> the following commands:
+
+1. Check if dependencies got added/updated/removed
+
+   ```sh
+   yarn
+   ```
+
+1. Apply database migrations by running <b>one of</b> the following commands:
 
    In a development environment, run:
 
-   ```
-   npx prisma migrate dev
+   ```sh
+   yarn workspace @calcom/prisma db-migrate
    ```
 
    (this can clear your development database in some cases)
 
    In a production environment, run:
 
-   ```
-   npx prisma migrate deploy
+   ```sh
+   yarn workspace @calcom/prisma db-deploy
    ```
 
-3. Check the `.env.example` and compare it to your current `.env` file. In case there are any fields not present
-   in your current `.env`, add them there.
+1. Check for `.env` variables changes
 
-   For the current version, especially check if the variable `BASE_URL` is present and properly set in your environment, for example:
-
-   ```
-   BASE_URL='https://yourdomain.com'
+   ```sh
+   yarn predev
    ```
 
-4. Start the server. In a development environment, just do:
-   ```
+1. Start the server. In a development environment, just do:
+
+   ```sh
    yarn dev
    ```
+
    For a production build, run for example:
-   ```
+
+   ```sh
    yarn build
    yarn start
    ```
-5. Enjoy the new version.
+
+1. Enjoy the new version.
 <!-- DEPLOYMENT -->
 
 ## Deployment
@@ -220,9 +262,15 @@ yarn test-playwright
 
 The Docker configuration for Cal is an effort powered by people within the community. Cal.com, Inc. does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.
 
-If you want to contribute to the Docker repository, [reply here](https://github.com/calendso/docker/discussions/32).
+If you want to contribute to the Docker repository, [reply here](https://github.com/calcom/docker/discussions/32).
 
-The Docker configuration can be found [in our docker repository](https://github.com/calendso/docker).
+The Docker configuration can be found [in our docker repository](https://github.com/calcom/docker).
+
+### Heroku
+
+<a href="https://heroku.com/deploy?template=https://github.com/calcom/cal.com">
+  <img width="185px" height="auto" src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy">
+</a>
 
 ### Railway
 
@@ -234,22 +282,21 @@ You can deploy Cal on [Railway](https://railway.app/) using the button above. Th
 
 ## Roadmap
 
-See the [open issues](https://github.com/calendso/calendso/issues) for a list of proposed features (and known issues).
+See the [roadmap project](https://github.com/orgs/calcom/projects/1) for a list of proposed features (and known issues). You can change the view to see planned tagged releases.
 
 <!-- CONTRIBUTING -->
 
 ## Contributing
 
-Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Please see our [contributing guide](/CONTRIBUTING.md).
 
-1. Fork the project
-2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
-3. Make your changes
-4. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
-5. Push to the branch (`git push origin feature/AmazingFeature`)
-6. Open a pull request
+### Good First Issues
 
-## Obtaining the Google API Credentials
+We have a list of [good first issues](https://github.com/calcom/cal.com/labels/✅%20good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started, gain experience, and get familiar with our contribution process.
+
+## Integrations
+
+### Obtaining the Google API Credentials
 
 1. Open [Google API Console](https://console.cloud.google.com/apis/dashboard). If you don't have a project in your Google Cloud subscription, you'll need to create one before proceeding further. Under Dashboard pane, select Enable APIS and Services.
 2. In the search box, type calendar and select the Google Calendar API search result.
@@ -263,7 +310,7 @@ Contributions are what make the open source community such an amazing place to b
 10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
 11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.
 
-## Obtaining Microsoft Graph Client ID and Secret
+### Obtaining Microsoft Graph Client ID and Secret
 
 1. Open [Azure App Registration](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and select New registration
 2. Name your application
@@ -272,7 +319,58 @@ Contributions are what make the open source community such an amazing place to b
 5. Use **Application (client) ID** as the **MS_GRAPH_CLIENT_ID** attribute value in .env
 6. Click **Certificates & secrets** create a new client secret and use the value as the **MS_GRAPH_CLIENT_SECRET** attribute
 
-## Obtaining Zoom Client ID and Secret
+### Obtaining Slack Client ID and Secret and Signing Secret
+
+To test this you will need to create a Slack app for yourself on [their apps website](https://api.slack.com/apps).
+
+Copy and paste the app manifest below into the setting on your slack app. Be sure to replace `YOUR_DOMAIN` with your own domain or your proxy host if you're testing locally.
+
+<details>
+  <summary>App Manifest</summary>
+  
+ ```yaml
+ display_information:
+  name: Cal.com Slack
+features:
+  bot_user:
+    display_name: Cal.com Slack
+    always_online: false
+  slash_commands:
+    - command: /create-event
+      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
+      description: Create an event within Cal!
+      should_escape: false
+    - command: /today
+      url: https://YOUR_DOMAIN/api/integrations/slackmessaging/commandHandler
+      description: View all your bookings for today
+      should_escape: false
+oauth_config:
+  redirect_urls:
+    - https://YOUR_DOMAIN/api/integrations/slackmessaging/callback
+  scopes:
+    bot:
+      - chat:write
+      - commands
+      - chat:write.public 
+settings:
+  interactivity:
+    is_enabled: true
+    request_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
+    message_menu_options_url: https://YOUR_DOMAIN/api/integrations/slackmessaging/interactiveHandler
+  org_deploy_enabled: false
+  socket_mode_enabled: false
+  token_rotation_enabled: false
+```
+
+</details>
+
+Add the integration as normal - slack app - add. Follow the oauth flow to add it to a server.
+
+Next make sure you have your app running `yarn dx`. Then in the slack chat type one of these commands: `/create-event` or `/today`
+
+> NOTE: Next you will need to setup a proxy server like [ngrok](https://ngrok.com/) to allow your local host machine to be hosted on a public https server.
+
+### Obtaining Zoom Client ID and Secret
 
 1. Open [Zoom Marketplace](https://marketplace.zoom.us/) and sign in with your Zoom account.
 2. On the upper right, click "Develop" => "Build App".
@@ -288,12 +386,37 @@ Contributions are what make the open source community such an amazing place to b
 12. Click "Done".
 13. You're good to go. Now you can easily add your Zoom integration in the Cal.com settings.
 
-## Obtaining Daily API Credentials
+### Obtaining Daily API Credentials
 
-1.  Open [Daily](https://www.daily.co/) and sign into your account.
-2.  From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
-3.  Copy your API key.
-4.  Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file.
+1. Open [Daily](https://www.daily.co/) and sign into your account.
+2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab.
+3. Copy your API key.
+4. Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file.
+5. If you have the [Daily Scale Plan](https://www.daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording.
+
+### Obtaining HubSpot Client ID and Secret
+
+1. Open [HubSpot Developer](https://developer.hubspot.com/) and sign into your account, or create a new one.
+2. From within the home of the Developer account page, go to "Manage apps".
+3. Click "Create app" button top right.
+4. Fill in any information you want in the "App info" tab
+5. Go to tab "Auth"
+6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields.
+7. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/hubspotothercalendar/callback` replacing Cal.com URL with the URI at which your application runs.
+8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts`
+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 -->
 
@@ -314,3 +437,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/)
+  
+ <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://cal.com/open) and [Jitsu](https://github.com/jitsucom/jitsu) (an open-source Segment alternative) helps us to track most of the usage metrics.

app.json

@@ -0,0 +1,26 @@
+{
+  "name": "Cal.com",
+  "description": "Open Source Scheduling",
+  "repository": "https://github.com/calcom/cal.com",
+  "logo": "https://cal.com/android-chrome-512x512.png",
+  "keywords": ["react", "typescript", "node", "nextjs", "prisma", "postgres", "trpc"],
+  "addons": [
+    {
+      "plan": "heroku-postgresql:hobby-dev"
+    }
+  ],
+  "env": {
+    "BASE_URL": {
+      "description": "Replace HEROKU_APP_NAME with the name given to your app",
+      "value": "https://HEROKU_APP_NAME.herokuapp.com"
+    },
+    "CALENDSO_ENCRYPTION_KEY": {
+      "description": "Application Key for symmetric encryption and decryption. Must be 32 bytes for AES256 encryption algorithm.",
+      "value": "secret"
+    },
+    "NEXTAUTH_SECRET": "secret"
+  },
+  "scripts": {
+    "postdeploy": "cd packages/prisma && npx prisma migrate deploy"
+  }
+}

apps/docs/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+.DS_Store
+yarn-error.log
+dist
+examples
+packages

apps/docs/.nvmrc

@@ -0,0 +1 @@
+14.17

apps/docs/.prettierignore

@@ -0,0 +1,2 @@
+.next
+node_modules

apps/docs/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Shu Ding
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/docs/README.md

@@ -0,0 +1,81 @@
+<!-- PROJECT LOGO -->
+<div align="right">
+  <a href="https://github.com/calcom/cal.com">
+    <img src="https://user-images.githubusercontent.com/8019099/133430653-24422d2a-3c8d-4052-9ad6-0580597151ee.png" alt="Logo">
+  </a>
+  <a href="https://cal.com">Website</a>
+  ·
+  <a href="https://github.com/calcom/cal.com/issues">Community Support</a>
+</div>
+
+# Cal.com Documentation
+
+The official product, support and developer documentation, containing information and guides about using the product as well as support for self-hosted installations. This documentation site runs on [Nextra](https://nextra.vercel.app), so you may refer to their documentation should you need information on anything that isn't covered here.
+
+## Prerequisites
+
+- Git
+- Node.js & npm
+- Yarn
+
+## Installation
+
+Firstly, clone the repository using Git:
+
+```console
+git clone https://github.com/calcom/docs.git
+```
+
+Now, you can install the dependencies with yarn:
+
+```console
+yarn install
+```
+
+## Editing
+
+To create, edit and delete documentation pages, you can simply create markdown (.mdx) files in the `pages/` folder. You can edit Markdown with any text editor, but VS Code and WebStorm have side-by-side previews so you can see your formatted content whilst writing markdown.
+
+You will also need to add it as an entry to the `meta.json` file found in whichever directory that the .mdx file is in.
+
+## Local Development
+
+```console
+yarn dev
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+```console
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static content hosting service.
+
+## How to easily contribute
+
+## Existing Page
+
+1. From the documentation's GitHub repository, head to the folder called 'pages' and open it.
+2. From here you can view all current pages on the documentation site. Select the page you would like to contribute to.
+3. You should now be able to view the page you have selected. Located at the top right of the page will be a pencil icon. Pressing this will bring you up an editor to edit and make changes. You can add formatting using the buttons at the top, which will automatically insert the relevant markdown content needed to style the text.
+4. From here make the changes you wish to make.
+5. At the bottom of the screen will be a 'Propose Changes' box, fill in all the relevant details such as title and description then press the green 'Propose Changes' button.
+6. Your changes have been saved, to submit them for review, located on your screen, press the green 'Create Pull Request' button.
+7. Fill in all the relevant details such as title and description and after finalize the submission.
+
+You have now successfully edited and submitted changes to our documentation site.
+
+## Creating a New Page
+
+1. From the documentation's GitHub repository, head to the folder called 'pages' and open it.
+2. From here you can view all current pages on the documentation site. At the top of your screen press the 'New file' button.
+3. You should now be able to view the page you have created. Remember when renaming the document to put .mdx at the end of the file name.
+4. From here make the changes you wish to make. Such as creating a title, sub-title and body text.
+5. At the bottom of the screen will be a 'Propose Changes' box, fill in all the relevant details such as title and description then press the green 'Propose Changes' button.
+6. Your changes have been saved, to submit them for review, located on your screen, press the greem 'Create Pull Request' button.
+7. Fill in all the relevant details such as title and description and after finalize the submission.
+
+You have now successfully created and submitted changes to our documentation site.

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/next.config.js

@@ -0,0 +1,17 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const withNextra = require("nextra")({
+  theme: "nextra-theme-docs",
+  themeConfig: "./theme.config.js",
+  unstable_staticImage: true,
+});
+module.exports = withNextra({
+  async rewrites() {
+    return [
+      // This redirects requests recieved at /api to /public-api to workaround nextjs default use of /api.
+      {
+        source: "/api",
+        destination: "/public-api",
+      },
+    ];
+  },
+});

apps/docs/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@calcom/docs",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next",
+    "dev": "PORT=4000 next",
+    "lint": "next lint",
+    "type-check": "tsc --pretty --noEmit",
+    "lint:report": "eslint . --format json --output-file ../../lint-results/docs.json",
+    "start": "PORT=4000 next start",
+    "build": "next build"
+  },
+  "author": "Cal.com, Inc.",
+  "license": "MIT",
+  "dependencies": {
+    "iframe-resizer-react": "^1.1.0",
+    "next": "^12.1.6",
+    "nextra": "^1.1.0",
+    "nextra-theme-docs": "^1.2.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@calcom/config": "*",
+    "eslint": "^8.15.0"
+  }
+}

apps/docs/pages/_app.tsx

@@ -0,0 +1,8 @@
+import { AppProps } from "next/app";
+import "nextra-theme-docs/style.css";
+
+import "./style.css";
+
+export default function Nextra({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />;
+}

apps/docs/pages/availability.mdx

@@ -0,0 +1,27 @@
+---
+title: Availability
+---
+
+# Availability
+
+## Setting your availability
+
+1. Go to [Your Availability](https://app.cal.com/availability) page within your cal.com account.
+2. On the availability page you can manage your availability to suit your working day accordingly.
+You can also troubleshoot your availability if your calendar does not look like it is blocking out the correct times.
+
+
+## Troubleshooting availability
+
+This will tell you when your calendar shows you as busy, so you can understand why Cal is blocking certain times.
+
+## How to troubleshoot availability
+
+1. Go to [Your Availability](https://app.cal.com/availability).
+2. To the right of your screen a box saying 'Something doesn't look right?' will appear. Press the button 'Launch Troubleshooter'.
+3. After pressing this, your availability will appear according to your calendar and inform you of the times booked up for that day!
+
+By doing this you will know understand why certain times are available and others are blocked.
+
+## In team settings availability set to only Mondays but the calendar shows availability on other days as well
+It’s showing as available on days other than Monday because only you have set your availability to only Mondays, whereas the rest of the team haven't made that setting.

apps/docs/pages/billing.mdx

@@ -0,0 +1,37 @@
+---
+title: Billing
+---
+
+# Billing
+## How the trial works
+You are given FREE access for 14 days of our PRO subscription, you can use this to test and try out our product and see if it works for you. No credit card is required to sign up and you decide if you want to upgrade to a PRO subscription afterwards.
+
+## How to cancel the trial
+If you are looking to cancel the trial and want to downgrade to the free option you can contact our support team where we will be happy to help you make that change!
+
+## How to upgrade
+If you are looking at upgrading from our FREE subscription to our PRO subscription, head over to cal.com/upgrade where you can easily upgrade hassle free.
+
+## How to downgrade
+1. Go to your [Billing Settings](https://app.cal.com/settings/billing).
+2. From here you can press the button called `Go to the billing Portal`. That will take you to the page where you can upgrade/downgrade your plan.
+
+## How to delete your account
+You can delete your account from within the [Settings](https://app.cal.com/settings/profile) option. Just scroll all the way down and click on `Delete Account`.
+
+## Purchasing a premium username
+We've reserved a ton of premium usernames, such as short handles or first names to prevent name squatters. To find out if your username is premium, head over to [cal.com/signup](https://cal.com/signup) and choose your desired username. From here you will be taken straight to checkout and after proceeding your Cal.com account will be created with your desired username.
+
+## Manage your subscription
+1. Go to your [Billing Settings](https://app.cal.com/settings/billing).
+2. From here you can press the button called `Go to the billing Portal`.
+3. This will take you to an external site provided by Stripe as they deal with all our payments.
+
+Some users may not be able to access Billing as their billing email is different to their account email. If this is the case, you can change the email associated with your account in [Profile Settings](https://app.cal.com/settings/profile).
+
+## Subscription for each team member
+If your team requires multiple event types then each team member has to be subscribed to our paid plan. If that is something that isn’t necessary for your team, you can proceed with your FREE plan.
+
+## Discount for non-profits and students
+We offer 50% for non-profit organizations and students. Just raise a ticket with our support team and submit the necessary proof of status.
+

apps/docs/pages/bookings.mdx

@@ -0,0 +1,29 @@
+---
+title: Bookings
+---
+
+# Bookings
+
+## What can you do on the bookings page?
+
+On the bookings page you are able to see upcoming and past events booked through your event type links. This page also lets you cancel or reschedule upcoming events users have scheduled.
+
+## How to view bookings
+
+1. Go to [your upcoming and past bookings](https://app.cal.com/bookings/upcoming).
+2. On this page you can see upcoming and past events booked through your event type links.
+
+## Reschedule bookings
+
+1. Go to [your rescheduled bookings](https://app.cal.com/bookings/upcoming).
+2. Hovering over the event you want to reschedule, click the button saying 'Reschedule'
+3. Clicking 'Reschedule' will bring you to your Cal booking page. Select a new Time and Date.
+4. After selecting this you can go ahead and click that 'Reschedule' Button!
+5. After, you and your attendee will receive a new confirmation email of your new date and time.
+
+## Cancel bookings
+
+1. Go to [your cancelled](https://app.cal.com/bookings/cancelled).
+2. Hovering over the event you want to cancel, click the button saying 'Cancel'
+3. Once done, you will receive a confirmation message saying 'Really cancel your booking?'. After confirming you can go ahead and click the red 'Cancel' button at the bottom of your screen.
+4. After, you and your attendee will receive a new confirmation email of your event being cancelled.

apps/docs/pages/contributing.mdx

@@ -0,0 +1,83 @@
+---
+title: Contributing
+---
+
+# Contributing
+
+Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+- Before jumping into a PR be sure to search [existing PRs](https://github.com/calcom/cal.com/pulls) or [issues](https://github.com/calcom/cal.com/issues) for an open or closed item that relates to your submission.
+
+## Developing
+
+The development branch is `main`. This is the branch that all pull
+requests should be made against. The changes on the `main`
+branch are tagged into a release monthly.
+
+To develop locally:
+
+1. [Fork](https://help.github.com/articles/fork-a-repo/) this repository to your
+   own GitHub account and then
+   [clone](https://help.github.com/articles/cloning-a-repository/) it to your local device.
+2. Create a new branch:
+
+   ```sh
+   git checkout -b MY_BRANCH_NAME
+   ```
+
+3. Install yarn:
+
+   ```sh
+   npm install -g yarn
+   ```
+
+4. Install the dependencies with:
+
+   ```sh
+   yarn
+   ```
+
+5. Start developing and watch for code changes:
+
+   ```sh
+   yarn dev
+   ```
+
+## Building
+
+You can build the project with:
+
+```bash
+yarn build
+```
+
+Please be sure that you can make a full production build before pushing code.
+
+## Testing
+
+More info on how to add new tests coming soon.
+
+### Running tests
+
+This will run and test all flows in multiple Chromium windows to verify that no critical flow breaks:
+
+```sh
+yarn test-e2e
+```
+
+## Linting
+
+To check the formatting of your code:
+
+```sh
+yarn lint
+```
+
+If you get errors, be sure to fix them before comitting.
+
+## Making a Pull Request
+
+- Be sure to [check the "Allow edits from maintainers" option](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/allowing-changes-to-a-pull-request-branch-created-from-a-fork) while creating you PR.
+- If your PR refers to or fixes an issue, be sure to add `refs #XXX` or `fixes #XXX` to the PR description. Replacing `XXX` with the respective issue number. Se more about [Linking a pull request to an issue
+  ](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue).
+- Be sure to fill the PR Template accordingly.

apps/docs/pages/developer/adding-css.mdx

@@ -0,0 +1,37 @@
+---
+title: Adding CSS
+---
+
+import Callout from "nextra-theme-docs/callout";
+
+# Adding CSS
+
+<Callout>
+  Adding or modifying CSS counts as changing the code, so as per [our license](https://github.com/calcom/cal.com/blob/main/LICENSE) you must either open-source your modified version or purchase an enterprise license.
+</Callout>
+
+Cal.com uses [TailwindCSS](https://tailwindcss.com) as a replacement for traditional CSS styling within the application, but some people prefer to add CSS styles themselves.
+
+CSS files should be stored in the `styles` directory within the codebase.
+
+Within the `styles` directory, you will find two CSS files, `fonts.css` and `global.css`. We suggest not to add to these files, and instead create new CSS files and import them into the application. This helps reduce conflicts when pulling in changes that we've made to either of the existing CSS files.
+
+## Adding new stylesheets
+Firstly, create the CSS file inside the `styles` directory.
+
+Then, open the `pages/_app.tsx` file, and you will see the following two lines:
+```javascript
+import "../styles/fonts.css";
+import "../styles/globals.css";
+```
+
+Duplicate one of these import statements and change the path to link to your new CSS stylesheet, like so:
+```javascript
+import "../styles/your-new-stylesheet.css";
+```
+
+<Callout type="warning" emoji="⚠️">
+  These styles will apply to all pages and components in your application.
+</Callout>
+
+Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside `pages/_app.tsx`**.

apps/docs/pages/developer/app-store.mdx

@@ -0,0 +1,60 @@
+---
+title: Contributing to App Store
+---
+
+# Contributing to the App Store
+
+Since Cal.com is open source we encourage developers to create new apps for others to use. This guide is to help you get started.
+
+## Structure
+
+All apps can be found under `packages/app-store`. In this folder is `_example` which shows the general structure of an app.
+
+```sh
+├──_example
+|
+|   ├──api
+|   |   ├──example.ts
+|   |   ├──index.ts
+|
+|   ├──components
+|   |   ├──InstallAppButton.tsx
+|   |   ├──index.ts
+|
+|   ├──lib
+|   |   ├──adaptor.ts
+|   |   ├──index.ts
+|
+|   ├──static
+|   |   ├──icon.svg
+|
+|   ├──index.ts
+|   ├──package.json
+|   ├──.env.example
+|	├──README.mdx
+```
+
+## Getting Started
+
+In the `package.json` name your package appropriately and list the dependencies needed for the package.
+
+Next in the `.env.example` specify the environmental variables (ex. auth token, API secrets) that your app will need. In a comment add a link to instructions on how to obtain the credentials. Create a `.env` with your the filled in environmental variables.
+
+In `index.js` fill out the meta data that will be rendered on the app page. Under `packages/app-store/index.ts`, import your app and add it under `appStore`. Your app should now appear in the app store.
+
+Under the `/api` folder, this is where any API calls that are associated with your app will be handled. Since cal.com uses Next.js we use dynamic API routes. In this example if we want to hit `/api/example.ts` the route would be `{BASE_URL}/api/integrations/_example/example`. Export your endpoints in an `index.ts` file under `/api` folder and import them in your main `index.ts` file.
+
+Under the `/components` folder, this is where the install button for your app should live. Follow the template under `_example` to add your on click action (ex. Redirecting to a log in page or opening a modal).
+
+The `/lib` folder is where the functions of your app live. For example, when creating a booking with a MS Teams link the function to make the call to grab the link lives in the `/lib` folder. Export your endpoints in an `index.ts` file under `/lib` folder and import them in your main `index.ts` file.
+
+On the app store page you can customize your apps description by adding a markdown file called `README.mdx`. If you do not add one then the description from you `package.json` will be used instead.
+
+The `/static` folder is where you can store your app icon and any images that your `README.mdx` may use.
+
+## Adding Your App to the App Store
+To render your app on the app store page, go to `packages/app-store/index.ts`. Import your app into the file and add it to the `appStore` object.
+
+Under `packages/app-store/components.tsx`,  in the `InstallAppButtonMap` object dynamically import your install button. Your install button should live under `{your_app}/components`.
+
+If you need any help feel free to join us on [Slack](https://cal.com/slack)

apps/docs/pages/developer/code-styling.mdx

@@ -0,0 +1,19 @@
+---
+title: Code styling
+---
+
+# Code Styling
+Keeping our code styles consistent is key to making the repository easy to read and work with.
+
+We use a number of style guides written by other amazing companies, simply because they are widely used and because we like working with them.
+
+We don't expect you to study every single rule of each style guide, but these are great reference points as to how your code should be styled. We may reject a pull request if your code style significantly differs from these style guides however.
+
+## ESLint & Prettier
+Calendso uses the ESLint and Prettier formatting tools, and the repository comes with defined rules for each tool. We recommend setting up both tools and using these to help automatically style your code to our guidelines.
+
+## JavaScript/TypeScript
+We use the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) for all JavaScript and Typescript code.
+
+## HTML & CSS
+We use the [Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html) for any HTML and CSS markup. However, exceptions to the HTML guide apply where JSX differentiates from standard HTML.

apps/docs/pages/developer/meta.json

@@ -0,0 +1,9 @@
+{
+  "migrations": "Migrations",
+  "pre-fill": "Pre-fill fields",
+  "code-styling": "Code styling",
+  "project-structure": "Project structure",
+  "pull-requests": "Pull requests",
+  "adding-css": "Adding CSS",
+  "app-store": "Contributing to App Store"
+}

apps/docs/pages/developer/migrations.mdx

@@ -0,0 +1,41 @@
+---
+title: Migrations
+---
+
+# Database Migrations
+As described in the [upgrade guide](https://docs.cal.com/self-hosting/upgrade), you should use the `yarn workspace @calcom/prisma db-migrate` or `yarn workspace @calcom/prisma db-deploy` command to update the database.
+
+We use database migrations in order to handle changes to the database schema in a more secure and stable way. This is actually very common. The thing is that when just changing the schema in `schema.prisma` without creating migrations, the update to the newer database schema can damage or delete all data in production mode, since the system sometimes doesn't know how to transform the data from A to B. Using migrations, each step is reproducable, transparent and can be undone in a simple way.
+
+## Creating migrations
+If you are modifying the codebase and make a change to the `schema.prisma` file, you must create a migration.
+
+To create a migration for your previously changed `schema.prisma`, simply run the following:
+```sh
+yarn workspace @calcom/prisma db-migrate
+```
+
+Now, you must create a short name for your migration to describe what changed (for example, "user_add_email_verified"). Then just add and commit it with the corresponding code that uses your new database schema.
+
+:::caution
+
+Always keep an eye on what migrations Prisma is generating. Prisma often happily will drop entire columns of data because it can't figure out what to do.
+
+:::
+
+## Error: The database schema is not empty
+Prisma uses a database called `_prisma_migrations` to keep track of which migrations have been applied and which haven't. If your local migrations database doesn't match up with what's in the actual database, then Prisma will throw the following error:
+```text
+Error: P3005
+
+The database schema for `localhost:5432` is not empty. Read more about how to baseline an existing production database: https://pris.ly/d/migrate-baseline
+```
+
+In order to fix this, we need to tell Prisma which migrations have already been applied.
+
+This can be done by running the following command, replacing `migration_name` with each migration that you have already applied:
+```sh
+yarn prisma migrate resolve --applied migration_name
+```
+
+You will need to run the command for each migration that you want to mark as applied.

apps/docs/pages/developer/pre-fill.mdx

@@ -0,0 +1,24 @@
+---
+title: Pre-fill fields
+---
+
+# Pre-fill fields
+
+You can pre-fill a number of fields on the booking form by using their corresponding URL parameters. This can include the user’s name, email, or guests to be added to the booking.
+
+Usually when they go to the link, all that is needed will be the time of the booking, and the form will be pre-filled with the information given.
+
+Pre-filling booking fields can save a lot of time and speed up processes with filling out these forms, and assist with a smooth integration with your existing website or app.
+
+You can pre-fill a user’s name and email address like so:
+```text
+cal.com/rick/quick-chat/?email=attendee@example.com&name=John
+```
+The data is persisted through the 3 booking pages; and is used to prefill the booking form.
+
+Guests can also be added to the link, there is also no limit to the amount of guests you wish to add.
+
+These should be added to your link like this:
+```text
+guest=guest1@example.com&guest=guest2@example.com
+```

apps/docs/pages/developer/project-structure.mdx

@@ -0,0 +1,50 @@
+---
+title: Project structure
+---
+
+# Project Structure
+
+This page gives an overview of how the codebase is structured so you can easily dive into the Cal.com code.
+
+Cal.com is written in Next.js, so you will find that we follow Next.js best practices for structure and layouts.
+
+## Basic folder structure
+
+The project comprises of the following folder structure:
+
+```text
+.github/ - GitHub configuration files
+    ISSUE_TEMPLATE/
+    workflows/
+.husky/ - Git hooks
+.vscode/ - VS Code editor configuration
+components/ - Application components
+    booking/
+    dialog/
+    team/
+    ui/
+lib/ - Reusable code
+    emails/
+    events/
+    forgot-password/messaging/
+    integrations/CalDav/
+    teams/
+pages/ - Most of the project lives here
+    [user]/ - Booking pages
+    api/ - The backend API
+    auth/ - Next-Auth.js and other authentication routes
+    availability/
+    bookings/
+    cancel/
+    event-types/
+    integrations/
+    reschedule/
+    settings/
+    team/
+prisma/ - The database schema and migrations
+    migrations/
+public/ - Images and static files
+    integrations/
+styles/
+test/lib/
+```

apps/docs/pages/developer/pull-requests.mdx

@@ -0,0 +1,37 @@
+---
+title: Pull requests
+---
+
+# Pull Requests
+
+## Requirements
+
+We have a number of requirements for PRs to ensure they are as easy to review as possible and to ensure that they are up to standard with the code.
+
+### Title & Content
+
+Start by providing a short and concise title. Don’t put something generic (e.g. bug fixes), and instead mention more specifically what your PR achieves, for instance “Fixes dropdown not expanding on settings page”.
+
+For the PR description, you should go into much greater detail about what your PR adds or fixes. Firstly, the description should include a link to any relevant issues or discussions surrounding the feature or bug that your PR addresses.
+
+#### Feature PRs
+
+Give a functional overview of how your feature works, including how the user can use the feature. Then, share any technical details in an overview of how the PR works (e.g. “Once the user enters their password, the password is hashed using BCrypt and stored in the Users database field”).
+
+#### Bug Fix PRs
+
+Give an overview of how your PR fixes the bug both as a high-level overview and a technical explanation of what caused the issue and how your PR resolves this.
+
+Feel free to add a short video or screenshots of what your PR achieves. Loom is a great way of sharing short videos.
+
+### Code Quality & Styling
+
+All submitted code must match our [code styling](/docs/code-styling) standards. We will reject pull requests that differ significantly from our standardised code styles.
+
+All code is automatically checked by Codacy and our linting process, and will notify you if there are any issues with the code that you submit. We require that code passes these quality checks before merging.
+
+## PR review process
+
+At least two members of the Calendso team should review and approve any PR before it is merged.
+
+Once two members of the team have approved this, someone from the team will merge the PR. If you are part of the Calendso team, you should merge your own PRs once you have received both approvals.

apps/docs/pages/event-types.mdx

@@ -0,0 +1,43 @@
+---
+title: Event Types
+---
+
+# Event Types
+Event types allow you to create different events for different occasions when booking a time with you in your calendar. These can be named differently, have different time durations and the choice of platform can change.
+
+## Creating an event type
+1. Go to [Your Event Types](https://app.cal.com/event-types).
+2. Click the button at the top right of your screen saying '+ New Event Type'.
+3. Create the title of your new event.
+4. Confirm the auto-generated event type URL.
+5. Create a description on what your event will be used for.
+6. Decide on the amount of minutes you wish for this event to last for.
+7. Press 'Continue'
+8. Your event has now been created!
+
+## Editing event types
+1. Go to [Your Event Types](https://app.cal.com/event-types).
+2. Click anywhere within the box of the event you would like to edit.
+   (From here you can edit the basic settings of your event)
+3. To get the advanced options, at the bottom of your event setting click 'Show Advanced Settings'
+4. After you have finished editing the event type, scroll to the bottom of your page and select 'Update'
+5. Your event type has now been updated.
+
+## Deleting event types
+1. Go to [Your Event Types](https://app.cal.com/event-types).
+2. Click anywhere within the box of the event, just like you would if you were editing the event.
+3. From this page, just to the right, a button saying 'delete' will appear. Click this and your event will be deleted!
+
+## How to block a time slot before/after a meeting
+You can block out a time frame in your calendar only after the meeting. You can do this by selecting `Show advanced settings` of your Event Type. The setting is labeled `Time-slot intervals`.
+
+## Setting up specific availability for each type of Event
+Head to `Show advanced settings` of your event. At the bottom you can set up specific availability for different Event Types.
+
+## Availability not showing on a certain day in your calendar
+Head over to your event and once you click on `Show advanced settings`, make sure your time zones are correct. Also, check if you have any calendar events scheduled that could overlap with your availability.
+
+## People can't book me even though there is still a couple of hours left on my availability for today
+Head over to your event and once you click on `Show advanced settings`, have a look at the `Minimum booking notice`. It probably overlaps with your availability so make sure that notice fits your desired time frame for meetings. For example, if someone wants to book a meeting with you at 16:15 and it’s already 15:30, your 90 minutes minimum booking notice doesn’t allow that meeting to be booked.
+
+

apps/docs/pages/faq.mdx

@@ -0,0 +1,17 @@
+---
+title: FAQs
+---
+
+# Frequently asked questions
+
+## Does Cal.com support a custom domain?
+This is possible with our self-hosted option.
+
+## Is there a possibility of multi-bookings for events where more people can book at the same time?
+As it stands this is currently not possible. We always keep an eye on the limitations like these that our users point to us. We’ve had requests in the past for the multi-booking feature and this is on our priority list.
+
+## How to quickly block further bookings?
+1. Click on the lower left corner of your dashboard where your username is displayed.
+2. That initates a dropdown menu. Click on `Set youself as away`.
+
+This is a method to disable your Cal.com account which won't allow any bookings once initiated. However, bookings made before turning on *away mode* will still be booked.

apps/docs/pages/import.mdx

@@ -0,0 +1,34 @@
+---
+title: Import
+---
+
+import Callout from "nextra-theme-docs/callout";
+
+# Import data from other scheduling tools
+
+When setting up your Cal.com account via the onboarding process, you can import data from other scheduling tools, such as Calendly or SavvyCal. All that you need to import your data is an access token, which you can retrieve from your Calendly/SavvyCal account.
+
+Once you've pasted your access token, we import your account data in less than a second.
+
+Naturally, we take security very seriously when it comes to importing your data from other accounts, so that's why we never store your access token, and use it once to query the Calendly/SavvyCal APIs, populate your account with the data it returns, and then your key is destroyed from memory. All of the importer code can be [freely viewed on GitHub](https://github.com/calcom/cal.com/tree/main/pages/api/import), so you can be assured we're not using your data for malicious purposes.
+
+## Calendly
+The following steps will help you retrieve your Calendly access token, which you will need to present at the import screen of the onboarding process.
+1. Go to the Calendly website and click on **My Account** in the top right
+2. Now click on **Integrations** in the top right
+3. Scroll to the bottom and click on **API & Webhooks**
+4. Click the blue **Generate new token** button and type in anything you'd like as the app name
+5. Press **Copy token** and then paste it into the Cal.com importer
+<Callout>
+  Even though we don't store your access token, you can press **Revoke** to destroy the access token from the **API & Webhooks** page once the import is complete.
+</Callout>
+
+## SavvyCal
+The following steps will help you retrieve your SavvyCal access token, which you will need to present at the import screen of the onboarding process.
+1. Head to the SavvyCal website and click **Settings** in the sidebar
+2. Click the **Developers** tab, and under **Personal access tokens**, click the blue **Create a token** link
+3. Give the token any name you'd like, and then confirm
+4. Click to copy the token, and then paste the token into the Cal.com importer
+<Callout>
+  Even though we don't store your access token, you can press the trash icon to revoke the access token from the **Developers** tab once the import is complete.
+</Callout>

apps/docs/pages/index.mdx

@@ -0,0 +1,17 @@
+---
+title: Home
+---
+
+import Bleed from "nextra-theme-docs/bleed";
+
+# Cal.com Documentation
+
+Welcome to our product documentation, where you can explore advice and explanations for all of our features, as well as discover new tips and tricks to get the most out of your subscription.
+
+This is also the home of our design system documentation and developer docs.
+
+If you don't already know what Cal.com is about, please head over to [our website](https://cal.com), where you can learn more about the product before venturing into the documentation.
+
+Want to help make these docs even better? This site is fully open source, and the source code is available on [GitHub](https://github.com/calcom/cal.com/tree/main/apps/docs). You can also click the edit button at the bottom of any page to start editing the source code and start a pull request.
+
+<Bleed>![Telemedicine Example](https://cal.com/telemedicine-example.svg)</Bleed>

apps/docs/pages/integrations/embed.mdx

@@ -0,0 +1,262 @@
+---
+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
+
+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) {
+    let p = function (a, ar) {
+      a.q.push(ar);
+    };
+    let d = C.document;
+    C.Cal =
+      C.Cal ||
+      function () {
+        let cal = C.Cal;
+        let ar = arguments;
+        if (!cal.loaded) {
+          cal.ns = {};
+          cal.q = cal.q || [];
+          d.head.appendChild(d.createElement("script")).src = A;
+          cal.loaded = true;
+        }
+        if (ar[0] === L) {
+          const api = function () {
+            p(api, arguments);
+          };
+          const namespace = ar[1];
+          api.q = api.q || [];
+          typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar);
+          return;
+        }
+        p(cal, ar);
+      };
+    })(window, "https://cal.com/embed.js", "init");
+    Cal("init")
+  </script>
+```
+
+## Install with a Framework
+
+### embed-react
+
+It provides a react component `<Cal>` that can be used to show the embed inline at that place.
+
+```bash
+yarn add @calcom/embed-react
+```
+
+### Any XYZ Framework
+
+You can use Vanilla JS Snippet to install
+
+<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:
+
+### Inline
+
+Show the embed inline inside a container element. It would take the width and height of the container element.
+
+<details>
+  <summary>_Vanilla JS_</summary>
+
+```html
+<script>
+  Cal("inline", {
+    elementOrSelector: "Your Embed Container Selector Path", // You can also provide an element directly
+    calLink: "jane", // The link that you want to embed. It would open https://cal.com/jane in embed
+    config: {
+      name: "John Doe", // Prefill Name
+      email: "johndoe@gmail.com", // Prefill Email
+      notes: "Test Meeting", // Prefill Notes
+      guests: ["janedoe@gmail.com", "test@gmail.com"], // Prefill Guests
+      theme: "dark", // "dark" or "light" theme
+    },
+  });
+</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>
+
+####
+
+<details>
+<summary>_React_</summary>
+
+```jsx
+import Cal from "@calcom/embed-react";
+
+const MyComponent = () => (
+  <Cal
+    calLink="pro"
+    config={{
+      name: "John Doe",
+      email: "johndoe@gmail.com",
+      notes: "Test Meeting",
+      guests: ["janedoe@gmail.com"],
+      theme: "dark",
+    }}
+  />
+);
+```
+
+*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
+
+To show the embed as a popup on clicking an element, add `data-cal-link` attribute to the element.
+
+<details>
+
+<summary>Vanilla JS</summary>
+
+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
+    import "@calcom/embed-react";
+
+    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.
+
+### `inline`
+
+Appends embed inline as the child of the element.
+
+```html
+<script>
+Cal("inline", { elementOrSelector, calLink });
+</script>
+````
+
+- `elementOrSelector` - Give it either a valid CSS selector or an HTMLElement instance directly
+
+- `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL [https://cal.com/john](). It makes it easy to configure the calendar host once and use as many links you want with just usernames
+
+### `ui`
+
+Configure UI for embed. Make it look part of your webpage.
+
+```html
+<script>
+Cal("inline", { styles });
+</script>
+```
+
+- `styles` - It supports styling for `body` and `eventTypeListItem`. Right now we support just background on these two.
+
+### preload
+
+Usage:
+
+If you want to open cal link on some action. Make it pop open instantly by preloading it.
+
+```html
+<script>
+Cal("preload", { calLink });
+</script>
+```
+
+- `calLink` - Cal Link that you want to embed e.g. john. Just give the username. No need to give the full URL [https://cal.com/john]()
+
+## Actions
+You can listen to an action that occurs in embedded cal link as follows. You can think of them as DOM events. We are avoiding the term "events" to not confuse it with Cal Events.
+```html
+<script>
+Cal("on", {
+  action: "ANY_ACTION_NAME",
+  callback: (e)=>{
+    // `data` is properties for the event.
+    // `type` is the name of the action(You can also call it type of the action.) This would be same as "ANY_ACTION_NAME" except when ANY_ACTION_NAME="*" which listens to all the events.
+    // `namespace` tells you the Cal namespace for which the event is fired/
+    const {data, type, namespace} = e.detail;
+  }
+})
+</script>
+```
+
+Following are the list of supported actions.
+- 
+| Action               | Description                                                                                                                        | Properties                                                                                                                                                                                                                                                                             |
+|----------------------|------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| eventTypeSelected    | When user chooses an event-type from the listing.                                                                                  | eventType:object // Event Type that has been selected"                                                                                                                                                                                                                               |
+| bookingSuccessful    | When the booking is successfully done. It might not be confirmed.                                                                  | confirmed: boolean; //Whether confirmation from organizer is pending or not  <br/><br/>eventType: "Object for Event Type that has been booked";  <br/><br/>date: string; // Date of Event  <br/><br/>duration: number; //Duration of booked Event  <br/><br/>organizer: object //Organizer details like name, timezone, email  |
+| linkReady            | Tells that the link is ready to be shown now.                                                                                      | None                                                                                                                                                                                                                                                                                   |
+| linkFailed           | Fired if link fails to load                                                                                                        | code: number; // Error Code <br/><br/>msg: string;  //Human Readable msg  <br/><br/>data: object // More details to debug the error                                                                                                                                                                     |
+| __iframeReady        | It is fired when the embedded iframe is ready to communicate with parent snippet. This is mostly for internal use by Embed Snippet | None                                                                                                                                                                                                                                                                                   |
+| __windowLoadComplete | Tells that window load for iframe is complete                                                                                      | None                                                                                                                                                                                                                                                                                   |
+| __dimensionChanged   | Tells that dimensions of the content inside the iframe changed.                                                                    | iframeWidth:number, iframeHeight:number                                                                                                                                                                                                                                              |
+
+_Actions that start with __ are internal._

apps/docs/pages/integrations/google.mdx

@@ -0,0 +1,40 @@
+---
+title: Google
+---
+
+# Google Calendar
+The Google Calendar integration checks for availability in your Google Calendars and creates bookings for you.
+
+## Removing Permissions for Cal to access your Google Account
+
+1. Go to your [Google Account](https://myaccount.google.com/).
+2. On the left, click Data & privacy.
+3. Scroll to "Data from apps and services you use."
+4. Under "Download or delete your data," click Delete a Google service. You may need to sign in again.
+5. Next to the product you want to remove, click Delete.
+6. Follow the steps on the screen.
+
+To remove a product from your account that isn't listed in your Google Account, visit [Google Support](https://support.google.com) for more info on a specific product.
+
+## Obtaining the Google API Credentials
+1. Open [Google API Console](https://console.cloud.google.com/apis/dashboard). If you don't have a project in your Google Cloud subscription, you'll need to create one before proceeding further. Under Dashboard pane, select Enable APIS and Services.
+2. In the search box, type calendar and select the Google Calendar API search result.
+3. Enable the selected API.
+4. Next, go to the [OAuth consent screen](https://console.cloud.google.com/apis/credentials/consent) from the side pane. Select the app type (Internal or External) and enter the basic app details on the first page.
+5. In the second page on Scopes, select Add or Remove Scopes. Search for Calendar.event and select the scope with scope value `.../auth/calendar.events`, `.../auth/calendar.readonly`, `.../auth/calendar` and select Update.
+6. In the third page (Test Users), add the Google account(s) you'll using. Make sure the details are correct on the last page of the wizard and your consent screen will be configured.
+7. Now select [Credentials](https://console.cloud.google.com/apis/credentials) from the side pane and then select Create Credentials. Select the OAuth Client ID option.
+8. Select Web Application as the Application Type.
+9. Under Authorized redirect URI's, select Add URI and then add the URI `<CALENDSO URL>/api/integrations/googlecalendar/callback` replacing CALENDSO URL with the URI at which your application runs.
+10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs.
+11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key.
+
+## Where to find the Google Meet integration?
+
+Google Meet is a part of the Google Calendar integration and it should be available once you've added your Google Calendar. Just select Google Meet as location for your Event Type:
+
+1. Go to your `Event Types`.
+2. Click on the `Location` drop-down menu.
+3. Select Google Meet as the location of your meeting.
+
+Once your Event Type slot is booked, it will automatically generate the Google Meet link for the meeting.

apps/docs/pages/integrations/introduction.mdx

@@ -0,0 +1,21 @@
+---
+title: Introduction
+---
+
+# Integrations
+
+## Connecting new calendars
+1. Go to the [Cal App Store](https://app.cal.com/apps).
+2. Located at the top right of the screen, press the button saying '+ Connect A New App'
+3. Choose the account your calendar is connected too by clicking 'Add'. (e.g. Google, Office 365, Zoom)
+4. You will be redirected to the log in page of the chosen account.
+5. Allow Cal access to view and edit your calendars.
+6. You will be sent back to the [Cal App Store](https://app.cal.com/apps/installed). From here you will now be able to see your connected calendar!
+
+## How to choose the primary Calendar?
+
+If you have two or more integrated calendars and you want your events to show in only one, you can define a primary calendar like this:
+
+1. Go to your [Installed](https://app.cal.com/apps/installed) page.
+2. Next to your `Calendars` you will see a dropdown that says `Create events on:`.
+3. Select your primary calendar.

apps/docs/pages/integrations/meta.json

@@ -0,0 +1,9 @@
+{
+    "introduction": "Introduction",
+    "google": "Google",
+    "microsoft": "Microsoft",
+    "zoom": "Zoom",
+    "stripe": "Stripe",
+    "zapier": "Zapier"
+  }
+  

apps/docs/pages/integrations/microsoft.mdx

@@ -0,0 +1,24 @@
+---
+title: Microsoft
+---
+
+# Outlook/Microsoft 365
+The Outlook integration enables you to use your outlook.com or Microsoft 365 account to use for conflict checking and event bookings.
+
+## Obtaining Microsoft Graph Client ID and Secret
+1. Open [Azure App Registration](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) and select New registration
+2. Name your application
+3. Set **Who can use this application or access this API?** to **Accounts in any organizational directory (Any Azure AD directory - Multitenant)**
+4. Set the **Web** redirect URI to `<CALENDSO URL>/api/integrations/office365calendar/callback` replacing CALENDSO URL with the URI at which your application runs.
+5. Use **Application (client) ID** as the **MS_GRAPH_CLIENT_ID** attribute value in .env
+6. Click **Certificates & secrets** create a new client secret and use the value as the **MS_GRAPH_CLIENT_SECRET** attribute
+
+## Removing Permissions for Cal to access your Microsoft Workplace Account
+
+Hover over Cal.com in the my apps portal, then select `manage your application`.
+
+The top part of permissions window shows what you personally consented to. Examples of apps permissions include the ability to access your calendar, contacts, or camera.
+
+You can revoke any of the permissions you consented to by selecting `Revoke Permissions`, however removing a permission may break some of the apps functionality. If you have problems after you remove permissions or accounts, contact your organization's Helpdesk for additional assistance.
+
+If you require more help, head over the Microsoft Documentation Page about [Managing Applications](https://docs.microsoft.com/en-us/azure/active-directory/user-help/my-applications-portal-permissions-saved-accounts)

apps/docs/pages/integrations/slack.mdx

@@ -0,0 +1,21 @@
+---
+Title: Slack
+---
+
+# Slack
+
+## Connecting 
+Connecting the bot is easy - If you are a workspace admin, the install button will add the bot to the workspace and also authorize your account with the bot. If you are a normal user, the install button will connect your Slack account with Cal.com. This will allow you to perform commands in Slack.
+
+## Commands
+`/today` - This command will display all meetings you have in your Cal.com profile for the current day. This will send a hidden message (not visible to anyone other than you) to the channel you issued the command in.
+
+`/create-event` - It will display a modal allowing you to simply create a meeting invite with anyone in Slack. Success/Error information will be displayed in a private direct message from the bot.
+
+`/links` - This command will post all your Cal.com meeting links into the current Slack channel you are in. **Note**: The bot needs to have permission to talk in the channel you are sending the message in. Otherwise, you won't be able to send your links. 
+
+As this is the beggining stage of our Slack integration, we plan on adding more commands in the future that will further improve your Cal.com experience.
+
+## Self-Hosted
+If you are using our self-hosted version, please refer to our documentation in 
+[cal.com/README.md](https://github.com/calcom/cal.com/blob/main/README.md#obtaining-slack-client-id-and-secret-and-signing-secret)

apps/docs/pages/integrations/stripe.mdx

@@ -0,0 +1,23 @@
+---
+title: Stripe
+---
+
+# Stripe Payments
+
+The Stripe integration allows users to add payments to their bookings.
+
+## Adding the stripe integration
+
+1. Go to the [Cal App Store](https://app.cal.com/integrations).
+2. Located near the top of this page will be the integration 'Stripe' and located to the right will be a button called 'Connect', press this.
+3. You will be redirected to Stripe requesting for Cal.com to be authorized access. Press 'Accept'.
+
+This stripe integration has now successfully been added.
+
+## Removing the stripe integration
+
+1. Go to the [Cal App Store](https://app.cal.com/integrations).
+2. Located near the top of this page will be the integration 'Stripe' and located to the right will be a button called 'Disconnect', press this.
+3. A confirmation pop up box will appear, to confirm press the button saying 'Yes, disconnect integration'.
+
+This stripe integration has now successfully been disconnected.

apps/docs/pages/integrations/zapier.mdx

@@ -0,0 +1,7 @@
+---
+title: Zapier
+---
+
+## Do you have a Zapier integration?
+
+We are currently working on it, but it isn’t live just yet. Until then, you can use our Webhooks integration and use Zapier's “Webhooks by Zapier”.

apps/docs/pages/integrations/zoom.mdx

@@ -0,0 +1,46 @@
+---
+title: Zoom
+sidebar_position: 3
+---
+
+# Zoom
+
+The Zoom integration automatically creates Zoom meetings for your bookings.
+
+## Connecting your Zoom account
+
+1. Go to the App Store page, and click the 'Add new integration' button.
+2. Next to Zoom, go ahead and click the 'Add' button.
+3. You will now be taken to Zoom to sign into your account and authorize Cal.
+
+## Disconnecting your Zoom account
+
+1. Go to the App Store page, and click on your Zoom integration in the list.
+2. On the right hand side, click the Delete App button.
+
+This will remove the integration from Cal. Cal will not perform any actions on your account once the integration is removed. However, if you want to revoke Cal's permissions from your Zoom account, perform the following steps:
+
+1. Log into your Zoom account and navigate to the App Marketplace
+2. Click Manage > Installed Apps or search for the Cal app
+3. Click on the Cal app
+4. Click Uninstall
+
+## How we interact with your Zoom account
+
+We only need the ability to create meetings, so when somebody books an event with you, Cal can communicate with Zoom and create the corresponding meeting.
+
+## Setting up Zoom on your self-hosted instance
+
+1. Open [Zoom Marketplace](https://marketplace.zoom.us/) and sign in with your Zoom account.
+2. On the upper right, click "Develop" => "Build App".
+3. On "OAuth", select "Create".
+4. Name your App.
+5. Choose "User-managed app" as the app type.
+6. De-select the option to publish the app on the Zoom App Marketplace.
+7. Click "Create".
+8. Now copy the Client ID and Client Secret to your .env file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields.
+9. Set the Redirect URL for OAuth `<CALENDSO URL>/api/integrations/zoomvideo/callback` replacing CALENDSO URL with the URI at which your application runs.
+10. Also add the redirect URL given above as an allowlist URL and enable "Subdomain check". Make sure it says "saved" below the form.
+11. You don't need to provide basic information about your app. Instead click at "Scopes" and then at "+ Add Scopes". On the left, click the category "Meeting" and check the scope `meeting:write`.
+12. Click "Done".
+13. You're good to go. Now you can easily add your Zoom integration in the Cal settings.

apps/docs/pages/meta.json

@@ -0,0 +1,17 @@
+{
+  "index": "Home",
+  "self-hosting": "Self-hosting",
+  "availability": "Availability",
+  "bookings": "Bookings",
+  "event-types": "Event Types",
+  "teams": "Teams",
+  "integrations": "Integrations",
+  "public-api": "API",
+  "webhooks": "Webhooks",
+  "settings": "Settings",
+  "import": "Import",
+  "billing": "Billing",
+  "developer": "Developer",
+  "contributing": "Contributing",
+  "faq": "FAQs"
+}

apps/docs/pages/public-api.mdx

@@ -0,0 +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>
+  <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/docs/pages/self-hosting/docker.mdx

@@ -0,0 +1,49 @@
+---
+title: Docker
+---
+
+# Docker
+
+The Docker configuration for Cal is an effort powered by people within the community. Cal does not provide official support for Docker, but we will accept fixes and documentation. Use at your own risk.
+
+The Docker configuration can be found [in our docker repository](https://github.com/calcom/docker).
+
+## Requirements
+
+Make sure you have `docker` & `docker-compose` installed on the server / system.
+
+## Getting Started
+
+### Option #1: Docker Hub
+
+   ```bash
+   docker pull calendso/calendso
+   ```
+
+or
+
+### Option #2: Cloning
+
+1. Clone calendso-docker
+
+   ```bash
+   git clone --recursive https://github.com/calendso/docker.git calendso-docker
+   ```
+
+2. Update `.env` if needed
+
+3. Build and start calendso
+
+   ```bash
+   docker-compose up --build
+   ```
+
+4. Start prisma studio
+   ```bash
+   docker-compose exec calendso npx prisma studio
+   ```
+5. Open a browser to [port 5555](http://localhost:5555) on your localhost to look at or modify the database content.
+
+6. Click on the `User` model to add a new user record.
+7. Fill out the fields (remembering to encrypt your password with [BCrypt](https://bcrypt-generator.com/)) and click `Save 1 Record` to create your first user.
+8. Open a browser to [port 3000](http://localhost:3000) on your localhost and login with your just created, first user.

apps/docs/pages/self-hosting/install.mdx

@@ -0,0 +1,129 @@
+---
+title: Installation
+---
+
+# Installation
+
+To get a local copy up and running, please follow these simple steps.
+
+## Prerequisites
+
+Here is what you need to be able to run Cal.
+
+- Node.js
+- PostgreSQL
+- Yarn _(recommended)_
+
+> If you want to enable any of the available integrations, you may want to obtain additional credentials for each one. More details on this can be found below under the integrations category.
+
+## Setup
+
+1. Clone the repo
+
+   ```sh
+   git clone https://github.com/calcom/cal.com.git
+   ```
+
+1. Go to the project folder
+
+   ```sh
+   cd cal.com
+   ```
+
+1. Copy `.env.example` to `.env`
+
+   ```sh
+   cp apps/web/.env.example apps/web/.env
+   cp packages/prisma/.env.example packages/prisma/.env
+   ```
+
+1. Install packages with yarn
+
+   ```sh
+   yarn
+   ```
+
+### Quick start with `yarn dx`
+
+> - **Requires Docker and Docker Compose to be installed**
+> - Will start a local Postgres instance with a few test users - the credentials will be logged in the console
+
+```sh
+yarn dx
+```
+
+### Manual setup
+
+1.  Configure database in the `packages/prisma/.env` file. Replace `<user>`, `<pass>`, `<db-host>`, `<db-port>` with their applicable values
+
+        ```text
+        DATABASE_URL='postgresql://<user>:<pass>@<db-host>:<db-port>'
+        ```
+
+        <details>
+
+            <summary>
+            If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB
+            using Heroku
+            </summary>
+
+            1. Create a free account with [Heroku](https://www.heroku.com/).
+
+            2. Create a new app.
+
+            <img
+                width="306"
+                alt="Create an App"
+                src="https://user-images.githubusercontent.com/16905768/115322780-b3d58c00-a17e-11eb-8a52-b758fb0ea942.png"
+            />
+
+            3. In your new app, go to `Overview` and next to `Installed add-ons`, click `Configure Add-ons`. We need this to set up our database.
+            ![image](https://user-images.githubusercontent.com/16905768/115323232-a53ba480-a17f-11eb-98db-58e2f8c52426.png)
+
+            4. Once you clicked on `Configure Add-ons`, click on `Find more add-ons` and search for `postgres`. One of the options will be `Heroku Postgres` - click on that option.
+            ![image](https://user-images.githubusercontent.com/16905768/115323126-5beb5500-a17f-11eb-8030-7380310807a9.png)
+
+            5. Once the pop-up appears, click `Submit Order Form` - plan name should be `Hobby Dev - Free`.
+
+            <img
+                width="512"
+                alt="Submit Order Form"
+                src="https://user-images.githubusercontent.com/16905768/115323265-b4baed80-a17f-11eb-99f0-d67f019aa6df.png"
+            />
+
+            6. Once you completed the above steps, click on your newly created `Heroku Postgres` and go to its `Settings`.
+            ![image](https://user-images.githubusercontent.com/16905768/115323367-e92ea980-a17f-11eb-9ff4-dec95f2ec349.png)
+
+            7. In `Settings`, copy your URI to your Cal.com .env file and replace the `postgresql://<user>:<pass>@<db-host>:<db-port>` with it.
+            ![image](https://user-images.githubusercontent.com/16905768/115323556-4591c900-a180-11eb-9808-2f55d2aa3995.png)
+            ![image](https://user-images.githubusercontent.com/16905768/115323697-7a9e1b80-a180-11eb-9f08-a742b1037f90.png)
+
+            8. To view your DB, once you add new data in Prisma, you can use [Heroku Data Explorer](https://heroku-data-explorer.herokuapp.com/).
+
+        </details>
+
+1.  Set a 32 character random string in your `apps/web/.env` file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one).
+1.  Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)
+
+    ```sh
+    yarn workspace @calcom/prisma db-deploy
+    ```
+
+1.  Run (in development mode)
+
+    ```sh
+    yarn dev
+    ```
+
+### Setting up your first user
+
+1. Open [Prisma Studio](https://www.prisma.io/studio) to look at or modify the database content:
+
+   ```sh
+   yarn db-studio
+   ```
+
+1. Click on the `User` model to add a new user record.
+1. Fill out the fields `email`, `username`, `password`, and set `metadata` to empty `{}` (remembering to encrypt your password with [BCrypt](https://bcrypt-generator.com/)) and click `Save 1 Record` to create your first user.
+   > New users are set on a `TRIAL` plan by default. You might want to adjust this behavior to your needs in the `prisma/schema.prisma` file.
+1. Open a browser to [port 3000](http://localhost:3000) and login with your just created, first user.

apps/docs/pages/self-hosting/meta.json

@@ -0,0 +1,6 @@
+{
+  "install": "Installation",
+  "upgrade": "Upgrade",
+  "docker": "Docker",
+  "vercel": "Vercel"
+}

apps/docs/pages/self-hosting/upgrade.mdx

@@ -0,0 +1,47 @@
+---
+title: Upgrade
+---
+
+# Upgrading
+
+**Warning**: When performing database migrations, you may lose data if the migration is not done properly.
+
+1. Pull the current version:
+   ```sh
+   git pull
+   ```
+2. Apply database migrations by running <b>one of</b> the following commands:
+
+   In a development environment, run:
+
+   ```sh
+   yarn workspace @calcom/prisma db-migrate
+   ```
+
+   (this can clear your development database in some cases)
+
+   In a production environment, run:
+
+   ```sh
+   yarn workspace @calcom/prisma db-deploy
+   ```
+
+3. Check the `.env.example` and compare it to your current `.env` file. In case there are any fields not present
+   in your current `.env`, add them there.
+
+   For the current version, especially check if the variable `BASE_URL` is present and properly set in your environment, for example:
+
+   ```text
+   BASE_URL='https://yourdomain.com'
+   ```
+
+4. Start the server. In a development environment, just do:
+   ```sh
+   yarn dev
+   ```
+   For a production build, run for example:
+   ```sh
+   yarn build
+   yarn start
+   ```
+5. Enjoy the new version.

apps/docs/pages/self-hosting/vercel.mdx

@@ -0,0 +1,50 @@
+---
+title: Vercel
+---
+
+# Vercel
+
+## Requirements
+
+You need a PostgresDB database hosted somewhere. [Heroku](https://www.heroku.com) and [Supabase](https://supabase.com/) offer great free options.
+
+## Getting Started
+
+### Local settings
+
+1. Fork and clone the repository
+
+   ```bash
+   git clone https://github.com/<your-fork>/cal.com.git
+   ```
+
+2. Copy the `.env.example` file in `apps/web`, rename it to `.env` and fill it with your settings ([See manual setup](https://github.com/calcom/cal.com#manual) and [Obtaining the Google API Credentials](https://github.com/calcom/cal.com#obtaining-the-google-api-credentials))
+
+3. Install packages with `yarn`
+
+   ```bash
+   yarn install
+   ```
+
+4. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`)
+
+   ```sh
+   yarn workspace @calcom/prisma db-deploy
+   ```
+
+5. Open [Prisma Studio](https://www.prisma.io/studio) to look at or modify the database content:
+   ```
+   yarn db-studio
+   ```
+6. Click on the `User` model to add a new user record.
+7. Fill out the fields (remembering to encrypt your password with [BCrypt](https://bcrypt-generator.com/)) and click `Save 1 Record` to create your first user.
+8. Open a browser to [port 3000](http://localhost:3000) on your localhost and login with your just created, first user.
+
+### Deployment
+
+1. Create a new project on Vercel
+1. Import from your forked repository
+1. Set the Environment Variables
+1. Set the root directory to `apps/web`
+1. Override the build command to `cd ../.. && yarn build`
+1. Hit Deploy

apps/docs/pages/settings.mdx

@@ -0,0 +1,56 @@
+---
+title: Settings
+---
+
+# Settings
+## Setting up or making changes to your Profile
+
+1. Go to your [Profile Settings](https://app.cal.com/settings/profile).
+2. From this page you are able to edit the following:
+- Your URL Username
+- Your Display Name
+- Your About Information
+- Change your Profile Picture
+- Your Local Time Zone
+- Your Chosen 'First Day Of The Week'
+- Light or Dark Mode for your Booking Page
+- Enabling or Disabling cal.com Branding on your Booking Page
+3. Once you have completed all your changes, press that 'save' button located at the bottom right of your page.
+
+## Reset your password
+
+1. Go to [your account security settings](https://app.cal.com/settings/security).
+2. Located at the top of your screen, you will see two boxes.
+3. Enter your Old Password and New Password.
+4. Click the button 'Save' located to the bottom right of your new password.
+5. You have now successfully changed your password!
+
+## Change your email
+
+Go to [Profile Settings](https://app.cal.com/settings/profile). There, you will see the email associated with your account which you can then update. You’d just need to log out and back in to see the change take effect.
+
+## Enable 2FA
+
+1. Go to [Your Account Security Settings](https://app.cal.com/settings/security).
+2. Located at the bottom of your screen, click on the tab labeled 'Enable Two-Factor Authentication'.
+3. Enter your Password.
+4. In your authenticator app, scan the QR Code presented on your screen.
+5. Once Scanned, press 'Next' and then enter the code presented within your Authentication App
+6. Press 'Enabled'
+
+You have now successfully enabled Two-Factor Authentication
+
+## Disable 2FA
+1. Go to [Your Account Security Settings](https://app.cal.com/settings/security).
+2. Located at the bottom of your screen, click on the tab labeled 'Disable Two-Factor Authentication'.
+3. Enter your Password.
+
+You have now successfully disabled Two-Factor Authentication
+
+## How to delete my account
+
+You can delete your account from within the [Settings](https://app.cal.com/settings/profile) option. Just scroll all the way down and click on `Delete Account`.
+
+## How to change the language
+
+Go to your [Profile Settings](https://app.cal.com/settings/profile). Under `Language` you will see the dropdown menu and you can use it to select your desired language.

apps/docs/pages/style.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Cal Sans';
+  src: url("https://cal.com/cal.ttf");
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Cal Sans';
+  font-weight: normal;
+  letter-spacing: normal;
+}

apps/docs/pages/teams.mdx

@@ -0,0 +1,57 @@
+---
+title: Teams
+---
+
+# Teams
+
+## How do I create a new team?
+
+1. Go to [Your Teams Settings](https://app.cal.com/settings/teams).
+2. Press the button displayed on your screen called '+ New Team'
+3. Enter the name you wish to call your team.
+4. After entering the name press the 'Create Team' button located just under your new team name.
+5. You have now created your new team.
+
+Creating a team will allow you to create new event types for the team, invite team members and much more!
+
+## How do I change my teams URL?
+
+1. Go to [Your Teams Settings](https://app.cal.com/settings/teams) and select the team you wish to edit.
+2. Located at the top of your teams settings will be a team-url bar, from here you can input your requested teams url.
+3. Once complete make sure you press 'save' at the bottom of the page.
+
+## How do I change my teams name?
+
+1. Go to [Your Teams Settings](https://app.cal.com/settings/teams) and select the team you wish to edit.
+2. Located in the 2nd row of your teams settings will be a Team Name bar, from here you can input your requested team name.
+3. Once complete make sure you press 'save' at the bottom of the page.
+
+## How do I add and remove a description of my team?
+
+1. Go to [Your Teams Settings](https://app.cal.com/settings/teams) and select the team you wish to edit.
+2. Located below your team name entry box is a large text box labeled 'About',
+
+## How do I upload my team logo?
+
+1. Go to [Your Teams Settings](https://app.cal.com/settings/teams) and select the team you wish to edit.
+2. Located under your teams subscription will be a box that says 'Upload a logo', press this box.
+3. Press 'choose a file' and locate a file from your machine you wish to use as your team logo.
+4. Once complete make sure you press 'save' at the bottom of the page.
+
+## How do I manage team members?
+
+1. Go to [Your Teams Settings](https://app.cal.com/settings/teams) and select the team you wish to edit.
+2. Located at the bottom of your page is your team members, from here you can choose to add or remove team members and even change their role which could be Member, Admin or Owner.
+
+## How do I delete my team I created?
+
+1. Go to [Your Teams Settings](https://app.cal.com/settings/teams).
+2. From here you will be able to see a list of teams you have created or apart of, located to the right of the team you wish to delete you can find three dots (...)
+3. Press the 3 dots (...) then 'Disband Team'
+4. This will brin gup a prompt confirming if you wish to disband your team, if your are sure you can press the button labeled 'Yes, disband team'
+
+Your team has now successfully been deleted.
+
+## Where can I find my team's Event Types?
+
+Once you open `Event Types` on your dashboard, you will find your team's Event Types below your individual ones.

apps/docs/pages/webhooks.mdx

@@ -0,0 +1,98 @@
+---
+title: Webhooks
+---
+
+# Webhooks
+
+## Create a new Webhook
+
+1. Go to [Your Integrations](https://app.cal.com/integrations).
+2. Scrolling down to the bottom of the page you will see a button called ‘New Webhook’. Press this button to open up the box which will ask for details on creating the new webhooks.
+3. Select whatever event this triggers, this may be Create, Cancelled or Reschedule.
+4. Once this is completed, insert the Subscriber URL then click 'Save' located at the bottom right of the box.
+
+## Edit an existing Webhook
+
+1. Go to [Your Integrations](https://app.cal.com/integrations).
+2. Scrolling down to the bottom of the page you will see an icon to the right of your webhook, this will be labeled edit webhook.
+3. Press the button and from here you can change any of the webhook settings. This could be changing the event that is triggered and this may be Create, Cancelled or Reschedule. Or you can change the Subscriber URL.
+
+## Delete an existing Webhook
+
+1. Go to [Your Integrations](https://app.cal.com/integrations).
+2. Scrolling down to the bottom of the page you will see an icon to the right of your webhook, this will be labeled delete webhook.
+3. Press the button and from here your webhook will no longer work and be deleted.
+
+## Webhook metadata
+
+Metadata is a way to pass extra information to Cal.com about a booking that is returned through a webhook.
+
+### Example
+
+The best way to explain this is with an example. Let's say you're a bank, and people register an account on your website, but you want them to book an onboarding call with your team to get set up. You could send them to your Cal.com booking link as part of your onboarding process, but when the webhook is returned, it may be difficult to match up which user booked a meeting with the user's account in your own database. Hence, you can pass a `user_id` value for instance as a URL parameter, which makes no difference to the booking process, but when the webhook is returned, you will receive the metadata as part of the webhook payload.
+
+Metadata is passed as a URL parameter on top of your booking link and follows the following syntax:
+
+```text
+metadata[key_name]=value
+```
+
+For example, if your booking link is `cal.com/rick/quick-chat`, you can pass a user ID of 123 like so:
+
+```text
+cal.com/rick/quick-chat?metadata[user_id]=123
+```
+
+As a result, the webhook will be returned in this format:
+
+```text
+\{ <other event details>, metadata: \{ user_id: 123 \} \}
+```
+
+## Custom Webhooks template variable list
+
+Customizable webhooks are a great way reduce the development effort and in many cases remove the need for a developer to build an additional integration service. Using a custom template you can easily decide what data you receive in your webhook endpoint, manage the payload and setup related workflows accordingly. Here’s a breakdown of the payload that you would receive via an incoming webhook.
+
+### Webhook structure
+
+| Variable            | Type     | Description                                                                            |
+| ------------------- | -------- | -------------------------------------------------------------------------------------- |
+| triggerEvent        | String   | The name of the trigger event [BOOKING_CREATED, BOOKING_RESHEDULED, BOOKING_CANCELLED] |
+| createdAt           | String   | The time of the webhook trigger                                                        |
+| type                | String   | The event-type slug                                                                    |
+| title               | String   | The event-type name                                                                    |
+| startTime           | String   | The event's start time                                                                 |
+| endTime             | String   | The event's end time                                                                   |
+| description?        | String   | The event's description as described in the event type                                 |
+| location?           | String   | Location of the event                                                                  |
+| organizer           | Person   | The organizer of the event                                                             |
+| attendees           | Person[] | The event booker & any guests                                                          |
+| uid?                | String   | The UID of the booking                                                                 |
+| resheduleUid?       | String   | The UID for the rescheduling                                                           |
+| cancellationReason? | String   | Reason for cancellation                                                                |
+| rejectionReason?    | String   | Reason for rejection                                                                   |
+| team?.name          | String   | Name of the team booked                                                                |
+| team?.members       | String[] | Members of the team booked                                                             |
+
+### Person structure
+
+| Variable        | Type   | Description                                                           |
+| --------------- | ------ | --------------------------------------------------------------------- |
+| name            | String | Name of the individual                                                |
+| email           | String | Email of the individual                                               |
+| timeZone        | String | Timezone of the individual ("America/New_York", "Asia/Kolkata", etc.) |
+| language.locale | String | Locale of the individual ("en", "fr", etc.)                           |
+
+### Example usage of variables for custom template:
+
+```sh
+\{
+
+    "content": "A new event has been scheduled",
+    "type": "\{\{type\}\}",
+    "name": "\{\{title\}\}",
+    "organizer": "\{\{organizer.name\}\}",
+    "booker": "\{\{attendees.0.name\}\}"
+
+\}
+```

apps/docs/public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#292929</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

apps/docs/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Cal.com",
+    "short_name": "Cal.com",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#292929",
+    "background_color": "#292929",
+    "display": "standalone"
+}

apps/docs/theme.config.js

@@ -0,0 +1,45 @@
+const themeConfig = {
+  github: "https://github.com/calcom/cal.com",
+  docsRepositoryBase: "https://github.com/calcom/cal.com/blob/main/apps/docs/pages",
+  titleSuffix: " | Cal.com",
+  logo: <h4 className="m-0">Cal.com</h4>,
+  head: (
+    <>
+      <meta name="msapplication-TileColor" content="#ffffff" />
+      <meta name="theme-color" content="#ffffff" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <meta httpEquiv="Content-Language" content="en" />
+      <meta
+        name="description"
+        content="Explore advice and explanations for all of our features, and discover new tips and tricks to get the most out of your subscription."
+      />
+      <meta
+        name="og:description"
+        content="Explore advice and explanations for all of our features, and discover new tips and tricks to get the most out of your subscription."
+      />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:image" content="https://cal.com/og-image.png" />
+      <meta name="twitter:site:domain" content="docs.cal.com" />
+      <meta name="twitter:url" content="https://docs.cal.com" />
+      <meta name="og:title" content="Cal.com Documentation" />
+      <meta name="og:image" content="https://cal.com/og-image.png" />
+      <meta name="apple-mobile-web-app-title" content="Cal.com Docs" />
+
+      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+      <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+      <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+      <link rel="manifest" href="/site.webmanifest" />
+      <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#000000" />
+      <meta name="msapplication-TileColor" content="#ff0000" />
+      <meta name="theme-color" content="#ffffff" />
+    </>
+  ),
+  search: true,
+  prevLinks: true,
+  nextLinks: true,
+  footer: true,
+  footerEditLink: "Edit this page on GitHub",
+  footerText: <>© {new Date().getFullYear()} Cal.com, Inc. All rights reserved.</>,
+};
+
+export default themeConfig;

apps/docs/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@calcom/tsconfig/nextjs.json",
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "compilerOptions": {
+    "noImplicitAny": false
+  }
+}