From f1647248a24ad9015f4b03d63969caf1bd4150ff Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Mon, 10 Oct 2022 13:41:47 +0530
Subject: [PATCH] PaymentPage: Fix localStorage access issue in incognito
 (#4922)

* localStorage isnt available at server and in incognito mode

* Do translation server side for Payment Page
---
 .../features/ee/payments/components/PaymentPage.tsx    | 10 ++++++----
 packages/features/ee/payments/pages/payment.tsx        |  5 +++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx
index 41c8ab6eb..ada5f0acb 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<PaymentPageProps> = (props) => {
   const { t } = useLocale();
   const [is24h, setIs24h] = useState(isBrowserLocale24h());
   const [date, setDate] = useState(dayjs.utc(props.booking.startTime));
+  const [timezone, setTimezone] = useState<string | null>(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<PaymentPageProps> = (props) => {
                         {date.format("dddd, DD MMMM YYYY")}
                         <br />
                         {date.format(is24h ? "H:mm" : "h:mma")} - {props.eventType.length} mins{" "}
-                        <span className="text-gray-500">
-                          ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
-                        </span>
+                        <span className="text-gray-500">({timezone})</span>
                       </div>
                       {props.booking.location && (
                         <>
diff --git a/packages/features/ee/payments/pages/payment.tsx b/packages/features/ee/payments/pages/payment.tsx
index 0b0c2be83..159060840 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<typeof getServerSideProps>;
 
 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,
     },