From 6ba1293a4f59e0e48168bb25fdac9db11db75ce2 Mon Sep 17 00:00:00 2001
From: Stanley Ugwu <stanleyugwu2018@gmail.com>
Date: Tue, 20 Dec 2022 19:20:25 +0100
Subject: [PATCH 1/4] fix: replace native splashscreen background with plain
 white images

---
 App.tsx                                       |   1 -
 .../src/main/res/drawable/splashscreen_bg.png | Bin 20114 -> 13841 bytes
 .../background.png                            | Bin 26277 -> 19956 bytes
 tailwind.config.js                            |   5 -----
 4 files changed, 6 deletions(-)

diff --git a/App.tsx b/App.tsx
index 35bd70f..36a9641 100644
--- a/App.tsx
+++ b/App.tsx
@@ -35,7 +35,6 @@ import requestInAppReview from './utils/requestInAppReview';
 // TODO: add autocomplete prop to all text inputs
 // TODO: add autofocus, keyboardAvoidingView and onSubmitediting prop to all forms
 // TODO: install why did you render to monitor avoidable re-renders
-// TODO: remove orange cellular icon from splashscreen or redesign it
 
 /**
  * Create Stack navigator
diff --git a/android/app/src/main/res/drawable/splashscreen_bg.png b/android/app/src/main/res/drawable/splashscreen_bg.png
index c78dec52936f13e2c0fae869afa5052884ff43c1..7e7da5df55f77a81e689386ddec3a6e5ff00611e 100644
GIT binary patch
literal 13841
zcmeI1KTE?<6vgjLqs0Eff(jxXvblC~QA*PiZ8M~l;^H9G$wfqH5fO*rCJ64*Sp=oD
zUqFJJOA8JnPJ)wA9CWSXJ)giu#NiCNuP<pST<$sN_sB`TR>>q6k|L4`s(wSn){oAm
zGpS4Xe&5z*YOlJ{5=qVAGIHLT*PEu*sFbBU$i3>u-Y$hDk^Wg~yfq=RbP@Qa^#e0{
zG$wY_aqsi1kXU~3*KR)2`t9CRQEPl?X%!3qC$@v?WKpv&s_UV85o#m`i{TH@26o9q
z8#o%&16>13pj9#-n4(Yu(IG+`$V;S3qBN91NF*c@5}^b_A|dg2Au&B#<X~wBNL!>W
z(iW_Mv_;w?Z7~!XirN8&B0~{Yz))l;{z)kAuI$%saT58R>C=~7`}%G(oYlig0z+uw
zy}LMhR5wQD1Ga?2KpD^(;D+=>#)OUm0}^5&8W0WWi9g7oDa|51lb%U*;0Y6<NpwIL
qhz>*t9RnVxhz9h;|0;v$@f*DQs&Lz%8<q#dBkY3Jn%^xqkG}yQrth%;

literal 20114
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

diff --git a/ios/EasyVtu/Images.xcassets/SplashScreenBackground.imageset/background.png b/ios/EasyVtu/Images.xcassets/SplashScreenBackground.imageset/background.png
index 2a8ebe5b27ceb9a2af6c689e91744c3a7aaa803a..e63c92eaafc71bb2796adb9650179c4221274de2 100644
GIT binary patch
delta 233
zcmZ2_mhsDM#tEV7zMY;fjv*C{Z*DL$GAQsISdjhy+%LIii8<TZ7=XZI2Q!FD**wwb
zHp}J&k59~-13Z{m(1{PGn#{}w7Zf)?G?ix*`0?gOBS_cb1;2ykQ(6T#PqeCGW|m-(
z-R$To$h`T3X%{2Q0R{%E&5F*GStb{laIgUFDgjzCi-pYqsPBcqW=4-dmdPJX-PtEF
z0tJ8uJ9-GR0Cg%d^FMeCF}*>d{<WiC&*q20>xCvC2yqt`S~W*<18ZL89-s~ePgg&e
IbxsLQ08fri9RL6T

literal 26277
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

diff --git a/tailwind.config.js b/tailwind.config.js
index 7e7317e..9b84b54 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,11 +10,6 @@ const TwColors = {
   gray4: '#dfdfdf',
 };
 
-// TODO: reduce and unify font sizes. Also reduce font line-heights
-/**
- * We separate font sizes for different screen resoutions
- * sizes prefixed with `b` will be used for larger screen
- */
 const TwFontSize = {
   title: '24',
   subTitle: '20',

From 07ecf6da0fa0ca84a9989d99321dba02559b58e4 Mon Sep 17 00:00:00 2001
From: Stanley Ugwu <stanleyugwu2018@gmail.com>
Date: Wed, 21 Dec 2022 17:47:48 +0100
Subject: [PATCH 2/4] improvement: set `autofocus` and `onSubmitediting`  props
 to form fields

---
 App.tsx                                   | 2 --
 components/CarrierAndPhoneNumberField.tsx | 1 +
 screens/airtime/index.tsx                 | 1 +
 screens/cable/index.tsx                   | 2 +-
 screens/change_password/index.tsx         | 1 +
 screens/electricity/index.tsx             | 7 ++++++-
 screens/forgot_password/index.tsx         | 8 +++++---
 screens/profile/index.tsx                 | 3 +++
 screens/signIn/index.tsx                  | 2 ++
 screens/signup/index.tsx                  | 3 +++
 10 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/App.tsx b/App.tsx
index 36a9641..48b4367 100644
--- a/App.tsx
+++ b/App.tsx
@@ -32,8 +32,6 @@ import Cable from './screens/cable';
 import Support from './screens/support';
 import requestInAppReview from './utils/requestInAppReview';
 
-// TODO: add autocomplete prop to all text inputs
-// TODO: add autofocus, keyboardAvoidingView and onSubmitediting prop to all forms
 // TODO: install why did you render to monitor avoidable re-renders
 
 /**
diff --git a/components/CarrierAndPhoneNumberField.tsx b/components/CarrierAndPhoneNumberField.tsx
index b37a045..268504a 100644
--- a/components/CarrierAndPhoneNumberField.tsx
+++ b/components/CarrierAndPhoneNumberField.tsx
@@ -69,6 +69,7 @@ const CarrierAndPhoneNumberField = ({
         textContentType="telephoneNumber"
         value={phoneNumber}
         onChangeText={value => setPhoneNumber(value)}
+        autoComplete={"tel"}
       />
       <View style={tw`mt-6 mb-4`}>
         <CarrierSelector selected={carrier} />
diff --git a/screens/airtime/index.tsx b/screens/airtime/index.tsx
index eeff944..3f5e3f3 100644
--- a/screens/airtime/index.tsx
+++ b/screens/airtime/index.tsx
@@ -232,6 +232,7 @@ const Airtime = () => {
             value={formValues[0] ? `${formValues[0]}` : undefined}
             keyboardType="number-pad"
             onChangeText={value => setValue('amount', +value)}
+            autoFocus
           />
           <WalletBalance />
           <Button
diff --git a/screens/cable/index.tsx b/screens/cable/index.tsx
index 9a9ed70..8af7760 100644
--- a/screens/cable/index.tsx
+++ b/screens/cable/index.tsx
@@ -231,6 +231,7 @@ const Cable = ({}: StackScreen<'Cable'>) => {
             placeholder="Enter cable smart card / IUC number"
             keyboardType="number-pad"
             onChangeText={text => form.setValue('iucNumber', text)}
+            autoFocus
           />
           <WalletBalance />
         </View>
@@ -240,7 +241,6 @@ const Cable = ({}: StackScreen<'Cable'>) => {
           keyboardType="phone-pad"
           textContentType="telephoneNumber"
           autoComplete="tel"
-          autoCorrect
           onEndEditing={handleSubscribe}
           onChangeText={text => form.setValue('phoneNumber', text)}
           defaultValue={profile?.phone || ''}
diff --git a/screens/change_password/index.tsx b/screens/change_password/index.tsx
index e6fb507..41ea170 100644
--- a/screens/change_password/index.tsx
+++ b/screens/change_password/index.tsx
@@ -77,6 +77,7 @@ const ChangePassword = () => {
             onChangeText={text => form.setValue('password', text)}
             secureTextEntry={passwordMasked}
             rightElement={GetEyeIcon(passwordMasked, setPasswordMasked)}
+            autoFocus
           />
           <InputField
             label="Confirm new password"
diff --git a/screens/electricity/index.tsx b/screens/electricity/index.tsx
index beae1eb..65e0ae9 100644
--- a/screens/electricity/index.tsx
+++ b/screens/electricity/index.tsx
@@ -1,6 +1,6 @@
 //import libraries
 import React, {useRef, useState} from 'react';
-import {View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import Text from '~components/Text';
 import tw from '../../lib/tailwind';
 import SafeAreaScrollView from '~components/SafeAreaScrollView';
@@ -98,6 +98,7 @@ const Electricity = () => {
    * Handles form submission
    */
   const handleBuyElectricity = form.handleSubmit(values => {
+    Keyboard.dismiss();
     setPaymentBottomSheetVisible(true);
   });
 
@@ -170,6 +171,7 @@ const Electricity = () => {
             placeholder="Enter your meter number"
             keyboardType="number-pad"
             onChangeText={text => form.setValue('meterNumber', text)}
+            autoFocus
           />
           <InputField
             label="Amount"
@@ -185,12 +187,15 @@ const Electricity = () => {
             placeholder={'Enter phone number'}
             onChangeText={text => form.setValue('phoneNumber', text)}
             defaultValue={profile?.phone}
+            autoComplete="tel"
           />
           <InputField
             label="Email Address"
             placeholder={'Enter email address'}
             onChangeText={text => form.setValue('emailAddress', text)}
             defaultValue={profile?.email}
+            autoComplete="email"
+            onSubmitEditing={handleBuyElectricity}
           />
 
           <Button
diff --git a/screens/forgot_password/index.tsx b/screens/forgot_password/index.tsx
index 90a6048..a361c45 100644
--- a/screens/forgot_password/index.tsx
+++ b/screens/forgot_password/index.tsx
@@ -1,7 +1,6 @@
 //import libraries
 import React, {useState} from 'react';
-import {View} from 'react-native';
-import Text from '~components/Text';
+import {Keyboard, View} from 'react-native';
 import tw from '../../lib/tailwind';
 import SafeAreaScrollView from '~components/SafeAreaScrollView';
 import {StackScreen} from '../../navigation/screenParams';
@@ -11,7 +10,6 @@ import Button from '~components/Button';
 import _axios from '../../api/axios';
 import SnackBar from '~components/SnackBar';
 import SuccessOverlay from '~components/SuccessOverlay';
-import useAppStore from '../../store';
 import Loader from '~components/Loader';
 
 // ForgotPassword Screen Component
@@ -24,6 +22,7 @@ const ForgotPassword = ({
   const [loading, setLoading] = useState(false);
 
   const handleRecoverPassword = () => {
+    Keyboard.dismiss()
     setLoading(true);
     if (
       !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
@@ -68,6 +67,9 @@ const ForgotPassword = ({
           placeholder="Enter your e-mail address"
           value={email}
           onChangeText={text => setEmail(text)}
+          autoComplete="email"
+          autoFocus
+          onSubmitEditing={handleRecoverPassword}
         />
         <Button
           disabled={!email}
diff --git a/screens/profile/index.tsx b/screens/profile/index.tsx
index 7c4098a..289330f 100644
--- a/screens/profile/index.tsx
+++ b/screens/profile/index.tsx
@@ -244,6 +244,7 @@ const Profile = ({navigation: {navigate, goBack}}: TabScreen<'Profile'>) => {
           editable={editingProfile}
           onChangeText={v => setValue('phoneNumber', v)}
           defaultValue={defaultValues.phoneNumber}
+          autoComplete="tel"
         />
         <InputField
           label="Email address"
@@ -255,6 +256,7 @@ const Profile = ({navigation: {navigate, goBack}}: TabScreen<'Profile'>) => {
           editable={editingProfile}
           onChangeText={v => setValue('email', v)}
           defaultValue={defaultValues.email}
+          autoComplete="email"
         />
         {!editingProfile ? (
           <InputField
@@ -263,6 +265,7 @@ const Profile = ({navigation: {navigate, goBack}}: TabScreen<'Profile'>) => {
             focusable={false}
             editable={false}
             value={format(new Date(profile.created_at))}
+            autoComplete="off"
           />
         ) : (
           <InputField
diff --git a/screens/signIn/index.tsx b/screens/signIn/index.tsx
index d51759d..c3a8045 100644
--- a/screens/signIn/index.tsx
+++ b/screens/signIn/index.tsx
@@ -116,6 +116,7 @@ const SignIn = ({navigation: {navigate}}: StackScreen<'SignIn'>) => {
             textContentType='emailAddress'
             labelColor="gray5"
             onChangeText={text => setValue('email', text)}
+            autoComplete="email"
             {...register('email')}
           />
           <InputField
@@ -140,6 +141,7 @@ const SignIn = ({navigation: {navigate}}: StackScreen<'SignIn'>) => {
             textContentType="password"
             secureTextEntry={passwordMasked}
             onChangeText={text => setValue('password', text)}
+            onSubmitEditing={handleLogin}
             {...register('email')}
           />
 
diff --git a/screens/signup/index.tsx b/screens/signup/index.tsx
index 2b24717..9b9f49a 100644
--- a/screens/signup/index.tsx
+++ b/screens/signup/index.tsx
@@ -106,6 +106,7 @@ const SignUp = ({navigation: {navigate}}: StackScreen<'SignUp'>) => {
             textContentType="telephoneNumber"
             keyboardType="number-pad"
             onChangeText={text => setValue('phoneNumber', text)}
+            autoComplete="tel"
             {...register('phoneNumber')}
           />
           <InputField
@@ -114,6 +115,7 @@ const SignUp = ({navigation: {navigate}}: StackScreen<'SignUp'>) => {
             keyboardType="email-address"
             textContentType="emailAddress"
             onChangeText={text => setValue('email', text)}
+            autoComplete="email"
             {...register('email')}
           />
           <InputField
@@ -143,6 +145,7 @@ const SignUp = ({navigation: {navigate}}: StackScreen<'SignUp'>) => {
             placeholder="Re-enter password"
             onChangeText={text => setValue('confirmPassword', text)}
             secureTextEntry={passwordMasked}
+            onSubmitEditing={handleSignup}
             {...register('confirmPassword')}
           />
           <Button

From ee9eeb6b2b2ac5eeb5c157b3230463e117469be5 Mon Sep 17 00:00:00 2001
From: Stanley Ugwu <stanleyugwu2018@gmail.com>
Date: Thu, 22 Dec 2022 03:22:16 +0100
Subject: [PATCH 3/4] improvement: - extract type to type variable - remove
 in-app updat e calls from some screens to avoid frequent prompt - add
 necessary text input props to forms across screens

---
 components/CarrierAndPhoneNumberField.tsx |  1 +
 screens/airtime/index.tsx                 | 32 +++++++++++++++++------
 screens/cable/index.tsx                   |  2 +-
 screens/data/index.tsx                    |  3 ---
 screens/profile/index.tsx                 | 29 ++++++++++----------
 screens/profile/profile.d.ts              |  5 ++++
 utils/detectUserPhoneNumbers.ts           |  1 -
 7 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/components/CarrierAndPhoneNumberField.tsx b/components/CarrierAndPhoneNumberField.tsx
index 268504a..d799515 100644
--- a/components/CarrierAndPhoneNumberField.tsx
+++ b/components/CarrierAndPhoneNumberField.tsx
@@ -70,6 +70,7 @@ const CarrierAndPhoneNumberField = ({
         value={phoneNumber}
         onChangeText={value => setPhoneNumber(value)}
         autoComplete={"tel"}
+        autoFocus
       />
       <View style={tw`mt-6 mb-4`}>
         <CarrierSelector selected={carrier} />
diff --git a/screens/airtime/index.tsx b/screens/airtime/index.tsx
index 3f5e3f3..fdac19c 100644
--- a/screens/airtime/index.tsx
+++ b/screens/airtime/index.tsx
@@ -1,6 +1,6 @@
 //import libraries
 import React, {useRef, useState} from 'react';
-import {View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import tw from '../../lib/tailwind';
 import SafeAreaScrollView from '~components/SafeAreaScrollView';
 import AppHeader from '~components/AppHeader';
@@ -24,13 +24,9 @@ import WalletBalance from '~components/WalletBalance';
 import reduceWalletBalanceBy from '../../utils/reduceWalletBalance';
 import balanceIsSufficient from '../../utils/balanceIsSufficient';
 import requestInAppReview from '../../utils/requestInAppReview';
-import useInAppUpdate from '../../hooks/useInAppUpdate';
 
 // Airtime Screen Component
 const Airtime = () => {
-   // in-app update
-   useInAppUpdate();
-
   /**
    * Form and validation logics and handles
    */
@@ -59,6 +55,7 @@ const Airtime = () => {
 
   // handles submission after form-level validation
   const handleBuyAirtime = handleSubmit(data => {
+    Keyboard.dismiss();
     // TODO: create a proper method of checking user login state instead of
     // by checking the value of profile balance
 
@@ -166,7 +163,8 @@ const Airtime = () => {
     async (data: RedirectParams) => {
       if (data.status === 'successful') {
         const values = cachedFormValues.current!;
-
+        console.log(data);
+        
         // payment successful, let's hit server
         setLoaderVisible(true);
         airtimeTopUp(
@@ -179,7 +177,25 @@ const Airtime = () => {
             setSuccessMsg(res.message); // show success overlay
           })
           .catch(error => {
-            // TODO: find a better way to prevent faulty transaction or incomplete top-up
+            // TODO: Implement first approach to handling faulty tx
+            /**
+             * The most secured approach to faulty tx:
+             * when tx is faulty, try and encrypt and store tx_ref & top-up details in storage.
+             * if storage failed, show the user the tx_ref so to resolve the issue with customer care.
+             * customer care would verify tx_ref, release top-up to user, then store tx_ref in resolved tx db
+             * if storage succeeds, an error is shown to user and a 'retry-previous-tx' button appears on the 
+             * service screen e.g airtime screen. The visibilty of the btn depends on the existence of the faulty tx
+             * storage in device. When btn is pressed, app retrieves and decrypts stored faulty tx details, verifies tx_ref,
+             * retrieves top-up amount from verified tx, releases top-up value, stores the tx_ref in resolved tx db, and 
+             * deletes the faulty tx from storage.
+             * 
+             * Another approach would be to embed every top-up detail e.g amount, service, even tx_id into the tx_ref and encode/encrypt it.
+             * The user can present the encrypted/encoded text to customer care and customer care will know the details of the
+             * tx and be able to confirm it. Or the app can take the encrypted/emcoded tx_ref, decode it and know what value to release
+             * to user 
+             * 
+             * However, the feasible approach now is to resolve issue using tx_ref through customer care
+            */
 
             // Edge case. Error when hitting server. we need make sure top-up is
             // completed cus user has completed payment. lets cache the top-up details
@@ -232,7 +248,7 @@ const Airtime = () => {
             value={formValues[0] ? `${formValues[0]}` : undefined}
             keyboardType="number-pad"
             onChangeText={value => setValue('amount', +value)}
-            autoFocus
+            onSubmitEditing={handleBuyAirtime}
           />
           <WalletBalance />
           <Button
diff --git a/screens/cable/index.tsx b/screens/cable/index.tsx
index 8af7760..6842760 100644
--- a/screens/cable/index.tsx
+++ b/screens/cable/index.tsx
@@ -241,7 +241,7 @@ const Cable = ({}: StackScreen<'Cable'>) => {
           keyboardType="phone-pad"
           textContentType="telephoneNumber"
           autoComplete="tel"
-          onEndEditing={handleSubscribe}
+          onSubmitEditing={handleSubscribe}
           onChangeText={text => form.setValue('phoneNumber', text)}
           defaultValue={profile?.phone || ''}
         />
diff --git a/screens/data/index.tsx b/screens/data/index.tsx
index 0ff3ed8..5be7f29 100644
--- a/screens/data/index.tsx
+++ b/screens/data/index.tsx
@@ -32,12 +32,9 @@ import WalletBalance from '~components/WalletBalance';
 import balanceIsSufficient from '../../utils/balanceIsSufficient';
 import reduceWalletBalanceBy from '../../utils/reduceWalletBalance';
 import requestInAppReview from '../../utils/requestInAppReview';
-import useInAppUpdate from '../../hooks/useInAppUpdate';
 
 // MobileData Screen Component
 const MobileData = (route: StackScreen<'Data'>) => {
-  // in-app update
-  useInAppUpdate();
   
   const [requestError, setRequestError] = useState<string | undefined>(
     undefined,
diff --git a/screens/profile/index.tsx b/screens/profile/index.tsx
index 289330f..e8cee3e 100644
--- a/screens/profile/index.tsx
+++ b/screens/profile/index.tsx
@@ -28,17 +28,17 @@ import profileSchema from './profile.schema';
 import UserIcon from '~images/user.svg';
 import NigeriaFlag from '~images/nigeria_flag.svg';
 
-import type {ProfileUpdateInputs, UpdateProfileDetailsBody} from './profile';
+import type {
+  ProfileUpdateInputs,
+  ProfileUpdateRes,
+  UpdateProfileDetailsBody,
+} from './profile';
 import requestInAppReview from '../../utils/requestInAppReview';
-import useInAppUpdate from '../../hooks/useInAppUpdate';
 
 // TODO: request to make auth token non-expiring
 
 // Profile Screen Component
 const Profile = ({navigation: {navigate, goBack}}: TabScreen<'Profile'>) => {
-  // in-app update
-  useInAppUpdate();
-
   const profile = useAppStore(state => state.profile!);
   const [editingProfile, setEditingProfile] = useState(false);
   const [uploadedImage, setUploadedImage] = useState<Asset | undefined>(
@@ -92,15 +92,14 @@ const Profile = ({navigation: {navigate, goBack}}: TabScreen<'Profile'>) => {
   const profileUpdateQuery = useQuery(
     'update_profile',
     () =>
-      _axios.post<
-        UpdateProfileDetailsBody,
-        // TODO: move request return type to type variable
-        Parameters<typeof updateProfile>[0]
-      >('/update_profile', {
-        email: getValues('email'),
-        phone: getValues('phoneNumber'),
-        username: getValues('username'),
-      }),
+      _axios.post<UpdateProfileDetailsBody, ProfileUpdateRes>(
+        '/update_profile',
+        {
+          email: getValues('email'),
+          phone: getValues('phoneNumber'),
+          username: getValues('username'),
+        },
+      ),
     {
       onError(err: ServerErrorObject) {
         // we're adding this listener to be able to extract the error
@@ -133,7 +132,7 @@ const Profile = ({navigation: {navigate, goBack}}: TabScreen<'Profile'>) => {
         uri: uploadedImage?.uri,
       });
 
-      return _axios.post<FormData, Parameters<typeof updateProfile>[0]>(
+      return _axios.post<FormData, ProfileUpdateRes>(
         '/change_picture',
         formData,
         {
diff --git a/screens/profile/profile.d.ts b/screens/profile/profile.d.ts
index 21af037..f4d5a89 100644
--- a/screens/profile/profile.d.ts
+++ b/screens/profile/profile.d.ts
@@ -1,3 +1,5 @@
+import useAppStore from "../../store";
+
 export interface ProfileUpdateInputs {
   email: string;
   username: string;
@@ -11,3 +13,6 @@ export type UpdateProfileDetailsBody = Omit<
 
 export type UpdateProfilePicBody = {image:string}
 
+type SetProfileFn = ReturnType<typeof useAppStore['getState']>['setProfile']
+export type ProfileUpdateRes = Parameters<SetProfileFn>[0]
+
diff --git a/utils/detectUserPhoneNumbers.ts b/utils/detectUserPhoneNumbers.ts
index ad2ff89..3d0bb6e 100644
--- a/utils/detectUserPhoneNumbers.ts
+++ b/utils/detectUserPhoneNumbers.ts
@@ -10,7 +10,6 @@ import normalisePhoneNumber from './normalisePhoneNumber';
  * @return {Promise<string>} User selected phone number
  */
 const detectUserPhoneNumbers = async (): Promise<string | void> => {
-  // TODO: optimise function
   try {
     const {mobileNumber}: {mobileNumber: string} = await DeviceNumber.get();
     return normalisePhoneNumber(mobileNumber);

From 0f38cd6420212b351d586b6e35422b67f849b54c Mon Sep 17 00:00:00 2001
From: Stanley Ugwu <stanleyugwu2018@gmail.com>
Date: Thu, 22 Dec 2022 19:03:01 +0100
Subject: [PATCH 4/4] improvement: implement a different approach to faulty
 transaction handling

---
 components/FaultyTxModal.tsx      | 68 ++++++++++++++++++++++++
 components/PaymentBottomSheet.tsx | 19 +++++--
 package-lock.json                 | 49 +++++++++++++++---
 package.json                      |  3 ++
 react-app-env.d.ts                |  1 +
 screens/airtime/airtime.d.ts      |  6 ---
 screens/airtime/index.tsx         | 86 +++++++++++--------------------
 screens/cable/index.tsx           | 31 +++++++++--
 screens/data/index.tsx            | 60 +++++++--------------
 screens/electricity/index.tsx     | 30 +++++++++--
 utils/constants/index.ts          |  2 +-
 utils/crypto.ts                   | 31 +++++++++++
 12 files changed, 263 insertions(+), 123 deletions(-)
 create mode 100644 components/FaultyTxModal.tsx
 create mode 100644 utils/crypto.ts

diff --git a/components/FaultyTxModal.tsx b/components/FaultyTxModal.tsx
new file mode 100644
index 0000000..e041073
--- /dev/null
+++ b/components/FaultyTxModal.tsx
@@ -0,0 +1,68 @@
+//import libraries
+import React, {useState} from 'react';
+import Text from '~components/Text';
+import tw from '../lib/tailwind';
+import BottomSheet, {BOTTOMSHEETHEIGHT} from './BottomSheet';
+import Clipboard from '@react-native-clipboard/clipboard';
+import {NavigationProp, useNavigation} from '@react-navigation/native';
+import {StackParamList} from '../navigation/screenParams';
+
+interface FaultyTxModalProps {
+  /**
+   * The transaction ref to display.
+   * This determines the visibility of the component
+   */
+  txRef?: string;
+
+  /**
+   * Function to be called when modal is dismissed
+   */
+  onDismiss: () => void;
+}
+
+const FAULTY_TX_MSG = `Payment was successful but top-up failed due to slow internet connection. Copy below transaction id, then you'll redirected to contact our customer care and complete top-up. Please keep the copied transaction id safe`;
+
+/**
+ * Displays modal for faulty transactions i.e transactions where payment
+ * was successful but top-up completion failed for some reason.
+ * It shows the `transaction ref` to user, so user can copy it and resolve issue
+ * with customer care
+ */
+const FaultyTxModal = ({txRef, onDismiss}: FaultyTxModalProps) => {
+  const [txRefCopied, setTxRefCopied] = useState(false);
+  const {navigate} = useNavigation<NavigationProp<StackParamList>>();
+
+  const handleCopyId = () => {
+    Clipboard.setString(txRef!);
+    setTxRefCopied(true);
+    setTimeout(() => navigate('Support'), 1000);
+  };
+
+  const noop = () => null;
+
+  return (
+    <BottomSheet
+      height={BOTTOMSHEETHEIGHT.THREE_QUATER}
+      visible={!!txRef}
+      onDismiss={txRefCopied ? onDismiss : noop}
+      title={"An error occurred, top-up couldn't complete"}>
+      <Text style={tw`text-center`}>{FAULTY_TX_MSG}</Text>
+      <Text
+        onPress={handleCopyId}
+        type="small"
+        style={tw`mt-4 bg-gray5 text-center p-3 rounded-md`}>
+        {txRef}
+      </Text>
+      <Text
+        onPress={handleCopyId}
+        style={tw.style(
+          `mx-auto p-2 px-6 rounded-md text-white mt-4`,
+          txRefCopied ? 'bg-green-500' : 'bg-primary',
+        )}>
+        {txRefCopied ? 'TRANSACTION ID COPIED' : 'COPY'}
+      </Text>
+    </BottomSheet>
+  );
+};
+
+export default FaultyTxModal;
diff --git a/components/PaymentBottomSheet.tsx b/components/PaymentBottomSheet.tsx
index 5043dd7..da8d2b1 100644
--- a/components/PaymentBottomSheet.tsx
+++ b/components/PaymentBottomSheet.tsx
@@ -9,6 +9,7 @@ import PaymentMethodButton, {PAYMENT_METHODS} from './PaymentMethodButton';
 import {FlutterwaveInitOptions} from 'flutterwave-react-native/dist/FlutterwaveInit';
 import constants from '../utils/constants';
 import {AppServices} from '../global';
+import {decrypt, encrypt} from '../utils/crypto';
 
 interface PaymentBottomSheetProps {
   /**
@@ -26,6 +27,14 @@ interface PaymentBottomSheetProps {
    */
   amount: number;
 
+  /**
+   * The unencrypted transaction ref to use for flutterwave.
+   * We delegate tx ref generation to housing component because
+   * we want tx ref to house all top-up details to aid in faulty tx handling.
+   * This component will handle encryption of tx_ref
+   */
+  flutterwaveTxRef: string;
+
   /**
    * Indicates the service being paid for
    */
@@ -62,9 +71,13 @@ const PaymentBottomSheet = ({
   onFlutterwaveInit,
   service = 'airtime',
   visible = false,
+  flutterwaveTxRef,
 }: PaymentBottomSheetProps) => {
   const balance = useAppStore(state => state.profile?.wallet_balance);
   const profile = useAppStore(state => state.profile);
+  const txRef = useMemo(() => encrypt(
+    flutterwaveTxRef || `service=${service};amt=${amount};dt=${Date.now()}`,
+  ),[flutterwaveTxRef, amount]);
 
   // flutterwave options
   const flutterwaveOptions = useMemo<
@@ -73,9 +86,7 @@ const PaymentBottomSheet = ({
     () => ({
       ...constants.INCOMPLETE_STATIC_FLUTTERWAVE_PAYMENT_OPTIONS,
       amount: amount,
-      tx_ref: `${amount}-${service}-top-up-${
-        Date.now() + Math.floor(Math.random() * 100_000).toString(16)
-      }`,
+      tx_ref: txRef || `service=${service};amt=${amount};dt=${Date.now()}`,
       customer:
         profile?.email && profile?.username
           ? {
@@ -93,7 +104,7 @@ const PaymentBottomSheet = ({
         } Payment`,
       },
     }),
-    [amount, profile?.email, profile?.username],
+    [amount, profile?.email, profile?.username, txRef],
   );
 
   return (
diff --git a/package-lock.json b/package-lock.json
index c5cb596..3fbd8ae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,13 @@
       "version": "0.0.1",
       "dependencies": {
         "@hookform/resolvers": "^2.9.8",
+        "@react-native-clipboard/clipboard": "^1.11.1",
         "@react-navigation/bottom-tabs": "^6.4.0",
         "@react-navigation/native": "^6.0.13",
         "@react-navigation/native-stack": "^6.9.0",
+        "@types/crypto-js": "^4.1.1",
         "axios": "^1.0.0",
+        "crypto-js": "^3.1.9-1",
         "flutterwave-react-native": "^1.0.2",
         "lottie-react-native": "^5.1.4",
         "react": "18.1.0",
@@ -25,7 +28,7 @@
         "react-native-in-app-review": "^4.2.1",
         "react-native-linear-gradient": "^2.6.2",
         "react-native-mmkv-storage": "^0.8.0",
-        "react-native-navigation-bar-color": "^2.0.1",
+        "react-native-navigation-bar-color": "github:stanleyugwu/react-native-navigation-bar-color#stanleyugwu-patch-1",
         "react-native-safe-area-context": "^4.4.1",
         "react-native-screens": "^3.17.0",
         "react-native-select-contact": "^1.6.3",
@@ -2762,6 +2765,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@react-native-clipboard/clipboard": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.11.1.tgz",
+      "integrity": "sha512-nvSIIHzybVWqYxcJE5hpT17ekxAAg383Ggzw5WrYHtkKX61N1AwaKSNmXs5xHV7pmKSOe/yWjtSwxIzfW51I5Q==",
+      "peerDependencies": {
+        "react": ">=16.0",
+        "react-native": ">=0.57.0"
+      }
+    },
     "node_modules/@react-native-community/cli": {
       "version": "9.3.2",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-9.3.2.tgz",
@@ -4821,6 +4833,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "node_modules/@types/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA=="
+    },
     "node_modules/@types/eslint-visitor-keys": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -6791,6 +6808,11 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "3.1.9-1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
+      "integrity": "sha512-W93aKztssqf29OvUlqfikzGyYbD1rpkXvGP9IQ1JchLY3bxaLXZSWYbwrtib2vk8DobrDzX7PIXcDWHp0B6Ymw=="
+    },
     "node_modules/css-select": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -14403,8 +14425,8 @@
     },
     "node_modules/react-native-navigation-bar-color": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.1.tgz",
-      "integrity": "sha512-1kE/oxWt+HYjRxdZdvke9tJ365xaee5n3+euOQA1En8zQuSbOxiE4SYEGM7TeaWnmLJ0l37mRnPHaB2H4mGh0A=="
+      "resolved": "git+ssh://git@github.com/stanleyugwu/react-native-navigation-bar-color.git#e4f5e6bda1dc2d1b919756853f0aa542245de79e",
+      "license": "MIT"
     },
     "node_modules/react-native-safe-area-context": {
       "version": "4.4.1",
@@ -19402,6 +19424,12 @@
         "fastq": "^1.6.0"
       }
     },
+    "@react-native-clipboard/clipboard": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@react-native-clipboard/clipboard/-/clipboard-1.11.1.tgz",
+      "integrity": "sha512-nvSIIHzybVWqYxcJE5hpT17ekxAAg383Ggzw5WrYHtkKX61N1AwaKSNmXs5xHV7pmKSOe/yWjtSwxIzfW51I5Q==",
+      "requires": {}
+    },
     "@react-native-community/cli": {
       "version": "9.3.2",
       "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-9.3.2.tgz",
@@ -20882,6 +20910,11 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/crypto-js": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@types/crypto-js/-/crypto-js-4.1.1.tgz",
+      "integrity": "sha512-BG7fQKZ689HIoc5h+6D2Dgq1fABRa0RbBWKBd9SP/MVRVXROflpm5fhwyATX5duFmbStzyzyycPB8qUYKDH3NA=="
+    },
     "@types/eslint-visitor-keys": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz",
@@ -22366,6 +22399,11 @@
         "which": "^2.0.1"
       }
     },
+    "crypto-js": {
+      "version": "3.1.9-1",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-3.1.9-1.tgz",
+      "integrity": "sha512-W93aKztssqf29OvUlqfikzGyYbD1rpkXvGP9IQ1JchLY3bxaLXZSWYbwrtib2vk8DobrDzX7PIXcDWHp0B6Ymw=="
+    },
     "css-select": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz",
@@ -28104,9 +28142,8 @@
       "requires": {}
     },
     "react-native-navigation-bar-color": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-native-navigation-bar-color/-/react-native-navigation-bar-color-2.0.1.tgz",
-      "integrity": "sha512-1kE/oxWt+HYjRxdZdvke9tJ365xaee5n3+euOQA1En8zQuSbOxiE4SYEGM7TeaWnmLJ0l37mRnPHaB2H4mGh0A=="
+      "version": "git+ssh://git@github.com/stanleyugwu/react-native-navigation-bar-color.git#e4f5e6bda1dc2d1b919756853f0aa542245de79e",
+      "from": "react-native-navigation-bar-color@github:stanleyugwu/react-native-navigation-bar-color#stanleyugwu-patch-1"
     },
     "react-native-safe-area-context": {
       "version": "4.4.1",
diff --git a/package.json b/package.json
index 2e02df0..0ce7bb0 100644
--- a/package.json
+++ b/package.json
@@ -11,10 +11,13 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^2.9.8",
+    "@react-native-clipboard/clipboard": "^1.11.1",
     "@react-navigation/bottom-tabs": "^6.4.0",
     "@react-navigation/native": "^6.0.13",
     "@react-navigation/native-stack": "^6.9.0",
+    "@types/crypto-js": "^4.1.1",
     "axios": "^1.0.0",
+    "crypto-js": "^3.1.9-1",
     "flutterwave-react-native": "^1.0.2",
     "lottie-react-native": "^5.1.4",
     "react": "18.1.0",
diff --git a/react-app-env.d.ts b/react-app-env.d.ts
index baa80eb..fb768f6 100644
--- a/react-app-env.d.ts
+++ b/react-app-env.d.ts
@@ -55,4 +55,5 @@ declare module '@env' {
   // CHORE: When new env var are added in .env file,
   // export the key as const like below
   export const FLUTTERWAVE_MERCHANT_API_KEY: S;
+  export const ENCRYPTION_KEY: S;
 }
diff --git a/screens/airtime/airtime.d.ts b/screens/airtime/airtime.d.ts
index 9a84afe..2dd8dd6 100644
--- a/screens/airtime/airtime.d.ts
+++ b/screens/airtime/airtime.d.ts
@@ -4,9 +4,3 @@ export enum Carrier {
   Glo = 'glo',
   Etisalat = 'etisalat',
 }
-
-export type IncompleteTopUp = {
-  phone: string;
-  amount: number;
-  carrier: Carrier;
-};
diff --git a/screens/airtime/index.tsx b/screens/airtime/index.tsx
index fdac19c..54c8bb7 100644
--- a/screens/airtime/index.tsx
+++ b/screens/airtime/index.tsx
@@ -1,5 +1,5 @@
 //import libraries
-import React, {useRef, useState} from 'react';
+import React, {useRef, useState, useMemo} from 'react';
 import {Keyboard, View} from 'react-native';
 import tw from '../../lib/tailwind';
 import SafeAreaScrollView from '~components/SafeAreaScrollView';
@@ -9,7 +9,7 @@ import {useForm, useWatch} from 'react-hook-form';
 import {yupResolver} from '@hookform/resolvers/yup';
 import AirtimeSchema from './airtime.schema';
 import {InferType} from 'yup';
-import {Carrier, IncompleteTopUp} from './airtime.d';
+import {Carrier} from './airtime.d';
 import Button from '~components/Button';
 import SnackBar from '~components/SnackBar';
 import getFirstError from '../../utils/getFirstError';
@@ -24,6 +24,7 @@ import WalletBalance from '~components/WalletBalance';
 import reduceWalletBalanceBy from '../../utils/reduceWalletBalance';
 import balanceIsSufficient from '../../utils/balanceIsSufficient';
 import requestInAppReview from '../../utils/requestInAppReview';
+import FaultyTxModal from '~components/FaultyTxModal';
 
 // Airtime Screen Component
 const Airtime = () => {
@@ -59,31 +60,6 @@ const Airtime = () => {
     // TODO: create a proper method of checking user login state instead of
     // by checking the value of profile balance
 
-    // here we check if there's an incomplete top-up so that we
-    // complete it before initialising new transaction
-    if (incompleteTopUpCache.current) {
-      const values = incompleteTopUpCache.current;
-      setLoaderVisible(true);
-      return airtimeTopUp(values.phone, values.amount, values.carrier)
-        .then(res => {
-          // top-up completed. let's clear incomplete top up cache.
-          // DON'T REMOVE BELOW LINE
-          incompleteTopUpCache.current = undefined;
-          setSuccessMsg(
-            `Previous incomplete top-up of #${
-              values.amount + ' ' + values.carrier
-            } to ${values.phone} completed successfully`,
-          );
-        })
-        .catch(error => {
-          // we'll show error but won't clear incomplete top-up cache
-          setRequestError(
-            'Error completing previous top-up transaction. Check your internet connection and try again',
-          );
-        })
-        .finally(() => setLoaderVisible(false));
-    }
-
     // show payment methods bottom sheet
     setPaymentSheetVisible(true);
   });
@@ -97,15 +73,7 @@ const Airtime = () => {
   const [paymentSheetVisible, setPaymentSheetVisible] = useState(false);
   const [loaderVisible, setLoaderVisible] = useState(false);
   const [successMsg, setSuccessMsg] = useState<string | undefined>();
-
-  /**
-   * In order to handle faulty transactions, or edge case where user completes
-   * payment but hits network error when app is about to top-up his/her account,
-   * this ref will cache details of an incomplete top-up so when user has stable
-   * connection, the top-up will be completed.
-   */
-  const incompleteTopUpCache = useRef<IncompleteTopUp | undefined>(undefined);
-
+  const [faultyTxRef, setFaultyTxRef] = useState<string | undefined>(undefined);
   /**
    * This ref will be used to cache form values when flutterwave payment is initialised.
    * the form values will be used after successful payment, but we don't want to get the values
@@ -115,6 +83,18 @@ const Airtime = () => {
     undefined,
   );
 
+  // Airtime Tx ref
+  const TX_REF = useMemo(
+    () =>
+      `service=airtime;amt=${getValues('amount')};carrier=${getValues(
+        'carrier',
+      )};phone=${getValues('phoneNumber')};dt=${Date.now()}`,
+    [
+      /* when the value of any form field changes we regenrate tx_ref*/
+      Object.values(getValues()).join(''),
+    ],
+  );
+
   // Handles wallet payment
   const handleWalletPaymentMethod = async () => {
     const values = getValues();
@@ -163,8 +143,7 @@ const Airtime = () => {
     async (data: RedirectParams) => {
       if (data.status === 'successful') {
         const values = cachedFormValues.current!;
-        console.log(data);
-        
+
         // payment successful, let's hit server
         setLoaderVisible(true);
         airtimeTopUp(
@@ -177,37 +156,27 @@ const Airtime = () => {
             setSuccessMsg(res.message); // show success overlay
           })
           .catch(error => {
-            // TODO: Implement first approach to handling faulty tx
             /**
              * The most secured approach to faulty tx:
              * when tx is faulty, try and encrypt and store tx_ref & top-up details in storage.
              * if storage failed, show the user the tx_ref so to resolve the issue with customer care.
              * customer care would verify tx_ref, release top-up to user, then store tx_ref in resolved tx db
-             * if storage succeeds, an error is shown to user and a 'retry-previous-tx' button appears on the 
+             * if storage succeeds, an error is shown to user and a 'retry-previous-tx' button appears on the
              * service screen e.g airtime screen. The visibilty of the btn depends on the existence of the faulty tx
              * storage in device. When btn is pressed, app retrieves and decrypts stored faulty tx details, verifies tx_ref,
-             * retrieves top-up amount from verified tx, releases top-up value, stores the tx_ref in resolved tx db, and 
+             * retrieves top-up amount from verified tx, releases top-up value, stores the tx_ref in resolved tx db, and
              * deletes the faulty tx from storage.
-             * 
+             *
              * Another approach would be to embed every top-up detail e.g amount, service, even tx_id into the tx_ref and encode/encrypt it.
              * The user can present the encrypted/encoded text to customer care and customer care will know the details of the
              * tx and be able to confirm it. Or the app can take the encrypted/emcoded tx_ref, decode it and know what value to release
-             * to user 
-             * 
+             * to user
+             *
              * However, the feasible approach now is to resolve issue using tx_ref through customer care
-            */
+             */
 
-            // Edge case. Error when hitting server. we need make sure top-up is
-            // completed cus user has completed payment. lets cache the top-up details
-            // for later and show error.
-            setRequestError(
-              `Payment was successful but top-up failed. Connect to internet now and press 'Buy Airtime' button to complete your transaction. Don't close the app, and stay on this screen until top-up completes`,
-            );
-            incompleteTopUpCache.current = {
-              amount: values.amount,
-              phone: values.phoneNumber,
-              carrier: values.carrier as Carrier,
-            };
+            // show faulty tx view
+            setFaultyTxRef(data.tx_ref);
           })
           .finally(() => {
             setPaymentSheetVisible(false);
@@ -282,6 +251,7 @@ const Airtime = () => {
           // lets cache form values to be used for top-up completion after payment
           cachedFormValues.current = getValues();
         }}
+        flutterwaveTxRef={TX_REF}
         handleWalletPayment={handleWalletPaymentMethod}
       />
       <Loader visible={loaderVisible} />
@@ -290,6 +260,10 @@ const Airtime = () => {
         onDismiss={handleAfterSuccessfulPayment}
         successText={successMsg}
       />
+      <FaultyTxModal
+        txRef={faultyTxRef}
+        onDismiss={() => setFaultyTxRef(undefined)}
+      />
     </>
   );
 };
diff --git a/screens/cable/index.tsx b/screens/cable/index.tsx
index 6842760..04a0cff 100644
--- a/screens/cable/index.tsx
+++ b/screens/cable/index.tsx
@@ -20,7 +20,6 @@ import PaymentBottomSheet from '~components/PaymentBottomSheet';
 import CableSelector, {CableNetwork} from './CableSelector';
 import CableNetworksBottomSheet from './CableNetworksBottomSheet';
 
-import constants from '../../utils/constants';
 import getFirstError from '../../utils/getFirstError';
 import balanceIsSufficient from '../../utils/balanceIsSufficient';
 import reduceWalletBalanceBy from '../../utils/reduceWalletBalance';
@@ -35,6 +34,7 @@ import useAppStore from '../../store';
 import CableSchema from './cable.schema';
 import type {CableFormFields} from './cable.d';
 import requestInAppReview from '../../utils/requestInAppReview';
+import FaultyTxModal from '~components/FaultyTxModal';
 
 // FIXME: resolve variation code amount error
 
@@ -47,6 +47,8 @@ const Cable = ({}: StackScreen<'Cable'>) => {
   const [loaderVisible, setLoaderVisible] = useState(false);
   const [paymentSheetVisible, setPaymentSheetVisible] = useState(false);
   const [successMsg, setSuccessMsg] = useState<string>();
+  const [faultyTxRef, setFaultyTxRef] = useState<string>();
+
   const profile = useAppStore(state => state?.profile);
 
   const cachedFormValues = useRef<CableFormFields>();
@@ -85,6 +87,14 @@ const Cable = ({}: StackScreen<'Cable'>) => {
     `Choose ${form.getValues('serviceID') || CableNetwork.Dstv} plan`,
   );
 
+  // TX REF
+  const formValues = form.getValues();
+  const TX_REF = `service=cable tv;amt=${formValues.amount};serviceId=${
+    formValues.serviceID
+  };iuc=${formValues.iucNumber};planId=${formValues.planId};phone=${
+    formValues.phoneNumber
+  };dt=${Date.now()}`;
+
   /**
    * Similar to the function with same name in data screen
    */
@@ -103,7 +113,7 @@ const Cable = ({}: StackScreen<'Cable'>) => {
    * payment while allowing for extension via promise.
    */
   const topUpCable = React.useCallback(
-    async (values: Parameters<typeof _topUpCable>['0'], errorMsg?: string) => {
+    async (values: Parameters<typeof _topUpCable>['0'], txRef?: string) => {
       // payment successful, let's hit server
       setLoaderVisible(true);
       try {
@@ -112,8 +122,14 @@ const Cable = ({}: StackScreen<'Cable'>) => {
         setSuccessMsg('Cable subscription successful'); // show success overlay
         return res;
       } catch (error: any) {
-        // Edge case. Error when hitting server to release service paid for.
-        setRequestError(errorMsg || error.message);
+        // if txRef was passed, then it's flutterwave payment
+        // else it's wallet, and we handle errors from both methods differently
+        if (txRef) {
+          // handle faulty tx
+          setFaultyTxRef(txRef);
+        } else {
+          setRequestError(error.message);
+        }
       } finally {
         setPaymentSheetVisible(false);
         cachedFormValues.current = undefined;
@@ -172,7 +188,7 @@ const Cable = ({}: StackScreen<'Cable'>) => {
     (data: RedirectParams) => {
       if (data.status === 'successful') {
         const values = cachedFormValues.current!;
-        topUpCable(values, constants.FAULTY_TX_MSG);
+        topUpCable(values, data.tx_ref);
       } else {
         // payment failed
         cachedFormValues.current = undefined;
@@ -287,10 +303,15 @@ const Cable = ({}: StackScreen<'Cable'>) => {
         handleFlutterwaveRedirect={handleFlutterwaveRedirect}
         amount={form.getValues('amount') || NaN}
         service="cable tv"
+        flutterwaveTxRef={TX_REF}
         handleFlutterwaveInitError={handleFlutterwaveInitError}
         handleWalletPayment={handleWalletPayment}
         onFlutterwaveInit={() => (cachedFormValues.current = form.getValues())}
       />
+      <FaultyTxModal
+        txRef={faultyTxRef}
+        onDismiss={() => setFaultyTxRef(undefined)}
+      />
     </>
   );
 };
diff --git a/screens/data/index.tsx b/screens/data/index.tsx
index 5be7f29..e2c56ca 100644
--- a/screens/data/index.tsx
+++ b/screens/data/index.tsx
@@ -32,10 +32,10 @@ import WalletBalance from '~components/WalletBalance';
 import balanceIsSufficient from '../../utils/balanceIsSufficient';
 import reduceWalletBalanceBy from '../../utils/reduceWalletBalance';
 import requestInAppReview from '../../utils/requestInAppReview';
+import FaultyTxModal from '~components/FaultyTxModal';
 
 // MobileData Screen Component
 const MobileData = (route: StackScreen<'Data'>) => {
-  
   const [requestError, setRequestError] = useState<string | undefined>(
     undefined,
   );
@@ -43,6 +43,7 @@ const MobileData = (route: StackScreen<'Data'>) => {
   const [plansSheetVisible, setPlansSheetVisible] = useState(false);
   const [loaderVisible, setLoaderVisible] = useState(false);
   const [successMsg, setSuccessMsg] = useState<string | undefined>();
+  const [faultyTxRef, setFaultyTxRef] = useState<string>();
   /**
    * We implement a security measure for top-up whereby we cache form values
    * before initialising payment with external payment gateway so when payment is
@@ -115,6 +116,13 @@ const MobileData = (route: StackScreen<'Data'>) => {
    */
   const formValues = useWatch({control, defaultValue: {carrier: Carrier.Mtn}});
 
+  // TX REF
+  const TX_REF = `service=data;amt=${formValues.amount};planId=${
+    formValues.planId
+  };phone=${formValues.phoneNumber};carrier=${
+    formValues.carrier
+  };dt=${Date.now()}`;
+
   const handleSelectDataPlan = () => {
     setPlansSheetVisible(true);
     const currentQuery = getCurrentCarrierQuery();
@@ -122,35 +130,7 @@ const MobileData = (route: StackScreen<'Data'>) => {
   };
 
   const handleBuyData = handleSubmit(d => {
-    // here we check if there's an incomplete top-up so that we
-    // complete it before initialising new transaction
-    if (incompleteTopUpCache.current) {
-      const values = incompleteTopUpCache.current;
-      setLoaderVisible(true);
-      return dataTopUp(
-        values.carrier as Carrier,
-        values.planId,
-        values.amount,
-        values.phoneNumber,
-      )
-        .then(res => {
-          // top-up completed. let's clear incomplete top up cache.
-          // DON'T REMOVE BELOW LINE
-          incompleteTopUpCache.current = undefined;
-          setSuccessMsg(
-            `Previous incomplete top-up of #${
-              values.amount + ' ' + values.carrier + ' data'
-            } to ${values.phoneNumber} completed successfully`,
-          );
-        })
-        .catch(error => {
-          // we'll show error but won't clear incomplete top-up cache
-          setRequestError(
-            'Error completing previous top-up transaction. Check your internet connection and try again',
-          );
-        })
-        .finally(() => setLoaderVisible(false));
-    } else setPaymentSheetVisible(true);
+    setPaymentSheetVisible(true);
   });
 
   // Handles redirection after flutterwave payment
@@ -172,13 +152,8 @@ const MobileData = (route: StackScreen<'Data'>) => {
             setSuccessMsg('Data top-up transaction successful'); // show success overlay
           })
           .catch(error => {
-            // Edge case. Error when hitting server. we need make sure top-up is
-            // completed cus user has completed payment. lets cache the top-up details
-            // for later and show error.
-            setRequestError(
-              `Payment was successful but top-up failed. Connect to internet now and press 'Buy Airtime' button to complete your transaction. Don't close the app, and stay on this screen until top-up completes`,
-            );
-            incompleteTopUpCache.current = {...values};
+            // handle faulty tx
+            setFaultyTxRef(data.tx_ref);
           })
           .finally(() => {
             setPaymentSheetVisible(false);
@@ -270,10 +245,10 @@ const MobileData = (route: StackScreen<'Data'>) => {
               setValue('phoneNumber', numberAndCarrier[0]);
               if (numberAndCarrier[1]) {
                 setValue('carrier', numberAndCarrier[1]);
-                if(formValues.carrier !== numberAndCarrier[1]){
+                if (formValues.carrier !== numberAndCarrier[1]) {
                   setSelectedPlanName('Select a data plan');
                   // @ts-ignore
-                  setValue("planId", undefined);
+                  setValue('planId', undefined);
                 }
               }
             }}
@@ -300,7 +275,8 @@ const MobileData = (route: StackScreen<'Data'>) => {
         visible={paymentSheetVisible}
         onDismiss={() => setPaymentSheetVisible(false)}
         handleFlutterwaveRedirect={handleFlutterwaveRedirect}
-        amount={formValues.amount || NaN}
+        amount={formValues.amount || 1000}
+        flutterwaveTxRef={TX_REF}
         service="data"
         handleFlutterwaveInitError={handleFlutterwaveInitError}
         handleWalletPayment={handleWalletPayment}
@@ -363,6 +339,10 @@ const MobileData = (route: StackScreen<'Data'>) => {
           requestInAppReview();
         }}
       />
+      <FaultyTxModal
+        txRef={faultyTxRef}
+        onDismiss={() => setFaultyTxRef(undefined)}
+      />
     </>
   );
 };
diff --git a/screens/electricity/index.tsx b/screens/electricity/index.tsx
index 65e0ae9..c7ca5e4 100644
--- a/screens/electricity/index.tsx
+++ b/screens/electricity/index.tsx
@@ -26,9 +26,9 @@ import Loader from '~components/Loader';
 import _topUpElectricity from '../../api/services/topUpElectricity';
 import SuccessOverlay from '~components/SuccessOverlay';
 import {RedirectParams} from 'flutterwave-react-native/dist/PayWithFlutterwave';
-import constants from '../../utils/constants';
 import reduceWalletBalanceBy from '../../utils/reduceWalletBalance';
 import requestInAppReview from '../../utils/requestInAppReview';
+import FaultyTxModal from '~components/FaultyTxModal';
 
 type ElectricitySchemaFields = InferType<typeof ElectricitySchema>;
 
@@ -41,6 +41,7 @@ const Electricity = () => {
     useState(false);
   const [loaderVisible, setLoaderVisible] = useState(false);
   const [successMsg, setSuccessMsg] = useState<string | undefined>(undefined);
+  const [faultyTxRef, setFaultyTxRef] = useState<string>();
 
   /**
    * Caches form values before flutterwave initialisation
@@ -65,6 +66,14 @@ const Electricity = () => {
     },
   });
 
+  // TX REF
+  const formValues = form.getValues();
+  const TX_REF = `service=electricity;provider=${formValues.provider};amt=${
+    formValues.amount
+  };phone=${formValues.phoneNumber};email=${formValues.emailAddress};meterNo=${
+    formValues.meterNumber
+  };dt=${Date.now()}`;
+
   /**
    * Shareable wrapper for electricity top-up API service.
    * This wrapper contains common side effects for wallet and flutterwave
@@ -73,7 +82,7 @@ const Electricity = () => {
   const topUpElectricity = React.useCallback(
     async (
       values: Parameters<typeof _topUpElectricity>['0'],
-      errorMsg?: string,
+      txRef?: string,
     ) => {
       // payment successful, let's hit server
       setLoaderVisible(true);
@@ -83,8 +92,14 @@ const Electricity = () => {
         setSuccessMsg('Electricity top-up transaction successful'); // show success overlay
         return res;
       } catch (error: any) {
-        // Edge case. Error when hitting server to release service paid for.
-        setRequestError(errorMsg || error.message);
+        // if txRef was passed, then it's flutterwave payment
+        // else it's wallet, and we handle errors from both methods differently
+        if (txRef) {
+          // handle faulty tx
+          setFaultyTxRef(txRef);
+        } else {
+          setRequestError(error.message);
+        }
       } finally {
         setPaymentBottomSheetVisible(false);
         cachedFormValues.current = null;
@@ -135,7 +150,7 @@ const Electricity = () => {
     (data: RedirectParams) => {
       if (data.status === 'successful') {
         const values = cachedFormValues.current!;
-        topUpElectricity(values, constants.FAULTY_TX_MSG);
+        topUpElectricity(values, data.tx_ref);
       } else {
         // payment failed
         cachedFormValues.current = null;
@@ -218,6 +233,7 @@ const Electricity = () => {
         visible={paymentBottomSheetVisible}
         amount={form.getValues('amount') || 0}
         handleFlutterwaveRedirect={handleFlutterwaveRedirect}
+        flutterwaveTxRef={TX_REF}
         handleWalletPayment={handleWalletPayment}
         handleFlutterwaveInitError={handleFlutterwaveInitError}
         onFlutterwaveInit={() => (cachedFormValues.current = form.getValues())}
@@ -241,6 +257,10 @@ const Electricity = () => {
           requestInAppReview();
         }}
       />
+      <FaultyTxModal
+        txRef={faultyTxRef}
+        onDismiss={() => setFaultyTxRef(undefined)}
+      />
     </>
   );
 };
diff --git a/utils/constants/index.ts b/utils/constants/index.ts
index 8e32645..d7fcfae 100644
--- a/utils/constants/index.ts
+++ b/utils/constants/index.ts
@@ -7,7 +7,7 @@ const constants = Object.freeze({
   
   MINIMUM_AIRTIME_TOPUP_AMOUNT: 100,
   
-  FAULTY_TX_MSG: `Payment was successful but top-up failed due to weak internet connection. Contact support to resolve the issue`,
+  FAULTY_TX_MSG: '',
   
   INCOMPLETE_STATIC_FLUTTERWAVE_PAYMENT_OPTIONS: {
     authorization: FLUTTERWAVE_MERCHANT_API_KEY,
diff --git a/utils/crypto.ts b/utils/crypto.ts
new file mode 100644
index 0000000..8b6be94
--- /dev/null
+++ b/utils/crypto.ts
@@ -0,0 +1,31 @@
+import crypto from 'crypto-js';
+import {ENCRYPTION_KEY} from '@env';
+
+/**
+ * Encrypt given string
+ */
+const encrypt = (data: string) => {
+  if (!data) return false;
+
+  try {
+    return crypto.AES.encrypt(data, ENCRYPTION_KEY).toString();
+  } catch (e: any) {
+    return false;
+  }
+};
+
+/**
+ * Decrypt encrypted data
+ */
+const decrypt = (encryptedData: string) => {
+  if (!encryptedData) return false;
+  try {
+    var bytes = crypto.AES.decrypt(encryptedData, ENCRYPTION_KEY);
+    var originalData = bytes.toString(crypto.enc.Utf8);
+    return originalData;
+  } catch (e) {
+    return false;
+  }
+};
+
+export {encrypt, decrypt};