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
2023-04-13 23:25:40 +05:30
parent 86391dc145
commit e4b31d71ba
6 changed files with 147 additions and 35 deletions
--- 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",
--- 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));
--- 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 = {
--- 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",
 };
--- a/src/screens/registerPayements/QrCodeModal.tsx
+++ 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<IQrCodeModalProps> = ({ closeQrCodeModal , isCopyButtonDisabled, copyButtonClick }) => {
+    const { paymentLink } = useAppSelector(
+        (state: RootState) => state.payment,
+    );
+    useEffect(() => {
+        if (!paymentLink){
+            closeQrCodeModal();
+        }
+    } , [])
+
+
+    return (
+        <>
+            <View style={[GenericStyles.fill]}>
+                <View
+                    style={[
+                        GenericStyles.row,
+                        GenericStyles.spaceBetween,
+                        GenericStyles.p16,
+                        styles.border,
+                    ]}>
+                    <Heading dark type="h5">
+                        Payment Link
+                    </Heading>
+                    <TouchableOpacity
+                        activeOpacity={0.7}
+                        onPress={closeQrCodeModal}>
+                        <Text dark bold style={[styles.blueText]}>
+                            Close
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+                <View style={[GenericStyles.centerAlignedRow, GenericStyles.m12]}>
+                    <View style={[styles.p8, styles.border]}>
+                        <QRCode
+                            value={paymentLink}
+                            size={250}
+                        />
+                    </View>
+                </View>
+                <View style={[GenericStyles.centerAlignedRow, GenericStyles.m12]}>
+                    <Button
+                        title="Copy link"
+                        variant="secondary"
+                        style={[GenericStyles.mt16, GenericStyles.w100]}
+                        disabled={isCopyButtonDisabled}
+                        onPress={copyButtonClick}
+                    />
+                </View>
+            </View>
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    blueText: {
+        color: COLORS.TEXT.BLUE,
+    },
+    border: {
+        borderColor: COLORS.BORDER.PRIMARY,
+        borderWidth: 1,
+    },
+    p8: {
+        padding: 8,
+    },
+});
+
+export default QrCodeModal;
--- a/src/screens/registerPayements/RegisterPayments.tsx
+++ b/src/screens/registerPayements/RegisterPayments.tsx
@@ -1,5 +1,5 @@
-import { View } from 'react-native';
-import React, { useEffect } from 'react';
+import {Modal, View} from 'react-native';
+import React, {useEffect, useState} from 'react';
 import NavigationHeader from '../../../RN-UI-LIB/src/components/NavigationHeader';
 import { goBack } from '../../components/utlis/navigationUtlis';
 import Text from '../../../RN-UI-LIB/src/components/Text';
@@ -22,6 +22,7 @@ import { setPaymentLink } from '../../reducer/paymentSlice';
 import { ToastMessages } from '../allCases/constants';
 import { addClickstreamEvent } from "../../services/clickstreamEventService";
 import { CLICKSTREAM_EVENT_NAMES } from "../../common/Constants";
+import QrCodeModal from "./QrCodeModal";

 interface IRegisterForm {
    selectedPhoneNumber: string;
@@ -68,8 +69,15 @@ const RegisterPayments: React.FC<IRegisterPayments> = ({ route }) => {
        },
        mode: 'onChange',
    });
+    const [generateClicked , setGenerateClicked] = useState(false);

-    const ChildComponents = numbers.map(({ number, createdAt, sourceText }) => {
+    useEffect(() => {
+        if (paymentLink && generateClicked) {
+            setShowQrCodeModal(true);
+        }
+    } , [paymentLink , generateClicked])
+
+    const ChildComponents = numbers?.map(({ number, createdAt, sourceText }) => {
        return (
            <DropdownItem
                createdAt={createdAt}
@@ -80,6 +88,9 @@ const RegisterPayments: React.FC<IRegisterPayments> = ({ route }) => {
        );
    });

+    const [showQrCodeModal, setShowQrCodeModal] =
+        React.useState<boolean>(false);
+
    const copyButtonClick = () => {
      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_COPY_LINK_CLICKED, {amount: Number(getValues('amount')),lan : caseDetail.loanAccountNumber!!, phoneNumber: getValues('selectedPhoneNumber'), paymentLink })
      if (paymentLink) {
@@ -108,22 +119,28 @@ const RegisterPayments: React.FC<IRegisterPayments> = ({ route }) => {

    const generatePaymentLink = () => {
      addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_SEND_PAYMENT_LINK, {amount: Number(getValues('amount')),lan : caseDetail.loanAccountNumber!!, phoneNumber: getValues('selectedPhoneNumber') });
-        dispatch(
-            generatePaymentLinkAction(
-                {
-                    alternateContactNumber: getValues('selectedPhoneNumber'),
-                    customAmount: {
-                        currency: 'INR',
-                        amount: Number(getValues('amount')),
-                    },
-                    customAmountProvided: Number(getValues('amount'))>-1,
-                    loanAccountNumber: caseDetail.loanAccountNumber!!,
-                    notifyToAlternateContact: true,
-                    customerReferenceId: caseDetail.customerReferenceId,
-                },
-                loanIdToValue,
-            ),
-        );
+      setGenerateClicked(false);
+      if (paymentLink) {
+          setShowQrCodeModal(true);
+      } else {
+          dispatch(
+              generatePaymentLinkAction(
+                  {
+                      alternateContactNumber: getValues('selectedPhoneNumber'),
+                      customAmount: {
+                          currency: 'INR',
+                          amount: Number(getValues('amount')),
+                      },
+                      customAmountProvided: Number(getValues('amount'))>-1,
+                      loanAccountNumber: caseDetail.loanAccountNumber!!,
+                      notifyToAlternateContact: true,
+                      customerReferenceId: caseDetail.customerReferenceId,
+                  },
+                  loanIdToValue
+              ),
+          );
+          setGenerateClicked(true);
+      }
    };

    useEffect(() => {
@@ -205,14 +222,14 @@ const RegisterPayments: React.FC<IRegisterPayments> = ({ route }) => {
                    showLoader={isLoading}
                    onPress={generatePaymentLink}
                />
-                <Button
-                    title="Copy link"
-                    variant="secondary"
-                    style={[GenericStyles.mt16, GenericStyles.w100]}
-                    disabled={isCopyButtonDisabled}
-                    onPress={copyButtonClick}
-                />
            </View>
+            <Modal
+                animationType="slide"
+                animated
+                onRequestClose={() => setShowQrCodeModal(prev => !prev)}
+                visible={showQrCodeModal}>
+                <QrCodeModal closeQrCodeModal={() => setShowQrCodeModal(false)} isCopyButtonDisabled={isCopyButtonDisabled} copyButtonClick={copyButtonClick}  />
+            </Modal>
        </Layout>
    );
 };