TP-69407 | Disabled native back press on feedback submission (#817)

src/components/form/index.tsx

@@ -12,7 +12,7 @@ import { syncCaseDetail } from '../../action/dataActions';
 import { CLICKSTREAM_EVENT_NAMES } from '../../common/Constants';
 import { useAppDispatch, useAppSelector } from '../../hooks';
 import useIsOnline from '../../hooks/useIsOnline';
-import { getUpdatedCollectionCaseDetail, updateCaseDetail } from '../../reducer/allCasesSlice';
+import {getUpdatedCollectionCaseDetail, setIsFeedbackSubmitting, updateCaseDetail} from '../../reducer/allCasesSlice';
 import { deleteInteraction, deleteJourney, updateInteraction } from '../../reducer/caseReducer';
 import { CaseAllocationType } from '../../screens/allCases/interface';
 import { getUnSyncedCase } from '../../screens/caseDetails/interactionsHandler';
@@ -63,7 +63,6 @@ const Widget: React.FC<IWidget> = (props) => {
     NUDGE_BOTTOM_SHEET_DEFAULT_STATE
   );
   const isOnline = useIsOnline();
-  const [isSubmitting, setIsSubmitting] = useState(false);
   const { params } = props.route;
   const { caseId, journey, handleCloseRouting } = params;
   const caseKey = useRef<string>('');
@@ -74,6 +73,7 @@ const Widget: React.FC<IWidget> = (props) => {
   const caseData = useAppSelector((state) => state.allCases?.caseDetails?.[caseId]);
   const dataToBeValidated = useAppSelector((state) => state.case?.caseForm?.[caseId]?.[journey]);
   const intermediateDocsToBeUploaded = useAppSelector((state) => state.feedbackImages?.intermediateDocsToBeUploaded);
+  const isFeedbackSubmitting = useAppSelector((state) => state?.allCases?.isFeedbackSubmitting);
 
   const name = getWidgetNameFromRoute(props.route.name, caseType);
   const { sections, conditionActions: widgetConditionActions, isLeaf } = templateData.widget[name];
@@ -194,7 +194,7 @@ const Widget: React.FC<IWidget> = (props) => {
   };
 
   const onSuccessfulSubmit = (data: any, interactionId: string, nextActions?: any) => {
-    setIsSubmitting(false);
+    dispatch(setIsFeedbackSubmitting(false));
     setNudgeBottomSheetDetails(NUDGE_BOTTOM_SHEET_DEFAULT_STATE);
     navigateToScreen(CaseDetailStackEnum.COLLECTION_CASE_DETAIL, {
       journey: journey,
@@ -220,6 +220,7 @@ const Widget: React.FC<IWidget> = (props) => {
   }
 
   const submitJourneyWithGeoLocation = (data: any, _: any, submitViaNudge?: boolean) => {
+    dispatch(setIsFeedbackSubmitting(true));
     addClickstreamEvent(
       submitViaNudge
         ? CLICKSTREAM_EVENT_NAMES.FA_SUBMIT_ANYWAYS_CLICKED
@@ -238,7 +239,7 @@ const Widget: React.FC<IWidget> = (props) => {
   };
 
   const onErrorSubmit = (errObj: GenericType, data?: GenericType, interactionId?: string) => {
-    setIsSubmitting(false);
+    dispatch(setIsFeedbackSubmitting(false));
     if (nudgeBottomSheetDetails?.showNudgeBottomSheet) {
       addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SUBMIT_ANYWAYS_FAILED, {
         caseId,
@@ -273,7 +274,6 @@ const Widget: React.FC<IWidget> = (props) => {
       templateData,
     });
     if (isOnline) {
-      setIsSubmitting(true);
       const unSyncedCase = getUnSyncedCase(updatedCase);
       const transformedPayload = await getTransformedCollectionCaseItem(
         unSyncedCase,
@@ -414,15 +414,15 @@ const Widget: React.FC<IWidget> = (props) => {
             style={[styles.autoFlex, styles.mH16]}
             title={'Back'}
             testID={'test_back'}
-            disabled={isLeaf && isSubmitting}
+            disabled={isLeaf && isFeedbackSubmitting}
             onPress={handleBackButton}
             leftIcon={<ArrowSolidIcon size={10} />}
           />
           <Button
             style={[styles.autoFlex, styles.mH16]}
             title={isLeaf ? 'Submit' : 'Next'}
-            showLoader={isLeaf && isSubmitting}
-            disabled={isLeaf && isSubmitting}
+            showLoader={isLeaf && isFeedbackSubmitting}
+            disabled={isLeaf && isFeedbackSubmitting}
             onPress={
               isLeaf
                 ? handleSubmit(submitJourneyWithGeoLocation, onError)
@@ -436,7 +436,7 @@ const Widget: React.FC<IWidget> = (props) => {
         </View>
         <NudgeSuspiciousFeedbackBottomSheet
           caseId={caseId}
-          successBtnLoader={isSubmitting}
+          successBtnLoader={isFeedbackSubmitting}
           nudgeBottomSheetDetails={nudgeBottomSheetDetails}
           setNudgeBottomSheetDetails={setNudgeBottomSheetDetails}
           successCallbackFn={handleSubmit(

src/hooks/useNativeButton.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useRef } from 'react';
 import { BackHandler, AppState, AppStateStatus } from 'react-native';
-import { useAppSelector } from '.';
 import { CLICKSTREAM_EVENT_NAMES } from '../common/Constants';
 import { addClickstreamEvent } from '../services/clickstreamEventService';
-import { RootState } from '../store/store';
+import store, { RootState } from '../store/store';
+import {toast} from "@rn-ui-lib/components/toast";
+import {ToastMessages} from "@screens/allCases/constants";
 
 const THREE_MINUTES = 3 * 60 * 1000;
 const useNativeButtons = () => {
@@ -11,6 +12,13 @@ const useNativeButtons = () => {
   const intervalRef = useRef(0);
 
   const handleBackButton = () => {
+    if (store?.getState()?.allCases?.isFeedbackSubmitting) {
+      toast({
+        type: 'info',
+        text1: ToastMessages.FEEDBACK_SUBMISSION_UNDER_PROCESS,
+      });
+      return true;
+    }
     addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_NATIVE_BACK_PRESSED);
     return false;
   };

src/reducer/allCasesSlice.ts

@@ -47,6 +47,7 @@ interface IAllCasesSlice {
   selectedCaseId: string;
   allCasesViewSearchQuery: string;
   visitPlanSearchQuery: string;
+  isFeedbackSubmitting: boolean;
 }
 
 const initialState: IAllCasesSlice = {
@@ -71,6 +72,7 @@ const initialState: IAllCasesSlice = {
   selectedCaseId: '',
   allCasesViewSearchQuery: '',
   visitPlanSearchQuery: '',
+  isFeedbackSubmitting: false,
 };
 
 const getCaseListComponents = (casesList: ICaseItem[], caseDetails: Record<string, CaseDetail>) => {
@@ -311,6 +313,7 @@ const allCasesSlice = createSlice({
         updatedCaseDetail.offlineCaseKey = caseKey;
       }
       state.caseDetails[caseKey] = updatedCaseDetail;
+      state.isFeedbackSubmitting = false;
     },
     setPinnedRank: (state, action) => {
       const caseId = action.payload.caseReferenceId;
@@ -473,6 +476,9 @@ const allCasesSlice = createSlice({
     setVisitPlanSearchQuery: (state, action) => {
       state.visitPlanSearchQuery = action.payload;
     },
+    setIsFeedbackSubmitting: (state, action) => {
+      state.isFeedbackSubmitting = action.payload;
+    }
   },
 });
 
@@ -497,6 +503,7 @@ export const {
   setSelectedCaseId,
   setAllCasesViewSearchQuery,
   setVisitPlanSearchQuery,
+  setIsFeedbackSubmitting
 } = allCasesSlice.actions;
 
 export default allCasesSlice.reducer;

src/screens/allCases/constants.ts

@@ -70,6 +70,8 @@ export const ToastMessages = {
   SUCCESS_COPYING_PAYMENT_LINK: 'Payment link has been copied to Clipboard',
   FILTERS_APPLIED_SUCCESSFULLY: 'Filters applied successfully',
   FEEDBACK_SUBMITTED_OFFLINE: "Feedback will be submitted automatically once you're back online",
+  FEEDBACK_SUBMISSION_UNDER_PROCESS:
+    "Submitting feedback. You'll be redirected to customer details shortly.",
   OFFLINE_MESSAGE: 'You seem to be offline',
   PAYMENT_LINK_NOT_GENERATED: 'Payment link could not be generated',
   PAYMENT_LINK_RETRY: 'Please retry after an hour for this number',