Payments screen offline (#358)

TP-28159 | Collect money card on offline gives error asks to open app instead of go online banner | Aman Singh

src/common/OfflineScreen.tsx

@@ -10,7 +10,7 @@ import NoWifiIcon from '../assets/icons/NoWifiIcon';
 import { GenericFunctionArgs } from './GenericTypes';
 
 interface IOfflineScreen {
-  handleRetryEvent: GenericFunctionArgs;
+  handleRetryEvent?: GenericFunctionArgs;
   goBack: GenericFunctionArgs;
   pageTitle: string;
 }

src/screens/registerPayements/RegisterPayments.tsx

@@ -27,6 +27,7 @@ import { addClickstreamEvent } from '../../services/clickstreamEventService';
 import { CLICKSTREAM_EVENT_NAMES } from '../../common/Constants';
 import QrCodeModal from './QrCodeModal';
 import ModalWrapper from '../../../RN-UI-LIB/src/components/modalWrapper/ModalWrapper';
+import OfflineScreen from '../../common/OfflineScreen';
 
 interface IRegisterForm {
   selectedPhoneNumber: string;
@@ -46,7 +47,7 @@ interface IRegisterPayments {
 
 const HEADER_HEIGHT = 100;
 const ROW_HEIGHT = 40;
-
+const PAGE_TITLE = 'Collect Money';
 const RegisterPayments: React.FC<IRegisterPayments> = ({ route }) => {
   let {
     params: { caseId, numbers, amount, pos },
@@ -156,9 +157,13 @@ const RegisterPayments: React.FC<IRegisterPayments> = ({ route }) => {
 
   const getBottomSheetHeight = getDynamicBottomSheetHeightPercentageFn(HEADER_HEIGHT, ROW_HEIGHT);
 
+  if (!isOnline) {
+    return <OfflineScreen goBack={goBack} pageTitle={PAGE_TITLE} />;
+  }
+
   return (
     <Layout>
-      <NavigationHeader title={'Collect Money'} onBack={goBack} />
+      <NavigationHeader title={PAGE_TITLE} onBack={goBack} />
       <View style={[GenericStyles.fill, GenericStyles.p16, GenericStyles.whiteBackground]}>
         <Text light>Share a payment link on the selected number</Text>
         <Text style={[GenericStyles.mb8, GenericStyles.mt16]}>Select number</Text>