Merge branch 'main' into fix/use-dark-lightmode-from-user-settings

.gitpod.yml

@@ -0,0 +1,43 @@
+tasks:
+  - init: |
+      yarn &&
+      cp .env.example .env &&
+      next_auth_secret=$(openssl rand -base64 32) &&
+      calendso_encryption_key=$(openssl rand -base64 24) &&
+      sed -i -e "s|^NEXTAUTH_SECRET=.*|NEXTAUTH_SECRET=$next_auth_secret|" \
+             -e "s|^CALENDSO_ENCRYPTION_KEY=.*|CALENDSO_ENCRYPTION_KEY=$calendso_encryption_key|" .env
+    command: yarn dx
+
+ports:
+  - port: 3000
+    visibility: public
+    onOpen: open-preview
+  - port: 5420
+    visibility: private
+    onOpen: ignore
+  - port: 1025
+    visibility: private
+    onOpen: ignore
+  - port: 8025
+    visibility: private
+    onOpen: ignore
+
+github:
+  prebuilds:
+    master: true
+    pullRequests: true
+    pullRequestsFromForks: true
+    addCheck: true
+    addComment: true
+    addBadge: true
+
+vscode:
+  extensions:
+    - DavidAnson.vscode-markdownlint
+    - yzhang.markdown-all-in-one
+    - esbenp.prettier-vscode
+    - dbaeumer.vscode-eslint
+    - bradlc.vscode-tailwindcss
+    - ban.spellright
+    - stripe.vscode-stripe
+    - Prisma.prisma

CONTRIBUTING.md

