diff --git a/.env.appStore.example b/.env.appStore.example index 10da881498..fe1f1038a9 100644 --- a/.env.appStore.example +++ b/.env.appStore.example @@ -16,11 +16,12 @@ # - WEB3 # - SALESFORCE # - ZOHOCRM +# - ZOHO_BIGIN # - APP STORE ********************************************************************************************** # ⚠️ ⚠️ ⚠️ THESE WILL BE MIGRATED TO THE DATABASE TO PREVENT AWS's 4KB ENV QUOTA ⚠️ ⚠️ ⚠️ # - DAILY.CO VIDEO -# Enables Cal Video. to get your key +# Enables Cal Video. to get your key # 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information # 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab. # @see https://github.com/calcom/cal.com#obtaining-daily-api-credentials diff --git a/.gitignore b/.gitignore index 2da5db3f63..28ce05562d 100644 --- a/.gitignore +++ b/.gitignore @@ -65,8 +65,9 @@ tsconfig.tsbuildinfo # turbo .turbo -# Prisma-Zod +# Prisma generated files packages/prisma/zod/*.ts +packages/prisma/enums # Builds dist diff --git a/.prettierignore b/.prettierignore index 110469b176..7944833941 100644 --- a/.prettierignore +++ b/.prettierignore @@ -14,4 +14,5 @@ public .DS_Store .eslintignore packages/prisma/zod +packages/prisma/enums apps/web/public/embed diff --git a/README.md b/README.md index 5160a4e8bd..3ef368a738 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@

Join Cal.com Slack - Product Hunt + Product Hunt Uptime Github Stars Hacker News @@ -38,13 +38,13 @@ - +

