TP-63179 | feedback form error handling and web ui update (#923)

src/msw/feedbackForm.ts

@@ -0,0 +1,19 @@
+import { http, HttpResponse } from 'msw';
+import { ApiKeys, getApiUrl } from '@cp/utils/ApiHelper';
+
+const feedbackForm = [
+  http.get('https://localhost:3000/api/v2/interactions/v2/question-tree*', ({ request }) => {
+    return new HttpResponse(null, {
+      status: 503,
+      statusText: 'something went wrong'
+    });
+  }),
+  http.get('https://localhost:3000/api/v2/interactions/v2/option-tree*', ({ request }) => {
+    return new HttpResponse(null, {
+      status: 503,
+      statusText: 'something went wrong'
+    });
+  })
+];
+
+export default feedbackForm;

src/msw/handlers.ts

@@ -1,3 +1,4 @@
 import whatsappChatbotMockRoutes from './WhatsappChatbot/whatsappChatbotMockRoutes';
 import appVersionHandler from './global/appVersionHandler';
-export const handlers = [...appVersionHandler, ...whatsappChatbotMockRoutes];
+import feedbackForm from './feedbackForm';
+export const handlers = [...appVersionHandler, ...whatsappChatbotMockRoutes, ...feedbackForm];

src/pages/CaseDetails/feedbackForm/component/AddCustomerFeedback.tsx

@@ -53,6 +53,7 @@ import { ExtensionHandler } from 'src/utils/extension.utils';
 import { defaultFeedbackTypes } from '../../components/CommunicationHistory/constants';
 import { submitChatFeedback } from '../../../WhatsappChatbot/actions';
 import debounce from '@utils/Debounce';
+import { toast } from '@primitives/Toast';
 
 interface AddCustomerFeedbackProps {
   referenceId: string;
@@ -209,6 +210,11 @@ const AddCustomerFeedback = (props: AddCustomerFeedbackProps) => {
     }
   };
 
+  const failureCallback = () => {
+    toggleLoading(false);
+    toast('something went wrong', { type: 'error' });
+  };
+
   const toggleLoading = (loading = false) => {
     dispatchFeedback({
       type: FeedbackFormKind.SET_LOADING,
@@ -225,7 +231,7 @@ const AddCustomerFeedback = (props: AddCustomerFeedbackProps) => {
         refId,
         sucessCallback,
         interactionType,
-        toggleLoading
+        failureCallback
       );
     },
     [feedback]
@@ -240,7 +246,7 @@ const AddCustomerFeedback = (props: AddCustomerFeedbackProps) => {
         refId,
         sucessCallback,
         interactionType,
-        toggleLoading,
+        failureCallback,
         questionId
       );
     },

src/pages/CaseDetails/feedbackForm/component/Options.tsx

@@ -8,6 +8,7 @@ import { fetchSelectedQption } from '../actions';
 import styles from '../index.module.scss';
 import { IRenderingEngine, QuestionResponse } from '../interfaces/index.type';
 import { getSortedOption, selectedOptionChipStyles } from '../utlis';
+import { toast } from '@primitives/Toast';
 
 const Options: React.FC<IRenderingEngine> = props => {
   const {
@@ -38,10 +39,22 @@ const Options: React.FC<IRenderingEngine> = props => {
     setmoreQuestion([...res]);
   }, []);
 
+  const failureCallback = useCallback(() => {
+    toggleLoading(false);
+    toast('something went wrong, please try selecting the option again', { type: 'error' });
+  }, []);
+
   const handleChipChange = (changeEvent: string) => {
     setselectedChip(changeEvent);
     toggleLoading(true);
-    fetchSelectedQption(lan, customerId, changeEvent, successCallback, interactionType);
+    fetchSelectedQption(
+      lan,
+      customerId,
+      changeEvent,
+      successCallback,
+      interactionType,
+      failureCallback
+    );
   };
 
   const renderChips = useMemo(
@@ -91,7 +104,8 @@ const Options: React.FC<IRenderingEngine> = props => {
         customerId,
         selectedOptionReferenceId,
         successCallback,
-        interactionType
+        interactionType,
+        failureCallback
       );
     }
     return () => {

src/pages/CaseDetails/feedbackForm/component/RadioOptions.tsx

@@ -6,6 +6,7 @@ import RenderingEngine from '.';
 import { mapQuestionToRadioOptions } from '../utlis';
 import { Typography } from '@navi/web-ui/lib/primitives';
 import RequiredIcon from '@navi/web-ui/lib/icons/RequiredIcon';
+import { toast } from '@primitives/Toast';
 
 interface IRadioGroupOptions extends IRenderingEngine {
   handleSelectedChip?: (text: string, refId: string) => void;
@@ -46,7 +47,8 @@ const RadioGroupOptions: React.FC<IRadioGroupOptions> = props => {
           customerId,
           selectedRadio?.referenceId,
           successCallback,
-          interactionType
+          interactionType,
+          failureCallback
         );
       }
     }
@@ -64,7 +66,14 @@ const RadioGroupOptions: React.FC<IRadioGroupOptions> = props => {
     setSelectedRadio(selectedId);
     setValue(`${source}_${referenceId}_option`, selectedId);
     toggleLoading(true);
-    fetchSelectedQption(lan, customerId, event.target.value, successCallback, interactionType);
+    fetchSelectedQption(
+      lan,
+      customerId,
+      event.target.value,
+      successCallback,
+      interactionType,
+      failureCallback
+    );
   };
 
   const successCallback = useCallback((res: Array<QuestionResponse>) => {
@@ -72,6 +81,11 @@ const RadioGroupOptions: React.FC<IRadioGroupOptions> = props => {
     setmoreQuestion(res);
   }, []);
 
+  const failureCallback = useCallback(() => {
+    toggleLoading(false);
+    toast('something went wrong please try again', { type: 'error' });
+  }, []);
+
   const moreOptions = useMemo(
     () =>
       moreQuestion.map(question => (

src/pages/CaseDetails/feedbackForm/index.tsx

@@ -268,6 +268,11 @@ const FeedbackFrom = (props: FeedbackFromProps) => {
     });
   };
 
+  const failureCallback = () => {
+    toggleLoading(false);
+    toast('something went wrong please try again', { type: 'error' });
+  };
+
   const toggleLoading = (loading = false) => {
     dispatchFeedback({
       type: FeedbackFormKind.SET_LOADING,
@@ -284,7 +289,7 @@ const FeedbackFrom = (props: FeedbackFromProps) => {
         refId,
         sucessCallback,
         interactionType,
-        toggleLoading
+        failureCallback
       );
     },
     [feedback, interactionType]
@@ -298,7 +303,7 @@ const FeedbackFrom = (props: FeedbackFromProps) => {
       refId,
       sucessCallback,
       interactionType,
-      toggleLoading,
+      failureCallback,
       questionId
     );
   };