Merge branch 'development' of github.com:UNICEFECAR/USupport-client-u…

…i into development
UNICEFECAR · Apr 25, 2024 · 36ae9f8 · 36ae9f8
2 parents 2cf8d73 + 33a3c82
commit 36ae9f8
Show file tree

Hide file tree

Showing 359 changed files with 2,288 additions and 1,068 deletions.
diff --git a/.env.development b/.env.development
@@ -2,6 +2,7 @@ VITE_API_ENDPOINT=https://staging.usupport.online/api
 VITE_CMS_API_URL=https://staging.usupport.online/cms/api
 VITE_AMAZON_S3_BUCKET=https://usupport-staging.s3.eu-central-1.amazonaws.com
 VITE_WEBSITE_URL=https://staging.usupport.online
-VITE_SOCKET_IO_URL=http://localhost:3000
+VITE_SOCKET_IO_URL=wss://staging.usupport.online
 VITE_STRIPE_PUBLIC_KEY=pk_test_51MPzPVEFe7qoLe5D8bfwXpGuYvL0I98ui3P2lfM1cWoG1b0oRU8GfXBzWnXMrivdRwR7gXXngkjiNxm85PXv4B1400jL8VhSUh
-VITE_RECAPTCHA_SITE_KEY=6LeXgo4mAAAAAGZE3yzXq2datUkSUu2ftwTPj27K
+VITE_RECAPTCHA_SITE_KEY=6LeXgo4mAAAAAGZE3yzXq2datUkSUu2ftwTPj27K
+VITE_GIT_BOOK_URL=https://7digit-1.gitbook.io/usupport/y0yJCW2nZ6Sb52p4arjv
diff --git a/.env.staging b/.env.staging
@@ -5,4 +5,5 @@ VITE_AMAZON_S3_BUCKET=https://usupport-staging.s3.eu-central-1.amazonaws.com
 VITE_WEBSITE_URL=https://staging.usupport.online
 VITE_SOCKET_IO_URL=wss://staging.usupport.online
 VITE_STRIPE_PUBLIC_KEY=pk_test_51MPzPVEFe7qoLe5D8bfwXpGuYvL0I98ui3P2lfM1cWoG1b0oRU8GfXBzWnXMrivdRwR7gXXngkjiNxm85PXv4B1400jL8VhSUh
-VITE_RECAPTCHA_SITE_KEY=6LeXgo4mAAAAAGZE3yzXq2datUkSUu2ftwTPj27K
+VITE_RECAPTCHA_SITE_KEY=6LeXgo4mAAAAAGZE3yzXq2datUkSUu2ftwTPj27K
+VITE_GIT_BOOK_URL=https://7digit-1.gitbook.io/usupport/y0yJCW2nZ6Sb52p4arjv
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -9,5 +9,11 @@
     "sourceType": "module"
   },
   "plugins": ["react"],
-  "rules": {}
+  "rules": {
+    "quotes": ["error", "double"],
+    "react/prop-types": "off",
+    "react/jsx-key": "off",
+    "no-case-declarations": "off",
+    "no-prototype-builtins": "off"
+  }
 }
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# USupport-client-ui
+# uSupport-client-ui
 
-USupport Client User Interface
+uSupport Client User Interface
 
 # Contribute
 
