From e4b31d71ba4038b3e40c0c4958caeb14b2e8e3cc Mon Sep 17 00:00:00 2001 From: Kunal Sharma Date: Thu, 13 Apr 2023 23:25:40 +0530 Subject: [PATCH] Payment qr code (#241) * TP-22003|Kunal|payment-qr-code * TP-22003|Kunal|payment-qr-code * TP-22003|Kunal|payment-qr-code * TP-22003|Kunal|payment-qr-code --- package.json | 3 +- src/action/paymentActions.ts | 19 ++-- src/common/Constants.ts | 1 + src/screens/allCases/constants.ts | 4 +- src/screens/registerPayements/QrCodeModal.tsx | 86 +++++++++++++++++++ .../registerPayements/RegisterPayments.tsx | 69 +++++++++------ 6 files changed, 147 insertions(+), 35 deletions(-) create mode 100644 src/screens/registerPayements/QrCodeModal.tsx diff --git a/package.json b/package.json index a4832354..e6986642 100644 --- a/package.json +++ b/package.json @@ -54,9 +54,10 @@ "react-native-image-picker": "4.10.2", "react-native-pager-view": "6.1.2", "react-native-permissions": "3.6.1", + "react-native-qrcode-svg": "^6.2.0", "react-native-safe-area-context": "4.4.1", "react-native-screens": "3.18.2", - "react-native-svg": "13.6.0", + "react-native-svg": "^13.9.0", "react-native-tab-view": "3.3.2", "react-native-toast-message": "2.1.5", "react-native-vector-icons": "9.2.0", diff --git a/src/action/paymentActions.ts b/src/action/paymentActions.ts index 97ad3366..4503f45c 100644 --- a/src/action/paymentActions.ts +++ b/src/action/paymentActions.ts @@ -42,7 +42,7 @@ export interface ILoanIdValue > {} export const generatePaymentLinkAction = - (payload: GeneratePaymentPayload, loanIdToValue: ILoanIdToValue) => + (payload: GeneratePaymentPayload, loanIdToValue: ILoanIdToValue ) => (dispatch: Dispatch) => { const url = getApiUrl(ApiKeys.GENERATE_PAYMENT_LINK); dispatch(setLoading(true)); @@ -61,7 +61,7 @@ export const generatePaymentLinkAction = // } axiosInstance .post(url, payload) - .then(async response => { + .then(response => { if (response.status === API_STATUS_CODE.OK) { const responseData = response?.data; const {paymentLink, retriesLeft} = responseData; @@ -95,12 +95,17 @@ export const generatePaymentLinkAction = .catch(err => { addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SEND_PAYMENT_LINK_FAILED, {amount: payload.customAmount,lan : payload.loanAccountNumber, phoneNumber: payload.alternateContactNumber }) if(err.response.status === 429) { - addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SEND_PAYMENT_LINK_FAILED_LIMIT_REACHED, {amount: payload.customAmount,lan : payload.loanAccountNumber, phoneNumber: payload.alternateContactNumber }) + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SEND_PAYMENT_LINK_FAILED_LIMIT_REACHED, {amount: payload.customAmount,lan : payload.loanAccountNumber, phoneNumber: payload.alternateContactNumber }); + toast({ + type: 'error', + text1: ToastMessages.PAYMENT_LINK_RETRY, + }); + }else { + toast({ + type: 'error', + text1: ToastMessages.PAYMENT_LINK_ERROR, + }); } - toast({ - type: 'error', - text1: ToastMessages.PAYMENT_LINK_ERROR, - }); }) .finally(() => { dispatch(setLoading(false)); diff --git a/src/common/Constants.ts b/src/common/Constants.ts index 7254d7b3..27c5b641 100644 --- a/src/common/Constants.ts +++ b/src/common/Constants.ts @@ -51,6 +51,7 @@ export const ClickstreamAPIToMonitor = { [API_URLS[ApiKeys.NOTIFICATIONS]]: 'AV_NOTIFICATIONS_FETCH_API', [API_URLS[ApiKeys.NOTIFICATION_ACTION]]: 'AV_NOTIFICATIONS_ACTION_API', [API_URLS[ApiKeys.NOTIFICATION_DELIVERED]]: 'AV_NOTIFICATIONS_DELIVERED_API', + [API_URLS[ApiKeys.GENERATE_PAYMENT_LINK]]: 'AV_SEND_PAYMENT_LINK' }; export const CLICKSTREAM_EVENT_NAMES = { diff --git a/src/screens/allCases/constants.ts b/src/screens/allCases/constants.ts index 75c3fa5e..b3d2773f 100644 --- a/src/screens/allCases/constants.ts +++ b/src/screens/allCases/constants.ts @@ -57,5 +57,7 @@ export const ToastMessages = { FILTERS_APPLIED_SUCCESSFULLY: 'Filters applied successfully', FEEDBACK_SUBMITTED_OFFLINE: "Feedback will be submitted automatically once you're back online", - OFFLINE_MESSAGE: 'You seem to be offline' + 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", }; diff --git a/src/screens/registerPayements/QrCodeModal.tsx b/src/screens/registerPayements/QrCodeModal.tsx new file mode 100644 index 00000000..45974afd --- /dev/null +++ b/src/screens/registerPayements/QrCodeModal.tsx @@ -0,0 +1,86 @@ +import * as React from 'react'; +import {StyleSheet, TouchableOpacity, View} from 'react-native'; +import { GenericStyles } from '../../../RN-UI-LIB/src/styles'; +import Heading from '../../../RN-UI-LIB/src/components/Heading'; +import Text from '../../../RN-UI-LIB/src/components/Text'; +import { COLORS } from '../../../RN-UI-LIB/src/styles/colors'; +import QRCode from "react-native-qrcode-svg"; +import {useAppSelector} from "../../hooks"; +import {RootState} from "../../store/store"; +import Button from "../../../RN-UI-LIB/src/components/Button"; +import {useEffect} from "react"; + +interface IQrCodeModalProps { + closeQrCodeModal: () => void; + isCopyButtonDisabled: boolean; + copyButtonClick: () => void; +} + +const QrCodeModal: React.FC = ({ closeQrCodeModal , isCopyButtonDisabled, copyButtonClick }) => { + const { paymentLink } = useAppSelector( + (state: RootState) => state.payment, + ); + useEffect(() => { + if (!paymentLink){ + closeQrCodeModal(); + } + } , []) + + + return ( + <> + + + + Payment Link + + + + Close + + + + + + + + + +