NTP-29408 | Radio Button fix (#1355)

* NTP-29408 | Radio Button fix

* NTP-29408 | Radio Button fix

* NTP-29408 | Radio Button fix

* NTP-29408 | Radio Button fix

* NTP-29408 | Radio Button fix | Litmus experiment enabled

src/constants/litmusExperimentNames.ts

@@ -9,5 +9,6 @@ export enum LITMUS_EXPERIMENT_NAMES {
   COLLECTION_AMEYO_TELE_V3 = 'collection-ameyo-tele-v3',
   HRC_RECALIBRATE_ENABLE = 'hrc-recalibrate-enable',
   SKIP_TRACING_FEEDBACK_FORM = 'collection-skip-tracing-feedback-form',
-  HRC_AMEYO_V3 = 'hrc-new-ameyo-integration'
+  HRC_AMEYO_V3 = 'hrc-new-ameyo-integration',
+  FEEDBACK_BUTTON_FIX_ENABLED = 'feedback-button-fix-enabled'
 }

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

@@ -21,6 +21,9 @@ import { CALL_INTERACTIONS_TYPE } from '../../constants/communicationHistory.con
 import { RootState } from '@cp/src/store';
 import { createKey } from '@cp/utils/CaseDetail.utils';
 import { Roles } from '@cp/pages/auth/constants/AuthConstants';
+import { setIsAddFeedbackModalOpen } from '@cp/src/reducers/commonSlice';
+import isLitmusExperimentEnabled from '@cp/src/utils/isLitmusExperimentEnabled';
+import { LITMUS_EXPERIMENT_NAMES } from '@cp/src/constants/litmusExperimentNames';
 
 interface FeedbackActionButtonProps {
   answerViews: AnswerView[];
@@ -63,6 +66,15 @@ const FeedbackActionButton: React.FC<FeedbackActionButtonProps> = props => {
   }));
   const isGlobalAccessRoleGiven = user?.roles?.includes(Roles.ROLE_GLOBAL_ACCESS);
   const disableCTAs = isGlobalAccessRoleGiven ? !editAccessFlag : false;
+  const [isFeedbackRadioButtonFixEnabled, setIsFeedbackRadioButtonFixEnabled] = useState(false);
+
+  useEffect(() => {
+    isLitmusExperimentEnabled(LITMUS_EXPERIMENT_NAMES.FEEDBACK_BUTTON_FIX_ENABLED, {
+      'x-customer-id': user?.referenceId
+    }).then(res => {
+      setIsFeedbackRadioButtonFixEnabled(res?.result);
+    });
+  }, []);
 
   const removeQueryParams = (query: string) => {
     const param = searchParams.get(query);
@@ -80,6 +92,7 @@ const FeedbackActionButton: React.FC<FeedbackActionButtonProps> = props => {
   const removeInteractionIdAndToggle = () => {
     removeQueryParams(NESTED_BLANK_DISPOSITION_QUERY);
     dispatch(resetFeedbackQuestionTypes());
+    dispatch(setIsAddFeedbackModalOpen(false));
     toggleDrawer();
   };
   const [queryParams] = useSearchParams();
@@ -89,6 +102,9 @@ const FeedbackActionButton: React.FC<FeedbackActionButtonProps> = props => {
     if (interactionId && interactionId === referenceId) {
       toggleDrawer();
     }
+    return () => {
+      removeInteractionIdAndToggle();
+    };
   }, [queryParams]);
 
   return (
@@ -102,6 +118,7 @@ const FeedbackActionButton: React.FC<FeedbackActionButtonProps> = props => {
               addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.LH_Interactions_CallsViewCTA, {
                 interactionId: referenceId
               });
+              isFeedbackRadioButtonFixEnabled && dispatch(setIsAddFeedbackModalOpen(true));
             }}
             variant="text"
             disabled={

src/pages/CaseDetails/feedbackForm/index.tsx

@@ -110,6 +110,11 @@ const FeedbackFrom = (props: FeedbackFromProps) => {
   const ameyoCallDetails = useSelector((state: RootState) => state.common.ameyoCallDetails);
   const isTeamLead = useSelector((state: RootState) => state.common?.isTeamLead);
   const isFeedbackFormDirty = useSelector((state: RootState) => state.feedBack.isFeedbackFormDirty);
+
+  const isAddFeedbackModalOpen = useSelector(
+    (state: RootState) => state.common.isAddFeedbackModalOpen
+  );
+
   const skipTracingInitialQuestions = useSelector(
     (state: RootState) => state.feedBack.skipTracingInitialQuestions
   );
@@ -858,33 +863,34 @@ const FeedbackFrom = (props: FeedbackFromProps) => {
                 clearErrors={clearErrors}
               />
             ))
-          ) : (
+          ) : !isAddFeedbackModalOpen ? (
             <div className={styles.questions}>{initialQuestions}</div>
-          )}
+          ) : null}
           <form onSubmit={handleSubmit(handleSubmitForm, handleFeedbackFormError)}>
