2021-09-22 18:36:13 +00:00
|
|
|
import { Elements } from "@stripe/react-stripe-js";
|
2022-04-25 04:33:00 +00:00
|
|
|
import classNames from "classnames";
|
2021-09-22 18:36:13 +00:00
|
|
|
import Head from "next/head";
|
2023-04-05 18:14:46 +00:00
|
|
|
import type { FC } from "react";
|
|
|
|
|
import { useEffect, useState } from "react";
|
2021-09-22 18:36:13 +00:00
|
|
|
import { FormattedNumber, IntlProvider } from "react-intl";
|
|
|
|
|
|
2022-08-26 00:48:50 +00:00
|
|
|
import { getSuccessPageLocationMessage } from "@calcom/app-store/locations";
|
2022-07-28 19:58:26 +00:00
|
|
|
import getStripe from "@calcom/app-store/stripepayment/lib/client";
|
2023-04-05 18:14:46 +00:00
|
|
|
import type { StripePaymentData } from "@calcom/app-store/stripepayment/lib/server";
|
2022-06-28 20:40:58 +00:00
|
|
|
import dayjs from "@calcom/dayjs";
|
2022-05-27 15:37:02 +00:00
|
|
|
import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
|
2022-11-30 21:52:56 +00:00
|
|
|
import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
|
2023-02-08 20:36:22 +00:00
|
|
|
import getPaymentAppData from "@calcom/lib/getPaymentAppData";
|
2022-07-28 19:58:26 +00:00
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
|
|
|
import useTheme from "@calcom/lib/hooks/useTheme";
|
2022-09-30 12:45:28 +00:00
|
|
|
import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat";
|
2022-10-10 08:11:47 +00:00
|
|
|
import { localStorage } from "@calcom/lib/webstorage";
|
2023-04-12 15:26:31 +00:00
|
|
|
import { CreditCard } from "@calcom/ui/components/icon";
|
2021-09-22 19:52:38 +00:00
|
|
|
|
2022-07-28 19:58:26 +00:00
|
|
|
import type { PaymentPageProps } from "../pages/payment";
|
|
|
|
|
import PaymentComponent from "./Payment";
|
2021-09-22 19:52:38 +00:00
|
|
|
|
2021-09-22 18:36:13 +00:00
|
|
|
const PaymentPage: FC<PaymentPageProps> = (props) => {
|
2021-10-28 22:58:26 +00:00
|
|
|
const { t } = useLocale();
|
2022-02-23 12:37:15 +00:00
|
|
|
const [is24h, setIs24h] = useState(isBrowserLocale24h());
|
2021-09-22 18:36:13 +00:00
|
|
|
const [date, setDate] = useState(dayjs.utc(props.booking.startTime));
|
2022-10-10 08:11:47 +00:00
|
|
|
const [timezone, setTimezone] = useState<string | null>(null);
|
2022-07-26 08:27:57 +00:00
|
|
|
useTheme(props.profile.theme);
|
2022-04-25 04:33:00 +00:00
|
|
|
const isEmbed = useIsEmbed();
|
2023-02-08 20:36:22 +00:00
|
|
|
const paymentAppData = getPaymentAppData(props.eventType);
|
2021-09-22 18:36:13 +00:00
|
|
|
useEffect(() => {
|
2022-04-25 04:33:00 +00:00
|
|
|
let embedIframeWidth = 0;
|
2022-10-10 08:11:47 +00:00
|
|
|
const _timezone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess();
|
|
|
|
|
setTimezone(_timezone);
|
|
|
|
|
setDate(date.tz(_timezone));
|
2022-09-30 12:45:28 +00:00
|
|
|
setIs24h(!!getIs24hClockFromLocalStorage());
|
2022-04-25 04:33:00 +00:00
|
|
|
if (isEmbed) {
|
|
|
|
|
requestAnimationFrame(function fixStripeIframe() {
|
|
|
|
|
// HACK: Look for stripe iframe and center position it just above the embed content
|
|
|
|
|
const stripeIframeWrapper = document.querySelector(
|
|
|
|
|
'iframe[src*="https://js.stripe.com/v3/authorize-with-url-inner"]'
|
|
|
|
|
)?.parentElement;
|
|
|
|
|
if (stripeIframeWrapper) {
|
|
|
|
|
stripeIframeWrapper.style.margin = "0 auto";
|
|
|
|
|
stripeIframeWrapper.style.width = embedIframeWidth + "px";
|
|
|
|
|
}
|
|
|
|
|
requestAnimationFrame(fixStripeIframe);
|
|
|
|
|
});
|
|
|
|
|
sdkActionManager?.on("__dimensionChanged", (e) => {
|
|
|
|
|
embedIframeWidth = e.detail.data.iframeWidth as number;
|
|
|
|
|
});
|
|
|
|
|
}
|
2022-05-17 16:52:45 +00:00
|
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
|
}, [isEmbed]);
|
2021-09-22 18:36:13 +00:00
|
|
|
|
|
|
|
|
const eventName = props.booking.title;
|
|
|
|
|
|
2022-07-26 08:27:57 +00:00
|
|
|
return (
|
2022-04-25 04:33:00 +00:00
|
|
|
<div className="h-screen">
|
2021-09-22 18:36:13 +00:00
|
|
|
<Head>
|
2021-10-28 22:58:26 +00:00
|
|
|
<title>
|
2022-11-30 21:52:56 +00:00
|
|
|
{t("payment")} | {eventName} | {APP_NAME}
|
2021-10-28 22:58:26 +00:00
|
|
|
</title>
|
2021-09-22 18:36:13 +00:00
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
2022-02-09 00:05:13 +00:00
|
|
|
<main className="mx-auto max-w-3xl py-24">
|
2022-03-17 23:28:43 +00:00
|
|
|
<div className="fixed inset-0 z-50 overflow-y-auto">
|
|
|
|
|
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
|
|
|
<div className="fixed inset-0 my-4 transition-opacity sm:my-0" aria-hidden="true">
|
|
|
|
|
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">
|
|
|
|
|
​
|
|
|
|
|
</span>
|
2022-05-26 18:05:51 +00:00
|
|
|
<div
|
2022-04-25 04:33:00 +00:00
|
|
|
className={classNames(
|
2023-04-11 21:44:14 +00:00
|
|
|
"main bg-default border-subtle inline-block transform overflow-hidden rounded-lg border px-8 pt-5 pb-4 text-left align-bottom transition-all sm:w-full sm:max-w-lg sm:py-6 sm:align-middle",
|
2022-04-25 04:33:00 +00:00
|
|
|
isEmbed ? "" : "sm:my-8"
|
|
|
|
|
)}
|
2022-03-17 23:28:43 +00:00
|
|
|
role="dialog"
|
|
|
|
|
aria-modal="true"
|
|
|
|
|
aria-labelledby="modal-headline">
|
|
|
|
|
<div>
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
|
2023-04-12 15:26:31 +00:00
|
|
|
<CreditCard className="h-8 w-8 text-green-600" />
|
2022-03-17 23:28:43 +00:00
|
|
|
</div>
|
2022-04-14 21:25:24 +00:00
|
|
|
|
2022-03-17 23:28:43 +00:00
|
|
|
<div className="mt-3 text-center sm:mt-5">
|
2023-04-11 21:44:14 +00:00
|
|
|
<h3 className="text-emphasis text-2xl font-semibold leading-6" id="modal-headline">
|
|
|
|
|
{paymentAppData.paymentOption === "HOLD" ? t("complete_your_booking") : t("payment")}
|
2022-03-17 23:28:43 +00:00
|
|
|
</h3>
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="text-default mt-4 grid grid-cols-3 border-t border-b py-4 text-left dark:border-gray-900 dark:text-gray-300">
|
2022-03-17 23:28:43 +00:00
|
|
|
<div className="font-medium">{t("what")}</div>
|
|
|
|
|
<div className="col-span-2 mb-6">{eventName}</div>
|
|
|
|
|
<div className="font-medium">{t("when")}</div>
|
|
|
|
|
<div className="col-span-2 mb-6">
|
|
|
|
|
{date.format("dddd, DD MMMM YYYY")}
|
|
|
|
|
<br />
|
|
|
|
|
{date.format(is24h ? "H:mm" : "h:mma")} - {props.eventType.length} mins{" "}
|
2023-04-05 18:14:46 +00:00
|
|
|
<span className="text-subtle">({timezone})</span>
|
2022-03-17 23:28:43 +00:00
|
|
|
</div>
|
|
|
|
|
{props.booking.location && (
|
|
|
|
|
<>
|
|
|
|
|
<div className="font-medium">{t("where")}</div>
|
2022-04-14 21:25:24 +00:00
|
|
|
<div className="col-span-2 mb-6">
|
2022-08-26 00:48:50 +00:00
|
|
|
{getSuccessPageLocationMessage(props.booking.location, t)}
|
2022-04-14 21:25:24 +00:00
|
|
|
</div>
|
2022-03-17 23:28:43 +00:00
|
|
|
</>
|
|
|
|
|
)}
|
2023-04-11 21:44:14 +00:00
|
|
|
<div className="font-medium">
|
|
|
|
|
{props.payment.paymentOption === "HOLD" ? t("no_show_fee") : t("price")}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="col-span-2 mb-6 font-semibold">
|
2022-03-17 23:28:43 +00:00
|
|
|
<IntlProvider locale="en">
|
|
|
|
|
<FormattedNumber
|
2023-02-08 20:36:22 +00:00
|
|
|
value={paymentAppData.price / 100.0}
|
2022-03-17 23:28:43 +00:00
|
|
|
style="currency"
|
2023-02-08 20:36:22 +00:00
|
|
|
currency={paymentAppData?.currency?.toUpperCase()}
|
2022-03-17 23:28:43 +00:00
|
|
|
/>
|
|
|
|
|
</IntlProvider>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-03-17 13:20:49 +00:00
|
|
|
</div>
|
2022-03-17 23:28:43 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
{props.payment.success && !props.payment.refunded && (
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="text-default mt-4 text-center dark:text-gray-300">{t("paid")}</div>
|
2021-09-22 18:36:13 +00:00
|
|
|
)}
|
2023-02-08 20:36:22 +00:00
|
|
|
{props.payment.appId === "stripe" && !props.payment.success && (
|
|
|
|
|
<Elements
|
|
|
|
|
stripe={getStripe((props.payment.data as StripePaymentData).stripe_publishable_key)}>
|
2022-03-17 23:28:43 +00:00
|
|
|
<PaymentComponent
|
|
|
|
|
payment={props.payment}
|
|
|
|
|
eventType={props.eventType}
|
|
|
|
|
user={props.user}
|
|
|
|
|
location={props.booking.location}
|
2022-05-11 20:36:38 +00:00
|
|
|
bookingId={props.booking.id}
|
2022-11-15 19:00:02 +00:00
|
|
|
bookingUid={props.booking.uid}
|
2021-09-22 18:36:13 +00:00
|
|
|
/>
|
2022-03-17 23:28:43 +00:00
|
|
|
</Elements>
|
|
|
|
|
)}
|
|
|
|
|
{props.payment.refunded && (
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="text-default mt-4 text-center dark:text-gray-300">{t("refunded")}</div>
|
2022-03-17 23:28:43 +00:00
|
|
|
)}
|
2022-03-17 13:20:49 +00:00
|
|
|
</div>
|
2022-03-17 23:28:43 +00:00
|
|
|
{!props.profile.hideBranding && (
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="text-muted dark:text-inverted mt-4 border-t pt-4 text-center text-xs dark:border-gray-900">
|
2022-11-30 21:52:56 +00:00
|
|
|
<a href={`${WEBSITE_URL}/signup`}>
|
|
|
|
|
{t("create_booking_link_with_calcom", { appName: APP_NAME })}
|
|
|
|
|
</a>
|
2022-03-17 23:28:43 +00:00
|
|
|
</div>
|
2022-03-17 13:20:49 +00:00
|
|
|
)}
|
2022-05-26 18:05:51 +00:00
|
|
|
</div>
|
2021-09-22 18:36:13 +00:00
|
|
|
</div>
|
2022-03-17 23:28:43 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2021-09-22 18:36:13 +00:00
|
|
|
</main>
|
|
|
|
|
</div>
|
2022-07-26 08:27:57 +00:00
|
|
|
);
|
2021-09-22 18:36:13 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default PaymentPage;
|
