import { Elements } from "@stripe/react-stripe-js"; import classNames from "classnames"; import Head from "next/head"; import { FC, useEffect, useState } from "react"; import { FormattedNumber, IntlProvider } from "react-intl"; import { getSuccessPageLocationMessage } from "@calcom/app-store/locations"; import getStripe from "@calcom/app-store/stripepayment/lib/client"; import dayjs from "@calcom/dayjs"; import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe"; import { WEBSITE_URL } from "@calcom/lib/constants"; import getStripeAppData from "@calcom/lib/getStripeAppData"; 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 { Icon } from "@calcom/ui/Icon"; import type { PaymentPageProps } from "../pages/payment"; import PaymentComponent from "./Payment"; const PaymentPage: FC = (props) => { const { t } = 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 stripeAppData = getStripeAppData(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} | Cal.com
); }; export default PaymentPage;