diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx index 41c8ab6ebf..ada5f0acb7 100644 --- a/packages/features/ee/payments/components/PaymentPage.tsx +++ b/packages/features/ee/payments/components/PaymentPage.tsx @@ -12,6 +12,7 @@ import { WEBSITE_URL } from "@calcom/lib/constants"; 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"; @@ -21,11 +22,14 @@ 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(); useEffect(() => { let embedIframeWidth = 0; - setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess())); + const _timezone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess(); + setTimezone(_timezone); + setDate(date.tz(_timezone)); setIs24h(!!getIs24hClockFromLocalStorage()); if (isEmbed) { requestAnimationFrame(function fixStripeIframe() { @@ -95,9 +99,7 @@ const PaymentPage: FC = (props) => { {date.format("dddd, DD MMMM YYYY")}
{date.format(is24h ? "H:mm" : "h:mma")} - {props.eventType.length} mins{" "} - - ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()}) - + ({timezone}) {props.booking.location && ( <> diff --git a/packages/features/ee/payments/pages/payment.tsx b/packages/features/ee/payments/pages/payment.tsx index 0b0c2be83c..1590608403 100644 --- a/packages/features/ee/payments/pages/payment.tsx +++ b/packages/features/ee/payments/pages/payment.tsx @@ -5,6 +5,8 @@ import { PaymentData } from "@calcom/app-store/stripepayment/lib/server"; import prisma from "@calcom/prisma"; import type { inferSSRProps } from "@calcom/types/inferSSRProps"; +import { ssrInit } from "@server/lib/ssr"; + export type PaymentPageProps = inferSSRProps; const querySchema = z.object({ @@ -12,6 +14,8 @@ const querySchema = z.object({ }); export const getServerSideProps = async (context: GetServerSidePropsContext) => { + const ssr = await ssrInit(context); + const { uid } = querySchema.parse(context.query); const rawPayment = await prisma.payment.findFirst({ where: { @@ -102,6 +106,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) => user, eventType, booking, + trpcState: ssr.dehydrate(), payment, profile, },