import classNames from "classnames"; import dynamic from "next/dynamic"; import Head from "next/head"; import type { FC } from "react"; import { useEffect, useState } from "react"; import { getSuccessPageLocationMessage } from "@calcom/app-store/locations"; import dayjs from "@calcom/dayjs"; import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe"; import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants"; import getPaymentAppData from "@calcom/lib/getPaymentAppData"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import useTheme from "@calcom/lib/hooks/useTheme"; import { getIs24hClockFromLocalStorage, isBrowserLocale24h } from "@calcom/lib/timeFormat"; import { localStorage } from "@calcom/lib/webstorage"; import { CreditCard } from "@calcom/ui/components/icon"; import type { PaymentPageProps } from "../pages/payment"; const StripePaymentComponent = dynamic(() => import("./Payment"), { ssr: false, }); const PaypalPaymentComponent = dynamic( () => import("@calcom/app-store/paypal/components/PaypalPaymentComponent").then( (m) => m.PaypalPaymentComponent ), { ssr: false, } ); const PaymentPage: FC = (props) => { const { t, i18n } = useLocale(); const [is24h, setIs24h] = useState(isBrowserLocale24h()); const [date, setDate] = useState(dayjs.utc(props.booking.startTime)); const [timezone, setTimezone] = useState(null); useTheme(props.profile.theme); const isEmbed = useIsEmbed(); const paymentAppData = getPaymentAppData(props.eventType); useEffect(() => { let embedIframeWidth = 0; const _timezone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess(); setTimezone(_timezone); setDate(date.tz(_timezone)); setIs24h(!!getIs24hClockFromLocalStorage()); 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; }); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isEmbed]); const eventName = props.booking.title; return (
{t("payment")} | {eventName} | {APP_NAME}
); }; export default PaymentPage;