feat: editmode availbility slider (#11197)

* Add loading data and banner * [WIP] hasEditPerms middleware * fix: type error in booker (#11011) * New Crowdin translations by Github Action * refactor: removed redundant test (#10785) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com> * feat: 2fa backup codes (#10600) Co-authored-by: Peer Richelsen <peeroke@gmail.com> * Delete add-PRs-to-project-reviewing-PRs.yml (#11008) Co-authored-by: alannnc <alannnc@gmail.com> * New Crowdin translations by Github Action * fix: multiple duration when booking (#11032) * fix: other reported issues (#11015) * fix: weird margin top in avatar * fix: pending users are shown on booking page * fix: avatar and naming issues * fix: toast alignment and removing unneeded titles * missing changes from toast improvements * feat: empty state for teams without event types * Removing console.log * feat: cal ai (#10992) Co-authored-by: nicktrn <55853254+nicktrn@users.noreply.github.com> Co-authored-by: tedspare <ted.spare@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> * New Crowdin translations by Github Action * fix: meeting ended trigger for webhooks and zapier sometimes not working (#10946) Co-authored-by: mohammed gehad <mohammed.gehad.1998@gmail.com> Co-authored-by: Monto <138862352+monto7926@users.noreply.github.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> * feat: team admin: see connected apps of team members (#11036) * added feature:team admin can see connected apps of members * fixed the type error * Update packages/lib/server/queries/teams/index.ts * Minor fixes --------- Co-authored-by: alannnc <alannnc@gmail.com> * fix: lower case slugs in teams (#11026) * fix: lower case slugs in teams Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * fix: use slugify Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> --------- Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * refactor: improvements on german translation (#10898) * fix: fix-tablet-menu-not-centered-sidebar (#11020) Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> * chore: add Popover in storybook (#11021) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> * fix: Set mobile availability (#11027) * chore: add ColorPicker in storybook (CALCOM-10760) (#10866) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> * feat: adds next cold start profiler (#11014) * Handle disabling of ORGANIZATIONS_ENABLED flag (#11041) * New Crowdin translations by Github Action * styles:dark mode color fix (#11004) * chore: sheet darkmode and improve responsive (#11047) * fix: handle collective multiple host on destinationCalendar (#10967) * fix: include app data and credentials from DB (#11048) * include app data and credentials from DB * Improve performance * fix: Error when running storybook (#11037) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> * fix: broken company profile link on team booking page (#10978) * chore: add ErrorBoundary in storybook (CALCOM-10760) (#10872) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> * feat: sorting for workflow and routing forms (#10780) Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Co-authored-by: Peer Richelsen <peeroke@gmail.com> * resolve zod versions across child packages (#11052) * fix: List storybook file is empty (fix-list) (#10965) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> * fix: admin org list without members (#11051) Co-authored-by: Peer Richelsen <peeroke@gmail.com> * chore: add ToggleGroup in storybook (#10802) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * fix: add metadata to stripe payment intent (#11053) * fix: Logo storybook file with invalid icons (fix-logo) (#11018) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> * fix: Add controls for Select Field storybook file (#10936) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> * fix: Fix tooltip control on ButtonPlayground storybook file (fix-ButtonTooltip) (#10937) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> * fix: email embed – remove collapsible and permanently show times (#10996) Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Mehul <mehulzr@gmail.com> * chore: add Timezone Select in storybook (CALCOM-10760) (#10966) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> * chore: add Switch in storybook (CALCOM-10760) (#10804) Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> * Sync packages * fix: zod utils due to upgrade * easy fix (#11054) * fix sub quantity update stripe (#11057) * v3.2.7 * Revert "feat: adds next cold start profiler (#11014)" (#11072) This reverts commit 05631d0. * fix: Fixes username invite issue (#10998) * Fixes username invite issue * Ensure we only suggest email invites in org members --------- Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> * Fix sheet layout * WIP permissions when userschedule doesnt match * WIP get handler weird behaviour * Update toast * add disabled - handle membership overlap * Handle permissions + perf improvments * use input uid * Remove Console.log * Clean up * Revert changes accidental * Fix merge artifacts * Remove dead code * Remove code after return * Update read permission check * Revert avatar changes as fixed elsewhere * Handle if user has not completed onboarding * Disable button * Update packages/lib/hasEditPermissionForUser.ts * Correct Error throwing * Update packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx * Fix type erro * Add i18n * Improve Spacing * Update yarn.lock --------- Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: GitStart-Cal.com <121884634+gitstart-calcom@users.noreply.github.com> Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com> Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com> Co-authored-by: nicktrn <55853254+nicktrn@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: alannnc <alannnc@gmail.com> Co-authored-by: Leo Giovanetti <hello@leog.me> Co-authored-by: DexterStorey <36115192+DexterStorey@users.noreply.github.com> Co-authored-by: tedspare <ted.spare@gmail.com> Co-authored-by: Alex van Andel <me@alexvanandel.com> Co-authored-by: Monto <138862352+montocoder@users.noreply.github.com> Co-authored-by: mohammed gehad <mohammed.gehad.1998@gmail.com> Co-authored-by: Monto <138862352+monto7926@users.noreply.github.com> Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com> Co-authored-by: Abhijeet Singh <asingh9829@gmail.com> Co-authored-by: Kamil B. Demirci <kamil.demirci@indyaner.ch> Co-authored-by: Denzil Samuel <71846487+samueldenzil@users.noreply.github.com> Co-authored-by: Udit Takkar <udit.07814802719@cse.mait.ac.in> Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Sahil Padvi <71093044+Sahil25061999@users.noreply.github.com> Co-authored-by: Patel Divyesh <pateldivyesh1323@gmail.com> Co-authored-by: neo773 <62795688+neo773@users.noreply.github.com> Co-authored-by: Mehul <mehulzr@gmail.com>
calcom · Sep 14, 2023 · a2d1dbe · a2d1dbe · vercel · Sep 14, 2023
1 parent 605e744
commit a2d1dbe
Show file tree

Hide file tree

Showing 18 changed files with 502 additions and 42 deletions.
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
@@ -2050,5 +2050,8 @@
   "no_members_found": "No members found",
   "event_setup_length_error":"Event Setup: The duration must be at least 1 minute.",
   "availability_schedules":"Availability Schedules",
+  "view_only_edit_availability_not_onboarded":"This user has not completed onboarding. You will not be able to set their availability until they have completed onboarding.",
+  "view_only_edit_availability":"You are viewing this user's availability. You can only edit your own availability.",
+  "edit_users_availability":"Edit user's availability: {{username}}",
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
@@ -43,11 +43,13 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
   weekday,
   control,
   CopyButton,
+  disabled,
 }: {
   name: ArrayPath<TFieldValues>;
   weekday: string;
   control: Control<TFieldValues>;
   CopyButton: JSX.Element;
+  disabled?: boolean;
 }) => {
   const { watch, setValue } = useFormContext();
   const watchDayRange = watch(name);
@@ -60,7 +62,7 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
           <label className="text-default flex flex-row items-center space-x-2 rtl:space-x-reverse">
             <div>
               <Switch
-                disabled={!watchDayRange}
+                disabled={!watchDayRange || disabled}
                 defaultChecked={watchDayRange && watchDayRange.length > 0}
                 checked={watchDayRange && !!watchDayRange.length}
                 onCheckedChange={(isChecked) => {
@@ -75,8 +77,8 @@ const ScheduleDay = <TFieldValues extends FieldValues>({
       <>
         {watchDayRange ? (
           <div className="flex sm:ml-2">
-            <DayRanges control={control} name={name} />
-            {!!watchDayRange.length && <div className="block">{CopyButton}</div>}
+            <DayRanges control={control} name={name} disabled={disabled} />
+            {!!watchDayRange.length && !disabled && <div className="block">{CopyButton}</div>}
           </div>
         ) : (
           <SkeletonText className="ml-1 mt-2.5 h-6 w-48" />
@@ -133,11 +135,13 @@ const Schedule = <
 >({
   name,
   control,
+  disabled,
   weekStart = 0,
 }: {
   name: TPath;
   control: Control<TFieldValues>;
   weekStart?: number;
+  disabled?: boolean;
 }) => {
   const { i18n } = useLocale();
 
@@ -149,6 +153,7 @@ const Schedule = <
         const dayRangeName = `${name}.${weekdayIndex}` as ArrayPath<TFieldValues>;
         return (
           <ScheduleDay
+            disabled={disabled}
             name={dayRangeName}
             key={weekday}
             weekday={weekday}
@@ -163,10 +168,12 @@ const Schedule = <
 
 export const DayRanges = <TFieldValues extends FieldValues>({
   name,
+  disabled,
   control,
 }: {
   name: ArrayPath<TFieldValues>;
   control?: Control<TFieldValues>;
+  disabled?: boolean;
 }) => {
   const { t } = useLocale();
   const { getValues } = useFormContext();
@@ -184,6 +191,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
             <Controller name={`${name}.${index}`} render={({ field }) => <TimeRangeField {...field} />} />
             {index === 0 && (
               <Button
+                disabled={disabled}
                 tooltip={t("add_time_availability")}
                 className="text-default mx-2 "
                 type="button"
@@ -220,15 +228,18 @@ export const DayRanges = <TFieldValues extends FieldValues>({
 const RemoveTimeButton = ({
   index,
   remove,
+  disabled,
   className,
 }: {
   index: number | number[];
   remove: UseFieldArrayRemove;
   className?: string;
+  disabled?: boolean;
 }) => {
   const { t } = useLocale();
   return (
     <Button
+      disabled={disabled}
       type="button"
       variant="icon"
       color="destructive"
@@ -240,12 +251,18 @@ const RemoveTimeButton = ({
   );
 };
 
-const TimeRangeField = ({ className, value, onChange }: { className?: string } & ControllerRenderProps) => {
+const TimeRangeField = ({
+  className,
+  value,
+  onChange,
+  disabled,
+}: { className?: string; disabled?: boolean } & ControllerRenderProps) => {
   // this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
   return (
     <div className={classNames("flex flex-row gap-1", className)}>
       <LazySelect
         className="inline-block w-[100px]"
+        isDisabled={disabled}
         value={value.start}
         max={value.end}
         onChange={(option) => {
@@ -255,6 +272,7 @@ const TimeRangeField = ({ className, value, onChange }: { className?: string } &
       <span className="text-default mx-2 w-2 self-center"> - </span>
       <LazySelect
         className="inline-block w-[100px] rounded-md"
+        isDisabled={disabled}
         value={value.end}
         min={value.start}
         onChange={(option) => {

diff --git a/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
@@ -0,0 +1,199 @@
+import { useForm, useFieldArray } from "react-hook-form";
+
+import dayjs from "@calcom/dayjs";
+import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
+import Schedule from "@calcom/features/schedules/components/Schedule";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { HttpError } from "@calcom/lib/http-error";
+import { trpc } from "@calcom/trpc/react";
+import type { Schedule as ScheduleType, TimeRange, WorkingHours } from "@calcom/types/schedule";
+import {
+  Button,
+  Form,
+  Label,
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  TimezoneSelect,
+  showToast,
+  Alert,
+} from "@calcom/ui";
+import { Plus } from "@calcom/ui/components/icon";
+
+import type { SliderUser } from "./AvailabilitySliderTable";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedUser?: SliderUser | null;
+}
+
+type AvailabilityFormValues = {
+  name: string;
+  schedule: ScheduleType;
+  dateOverrides: { ranges: TimeRange[] }[];
+  timeZone: string;
+  isDefault: boolean;
+};
+
+const DateOverride = ({ workingHours, disabled }: { workingHours: WorkingHours[]; disabled?: boolean }) => {
+  const { remove, append, replace, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
+    name: "dateOverrides",
+  });
+  const excludedDates = fields.map((field) => dayjs(field.ranges[0].start).utc().format("YYYY-MM-DD"));
+  const { t } = useLocale();
+  return (
+    <div className="">
+      <Label>{t("date_overrides")}</Label>
+      <div className="space-y-2">
+        <DateOverrideList
+          excludedDates={excludedDates}
+          remove={remove}
+          replace={replace}
+          items={fields}
+          workingHours={workingHours}
+        />
+        <DateOverrideInputDialog
+          workingHours={workingHours}
+          excludedDates={excludedDates}
+          onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
+          Trigger={
+            <Button color="secondary" StartIcon={Plus} data-testid="add-override" disabled={disabled}>
+              {t("add_an_override")}
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export function AvailabilityEditSheet(props: Props) {
+  // This sheet will not be rendered without a selected user
+  const userId = props.selectedUser?.id as number;
+  const { t } = useLocale();
+  const utils = trpc.useContext();
+
+  const { data: hasEditPermission, isLoading: loadingPermissions } =
+    trpc.viewer.teams.hasEditPermissionForUser.useQuery({
+      memberId: userId,
+    });
+
+  const { data, isLoading } = trpc.viewer.availability.schedule.getScheduleByUserId.useQuery({
+    userId: userId,
+  });
+
+  const updateMutation = trpc.viewer.availability.schedule.update.useMutation({
+    onSuccess: async () => {
+      utils.viewer.availability.listTeam.invalidate();
+      showToast(t("success"), "success");
+      props.onOpenChange(false);
+    },
+    onError: (err) => {
+      if (err instanceof HttpError) {
+        const message = `${err.statusCode}: ${err.message}`;
+        showToast(message, "error");
+      }
+    },
+  });
+
+  const form = useForm<AvailabilityFormValues>({
+    values: data && {
+      ...data,
+      timeZone: data?.timeZone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+      schedule: data?.availability || [],
+    },
+  });
+
+  const watchTimezone = form.watch("timeZone");
+
+  return (
+    <Sheet open={props.open} onOpenChange={props.onOpenChange}>
+      <Form
+        form={form}
+        id="availability-form"
+        handleSubmit={async ({ dateOverrides, ...values }) => {
+          // Just blocking on a UI side -> Backend will also do the validation
+          if (!hasEditPermission) return;
+          data &&
+            updateMutation.mutate({
+              scheduleId: data?.id,
+              dateOverrides: dateOverrides.flatMap((override) => override.ranges),
+              ...values,
+            });
+        }}>
+        <SheetContent
+          bottomActions={
+            <>
+              <Button color="secondary" className="w-full justify-center">
+                {t("cancel")}
+              </Button>
+              <Button
+                disabled={!hasEditPermission || !data?.hasDefaultSchedule}
+                className="w-full justify-center"
+                type="submit"
+                loading={updateMutation.isLoading}
+                form="availability-form">
+                {t("save")}
+              </Button>
+            </>
+          }>
+          <SheetHeader>
+            <SheetTitle>
+              {t("edit_users_availability", {
+                username: props.selectedUser?.username ?? "Nameless user",
+              })}
+            </SheetTitle>
+          </SheetHeader>
+          {!data?.hasDefaultSchedule && !isLoading && hasEditPermission && (
+            <div className="my-2">
+              <Alert severity="warning" title={t("view_only_edit_availability_not_onboarded")} />
+            </div>
+          )}
+          {!hasEditPermission && !loadingPermissions && (
+            <div className="my-2">
+              <Alert severity="warning" title={t("view_only_edit_availability")} />
+            </div>
+          )}
+
+          <div className="mt-4 flex flex-col space-y-4">
+            <div>
+              <Label className="text-emphasis">
+                <>{t("timezone")}</>
+              </Label>
+              <TimezoneSelect
+                id="timezone"
+                isDisabled={!hasEditPermission || !data?.hasDefaultSchedule}
+                value={watchTimezone ?? "Europe/London"}
+                onChange={(event) => {
+                  if (event) form.setValue("timeZone", event.value, { shouldDirty: true });
+                }}
+              />
+            </div>
+            <div className="mt-4">
+              <Label className="text-emphasis">{t("members_default_schedule")}</Label>
+              {/* Remove padding from schedule without touching the component */}
+              <div className="[&>*:first-child]:!p-0">
+                <Schedule
+                  control={form.control}
+                  name="schedule"
+                  weekStart={0}
+                  disabled={!hasEditPermission || !data?.hasDefaultSchedule}
+                />
+              </div>
+            </div>
+            <div className="mt-4">
+              {data?.workingHours && (
+                <DateOverride
+                  workingHours={data.workingHours}
+                  disabled={!hasEditPermission || !data.hasDefaultSchedule}
+                />
+              )}
+            </div>
+          </div>
+        </SheetContent>
+      </Form>
+    </Sheet>
+  );
+}