perf: timezone short name

src/views/Conversations/Online/LocalTimeClock.jsx

@@ -3,7 +3,20 @@ import { Typography, Select } from 'antd';
 import ct from 'countries-and-timezones';
 
 const LocalTimeClock = ({ region, ...props }) => {
-  const countryTimezones = ct.getTimezonesForCountry(region || 'CN');
+  const [countryTimezones, setCountryTimezones] = useState([]);
+  useEffect(() => {
+    const _countryTimezones = Object.values(ct.getTimezonesForCountry(region || 'CN')).map((tz) => {
+      const date = new Date();
+      const options = { timeZone: tz.name, timeZoneName: 'short' };
+      const shortName = date.toLocaleTimeString('en-US', options).split(' ')[2];
+      return { ...tz, fullName: `${tz.name} (${shortName})`, shortName };
+    });
+    // console.log(_countryTimezones);
+    setCountryTimezones(_countryTimezones);
+
+    return () => {};
+  }, [region]);
+
 
   const [timezone, setTimezone] = useState(countryTimezones?.[0]?.name || ''); // countryTimezones?.[0]?.name || ''
 
@@ -14,6 +27,7 @@ const LocalTimeClock = ({ region, ...props }) => {
       // const date = new Date();
       const options = {
         timeZone: timezone,
+        timeZoneName: 'short',
         hour12: false,
         month: 'numeric',
         day: 'numeric',
@@ -38,7 +52,6 @@ const LocalTimeClock = ({ region, ...props }) => {
           dropdownStyle={{ width: 250 }}
           variant='borderless'
           onSelect={(value) => {
-            console.log('value', value);
             setTimezone(value);
             // setOrderPropValue(currentOrder, 'orderlabel', value)
             //   .then(() => {
@@ -55,7 +68,7 @@ const LocalTimeClock = ({ region, ...props }) => {
           }}
           value={timezone}
           options={countryTimezones}
-          fieldNames={{ label: 'name', value: 'name' }}
+          fieldNames={{ label: 'fullName', value: 'name' }}
         />
       ) : (
         <>

src/views/Conversations/Online/MessagesHeader.jsx

@@ -43,7 +43,7 @@ const MessagesHeader = () => {
                   <>
                   <Typography.Text>{currentConversation.whatsapp_phone_number}</Typography.Text>
                   {/* todo: regionCode */}
-                  <LocalTimeClock region={'MX'} />
+                  <LocalTimeClock region={'US'} />
                   </>
                 ) : (
                   <Typography.Text strong type='danger'>