Feature/issue 85

src/blocks/ActivityHistory/locales/en.json

@@ -13,6 +13,7 @@
   "client_camera_on": "The client has turned on the camera",
   "client_microphone_off": "The client has turned off the microphone",
   "client_microphone_on": "The client has turned on the microphone",
+  "chat_history_deleted_by_client": "You have deleted the chat history",
 
   "provider_joined": "Provider joined the consultation",
   "provider_left": "The provider has left the consultation",

src/blocks/ActivityHistory/locales/kk.json

@@ -13,6 +13,7 @@
   "client_camera_on": "Клиент камераны қосты",
   "client_microphone_off": "Клиент микрофонды өшірді",
   "client_microphone_on": "Клиент микрофонды қосты",
+  "chat_history_deleted_by_client": "Сіз чат тарихын жойдыңыз",
 
   "provider_joined": "Консультант консультацияға қосылды",
   "provider_left": "Консультант консультациядан шықты",

src/blocks/ActivityHistory/locales/ru.json

@@ -13,6 +13,7 @@
   "client_camera_on": "Клиент включил камеру",
   "client_microphone_off": "Клиент выключил микрофон",
   "client_microphone_on": "Клиент включил микрофон",
+  "chat_history_deleted_by_client": "Вы удалили историю чата",
 
   "provider_joined": "Консультант присоединился к консультации",
   "provider_left": "Консультант покинул консультацию",

src/blocks/UserDetails/UserDetails.jsx

