import { CreditCardIcon } from "@heroicons/react/solid"; import { Elements } from "@stripe/react-stripe-js"; import classNames from "classnames"; 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 { FC, useEffect, useState } from "react"; import { FormattedNumber, IntlProvider } from "react-intl"; import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe"; import getStripe from "@calcom/stripe/client"; import PaymentComponent from "@ee/components/stripe/Payment"; import { PaymentPageProps } from "@ee/pages/payment/[uid]"; import { useLocale } from "@lib/hooks/useLocale"; import useTheme from "@lib/hooks/useTheme"; import { LocationOptionsToString } from "@lib/locationOptions"; 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); const isEmbed = useIsEmbed(); useEffect(() => { let embedIframeWidth = 0; setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess())); setIs24h(!!localStorage.getItem("timeOption.is24hClock")); 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 isReady ? (
{t("payment")} | {eventName} | Cal.com
) : null; }; export default PaymentPage;