chore: finish the license

src/routes/chat/Layout/LicenseOutdatedTip.tsx

@@ -0,0 +1,44 @@
+// import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+import Button from "../../../common/component/styled/Button";
+const Styled = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #ef4444;
+  border-radius: var(--br);
+  width: 100%;
+  width: -webkit-fill-available;
+  padding: 12px 16px;
+  .txt {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 16px;
+    color: #fff;
+    .hand {
+      font-size: 20px;
+      margin-right: 10px;
+    }
+  }
+`;
+// type Props = {};
+
+const LicenseUpgradeTip = () => {
+  const navigateTo = useNavigate();
+  const handleRedirect = () => {
+    navigateTo("/setting?nav=license");
+  };
+
+  return (
+    <Styled>
+      <span className="txt">
+        <i className="hand">🚨</i>
+        Your license has reached the limit, upgrade the License or contact the Admin!
+      </span>
+      <Button onClick={handleRedirect} className="small">{`Upgrade License`}</Button>
+    </Styled>
+  );
+};
+
+export default LicenseUpgradeTip;

src/routes/chat/Layout/index.tsx

@@ -9,6 +9,8 @@ import useUploadFile from "../../../common/hook/useUploadFile";
 import { ChatPrefixes } from "../../../app/config";
 import { useAppSelector } from "../../../app/store";
 import LoginTip from "./LoginTip";
+import useLicense from "../../../common/hook/useLicense";
+import LicenseUpgradeTip from "./LicenseOutdatedTip";
 
 interface Props {
   readonly?: boolean;
@@ -31,6 +33,7 @@ const Layout: FC<Props> = ({
   context = "channel",
   to
 }) => {
+  const { reachLimit } = useLicense();
   const { addStageFile } = useUploadFile({ context, id: to });
   const messagesContainer = useRef<HTMLDivElement>(null);
   const [previewImage, setPreviewImage] = useState(null);
@@ -107,7 +110,13 @@ const Layout: FC<Props> = ({
           <div className="chat">
             {children}
             <div className={`send ${selects ? "selecting" : ""}`}>
-              {readonly ? <LoginTip /> : <Send key={to} id={to} context={context} />}
+              {readonly ? (
+                <LoginTip />
+              ) : reachLimit ? (
+                <LicenseUpgradeTip />
+              ) : (
+                <Send key={to} id={to} context={context} />
+              )}
               {selects && <Operations context={context} id={to} />}
             </div>
           </div>

src/routes/setting/License.tsx

@@ -1,42 +1,14 @@
-import { useState } from "react";
+import { useState, MouseEvent } from "react";
 import dayjs from "dayjs";
 import styled from "styled-components";
 // import Tippy from "@tippyjs/react";
 // import toast from "react-hot-toast";
 // import { hideAll } from "tippy.js";
-import Textarea from "../../common/component/styled/Textarea";
+// import Textarea from "../../common/component/styled/Textarea";
 import Button from "../../common/component/styled/Button";
 import useLicense from "../../common/hook/useLicense";
 import LicensePriceListModal from "./LicensePriceListModal";
 
-const StyledInfo = styled.div`
-  padding: 12px;
-  border-radius: 5px;
-  border: 2px solid #557d2340;
-  background-color: #d1fadf60;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  .item {
-    white-space: nowrap;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    line-height: 1.2;
-    .label {
-      font-size: 13px;
-      color: #aaa;
-      &:after {
-        content: ":";
-      }
-    }
-    .info {
-      font-weight: bold;
-      font-size: 18px;
-    }
-  }
-`;
 const Styled = styled.div`
   max-width: 760px;
   display: flex;