@@ -40,6 +40,7 @@ export const UserDetails = ({
   openDeleteAccountBackdrop,
   openUploadPictureModal,
   openDeletePictureBackdrop,
+  openDeleteChatHistory,
 }) => {
   const { t } = useTranslation("user-details");
 
@@ -413,6 +414,17 @@ export const UserDetails = ({
                 classes="user-details__grid__delete-account-button"
                 onClick={openDeleteAccountBackdrop}
               />
+              <ButtonWithIcon
+                iconName={"circle-close"}
+                iconSize={"md"}
+                size="lg"
+                iconColor={"#eb5757"}
+                color={"red"}
+                label={t("delete_chat")}
+                type={"ghost"}
+                classes="user-details__grid__delete-account-button"
+                onClick={openDeleteChatHistory}
+              />
             </div>
           </GridItem>
         </Grid>

src/blocks/UserDetails/locales/en.json

@@ -22,6 +22,7 @@
   "change_password": "Change password",
   "delete_account": "Delete account",
   "logout": "Logout",
+  "delete_chat": "Clear chat history",
 
   "dropdown_sex_label": "Gender",
   "dropdown_year_label": "Year of birth",

src/blocks/UserDetails/locales/kk.json

@@ -22,6 +22,7 @@
   "change_password": "Құпия сөзді өзгерту",
   "delete_account": "Аккаунтты жою",
   "logout": "Шығу",
+  "delete_chat": "Чат тарихын тазалау",
 
   "dropdown_sex_label": "Жынысы",
   "dropdown_year_label": "Туған жылы",

src/blocks/UserDetails/locales/ru.json

@@ -22,6 +22,7 @@
   "change_password": "Изменить пароль",
   "delete_account": "Удалить аккаунт",
   "logout": "Выйти",
+  "delete_chat": "Очистить историю чата",
 
   "dropdown_sex_label": "Пол",
   "dropdown_year_label": "Год рождения",

src/i18n.js

@@ -108,6 +108,7 @@ import {
   CreateQuestion,
   HowItWorksMyQA,
   QuestionDetails,
+  DeleteChatHistory,
 } from "#modals/locales.js";
 
 import { Root } from "#routes/locales.js";
@@ -218,6 +219,7 @@ const resources = {
     "create-question": CreateQuestion.en,
     "how-it-works-my-qa": HowItWorksMyQA.en,
     "question-details": QuestionDetails.en,
+    "delete-chat-history": DeleteChatHistory.en,
 
     // Routes
     root: Root.en,
@@ -327,6 +329,7 @@ const resources = {
     "create-question": CreateQuestion.ru,
     "how-it-works-my-qa": HowItWorksMyQA.ru,
     "question-details": QuestionDetails.ru,
+    "delete-chat-history": DeleteChatHistory.ru,
 
     // Routes
     root: Root.ru,
@@ -436,6 +439,7 @@ const resources = {
     "create-question": CreateQuestion.kk,
     "how-it-works-my-qa": HowItWorksMyQA.kk,
     "question-details": QuestionDetails.kk,
+    "delete-chat-history": DeleteChatHistory.kk,
 
     // Routes
     root: Root.kk,

src/modals/DeleteChatHistory/DeleteChatHistory.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useMutation } from "@tanstack/react-query";
+
+import { Modal } from "@USupport-components-library/src";
+import { toast } from "react-toastify";
+
+import { clientSvc } from "@USupport-components-library/services";
+import { useError } from "#hooks";
+
+/**
+ * DeleteChatHistory
+ *
+ * The DeleteChatHistory modal
+ *
+ * @return {jsx}
+ */
+export const DeleteChatHistory = ({ isOpen, onClose }) => {
+  const { t } = useTranslation("delete-chat-history");
+
+  const [errors, setErrors] = useState({});
+
+  const deleteChat = async () => {
+    const res = await clientSvc.deleteChatHistory();
+    return res;
+  };
+
+  const deleteAccountMutation = useMutation(deleteChat, {
+    onSuccess: () => {
+      toast(t("success"));
+      onClose();
+    },
+    onError: (error) => {
+      const { message: errorMessage } = useError(error);
+      setErrors({ submit: errorMessage });
+    },
+  });
+
+  const handleConfirm = () => {
+    deleteAccountMutation.mutate();
+  };
+
+  return (
+    <Modal
+      heading={t("heading")}
+      text={t("subheading")}
+      isOpen={isOpen}
+      closeModal={onClose}
+      ctaLabel={t("confirm")}
+      ctaColor="red"
+      ctaHandleClick={handleConfirm}
+      secondaryCtaLabel={t("cancel")}
+      secondaryCtaType="primary"
+      secondaryCtaHandleClick={onClose}
+      errorMessage={errors.submit}
+    />
+  );
+};

src/modals/DeleteChatHistory/index.js

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

src/modals/DeleteChatHistory/locales.js

@@ -0,0 +1,3 @@
+export * as en from "./locales/en.json";
+export * as ru from "./locales/ru.json";
+export * as kk from "./locales/kk.json";

src/modals/DeleteChatHistory/locales/en.json

@@ -0,0 +1,7 @@
+{
+    "heading": "Are you sure you want to delete all your chat data?",
+    "subheading": "This action is irreversible.",
+    "confirm": "Yes, delete all my chat data",
+    "cancel": "No, keep my chat data",
+    "success": "Your chat data has been deleted successfully."
+}

src/modals/DeleteChatHistory/locales/kk.json

@@ -0,0 +1,7 @@
+{
+    "heading": "Чат деректеріңіздің бәрін жою керек пе екеніне сенімдісіз бе?",
+    "subheading": "Бұл әрекетті болдырмауға болмайды.",
+    "confirm": "Иә, чат деректерімді бәрін жою",
+    "cancel": "Жоқ, чат деректерімді сақтау",
+    "success": "Сіздің чат деректеріңіз сәтті жойылды."
+}

src/modals/DeleteChatHistory/locales/ru.json

@@ -0,0 +1,7 @@
+{
+    "heading": "Вы уверены, что хотите удалить всю вашу историю чата?",
+    "subheading": "Это действие необратимо.",
+    "confirm": "Да, удалить всю мою историю чата",
+    "cancel": "Нет, сохранить мою историю чата",
+    "success": "Ваша история чата была успешно удалена."
+}

src/modals/index.js

@@ -6,3 +6,4 @@ export * from "./PaymentInformation";
 export * from "./CreateQuestion";
 export * from "./QuestionDetails";
 export * from "./HowItWorksMyQA";
+export * from "./DeleteChatHistory";

src/modals/locales.js

@@ -6,3 +6,4 @@ export * as PaymentInformation from "./PaymentInformation/locales.js";
 export * as CreateQuestion from "./CreateQuestion/locales.js";
 export * as QuestionDetails from "./QuestionDetails/locales.js";
 export * as HowItWorksMyQA from "./HowItWorksMyQA/locales.js";
+export * as DeleteChatHistory from "./DeleteChatHistory/locales.js";

src/pages/Consultation/Consultation.jsx

@@ -26,6 +26,7 @@ import {
   useWindowDimensions,
   ONE_HOUR,
   getDateView,
+  systemMessageTypes,
 } from "@USupport-components-library/utils";
 
 import {
@@ -49,21 +50,6 @@ import "./consultation.scss";
 
 const SOCKET_IO_URL = `${import.meta.env.VITE_SOCKET_IO_URL}`;
 
-const systemMessageTypes = [
-  "client_joined",
-  "client_left",
-  "client_microphone_on",
-  "client_microphone_off",
-  "client_camera_on",
-  "client_camera_off",
-  "provider_joined",
-  "provider_left",
-  "provider_microphone_on",
-  "provider_microphone_off",
-  "provider_camera_on",
-  "provider_camera_off",
-];
-
 /**
  * Consultation
  *

src/pages/Consultation/locales/en.json

@@ -20,6 +20,7 @@
   "provider_camera_on": "The provider has turned on the camera",
   "provider_microphone_off": "The provider has turned off the microphone",
   "provider_microphone_on": "The provider has turned on the microphone",
+  "chat_history_deleted_by_client": "You have deleted the chat history",
 
   "show_system_messages": "Show system messages",
   "show_previous_consultations": "Show previous consultations",

src/pages/Consultation/locales/kk.json

@@ -20,6 +20,7 @@
   "provider_camera_on": "Консультант камераны қосты",
   "provider_microphone_off": "Консультант микрофонды өшірді",
   "provider_microphone_on": "Консультант микрофонды қосты",
+  "chat_history_deleted_by_client": "Сіз чат тарихын жойдыңыз",
 
   "show_system_messages": "Жүйелік хабарламаларды көрсету",
   "show_previous_consultations": "Алдыңғы кеңестерді көрсетіңіз",

src/pages/Consultation/locales/ru.json

@@ -20,6 +20,7 @@
   "provider_camera_on": "Консультант включил камеру",
   "provider_microphone_off": "Консультант отключил микрофон",
   "provider_microphone_on": "Консультант включил микрофон",
+  "chat_history_deleted_by_client": "Вы удалили историю чата",
 
   "show_system_messages": "Показать системные сообщения",
   "show_previous_consultations": "Показать предыдущие консультации",

src/pages/UserDetails/UserDetails.jsx

@@ -7,6 +7,7 @@ import {
   SelectAvatar,
   DeleteProfilePicture,
 } from "#backdrops";
+import { DeleteChatHistory } from "#modals";
 
 import "./user-details.scss";
 
@@ -25,17 +26,20 @@ export const UserDetails = () => {
     useState(false);
   const [isDeletePictureBackdropShown, setIsDeletePictureBackdropShown] =
     useState(false);
+  const [isDeleteChatHistoryOpen, setIsDeleteChatHistoryOpen] = useState(false);
 
   const openChangePasswordBackdrop = () => setIsChangePasswordOpen(true);
   const openDeleteAccountBackdrop = () => setIsDeleteBackdropShown(true);
   const openUploadPictureModal = () => setIsUploadPictureModalOpen(true);
   const openDeletePictureBackdrop = () => setIsDeletePictureBackdropShown(true);
+  const openDeleteChatHistory = () => setIsDeleteChatHistoryOpen(true);
 
   const closeChangePasswordBackdrop = () => setIsChangePasswordOpen(false);
   const closeDeleteAccountBackdrop = () => setIsDeleteBackdropShown(false);
   const closeUploadPictureModal = () => setIsUploadPictureModalOpen(false);
   const closeDeletePictureBackdrop = () =>
     setIsDeletePictureBackdropShown(false);
+  const closeDeleteChatHistory = () => setIsDeleteChatHistoryOpen(false);
 
   return (
     <Page heading={t("heading")} classes="page__user-details">
@@ -45,6 +49,7 @@ export const UserDetails = () => {
           openUploadPictureModal,
           openDeletePictureBackdrop,
           openChangePasswordBackdrop,
+          openDeleteChatHistory,
         }}
       />
       <ChangePassword
@@ -63,6 +68,10 @@ export const UserDetails = () => {
         isOpen={isDeletePictureBackdropShown}
         onClose={closeDeletePictureBackdrop}
       />
+      <DeleteChatHistory
+        isOpen={isDeleteChatHistoryOpen}
+        onClose={closeDeleteChatHistory}
+      />
     </Page>
   );
 };