feat(ui): Standardise pages - Chat tab (#277)

cardano-foundation · Nov 29, 2023 · 356e6aa · 356e6aa
1 parent 14e99c4
commit 356e6aa
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 96 deletions.
diff --git a/src/locales/en/en.json b/src/locales/en/en.json
@@ -522,29 +522,14 @@
       "maxlength": "Must be less than 32 characters long"
     }
   },
-  "cryptoplaceholder": {
+  "crypto": {
     "tab": {
       "header": "Under consideration"
     }
   },
   "chat": {
     "tab": {
-      "header": "Under review",
-      "action": {
-        "text": "See a list of intended <0>{{clickableText}}</0>.",
-        "link": "P2P chat features"
-      }
-    },
-    "modal": {
-      "title": "P2P chat features",
-      "done": "Done",
-      "features": [
-        "Feature list number one",
-        "Feature list number two",
-        "Feature list number three",
-        "Feature list number four",
-        "Feature list number five"
-      ]
+      "header": "Under development"
     }
   },
   "shareqr": {

diff --git a/src/ui/pages/Chat/Chat.test.tsx b/src/ui/pages/Chat/Chat.test.tsx
@@ -2,15 +2,17 @@ import { render } from "@testing-library/react";
 import { Provider } from "react-redux";
 import { Chat } from "./Chat";
 import { store } from "../../../store";
+import EN_TRANSLATIONS from "../../../locales/en/en.json";
 
 describe("Chat Tab", () => {
   test("Renders Chat Tab", () => {
-    const { getByText, getByTestId } = render(
+    const { getByTestId, getByText } = render(
       <Provider store={store}>
         <Chat />
       </Provider>
     );
 
     expect(getByTestId("chat-tab")).toBeInTheDocument();
+    expect(getByText(EN_TRANSLATIONS.chat.tab.header)).toBeInTheDocument();
   });
 });
diff --git a/src/ui/pages/Chat/Chat.tsx b/src/ui/pages/Chat/Chat.tsx
@@ -1,94 +1,32 @@
-import { Trans } from "react-i18next";
-import { useState } from "react";
-import {
-  IonCol,
-  IonGrid,
-  IonModal,
-  IonPage,
-  IonRow,
-  useIonViewWillEnter,
-} from "@ionic/react";
+import { IonPage, useIonViewWillEnter } from "@ionic/react";
 import { TabLayout } from "../../components/layout/TabLayout";
 import { useAppDispatch } from "../../../store/hooks";
 import { setCurrentRoute } from "../../../store/reducers/stateCache";
 import { TabsRoutePath } from "../../../routes/paths";
 import "./Chat.scss";
 import { i18n } from "../../../i18n";
-import { PageLayout } from "../../components/layout/PageLayout";
 
 const Chat = () => {
   const dispatch = useAppDispatch();
-  const [featuresModalIsOpen, setFeaturesModalIsOpen] = useState(false);
 
   useIonViewWillEnter(() => {
     dispatch(setCurrentRoute({ path: TabsRoutePath.CHAT }));
   });
 
-  const HandleFeatures = () => {
-    return (
-      <a onClick={() => setFeaturesModalIsOpen(true)}>
-        <u>{i18n.t("chat.tab.action.link")}</u>
-      </a>
-    );
-  };
-
-  const features: string[] = i18n.t("chat.modal.features", {
-    returnObjects: true,
-  });
-
   return (
-    <>
-      <IonPage
-        className="tab-layout"
-        data-testid="chat-tab"
-      >
-        <TabLayout
-          header={true}
-          menuButton={true}
-        >
-          <div className="chat-tab-content">
-            <h2>{i18n.t("chat.tab.header")}</h2>
-            <Trans
-              i18nKey={i18n.t("chat.tab.action.text")}
-              components={[<HandleFeatures key="" />]}
-            />
-          </div>
-        </TabLayout>
-      </IonPage>
-      <IonModal
-        isOpen={featuresModalIsOpen}
-        initialBreakpoint={1}
-        breakpoints={[0, 1]}
-        className="page-layout"
-        data-testid="chat-modal"
-        onDidDismiss={() => setFeaturesModalIsOpen(false)}
+    <IonPage
+      className="tab-layout"
+      data-testid="chat-tab"
+    >
+      <TabLayout
+        header={true}
+        menuButton={true}
       >
-        <div className="chat-modal modal">
-          <PageLayout
-            header={true}
-            closeButton={true}
-            closeButtonLabel={`${i18n.t("chat.modal.done")}`}
-            closeButtonAction={() => setFeaturesModalIsOpen(false)}
-            title={`${i18n.t("chat.modal.title")}`}
-          >
-            <IonGrid>
-              <IonRow>
-                <IonCol
-                  size="12"
-                  className="chat-modal-body"
-                >
-                  <ol>
-                    {features.map((feature: string, index: number) => (
-                      <li key={index}>{feature}</li>
-                    ))}
-                  </ol>
-                </IonCol>
-              </IonRow>
-            </IonGrid>
-          </PageLayout>
+        <div className="chat-tab-content">
+          <h2>{i18n.t("chat.tab.header")}</h2>
         </div>
-      </IonModal>
-    </>
+      </TabLayout>
+    </IonPage>
   );
 };
 

diff --git a/src/ui/pages/Crypto/Crypto.test.tsx b/src/ui/pages/Crypto/Crypto.test.tsx
@@ -13,8 +13,6 @@ describe("Crypto Tab", () => {
     );
 
     expect(getByTestId("crypto-tab")).toBeInTheDocument();
-    expect(
-      getByText(EN_TRANSLATIONS.cryptoplaceholder.tab.header)
-    ).toBeInTheDocument();
+    expect(getByText(EN_TRANSLATIONS.crypto.tab.header)).toBeInTheDocument();
   });
 });
diff --git a/src/ui/pages/Crypto/Crypto.tsx b/src/ui/pages/Crypto/Crypto.tsx
@@ -23,7 +23,7 @@ const Crypto = () => {
         menuButton={true}
       >
         <div className="crypto-tab-content">
-          <h2>{i18n.t("cryptoplaceholder.tab.header")}</h2>
+          <h2>{i18n.t("crypto.tab.header")}</h2>
         </div>
       </TabLayout>
     </IonPage>