feat(ui): Update privacy policy and terms of use (#280)

* wip: setup

* fx=ix: duplicate text and tests

* fix: unit test

* fix: terms data

src/locales/en/en.json

@@ -95,17 +95,11 @@
       }
     },
     "termsandconditions": {
-      "text": "I have read and agree to the <0>{{clickableText}}</0>.",
-      "link": "Terms and Conditions and Privacy Policy"
+      "text": "I have read and agree to the <0>{{clickableTerms}}</0> and <1>{{clickablePrivacy}}</1>.",
+      "terms": "Terms and Conditions",
+      "privacy": "Privacy Policy"
     }
   },
-  "termsandconditions": {
-    "title": "Terms & conditions",
-    "body": [
-      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Maecenas volutpat blandit aliquam etiam erat velit scelerisque in dictum. Dictum non consectetur a erat nam at. Euismod in pellentesque massa placerat duis ultricies lacus. Odio tempor orci dapibus ultrices in. Faucibus et molestie ac feugiat sed lectus vestibulum. Vitae et leo duis ut diam quam nulla. Habitant morbi tristique senectus et netus et malesuada fames. Egestas erat imperdiet sed euismod nisi porta lorem. Eget sit amet tellus cras adipiscing enim. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Sed elementum tempus egestas sed. Purus viverra accumsan in nisl.",
-      "Odio ut sem nulla pharetra diam sit amet nisl suscipit. Nec feugiat nisl pretium fusce id velit ut. Amet cursus sit amet dictum sit amet justo donec. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Urna nunc id cursus metus aliquam eleifend mi. Amet nulla facilisi morbi tempus iaculis urna id. Id neque aliquam vestibulum morbi blandit cursus risus at. Massa tempor nec feugiat nisl pretium. At erat pellentesque adipiscing commodo elit at imperdiet dui. Nec feugiat in fermentum posuere urna nec tincidunt. In cursus turpis massa tincidunt. Nunc non blandit massa enim nec dui. Quam pellentesque nec nam aliquam sem et tortor consequat. Placerat orci nulla pellentesque dignissim enim."
-    ]
-  },
   "passcodelogin": {
     "title": "Welcome back",
     "description": "Please enter your passcode to login",

src/ui/components/TermsAndConditions/TermsAndConditions.test.tsx → src/ui/components/PrivacyPolicy/PrivacyPolicyModal.test.tsx

@@ -1,20 +1,20 @@
 import { render, waitFor, fireEvent } from "@testing-library/react";
 import { act } from "react-dom/test-utils";
-import { TermsAndConditions } from "./TermsAndConditions";
-import EN_TRANSLATIONS from "../../../locales/en/en.json";
+import { PrivacyPolicyModal } from "./PrivacyPolicyModal";
+import { privacyPolicyData } from "./PrivacyPolicyData";
 
 describe("Terms and conditions screen", () => {
   test("User can close the modal by clicking on the backdrop", async () => {
     const mockSetIsOpen = jest.fn();
     const { queryByText, getByTestId } = render(
-      <TermsAndConditions
+      <PrivacyPolicyModal
         isOpen={true}
         setIsOpen={mockSetIsOpen}
       />
     );
 
     await waitFor(() => {
-      expect(getByTestId("terms-and-conditions-modal")).toBeVisible();
+      expect(getByTestId("privacy-policy-modal")).toBeVisible();
     });
 
     const backdrop = document.querySelector("ion-backdrop");
@@ -26,15 +26,13 @@ describe("Terms and conditions screen", () => {
       expect(backdrop).not.toBeInTheDocument();
     });
 
-    expect(
-      queryByText(EN_TRANSLATIONS.termsandconditions.title)
-    ).not.toBeInTheDocument();
+    expect(queryByText(privacyPolicyData.intro.title)).not.toBeInTheDocument();
   });
 
   test.skip("User can close the modal clicking on the close button", async () => {
     const mockSetIsOpen = jest.fn();
     const { queryByText, getByTestId } = render(
-      <TermsAndConditions
+      <PrivacyPolicyModal
         isOpen={true}
         setIsOpen={mockSetIsOpen}
       />
@@ -54,8 +52,6 @@ describe("Terms and conditions screen", () => {
       expect(document.querySelector("ion-backdrop")).not.toBeInTheDocument();
     });
 
-    expect(
-      queryByText(EN_TRANSLATIONS.termsandconditions.title)
-    ).not.toBeInTheDocument();
+    expect(queryByText(privacyPolicyData.intro.title)).not.toBeInTheDocument();
   });
 });

src/ui/components/PrivacyPolicy/PrivacyPolicyModal.tsx

@@ -0,0 +1,59 @@
+import { IonCol, IonGrid, IonModal, IonRow } from "@ionic/react";
+import { PrivacyPolicyModalProps } from "./PrivacyPolicyModal.types";
+import { PageLayout } from "../layout/PageLayout";
+import { privacyPolicyData } from "./PrivacyPolicyData";
+
+const PrivacyPolicyModal = ({ isOpen, setIsOpen }: PrivacyPolicyModalProps) => {
+  const Section = ({ title, content }: { title: string; content: any }) => (
+    <div>
+      <h3>{title}</h3>
+      {content.map((item: any, index: number) => (
+        <p key={index}>
+          {item.subtitle && <b>{item.subtitle}</b>}
+          {item.text && <span>{item.text}</span>}
+        </p>
+      ))}
+    </div>
+  );
+  return (
+    <IonModal
+      isOpen={isOpen}
+      initialBreakpoint={1}
+      breakpoints={[0, 0.25, 0.5, 0.75, 1]}
+      className="page-layout"
+      data-testid="privacy-policy-modal"
+      onDidDismiss={() => setIsOpen(false)}
+    >
+      <div className="terms-and-conditions modal">
+        <PageLayout
+          header={true}
+          closeButton={true}
+          closeButtonAction={() => setIsOpen(false)}
+          title={privacyPolicyData.intro.title}
+        >
+          <IonGrid>
+            <IonRow>
+              <IonCol
+                size="12"
+                className="terms-and-conditions-body"
+              >
+                <p>
+                  <b>{privacyPolicyData.intro.text}</b>
+                </p>
+                {privacyPolicyData.sections.map((section, index) => (
+                  <Section
+                    key={index}
+                    title={section.title}
+                    content={section.content}
+                  />
+                ))}
+              </IonCol>
+            </IonRow>
+          </IonGrid>
+        </PageLayout>
+      </div>
+    </IonModal>
+  );
+};
+
+export { PrivacyPolicyModal };

src/ui/components/PrivacyPolicy/PrivacyPolicyModal.types.ts

@@ -0,0 +1,6 @@
+interface PrivacyPolicyModalProps {
+  isOpen: boolean;
+  setIsOpen: (value: boolean) => void;
+}
+
+export type { PrivacyPolicyModalProps };

src/ui/components/PrivacyPolicy/index.ts

@@ -0,0 +1 @@
+export * from "./PrivacyPolicyModal";