v3.3.2

* Add credential sync .env variables

* Add webhook to send app credentials

* Upsert credentials when webhook called

* Refresh oauth token from a specific endpoint

* Pass appSlug

* Add credential encryption

* Move oauth helps into a folder

* Create parse token response wrapper

* Add OAuth helpers to apps

* Clean up

* Refactor `appDirName` to `appSlug`

* Address feedback

* Change to safe parse

* Remove console.log

---------

Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Co-authored-by: Omar López <zomars@me.com>

.env.appStore.example

@@ -1,6 +1,7 @@
 # ********** INDEX **********
 #
 # - APP STORE
+#   - BASECAMP
 #   - DAILY.CO VIDEO
 #   - GOOGLE CALENDAR/MEET/LOGIN
 #   - HUBSPOT
@@ -20,6 +21,14 @@
 
 # - APP STORE **********************************************************************************************
 # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️
+
+#   - BASECAMP
+# Used to enable Basecamp integration with Cal.com
+# @see https://github.com/calcom/cal.com#obtaining-basecamp-client-id-and-secret
+BASECAMP3_CLIENT_ID=
+BASECAMP3_CLIENT_SECRET=
+BASECAMP3_USER_AGENT=
+
 #   - DAILY.CO VIDEO
 # Enables Cal Video. to get your key
 # 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information

.env.example

@@ -126,8 +126,7 @@ TWILIO_WHATSAPP_PHONE_NUMBER=
 NEXT_PUBLIC_SENDER_ID=
 TWILIO_VERIFY_SID=
 
-# 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
+# Set it to "1" if you need to run E2E tests locally. 
 NEXT_PUBLIC_IS_E2E=
 
 # Used for internal billing system
@@ -172,6 +171,12 @@ EMAIL_SERVER_PORT=1025
 ## You will need to provision an App Password.
 ## @see https://support.google.com/accounts/answer/185833
 # EMAIL_SERVER_PASSWORD='<gmail_app_password>'
+
+# Used for E2E for email testing
+# Set it to "1" if you need to email checks in E2E tests locally
+# Make sure to run mailhog container manually or with `yarn dx`
+E2E_TEST_MAILHOG_ENABLED=
+
 # **********************************************************************************************************
 
 # Set the following value to true if you wish to enable Team Impersonation
@@ -208,6 +213,10 @@ NEXT_PUBLIC_MINUTES_TO_BOOK=5 # Minutes
 # use organizations
 ORGANIZATIONS_ENABLED=
 
+# This variable should only be set to 1 or true if you want to autolink external provider sing-ups with
+# existing organizations based on email domain address
+ORGANIZATIONS_AUTOLINK=
+
 # Vercel Config to create subdomains for organizations
 # Get it from https://vercel.com/<TEAM_OR_USER_NAME>/<PROJECT_SLUG>/settings
 PROJECT_ID_VERCEL=
@@ -215,3 +224,36 @@ PROJECT_ID_VERCEL=
 TEAM_ID_VERCEL=
 # Get it from: https://vercel.com/account/tokens
 AUTH_BEARER_TOKEN_VERCEL=
+
+#   - APPLE CALENDAR
+# Used for E2E tests on Apple Calendar
+E2E_TEST_APPLE_CALENDAR_EMAIL=""
+E2E_TEST_APPLE_CALENDAR_PASSWORD=""
+
+# - APP CREDENTIAL SYNC ***********************************************************************************
+# Used for self-hosters that are implementing Cal.com into their applications that already have certain integrations
+# Under settings/admin/apps ensure that all app secrets are set the same as the parent application
+# You can use: `openssl rand -base64 32` to generate one
+CALCOM_WEBHOOK_SECRET=""
+# This is the header name that will be used to verify the webhook secret. Should be in lowercase
+CALCOM_WEBHOOK_HEADER_NAME="calcom-webhook-secret"
+CALCOM_CREDENTIAL_SYNC_ENDPOINT=""
+# Key should match on Cal.com and your application
+# must be 32 bytes for AES256 encryption algorithm
+# You can use: `openssl rand -base64 24` to generate one
+CALCOM_APP_CREDENTIAL_ENCRYPTION_KEY=""
+
+# - OIDC E2E TEST *******************************************************************************************
+
+# Ensure this ADMIN EMAIL is present in the SAML_ADMINS list
+E2E_TEST_SAML_ADMIN_EMAIL=
+E2E_TEST_SAML_ADMIN_PASSWORD=
+
+E2E_TEST_OIDC_CLIENT_ID=
+E2E_TEST_OIDC_CLIENT_SECRET=
+E2E_TEST_OIDC_PROVIDER_DOMAIN=
+
+E2E_TEST_OIDC_USER_EMAIL=
+E2E_TEST_OIDC_USER_PASSWORD=
+
+# ***********************************************************************************************************

.github/ISSUE_TEMPLATE/bug_report.md

@@ -22,18 +22,18 @@ Any other relevant information. For example, why do you consider this a bug and
 
 ### Actual Results
 
-  - What's happening right now that is different from what is expected
+- What's happening right now that is different from what is expected
 
 ### Expected Results
 
-  - This is an ideal result that the system should get after the tests are performed
+- This is an ideal result that the system should get after the tests are performed
 
 ### Technical details
 
-  - 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.
+- 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.
 
 ### Evidence
 
-  - How was this tested? This is quite mandatory in terms of bugs. Providing evidence of your testing with screenshots or/and videos is an amazing way to prove the bug and a troubleshooting chance to find the solution.
+- How was this tested? This is quite mandatory in terms of bugs. Providing evidence of your testing with screenshots or/and videos is an amazing way to prove the bug and a troubleshooting chance to find the solution.

.github/PULL_REQUEST_TEMPLATE.md

@@ -11,31 +11,32 @@ Fixes # (issue)
 ## Requirement/Documentation
 
 <!-- Please provide all documents that are important to understand the reason of that PR. -->
-  - If there is a requirement document, please, share it here.
-  - If there is ab UI/UX design document, please, share it here.
+
+- If there is a requirement document, please, share it here.
+- If there is ab UI/UX design document, please, share it here.
 
 ## Type of change
 
 <!-- Please delete bullets that are not relevant. -->
 
-  - [ ] Bug fix (non-breaking change which fixes an issue)
-  - [ ] Chore (refactoring code, technical debt, workflow improvements)
-  - [ ] New feature (non-breaking change which adds functionality)
-  - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-  - [ ] This change requires a documentation update
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] Chore (refactoring code, technical debt, workflow improvements)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
 
 ## How should this be tested?
 
 <!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration. Write details that help to start the tests -->
 
-  - Are there environment variables that should be set?
-  - What are the minimal test data to have?
-  - What is expected (happy path) to have (input and output)?
-  - Any other important info that could help to test that PR
+- Are there environment variables that should be set?
+- What are the minimal test data to have?
+- What is expected (happy path) to have (input and output)?
+- Any other important info that could help to test that PR
 
 ## Mandatory Tasks
 
-  - [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
+- [ ] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.
 
 ## Checklist
 

.github/actions/env-read-file/action.yml

@@ -1,17 +0,0 @@
-name: "Set environment variables"
-description: "Configures environment variables for a workflow"
-runs:
-  using: "composite"
-
-  steps:
-    - name: Read env file
-      uses: buildjet/cache@v3
-      id: env-cache
-      with:
-        path: gh.env-${{ github.sha }}
-        key: env-cache
-        restore-keys: env-cache-
-    - name: Set Environment Variables
-      uses: tw3lveparsecs/github-actions-setvars@latest
-      with:
-        envFilePath: gh.env-${{ github.sha }}

.github/workflows/add-PRs-to-project-reviewing-PRs.yml

@@ -1,16 +0,0 @@
-name: Add PRs to project Reviewing PRs
-
-on:
-  pull_request:
-    types:
-      - opened
-
-jobs:
-  add-PR-to-project:
-    name: Add PRs to project Reviewing PRs
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/add-to-project@v0.1.0
-        with:
-          project-url: https://github.com/orgs/calcom/projects/11
-          github-token: ${{ secrets.GH_ACCESS_TOKEN }}

.github/workflows/apply-issue-labels-to-pr.yml

@@ -5,16 +5,15 @@ on:
     types:
       - opened
 
-
 jobs:
   label_on_pr:
     runs-on: ubuntu-latest
-    
+
     permissions:
       contents: none
       issues: read
       pull-requests: write
-    
+
     steps:
       - name: Apply labels from linked issue to PR
         uses: actions/github-script@v5

.github/workflows/check-if-ui-has-changed.yml

@@ -1,7 +1,7 @@
 # .github/workflows/chromatic.yml
 
 # Workflow name
-name: 'Chromatic'
+name: "Chromatic"
 
 # Event for the workflow
 on:

.github/workflows/cron-bookingReminder.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
   cron-bookingReminder:
     env:
@@ -20,4 +20,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-downgradeUsers.yml

@@ -5,7 +5,7 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “Every month at 1st (see https://crontab.guru)
+    # Runs "At 00:00 on day-of-month 1." (see https://crontab.guru)
     - cron: "0 0 1 * *"
 jobs:
   cron-downgradeUsers:
@@ -21,4 +21,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-monthlyDigestEmail.yml

@@ -0,0 +1,33 @@
+name: Cron - monthlyDigestEmail
+
+on:
+  # "Scheduled workflows run on the latest commit on the default or base branch."
+  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
+  schedule:
+    # Runs on the 28th, 29th, 30th and 31st of every month (see https://crontab.guru)
+    - cron: "59 23 28-31 * *"
+jobs:
+  cron-monthlyDigestEmail:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check if today is the last day of the month
+        id: check-last-day
+        run: |
+          LAST_DAY=$(date -d tomorrow +%d)
+          if [ "$LAST_DAY" == "01" ]; then
+            echo "::set-output name=is_last_day::true"
+          else
+            echo "::set-output name=is_last_day::false"
+          fi
+
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_API_KEY && steps.check-last-day.outputs.is_last_day == 'true' }}
+        run: |
+          curl ${{ secrets.APP_URL }}/api/cron/monthlyDigestEmail \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail

.github/workflows/cron-scheduleEmailReminders.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
   cron-scheduleEmailReminders:
     env:
@@ -20,4 +20,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-scheduleSMSReminders.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
   cron-scheduleSMSReminders:
     env:
@@ -20,4 +20,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-scheduleWhatsappReminders.yml

