feat: Lock timezone on booking page (#11891)

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
2023-10-25 23:46:01 +05:30 · 2023-10-25 23:46:01 +05:30 · f9ad99e572
parent 1c65f5c150
commit f9ad99e572
14 changed files with 67 additions and 13 deletions
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@ -433,6 +433,23 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
          </>
        )}
      />
+      <Controller
+        name="lockTimeZoneToggleOnBookingPage"
+        control={formMethods.control}
+        defaultValue={eventType.lockTimeZoneToggleOnBookingPage}
+        render={({ field: { value, onChange } }) => (
+          <SettingsToggle
+            labelClassName="text-sm"
+            toggleSwitchAtTheEnd={true}
+            switchContainerClassName="border-subtle rounded-lg border py-6 px-4 sm:px-6"
+            title={t("lock_timezone_toggle_on_booking_page")}
+            {...shouldLockDisableProps("lockTimeZoneToggleOnBookingPage")}
+            description={t("description_lock_timezone_toggle_on_booking_page")}
+            checked={value}
+            onCheckedChange={(e) => onChange(e)}
+          />
+        )}
+      />
      {allowDisablingAttendeeConfirmationEmails(workflows) && (
        <>
          <Controller
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@ -264,6 +264,7 @@ export type UserPageProps = {
    | "slug"
    | "length"
    | "hidden"
+    | "lockTimeZoneToggleOnBookingPage"
    | "requiresConfirmation"
    | "requiresBookerEmailVerification"
    | "price"
--- a/apps/web/pages/event-types/[type]/index.tsx
+++ b/apps/web/pages/event-types/[type]/index.tsx
@ -87,6 +87,7 @@ export type FormValues = {
  offsetStart: number;
  description: string;
  disableGuests: boolean;
+  lockTimeZoneToggleOnBookingPage: boolean;
  requiresConfirmation: boolean;
  requiresBookerEmailVerification: boolean;
  recurringEvent: RecurringEvent | null;
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@ -2094,5 +2094,7 @@
  "overlay_my_calendar":"Overlay my calendar",
  "overlay_my_calendar_toc":"By connecting to your calendar, you accept our privacy policy and terms of use. You may revoke access at any time.",
  "view_overlay_calendar_events":"View your calendar events to prevent clashed booking.",
+  "lock_timezone_toggle_on_booking_page": "Lock timezone on booking page",
+  "description_lock_timezone_toggle_on_booking_page" : "To lock the timezone on booking page, useful for in-person events.",
  "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }
--- a/apps/web/test/lib/handleChildrenEventTypes.test.ts
+++ b/apps/web/test/lib/handleChildrenEventTypes.test.ts
@ -98,12 +98,19 @@ describe("handleChildrenEventTypes", () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      // eslint-disable-next-line
-      const { schedulingType, id, teamId, timeZone, users, requiresBookerEmailVerification, ...evType } =
-        mockFindFirstEventType({
-          id: 123,
-          metadata: { managedEventConfig: {} },
-          locations: [],
-        });
+      const {
+        schedulingType,
+        id,
+        teamId,
+        timeZone,
+        requiresBookerEmailVerification,
+        lockTimeZoneToggleOnBookingPage,
+        ...evType
+      } = mockFindFirstEventType({
+        id: 123,
+        metadata: { managedEventConfig: {} },
+        locations: [],
+      });
      const result = await updateChildrenEventTypes({
        eventTypeId: 1,
        oldEventType: { children: [], team: { name: "" } },
@ -145,6 +152,7 @@ describe("handleChildrenEventTypes", () => {
        userId,
        scheduleId,
        requiresBookerEmailVerification,
+        lockTimeZoneToggleOnBookingPage,
        ...evType
      } = mockFindFirstEventType({
        metadata: { managedEventConfig: {} },
@ -230,12 +238,19 @@ describe("handleChildrenEventTypes", () => {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      // eslint-disable-next-line
-      const { schedulingType, id, teamId, timeZone, users, requiresBookerEmailVerification, ...evType } =
-        mockFindFirstEventType({
-          id: 123,
-          metadata: { managedEventConfig: {} },
-          locations: [],
-        });
+      const {
+        schedulingType,
+        id,
+        teamId,
+        timeZone,
+        requiresBookerEmailVerification,
+        lockTimeZoneToggleOnBookingPage,
+        ...evType
+      } = mockFindFirstEventType({
+        id: 123,
+        metadata: { managedEventConfig: {} },
+        locations: [],
+      });
      prismaMock.eventType.deleteMany.mockResolvedValue([123] as unknown as Prisma.BatchPayload);
      const result = await updateChildrenEventTypes({
        eventTypeId: 1,
@ -277,6 +292,7 @@ describe("handleChildrenEventTypes", () => {
        parentId,
        userId,
        requiresBookerEmailVerification,
+        lockTimeZoneToggleOnBookingPage,
        ...evType
      } = mockFindFirstEventType({
        metadata: { managedEventConfig: {} },
@ -327,6 +343,7 @@ describe("handleChildrenEventTypes", () => {
        userId: _userId,
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        requiresBookerEmailVerification,
+        lockTimeZoneToggleOnBookingPage,
        ...evType
      } = mockFindFirstEventType({
        metadata: { managedEventConfig: {} },
--- a/packages/features/bookings/Booker/components/EventMeta.tsx
+++ b/packages/features/bookings/Booker/components/EventMeta.tsx
@ -105,6 +105,7 @@ export const EventMeta = () => {
              </EventMetaBlock>
            )}
            <EventDetails event={event} />
+
            <EventMetaBlock
              className="cursor-pointer [&_.current-timezone:before]:focus-within:opacity-100 [&_.current-timezone:before]:hover:opacity-100"
              contentClassName="relative max-w-[90%]"
@ -112,7 +113,10 @@ export const EventMeta = () => {
              {bookerState === "booking" ? (
                <>{timezone}</>
              ) : (
-                <span className="min-w-32 current-timezone before:bg-subtle -mt-[2px] flex h-6 max-w-full items-center justify-start before:absolute before:inset-0 before:bottom-[-3px] before:left-[-30px] before:top-[-3px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity">
+                <span
+                  className={`min-w-32 current-timezone before:bg-subtle -mt-[2px] flex h-6 max-w-full items-center justify-start before:absolute before:inset-0 before:bottom-[-3px] before:left-[-30px] before:top-[-3px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity ${
+                    event.lockTimeZoneToggleOnBookingPage ? "cursor-not-allowed" : ""
+                  }`}>
                  <TimezoneSelect
                    menuPosition="fixed"
                    classNames={{
@ -124,6 +128,7 @@ export const EventMeta = () => {
                    }}
                    value={timezone}
                    onChange={(tz) => setTimezone(tz.value)}
+                    isDisabled={event.lockTimeZoneToggleOnBookingPage}
                  />
                </span>
              )}
--- a/packages/features/bookings/lib/handleNewBooking.ts
+++ b/packages/features/bookings/lib/handleNewBooking.ts
@ -276,6 +276,7 @@ const getEventTypesFromDB = async (eventTypeId: number) => {
      periodEndDate: true,
      periodDays: true,
      periodCountCalendarDays: true,
+      lockTimeZoneToggleOnBookingPage: true,
      requiresConfirmation: true,
      requiresBookerEmailVerification: true,
      userId: true,
@ -2686,6 +2687,7 @@ const findBookingQuery = async (bookingId: number) => {
          description: true,
          currency: true,
          length: true,
+          lockTimeZoneToggleOnBookingPage: true,
          requiresConfirmation: true,
          requiresBookerEmailVerification: true,
          price: true,
--- a/packages/features/eventtypes/lib/getPublicEvent.ts
+++ b/packages/features/eventtypes/lib/getPublicEvent.ts
@ -33,6 +33,7 @@ const publicEventSelect = Prisma.validator<Prisma.EventTypeSelect>()({
  customInputs: true,
  disableGuests: true,
  metadata: true,
+  lockTimeZoneToggleOnBookingPage: true,
  requiresConfirmation: true,
  requiresBookerEmailVerification: true,
  recurringEvent: true,
--- a/packages/lib/defaultEvents.ts
+++ b/packages/lib/defaultEvents.ts
@ -86,6 +86,7 @@ const commons = {
  recurringEvent: null,
  destinationCalendar: null,
  team: null,
+  lockTimeZoneToggleOnBookingPage: false,
  requiresConfirmation: false,
  requiresBookerEmailVerification: false,
  bookingLimits: null,
--- a/packages/lib/getEventTypeById.ts
+++ b/packages/lib/getEventTypeById.ts
@ -89,6 +89,7 @@ export default async function getEventTypeById({
      periodStartDate: true,
      periodEndDate: true,
      periodCountCalendarDays: true,
+      lockTimeZoneToggleOnBookingPage: true,
      requiresConfirmation: true,
      requiresBookerEmailVerification: true,
      recurringEvent: true,
--- a/packages/lib/test/builder.ts
+++ b/packages/lib/test/builder.ts
@ -85,6 +85,7 @@ export const buildEventType = (eventType?: Partial<EventType>): EventType => {
    periodDays: null,
    periodCountCalendarDays: null,
    recurringEvent: null,
+    lockTimeZoneToggleOnBookingPage: false,
    requiresConfirmation: false,
    disableGuests: false,
    hideCalendarNotes: false,
--- a/packages/prisma/migrations/20231020090443_add_lock_timezone_toggle/migration.sql
+++ b/packages/prisma/migrations/20231020090443_add_lock_timezone_toggle/migration.sql
@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "EventType" ADD COLUMN     "lockTimeZoneToggleOnBookingPage" BOOLEAN NOT NULL DEFAULT false;
--- a/packages/prisma/schema.prisma
+++ b/packages/prisma/schema.prisma
@ -86,6 +86,7 @@ model EventType {
  periodEndDate                   DateTime?
  periodDays                      Int?
  periodCountCalendarDays         Boolean?
+  lockTimeZoneToggleOnBookingPage Boolean                 @default(false)
  requiresConfirmation            Boolean                 @default(false)
  requiresBookerEmailVerification Boolean                 @default(false)
  /// @zod.custom(imports.recurringEventType)
--- a/packages/prisma/selects/event-types.ts
+++ b/packages/prisma/selects/event-types.ts
@ -11,6 +11,7 @@ export const baseEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
  hidden: true,
  price: true,
  currency: true,
+  lockTimeZoneToggleOnBookingPage: true,
  requiresConfirmation: true,
  requiresBookerEmailVerification: true,
 });
@ -28,6 +29,7 @@ export const bookEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
  periodStartDate: true,
  periodEndDate: true,
  recurringEvent: true,
+  lockTimeZoneToggleOnBookingPage: true,
  requiresConfirmation: true,
  requiresBookerEmailVerification: true,
  metadata: true,