import { CreditCardIcon } from "@heroicons/react/solid"; import { Elements } from "@stripe/react-stripe-js"; import dayjs from "dayjs"; import timezone from "dayjs/plugin/timezone"; import toArray from "dayjs/plugin/toArray"; import utc from "dayjs/plugin/utc"; import Head from "next/head"; import React, { FC, useEffect, useState } from "react"; import { FormattedNumber, IntlProvider } from "react-intl"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import getStripe from "@calcom/stripe/client"; import { Dialog, DialogContent, DialogFooter } from "@calcom/ui/Dialog"; import PaymentComponent from "@ee/components/stripe/Payment"; import { PaymentPageProps } from "@ee/pages/payment/[uid]"; import useTheme from "@lib/hooks/useTheme"; import { isBrowserLocale24h } from "@lib/timeFormat"; dayjs.extend(utc); dayjs.extend(toArray); dayjs.extend(timezone); const PaymentPage: FC = (props) => { const { t } = useLocale(); const [is24h, setIs24h] = useState(isBrowserLocale24h()); const [date, setDate] = useState(dayjs.utc(props.booking.startTime)); const { isReady, Theme } = useTheme(props.profile.theme); useEffect(() => { setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess())); setIs24h(!!localStorage.getItem("timeOption.is24hClock")); }, []); const eventName = props.booking.title; return isReady ? (
{t("payment")} | {eventName} | Cal.com
{ e.preventDefault(); }}>

{t("pay_later_instructions")}

{t("what")}
{eventName}
{t("when")}
{date.format("dddd, DD MMMM YYYY")}
{date.format(is24h ? "H:mm" : "h:mma")} - {props.eventType.length} mins{" "} ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
{props.booking.location && ( <>
{t("where")}
{props.booking.location}
)}
{t("price")}
{props.payment.success && !props.payment.refunded && (
{t("paid")}
)} {!props.payment.success && ( )} {props.payment.refunded && (
{t("refunded")}
)}
{!props.profile.hideBranding && ( )}
) : null; }; export default PaymentPage;