From ebb625dd2bba54d612a3b1c74122581834627950 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 16 Oct 2023 11:33:02 +0200
Subject: [PATCH] feat(ui): show user timezone in session list

---
 .../shared/SessionItem/SessionItem.tsx        | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx
index e1926813d..0328d9e32 100644
--- a/frontend/app/components/shared/SessionItem/SessionItem.tsx
+++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx
@@ -36,7 +36,7 @@ interface Props {
     userDisplayName: string;
     userCountry: string;
     userCity: string;
-    usetState: string;
+    userState: string;
     startedAt: number;
     duration: Duration;
     eventsCount: number;
@@ -53,6 +53,7 @@ interface Props {
     active: boolean;
     isCallActive?: boolean;
     agentIds?: string[];
+    timezone: string;
   };
   onUserClick?: (userId: string, userAnonymousId: string) => void;
   hasUserFilter?: boolean;
@@ -107,6 +108,7 @@ function SessionItem(props: RouteComponentProps & Props) {
     metadata,
     issueTypes,
     active,
+    timezone: userTimezone,
   } = session;
 
   const location = props.location;
@@ -198,7 +200,24 @@ function SessionItem(props: RouteComponentProps & Props) {
                 <Tooltip
                   delay={0}
                   disabled={props.isDisabled}
-                  title={`${formatTimeOrDate(startedAt, timezone, true)} ${timezone.label}`}
+                  title={
+                    <div className={'flex flex-col gap-1'}>
+                      <span>
+                        Local Time: {formatTimeOrDate(startedAt, timezone, true)} {timezone.label}
+                      </span>
+                      {userTimezone ? (
+                        <span>
+                          User's Time:{' '}
+                          {formatTimeOrDate(
+                            startedAt,
+                            { label: userTimezone.split('+').join(' +'), value: userTimezone.split(':')[0] },
+                            true
+                          )}{' '}
+                          {userTimezone}
+                        </span>
+                      ) : null}
+                    </div>
+                  }
                   className="w-fit !block"
                 >
                   <TextEllipsis
@@ -222,7 +241,12 @@ function SessionItem(props: RouteComponentProps & Props) {
             </div>
             <div style={{ width: '30%' }} className="px-2 flex flex-col justify-between">
               <div style={{ height: '21px' }}>
-                <CountryFlag userCity={userCity} userState={userState} country={userCountry} showLabel={true} />
+                <CountryFlag
+                  userCity={userCity}
+                  userState={userState}
+                  country={userCountry}
+                  showLabel={true}
+                />
               </div>
               <div className="color-gray-medium flex items-center py-1">
                 <span className="capitalize" style={{ maxWidth: '70px' }}>