TP-42461 | Post Submission Commitment Tracker Visibility Fix | Ashish Deo (#702)

2024-01-10 20:24:06 +05:30
parent 9edd7e7ba2
commit f72548a191
5 changed files with 95 additions and 58 deletions
--- a/src/common/FloatingBannerCta.tsx
+++ b/src/common/FloatingBannerCta.tsx
@@ -8,10 +8,11 @@ interface FloatingBannerCtaProps {
  onPressHandler: () => void;
  icon?: JSX.Element;
  containerStyle?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<ViewStyle>;
 }

 const FloatingBannerCta = (props: FloatingBannerCtaProps) => {
-  const { icon, title, onPressHandler, containerStyle } = props;
+  const { icon, title, onPressHandler, containerStyle, textStyle } = props;
  return (
    <TouchableOpacity
      activeOpacity={0.8}
@@ -19,7 +20,7 @@ const FloatingBannerCta = (props: FloatingBannerCtaProps) => {
      onPress={onPressHandler}
    >
      {icon ? icon : null}
-      <Text style={GenericStyles.pl6}>{title}</Text>
+      <Text style={[GenericStyles.pl6, textStyle ]}>{title}</Text>
    </TouchableOpacity>
  );
 };
--- a/src/screens/allCases/index.tsx
+++ b/src/screens/allCases/index.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '@hooks';
 import CasesList from './CasesList';
-import Text from '../../../RN-UI-LIB/src/components/Text';
 import { RootState } from '@store';
 import { initCrashlytics } from '@utils/firebaseUtils';
 import Layout from '../layout/Layout';
@@ -25,13 +24,14 @@ import FullScreenLoaderWrapper from '@common/FullScreenLoaderWrapper';
 import DashboardIcon from '../../assets/icons/DashboardIcon';
 import DashBoardScreens from '../Dashboard/DashBoardScreens';
 import { isAgentDashboardVisible } from '@screens/Dashboard/utils';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AppState, AppStateStatus, StyleSheet } from 'react-native';
 import { COLORS } from '@rn-ui-lib/colors';
-import { GenericStyles } from '@rn-ui-lib/styles';
 import DailyCommitmentIcon from '@rn-ui-lib/icons/DailyCommitmentIcon';
-import AddCommitment from '../dailyCommitment/DailyCommitmentBottomSheet';
+import DailyCommitmentBottomSheet from '../dailyCommitment/DailyCommitmentBottomSheet';
 import { getVisibilityStatus } from '@screens/dailyCommitment/actions';
 import { logError } from '@components/utlis/errorUtils';
+import FloatingBannerCta from '@common/FloatingBannerCta';
+import { AppStates } from '@interfaces/appStates';

 const AllCasesMain = () => {
  const { pendingList, pinnedList, completedList, loading } = useAppSelector(
@@ -48,41 +48,41 @@ const AllCasesMain = () => {
  const [isCommitmentSubmitted, setIsCommitmentSubmitted] = useState(true);


+  const getVisibility = () => {
+    getVisibilityStatus()
+      .then((response) => {
+        setIsCommitmentSubmitted(response?.isCommitmentFilled);
+        setIsCommitmentFormVisible(response?.isCommitmentBannerVisible);
+      })
+      .catch((err) => {
+        logError(err);
+      });
+  };
  useEffect(() => {
-      getVisibilityStatus()
-        .then((response) => {
-          setIsCommitmentSubmitted(response?.isCommitmentFilled);
-          setIsCommitmentFormVisible(response?.isCommitmentBannerVisible);
-        })
-        .catch((err) => {
-          logError(err);
-        });
-  }, [isCommitmentSubmitted,isCommitmentFormVisible]);
+    getVisibility();
+  }, []);

  const shouldShowBanner = useMemo(() => {
-    return !isTeamLead && !isCommitmentSubmitted && isCommitmentFormVisible;
-  }, [isCommitmentSubmitted, isCommitmentFormVisible, isTeamLead]);
+    return  !isCommitmentSubmitted && isCommitmentFormVisible;
+  }, [isCommitmentSubmitted, isCommitmentFormVisible]);


  const openCommitmentScreen = () => {
    setOpenBottomSheet(true);
  };