-            {feedback.questionMap?.map(question =>
-              question ? (
-                <RenderingEngine
-                  fetchOption={fetchOptionSelect}
-                  register={register}
-                  question={question}
-                  key={question.referenceId}
-                  error={feedback.error}
-                  toggleLoading={toggleLoading}
-                  interactionType={interactionType}
-                  setValue={setValue}
-                  getValue={getValues}
-                  lan={loanId}
-                  customerId={customerId}
-                  source={IFeedbackFormSource.FEEDBACK_FORM}
-                  getValues={getValues}
-                  dispatchFeedback={dispatchFeedback}
-                  unregister={unregister}
-                  clearErrors={clearErrors}
-                />
-              ) : null
-            )}
-            {showComments && (
+            {!isAddFeedbackModalOpen &&
+              feedback.questionMap?.map(question =>
+                question ? (
+                  <RenderingEngine
+                    fetchOption={fetchOptionSelect}
+                    register={register}
+                    question={question}
+                    key={question.referenceId}
+                    error={feedback.error}
+                    toggleLoading={toggleLoading}
+                    interactionType={interactionType}
+                    setValue={setValue}
+                    getValue={getValues}
+                    lan={loanId}
+                    customerId={customerId}
+                    source={IFeedbackFormSource.FEEDBACK_FORM}
+                    getValues={getValues}
+                    dispatchFeedback={dispatchFeedback}
+                    unregister={unregister}
+                    clearErrors={clearErrors}
+                  />
+                ) : null
+              )}
+            {!isAddFeedbackModalOpen && showComments && (
               <div className={styles.input}>
                 <TextArea
                   value={feedback.comment}

src/reducers/commonSlice.ts

@@ -358,6 +358,7 @@ export interface CommonState {
   callingWindow?: CallingWindow;
   lastSyncPermissionStatus?: boolean;
   shouldNotHidePauseCasesTab: boolean;
+  isAddFeedbackModalOpen: boolean;
 }
 
 export const CHECK_LOGIN = 'CHECK_LOGIN';
@@ -430,7 +431,8 @@ const initialState = {
   shouldNotHidePauseCasesTab: false,
   isTeamLead: false,
   isCiuAgent: false,
-  lastSyncPermissionStatus: false
+  lastSyncPermissionStatus: false,
+  isAddFeedbackModalOpen: false
 } as CommonState;
 
 setGlobalUserData({ token: initialState.userData.token });
@@ -632,6 +634,9 @@ export const commonSlice = createSlice({
     },
     setCallingWindow(state, action) {
       state.callingWindow = action.payload;
+    },
+    setIsAddFeedbackModalOpen(state, action) {
+      state.isAddFeedbackModalOpen = action.payload;
     }
   }
 });
@@ -679,7 +684,8 @@ export const {
   setSlashCallStatusFromExtension,
   setAgentBusinessVertical,
   setCallingWindow,
-  setLastSyncPermissionStatus
+  setLastSyncPermissionStatus,
+  setIsAddFeedbackModalOpen
 } = commonSlice.actions;
 
 export default commonSlice.reducer;