Fixes cancel booking page (#1301)
This commit is contained in:
Omar López
GitHub
parent
43c939e342
commit
b6518b9ce1
2 changed files with 64 additions and 58 deletions
|
|
@ -1,71 +1,37 @@
|
|||
import { CalendarIcon, XIcon } from "@heroicons/react/solid";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import { getSession } from "next-auth/client";
|
||||
import { GetServerSidePropsContext } from "next";
|
||||
import { useRouter } from "next/router";
|
||||
import { useState } from "react";
|
||||
|
||||
import { asStringOrUndefined } from "@lib/asStringOrNull";
|
||||
import { getSession } from "@lib/auth";
|
||||
import { useLocale } from "@lib/hooks/useLocale";
|
||||
import prisma from "@lib/prisma";
|
||||
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
|
||||
import { inferSSRProps } from "@lib/types/inferSSRProps";
|
||||
|
||||
import CustomBranding from "@components/CustomBranding";
|
||||
import { HeadSeo } from "@components/seo/head-seo";
|
||||
import { Button } from "@components/ui/Button";
|
||||
|
||||
dayjs.extend(utc);
|
||||
|
||||
export default function Type(props) {
|
||||
export default function Type(props: inferSSRProps<typeof getServerSideProps>) {
|
||||
const { t } = useLocale();
|
||||
// Get router variables
|
||||
const router = useRouter();
|
||||
const { uid } = router.query;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const [is24h, setIs24h] = useState(false);
|
||||
const [is24h] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(props.booking ? null : t("booking_already_cancelled"));
|
||||
const [error, setError] = useState<string | null>(props.booking ? null : t("booking_already_cancelled"));
|
||||
const telemetry = useTelemetry();
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const cancellationHandler = async (event) => {
|
||||
setLoading(true);
|
||||
|
||||
const payload = {
|
||||
uid: uid,
|
||||
};
|
||||
|
||||
telemetry.withJitsu((jitsu) =>
|
||||
jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
|
||||
);
|
||||
|
||||
const res = await fetch("/api/cancel", {
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (res.status >= 200 && res.status < 300) {
|
||||
await router.push(
|
||||
`/cancel/success?name=${props.profile.name}&title=${props.booking.title}&eventPage=${
|
||||
props.profile.slug
|
||||
}&team=${props.booking.eventType.team ? 1 : 0}`
|
||||
);
|
||||
} else {
|
||||
setLoading(false);
|
||||
setError(`${t("error_with_status_code_occured", { status: res.status })} ${t("please_try_again")}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<HeadSeo
|
||||
title={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile.name}`}
|
||||
description={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile.name}`}
|
||||
title={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
|
||||
description={`${t("cancel")} ${props.booking && props.booking.title} | ${props.profile?.name}`}
|
||||
/>
|
||||
<CustomBranding val={props.profile.brandColor} />
|
||||
<CustomBranding val={props.profile?.brandColor} />
|
||||
<main className="max-w-3xl mx-auto my-24">
|
||||
<div className="fixed inset-0 z-50 overflow-y-auto">
|
||||
<div className="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
||||
|
|
@ -109,11 +75,11 @@ export default function Type(props) {
|
|||
</div>
|
||||
<div className="py-4 mt-4 border-t border-b">
|
||||
<h2 className="mb-2 text-lg font-medium text-gray-600 font-cal">
|
||||
{props.booking.title}
|
||||
{props.booking?.title}
|
||||
</h2>
|
||||
<p className="text-gray-500">
|
||||
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
|
||||
{dayjs(props.booking.startTime).format(
|
||||
{dayjs(props.booking?.startTime).format(
|
||||
(is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY"
|
||||
)}
|
||||
</p>
|
||||
|
|
@ -125,7 +91,42 @@ export default function Type(props) {
|
|||
<Button
|
||||
color="secondary"
|
||||
data-testid="cancel"
|
||||
onClick={cancellationHandler}
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
|
||||
const payload = {
|
||||
uid: uid,
|
||||
};
|
||||
|
||||
telemetry.withJitsu((jitsu) =>
|
||||
jitsu.track(telemetryEventTypes.bookingCancelled, collectPageParameters())
|
||||
);
|
||||
|
||||
const res = await fetch("/api/cancel", {
|
||||
body: JSON.stringify(payload),
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
if (res.status >= 200 && res.status < 300) {
|
||||
await router.push(
|
||||
`/cancel/success?name=${props.profile.name}&title=${
|
||||
props.booking.title
|
||||
}&eventPage=${props.profile.slug}&team=${
|
||||
props.booking.eventType?.team ? 1 : 0
|
||||
}`
|
||||
);
|
||||
} else {
|
||||
setLoading(false);
|
||||
setError(
|
||||
`${t("error_with_status_code_occured", { status: res.status })} ${t(
|
||||
"please_try_again"
|
||||
)}`
|
||||
);
|
||||
}
|
||||
}}
|
||||
loading={loading}>
|
||||
{t("cancel")}
|
||||
</Button>
|
||||
|
|
@ -143,11 +144,11 @@ export default function Type(props) {
|
|||
);
|
||||
}
|
||||
|
||||
export async function getServerSideProps(context) {
|
||||
export const getServerSideProps = async (context: GetServerSidePropsContext) => {
|
||||
const session = await getSession(context);
|
||||
const booking = await prisma.booking.findUnique({
|
||||
where: {
|
||||
uid: context.query.uid,
|
||||
uid: asStringOrUndefined(context.query.uid),
|
||||
},
|
||||
select: {
|
||||
id: true,
|
||||
|
|
@ -189,19 +190,18 @@ export async function getServerSideProps(context) {
|
|||
endTime: booking.endTime.toString(),
|
||||
});
|
||||
|
||||
const profile = booking.eventType.team
|
||||
? {
|
||||
name: booking.eventType.team.name,
|
||||
slug: booking.eventType.team.slug,
|
||||
}
|
||||
: booking.user;
|
||||
const profile = {
|
||||
name: booking.eventType?.team?.name || booking.user?.name || null,
|
||||
slug: booking.eventType?.team?.slug || booking.user?.username || null,
|
||||
brandColor: booking.user?.brandColor || null,
|
||||
};
|
||||
|
||||
return {
|
||||
props: {
|
||||
profile,
|
||||
booking: bookingObj,
|
||||
cancellationAllowed:
|
||||
(!!session?.user && session.user.id == booking.user?.id) || booking.startTime >= new Date(),
|
||||
(!!session?.user && session.user?.id === booking.user?.id) || booking.startTime >= new Date(),
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@ describe("free user", () => {
|
|||
await expect(page).not.toHaveSelector(`[href="/free/60min"]`);
|
||||
});
|
||||
|
||||
// TODO: make sure `/free/30min` is bookable and that `/free/60min` is not
|
||||
test.todo("`/free/30min` is bookable");
|
||||
|
||||
test.todo("`/free/60min` is not bookable");
|
||||
});
|
||||
|
||||
describe("pro user", () => {
|
||||
|
|
@ -55,4 +57,8 @@ describe("pro user", () => {
|
|||
},
|
||||
});
|
||||
});
|
||||
|
||||
test.todo("Can reschedule the recently created booking");
|
||||
|
||||
test.todo("Can cancel the recently created booking");
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue