commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

Adding UI for Requires Confirmation (#3017)

Browse Source
This commit is contained in:
sean-brydon
2022-06-10 17:32:54 -06:00
committed by GitHub
parent 514fca7a53
commit 567a7c8f12
9 changed files with 140 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/booking/pages/AvailabilityPage.tsx
+16 -1
View File
@@ -9,6 +9,7 @@ import {
GlobeIcon,
InformationCircleIcon,
LocationMarkerIcon,
ClipboardCheckIcon,
RefreshIcon,
VideoCameraIcon,
} from "@heroicons/react/solid";
@@ -260,6 +261,12 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
{eventType.description}
</p>
)}
{eventType?.requiresConfirmation && (
<p className="text-gray-600 dark:text-white">
<ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4" />
{t("requires_confirmation")}
</p>
)}
{eventType.locations.length === 1 && (
<p className="text-gray-600 dark:text-white">
{Object.values(AppStoreLocationType).includes(
@@ -395,6 +402,14 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
<p>{eventType.description}</p>
</div>
)}
{eventType?.requiresConfirmation && (
<div className="flex text-gray-600 dark:text-white">
<div>
<ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
</div>
{t("requires_confirmation")}
</div>
)}
{eventType.locations.length === 1 && (
<p className="text-gray-600 dark:text-white">
{Object.values(AppStoreLocationType).includes(
@@ -542,7 +557,7 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
function TimezoneDropdown() {
return (
<Collapsible.Root open={isTimeOptionsOpen} onOpenChange={setIsTimeOptionsOpen}>
<Collapsible.Trigger className="min-w-32 text-bookinglight mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
<Collapsible.Trigger className="min-w-32 text-gray mb-1 -ml-2 px-2 py-1 text-left dark:text-white">
<GlobeIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
{timeZone()}
{isTimeOptionsOpen ? (
apps/web/components/booking/pages/BookingPage.tsx
+7
View File
@@ -5,6 +5,7 @@ import {
ExclamationCircleIcon,
ExclamationIcon,
InformationCircleIcon,
ClipboardCheckIcon,
RefreshIcon,
} from "@heroicons/react/solid";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -497,6 +498,12 @@ const BookingPage = ({
{eventType.description}
</p>
)}
{eventType?.requiresConfirmation && (
<p className="text-bookinglight mb-2 dark:text-white">
<ClipboardCheckIcon className="mr-[10px] ml-[2px] -mt-1 inline-block h-4 w-4 text-gray-400" />
{t("requires_confirmation")}
</p>
)}
<p className="text-bookinglight mb-2 dark:text-white">
<ClockIcon className="mr-[10px] -mt-1 ml-[2px] inline-block h-4 w-4 text-gray-400" />
{eventType.length} {t("minutes")}
apps/web/pages/[user]/[type].tsx
+29 -45
View File
@@ -6,6 +6,7 @@ import { locationHiddenFilter, LocationObject } from "@calcom/app-store/location
import { parseRecurringEvent } from "@calcom/lib";
import { getDefaultEvent, getGroupName, getUsernameList } from "@calcom/lib/defaultEvents";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { availiblityPageEventTypeSelect } from "@calcom/prisma/selects";
import { asStringOrNull } from "@lib/asStringOrNull";
import { getWorkingHours } from "@lib/availability";
@@ -71,49 +72,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
throw new Error(`File is not named [type]/[user]`);
}
const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
id: true,
title: true,
availability: true,
description: true,
length: true,
price: true,
currency: true,
periodType: true,
periodStartDate: true,
periodEndDate: true,
periodDays: true,
periodCountCalendarDays: true,
locations: true,
schedulingType: true,
recurringEvent: true,
schedule: {
select: {
availability: true,
timeZone: true,
},
},
hidden: true,
slug: true,
minimumBookingNotice: true,
beforeEventBuffer: true,
afterEventBuffer: true,
timeZone: true,
metadata: true,
slotInterval: true,
seatsPerTimeSlot: true,
users: {
select: {
avatar: true,
name: true,
username: true,
hideBranding: true,
plan: true,
timeZone: true,
},
},
});
const users = await prisma.user.findMany({
where: {
username: {
@@ -158,7 +116,20 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
},
],
},
select: eventTypeSelect,
select: {
...availiblityPageEventTypeSelect,
users: {
select: {
id: false,
avatar: true,
name: true,
username: true,
hideBranding: true,
plan: true,
timeZone: true,
},
},
},
},
},
});
@@ -184,7 +155,20 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
},
],
},
select: eventTypeSelect,
select: {
...availiblityPageEventTypeSelect,
users: {
select: {
id: false,
avatar: true,
name: true,
username: true,
hideBranding: true,
plan: true,
timeZone: true,
},
},
},
});
if (!eventTypeBackwardsCompat) {
return {
apps/web/pages/[user]/book.tsx
+2 -29
View File
@@ -13,6 +13,7 @@ import {
getUsernameList,
} from "@calcom/lib/defaultEvents";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { bookEventTypeSelect } from "@calcom/prisma";
import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
import getBooking, { GetBookingType } from "@lib/getBooking";
@@ -110,35 +111,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
id: parseInt(asStringOrThrow(context.query.type)),
},
select: {
id: true,
title: true,
slug: true,
description: true,
length: true,
locations: true,
customInputs: true,
periodType: true,
periodDays: true,
periodStartDate: true,
periodEndDate: true,
recurringEvent: true,
metadata: true,
periodCountCalendarDays: true,
price: true,
currency: true,
disableGuests: true,
seatsPerTimeSlot: true,
users: {
select: {
id: true,
username: true,
name: true,
email: true,
bio: true,
avatar: true,
theme: true,
},
},
...bookEventTypeSelect,
},
});
apps/web/pages/d/[link]/[slug].tsx
+2 -46
View File
@@ -3,6 +3,7 @@ import { GetServerSidePropsContext } from "next";
import { JSONObject } from "superjson/dist/types";
import { parseRecurringEvent } from "@calcom/lib";
import { availiblityPageEventTypeSelect } from "@calcom/prisma";
import { asStringOrNull } from "@lib/asStringOrNull";
import { getWorkingHours } from "@lib/availability";
@@ -27,51 +28,6 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
const slug = asStringOrNull(context.query.slug) || "";
const dateParam = asStringOrNull(context.query.date);
const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
id: true,
title: true,
availability: true,
description: true,
length: true,
price: true,
currency: true,
periodType: true,
periodStartDate: true,
periodEndDate: true,
periodDays: true,
periodCountCalendarDays: true,
recurringEvent: true,
schedulingType: true,
seatsPerTimeSlot: true,
userId: true,
schedule: {
select: {
availability: true,
timeZone: true,
},
},
hidden: true,
slug: true,
minimumBookingNotice: true,
beforeEventBuffer: true,
afterEventBuffer: true,
locations: true,
timeZone: true,
metadata: true,
slotInterval: true,
users: {
select: {
id: true,
avatar: true,
name: true,
username: true,
hideBranding: true,
plan: true,
timeZone: true,
},
},
});
const hashedLink = await prisma.hashedLink.findUnique({
where: {
link,
@@ -79,7 +35,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
select: {
eventTypeId: true,
eventType: {
select: eventTypeSelect,
select: availiblityPageEventTypeSelect,
},
},
});
apps/web/pages/d/[link]/book.tsx
+2 -34
View File
@@ -8,6 +8,7 @@ import { JSONObject } from "superjson/dist/types";
import { getLocationLabels } from "@calcom/app-store/utils";
import { parseRecurringEvent } from "@calcom/lib";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { bookEventTypeSelect } from "@calcom/prisma/selects";
import { asStringOrNull, asStringOrThrow } from "@lib/asStringOrNull";
import prisma from "@lib/prisma";
@@ -34,39 +35,6 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
const link = asStringOrThrow(context.query.link as string);
const recurringEventCountQuery = asStringOrNull(context.query.count);
const eventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
id: true,
title: true,
slug: true,
description: true,
length: true,
locations: true,
customInputs: true,
periodType: true,
periodDays: true,
periodStartDate: true,
recurringEvent: true,
periodEndDate: true,
metadata: true,
periodCountCalendarDays: true,
seatsPerTimeSlot: true,
price: true,
currency: true,
disableGuests: true,
userId: true,
users: {
select: {
id: true,
username: true,
name: true,
email: true,
bio: true,
avatar: true,
theme: true,
},
},
});
const hashedLink = await prisma.hashedLink.findUnique({
where: {
link,
@@ -74,7 +42,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
select: {
eventTypeId: true,
eventType: {
select: eventTypeSelect,
select: bookEventTypeSelect,
},
},
});
apps/web/pages/team/[slug]/[type].tsx
+1
View File
@@ -72,6 +72,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
beforeEventBuffer: true,
afterEventBuffer: true,
recurringEvent: true,
requiresConfirmation: true,
locations: true,
price: true,
currency: true,
apps/web/pages/team/[slug]/book.tsx
+1
View File
@@ -48,6 +48,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
periodEndDate: true,
periodCountCalendarDays: true,
recurringEvent: true,
requiresConfirmation: true,
disableGuests: true,
price: true,
currency: true,
packages/prisma/selects/event-types.ts
+80
View File
@@ -13,3 +13,83 @@ export const baseEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
currency: true,
requiresConfirmation: true,
});
export const bookEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
id: true,
title: true,
slug: true,
description: true,
length: true,
locations: true,
customInputs: true,
periodType: true,
periodDays: true,
periodStartDate: true,
periodEndDate: true,
recurringEvent: true,
requiresConfirmation: true,
metadata: true,
periodCountCalendarDays: true,
price: true,
currency: true,
disableGuests: true,
userId:true,
seatsPerTimeSlot: true,
users: {
select: {
id: true,
username: true,
name: true,
email: true,
bio: true,
avatar: true,
theme: true,
},
},
})
export const availiblityPageEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({
id: true,
title: true,
availability: true,
description: true,
length: true,
price: true,
currency: true,
periodType: true,
periodStartDate: true,
periodEndDate: true,
periodDays: true,
periodCountCalendarDays: true,
locations: true,
schedulingType: true,
recurringEvent: true,
requiresConfirmation: true,
schedule: {
select: {
availability: true,
timeZone: true,
},
},
hidden: true,
userId:true,
slug: true,
minimumBookingNotice: true,
beforeEventBuffer: true,
afterEventBuffer: true,
timeZone: true,
metadata: true,
slotInterval: true,
seatsPerTimeSlot: true,
users: {
select: {
id:true,
avatar: true,
name: true,
username: true,
hideBranding: true,
plan: true,
timeZone: true,
},
},
})