-## About The Project +## About the Project booking-screen @@ -53,13 +53,13 @@ The open source Calendly alternative. You are in charge 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 customisations. +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. 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. ## Recognition -#### Hacker News +#### [Hacker News](https://news.ycombinator.com/from?site=cal.com) -#### [Product Hunt](https://www.producthunt.com/posts/calendso?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-calendso) +#### [Product Hunt](https://producthunt.com/products/cal-com?utm_source=badge-top-post-badge&utm_medium=badge) -Cal.com - The open source Calendly alternative | Product Hunt Cal.com - The open source Calendly alternative | Product Hunt Cal.com - The open source Calendly alternative | Product Hunt +Cal.com - The open source Calendly alternative | Product Hunt Cal.com - The open source Calendly alternative | Product Hunt Cal.com - The open source Calendly alternative | Product Hunt ### Built With - [Next.js](https://nextjs.org/?ref=cal.com) - [tRPC](https://trpc.io/?ref=cal.com) -- [React](https://reactjs.org/?ref=cal.com) -- [Tailwind](https://tailwindcss.com/?ref=cal.com) -- [Prisma](https://prisma.io/?ref=cal.com) +- [React.js](https://reactjs.org/?ref=cal.com) +- [Tailwind CSS](https://tailwindcss.com/?ref=cal.com) +- [Prisma.io](https://prisma.io/?ref=cal.com) - [Daily.co](https://go.cal.com/daily) ## Stay Up-to-Date -Cal officially launched as v.1.0 on 15th of September, however a lot of new features are coming. Watch **releases** of this repository to be notified for future updates: +Cal.com officially launched as v.1.0 on 15th of September, however a lot of new features are coming. Watch **releases** of this repository to be notified for future updates: ![cal-star-github](https://user-images.githubusercontent.com/8019099/154853944-a9e3c999-3da3-4048-b149-b4f73893c6fb.gif) @@ -104,7 +104,7 @@ To get a local copy up and running, please follow these simple steps. ### Prerequisites -Here is what you need to be able to run Cal. +Here is what you need to be able to run Cal.com. - Node.js (Version: >=15.x <17) - PostgreSQL @@ -134,10 +134,10 @@ Here is what you need to be able to run Cal. yarn ``` -1. Set up your .env file +1. Set up your `.env` file - Duplicate `.env.example` to `.env` - - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the .env file. - - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the .env file. + - Use `openssl rand -base64 32` to generate a key and add it under `NEXTAUTH_SECRET` in the `.env` file. + - Use `openssl rand -base64 24` to generate a key and add it under `CALENDSO_ENCRYPTION_KEY` in the `.env` file. #### Quick start with `yarn dx` @@ -150,7 +150,7 @@ yarn dx #### Development tip -> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `.env` to get logging information for all the queries and mutations driven by **trpc**. +> Add `NEXT_PUBLIC_DEBUG=1` anywhere in your `.env` to get logging information for all the queries and mutations driven by **tRPC**. ```sh echo 'NEXT_PUBLIC_DEBUG=1' >> .env @@ -158,16 +158,16 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env #### Manual setup -1. Configure environment variables in the `.env` file. Replace ``, ``, ``, `` with their applicable values +1. Configure environment variables in the `.env` file. Replace ``, ``, ``, and `` with their applicable values ``` DATABASE_URL='postgresql://:@:' ```
- If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB using Heroku + If you don't know how to configure the DATABASE_URL, then follow the steps here to create a quick DB using Heroku. - 1. Create a free account with [Heroku](https://www.heroku.com/). + 1. Create a free account with [Heroku](https://heroku.com). 2. Create a new app. Create an App @@ -184,14 +184,14 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env 6. Once you completed the above steps, click on your newly created `Heroku Postgres` and go to its `Settings`. ![image](https://user-images.githubusercontent.com/16905768/115323367-e92ea980-a17f-11eb-9ff4-dec95f2ec349.png) - 7. In `Settings`, copy your URI to your Cal.com .env file and replace the `postgresql://:@:` with it. + 7. In `Settings`, copy your URI to your Cal.com `.env` file and replace the `postgresql://:@:` with it. ![image](https://user-images.githubusercontent.com/16905768/115323556-4591c900-a180-11eb-9808-2f55d2aa3995.png) ![image](https://user-images.githubusercontent.com/16905768/115323697-7a9e1b80-a180-11eb-9f08-a742b1037f90.png) - 8. To view your DB, once you add new data in Prisma, you can use [Heroku Data Explorer](https://heroku-data-explorer.herokuapp.com/). + 8. To view your DB, once you add new data in Prisma, you can use [Heroku Data Explorer](https://heroku-data-explorer.herokuapp.com).
-1. Set a 32 character random string in your .env file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one). +1. Set a 32 character random string in your `.env` file for the `CALENDSO_ENCRYPTION_KEY` (You can use a command like `openssl rand -base64 24` to generate one). 1. Set up the database using the Prisma schema (found in `packages/prisma/schema.prisma`) ```sh @@ -206,7 +206,7 @@ echo 'NEXT_PUBLIC_DEBUG=1' >> .env #### Setting up your first user -1. Open [Prisma Studio](https://www.prisma.io/studio) to look at or modify the database content: +1. Open [Prisma Studio](https://prisma.io/studio) to look at or modify the database content: ```sh yarn db-studio @@ -251,7 +251,7 @@ yarn playwright show-report test-results/reports/playwright-html-report yarn workspace @calcom/prisma db-migrate ``` - (this can clear your development database in some cases) + (This can clear your development database in some cases) In a production environment, run: @@ -285,7 +285,7 @@ yarn playwright show-report test-results/reports/playwright-html-report ### Docker -The Docker configuration for Cal is an effort powered by people within the community. +The Docker configuration for Cal.com is an effort powered by people within the community. If you want to contribute to the Docker repository, [reply here](https://github.com/calcom/docker/discussions/32). @@ -298,14 +298,14 @@ Cal.com, Inc. does not provide official support for Docker, but we will accept f ### Heroku - Deploy + Deploy ### Railway [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template/cal) -You can deploy Cal on [Railway](https://railway.app/) using the button above. The team at Railway also have a [detailed blog post](https://blog.railway.app/p/calendso) on deploying Cal on their platform. +You can deploy Cal.com on [Railway](https://railway.app) using the button above. The team at Railway also have a [detailed blog post](https://blog.railway.app/p/calendso) on deploying Cal.com on their platform. ### Vercel @@ -386,7 +386,7 @@ Don't code but still want to contribute? Join our [slack](https://cal.com/slack) 8. Select Web Application as the Application Type. 9. Under Authorized redirect URI's, select Add URI and then add the URI `/api/integrations/googlecalendar/callback` and `/api/auth/callback/google` replacing Cal.com URL with the URI at which your application runs. 10. The key will be created and you will be redirected back to the Credentials page. Select the newly generated client ID under OAuth 2.0 Client IDs. -11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the .env file as the value for GOOGLE_API_CREDENTIALS key. +11. Select Download JSON. Copy the contents of this file and paste the entire JSON string in the `.env` file as the value for `GOOGLE_API_CREDENTIALS` key. #### _Adding google calendar to Cal.com App Store_ @@ -423,7 +423,7 @@ following 5. Choose "User-managed app" as the app type. 6. De-select the option to publish the app on the Zoom App Marketplace. 7. Click "Create". -8. Now copy the Client ID and Client Secret to your .env file into the `ZOOM_CLIENT_ID` and `ZOOM_CLIENT_SECRET` fields. +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 `/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`. @@ -435,8 +435,8 @@ following 1. Visit our [Daily.co Partnership Form](https://go.cal.com/daily) and enter your information 2. From within your dashboard, go to the [developers](https://dashboard.daily.co/developers) tab. 3. Copy your API key. -4. Now paste the API key to your .env file into the `DAILY_API_KEY` field in your .env file. -5. If you have the [Daily Scale Plan](https://www.daily.co/pricing) set the `DAILY_SCALE_PLAN` variable to `true` in order to use features like video recording. +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 HubSpot Client ID and Secret @@ -445,7 +445,7 @@ following 3. Click "Create app" button top right. 4. Fill in any information you want in the "App info" tab 5. Go to tab "Auth" -6. Now copy the Client ID and Client Secret to your .env file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields. +6. Now copy the Client ID and Client Secret to your `.env` file into the `HUBSPOT_CLIENT_ID` and `HUBSPOT_CLIENT_SECRET` fields. 7. Set the Redirect URL for OAuth `/api/integrations/hubspot/callback` replacing Cal.com URL with the URI at which your application runs. 8. In the "Scopes" section at the bottom of the page, make sure you select "Read" and "Write" for scope called `crm.objects.contacts` 9. Click the "Save" button at the bottom footer. @@ -458,31 +458,33 @@ following 3. Click "ADD CLIENT" button top right and select "Server-based Applications". 4. Fill in any information you want in the "Client Details" tab 5. Go to tab "Client Secret" tab. -6. Now copy the Client ID and Client Secret to your .env file into the `ZOHOCRM_CLIENT_ID` and `ZOHOCRM_CLIENT_SECRET` fields. +6. Now copy the Client ID and Client Secret to your `.env` file into the `ZOHOCRM_CLIENT_ID` and `ZOHOCRM_CLIENT_SECRET` fields. 7. Set the Redirect URL for OAuth `/api/integrations/zohocrm/callback` replacing Cal.com URL with the URI at which your application runs. 8. In the "Settings" section check the "Multi-DC" option if you wish to use the same OAuth credentials for all data centers. 9. Click the "Save"/ "UPDATE" button at the bottom footer. 10. You're good to go. Now you can easily add your ZohoCRM integration in the Cal.com settings. +### Obtaining Zoho Bigin Client ID and Secret +[Follow these steps](./packages/app-store/zoho-bigin/) ## Workflows ### Setting up SendGrid for Email reminders 1. Create a SendGrid account (https://signup.sendgrid.com/) 2. Go to Settings -> API keys and create an API key -3. Copy API key to your .env file into the SENDGRID_API_KEY field +3. Copy API key to your `.env` file into the `SENDGRID_API_KEY` field 4. Go to Settings -> Sender Authentication and verify a single sender -5. Copy the verified E-Mail to your .env file into the SENDGRID_EMAIL field -6. Add your custom sender name to the .env file into the NEXT_PUBLIC_SENDGRID_SENDER_NAME field (fallback is Cal.com) +5. Copy the verified E-Mail to your `.env` file into the `SENDGRID_EMAIL` field +6. Add your custom sender name to the `.env` file into the `NEXT_PUBLIC_SENDGRID_SENDER_NAME` field (fallback is Cal.com) ### Setting up Twilio for SMS reminders -1. Create a Twilio account (https://www.twilio.com/try-twilio) +1. Create a Twilio account (https://twilio.com/try-twilio) 2. Click ‘Get a Twilio phone number’ -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) +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) 7. Create a messaging service (Develop -> Messaging -> Services) 8. Choose any name for the messaging service 9. Click 'Add Senders' @@ -490,9 +492,9 @@ following 11. Add the listed phone number 12. Leave all other fields as they are 13. Complete setup and click ‘View my new Messaging Service’ -14. Copy Messaging Service SID to your .env file into the TWILIO_MESSAGING_SID field +14. Copy Messaging Service SID to your `.env` file into the `TWILIO_MESSAGING_SID` field 15. Create a verify service -16. Copy Verify Service SID to your .env file into the TWILIO_VERIFY_SID field +16. Copy Verify Service SID to your `.env` file into the `TWILIO_VERIFY_SID` field diff --git a/apps/web/components/Embed.tsx b/apps/web/components/Embed.tsx index 72add48117..44d5fa5d1f 100644 --- a/apps/web/components/Embed.tsx +++ b/apps/web/components/Embed.tsx @@ -1,5 +1,6 @@ import { Collapsible, CollapsibleContent } from "@radix-ui/react-collapsible"; import classNames from "classnames"; +import type { TFunction } from "next-i18next"; import type { NextRouter } from "next/router"; import { useRouter } from "next/router"; import type { MutableRefObject, RefObject } from "react"; @@ -21,11 +22,10 @@ import { TextArea, TextField, ColorPicker, + Select, } from "@calcom/ui"; import { Code, Trello, Sun, ArrowLeft } from "@calcom/ui/components/icon"; -import Select from "@components/ui/form/Select"; - type EmbedType = "inline" | "floating-popup" | "element-click"; type EmbedFramework = "react" | "HTML"; @@ -305,190 +305,189 @@ const getEmbedTypeSpecificString = ({ return ""; }; -const embeds: { - illustration: React.ReactElement; - title: string; - subtitle: string; - type: EmbedType; -}[] = [ - { - title: "Inline Embed", - subtitle: "Loads your event type directly inline with your other website content.", - type: "inline", - illustration: ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - }, - { - title: "Floating pop-up button", - subtitle: "Adds a floating button on your site that launches Cal in a dialog.", - type: "floating-popup", - illustration: ( - - - - - - - - - - - ), - }, - { - title: "Pop up via element click", - subtitle: "Open your Cal dialog when someone clicks an element.", - type: "element-click", - illustration: ( - - - - - - - - - - - - +const embeds = (t: TFunction) => + (() => { + return [ + { + title: t("inline_embed"), + subtitle: t("load_inline_content"), + type: "inline", + illustration: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }, + { + title: t("floating_pop_up_button"), + subtitle: t("floating_button_trigger_modal"), + type: "floating-popup", + illustration: ( + + + + + + + + + + + ), + }, + { + title: t("pop_up_element_click"), + subtitle: t("open_dialog_with_element_click"), + type: "element-click", + illustration: ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ), + }, + ]; + })(); - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ), - }, -]; const tabs = [ { name: "HTML", @@ -534,11 +533,7 @@ ${getEmbedTypeSpecificString({ embedFramework: "HTML", embedType, calLink, previ ` } /> -

