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>