@@ -4,8 +4,8 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “At minute 0, 15, 30, and 45.” (see https://crontab.guru)
-    - cron: "0,15,30,45 * * * *"
+    # Runs "At every 15th minute." (see https://crontab.guru)
+    - cron: "*/15 * * * *"
 jobs:
   cron-scheduleWhatsappReminders:
     env:
@@ -20,4 +20,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-stale-issue.yml

@@ -8,7 +8,7 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs every day (see https://crontab.guru)
+    # Runs "At 00:00." every day (see https://crontab.guru)
     - cron: "0 0 * * *"
   workflow_dispatch:
 jobs:

.github/workflows/cron-syncAppMeta.yml

@@ -5,7 +5,7 @@ on:
   # "Scheduled workflows run on the latest commit on the default or base branch."
   # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
   schedule:
-    # Runs “Every month at 1st (see https://crontab.guru)
+    # Runs "At 00:00 on day-of-month 1." (see https://crontab.guru)
     - cron: "0 0 1 * *"
 jobs:
   cron-syncAppMeta:
@@ -21,4 +21,4 @@ jobs:
             -X POST \
             -H 'content-type: application/json' \
             -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
-            --fail
+            -sSf

.github/workflows/cron-webhooks-triggers.yml

@@ -0,0 +1,23 @@
+name: Cron - webhookTriggers
+
+on:
+  # "Scheduled workflows run on the latest commit on the default or base branch."
+  # — https://docs.github.com/en/actions/learn-github-actions/events-that-trigger-workflows#schedule
+  schedule:
+    # Runs “every 5 minutes” (see https://crontab.guru)
+    - cron: "*/5 * * * *"
+jobs:
+  cron-webhookTriggers:
+    env:
+      APP_URL: ${{ secrets.APP_URL }}
+      CRON_API_KEY: ${{ secrets.CRON_API_KEY }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: cURL request
+        if: ${{ env.APP_URL && env.CRON_API_KEY }}
+        run: |
+          curl ${{ secrets.APP_URL }}/api/cron/webhookTriggers \
+            -X POST \
+            -H 'content-type: application/json' \
+            -H 'authorization: ${{ secrets.CRON_API_KEY }}' \
+            --fail

.github/workflows/crowdin.yml

@@ -19,7 +19,7 @@ jobs:
           token: ${{ secrets.GH_ACCESS_TOKEN }}
 
       - name: crowdin action
-        uses: crowdin/github-action@1.5.1
+        uses: crowdin/github-action@v1.13.0
         with:
           upload_sources: true
           upload_translations: true

.github/workflows/e2e-app-store.yml

@@ -5,7 +5,7 @@ on:
 jobs:
   e2e-app-store:
     timeout-minutes: 20
-    name: E2E App-Store Apps
+    name: E2E App Store (${{ matrix.shard }}/${{ strategy.job-total }})
     runs-on: buildjet-4vcpu-ubuntu-2204
     services:
       postgres:
@@ -15,6 +15,16 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
+    strategy:
+      fail-fast: false
+      matrix:
+        ## There aren't many tests for AppStore. So, just start with 2 shards. Increase if needed.
+        shard: [1, 2]
 
     steps:
       - uses: actions/checkout@v3
@@ -22,16 +32,40 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn test-e2e:app-store
+        run: yarn e2e:app-store --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results
+          name: app-store-results-${{ matrix.shard }}_${{ strategy.job-total }}
           path: test-results

.github/workflows/e2e-embed-react.yml

@@ -1,10 +1,11 @@
-name: E2E Embed tests and booking flow(for non-embed as well)
+name: E2E Embed React tests and booking flow(for non-embed as well)
 on:
   workflow_call:
 
 jobs:
   e2e-embed:
     timeout-minutes: 20
+    name: E2E Embed React (${{ matrix.shard }}/${{ strategy.job-total }})
     runs-on: buildjet-4vcpu-ubuntu-2204
     services:
       postgres:
@@ -14,6 +15,11 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
+    strategy:
+      fail-fast: false
+      matrix:
+        ## There aren't many tests for embed-react. So, just start with 2 shards. Increase if needed.
+        shard: [1, 2]
 
     steps:
       - uses: actions/checkout@v3
@@ -21,18 +27,41 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
         run: |
-          yarn test-e2e:embed-react
+          yarn e2e:embed-react --shard=${{ matrix.shard }}/${{ strategy.job-total }}
           yarn workspace @calcom/embed-react packaged:tests
         env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results
+          name: embed-react-results-${{ matrix.shard }}_${{ strategy.job-total }}
           path: test-results

.github/workflows/e2e-embed.yml

@@ -1,10 +1,11 @@
-name: E2E Embed tests and booking flow(for non-embed as well)
+name: E2E Embed Core tests and booking flow(for non-embed as well)
 on:
   workflow_call:
 
 jobs:
   e2e-embed:
     timeout-minutes: 20
+    name: E2E Embed Core (${{ matrix.shard }}/${{ strategy.job-total }})
     runs-on: buildjet-4vcpu-ubuntu-2204
     services:
       postgres:
@@ -14,6 +15,16 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
+    strategy:
+      fail-fast: false
+      matrix:
+        ## There aren't many tests for embed-core. So, just start with 2 shards. Increase if needed.
+        shard: [1, 2]
 
     steps:
       - uses: actions/checkout@v3
@@ -21,16 +32,40 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
-        run: yarn test-e2e:embed
+        run: yarn e2e:embed --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2
         with:
-          name: test-results
+          name: embed-core-results-${{ matrix.shard }}_${{ strategy.job-total }}
           path: test-results

.github/workflows/e2e.yml

@@ -1,6 +1,8 @@
 name: E2E test
+
 on:
   workflow_call:
+
 jobs:
   e2e:
     timeout-minutes: 20
@@ -14,6 +16,11 @@ jobs:
           POSTGRES_DB: calendso
         ports:
           - 5432:5432
+      mailhog:
+        image: mailhog/mailhog:v1.0.1
+        ports:
+          - 8025:8025
+          - 1025:1025
     strategy:
       fail-fast: false
       matrix:
@@ -24,13 +31,41 @@ jobs:
       - run: echo 'NODE_OPTIONS="--max_old_space_size=4096"' >> $GITHUB_ENV
       - uses: ./.github/actions/yarn-install
       - uses: ./.github/actions/yarn-playwright-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build
       - name: Run Tests
         run: yarn e2e --shard=${{ matrix.shard }}/${{ strategy.job-total }}
         env:
+          ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+          CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+          DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
           DEPLOYSENTINEL_API_KEY: ${{ secrets.DEPLOYSENTINEL_API_KEY }}
+          E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+          E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+          E2E_TEST_MAILHOG_ENABLED: ${{ vars.E2E_TEST_MAILHOG_ENABLED }}
+          GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+          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}}
+          GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+          NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+          NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+          NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+          NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+          NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+          NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+          PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+          PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+          SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+          SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+          STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+          STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+          STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+          SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+          SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
       - name: Upload Test Results
         if: ${{ always() }}
         uses: actions/upload-artifact@v2

.github/workflows/env-create-file.yml

@@ -1,55 +0,0 @@
-name: Create .env file
-
-on:
-  workflow_call:
-
-env:
-  ENV_FILE_NAME: gh.env-${{ github.sha }}
-  INPUT_ENV_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-  INPUT_ENV_NEXT_PUBLIC_WEBAPP_URL: http://localhost:3000
-  INPUT_ENV_NEXT_PUBLIC_WEBSITE_URL: http://localhost:3000
-  INPUT_ENV_NEXTAUTH_SECRET: secret
-  INPUT_ENV_GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
-  INPUT_ENV_GOOGLE_LOGIN_ENABLED: true
-  # INPUT_ENV_CRON_API_KEY: xxx
-  # INPUT_ENV_CRON_ENABLE_APP_SYNC: true|false
-  INPUT_ENV_CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
-  INPUT_ENV_NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
-  INPUT_ENV_STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
-  INPUT_ENV_STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
-  INPUT_ENV_STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
-  INPUT_ENV_PAYMENT_FEE_PERCENTAGE: 0.005
-  INPUT_ENV_PAYMENT_FEE_FIXED: 10
-  INPUT_ENV_SAML_DATABASE_URL: postgresql://postgres:@localhost:5432/calendso
-  INPUT_ENV_SAML_ADMINS: pro@example.com
-  INPUT_ENV_NEXTAUTH_URL: http://localhost:3000
-  INPUT_ENV_NEXT_PUBLIC_IS_E2E: 1
-  # INPUT_ENV_EMAIL_FROM: e2e@cal.com
-  # INPUT_ENV_EMAIL_SERVER_HOST: ${{ secrets.CI_EMAIL_SERVER_HOST }}
-  # INPUT_ENV_EMAIL_SERVER_PORT: ${{ secrets.CI_EMAIL_SERVER_PORT }}
-  # INPUT_ENV_EMAIL_SERVER_USER: ${{ secrets.CI_EMAIL_SERVER_USER }}
-  # INPUT_ENV_EMAIL_SERVER_PASSWORD: ${{ secrets.CI_EMAIL_SERVER_PASSWORD }}
-  # INPUT_ENV_MS_GRAPH_CLIENT_ID: xxx
-  # INPUT_ENV_MS_GRAPH_CLIENT_SECRET: xxx
-  # INPUT_ENV_ZOOM_CLIENT_ID: xxx
-  # INPUT_ENV_ZOOM_CLIENT_SECRET: xxx
-  INPUT_ENV_SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
-  INPUT_ENV_SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
-  INPUT_ENV_TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
-  INPUT_ENV_TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
-
-jobs:
-  create_env_file:
-    runs-on: buildjet-4vcpu-ubuntu-2204
-    steps:
-      - uses: actions/checkout@v3
-      - uses: ./.github/actions/dangerous-git-checkout
-      - uses: ozaytsev86/create-env-file@v1
-
-        with:
-          file-name: ${{ github.workspace }}/${{ env.ENV_FILE_NAME }}
-      - uses: buildjet/cache@v3
-        id: env-cache
-        with:
-          path: ${{ env.ENV_FILE_NAME }}
-          key: env-cache-${{ hashFiles(env.ENV_FILE_NAME) }}

.github/workflows/merge-conflict

@@ -0,0 +1,18 @@
+name: Auto Comment Merge Conflicts
+on: push
+
+permissions:
+  pull-requests: write
+
+jobs:
+  auto-comment-merge-conflicts:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: codytseng/auto-comment-merge-conflicts@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          comment-body: "Hey there, there is a merge conflict, can you take a look?"
+          wait-ms: 3000
+          max-retries: 5
+          label-name: "🚨 merge conflict"
+          ignore-authors: dependabot,otherAuthor

.github/workflows/pr.yml

@@ -44,11 +44,6 @@ jobs:
               - 'packages/embeds/**'
               - 'playwright.config.ts'
 
-  env:
-    name: Create env file
-    uses: ./.github/workflows/env-create-file.yml
-    secrets: inherit
-
   type-check:
     name: Type check
     uses: ./.github/workflows/check-types.yml
@@ -66,13 +61,11 @@ jobs:
 
   build:
     name: Production build
-    needs: env
     uses: ./.github/workflows/production-build.yml
     secrets: inherit
 
   build-without-database:
     name: Production build (without database)
-    needs: env
     uses: ./.github/workflows/production-build-without-database.yml
     secrets: inherit
 
@@ -84,21 +77,18 @@ jobs:
 
   e2e-app-store:
     name: E2E App Store tests
-    if: ${{ needs.changes.outputs.app-store == 'true' }}
     needs: [changes, lint, build]
     uses: ./.github/workflows/e2e-app-store.yml
     secrets: inherit
 
   e2e-embed:
     name: E2E embeds tests
-    if: ${{ needs.changes.outputs.embed == 'true' }}
     needs: [changes, lint, build]
     uses: ./.github/workflows/e2e-embed.yml
     secrets: inherit
 
   e2e-embed-react:
     name: E2E React embeds tests
-    if: ${{ needs.changes.outputs.embed-react == 'true' }}
     needs: [changes, lint, build]
     uses: ./.github/workflows/e2e-embed-react.yml
     secrets: inherit
@@ -109,7 +99,7 @@ jobs:
     secrets: inherit
 
   required:
-    needs: [lint, type-check, test, build, e2e]
+    needs: [lint, type-check, test, build, e2e, e2e-embed, e2e-embed-react, e2e-app-store]
     if: always()
     runs-on: buildjet-4vcpu-ubuntu-2204
     steps:

.github/workflows/production-build-without-database.yml

@@ -3,6 +3,32 @@ name: Production Build (without database)
 on:
   workflow_call:
 
+env:
+  ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+  CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+  DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+  E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+  GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+  GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+  NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+  NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+  NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+  NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+  NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+  NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+  PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+  PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+  SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+  SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+  STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+  STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+  STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+  SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+  SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
 jobs:
   build:
     name: Build
@@ -12,5 +38,4 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-build

.github/workflows/production-build.yml

@@ -3,6 +3,32 @@ name: Production Build
 on:
   workflow_call:
 
+env:
+  ALLOWED_HOSTNAMES: ${{ vars.CI_ALLOWED_HOSTNAMES }}
+  CALENDSO_ENCRYPTION_KEY: ${{ secrets.CI_CALENDSO_ENCRYPTION_KEY }}
+  DATABASE_URL: ${{ secrets.CI_DATABASE_URL }}
+  E2E_TEST_APPLE_CALENDAR_EMAIL: ${{ secrets.E2E_TEST_APPLE_CALENDAR_EMAIL }}
+  E2E_TEST_APPLE_CALENDAR_PASSWORD: ${{ secrets.E2E_TEST_APPLE_CALENDAR_PASSWORD }}
+  GOOGLE_API_CREDENTIALS: ${{ secrets.CI_GOOGLE_API_CREDENTIALS }}
+  GOOGLE_LOGIN_ENABLED: ${{ vars.CI_GOOGLE_LOGIN_ENABLED }}
+  NEXTAUTH_SECRET: ${{ secrets.CI_NEXTAUTH_SECRET }}
+  NEXTAUTH_URL: ${{ secrets.CI_NEXTAUTH_URL }}
+  NEXT_PUBLIC_IS_E2E: ${{ vars.CI_NEXT_PUBLIC_IS_E2E }}
+  NEXT_PUBLIC_STRIPE_PUBLIC_KEY: ${{ secrets.CI_NEXT_PUBLIC_STRIPE_PUBLIC_KEY }}
+  NEXT_PUBLIC_WEBAPP_URL: ${{ vars.CI_NEXT_PUBLIC_WEBAPP_URL }}
+  NEXT_PUBLIC_WEBSITE_URL: ${{ vars.CI_NEXT_PUBLIC_WEBSITE_URL }}
+  PAYMENT_FEE_FIXED: ${{ vars.CI_PAYMENT_FEE_FIXED }}
+  PAYMENT_FEE_PERCENTAGE: ${{ vars.CI_PAYMENT_FEE_PERCENTAGE }}
+  SAML_ADMINS: ${{ secrets.CI_SAML_ADMINS }}
+  SAML_DATABASE_URL: ${{ secrets.CI_SAML_DATABASE_URL }}
+  STRIPE_PRIVATE_KEY: ${{ secrets.CI_STRIPE_PRIVATE_KEY }}
+  STRIPE_CLIENT_ID: ${{ secrets.CI_STRIPE_CLIENT_ID }}
+  STRIPE_WEBHOOK_SECRET: ${{ secrets.CI_STRIPE_WEBHOOK_SECRET }}
+  SENDGRID_API_KEY: ${{ secrets.CI_SENDGRID_API_KEY }}
+  SENDGRID_EMAIL: ${{ secrets.CI_SENDGRID_EMAIL }}
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+
 jobs:
   build:
     name: Build
@@ -20,6 +46,5 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/actions/dangerous-git-checkout
       - uses: ./.github/actions/yarn-install
-      - uses: ./.github/actions/env-read-file
       - uses: ./.github/actions/cache-db
       - uses: ./.github/actions/cache-build

.github/workflows/release-docker.yaml

@@ -0,0 +1,47 @@
+name: "Release Docker"
+
+on: # yamllint disable-line rule:truthy
+  release:
+    types:
+      - created
+  # in case manual trigger is needed
+  workflow_dispatch:
+    inputs:
+      RELEASE_TAG:
+        description: "v{Major}.{Minor}.{Patch}"
+
+jobs:
+  release:
+    name: "Remote Release"
+
+    runs-on: "ubuntu-latest"
+
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - name: "Determine tag"
+        run: 'echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV'
+
+      - name: "Run remote release workflow"
+        uses: "actions/github-script@v6"
+        with:
+          # Requires a personal access token with Actions Read and write permissions on calcom/docker.
+          github-token: "${{ secrets.DOCKER_REPO_ACCESS_TOKEN }}"
+          script: |
+            try {
+              const response = await github.rest.actions.createWorkflowDispatch({
+                owner: context.repo.owner,
+                repo: 'docker',
+                workflow_id: 'create-release.yaml',
+                ref: 'main',
+                inputs: {
+                  "RELEASE_TAG": process.env.RELEASE_TAG
+                },
+              });
+
+              console.log(response);
+            } catch (error) {
+              console.error(error);
+              core.setFailed(error.message);
+            }

.github/workflows/semantic-pull-requests.yml

@@ -29,11 +29,11 @@ jobs:
           header: pr-title-lint-error
           message: |
             Hey there and thank you for opening this pull request! 👋🏼
-            
+
             We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
 
             Details:
-            
+
             ```
             ${{ steps.lint_pr_title.outputs.error_message }}
             ```
@@ -41,7 +41,7 @@ jobs:
       # Delete a previous comment when the issue has been resolved
       - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
         uses: marocchino/sticky-pull-request-comment@v2
-        with:   
+        with:
           header: pr-title-lint-error
           message: |
-            Thank you for following the naming conventions! 🙏 
+            Thank you for following the naming conventions! 🙏

.github/workflows/submodule-sync.yml

@@ -1,6 +1,7 @@
 name: Submodule Sync
 on:
   schedule:
+    # Runs "At minute 15 past every 4th hour." (see https://crontab.guru)
     - cron: "15 */4 * * *"
   workflow_dispatch: ~
 jobs:

.github/workflows/welcome-new-contributors.yml

@@ -1,28 +1,27 @@
 name: "Welcome new contributors"
 
 on:
- issues:
-  types: opened
- pull_request:
-   types: opened
+  issues:
+    types: opened
+  pull_request:
+    types: opened
 
 permissions:
   pull-requests: write
   issues: write
 
 jobs:
- welcome-message:
-  name: Welcoming New Users
-  runs-on: ubuntu-latest
-  timeout-minutes: 10
-  needs: semantics
-  if: github.event.action == 'opened'
-  steps:
-    - uses: actions/first-interaction@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        pr-message: |-
-          Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
-          Feel free to join the conversation at [discord](https://go.cal.com/discord)
-        issue-message: |
-          Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉
+  welcome-message:
+    name: Welcoming New Users
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    if: github.event.action == 'opened'
+    steps:
+      - uses: actions/first-interaction@v1
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          pr-message: |-
+            Thank you for making your first Pull Request and taking the time to improve Cal.com ! ❤️🎉
+            Feel free to join the conversation at [discord](https://go.cal.com/discord)
+          issue-message: |
+            Thank you for opening your first issue, one of our team members will review it as soon as it possible. ❤️🎉

.gitpod.yml

@@ -40,4 +40,4 @@ vscode:
     - bradlc.vscode-tailwindcss
     - ban.spellright
     - stripe.vscode-stripe
-    - Prisma.prisma
+    - Prisma.prisma

.prettierignore

@@ -7,7 +7,6 @@ public
 
 *.lock
 *.log
-*.test.ts
 
 .gitignore
 .npmignore

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing to Cal.com
 
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+Contributions are what makes the open source community such an amazing place to 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.
 
@@ -37,7 +37,7 @@ Contributions are what make the open source community such an amazing place to l
   </tr>
   <tr>
     <td>
-      Core Features (Booking page, availabilty, timezone calculation)
+      Core Features (Booking page, availability, timezone calculation)
     </td>
     <td>
       <a href="https://github.com/calcom/cal.com/issues?q=is:issue+is:open+sort:updated-desc+label:%22High+priority%22">
@@ -132,7 +132,7 @@ 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. See 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 [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 your 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. See 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.
+- Review [App Contribution Guidelines](./packages/app-store/CONTRIBUTING.md) when building integrations

README.md

@@ -51,9 +51,9 @@
 # Scheduling infrastructure for absolutely everyone
 
 The open source Calendly alternative. You are in charge
-of your own data, workflow and appearance.
+of your own data, workflow, and appearance.
 
-Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes and even calls with our families. However, most tools are very limited in terms of control and customizations.
+Calendly and other scheduling tools are awesome. It made our lives massively easier. We're using it for business meetings, seminars, yoga classes, and even calls with our families. However, most tools are very limited in terms of control and customization.
 
 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.
 
@@ -90,7 +90,6 @@ That's where Cal.com comes in. Self-hosted or hosted by us. White-label by desig
 - [Prisma.io](https://prisma.io/?ref=cal.com)
 - [Daily.co](https://go.cal.com/daily)
 
-
 ## Contact us
 
 Meet our sales team for any commercial inquiries.
@@ -99,7 +98,7 @@ Meet our sales team for any commercial inquiries.
 
 ## Stay Up-to-Date
 
-Cal.com officially launched as v.1.0 on 15th of September 2021 and we've come a long way so far. Watch **releases** of this repository to be notified of future updates:
+Cal.com officially launched as v.1.0 on the 15th of September 2021 and we've come a long way so far. Watch **releases** of this repository to be notified of future updates:
 
 ![cal-star-github](https://user-images.githubusercontent.com/8019099/154853944-a9e3c999-3da3-4048-b149-b4f73893c6fb.gif)
 
@@ -129,7 +128,7 @@ Here is what you need to be able to run Cal.com.
    git clone https://github.com/calcom/cal.com.git
    ```
 
-   > If you are on windows, run the following command on `gitbash` with admin privileges: <br> > `git clone -c core.symlinks=true https://github.com/calcom/cal.com.git` <br>
+   > If you are on Windows, run the following command on `gitbash` with admin privileges: <br> > `git clone -c core.symlinks=true https://github.com/calcom/cal.com.git` <br>
    > See [docs](https://cal.com/docs/how-to-guides/how-to-troubleshoot-symbolic-link-issues-on-windows#enable-symbolic-links) for more details.
 
 1. Go to the project folder
@@ -222,6 +221,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env
    ```
 
 1. Run [mailhog](https://github.com/mailhog/MailHog) to view emails sent during development
+   > **_NOTE:_** Required when `E2E_TEST_MAILHOG_ENABLED` is "1"
 
    ```sh
    docker pull mailhog/mailhog
@@ -255,7 +255,7 @@ Be sure to set the environment variable `NEXTAUTH_URL` to the correct value. If
 # In a terminal just run:
 yarn test-e2e
 
-# To open last HTML report run:
+# To open the last HTML report run:
 yarn playwright show-report test-results/reports/playwright-html-report
 ```
 
@@ -423,7 +423,7 @@ yarn seed-app-store
 ```
 
 You will need to complete a few more steps to activate Google Calendar App.
-Make sure to complete section "Obtaining the Google API Credentials". After the do the
+Make sure to complete section "Obtaining the Google API Credentials". After that do the
 following
 
 1. Add extra redirect URL `<Cal.com URL>/api/auth/callback/google`
@@ -449,8 +449,8 @@ following
 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 `<Cal.com URL>/api/integrations/zoomvideo/callback` replacing Cal.com URL with the URI at which your application runs.
-10. Also add the redirect URL given above as a allow list 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`.
+10. Also add the redirect URL given above as an allow list 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 on "Scopes" and then on "+ 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.com settings.
 
@@ -462,6 +462,18 @@ following
 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://daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording.
 
+### Obtaining Basecamp Client ID and Secret
+
+1. Visit the [37 Signals Integrations Dashboard](launchpad.37signals.com/integrations) and sign in.
+2. Register a new application by clicking the Register one now link.
+3. Fill in your company details.
+4. Select Basecamp 4 as the product to integrate with.
+5. Set the Redirect URL for OAuth `<Cal.com URL>/api/integrations/basecamp3/callback` replacing Cal.com URL with the URI at which your application runs.
+6. Click on done and copy the Client ID and secret into the `BASECAMP3_CLIENT_ID` and `BASECAMP3_CLIENT_SECRET` fields.
+7. Set the `BASECAMP3_CLIENT_SECRET` env variable to `{your_domain} ({support_email})`. 
+For example, `Cal.com (support@cal.com)`.
+
+
 ### Obtaining HubSpot Client ID and Secret
 
 1. Open [HubSpot Developer](https://developer.hubspot.com/) and sign into your account, or create a new one.
@@ -514,7 +526,7 @@ following
 3. Copy Account SID to your `.env` file into the `TWILIO_SID` field
 4. Copy Auth Token to your `.env` file into the `TWILIO_TOKEN` field
 5. Copy your Twilio phone number to your `.env` file into the `TWILIO_PHONE_NUMBER` field
-6. Add your own sender id to the `.env` file into the `NEXT_PUBLIC_SENDER_ID` field (fallback is Cal.com)
+6. Add your own sender ID to the `.env` file into the `NEXT_PUBLIC_SENDER_ID` field (fallback is Cal.com)
 7. Create a messaging service (Develop -> Messaging -> Services)
 8. Choose any name for the messaging service
 9. Click 'Add Senders'
@@ -546,6 +558,4 @@ Special thanks to these amazing projects which help power Cal.com:
 - [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.

apps/ai/.env.example

@@ -0,0 +1,15 @@
+BACKEND_URL=http://localhost:3002/api
+
+APP_ID=cal-ai
+APP_URL=http://localhost:3000/apps/cal-ai
+
+# Used to verify requests from sendgrid. You can generate a new one with: `openssl rand -hex 32`
+PARSE_KEY=
+
+OPENAI_API_KEY=
+
+# Optionally trace completions at https://smith.langchain.com
+# LANGCHAIN_TRACING_V2=true
+# LANGCHAIN_ENDPOINT=
+# LANGCHAIN_API_KEY=
+# LANGCHAIN_PROJECT=

apps/ai/README.md

@@ -0,0 +1,48 @@
+# Cal.com Email Assistant
+
+Welcome to the first stage of Cal AI!
+
+This app lets you chat with your calendar via email:
+
+  - Turn informal emails into bookings eg. forward "wanna meet tmrw at 2pm?"
+  - List and rearrange your bookings eg. "Cancel my next meeting"
+  - Answer basic questions about your busiest times eg. "How does my Tuesday look?"
+
+The core logic is contained in [agent/route.ts](/apps/ai/src/app/api/agent/route.ts). Here, a [LangChain Agent Executor](https://docs.langchain.com/docs/components/agents/agent-executor) is tasked with following your instructions. Given your last-known timezone, working hours, and busy times, it attempts to CRUD your bookings.
+
+_The AI agent can only choose from a set of tools, without ever seeing your API key._
+
+Emails are cleaned and routed in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts) using [MailParser](https://nodemailer.com/extras/mailparser/).
+
+Incoming emails are routed by email address. Addresses are verified by [DKIM record](https://support.google.com/a/answer/174124?hl=en), making it hard to spoof them.
+
+## Getting Started
+
+### Development
+
+If you haven't yet, please run the [root setup](/README.md) steps.
+
+Before running the app, please see [env.mjs](./src/env.mjs) for all required environment variables. You'll need:
+
+  - An [OpenAI API key](https://platform.openai.com/account/api-keys) with access to GPT-4
+  - A [SendGrid API key](https://app.sendgrid.com/settings/api_keys)
+  - A default sender email (for example, `ai@cal.dev`)
+  - The Cal AI's app ID and URL (see [add.ts](/packages/app-store/cal-ai/api/index.ts))
+
+To stand up the API and AI apps simultaneously, simply run `yarn dev:ai`.
+
+### Email Router
+
+To expose the AI app, run `ngrok http 3000` (or the AI app's port number) in a new terminal. You may need to install [nGrok](https://ngrok.com/).
+
+To forward incoming emails to the Node.js server, one option is to use [SendGrid's Inbound Parse Webhook](https://docs.sendgrid.com/for-developers/parsing-email/setting-up-the-inbound-parse-webhook).
+
+1.  [Sign up for an account](https://signup.sendgrid.com/)
+2.  Go to Settings > [Inbound Parse](https://app.sendgrid.com/settings/parse) > Add Host & URL.
+3.  For subdomain, use `<sub>.<domain>.com` for now, where `sub` can be any subdomain but `domain.com` will need to be verified via MX records in your environment variables, eg. on [Vercel](https://vercel.com/guides/how-to-add-vercel-environment-variables).
+4.  Use the nGrok URL from above as the **Destination URL**.
+5.  Activate "POST the raw, full MIME message".
+6.  Send an email to `<anyone>@ai.example.com`. You should see a ping on the nGrok listener and Node.js server.
+7.  Adjust the logic in [receive/route.ts](/apps/ai/src/app/api/receive/route.ts), save to hot-reload, and send another email to test the behaviour.
+
+Please feel free to improve any part of this architecture.

apps/ai/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/ai/next.config.js

@@ -0,0 +1,24 @@
+const withBundleAnalyzer = require("@next/bundle-analyzer");
+
+const plugins = [];
+plugins.push(withBundleAnalyzer({ enabled: process.env.ANALYZE === "true" }));
+
+/** @type {import("next").NextConfig} */
+const nextConfig = {
+  async redirects() {
+    return [
+      {
+        source: "/",
+        destination: "https://cal.com/ai",
+        permanent: true,
+      },
+    ];
+  },
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en"],
+  },
+  reactStrictMode: true,
+};
+
+module.exports = () => plugins.reduce((acc, next) => next(acc), nextConfig);

apps/ai/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@calcom/ai",
+  "version": "1.0.1",
+  "private": true,
+  "author": "Cal.com Inc.",
+  "dependencies": {
+    "@calcom/prisma": "*",
+    "@t3-oss/env-nextjs": "^0.6.1",
+    "langchain": "^0.0.131",
+    "mailparser": "^3.6.5",
+    "next": "^13.4.6",
+    "supports-color": "8.1.1",
+    "zod": "^3.22.2"
+  },
+  "devDependencies": {
+    "@types/mailparser": "^3.4.0"
+  },
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev -p 3005",
+    "format": "npx prettier . --write",
+    "lint": "eslint . --ext .ts,.js,.tsx,.jsx",
+    "lint:fix": "eslint . --ext .ts,.js,.tsx,.jsx --fix",
+    "start": "next start"
+  }
+}

apps/ai/src/app/api/agent/route.ts

@@ -0,0 +1,45 @@
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import agent from "../../../utils/agent";
+import sendEmail from "../../../utils/sendEmail";
+import { verifyParseKey } from "../../../utils/verifyParseKey";
+
+/**
+ * Launches a LangChain agent to process an incoming email,
+ * then sends the response to the user.
+ */
+export const POST = async (request: NextRequest) => {
+  const verified = verifyParseKey(request.url);
+
+  if (!verified) {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  const json = await request.json();
+
+  const { apiKey, userId, message, subject, user, replyTo } = json;
+
+  if ((!message && !subject) || !user) {
+    return new NextResponse("Missing fields", { status: 400 });
+  }
+
+  try {
+    const response = await agent(`${subject}\n\n${message}`, user, apiKey, userId);
+
+    // Send response to user
+    await sendEmail({
+      subject: `Re: ${subject}`,
+      text: response.replace(/(?:\r\n|\r|\n)/g, "\n"),
+      to: user.email,
+      from: replyTo,
+    });
+
+    return new NextResponse("ok");
+  } catch (error) {
+    return new NextResponse(
+      (error as Error).message || "Something went wrong. Please try again or reach out for help.",
+      { status: 500 }
+    );
+  }
+};

apps/ai/src/app/api/receive/route.ts

@@ -0,0 +1,154 @@
+import type { ParsedMail, Source } from "mailparser";
+import { simpleParser } from "mailparser";
+import type { NextRequest } from "next/server";
+import { NextResponse } from "next/server";
+
+import prisma from "@calcom/prisma";
+
+import { env } from "../../../env.mjs";
+import { fetchAvailability } from "../../../tools/getAvailability";
+import { fetchEventTypes } from "../../../tools/getEventTypes";
+import getHostFromHeaders from "../../../utils/host";
+import now from "../../../utils/now";
+import sendEmail from "../../../utils/sendEmail";
+import { verifyParseKey } from "../../../utils/verifyParseKey";
+
+/**
+ * Verifies email signature and app authorization,
+ * then hands off to booking agent.
+ */
+export const POST = async (request: NextRequest) => {
+  const verified = verifyParseKey(request.url);
+
+  if (!verified) {
+    return new NextResponse("Unauthorized", { status: 401 });
+  }
+
+  const formData = await request.formData();
+  const body = Object.fromEntries(formData);
+
+  // body.dkim looks like {@domain-com.22222222.gappssmtp.com : pass}
+  const signature = (body.dkim as string).includes(" : pass");
+
+  const envelope = JSON.parse(body.envelope as string);
+
+  const aiEmail = envelope.to[0];
+
+  // Parse email from mixed MIME type
+  const parsed: ParsedMail = await simpleParser(body.email as Source);
+
+  if (!parsed.text && !parsed.subject) {
+    return new NextResponse("Email missing text and subject", { status: 400 });
+  }
+
+  const user = await prisma.user.findUnique({
+    select: {
+      email: true,
+      id: true,
+      timeZone: true,
+      credentials: {
+        select: {
+          appId: true,
+          key: true,
+        },
+      },
+    },
+    where: { email: envelope.from },
+  });
+
+  // User is not a cal.com user or is using an unverified email.
+  if (!signature || !user) {
+    await sendEmail({
+      html: `Thanks for your interest in Cal AI! To get started, Make sure you have a <a href="https://cal.com/signup" target="_blank">cal.com</a> account with this email address.`,
+      subject: `Re: ${body.subject}`,
+      text: `Thanks for your interest in Cal AI! To get started, Make sure you have a cal.com account with this email address. You can sign up for an account at: https://cal.com/signup`,
+      to: envelope.from,
+      from: aiEmail,
+    });
+
+    return new NextResponse("ok");
+  }
+
+  const credential = user.credentials.find((c) => c.appId === env.APP_ID)?.key;
+
+  // User has not installed the app from the app store. Direct them to install it.
+  if (!(credential as { apiKey: string })?.apiKey) {
+    const url = env.APP_URL;
+
+    await sendEmail({
+      html: `Thanks for using Cal AI! To get started, the app must be installed. <a href=${url} target="_blank">Click this link</a> to install it.`,
+      subject: `Re: ${body.subject}`,
+      text: `Thanks for using Cal AI! To get started, the app must be installed. Click this link to install the Cal AI app: ${url}`,
+      to: envelope.from,
+      from: aiEmail,
+    });
+
+    return new NextResponse("ok");
+  }
+
+  const { apiKey } = credential as { apiKey: string };
+
+  // Pre-fetch data relevant to most bookings.
+  const [eventTypes, availability] = await Promise.all([
+    fetchEventTypes({
+      apiKey,
+    }),
+    fetchAvailability({
+      apiKey,
+      userId: user.id,
+      dateFrom: now(user.timeZone),
+      dateTo: now(user.timeZone),
+    }),
+  ]);
+
+  if ("error" in availability) {
+    await sendEmail({
+      subject: `Re: ${body.subject}`,
+      text: "Sorry, there was an error fetching your availability. Please try again.",
+      to: user.email,
+      from: aiEmail,
+    });
+    console.error(availability.error);
+    return new NextResponse("Error fetching availability. Please try again.", { status: 400 });
+  }
+
+  if ("error" in eventTypes) {
+    await sendEmail({
+      subject: `Re: ${body.subject}`,
+      text: "Sorry, there was an error fetching your event types. Please try again.",
+      to: user.email,
+      from: aiEmail,
+    });
+    console.error(eventTypes.error);
+    return new NextResponse("Error fetching event types. Please try again.", { status: 400 });
+  }
+
+  const { workingHours } = availability;
+
+  const appHost = getHostFromHeaders(request.headers);
+
+  // Hand off to long-running agent endpoint to handle the email. (don't await)
+  fetch(`${appHost}/api/agent?parseKey=${env.PARSE_KEY}`, {
+    body: JSON.stringify({
+      apiKey,
+      userId: user.id,
+      message: parsed.text,
+      subject: parsed.subject,
+      replyTo: aiEmail,
+      user: {
+        email: user.email,
+        eventTypes,
+        timeZone: user.timeZone,
+        workingHours,
+      },
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+
+  await new Promise((r) => setTimeout(r, 1000));
+
+  return new NextResponse("ok");
+};

apps/ai/src/env.mjs

@@ -0,0 +1,43 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /**
+   * Specify your client-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars. To expose them to the client, prefix them with
+   * `NEXT_PUBLIC_`.
+   */
+  client: {
+    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
+  },
+
+  /**
+   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
+   * middlewares) or client-side so we need to destruct manually.
+   */
+  runtimeEnv: {
+    BACKEND_URL: process.env.BACKEND_URL,
+    APP_ID: process.env.APP_ID,
+    APP_URL: process.env.APP_URL,
+    PARSE_KEY: process.env.PARSE_KEY,
+    NODE_ENV: process.env.NODE_ENV,
+    OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
+    DATABASE_URL: process.env.DATABASE_URL,
+  },
+
+  /**
+   * Specify your server-side environment variables schema here. This way you can ensure the app
+   * isn't built with invalid env vars.
+   */
+  server: {
+    BACKEND_URL: z.string().url(),
+    APP_ID: z.string().min(1),
+    APP_URL: z.string().url(),
+    PARSE_KEY: z.string().min(1),
+    NODE_ENV: z.enum(["development", "test", "production"]),
+    OPENAI_API_KEY: z.string().min(1),
+    SENDGRID_API_KEY: z.string().min(1),
+    DATABASE_URL: z.string().url(),
+  },
+});

apps/ai/src/tools/createBookingIfAvailable.ts

@@ -0,0 +1,110 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+
+/**
+ * Creates a booking for a user by event type, times, and timezone.
+ */
+const createBooking = async ({
+  apiKey,
+  userId,
+  eventTypeId,
+  start,
+  end,
+  timeZone,
+  language,
+  responses,
+}: {
+  apiKey: string;
+  userId: number;
+  eventTypeId: number;
+  start: string;
+  end: string;
+  timeZone: string;
+  language: string;
+  responses: { name?: string; email?: string; location?: string };
+  title?: string;
+  status?: string;
+}): Promise<string | Error | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings?${urlParams.toString()}`;
+
+  const response = await fetch(url, {
+    body: JSON.stringify({
+      end,
+      eventTypeId,
+      language,
+      metadata: {},
+      responses,
+      start,
+      timeZone,
+    }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+
+  // Let GPT handle this. This will happen when wrong event type id is used.
+  // if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return {
+      error: data.message,
+    };
+  }
+
+  return "Booking created";
+};
+
+const createBookingTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description:
+      "Tries to create a booking. If the user is unavailable, it will return availability that day, allowing you to avoid the getAvailability step in many cases.",
+    func: async ({ eventTypeId, start, end, timeZone, language, responses, title, status }) => {
+      return JSON.stringify(
+        await createBooking({
+          apiKey,
+          userId,
+          end,
+          eventTypeId,
+          language,
+          responses,
+          start,
+          status,
+          timeZone,
+          title,
+        })
+      );
+    },
+    name: "createBookingIfAvailable",
+    schema: z.object({
+      end: z
+        .string()
+        .describe("This should correspond to the event type's length, unless otherwise specified."),
+      eventTypeId: z.number(),
+      language: z.string(),
+      responses: z
+        .object({
+          email: z.string().optional(),
+          name: z.string().optional(),
+        })
+        .describe("External invited user. Not the user making the request."),
+      start: z.string(),
+      status: z.string().optional().describe("ACCEPTED, PENDING, CANCELLED or REJECTED"),
+      timeZone: z.string(),
+      title: z.string().optional(),
+    }),
+  });
+};
+
+export default createBookingTool;

apps/ai/src/tools/deleteBooking.ts

@@ -0,0 +1,66 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+
+/**
+ * Cancels a booking for a user by ID with reason.
+ */
+const cancelBooking = async ({
+  apiKey,
+  id,
+  reason,
+}: {
+  apiKey: string;
+  id: string;
+  reason: string;
+}): Promise<string | { error: string }> => {
+  const params = {
+    apiKey,
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings/${id}/cancel?${urlParams.toString()}`;
+
+  const response = await fetch(url, {
+    body: JSON.stringify({ reason }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "DELETE",
+  });
+
+  // Let GPT handle this. This will happen when wrong booking id is used.
+  // if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return "Booking cancelled";
+};
+
+const cancelBookingTool = (apiKey: string) => {
+  return new DynamicStructuredTool({
+    description: "Cancel a booking",
+    func: async ({ id, reason }) => {
+      return JSON.stringify(
+        await cancelBooking({
+          apiKey,
+          id,
+          reason,
+        })
+      );
+    },
+    name: "cancelBooking",
+    schema: z.object({
+      id: z.string(),
+      reason: z.string(),
+    }),
+  });
+};
+
+export default cancelBookingTool;

apps/ai/src/tools/getAvailability.ts

@@ -0,0 +1,82 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { Availability } from "../types/availability";
+
+/**
+ * Fetches availability for a user by date range and event type.
+ */
+export const fetchAvailability = async ({
+  apiKey,
+  userId,
+  dateFrom,
+  dateTo,
+  eventTypeId,
+}: {
+  apiKey: string;
+  userId: number;
+  dateFrom: string;
+  dateTo: string;
+  eventTypeId?: number;
+}): Promise<Partial<Availability> | { error: string }> => {
+  const params: { [k: string]: string } = {
+    apiKey,
+    userId: userId.toString(),
+    dateFrom,
+    dateTo,
+  };
+
+  if (eventTypeId) params["eventTypeId"] = eventTypeId.toString();
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/availability?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return {
+    busy: data.busy,
+    dateRanges: data.dateRanges,
+    timeZone: data.timeZone,
+    workingHours: data.workingHours,
+  };
+};
+
+const getAvailabilityTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description: "Get availability within range.",
+    func: async ({ dateFrom, dateTo, eventTypeId }) => {
+      return JSON.stringify(
+        await fetchAvailability({
+          apiKey,
+          userId,
+          dateFrom,
+          dateTo,
+          eventTypeId,
+        })
+      );
+    },
+    name: "getAvailability",
+    schema: z.object({
+      dateFrom: z.string(),
+      dateTo: z.string(),
+      eventTypeId: z
+        .number()
+        .optional()
+        .describe(
+          "The ID of the event type to filter availability for if you've called getEventTypes, otherwise do not include."
+        ),
+    }),
+  });
+};
+
+export default getAvailabilityTool;

apps/ai/src/tools/getBookings.ts

@@ -0,0 +1,75 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { Booking } from "../types/booking";
+import { BOOKING_STATUS } from "../types/booking";
+
+/**
+ * Fetches bookings for a user by date range.
+ */
+const fetchBookings = async ({
+  apiKey,
+  userId,
+  from,
+  to,
+}: {
+  apiKey: string;
+  userId: number;
+  from: string;
+  to: string;
+}): Promise<Booking[] | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  const bookings: Booking[] = data.bookings
+    .filter((booking: Booking) => {
+      const afterFrom = new Date(booking.startTime).getTime() > new Date(from).getTime();
+      const beforeTo = new Date(booking.endTime).getTime() < new Date(to).getTime();
+      const notCancelled = booking.status !== BOOKING_STATUS.CANCELLED;
+
+      return afterFrom && beforeTo && notCancelled;
+    })
+    .map(({ endTime, eventTypeId, id, startTime, status, title }: Booking) => ({
+      endTime,
+      eventTypeId,
+      id,
+      startTime,
+      status,
+      title,
+    }));
+
+  return bookings;
+};
+
+const getBookingsTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description: "Get bookings for a user between two dates.",
+    func: async ({ from, to }) => {
+      return JSON.stringify(await fetchBookings({ apiKey, userId, from, to }));
+    },
+    name: "getBookings",
+    schema: z.object({
+      from: z.string().describe("ISO 8601 datetime string"),
+      to: z.string().describe("ISO 8601 datetime string"),
+    }),
+  });
+};
+
+export default getBookingsTool;

