页面隐藏时暂停时钟

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "antd": "^5.14.0",
+    "countries-and-timezones": "^3.6.0",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.10",
     "emoji-picker-react": "^4.8.0",

src/views/Conversations/Online/ExpireTimeClock.jsx

@@ -6,23 +6,30 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import relativeTime from 'dayjs/plugin/relativeTime';
+import { useVisibilityState } from '@/hooks/useVisibilityState';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(relativeTime);
 
 const ExpireTimeClock = ({ expireTime }) => {
+  const isVisible = useVisibilityState();
 
   const [customerDateTime, setCustomerDateTime] = useState('');
   const [isExpired, setIsExpired] = useState(false);
 
   useEffect(() => {
-    const intervalId = setInterval(() => {
-      // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
-      setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
-    }, 1000);
-    return () => clearInterval(intervalId);
-  }, [expireTime]);
+    let interval;
+    if (isVisible) {
+      interval = setInterval(() => {
+        // .tz('Asia/Shanghai') UTC 时间转换成 Asia/Shanghai 时区时间 GMT+8
+        setCustomerDateTime(dayjs(expireTime).add(8, 'hours').fromNow());
+      }, 1000);
+    } else {
+      clearInterval(interval);
+    }
+    return () => clearInterval(interval);
+  }, [isVisible, expireTime]);
 
   useEffect(() => {
     const _ago = customerDateTime.slice(-3) === 'ago';

src/views/Conversations/Online/LocalTimeClock.jsx

@@ -1,44 +1,94 @@
 import { useEffect, useState } from 'react';
-import { Typography } from 'antd';
-// import { useConversationState } from '@/stores/ConversationContext';
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
+import { Typography, Select } from 'antd';
+import ct from 'countries-and-timezones';
+import { useVisibilityState } from '@/hooks/useVisibilityState';
 
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const LocalTimeClock = ((props) => {
-  // const { customerOrderProfile: orderInfo } = useConversationState();
+const LocalTimeClock = ({ region, timezone, ...props }) => {
+  const isVisible = useVisibilityState();
 
+  const [countryTimezones, setCountryTimezones] = useState([]);
+  const [timezoneP, setTimezoneP] = useState(timezone);
   const [customerDateTime, setCustomerDateTime] = useState();
+  // console.log(timezone, timezoneP);
+
+  useEffect(() => {
+    if (timezone) {
+      setTimezoneP(timezone);
+    } else {
+      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);
+      setTimezoneP(_countryTimezones[0].name);
+    }
+    return () => {};
+  }, [region, timezone]);
 
-  // todo: 用dayjs 显示指定时区的时间
   useEffect(() => {
-    const intervalId = setInterval(() => {
-      // if (customerProfile && customerProfile.timezone) {
-      const date = new Date();
-      const options = {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-        second: 'numeric',
-        hour12: true,
-      };
-      const formatter = new Intl.DateTimeFormat('cn-ZH', options); // todo:
-      setCustomerDateTime(formatter.format(date));
-      // }
-    }, 1000); // Update every second
+    let interval;
+    if (isVisible) {
+      interval = setInterval(() => {
+        const options = {
+          timeZone: timezoneP,
+          timeZoneName: 'short',
+          hour12: false,
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          // second: '2-digit',
+        };
+        // const date = new Date();
+        // const formatter = new Intl.DateTimeFormat('en-US', options);
+        // setCustomerDateTime(formatter.format(date));
+        setCustomerDateTime(new Date().toLocaleTimeString('cn-ZH', options));
+      }, 1000);
+    } else {
+      clearInterval(interval);
+    }
+    return () => clearInterval(interval);
+  }, [isVisible, timezoneP]);
 
-    // Cleanup function to clear the interval when the component is unmounted
-    return () => clearInterval(intervalId);
-  }, []);
-  return (
+  return region ? (
     <>
-      <Typography.Text>{customerDateTime}</Typography.Text>
+      {/* 🌏🌐🧭 */}
+      <Typography.Text>🌐{region}</Typography.Text>
+      {countryTimezones.length > 1 ? (
+        <Select
+          size={'small'}
+          style={{ width: 150 }}
+          dropdownStyle={{ width: 250 }}
+          variant='borderless'
+          onSelect={(value) => {
+            setTimezoneP(value);
+            // setOrderPropValue(currentOrder, 'orderlabel', value)
+            //   .then(() => {
+            //     message.success('设置成功')
+            //   })
+            //   .catch(reason => {
+            //     notification.error({
+            //       message: '设置出错',
+            //       description: reason.message,
+            //       placement: 'top',
+            //       duration: 60,
+            //     })
+            //   })
+          }}
+          value={timezoneP}
+          options={countryTimezones}
+          fieldNames={{ label: 'fullName', value: 'name' }}
+        />
+      ) : (
+        <>
+          {/* <Typography.Text>{timezoneP}</Typography.Text> */}
+        </>
+      )}
+      <Typography.Text>⏰{customerDateTime}</Typography.Text>
     </>
-  );
-});
+  ) : null;
+};
 export default LocalTimeClock;

src/views/Conversations/Online/MessagesHeader.jsx

@@ -4,6 +4,7 @@ import { Flex, Typography, Avatar, Alert, Button, Tooltip, Spin } from 'antd';
 import { ReloadOutlined, ApiOutlined } from '@ant-design/icons';
 import { LoadingOutlined } from '@ant-design/icons';
 import ExpireTimeClock from './ExpireTimeClock';
+import LocalTimeClock from './LocalTimeClock';
 
 const MessagesHeader = () => {
   const userId = useAuthStore(state => state.loginUser.userId);
@@ -39,7 +40,11 @@ const MessagesHeader = () => {
               <>
                 <Typography.Text strong>{currentConversation.customer_name}</Typography.Text>
                 {currentConversation.whatsapp_phone_number ? (
+                  <>
                   <Typography.Text>{currentConversation.whatsapp_phone_number}</Typography.Text>
+                  {/* todo: regionCode */}
+                  <LocalTimeClock region={'US'} timezone={'America/New_York'} />
+                  </>
                 ) : (
                   <Typography.Text strong type='danger'>
                     没有WhatsApp号码