@@ -86,7 +86,12 @@ To develop locally:
    yarn
    ```
 
-5. Start developing and watch for code changes:
+5. Set up your `.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.
+
+6. Start developing and watch for code changes:
 
    ```sh
    yarn dev

README.md

@@ -158,6 +158,15 @@ yarn dx
 ```sh
 echo 'NEXT_PUBLIC_DEBUG=1' >> .env
 ```
+#### Gitpod Setup
+
+1. Click the button below to open this project in Gitpod.
+
+2. This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/calcom/cal.com)
+
+
 
 #### Manual setup
 

apps/web/components/booking/BookingListItem.tsx

@@ -29,7 +29,7 @@ import {
   TableActions,
   TextAreaField,
 } from "@calcom/ui";
-import { Check, Clock, MapPin, RefreshCcw, Send, Slash, X, CreditCard } from "@calcom/ui/components/icon";
+import { Check, Clock, MapPin, RefreshCcw, Send, Ban, X, CreditCard } from "@calcom/ui/components/icon";
 
 import useMeQuery from "@lib/hooks/useMeQuery";
 
@@ -119,7 +119,7 @@ function BookingListItem(booking: BookingItemProps) {
       onClick: () => {
         setRejectionDialogIsOpen(true);
       },
-      icon: Slash,
+      icon: Ban,
       disabled: mutation.isLoading,
     },
     // For bookings with payment, only confirm if the booking is paid for

apps/web/components/eventtype/EventLimitsTab.tsx

@@ -108,7 +108,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
 });
 
 export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventType">) => {
-  const { t } = useLocale();
+  const { t, i18n } = useLocale();
   const formMethods = useFormContext<FormValues>();
 
   const PERIOD_TYPES = [
@@ -149,12 +149,25 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
   const bookingLimitsLocked = shouldLockDisableProps("bookingLimits");
   const durationLimitsLocked = shouldLockDisableProps("durationLimits");
   const periodTypeLocked = shouldLockDisableProps("periodType");
+  const offsetStartLockedProps = shouldLockDisableProps("offsetStart");
 
   const optionsPeriod = [
     { value: 1, label: t("calendar_days") },
     { value: 0, label: t("business_days") },
   ];
 
+  // offsetStart toggle is client-side only, opened by default if offsetStart is set
+  const offsetStartValue = useWatch({
+    control: formMethods.control,
+    name: "offsetStart",
+  });
+  const [offsetToggle, setOffsetToggle] = useState(() => offsetStartValue > 0);
+
+  // Preview how the offset will affect start times
+  const offsetOriginalTime = new Date();
+  offsetOriginalTime.setHours(9, 0, 0, 0);
+  const offsetAdjustedTime = new Date(offsetOriginalTime.getTime() + offsetStartValue * 60 * 1000);
+
   return (
     <div className="space-y-8">
       <div className="space-y-4 lg:space-y-8">
@@ -432,6 +445,32 @@ export const EventLimitsTab = ({ eventType }: Pick<EventTypeSetupProps, "eventTy
           </SettingsToggle>
         )}
       />
+      <hr className="border-subtle" />
+      <SettingsToggle
+        title={t("offset_toggle")}
+        description={t("offset_toggle_description")}
+        {...offsetStartLockedProps}
+        checked={offsetToggle}
+        onCheckedChange={(active) => {
+          setOffsetToggle(active);
+          if (!active) {
+            formMethods.setValue("offsetStart", 0);
+          }
+        }}>
+        <TextField
+          required
+          type="number"
+          {...offsetStartLockedProps}
+          label={t("offset_start")}
+          defaultValue={eventType.offsetStart}
+          {...formMethods.register("offsetStart")}
+          addOnSuffix={<>{t("minutes")}</>}
+          hint={t("offset_start_description", {
+            originalTime: offsetOriginalTime.toLocaleTimeString(i18n.language, { timeStyle: "short" }),
+            adjustedTime: offsetAdjustedTime.toLocaleTimeString(i18n.language, { timeStyle: "short" }),
+          })}
+        />
+      </SettingsToggle>
     </div>
   );
 };

apps/web/components/eventtype/EventSetupTab.tsx

@@ -390,7 +390,12 @@ export const EventSetupTab = (
           addOnLeading={
             <>
               {CAL_URL?.replace(/^(https?:|)\/\//, "")}/
-              {team ? "team/" + team.slug : eventType.users[0].username}/
+              {!isManagedEventType
+                ? team
+                  ? "team/" + team.slug
+                  : eventType.users[0].username
+                : t("username_placeholder")}
+              /
             </>
           }
           {...formMethods.register("slug", {

apps/web/components/eventtype/EventTypeSingleLayout.tsx

@@ -170,7 +170,7 @@ function EventTypeSingleLayout({
 
   // Define tab navigation here
   const EventTypeTabs = useMemo(() => {
-    let navigation = getNavigation({
+    const navigation = getNavigation({
       t,
       eventType,
       enabledAppsNumber,
@@ -210,7 +210,7 @@ function EventTypeSingleLayout({
     }
     if (isManagedEventType || isChildrenManagedEventType) {
       // Removing apps and workflows for manageg event types by admins v1
-      navigation = navigation.slice(0, -2);
+      navigation.splice(-2, 1);
     } else {
       navigation.push({
         name: "webhooks",

apps/web/components/getting-started/steps-views/ConnectCalendars.tsx

@@ -1,9 +1,8 @@
-import { ArrowRightIcon } from "@heroicons/react/solid";
-
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { List } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { AppConnectionItem } from "../components/AppConnectionItem";
 import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem";
@@ -85,7 +84,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         onClick={() => nextStep()}
         disabled={disabledNextButton}>
         {firstCalendar ? `${t("continue")}` : `${t("next_step_text")}`}
-        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </button>
     </>
   );

apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx

@@ -1,9 +1,8 @@
-import { ArrowRightIcon } from "@heroicons/react/solid";
-
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { List } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { AppConnectionItem } from "../components/AppConnectionItem";
 import { StepConnectionLoader } from "../components/StepConnectionLoader";
@@ -59,7 +58,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
         disabled={!hasAnyInstalledVideoApps}
         onClick={() => nextStep()}>
         {t("next_step_text")}
-        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </button>
     </>
   );

apps/web/components/getting-started/steps-views/SetupAvailability.tsx

@@ -1,4 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import { useForm } from "react-hook-form";
 
@@ -9,6 +8,7 @@ import type { TRPCClientErrorLike } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Form } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 interface ISetupAvailabilityProps {
   nextStep: () => void;
@@ -81,7 +81,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
           type="submit"
           className="mt-2 w-full justify-center p-2 text-sm sm:mt-8"
           disabled={availabilityForm.formState.isSubmitting}>
-          {t("next_step_text")} <ArrowRightIcon className="ml-2 h-4 w-4 self-center" />
+          {t("next_step_text")} <ArrowRight className="ml-2 h-4 w-4 self-center" />
         </Button>
       </div>
     </Form>

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -1,4 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/solid";
 import { useRouter } from "next/router";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
@@ -11,6 +10,7 @@ import turndown from "@calcom/lib/turndownService";
 import { trpc } from "@calcom/trpc/react";
 import { Button, Editor, ImageUploader, Label, showToast } from "@calcom/ui";
 import { Avatar } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import type { IOnboardingPageProps } from "../../../pages/getting-started/[[...step]]";
 
@@ -159,7 +159,7 @@ const UserProfile = (props: IUserProfileProps) => {
         type="submit"
         className="text-inverted mt-8 flex w-full flex-row justify-center rounded-md border border-black bg-black p-2 text-center text-sm">
         {t("finish")}
-        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </Button>
     </form>
   );

apps/web/components/getting-started/steps-views/UserSettings.tsx

@@ -1,4 +1,3 @@
-import { ArrowRightIcon } from "@heroicons/react/outline";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -10,6 +9,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { trpc } from "@calcom/trpc/react";
 import { Button, TimezoneSelect } from "@calcom/ui";
+import { ArrowRight } from "@calcom/ui/components/icon";
 
 import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
 
@@ -116,7 +116,7 @@ const UserSettings = (props: IUserSettingsProps) => {
         className="mt-8 flex w-full flex-row justify-center"
         disabled={mutation.isLoading}>
         {t("next_step_text")}
-        <ArrowRightIcon className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
+        <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </Button>
     </form>
   );

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

@@ -31,7 +31,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
             {!isBioEmpty ? (
               <>
                 <div
-                  className=" text-subtle text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
                 />
               </>

apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx

@@ -1,4 +1,3 @@
-import { StarIcon as StarIconSolid } from "@heroicons/react/solid";
 import classNames from "classnames";
 import { debounce, noop } from "lodash";
 import { useRouter } from "next/router";
@@ -15,6 +14,7 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Button, Dialog, DialogClose, DialogContent, Input, Label } from "@calcom/ui";
+import { Star as StarSolid } from "@calcom/ui/components/icon";
 import { Check, Edit2, ExternalLink } from "@calcom/ui/components/icon";
 
 export enum UsernameChangeStatusEnum {
@@ -231,11 +231,15 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             <span
               className={classNames(
                 "mx-2 py-2",
-                isInputUsernamePremium ? "text-orange-400" : "",
+                isInputUsernamePremium ? "text-transparent" : "",
                 usernameIsAvailable ? "" : ""
               )}>
-              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] h-4 w-4" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 h-4 w-4" /> : <></>}
+              {isInputUsernamePremium ? <StarSolid className="mt-[2px] h-4 w-4 fill-orange-400" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? (
+                <Check className="mt-[2px] h-4 w-4" />
+              ) : (
+                <></>
+              )}
             </span>
           </div>
         </div>