apps/ai/src/tools/getEventTypes.ts

@@ -0,0 +1,51 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+import type { EventType } from "../types/eventType";
+
+/**
+ * Fetches event types by user ID.
+ */
+export const fetchEventTypes = async ({ apiKey }: { apiKey: string }) => {
+  const params = {
+    apiKey,
+  };
+
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/event-types?${urlParams.toString()}`;
+
+  const response = await fetch(url);
+
+  if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return data.event_types.map((eventType: EventType) => ({
+    id: eventType.id,
+    length: eventType.length,
+    title: eventType.title,
+  }));
+};
+
+const getEventTypesTool = (apiKey: string) => {
+  return new DynamicStructuredTool({
+    description: "Get the user's event type IDs. Usually necessary to book a meeting.",
+    func: async () => {
+      return JSON.stringify(
+        await fetchEventTypes({
+          apiKey,
+        })
+      );
+    },
+    name: "getEventTypes",
+    schema: z.object({}),
+  });
+};
+
+export default getEventTypesTool;

apps/ai/src/tools/updateBooking.ts

@@ -0,0 +1,85 @@
+import { DynamicStructuredTool } from "langchain/tools";
+import { z } from "zod";
+
+import { env } from "../env.mjs";
+
+/**
+ * Edits a booking for a user by booking ID with new times, title, description, or status.
+ */
+const editBooking = async ({
+  apiKey,
+  userId,
+  id,
+  startTime, // In the docs it says start, but it's startTime: https://cal.com/docs/enterprise-features/api/api-reference/bookings#edit-an-existing-booking.
+  endTime, // Same here: it says end but it's endTime.
+  title,
+  description,
+  status,
+}: {
+  apiKey: string;
+  userId: number;
+  id: string;
+  startTime?: string;
+  endTime?: string;
+  title?: string;
+  description?: string;
+  status?: string;
+}): Promise<string | { error: string }> => {
+  const params = {
+    apiKey,
+    userId: userId.toString(),
+  };
+  const urlParams = new URLSearchParams(params);
+
+  const url = `${env.BACKEND_URL}/bookings/${id}?${urlParams.toString()}`;
+
+  const response = await fetch(url, {
+    body: JSON.stringify({ description, endTime, startTime, status, title }),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "PATCH",
+  });
+
+  // Let GPT handle this. This will happen when wrong booking id is used.
+  // if (response.status === 401) throw new Error("Unauthorized");
+
+  const data = await response.json();
+
+  if (response.status !== 200) {
+    return { error: data.message };
+  }
+
+  return "Booking edited";
+};
+
+const editBookingTool = (apiKey: string, userId: number) => {
+  return new DynamicStructuredTool({
+    description: "Edit a booking",
+    func: async ({ description, endTime, id, startTime, status, title }) => {
+      return JSON.stringify(
+        await editBooking({
+          apiKey,
+          userId,
+          description,
+          endTime,
+          id,
+          startTime,
+          status,
+          title,
+        })
+      );
+    },
+    name: "editBooking",
+    schema: z.object({
+      description: z.string().optional(),
+      endTime: z.string().optional(),
+      id: z.string(),
+      startTime: z.string().optional(),
+      status: z.string().optional(),
+      title: z.string().optional(),
+    }),
+  });
+};
+
+export default editBookingTool;

apps/ai/src/types/availability.ts

@@ -0,0 +1,25 @@
+export type Availability = {
+  busy: {
+    start: string;
+    end: string;
+    title?: string;
+  }[];
+  timeZone: string;
+  dateRanges: {
+    start: string;
+    end: string;
+  }[];
+  workingHours: {
+    days: number[];
+    startTime: number;
+    endTime: number;
+    userId: number;
+  }[];
+  dateOverrides: {
+    date: string;
+    startTime: number;
+    endTime: number;
+    userId: number;
+  };
+  currentSeats: number;
+};

apps/ai/src/types/booking.ts

@@ -0,0 +1,23 @@
+export enum BOOKING_STATUS {
+  ACCEPTED = "ACCEPTED",
+  PENDING = "PENDING",
+  CANCELLED = "CANCELLED",
+  REJECTED = "REJECTED",
+}
+
+export type Booking = {
+  id: number;
+  userId: number;
+  description: string | null;
+  eventTypeId: number;
+  uid: string;
+  title: string;
+  startTime: string;
+  endTime: string;
+  attendees: { email: string; name: string; timeZone: string; locale: string }[] | null;
+  user: { email: string; name: string; timeZone: string; locale: string }[] | null;
+  payment: { id: number; success: boolean; paymentOption: string }[];
+  metadata: object | null;
+  status: BOOKING_STATUS;
+  responses: { email: string; name: string; location: string } | null;
+};

apps/ai/src/types/eventType.ts

@@ -0,0 +1,13 @@
+export type EventType = {
+  id: number;
+  title: string;
+  length: number;
+  metadata: object;
+  slug: string;
+  hosts: {
+    userId: number;
+    isFixed: boolean;
+  }[];
+  hidden: boolean;
+  // ...
+};

apps/ai/src/types/user.ts

@@ -0,0 +1,9 @@
+import type { EventType } from "./eventType";
+import type { WorkingHours } from "./workingHours";
+
+export type User = {
+  email: string;
+  timeZone: string;
+  eventTypes: EventType[];
+  workingHours: WorkingHours[];
+};

apps/ai/src/types/workingHours.ts

@@ -0,0 +1,5 @@
+export type WorkingHours = {
+  days: number[];
+  startTime: number;
+  endTime: number;
+};

apps/ai/src/utils/agent.ts

@@ -0,0 +1,73 @@
+import { initializeAgentExecutorWithOptions } from "langchain/agents";
+import { ChatOpenAI } from "langchain/chat_models/openai";
+
+import { env } from "../env.mjs";
+import createBookingIfAvailable from "../tools/createBookingIfAvailable";
+import deleteBooking from "../tools/deleteBooking";
+import getAvailability from "../tools/getAvailability";
+import getBookings from "../tools/getBookings";
+import updateBooking from "../tools/updateBooking";
+import type { EventType } from "../types/eventType";
+import type { User } from "../types/user";
+import type { WorkingHours } from "../types/workingHours";
+import now from "./now";
+
+const gptModel = "gpt-4";
+
+/**
+ * Core of the Cal AI booking agent: a LangChain Agent Executor.
+ * Uses a toolchain to book meetings, list available slots, etc.
+ * Uses OpenAI functions to better enforce JSON-parsable output from the LLM.
+ */
+const agent = async (input: string, user: User, apiKey: string, userId: number) => {
+  const tools = [
+    createBookingIfAvailable(apiKey, userId),
+    getAvailability(apiKey, userId),
+    getBookings(apiKey, userId),
+    updateBooking(apiKey, userId),
+    deleteBooking(apiKey),
+  ];
+
+  const model = new ChatOpenAI({
+    modelName: gptModel,
+    openAIApiKey: env.OPENAI_API_KEY,
+    temperature: 0,
+  });
+
+  /**
+   * Initialize the agent executor with arguments.
+   */
+  const executor = await initializeAgentExecutorWithOptions(tools, model, {
+    agentArgs: {
+      prefix: `You are Cal AI - a bleeding edge scheduling assistant that interfaces via email.
+            Make sure your final answers are definitive, complete and well formatted.
+            Sometimes, tools return errors. In this case, try to handle the error intelligently or ask the user for more information.
+            Tools will always handle times in UTC, but times sent to the user should be formatted per that user's timezone.
+
+            The current time in the user's timezone is: ${now(user.timeZone)}
+            The user's time zone is: ${user.timeZone}
+            The user's event types are: ${user.eventTypes
+              .map((e: EventType) => `ID: ${e.id}, Title: ${e.title}, Length: ${e.length}`)
+              .join("\n")}
+            The user's working hours are: ${user.workingHours
+              .map(
+                (w: WorkingHours) =>
+                  `Days: ${w.days.join(", ")}, Start Time (minutes in UTC): ${
+                    w.startTime
+                  }, End Time (minutes in UTC): ${w.endTime}`
+              )
+              .join("\n")}
+            `,
+    },
+    agentType: "openai-functions",
+    returnIntermediateSteps: env.NODE_ENV === "development",
+    verbose: env.NODE_ENV === "development",
+  });
+
+  const result = await executor.call({ input });
+  const { output } = result;
+
+  return output;
+};
+
+export default agent;

apps/ai/src/utils/host.ts

@@ -0,0 +1,7 @@
+import type { NextRequest } from "next/server";
+
+const getHostFromHeaders = (headers: NextRequest["headers"]): string => {
+  return `https://${headers.get("host")}`;
+};
+
+export default getHostFromHeaders;