-  const CommitmentComponent = () => {
-    return (
-      <>
-        <TouchableOpacity
-          activeOpacity={0.8}
-          style={[GenericStyles.centerAlignedRow, styles.container]}
-          onPress={openCommitmentScreen}
-        >
-          <DailyCommitmentIcon />
-          <Text bold dark style={[GenericStyles.ml8, GenericStyles.mr8, styles.updateText]}>
-            Update your daily commitment
-          </Text>
-        </TouchableOpacity>
-      </>
-    );
+
+  const handleAppStateChange = (nextAppState: AppStateStatus) => {
+    if (nextAppState === AppStates.ACTIVE) {
+      setTimeout(getVisibility, 5000);
+    }
  };
+  useEffect(() => {
+    const appStateListener = AppState.addEventListener('change', handleAppStateChange);
+    return () => {
+      appStateListener.remove();
+    }
+  }, []);
+
  const HOME_SCREENS: ITabScreen[] = useMemo(() => {
    const bottomSheetScreens = [
      {
@@ -90,7 +90,13 @@ const AllCasesMain = () => {
        component: () => (
          <>
            <CasesList casesList={[...pendingList, ...pinnedList, ...completedList]} allCasesView />
-            {shouldShowBanner ? <CommitmentComponent /> : null}
+            {shouldShowBanner ? <FloatingBannerCta
+              title={"Update your daily commitment"}
+              onPressHandler={openCommitmentScreen}
+              containerStyle={styles.container}
+              icon={<DailyCommitmentIcon />}
+              textStyle={styles.titleText}
+            /> : null}
          </>
        ),
        icon: CasesIcon,
@@ -102,7 +108,13 @@ const AllCasesMain = () => {
        component: () => (
          <>
            <CasesList casesList={pinnedList} isVisitPlan />
-            {shouldShowBanner ? <CommitmentComponent /> : null}
+            {shouldShowBanner ? <FloatingBannerCta
+              title={"Update your daily commitment"}
+              onPressHandler={openCommitmentScreen}
+              containerStyle={styles.container}
+              icon={<DailyCommitmentIcon />}
+              textStyle={styles.titleText}
+            /> : null}
          </>
        ),
        icon: VisitPlanIcon,
@@ -115,7 +127,13 @@ const AllCasesMain = () => {
        component: () => (
          <>
            <DashBoardScreens />
-            {shouldShowBanner ? <CommitmentComponent /> : null}
+            {shouldShowBanner ? <FloatingBannerCta
+              title={"Update your daily commitment"}
+              onPressHandler={openCommitmentScreen}
+              containerStyle={styles.container}
+              icon={<DailyCommitmentIcon />}
+              textStyle={styles.titleText}
+            /> : null}
          </>
        ),
        icon: DashboardIcon,
@@ -127,7 +145,13 @@ const AllCasesMain = () => {
      component: () => (
        <>
          <Profile />
-          {shouldShowBanner ? <CommitmentComponent /> : null}
+          {shouldShowBanner ? <FloatingBannerCta
+            title={"Update your daily commitment"}
+            onPressHandler={openCommitmentScreen}
+            containerStyle={styles.container}
+            icon={<DailyCommitmentIcon />}
+            textStyle={styles.titleText}
+          /> : null}
        </>
      ),
      icon: ProfileIcon,
@@ -168,7 +192,11 @@ const AllCasesMain = () => {
        onTabPress={(e) => onTabPressHandler(e)}
      />
      <CasesActionButtons />
-      <AddCommitment openBottomSheet={openBottomSheet} setOpenBottomSheet={setOpenBottomSheet} />
+      {!isCommitmentSubmitted && isCommitmentFormVisible && <DailyCommitmentBottomSheet
+        openBottomSheet={openBottomSheet}
+        setOpenBottomSheet={setOpenBottomSheet}
+        onSuccessCallback={() => { getVisibility();}}
+      />}
    </Layout>
  );
 };
@@ -177,8 +205,11 @@ const styles = StyleSheet.create({
    backgroundColor: COLORS.BACKGROUND.TEAL,
    height: 40,
  },
-  updateText: {
+  titleText: {
    color: COLORS.TEXT.TEAL,
+    marginLeft: 2,
+    marginRight: 8,
+    fontFamily: 'Inter-Bold',
  },
 });

--- a/src/screens/dailyCommitment/DailyCommitmentBottomSheet.tsx
+++ b/src/screens/dailyCommitment/DailyCommitmentBottomSheet.tsx
@@ -7,10 +7,7 @@ import { GenericStyles } from '../../../RN-UI-LIB/src/styles';
 import { Controller, FieldErrors, useForm } from 'react-hook-form';
 import { isValidAmountEntered } from '../../components/utlis/commonFunctions';
 import { addCommitmentApi, getTodaysPtpAmount} from './actions';
-import Heading from '@rn-ui-lib/components/Heading';
-import DailyCommitmentIcon from '@rn-ui-lib/icons/DailyCommitmentIcon';
 import BottomSheetWrapper from '@common/BottomSheetWrapper';
-import CloseIcon from '@rn-ui-lib/icons/CloseIcon';
 import { COLORS } from '@rn-ui-lib/colors';
 import { EXAMPLE_VALUES } from './constants';
 import { useAppDispatch} from '@hooks';
@@ -20,7 +17,8 @@ import { IAddCommitment, IAddCommitmentProps } from '@interfaces/commitmentTrack
 import HeaderComponent from './headerComponent';
 import { logError } from '@components/utlis/errorUtils';

-const AddCommitment: React.FC<IAddCommitmentProps> = ({ openBottomSheet, setOpenBottomSheet }) => {
+const DailyCommitmentBottomSheet: React.FC<IAddCommitmentProps> = (
+  { openBottomSheet, setOpenBottomSheet, onSuccessCallback }) => {
  const [loading, setLoading] = useState(false);
  const {
    control,
@@ -32,7 +30,7 @@ const AddCommitment: React.FC<IAddCommitmentProps> = ({ openBottomSheet, setOpen
    mode: 'onChange',
  });
  const [submitErrors, setSubmitErrors] = useState<FieldErrors<IAddCommitment>>({});
-  const [todaysPtpAmount, setTodaysPtpAmount] = useState(1000);
+  const [todaysPtpAmount, setTodaysPtpAmount] = useState(0);
  useEffect(() => {
    getTodaysPtpAmount()
      .then((response) => {
@@ -79,9 +77,11 @@ const AddCommitment: React.FC<IAddCommitmentProps> = ({ openBottomSheet, setOpen
    dispatch(
      addCommitmentApi(data, () => {
        setLoading(false);
-      })
-    );
-    onBack();
+      }, () => {
+        onSuccessCallback && onSuccessCallback();
+        onBack();
+      }
+      ));
  };
  const handleError = (data: FieldErrors<IAddCommitment>) => {
    setSubmitErrors(data);
@@ -218,4 +218,4 @@ const styles = StyleSheet.create({
  },
 });

-export default AddCommitment;
+export default DailyCommitmentBottomSheet;
--- a/src/screens/dailyCommitment/actions.ts
+++ b/src/screens/dailyCommitment/actions.ts
@@ -11,18 +11,17 @@ import { addClickstreamEvent } from '@services/clickstreamEventService';
 import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants';
 import { AppDispatch } from '@store';
 import { IAddCommitment } from '@interfaces/commitmentTracker.types';
-import { getSyncTime } from '@hooks/capturingApi';
 import { logError } from '@components/utlis/errorUtils';

 export const getTodaysPtpAmount = async () => {
-  try {
-    const url = getApiUrl(ApiKeys.GET_PTP_AMOUNT);
-    const response = await axiosInstance.get(url);
-    return response?.data;
-  } catch (err) {
-    logError(err as Error, 'Error fetching today\'s PTP amount:');
-    return COMMITMENT_TYPE.EMPTY_PTP_AMOUNT;
-  }
+    try {
+      const url = getApiUrl(ApiKeys.GET_PTP_AMOUNT);
+      const response = await axiosInstance.get(url);
+      return response?.data;
+    } catch (err) {
+      logError(err as Error, 'Error fetching today\'s PTP amount:');
+      return COMMITMENT_TYPE.EMPTY_PTP_AMOUNT;
+    }
 };

 export const getVisibilityStatus = async () => {
@@ -36,10 +35,10 @@ export const getVisibilityStatus = async () => {
 };

 export const addCommitmentApi =
-  (data: IAddCommitment, afterApiCallback?: GenericFunctionArgs) => async (dispatch: AppDispatch) => {
+  (data: IAddCommitment, afterApiCallback?: GenericFunctionArgs, onSuccessCallback?: GenericFunctionArgs) =>
+   async (dispatch: AppDispatch) => {
    const { cashCommitted, visitsCommitted } = data;
    const url = getApiUrl(ApiKeys.DAILY_COMMITMENT);
-    const timestamp = await getSyncTime();
    const payload = data;
    axiosInstance
      .post(url, payload)
@@ -49,6 +48,9 @@ export const addCommitmentApi =
            type: 'info',
            text1: COMMITMENT_TYPE.COMMITMENT_SUBMITTED_SUCCESSFULLY,
          });
+          if (typeof afterApiCallback === 'function') {
+             onSuccessCallback && onSuccessCallback();
+          }
          addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_DAILY_COMMITMENT_SUBMITTED);
        }
      })
--- a/src/types/commitmentTracker.types.ts
+++ b/src/types/commitmentTracker.types.ts
@@ -1,6 +1,9 @@
+import { GenericFunctionArgs } from "@common/GenericTypes";
+
 export interface IAddCommitmentProps {
    openBottomSheet: boolean;
    setOpenBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+    onSuccessCallback?: GenericFunctionArgs;
 }

 export interface IAddCommitment {