@@ -45,16 +17,67 @@ const Styled = styled.div`
   align-items: flex-start;
   gap: 15px;
   > .license {
+    position: relative;
     width: 100%;
+    padding: 12px;
+    border-radius: 5px;
+    border: 2px solid #557d2340;
+    background-color: #d1fadf60;
     display: flex;
-    /* flex-direction: column; */
-    align-items: flex-start;
+    flex-direction: column;
     gap: 15px;
+    &.outdated {
+      border-color: #ef4444;
+      background-color: #ef444457;
+      &:after {
+        content: "License Outdated";
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        background-color: #ef4444;
+        padding: 5px 4px;
+        font-size: 14px;
+        font-weight: bold;
+        color: #fff;
+        border-radius: 4px;
+      }
+    }
+    .item {
+      white-space: nowrap;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: flex-start;
+      line-height: 1.2;
+      .label {
+        font-size: 13px;
+        color: #aaa;
+        &:after {
+          content: ":";
+        }
+      }
+      .info {
+        font-weight: bold;
+        font-size: 18px;
+        line-height: 1.4;
+        &.value {
+          cursor: pointer;
+          width: 100%;
+          white-space: pre-wrap;
+          word-break: break-all;
+          &.fold {
+            white-space: inherit;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
   }
 `;
 
 export default function License() {
-  const { license: licenseInfo } = useLicense();
+  const { license: licenseInfo, reachLimit } = useLicense();
   const [modalVisible, setModalVisible] = useState(false);
   const handleRenewLicense = () => {
     toggleModalVisible();
@@ -62,45 +85,60 @@ export default function License() {
   const toggleModalVisible = () => {
     setModalVisible((prev) => !prev);
   };
-
+  const handleLicenseValueToggle = (evt: MouseEvent<HTMLSpanElement>) => {
+    const ele = evt.currentTarget;
+    ele.classList.toggle("fold");
+    if (ele.classList.contains("fold")) {
+      ele.title = "Click to see full text";
+    } else {
+      ele.title = "Click to fold text";
+    }
+  };
   // const disableBtn = !reachLimit;
   return (
     <>
       <Styled>
-        <div className="license">
-          <Textarea disabled rows={14} id="license" value={licenseInfo?.base58} />
-          <StyledInfo>
-            <div className="item">
-              <span className="label">Signed</span>
-              <span className="info">{licenseInfo?.sign ? "Yes" : "Not Yet"}</span>
-            </div>
-            <div className="item">
-              <span className="label">Domains</span>
-              <ul className="info">
-                {licenseInfo?.domains.map((d) => {
-                  return <li key={d}>{d}</li>;
-                })}
-              </ul>
-            </div>
-            <div className="item">
-              <span className="label">User Limit</span>
-              <span className="info">
-                {licenseInfo?.user_limit == 99999 ? "No Limit" : licenseInfo?.user_limit}
-              </span>
-            </div>
-            <div className="item">
-              <span className="label">Expired At</span>
-              <span className="info">
-                {dayjs(licenseInfo?.expired_at).format("YYYY-MM-DD h:mm:ss A")}
-              </span>
-            </div>
-            <div className="item">
-              <span className="label">Created At</span>
-              <span className="info">
-                {dayjs(licenseInfo?.created_at).format("YYYY-MM-DD h:mm:ss A")}
-              </span>
-            </div>
-          </StyledInfo>
+        <div className={`license ${reachLimit ? "outdated" : ""}`}>
+          <div className="item">
+            <span className="label">Signed</span>
+            <span className="info">{licenseInfo?.sign ? "Yes" : "Not Yet"}</span>
+          </div>
+          <div className="item">
+            <span className="label">Domains</span>
+            <ul className="info">
+              {licenseInfo?.domains.map((d) => {
+                return <li key={d}>{d}</li>;
+              })}
+            </ul>
+          </div>
+          <div className="item">
+            <span className="label">User Limit</span>
+            <span className="info">
+              {licenseInfo?.user_limit == 99999 ? "No Limit" : licenseInfo?.user_limit}
+            </span>
+          </div>
+          <div className="item">
+            <span className="label">Expired At</span>
+            <span className="info">
+              {dayjs(licenseInfo?.expired_at).format("YYYY-MM-DD h:mm:ss A")}
+            </span>
+          </div>
+          <div className="item">
+            <span className="label">Created At</span>
+            <span className="info">
+              {dayjs(licenseInfo?.created_at).format("YYYY-MM-DD h:mm:ss A")}
+            </span>
+          </div>
+          <div className="item">
+            <span className="label">License Value</span>
+            <span
+              className="info value fold"
+              title="Click to see full text"
+              onClick={handleLicenseValueToggle}
+            >
+              {licenseInfo?.base58}
+            </span>
+          </div>
         </div>
         <Button onClick={handleRenewLicense}>Renew License</Button>
       </Styled>