apps/ai/src/utils/now.ts

@@ -0,0 +1,5 @@
+export default function now(timeZone: string) {
+  return new Date().toLocaleString("en-US", {
+    timeZone,
+  });
+}

apps/ai/src/utils/sendEmail.ts

@@ -0,0 +1,40 @@
+import mail from "@sendgrid/mail";
+
+const sendgridAPIKey = process.env.SENDGRID_API_KEY as string;
+
+/**
+ * Simply send an email by address, subject, and body.
+ */
+const send = async ({
+  subject,
+  to,
+  from,
+  text,
+  html,
+}: {
+  subject: string;
+  to: string;
+  from: string;
+  text: string;
+  html?: string;
+}): Promise<boolean> => {
+  mail.setApiKey(sendgridAPIKey);
+
+  const msg = {
+    to,
+    from: {
+      email: from,
+      name: "Cal AI",
+    },
+    text,
+    html,
+    subject,
+  };
+
+  const res = await mail.send(msg);
+  const success = !!res;
+
+  return success;
+};
+
+export default send;

apps/ai/src/utils/verifyParseKey.ts

@@ -0,0 +1,13 @@
+import type { NextRequest } from "next/server";
+
+import { env } from "../env.mjs";
+
+/**
+ * Verifies that the request contains the correct parse key.
+ * env.PARSE_KEY must be configured as a query param in the sendgrid inbound parse settings.
+ */
+export const verifyParseKey = (url: NextRequest["url"]) => {
+  const verified = new URL(url).searchParams.get("parseKey") === env.PARSE_KEY;
+
+  return verified;
+};