@@ -18,15 +18,15 @@ To install all the dependencies use:
 npm install
 ```
 
-The USupport Client UI can be run via the Vite build tool. For more information about Vite [please see the documentation](https://vitejs.dev/guide)
+The uSupport Client UI can be run via the Vite build tool. For more information about Vite [please see the documentation](https://vitejs.dev/guide)
 
 To run the project via Vite use the following command:
 
 ```
 npm run dev
 ```
 
-## Adding a new block to the USupport Client UI
+## Adding a new block to the uSupport Client UI
 
 To create a new block, please use the provided bash script `create-block.bash`. By executing the following command from the root directory of the project:
 
@@ -37,7 +37,7 @@ chmod +x create-block.bash
 
 Then, you will be prompted to provide block name, block description, and whether the block requires locale files.
 
-## Adding a new page to the USupport Client UI
+## Adding a new page to the uSupport Client UI
 
 To create a new page, please use the provided bash script `create-page.bash`. By executing the following command from the root directory of the project:
 
@@ -48,7 +48,7 @@ chmod +x create-page.bash
 
 Then, you will be prompted to provide page name, page description, and whether the page requires locale files.
 
-## Adding a new backdrop to the USupport Client UI
+## Adding a new backdrop to the uSupport Client UI
 
 To create a new backdrop, please use the provided bash script `create-backdrop.bash`. By executing the following command from the root directory of the project:
 
@@ -59,7 +59,7 @@ chmod +x create-backdrop.bash
 
 Then, you will be prompted to provide backdrop name and whether the backdrop requires locale files.
 
-## Adding a new modal to the USupport Client UI
+## Adding a new modal to the uSupport Client UI
 
 To create a new modal, please use the provided bash script `create-modal.bash`. By executing the following command from the root directory of the project:
 

diff --git a/USupport-components-library b/USupport-components-library
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/assets/logo-square.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>USupport Client</title>
+    <title>uSupport Client</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -7,7 +7,9 @@
     "dev": "vite --host --port 5173",
     "staging": "vite build --mode staging",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint --ext .js,.jsx src",
+    "lint-fix": "eslint --ext .js,.jsx src --fix"
   },
   "dependencies": {
     "@react-pdf/renderer": "^3.1.11",
@@ -29,6 +31,7 @@
     "react-idle-timer": "^5.6.2",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^8.0.3",
+    "react-outside-click-handler": "^1.3.0",
     "react-pin-input": "^1.3.1",
     "react-router-dom": "^6.4.1",
     "react-share": "^4.4.1",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { useTranslation } from "react-i18next";
@@ -8,6 +8,7 @@ import { FIVE_MINUTES } from "@USupport-components-library/utils";
 import { userSvc } from "@USupport-components-library/services";
 
 import "react-toastify/dist/ReactToastify.css";
+import { ThemeContext } from "@USupport-components-library/utils";
 
 // AOS imports
 import "aos/dist/aos.css";
@@ -48,12 +49,27 @@ function App() {
     });
   }, []);
 
+  const getDefaultTheme = () => {
+    const localStorageTheme = localStorage.getItem("default-theme");
+    return localStorageTheme || "light";
+  };
+
+  const [theme, setTheme] = useState(getDefaultTheme());
+
+  useEffect(() => {
+    localStorage.setItem("default-theme", theme);
+  }, [theme]);
+
   return (
-    <QueryClientProvider client={queryClient}>
-      <Root />
-      <ReactQueryDevtools initialOpen />
-      <ToastContainer />
-    </QueryClientProvider>
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      <div className={`theme-${theme}`}>
+        <QueryClientProvider client={queryClient}>
+          <Root />
+          <ReactQueryDevtools initialOpen />
+          <ToastContainer />
+        </QueryClientProvider>
+      </div>
+    </ThemeContext.Provider>
   );
 }
 

diff --git a/src/backdrops/CancelConsultation/CancelConsultation.jsx b/src/backdrops/CancelConsultation/CancelConsultation.jsx
@@ -10,8 +10,6 @@ import { useCancelConsultation } from "#hooks";
 
 import { ONE_HOUR } from "@USupport-components-library/utils";
 
-const AMAZON_S3_BUCKET = `${import.meta.env.VITE_AMAZON_S3_BUCKET}`;
-
 import "./cancel-consultation.scss";
 
 /**
@@ -21,12 +19,7 @@ import "./cancel-consultation.scss";
  *
  * @return {jsx}
  */
-export const CancelConsultation = ({
-  isOpen,
-  onClose,
-  consultation,
-  provider,
-}) => {
+export const CancelConsultation = ({ isOpen, onClose, consultation }) => {
   const queryClient = useQueryClient();
   const currencySymbol = localStorage.getItem("currency_symbol");
 

diff --git a/src/backdrops/CancelConsultation/index.js b/src/backdrops/CancelConsultation/index.js
@@ -1 +1 @@
-export * from './CancelConsultation.jsx';
+export * from "./CancelConsultation.jsx";
diff --git a/src/backdrops/CancelConsultation/locales.js b/src/backdrops/CancelConsultation/locales.js
@@ -1,3 +1,3 @@
-export * as en from './locales/en.json';
+export * as en from "./locales/en.json";
 export * as ru from "./locales/ru.json"
 export * as kk from "./locales/kk.json"
diff --git a/src/backdrops/ChangePassword/index.js b/src/backdrops/ChangePassword/index.js
@@ -1 +1 @@
-export * from './ChangePassword.jsx';
+export * from "./ChangePassword.jsx";
diff --git a/src/backdrops/ChangePassword/locales.js b/src/backdrops/ChangePassword/locales.js
@@ -1,3 +1,3 @@
-export * as en from './locales/en.json';
+export * as en from "./locales/en.json";
 export * as ru from "./locales/ru.json"
 export * as kk from "./locales/kk.json"
diff --git a/src/backdrops/CodeVerification/CodeVerification.jsx b/src/backdrops/CodeVerification/CodeVerification.jsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import PinInput from "react-pin-input";
 
 import { useError } from "#hooks";
 
@@ -11,6 +10,7 @@ import {
   ButtonWithIcon,
   Button,
   Error,
+  PinInput,
 } from "@USupport-components-library/src";
 
 import { userSvc } from "@USupport-components-library/services";
@@ -109,8 +109,8 @@ export const CodeVerification = ({
         <div className="code-verification__content">
           <PinInput
             length={4}
-            secret={false}
-            onChange={(value) => handleCodeChange(value)}
+            secret={isCodeHidden}
+            onChange={handleCodeChange}
           />
           <ButtonWithIcon
             classes="code-verification__view-code-button"

diff --git a/src/backdrops/CodeVerification/code-verification.scss b/src/backdrops/CodeVerification/code-verification.scss
@@ -8,22 +8,6 @@
     padding-bottom: $spacing_3_2;
   }
 
-  .pincode-input-container {
-    margin-top: $spacing_3_6;
-  }
-
-  .pincode-input-text {
-    border: 0 !important;
-    box-shadow: $shadow_1;
-    border-radius: $border_radius_1_6;
-    -webkit-appearance: none;
-  }
-
-  & input[type="password"] {
-    color: #5f549b;
-    font-size: $font_size_3_2;
-  }
-
   &__expire-time-text {
     margin-top: $spacing_0_8;
   }

diff --git a/src/backdrops/CodeVerification/index.js b/src/backdrops/CodeVerification/index.js
@@ -1 +1 @@
-export * from './CodeVerification.jsx';
+export * from "./CodeVerification.jsx";
diff --git a/src/backdrops/CodeVerification/locales.js b/src/backdrops/CodeVerification/locales.js
@@ -1,3 +1,3 @@
-export * as en from './locales/en.json';
+export * as en from "./locales/en.json";
 export * as ru from "./locales/ru.json"
 export * as kk from "./locales/kk.json"
diff --git a/src/backdrops/ConfirmConsultation/ConfirmConsultation.jsx b/src/backdrops/ConfirmConsultation/ConfirmConsultation.jsx
@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useContext } from "react";
 import { Backdrop } from "@USupport-components-library/src";
 import { mascotHappyOrange } from "@USupport-components-library/assets";
 import {
   getTimeAsString,
   getMonthName,
+  ThemeContext,
 } from "@USupport-components-library/utils";
 import { useTranslation } from "react-i18next";
 
@@ -20,13 +21,18 @@ import { useNavigate } from "react-router-dom";
 export const ConfirmConsultation = ({ isOpen, onClose, consultation }) => {
   const navigate = useNavigate();
   const { t } = useTranslation("confirm-consultation");
+  const { theme } = useContext(ThemeContext);
 
   const handleContinue = () => {
     onClose();
     navigate("/consultations");
   };
 
   const { startDate, endDate } = consultation;
+  const getMonthNameString = (date) => {
+    let monthName = t(getMonthName(date).toLowerCase());
+    return monthName;
+  };
 
   return (
     <Backdrop
@@ -42,13 +48,18 @@ export const ConfirmConsultation = ({ isOpen, onClose, consultation }) => {
           src={mascotHappyOrange}
           className="confirm-consultation__content__mascot"
         />
-        <h4 className="confirm-consultation__content__heading">
+        <h4
+          className={[
+            "confirm-consultation__content__heading",
+            theme === "dark" && "confirm-consultation__content__heading--dark",
+          ].join(" ")}
+        >
           {t("heading")}
         </h4>
         <p className="text confirm-consultation__content__text">
           {t("text", {
             startDate: startDate.getDate(),
-            month: getMonthName(startDate),
+            month: getMonthNameString(startDate),
             year: startDate.getFullYear(),
             startTime: getTimeAsString(startDate),
             endTime: getTimeAsString(endDate),

diff --git a/src/backdrops/ConfirmConsultation/confirm-consultation.scss b/src/backdrops/ConfirmConsultation/confirm-consultation.scss
@@ -18,6 +18,10 @@
     &__heading {
       margin-top: $spacing_5_4;
       color: $color_blue_3d527b;
+
+      &--dark {
+        color: $color_gray_d2dcde;
+      }
     }
 
     &__text {

diff --git a/src/backdrops/ConfirmConsultation/index.js b/src/backdrops/ConfirmConsultation/index.js
@@ -1 +1 @@
-export * from './ConfirmConsultation.jsx';
+export * from "./ConfirmConsultation.jsx";
diff --git a/src/backdrops/ConfirmConsultation/locales.js b/src/backdrops/ConfirmConsultation/locales.js
@@ -1,3 +1,3 @@
-export * as en from './locales/en.json';
+export * as en from "./locales/en.json";
 export * as ru from "./locales/ru.json"
 export * as kk from "./locales/kk.json"
diff --git a/src/backdrops/ConfirmConsultation/locales/en.json b/src/backdrops/ConfirmConsultation/locales/en.json
@@ -1,5 +1,17 @@
 {
     "heading": "Your appointment was booked",
     "ctaLabel": "Continue",
-    "text": "for {{startDate}}th of {{month}} {{year}} for the slot from {{startTime}} to {{endTime}}. You can change it at any time through the app."
+    "text": "for {{startDate}}th of {{month}} {{year}} for the slot from {{startTime}} to {{endTime}}. You can change it at any time through the app.",
+    "january": "January",
+    "february": "February",
+    "march": "March",
+    "april": "April",
+    "may": "May",
+    "june": "June",
+    "july": "July",
+    "august": "August",
+    "september": "September",
+    "october": "October",
+    "november": "November",
+    "december": "December"
 }
diff --git a/src/backdrops/ConfirmConsultation/locales/kk.json b/src/backdrops/ConfirmConsultation/locales/kk.json
@@ -1,5 +1,17 @@
 {
   "heading": "Кездесуіңіз брондалды",
   "ctaLabel": "Жалғастыру",
-  "text": "{{startDate}}-шы/ші {{month}} {{year}} күніне {{startTime}} бастап {{endTime}} дейінгі слот үшін. Оны кез келген уақытта қосымша арқылы өзгерте аласыз."
+  "text": "{{startDate}}-шы/ші {{month}} {{year}} күніне {{startTime}} бастап {{endTime}} дейінгі слот үшін. Оны кез келген уақытта қосымша арқылы өзгерте аласыз.",
+  "january": "қаңтар",
+  "february": "ақпан",
+  "march": "наурыз",
+  "april": "сәуір",
+  "may": "мамыр",
+  "june": "маусым",
+  "july": "шілде",
+  "august": "тамыз",
+  "september": "қыркүйек",
+  "october": "қазан",
+  "november": "қараша",
+  "december": "желтоқсан"
 }
diff --git a/src/backdrops/ConfirmConsultation/locales/ru.json b/src/backdrops/ConfirmConsultation/locales/ru.json
@@ -1,5 +1,17 @@
 {
     "heading": "Ваша встреча была забронирована",
     "ctaLabel": "Продолжить",
-    "text": "на {{startDate}} {{month}} {{year}} для слота с {{startTime}} до {{endTime}}. Вы можете изменить его в любое время через приложение."
+    "text": "на {{startDate}} {{month}} {{year}} для слота с {{startTime}} до {{endTime}}. Вы можете изменить его в любое время через приложение.",
+    "january": "январь",
+    "february": "февраль",
+    "march": "март",
+    "april": "апрель",
+    "may": "май",
+    "june": "июнь",
+    "july": "июль",
+    "august": "август",
+    "september": "сентябрь",
+    "october": "октябрь",
+    "november": "ноябрь",
+    "december": "декабрь"
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './CancelConsultation.jsx';
		export * from "./CancelConsultation.jsx";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './ChangePassword.jsx';
		export * from "./ChangePassword.jsx";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './CodeVerification.jsx';
		export * from "./CodeVerification.jsx";
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from './ConfirmConsultation.jsx';
		export * from "./ConfirmConsultation.jsx";