- {t( - "Need help? See our guides for embedding Cal on Wix, Squarespace, or WordPress, check our common questions, or explore advanced embed options." - )} -

+

{t("need_help_embedding")}

); }), @@ -622,7 +617,7 @@ Cal("init", {origin:"${WEBAPP_URL}"}); const ThemeSelectControl = ({ children, ...props }: ControlProps<{ value: Theme; label: string }, false>) => { return ( - + {children} ); @@ -642,7 +637,7 @@ const ChooseEmbedTypesDialogContent = () => {
- {embeds.map((embed, index) => ( + {embeds(t).map((embed, index) => ( {embed.title} -

{embed.subtitle}

+

{embed.subtitle}

{/*TODO: Add Auto/Fixed toggle from Figma */}
Window sizing
-
+
-
Button Text
+
Button text
{/* Default Values should come from preview iframe */}
@@ -935,14 +930,14 @@ const EmbedTypeCodeAndPreviewDialogContent = ({ }); }} /> -
Display Calendar Icon Button
+
Display calendar icon
-
Position of Button
+
Position of button
null, + }} + onChange={(option) => { + if (!option) { + return; + } + setPreviewState((previewState) => { + return { + ...previewState, + theme: option.value, + }; + }); + }} + options={ThemeOptions} + /> +
))} -