apps/ai/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@calcom/tsconfig/nextjs.json",
+  "compilerOptions": {
+    "strict": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

apps/api/README.md

@@ -7,7 +7,7 @@
   <a href="https://cal.com/docs/enterprise-features/api#api-server-specifications">Read the API docs</a>
 </div>
 
-# Commercial Cal.com Public API 
+# Commercial Cal.com Public API
 
 Welcome to the Public API ("/apps/api") of the Cal.com.
 

apps/api/lib/helpers/captureErrors.ts

@@ -1,6 +1,8 @@
 import * as Sentry from "@sentry/nextjs";
 import type { NextMiddleware } from "next-api-middleware";
 
+import { redactError } from "@calcom/lib/redactError";
+
 export const captureErrors: NextMiddleware = async (_req, res, next) => {
   try {
     // Catch any errors that are thrown in remaining
@@ -8,7 +10,11 @@ export const captureErrors: NextMiddleware = async (_req, res, next) => {
     await next();
   } catch (error) {
     Sentry.captureException(error);
-    console.log(error);
+    const redactedError = redactError(error);
+    if (redactedError instanceof Error) {
+      res.status(400).json({ message: redactedError.message, error: redactedError });
+      return;
+    }
     res.status(400).json({ message: "Something went wrong", error });
   }
 };

apps/api/lib/helpers/customPrisma.ts

@@ -1,7 +1,7 @@
-import { PrismaClient } from "@prisma/client";
 import type { NextMiddleware } from "next-api-middleware";
 
 import { CONSOLE_URL } from "@calcom/lib/constants";
+import { customPrisma } from "@calcom/prisma";
 
 const LOCAL_CONSOLE_URL = process.env.NEXT_PUBLIC_CONSOLE_URL || CONSOLE_URL;
 
@@ -12,7 +12,7 @@ export const customPrismaClient: NextMiddleware = async (req, res, next) => {
   } = req;
   // If no custom api Id is provided, attach to request the regular cal.com prisma client.
   if (!key) {
-    req.prisma = new PrismaClient();
+    req.prisma = customPrisma();
     await next();
     return;
   }
@@ -26,7 +26,7 @@ export const customPrismaClient: NextMiddleware = async (req, res, next) => {
     res.status(400).json({ error: "no databaseUrl set up at your instance yet" });
     return;
   }
-  req.prisma = new PrismaClient({ datasources: { db: { url: databaseUrl } } });
+  req.prisma = customPrisma({ datasources: { db: { url: databaseUrl } } });
   /* @note:
     In order to skip verifyApiKey for customPrisma requests, 
     we pass isAdmin true, and userId 0, if we detect them later, 

apps/api/lib/helpers/verifyApiKey.ts

@@ -2,6 +2,7 @@ import type { NextMiddleware } from "next-api-middleware";
 
 import { hashAPIKey } from "@calcom/features/ee/api-keys/lib/apiKeys";
 import checkLicense from "@calcom/features/ee/common/server/checkLicense";
+import { IS_PRODUCTION } from "@calcom/lib/constants";
 
 import { isAdminGuard } from "~/lib/utils/isAdmin";
 
@@ -17,7 +18,7 @@ export const dateNotInPast = function (date: Date) {
 export const verifyApiKey: NextMiddleware = async (req, res, next) => {
   const { prisma, isCustomPrisma, isAdmin } = req;
   const hasValidLicense = await checkLicense(prisma);
-  if (!hasValidLicense && process.env.NODE_ENV !== "development")
+  if (!hasValidLicense && IS_PRODUCTION)
     return res.status(401).json({ error: "Invalid or missing CALCOM_LICENSE_KEY environment variable" });
   // If the user is an admin and using a license key (from customPrisma), skip the apiKey check.
   if (isCustomPrisma && isAdmin) {

apps/api/lib/helpers/withMiddleware.ts

@@ -28,10 +28,17 @@ const withMiddleware = label(
     customPrismaClient,
     extendRequest,
     pagination: withPagination,
-    sentry: captureErrors,
+    captureErrors,
   },
-  // The order here, determines the order of execution, put customPrismaClient before verifyApiKey always.
-  ["extendRequest", "sentry", "customPrismaClient", "verifyApiKey", "addRequestId"] // <-- Provide a list of middleware to call automatically
+  // The order here, determines the order of execution
+  [
+    "extendRequest",
+    "captureErrors",
+    // - Put customPrismaClient before verifyApiKey always.
+    "customPrismaClient",
+    "verifyApiKey",
+    "addRequestId",
+  ] // <-- Provide a list of middleware to call automatically
 );
 
 export { withMiddleware };

apps/api/lib/validations/booking.ts

@@ -58,6 +58,7 @@ export const schemaBookingReadPublic = Booking.extend({
       })
     )
     .optional(),
+  responses: z.record(z.any()),
 }).pick({
   id: true,
   userId: true,

apps/api/lib/validations/event-type.ts

@@ -33,12 +33,14 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   position: true,
   eventName: true,
   timeZone: true,
+  schedulingType: true,
+  // START Limit future bookings
   periodType: true,
   periodStartDate: true,
-  schedulingType: true,
   periodEndDate: true,
   periodDays: true,
   periodCountCalendarDays: true,
+  // END Limit future bookings
   requiresConfirmation: true,
   disableGuests: true,
   hideCalendarNotes: true,
@@ -51,6 +53,8 @@ export const schemaEventTypeBaseBodyParams = EventType.pick({
   slotInterval: true,
   successRedirectUrl: true,
   locations: true,
+  bookingLimits: true,
+  durationLimits: true,
 })
   .merge(z.object({ hosts: z.array(hostSchema).optional().default([]) }))
   .partial()
@@ -66,7 +70,9 @@ const schemaEventTypeCreateParams = z
     recurringEvent: recurringEventInputSchema.optional(),
     seatsPerTimeSlot: z.number().optional(),
     seatsShowAttendees: z.boolean().optional(),
+    seatsShowAvailabilityCount: z.boolean().optional(),
     bookingFields: eventTypeBookingFields.optional(),
+    scheduleId: z.number().optional(),
   })
   .strict();
 
@@ -84,7 +90,9 @@ const schemaEventTypeEditParams = z
     length: z.number().int().optional(),
     seatsPerTimeSlot: z.number().optional(),
     seatsShowAttendees: z.boolean().optional(),
+    seatsShowAvailabilityCount: z.boolean().optional(),
     bookingFields: eventTypeBookingFields.optional(),
+    scheduleId: z.number().optional(),
   })
   .strict();
 
@@ -98,6 +106,7 @@ export const schemaEventTypeReadPublic = EventType.pick({
   position: true,
   userId: true,
   teamId: true,
+  scheduleId: true,
   eventName: true,
   timeZone: true,
   periodType: true,
@@ -122,7 +131,10 @@ export const schemaEventTypeReadPublic = EventType.pick({
   metadata: true,
   seatsPerTimeSlot: true,
   seatsShowAttendees: true,
+  seatsShowAvailabilityCount: true,
   bookingFields: true,
+  bookingLimits: true,
+  durationLimits: true,
 }).merge(
   z.object({
     locations: z

apps/api/lib/validations/membership.ts

@@ -13,16 +13,18 @@ const schemaMembershipRequiredParams = z.object({
   teamId: z.number(),
 });
 
-export const membershipCreateBodySchema = Membership.partial({
-  accepted: true,
-  role: true,
-  disableImpersonation: true,
-}).transform((v) => ({
-  accepted: false,
-  role: MembershipRole.MEMBER,
-  disableImpersonation: false,
-  ...v,
-}));
+export const membershipCreateBodySchema = Membership.omit({ id: true })
+  .partial({
+    accepted: true,
+    role: true,
+    disableImpersonation: true,
+  })
+  .transform((v) => ({
+    accepted: false,
+    role: MembershipRole.MEMBER,
+    disableImpersonation: false,
+    ...v,
+  }));
 
 export const membershipEditBodySchema = Membership.omit({
   /** To avoid complication, let's avoid updating these, instead you can delete and create a new invite */

apps/api/lib/validations/shared/queryUserEmail.ts

@@ -0,0 +1,20 @@
+import { withValidation } from "next-validations";
+import { z } from "zod";
+
+import { baseApiParams } from "./baseApiParams";
+
+// Extracted out as utility function so can be reused
+// at different endpoints that require this validation.
+export const schemaQueryUserEmail = baseApiParams.extend({
+  email: z.string().email(),
+});
+
+export const schemaQuerySingleOrMultipleUserEmails = z.object({
+  email: z.union([z.string().email(), z.array(z.string().email())]),
+});
+
+export const withValidQueryUserEmail = withValidation({
+  schema: schemaQueryUserEmail,
+  type: "Zod",
+  mode: "query",
+});

apps/api/lib/validations/user.ts

@@ -29,7 +29,7 @@ enum locales {
   RO = "ro",
   NL = "nl",
   PT_BR = "pt-BR",
-  ES_419 = "es-419",
+  // ES_419 = "es-419", // Disabled until Crowdin reaches at least 80% completion
   KO = "ko",
   JA = "ja",
   PL = "pl",

apps/api/next.d.ts

@@ -1,7 +1,7 @@
 import type { Session } from "next-auth";
 import type { NextApiRequest as BaseNextApiRequest } from "next/types";
 
-import type { PrismaClient } from "@calcom/prisma/client";
+import type { PrismaClient } from "@calcom/prisma";
 
 export type * from "next/types";
 

apps/api/package.json

@@ -40,6 +40,6 @@
     "typescript": "^4.9.4",
     "tzdata": "^1.0.30",
     "uuid": "^8.3.2",
-    "zod": "^3.20.2"
+    "zod": "^3.22.2"
   }
 }

apps/api/pages/api/availability/_get.ts

@@ -2,7 +2,6 @@ import type { NextApiRequest } from "next";
 import { z } from "zod";
 
 import { getUserAvailability } from "@calcom/core/getUserAvailability";
-import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 import { availabilityUserSelect } from "@calcom/prisma";
@@ -120,10 +119,8 @@ const availabilitySchema = z
 async function handler(req: NextApiRequest) {
   const { prisma, isAdmin, userId: reqUserId } = req;
   const { username, userId, eventTypeId, dateTo, dateFrom, teamId } = availabilitySchema.parse(req.query);
-  const { currentOrgDomain, isValidOrgDomain } = orgDomainConfig(req.headers.host ?? "");
   if (!teamId)
     return getUserAvailability({
-      orgSlug: isValidOrgDomain ? currentOrgDomain || undefined : undefined,
       username,
       dateFrom,
       dateTo,

apps/api/pages/api/bookings/_post.ts

@@ -57,7 +57,14 @@ import { defaultResponder } from "@calcom/lib/server";
  *                      format: email
  *                      description: 'Attendee email address'
  *                    location:
- *                      type: string
+ *                      type: object
+ *                      properties:
+ *                        optionValue:
+ *                          type: string
+ *                          description: 'Option value for the location'
+ *                        value:
+ *                          type: string
+ *                          description: 'The meeting URL, Phone number or Address'
  *                      description: 'Meeting location'
  *               metadata:
  *                 type: object
@@ -87,6 +94,9 @@ import { defaultResponder } from "@calcom/lib/server";
  *               seatsShowAttendees:
  *                 type: boolean
  *                 description: 'Share Attendee information in seats'
+ *               seatsShowAvailabilityCount:
+ *                 type: boolean
+ *                 description: 'Show the number of available seats'
  *               smsReminderNumber:
  *                 type: number
  *                 description: 'SMS reminder number'

apps/api/pages/api/event-types/[id]/_get.ts

@@ -1,9 +1,11 @@
 import type { NextApiRequest } from "next";
 
+import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
 
 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQueryIdParseInt } from "~/lib/validations/shared/queryIdTransformParseInt";
+import { checkPermissions as canAccessTeamEventOrThrow } from "~/pages/api/teams/[teamId]/_auth-middleware";
 
 import getCalLink from "../_utils/getCalLink";
 
@@ -42,7 +44,8 @@ import getCalLink from "../_utils/getCalLink";
 export async function getHandler(req: NextApiRequest) {
   const { prisma, query } = req;
   const { id } = schemaQueryIdParseInt.parse(query);
-  const event_type = await prisma.eventType.findUnique({
+
+  const eventType = await prisma.eventType.findUnique({
     where: { id },
     include: {
       customInputs: true,
@@ -51,10 +54,43 @@ export async function getHandler(req: NextApiRequest) {
       owner: { select: { username: true, id: true } },
     },
   });
+  await checkPermissions(req, eventType);
 
-  const link = event_type ? getCalLink(event_type) : null;
+  const link = eventType ? getCalLink(eventType) : null;
+  // user.defaultScheduleId doesn't work the same for team events.
+  if (!eventType?.scheduleId && eventType?.userId && !eventType?.teamId) {
+    const user = await prisma.user.findUniqueOrThrow({
+      where: {
+        id: eventType.userId,
+      },
+      select: {
+        defaultScheduleId: true,
+      },
+    });
+    eventType.scheduleId = user.defaultScheduleId;
+  }
 
-  return { event_type: schemaEventTypeReadPublic.parse({ ...event_type, link }) };
+  // TODO: eventType when not found should be a 404
+  //       but API consumers may depend on the {} behaviour.
+  return { event_type: schemaEventTypeReadPublic.parse({ ...eventType, link }) };
+}
+
+type BaseEventTypeCheckPermissions = {
+  userId: number | null;
+  teamId: number | null;
+};
+
+async function checkPermissions<T extends BaseEventTypeCheckPermissions>(
+  req: NextApiRequest,
+  eventType: (T & Partial<Omit<T, keyof BaseEventTypeCheckPermissions>>) | null
+) {
+  if (req.isAdmin) return true;
+  if (eventType?.teamId) {
+    req.query.teamId = String(eventType.teamId);
+    await canAccessTeamEventOrThrow(req, "MEMBER");
+  }
+  if (eventType?.userId === req.userId) return true; // is owner.
+  throw new HttpError({ statusCode: 403, message: "Forbidden" });
 }
 
 export default defaultResponder(getHandler);

apps/api/pages/api/event-types/[id]/_patch.ts

@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 import type { z } from "zod";
 
@@ -52,6 +52,9 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
  *               slug:
  *                 type: string
  *                 description: Unique slug for the event type
+ *               scheduleId:
+ *                 type: number
+ *                 description: The ID of the schedule for this event type
  *               hosts:
  *                 type: array
  *                 items:
@@ -143,6 +146,9 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
  *               seatsShowAttendees:
  *                 type: boolean
  *                 description: 'Share Attendee information in seats'
+ *               seatsShowAvailabilityCount:
+ *                 type: boolean
+ *                 description: 'Show the number of available seats'
  *               locations:
  *                 type: array
  *                 description: A list of all available locations for the event type
@@ -199,10 +205,17 @@ import checkTeamEventEditPermission from "../_utils/checkTeamEventEditPermission
 export async function patchHandler(req: NextApiRequest) {
   const { prisma, query, body } = req;
   const { id } = schemaQueryIdParseInt.parse(query);
-  const { hosts = [], ...parsedBody } = schemaEventTypeEditBodyParams.parse(body);
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    ...parsedBody
+  } = schemaEventTypeEditBodyParams.parse(body);
 
   const data: Prisma.EventTypeUpdateArgs["data"] = {
     ...parsedBody,
+    bookingLimits: bookingLimits === null ? Prisma.DbNull : bookingLimits,
+    durationLimits: durationLimits === null ? Prisma.DbNull : durationLimits,
   };
 
   if (hosts) {

apps/api/pages/api/event-types/_get.ts

@@ -1,8 +1,8 @@
-import type { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
 import { defaultResponder } from "@calcom/lib/server";
+import type { PrismaClient } from "@calcom/prisma";
 
 import { schemaEventTypeReadPublic } from "~/lib/validations/event-type";
 import { schemaQuerySingleOrMultipleUserIds } from "~/lib/validations/shared/queryUserId";
@@ -35,20 +35,12 @@ import getCalLink from "./_utils/getCalLink";
  *         description: No event types were found
  */
 async function getHandler(req: NextApiRequest) {
-  const { userId, isAdmin, prisma } = req;
-
-  const args: Prisma.EventTypeFindManyArgs = {
-    where: { userId },
-  };
-  /** Only admins can query other users */
-  if (!isAdmin && req.query.userId) throw new HttpError({ statusCode: 401, message: "ADMIN required" });
-  if (isAdmin && req.query.userId) {
-    const query = schemaQuerySingleOrMultipleUserIds.parse(req.query);
-    const userIds = Array.isArray(query.userId) ? query.userId : [query.userId || userId];
-    args.where = { userId: { in: userIds } };
-  }
+  const { userId, prisma } = req;
+  const userIds = req.query.userId ? extractUserIdsFromQuery(req) : [userId];
   const data = await prisma.eventType.findMany({
-    ...args,
+    where: {
+      userId: { in: userIds },
+    },
     include: {
       customInputs: true,
       team: { select: { slug: true } },
@@ -56,12 +48,74 @@ async function getHandler(req: NextApiRequest) {
       owner: { select: { username: true, id: true } },
     },
   });
+  // this really should return [], but backwards compatibility..
+  if (data.length === 0) new HttpError({ statusCode: 404, message: "No event types were found" });
   return {
-    event_types: data.map((eventType) => {
-      const link = getCalLink(eventType);
-      return schemaEventTypeReadPublic.parse({ ...eventType, link });
-    }),
+    event_types: (await defaultScheduleId<(typeof data)[number]>({ eventTypes: data, prisma, userIds })).map(
+      (eventType) => {
+        const link = getCalLink(eventType);
+        return schemaEventTypeReadPublic.parse({ ...eventType, link });
+      }
+    ),
   };
 }
+// TODO: Extract & reuse.
+function extractUserIdsFromQuery({ isAdmin, query }: NextApiRequest) {
+  /** Guard: Only admins can query other users */
+  if (!isAdmin) {
+    throw new HttpError({ statusCode: 401, message: "ADMIN required" });
+  }
+  const { userId: userIdOrUserIds } = schemaQuerySingleOrMultipleUserIds.parse(query);
+  return Array.isArray(userIdOrUserIds) ? userIdOrUserIds : [userIdOrUserIds];
+}
+
+type DefaultScheduleIdEventTypeBase = {
+  scheduleId: number | null;
+  userId: number | null;
+};
+// If an eventType is given w/o a scheduleId
+// Then we associate the default user schedule id to the eventType
+async function defaultScheduleId<T extends DefaultScheduleIdEventTypeBase>({
+  prisma,
+  eventTypes,
+  userIds,
+}: {
+  prisma: PrismaClient;
+  eventTypes: (T & Partial<Omit<T, keyof DefaultScheduleIdEventTypeBase>>)[];
+  userIds: number[];
+}) {
+  // there is no event types without a scheduleId, skip the user query
+  if (eventTypes.every((eventType) => eventType.scheduleId)) return eventTypes;
+
+  const users = await prisma.user.findMany({
+    where: {
+      id: {
+        in: userIds,
+      },
+    },
+    select: {
+      id: true,
+      defaultScheduleId: true,
+    },
+  });
+
+  if (!users.length) {
+    return eventTypes;
+  }
+
+  const defaultScheduleIds = users.reduce((result, user) => {
+    result[user.id] = user.defaultScheduleId;
+    return result;
+  }, {} as { [x: number]: number | null });
+
+  return eventTypes.map((eventType) => {
+    // realistically never happens, userId should't be null on personal event types.
+    if (!eventType.userId) return eventType;
+    return {
+      ...eventType,
+      scheduleId: eventType.scheduleId || defaultScheduleIds[eventType.userId],
+    };
+  });
+}
 
 export default defaultResponder(getHandler);

apps/api/pages/api/event-types/_post.ts

@@ -1,4 +1,4 @@
-import type { Prisma } from "@prisma/client";
+import { Prisma } from "@prisma/client";
 import type { NextApiRequest } from "next";
 
 import { HttpError } from "@calcom/lib/http-error";
@@ -60,6 +60,9 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *               hidden:
  *                 type: boolean
  *                 description: If the event type should be hidden from your public booking page
+ *               scheduleId:
+ *                 type: number
+ *                 description: The ID of the schedule for this event type
  *               position:
  *                 type: integer
  *                 description: The position of the event type on the public booking page
@@ -178,6 +181,7 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
  *                  position: 0
  *                  eventName: null
  *                  timeZone: null
+ *                  scheduleId: 5
  *                  periodType: UNLIMITED
  *                  periodStartDate: 2023-02-15T08:46:16.000Z
  *                  periodEndDate: 2023-0-15T08:46:16.000Z
@@ -255,12 +259,19 @@ import ensureOnlyMembersAsHosts from "./_utils/ensureOnlyMembersAsHosts";
 async function postHandler(req: NextApiRequest) {
   const { userId, isAdmin, prisma, body } = req;
 
-  const { hosts = [], ...parsedBody } = schemaEventTypeCreateBodyParams.parse(body || {});
+  const {
+    hosts = [],
+    bookingLimits,
+    durationLimits,
+    ...parsedBody
+  } = schemaEventTypeCreateBodyParams.parse(body || {});
 
   let data: Prisma.EventTypeCreateArgs["data"] = {
     ...parsedBody,
     userId,
     users: { connect: { id: userId } },
+    bookingLimits: bookingLimits === null ? Prisma.DbNull : bookingLimits,
+    durationLimits: durationLimits === null ? Prisma.DbNull : durationLimits,
   };
 
   await checkPermissions(req);

apps/api/pages/api/teams/[teamId]/event-types/_get.ts

@@ -59,7 +59,7 @@ async function getHandler(req: NextApiRequest) {
   };
 
   const data = await prisma.eventType.findMany(args);
-  return { event_types: data.map((attendee) => schemaEventTypeReadPublic.parse(attendee)) };
+  return { event_types: data.map((eventType) => schemaEventTypeReadPublic.parse(eventType)) };
 }
 
 export default defaultResponder(getHandler);

apps/api/pages/api/users/_get.ts

@@ -4,6 +4,7 @@ import type { NextApiRequest } from "next";
 import { defaultResponder } from "@calcom/lib/server";
 
 import { withMiddleware } from "~/lib/helpers/withMiddleware";
+import { schemaQuerySingleOrMultipleUserEmails } from "~/lib/validations/shared/queryUserEmail";
 import { schemaUsersReadPublic } from "~/lib/validations/user";
 
 /**
@@ -19,6 +20,17 @@ import { schemaUsersReadPublic } from "~/lib/validations/user";
  *         schema:
  *           type: string
  *         description: Your API key
+ *       - in: query
+ *         name: email
+ *         required: false
+ *         schema:
+ *          type: array
+ *          items:
+ *            type: string
+ *            format: email
+ *         style: form
+ *         explode: true
+ *         description: The email address or an array of email addresses to filter by
  *     tags:
  *     - users
  *     responses:
@@ -39,8 +51,16 @@ export async function getHandler(req: NextApiRequest) {
   const where: Prisma.UserWhereInput = {};
   // If user is not ADMIN, return only his data.
   if (!isAdmin) where.id = userId;
+
+  if (req.query.email) {
+    const validationResult = schemaQuerySingleOrMultipleUserEmails.parse(req.query);
+    where.email = {
+      in: Array.isArray(validationResult.email) ? validationResult.email : [validationResult.email],
+    };
+  }
+
   const [total, data] = await prisma.$transaction([
-    prisma.user.count(),
+    prisma.user.count({ where }),
     prisma.user.findMany({ where, take, skip }),
   ]);
   const users = schemaUsersReadPublic.parse(data);

apps/api/test/docker-compose.yml

@@ -1,5 +1,5 @@
 # Set the version of docker compose to use
-version: '3.9'
+version: "3.9"
 
 # The containers that compose the project
 services:
@@ -8,8 +8,8 @@ services:
     restart: always
     container_name: integration-tests-prisma
     ports:
-      - '5433:5432'
+      - "5433:5432"
     environment:
       POSTGRES_USER: prisma
       POSTGRES_PASSWORD: prisma
-      POSTGRES_DB: tests
+      POSTGRES_DB: tests

apps/storybook/.storybook/i18next.js

@@ -1,9 +1,29 @@
 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
 
+const ns = ["common"];
+const supportedLngs = ["en", "fr"];
+const resources = ns.reduce((acc, n) => {
+  supportedLngs.forEach((lng) => {
+    if (!acc[lng]) acc[lng] = {};
+    acc[lng] = {
+      ...acc[lng],
+      [n]: require(`../../web/public/static/locales/${lng}/${n}.json`),
+    };
+  });
+  return acc;
+}, {});
+
 i18n.use(initReactI18next).init({
-  resources: [],
   debug: true,
+  fallbackLng: "en",
+  defaultNS: "common",
+  ns,
+  interpolation: {
+    escapeValue: false,
+  },
+  react: { useSuspense: true },
+  resources,
 });
 
 export default i18n;

apps/storybook/.storybook/main.js

@@ -15,6 +15,7 @@ module.exports = {
     "storybook-addon-rtl-direction",
     "storybook-react-i18next",
     "storybook-addon-next",
+    "storybook-addon-next-router",
     /*{
       name: "storybook-addon-next",
       options: {

apps/storybook/.storybook/preview-head.html

@@ -1,9 +1,9 @@
 <script>
   window.global = window;
-  window.isEmbed = ()=> {
-    return location.search.includes("embed=")
-  }
+  window.isEmbed = () => {
+    return location.search.includes("embed=");
+  };
 </script>
 <style>
-  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
+  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap");
 </style>

apps/storybook/.storybook/preview.jsx

@@ -1,4 +1,5 @@
 import { addDecorator } from "@storybook/react";
+import { AppRouterContext } from "next/dist/shared/lib/app-router-context";
 import { I18nextProvider } from "react-i18next";
 
 import "../styles/globals.css";
@@ -13,6 +14,21 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  nextRouter: {
+    pathname: "/",
+    asPath: "/",
+    query: {},
+    push() {},
+    Provider: AppRouterContext.Provider,
+  },
+  globals: {
+    locale: "en",
+    locales: {
+      en: "English",
+      fr: "Français",
+    },
+  },
+  i18n,
 };
 
 addDecorator((storyFn) => (

apps/storybook/components/VariantsTable.tsx

@@ -18,6 +18,7 @@ export function VariantsTable({
   const columns = React.Children.toArray(children) as ReactElement<RowProps>[];
   return (
     <div
+      id="light-variant"
       className={classNames(
         isDark &&
           "relative py-8 before:absolute before:left-0 before:top-0 before:block before:h-full before:w-screen before:bg-[#1C1C1C]"
@@ -43,7 +44,7 @@ export function VariantsTable({
         </table>
       </div>
       {!isDark && (
-        <div data-mode="dark" className="dark">
+        <div id="dark-variant" data-mode="dark" className="dark">
           <VariantsTable titles={titles} isDark columnMinWidth={columnMinWidth}>
             {children}
           </VariantsTable>

apps/storybook/intro.stories.mdx

@@ -1,11 +1,21 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Introduction" />
 
-<div className="text-center flex flex-col items-center">
-  <h1 style={{marginBottom: '24px', marginTop: '36px'}}>Welcome to Cal.com UI</h1>
-  <p>This is the beginning of our storybook impovments to match Figma as close as possible. Like our Figma library, we will be adding more components as we go along.</p>
-  <p>Our <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">Figma</a> library is avalible for anyone to view and use. If you have any questions or concerns, please reach out to the design team.</p>
+<div className="flex flex-col items-center text-center">
+  <h1 style={{ marginBottom: "24px", marginTop: "36px" }}>Welcome to Cal.com UI</h1>
+  <p>
+    This is the beginning of our storybook improvements to match Figma as close as possible. Like our Figma
+    library, we will be adding more components as we go along.
+  </p>
+  <p>
+    Our{" "}
+    <a href="https://www.figma.com/file/9MOufQNLtdkpnDucmNX10R/%E2%9D%96-Cal-DS" target="_blank">
+      Figma
+    </a>{" "}
+    library is available for anyone to view and use. If you have any questions or concerns, please reach out to
+    the design team.
+  </p>
 </div>
 
-<img src="/sb-cover.jpg" />
+<img src="/sb-cover.jpg" />

apps/storybook/package.json

@@ -23,6 +23,7 @@
     "next": "^13.4.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "storybook-addon-next-router": "^4.0.2",
     "storybook-addon-rtl-direction": "^0.0.19"
   },
   "devDependencies": {

apps/storybook/styles/storybook-styles.css

@@ -1,8 +1,8 @@
 @import url("../../../packages/features/calendars/weeklyview/styles/styles.css");
 
 .sbdocs {
-  font-family: 'Inter var' !important;
-  padding: 0!important;
+  font-family: "Inter var" !important;
+  padding: 0 !important;
 }
 
 #docs-root {
@@ -21,8 +21,8 @@
   font-weight: 500;
   border: none;
   border-top: 2px solid rgba(0, 0, 0, 0.12);
-  padding-top: 12px!important;
-  padding-bottom: 12px!important;
+  padding-top: 12px !important;
+  padding-bottom: 12px !important;
   margin: 82px 0 0 0;
 }
 
@@ -37,7 +37,7 @@
 }
 
 /** Docs table **/
-.custom-args-wrapper{
+.custom-args-wrapper {
   max-height: 400px;
   overflow-y: scroll;
   overflow-x: hidden;
@@ -45,7 +45,7 @@
 }
 
 .docblock-argstable-body {
-  box-shadow: none!important;
+  box-shadow: none !important;
   font-size: 14px;
 }
 
@@ -64,7 +64,7 @@
 
 .docblock-argstable-body div p,
 .docblock-argstable-body div span {
-  color: #8F8F8F !important;
+  color: #8f8f8f !important;
 }
 
 /** Custom components **/
@@ -83,8 +83,8 @@
 }
 
 .story-title h1 span {
-  color: #9CA3AF;
-  font-family: 'Inter var';
+  color: #9ca3af;
+  font-family: "Inter var";
   font-weight: normal;
   display: inline-block;
   margin-left: 8px;
@@ -96,7 +96,7 @@
 }
 
 .examples {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
   padding: 20px;
   display: flex;
   flex-direction: column;
@@ -111,14 +111,14 @@
 }
 
 .examples-title {
-  color: #8F8F8F;
+  color: #8f8f8f;
   font-size: 14px;
   margin-bottom: 30px;
 }
 
 .examples-item-title {
   font-size: 12px;
-  color: #8F8F8F;
+  color: #8f8f8f;
   margin-bottom: 12px;
   display: block;
 }
@@ -130,7 +130,7 @@
 .examples-footnote p,
 .examples-footnote ul,
 .examples-footnote li {
-  color: #8F8F8F;
+  color: #8f8f8f;
   font-size: 14px;
 }
 
@@ -139,11 +139,11 @@
 }
 
 .examples-footnote li {
-  margin: 0!important;
+  margin: 0 !important;
 }
 
 .story-note {
-  background-color: #F9FAFB;
+  background-color: #f9fafb;
   font-size: 14px;
   padding: 20px;
   margin-bottom: 12px;
@@ -161,12 +161,12 @@
   box-shadow: none !important;
   margin: 0 !important;
   border: none !important;
-  border-radius: none!important;
+  border-radius: none !important;
 }
 
 .docs-story > div:first-child {
-  padding: 0!important;
-  margin: 0!important;
+  padding: 0 !important;
+  margin: 0 !important;
 }
 
 .docs-story .innerZoomElementWrapper > div {
@@ -174,7 +174,7 @@
 }
 
 .sb-main-padded {
-  padding: 0!important;
+  padding: 0 !important;
 }
 
 @media screen and (max-width: 1200px) {
@@ -198,83 +198,81 @@
   :root {
     /* background */
 
-    --cal-bg-emphasis: #E5E7EB;
+    --cal-bg-emphasis: #e5e7eb;
     --cal-bg: white;
-    --cal-bg-subtle: #F3F4F6;
-    --cal-bg-muted: #F9FAFB;
+    --cal-bg-subtle: #f3f4f6;
+    --cal-bg-muted: #f9fafb;
     --cal-bg-inverted: #111827;
 
     /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #dee9fc;
+    --cal-bg-success: #e2fbe8;
+    --cal-bg-attention: #fceed8;
+    --cal-bg-error: #f9e3e2;
     --cal-bg-dark-error: #752522;
 
-
     /* Borders */
-    --cal-border-emphasis:#9CA3AF;
-    --cal-border: #D1D5DB;
-    --cal-border-subtle:#E5E7EB;
-    --cal-border-muted:#F3F4F6;
+    --cal-border-emphasis: #9ca3af;
+    --cal-border: #d1d5db;
+    --cal-border-subtle: #e5e7eb;
+    --cal-border-muted: #f3f4f6;
     --cal-border-error: #aa2e26;
 
     /* Content/Text */
     --cal-text-emphasis: #111827;
-    --cal-text:#374151;
-    --cal-text-subtle:#6B7280;
-    --cal-text-muted:#9CA3AF;
-    --cal-text-inverted:white;
+    --cal-text: #374151;
+    --cal-text-subtle: #6b7280;
+    --cal-text-muted: #9ca3af;
+    --cal-text-inverted: white;
 
     /* Content/Text -> components */
-    --cal-text-info:#253985;
-    --cal-text-success:#285231;
-    --cal-text-attention:#73321B;
-    --cal-text-error:#752522;
+    --cal-text-info: #253985;
+    --cal-text-success: #285231;
+    --cal-text-attention: #73321b;
+    --cal-text-error: #752522;
 
     /* Brand shinanigans
       -> These will be computed for the users theme at runtime.
     */
-    --cal-brand:#111827;
-    --cal-brand-emphasis:#101010;
+    --cal-brand: #111827;
+    --cal-brand-emphasis: #101010;
     --cal-brand-text: white;
   }
   .dark {
     /* background */
 
-    --cal-bg-emphasis: #2B2B2B;
+    --cal-bg-emphasis: #2b2b2b;
     --cal-bg: #101010;
-    --cal-bg-subtle: #2B2B2B;
-    --cal-bg-muted: #1C1C1C;
-    --cal-bg-inverted: #F3F4F6;
+    --cal-bg-subtle: #2b2b2b;
+    --cal-bg-muted: #1c1c1c;
+    --cal-bg-inverted: #f3f4f6;
 
     /* background -> components*/
-    --cal-bg-info: #DEE9FC;
-    --cal-bg-success: #E2FBE8;
-    --cal-bg-attention: #FCEED8;
-    --cal-bg-error: #F9E3E2;
+    --cal-bg-info: #263fa9;
+    --cal-bg-success: #306339;
+    --cal-bg-attention: #8e3b1f;
+    --cal-bg-error: #8c2822;
     --cal-bg-dark-error: #752522;
 
-
     /* Borders */
     --cal-border-emphasis: #575757;
     --cal-border: #444444;
-    --cal-border-subtle: #2B2B2B;
-    --cal-border-muted: #1C1C1C;
+    --cal-border-subtle: #2b2b2b;
+    --cal-border-muted: #1c1c1c;
     --cal-border-error: #aa2e26;
 
     /* Content/Text */
-    --cal-text-emphasis: #F3F4F6;
-    --cal-text: #D6D6D6;
+    --cal-text-emphasis: #f3f4f6;
+    --cal-text: #d6d6d6;
     --cal-text-subtle: #757575;
     --cal-text-muted: #575757;
     --cal-text-inverted: #101010;
 
     /* Content/Text -> components */
-    --cal-text-info: #253985;
-    --cal-text-success: #285231;
-    --cal-text-attention: #73321B;
-    --cal-text-error: #752522;
+    --cal-text-info: #dee9fc;
+    --cal-text-success: #e2fbe8;
+    --cal-text-attention: #fceed8;
+    --cal-text-error: #f9e3e2;
 
     /* Brand shenanigans
       -> These will be computed for the users theme at runtime.

apps/swagger/styles/globals.css

@@ -2,8 +2,8 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
-    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
+    Droid Sans, Helvetica Neue, sans-serif;
 }
 
 a {
@@ -21,7 +21,7 @@ a {
   }
   .swagger-ui .opblock .opblock-summary {
     display: grid;
-  flex-direction: column;
+    flex-direction: column;
   }
   .opblock-summary-path {
     flex-shrink: 0;
@@ -43,22 +43,22 @@ a {
     font-size: 22px;
   }
   .swagger-ui .scheme-container {
-  padding: 14px 0;
+    padding: 14px 0;
   }
   .swagger-ui .info {
-      margin: 10px 0;
+    margin: 10px 0;
   }
   .swagger-ui .auth-wrapper {
     margin: 10px 0;
   }
   .swagger-ui .authorization__btn {
-  display: none;
+    display: none;
   }
   .swagger-ui .opblock {
     margin: 0 0 5px;
   }
   button.opblock-summary-control > svg {
-    display: none;  
+    display: none;
   }
   .swagger-ui .filter .operation-filter-input {
     border: 2px solid #d8dde7;
@@ -73,15 +73,16 @@ a {
   .swagger-ui .info .title small {
     top: 5px;
   }
-  .swagger-ui a.nostyle, .swagger-ui a.nostyle:visited {
+  .swagger-ui a.nostyle,
+  .swagger-ui a.nostyle:visited {
     width: 100%;
   }
   div.request-snippets > div.curl-command > div:nth-child(1) {
     overscroll-behavior: contain;
     overflow-x: scroll;
   }
-  .swagger-ui .opblock-body pre.microlight {  
-    font-size: 9px; 
+  .swagger-ui .opblock-body pre.microlight {
+    font-size: 9px;
   }
   .swagger-ui table tbody tr td {
     padding: 0px 0 0;
@@ -91,7 +92,7 @@ a {
     font-size: 12px;
   }
   div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > tbody > tr {
-        display: flex;
+    display: flex;
     width: 100vw;
     flex-direction: column;
     font-size: 60%;
@@ -99,4 +100,4 @@ a {
   div.no-margin > div > div.responses-wrapper > div.responses-inner > div > div > table > thead > tr {
     display: none;
   }
-}
+}

apps/web/.prettierignore

@@ -1,2 +1 @@
-public/embed
-*.test.ts
+public/embed

apps/web/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @calcom/web
 
+## 3.1.3
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-react@1.3.0
+
+## 3.0.10
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-snippet@1.1.2
+  - @calcom/embed-react@1.2.2
+  - @calcom/embed-core@1.3.2
+
+## 3.0.9
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-snippet@1.1.1
+  - @calcom/embed-react@1.2.1
+  - @calcom/embed-core@1.3.1
+
+## 3.0.8
+
+### Patch Changes
+
+- Updated dependencies
+  - @calcom/embed-core@1.3.0
+  - @calcom/embed-react@1.2.0
+  - @calcom/embed-snippet@1.1.0
+
 ## 2.9.4
 
 ### Patch Changes

apps/web/components/AppListCard.tsx

@@ -1,15 +1,25 @@
-import { useRouter } from "next/router";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { z } from "zod";
 
 import type { CredentialOwner } from "@calcom/app-store/types";
+import classNames from "@calcom/lib/classNames";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { Badge, ListItemText, Avatar } from "@calcom/ui";
 import { AlertCircle } from "@calcom/ui/components/icon";
 
-type ShouldHighlight = { slug: string; shouldHighlight: true } | { shouldHighlight?: never; slug?: never };
+type ShouldHighlight =
+  | {
+      slug: string;
+      shouldHighlight: true;
+    }
+  | {
+      shouldHighlight?: never;
+      slug?: never;
+    };
 
 type AppListCardProps = {
   logo?: string;
@@ -46,14 +56,16 @@ export default function AppListCard(props: AppListCardProps) {
   const router = useRouter();
   const [highlight, setHighlight] = useState(shouldHighlight && hl === slug);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
 
   useEffect(() => {
     if (shouldHighlight && highlight) {
       const timer = setTimeout(() => {
         setHighlight(false);
-        const url = new URL(window.location.href);
-        url.searchParams.delete("hl");
-        router.replace(url.pathname, undefined, { shallow: true });
+        const _searchParams = new URLSearchParams(searchParams);
+        _searchParams.delete("hl");
+        router.replace(`${pathname}?${_searchParams.toString()}`);
       }, 3000);
       timeoutRef.current = timer;
     }
@@ -69,7 +81,13 @@ export default function AppListCard(props: AppListCardProps) {
   return (
     <div className={`${highlight ? "dark:bg-muted bg-yellow-100" : ""}`}>
       <div className="flex items-center gap-x-3 px-5 py-4">
-        {logo ? <img className="h-10 w-10" src={logo} alt={`${title} logo`} /> : null}
+        {logo ? (
+          <img
+            className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10")}
+            src={logo}
+            alt={`${title} logo`}
+          />
+        ) : null}
         <div className="flex grow flex-col gap-y-1 truncate">
           <div className="flex items-center gap-x-2">
             <h3 className="text-emphasis truncate text-sm font-semibold">{title}</h3>
@@ -96,7 +114,7 @@ export default function AppListCard(props: AppListCardProps) {
                   className="mr-2"
                   alt={credentialOwner.name || "Nameless"}
                   size="xs"
-                  imageSrc={credentialOwner.avatar}
+                  imageSrc={getPlaceholderAvatar(credentialOwner.avatar, credentialOwner?.name as string)}
                 />
                 {credentialOwner.name}
               </div>

apps/web/components/AppsShell.tsx

@@ -1,26 +0,0 @@
-import { useSession } from "next-auth/react";
-import React from "react";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "app_store",
-    href: "/apps",
-  },
-  {
-    name: "installed_apps",
-    href: "/apps/installed",
-  },
-];
-
-export default function AppsShell({ children }: { children: React.ReactNode }) {
-  const { status } = useSession();
-
-  return (
-    <>
-      <div className="mb-12 block lg:hidden">{status === "authenticated" && <NavTabs tabs={tabs} />}</div>
-      <main className="pb-6">{children}</main>
-    </>
-  );
-}

apps/web/components/BookingsShell.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "upcoming",
-    href: "/bookings/upcoming",
-  },
-  {
-    name: "recurring",
-    href: "/bookings/recurring",
-  },
-  {
-    name: "past",
-    href: "/bookings/past",
-  },
-  {
-    name: "cancelled",
-    href: "/bookings/cancelled",
-  },
-];
-
-export default function BookingsShell({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <NavTabs tabs={tabs} />
-      <main>{children}</main>
-    </>
-  );
-}

apps/web/components/I18nLanguageHandler.tsx

@@ -1,32 +1,55 @@
-import { isEmpty } from "lodash";
+import { lookup } from "bcp-47-match";
+import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useEffect } from "react";
 
+import { CALCOM_VERSION } from "@calcom/lib/constants";
 import { trpc } from "@calcom/trpc/react";
 
-export function useViewerI18n() {
-  return trpc.viewer.public.i18n.useQuery(undefined, {
-    staleTime: Infinity,
-    /**
-     * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
-     * We intend to not cache i18n query
-     **/
-    trpc: {
-      context: { skipBatch: true },
-    },
-  });
+function useViewerI18n(locale: string) {
+  return trpc.viewer.public.i18n.useQuery(
+    { locale, CalComVersion: CALCOM_VERSION },
+    {
+      /**
+       * i18n should never be clubbed with other queries, so that it's caching can be managed independently.
+       **/
+      trpc: {
+        context: { skipBatch: true },
+      },
+    }
+  );
+}
+
+function useClientLocale(locales: string[]) {
+  const session = useSession();
+  // If the user is logged in, use their locale
+  if (session.data?.user.locale) return session.data.user.locale;
+  // If the user is not logged in, use the browser locale
+  if (typeof window !== "undefined") {
+    // This is the only way I found to ensure the prefetched locale is used on first render
+    // FIXME: Find a better way to pick the best matching locale from the browser
+    return lookup(locales, window.navigator.language) || window.navigator.language;
+  }
+  // If the browser is not available, use English
+  return "en";
+}
+
+export function useClientViewerI18n(locales: string[]) {
+  const clientLocale = useClientLocale(locales);
+  return useViewerI18n(clientLocale);
 }
 
 /**
  * Auto-switches locale client-side to the logged in user's preference
  */
-const I18nLanguageHandler = (): null => {
+const I18nLanguageHandler = (props: { locales: string[] }) => {
+  const { locales } = props;
   const { i18n } = useTranslation("common");
-  const locale = useViewerI18n().data?.locale || i18n.language;
+  const locale = useClientViewerI18n(locales).data?.locale || i18n.language;
 
   useEffect(() => {
     // bail early when i18n = {}
-    if (isEmpty(i18n)) return;
+    if (Object.keys(i18n).length === 0) return;
     // if locale is ready and the i18n.language does != locale - changeLanguage
     if (locale && i18n.language !== locale) {
       i18n.changeLanguage(locale);
@@ -35,7 +58,6 @@ const I18nLanguageHandler = (): null => {
     document.dir = i18n.dir();
     document.documentElement.setAttribute("lang", locale);
   }, [locale, i18n]);
-
   return null;
 };
 

apps/web/components/NavTabs.tsx

@@ -1,99 +0,0 @@
-import { noop } from "lodash";
-import type { LinkProps } from "next/link";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import type { FC, MouseEventHandler } from "react";
-import { Fragment } from "react";
-
-import { PermissionContainer } from "@calcom/features/auth/PermissionContainer";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import classNames from "@lib/classNames";
-import type { SVGComponent } from "@lib/types/SVGComponent";
-
-export interface NavTabProps {
-  tabs: {
-    name: string;
-    /** If you want to change the path as per current tab */
-    href?: string;
-    /** If you want to change query param tabName as per current tab */
-    tabName?: string;
-    icon?: SVGComponent;
-    adminRequired?: boolean;
-    className?: string;
-  }[];
-  linkProps?: Omit<LinkProps, "href">;
-}
-
-const NavTabs: FC<NavTabProps> = ({ tabs, linkProps, ...props }) => {
-  const router = useRouter();
-  const { t } = useLocale();
-  return (
-    <>
-      <nav
-        className="no-scrollbar -mb-px flex space-x-5 overflow-x-scroll rtl:space-x-reverse sm:rtl:space-x-reverse"
-        aria-label="Tabs"
-        {...props}>
-        {tabs.map((tab) => {
-          if ((tab.tabName && tab.href) || (!tab.tabName && !tab.href)) {
-            throw new Error("Use either tabName or href");
-          }
-          let href = "";
-          let isCurrent;
-          if (tab.href) {
-            href = tab.href;
-            isCurrent = router.asPath === tab.href;
-          } else if (tab.tabName) {
-            href = "";
-            isCurrent = router.query.tabName === tab.tabName;
-          }
-
-          const onClick: MouseEventHandler = tab.tabName
-            ? (e) => {
-                e.preventDefault();
-                router.push({
-                  query: {
-                    ...router.query,
-                    tabName: tab.tabName,
-                  },
-                });
-              }
-            : noop;
-
-          const Component = tab.adminRequired ? PermissionContainer : Fragment;
-          const className = tab.className || "";
-          return (
-            <Component key={tab.name}>
-              <Link key={tab.name} href={href} {...linkProps} legacyBehavior>
-                <a
-                  onClick={onClick}
-                  className={classNames(
-                    isCurrent
-                      ? "text-emphasis border-gray-900"
-                      : "hover:border-default hover:text-default text-subtle border-transparent",
-                    "group inline-flex items-center border-b-2 px-1 py-4 text-sm font-medium",
-                    className
-                  )}
-                  aria-current={isCurrent ? "page" : undefined}>
-                  {tab.icon && (
-                    <tab.icon
-                      className={classNames(
-                        isCurrent ? "text-emphasis" : "group-hover:text-subtle text-muted",
-                        "-ml-0.5 hidden h-4 w-4 ltr:mr-2 rtl:ml-2 sm:inline-block"
-                      )}
-                      aria-hidden="true"
-                    />
-                  )}
-                  <span>{t(tab.name)}</span>
-                </a>
-              </Link>
-            </Component>
-          );
-        })}
-      </nav>
-      <hr className="border-subtle" />
-    </>
-  );
-};
-
-export default NavTabs;

apps/web/components/PageWrapper.tsx

@@ -6,7 +6,7 @@ import Script from "next/script";
 
 import "@calcom/embed-core/src/embed-iframe";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
-import { WEBAPP_URL, IS_CALCOM } from "@calcom/lib/constants";
+import { IS_CALCOM, WEBAPP_URL } from "@calcom/lib/constants";
 import { buildCanonical } from "@calcom/lib/next-seo.config";
 
 import type { AppProps } from "@lib/app-providers";
@@ -72,7 +72,7 @@ function PageWrapper(props: AppProps) {
         }
         {...seoConfig.defaultNextSeo}
       />
-      <I18nLanguageHandler />
+      <I18nLanguageHandler locales={props.router.locales || []} />
       <Script
         nonce={nonce}
         id="page-status"

apps/web/components/SettingsShell.tsx

@@ -1,60 +0,0 @@
-import type { ComponentProps } from "react";
-import React from "react";
-
-import Shell from "@calcom/features/shell/Shell";
-import { ErrorBoundary } from "@calcom/ui";
-import { CreditCard, Key, Lock, Terminal, User, Users } from "@calcom/ui/components/icon";
-
-import NavTabs from "./NavTabs";
-
-const tabs = [
-  {
-    name: "profile",
-    href: "/settings/my-account/profile",
-    icon: User,
-  },
-  {
-    name: "teams",
-    href: "/settings/teams",
-    icon: Users,
-  },
-  {
-    name: "security",
-    href: "/settings/security",
-    icon: Key,
-  },
-  {
-    name: "developer",
-    href: "/settings/developer",
-    icon: Terminal,
-  },
-  {
-    name: "billing",
-    href: "/settings/billing",
-    icon: CreditCard,
-  },
-  {
-    name: "admin",
-    href: "/settings/admin",
-    icon: Lock,
-    adminRequired: true,
-  },
-];
-
-export default function SettingsShell({
-  children,
-  ...rest
-}: { children: React.ReactNode } & ComponentProps<typeof Shell>) {
-  return (
-    <Shell {...rest} hideHeadingOnMobile>
-      <div className="sm:mx-auto">
-        <NavTabs tabs={tabs} />
-      </div>
-      <main className="max-w-4xl">
-        <>
-          <ErrorBoundary>{children}</ErrorBoundary>
-        </>
-      </main>
-    </Shell>
-  );
-}