boxpay-checkout-reactnative-sdk 1.0.0-beta03

package/src/screens/selectTenureScreen.tsx

@@ -0,0 +1,137 @@
+import { View, Text, Image, SafeAreaView } from 'react-native';
+import { useState } from 'react';
+import type { Emi } from '../interface';
+import Header from '../components/header';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import { SvgUri } from 'react-native-svg';
+import ShimmerPlaceHolder from 'react-native-shimmer-placeholder';
+import SelectTenureCard from '../components/selectTenureCard';
+import styles from '../styles/screens/selectTenureScreenStyles';
+
+interface SelectTenureProps {
+  bankName: string;
+  cardType: string;
+  emiModel: Emi[];
+  bankUrl: string;
+  onbackPress: () => void;
+  onProceedForward: (
+    duration: number,
+    bankName: string,
+    bankUrl: string,
+    offerCode: string,
+    amount: string,
+    percent: number
+  ) => void;
+}
+
+const SelectTenureScreen = ({
+  bankName,
+  cardType,
+  emiModel,
+  bankUrl,
+  onbackPress,
+  onProceedForward,
+}: SelectTenureProps) => {
+  const { checkoutDetails } = checkoutDetailsHandler;
+  const [error, setImageError] = useState(false);
+  const [load, setLoad] = useState(true);
+  const [selectedEmi, setSelectedEmi] = useState('');
+  const [selectedDuration, setSelectedDuration] = useState(0);
+  return (
+    <SafeAreaView style={styles.screenView}>
+      <Header
+        onBackPress={onbackPress}
+        showDesc={true}
+        showSecure={false}
+        text="Select Tenure"
+      />
+      <View
+        style={styles.outerContainer}
+      >
+        <View
+          style={styles.container}
+        >
+          <View
+            style={styles.insideContainer}
+          >
+            {load && !error && (
+              <ShimmerPlaceHolder
+                visible={false} // Keep shimmer until loading is done
+                style={styles.shimmer}
+              />
+            )}
+            {!error ? (
+              <SvgUri
+                uri={bankUrl}
+                width={100} // Keep original size
+                height={100}
+                style={{ transform: [{ scale: 0.4 }] }}
+                onLoad={() => setLoad(false)}
+                onError={() => {
+                  setImageError(true);
+                  setLoad(false);
+                }}
+              />
+            ) : (
+              <Image
+                source={require('../../assets/images/ic_netbanking_semi_bold.png')}
+                style={{ transform: [{ scale: 0.4 }] }}
+              />
+            )}
+          </View>
+          <Text
+            style={styles.text}
+          >
+            {bankName} | {cardType} EMI
+          </Text>
+        </View>
+        <View
+          style={styles.insideContainerDivider}
+        />
+        {emiModel.map((item, index) => (
+          <View key={index}>
+            <SelectTenureCard
+              duration={item.duration}
+              monthlyEmiAmount={item.amount}
+              interest={item.percent || 0}
+              discount={item.discount || ''}
+              totalAmount={item.totalAmount}
+              debiitedAmount={item.netAmount || ''}
+              isLowCostOffer={item.lowCostApplied}
+              isNoCostOffer={item.noCostApplied}
+              interestCharged={item.interestCharged || ''}
+              onProceedForward={() => {
+                onProceedForward(
+                  item.duration,
+                  bankName,
+                  bankUrl,
+                  item.code || '',
+                  item.amount,
+                  item.percent
+                );
+              }}
+              isSelected={
+                selectedEmi === item.amount &&
+                selectedDuration === item.duration
+              }
+              brandColor={checkoutDetails.brandColor}
+              onRadioClick={(duration, amount) => {
+                setSelectedDuration(duration);
+                setSelectedEmi(amount);
+              }}
+              currencySymbol={checkoutDetails.currencySymbol}
+              processingFee={item.processingFee}
+            />
+            {index !== emiModel.length - 1 && (
+              <View
+                style={styles.insideContainerDivider}
+              />
+            )}
+          </View>
+        ))}
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default SelectTenureScreen;

package/src/screens/upiScreen.tsx

@@ -0,0 +1,465 @@
+import {
+  View,
+  Text,
+  Pressable,
+  Image,
+  Animated,
+  ImageBackground,
+} from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { TextInput } from 'react-native-paper';
+import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
+import type { PaymentClass } from '../interface';
+import PaymentSelectorView from '../components/paymentSelector';
+import { getInstalledUpiApps } from '../components/getInstalledUPI';
+import styles from '../styles/screens/upiScreenStyles';
+
+interface UpiScreenProps {
+  handleUpiPayment: (selectedIntent: string) => void;
+  handleCollectPayment: (item: string, id: string, type: string) => void;
+  savedUpiArray: PaymentClass[];
+  onClickRadio: (instrumentValue: string) => void;
+}
+
+const UpiScreen: React.FC<UpiScreenProps> = ({
+  handleUpiPayment,
+  handleCollectPayment,
+  savedUpiArray,
+  onClickRadio,
+}) => {
+  const [upiCollectError, setUpiCollectError] = useState(false);
+  const [upiCollectValid, setUpiCollectValid] = useState(false);
+  const [upiCollectTextInput, setUpiCollectTextInput] = useState('');
+  const [upiIdFocused, setUpiIdFocused] = useState(false);
+  const [isGpayInstalled, setIsGpayInstalled] = useState(false);
+  const [isPhonePeInstalled, setIsPhonePeInstalled] = useState(false);
+  const [isPaytmInstalled, setIsPaytmInstalled] = useState(false);
+  const { checkoutDetails } = checkoutDetailsHandler;
+  const [upiCollectVisible, setUpiCollectVisible] = useState(false);
+  const [selectedIntent, setSelectedIntent] = useState<string | null>(null);
+  const isUpiCollectVisible = checkoutDetails.isUpiCollectMethodEnabled
+  const isUpiIntentVisible = checkoutDetails.isUpiIntentMethodEnabled
+
+  useEffect(() => {
+    const checkUpiApps = async () => {
+      try {
+        const installedApplications = await getInstalledUpiApps();
+        setIsPhonePeInstalled(installedApplications.includes('phonepe'));
+        setIsGpayInstalled(installedApplications.includes('gpay'));
+        setIsPaytmInstalled(installedApplications.includes('paytm'));
+      } catch(error) {
+        console.log(error)
+      }
+    };
+
+    checkUpiApps();
+  }, []);
+
+  const handleUpiChevronClick = () => {
+    setSelectedIntent(null);
+    setUpiCollectVisible(!upiCollectVisible);
+    setDefaultStateOfSavedUpiArray();
+  };
+
+  const handleTextChange = (text: string) => {
+    setUpiCollectTextInput(text);
+    setUpiCollectError(false);
+    if (
+      text.trim() !== '' &&
+      /^[a-zA-Z0-9.\-_]{2,256}@[a-zA-Z]{3,64}$/.test(text)
+    ) {
+      setUpiCollectError(false);
+      setUpiCollectValid(true);
+    } else {
+      if (text.includes('@') && (text.split('@')[1]?.length ?? 0) >= 2) {
+        setUpiCollectError(true);
+        setUpiCollectValid(false);
+      }
+    }
+  };
+
+  const setDefaultStateOfSavedUpiArray = () => {
+    if (
+      savedUpiArray.length != 0 &&
+      savedUpiArray.some((item) => item.isSelected)
+    ) {
+      onClickRadio('');
+    }
+  };
+
+  return (
+    <View>
+      {(isUpiIntentVisible || isUpiCollectVisible) && (
+        <View style={styles.headingContainer}>
+          <Text style={styles.headingText}>Pay by any UPI</Text>
+        </View>
+      )}
+      <View style={styles.intentBackground}>
+        <PaymentSelectorView
+          providerList={savedUpiArray}
+          onProceedForward={(displayValue, instrumentValue, type) =>
+            handleCollectPayment(displayValue, instrumentValue, type)
+          }
+          errorImage={require('../../assets/images/ic_upi.png')}
+          isLastUsed={false}
+          onClickRadio={(selectedValue) => {
+            setSelectedIntent(null);
+            setUpiCollectVisible(false);
+            onClickRadio(selectedValue);
+          }}
+        />
+        <View
+          style={styles.divider}
+        />
+        {isUpiIntentVisible && (
+          <View>
+            <View style={styles.upiIntentRow}>
+              {isGpayInstalled && (
+                <View style={styles.intentContainer}>
+                  <Pressable
+                    style={[
+                      styles.intentIconBorder,
+                      selectedIntent === 'GPay' && {
+                        borderColor: checkoutDetails.brandColor,
+                        borderWidth: 2,
+                      },
+                    ]}
+                    onPress={() => {
+                      setUpiCollectVisible(false);
+                      setUpiCollectError(false);
+                      setSelectedIntent('GPay');
+                      setDefaultStateOfSavedUpiArray();
+                    }}
+                  >
+                    <Image
+                      source={require('../../assets/images/gpay-icon.png')}
+                      style={styles.intentIcon}
+                    />
+                  </Pressable>
+                  <Text
+                    style={[
+                      styles.intentTitle,
+                      selectedIntent === 'GPay' && {
+                        color: checkoutDetails.brandColor,
+                        fontFamily: 'Poppins-SemiBold',
+                      },
+                    ]}
+                  >
+                    GPay
+                  </Text>
+                </View>
+              )}
+              {isPhonePeInstalled && (
+                <View style={styles.intentContainer}>
+                  <Pressable
+                    style={[
+                      styles.intentIconBorder,
+                      selectedIntent === 'PhonePe' && {
+                        borderColor: checkoutDetails.brandColor,
+                        borderWidth: 2,
+                      },
+                    ]}
+                    onPress={() => {
+                      setUpiCollectVisible(false);
+                      setUpiCollectError(false);
+                      setSelectedIntent('PhonePe');
+                      setDefaultStateOfSavedUpiArray();
+                    }}
+                  >
+                    <Image
+                      source={require('../../assets/images/phonepe-icon.png')}
+                      style={{ height: 30, width: 30 }}
+                    />
+                  </Pressable>
+
+                  <Text
+                    style={[
+                      styles.intentTitle,
+                      selectedIntent === 'PhonePe' && {
+                        color: checkoutDetails.brandColor,
+                        fontFamily: 'Poppins-SemiBold',
+                      },
+                    ]}
+                  >
+                    PhonePe
+                  </Text>
+                </View>
+              )}
+              {isPaytmInstalled && (
+                <View style={styles.intentContainer}>
+                  <Pressable
+                    style={[
+                      styles.intentIconBorder,
+                      selectedIntent === 'PayTm' && {
+                        borderColor: checkoutDetails.brandColor,
+                        borderWidth: 2,
+                      },
+                    ]}
+                    onPress={() => {
+                      setUpiCollectVisible(false);
+                      setUpiCollectError(false);
+                      setSelectedIntent('PayTm');
+                      setDefaultStateOfSavedUpiArray();
+                    }}
+                  >
+                    <Image
+                      source={require('../../assets/images/paytm-icon.png')}
+                      style={{ height: 28, width: 44 }}
+                    />
+                  </Pressable>
+                  <Text
+                    style={[
+                      styles.intentTitle,
+                      selectedIntent === 'PayTm' && {
+                        color: checkoutDetails.brandColor,
+                        fontFamily: 'Poppins-SemiBold',
+                      },
+                    ]}
+                  >
+                    PayTm
+                  </Text>
+                </View>
+              )}
+              <View style={styles.intentContainer}>
+                <Pressable
+                  style={styles.intentIconBorder}
+                  onPress={() => {
+                    setUpiCollectVisible(false);
+                    setUpiCollectError(false);
+                    setSelectedIntent('');
+                    setDefaultStateOfSavedUpiArray();
+                    handleUpiPayment('');
+                  }}
+                >
+                  <Image
+                    source={require('../../assets/images/other-intent-icon.png')}
+                    style={styles.intentIcon}
+                  />
+                </Pressable>
+                <Text style={styles.intentTitle}>Others</Text>
+              </View>
+            </View>
+
+            {selectedIntent !== null && selectedIntent !== '' && (
+              <Pressable
+                style={[
+                  styles.buttonContainer,
+                  { backgroundColor: checkoutDetails.brandColor },
+                ]}
+                onPress={() => handleUpiPayment(selectedIntent)}
+              >
+                <Text style={styles.buttonText}>
+                  Pay{' '}
+                  <Text style={styles.currencySymbol}>
+                    {checkoutDetails.currencySymbol}
+                  </Text>
+                  {checkoutDetails.amount} via {selectedIntent}
+                </Text>
+              </Pressable>
+            )}
+          </View>
+        )}
+
+        {isUpiCollectVisible && (
+          <View>
+            {upiCollectVisible ? (
+              <ImageBackground
+                source={require('../../assets/images/add_upi_id_background.png')} // Replace with your background image
+                resizeMode="cover"
+                style={{
+                  paddingBottom: 34,
+                  marginTop: isUpiIntentVisible ? 24 : 0,
+                }}
+              >
+                <Pressable
+                  style={styles.pressableCollectContainer}
+                  onPress={() => handleUpiChevronClick()}
+                >
+                  {/* Icon and Text Wrapper */}
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <Image
+                      source={require('../../assets/images/add_icon.png')}
+                      style={{
+                        height: 14,
+                        width: 14,
+                        tintColor: checkoutDetails.brandColor,
+                      }}
+                    />
+                    <Text
+                      style={{
+                        fontSize: 14,
+                        color: checkoutDetails.brandColor,
+                        paddingStart: 10,
+                        fontFamily: 'Poppins-SemiBold',
+                      }}
+                    >
+                      Add new UPI Id
+                    </Text>
+                  </View>
+
+                  <Animated.Image
+                    source={require('../../assets/images/chervon-down.png')}
+                    style={{
+                      alignSelf: 'center',
+                      height: 6,
+                      width: 14,
+                      transform: [
+                        {
+                          rotate: upiCollectVisible ? '180deg' : '0deg',
+                        },
+                      ],
+                    }}
+                  />
+                </Pressable>
+              </ImageBackground>
+            ) : (
+              <View style={{ paddingBottom: isUpiCollectVisible ? 16 : 0 }}>
+                {isUpiIntentVisible && (
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      height: 1,
+                      backgroundColor: '#F1F1F1',
+                      marginTop: 20,
+                    }}
+                  />
+                )}
+                <Pressable
+                  style={styles.pressableCollectContainer}
+                  onPress={() => handleUpiChevronClick()}
+                >
+                  {/* Icon and Text Wrapper */}
+                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+                    <Image
+                      source={require('../../assets/images/add_icon.png')}
+                      style={{
+                        height: 14,
+                        width: 14,
+                        tintColor: checkoutDetails.brandColor,
+                      }}
+                    />
+                    <Text
+                      style={{
+                        fontSize: 14,
+                        color: checkoutDetails.brandColor,
+                        paddingStart: 10,
+                        fontFamily: 'Poppins-SemiBold',
+                      }}
+                    >
+                      Add new UPI Id
+                    </Text>
+                  </View>
+
+                  <Animated.Image
+                    source={require('../../assets/images/chervon-down.png')}
+                    style={{
+                      alignSelf: 'center',
+                      height: 6,
+                      width: 14,
+                      transform: [
+                        {
+                          rotate: upiCollectVisible ? '180deg' : '0deg',
+                        },
+                      ],
+                    }}
+                  />
+                </Pressable>
+              </View>
+            )}
+          </View>
+        )}
+
+        {upiCollectVisible && (
+          <View style={{ paddingBottom: isUpiCollectVisible ? 16 : 0 }}>
+            <TextInput
+              mode="outlined"
+              label={
+                <Text
+                  style={[styles.labelText,{
+                    color: upiIdFocused ? '#2D2B32' : '#ADACB0',
+                  }]}
+                >
+                  Enter UPI Id
+                </Text>
+              }
+              value={upiCollectTextInput}
+              onChangeText={(it) => {
+                handleTextChange(it);
+              }}
+              theme={{
+                colors: {
+                  primary: '#2D2B32',
+                  outline: '#E6E6E6',
+                },
+              }}
+              style={styles.textInput}
+              error={upiCollectError}
+              right={
+                upiCollectError ? (
+                  <TextInput.Icon
+                    icon={() => (
+                      <Image
+                        source={require('../../assets/images/ic_upi_error.png')}
+                        style={styles.errorIcon}
+                      />
+                    )}
+                  />
+                ) : null
+              }
+              outlineStyle={{
+                borderRadius: 8, // Add this
+                borderWidth: 1.5,
+              }}
+              onFocus={() => setUpiIdFocused(true)}
+              onBlur={() => setUpiIdFocused(false)}
+            />
+            {upiCollectError && (
+              <Text
+                style={styles.errorText}
+              >
+                Please enter a valid UPI Id
+              </Text>
+            )}
+            {upiCollectValid ? (
+              <Pressable
+                style={[
+                  styles.buttonContainer,
+                  { backgroundColor: checkoutDetails.brandColor },
+                ]}
+                onPress={() => {
+                  if (upiCollectValid) {
+                    handleCollectPayment(upiCollectTextInput, '', 'Upi');
+                  } else {
+                    setUpiCollectError(true);
+                  }
+                }}
+              >
+                <Text style={styles.buttonText}>
+                  Verify & Pay{' '}
+                  <Text style={styles.currencySymbol}>
+                    {checkoutDetails.currencySymbol}
+                  </Text>
+                  {checkoutDetails.amount}
+                </Text>
+              </Pressable>
+            ) : (
+              <Pressable
+                style={[styles.buttonContainer, { backgroundColor: '#E6E6E6' }]}
+              >
+                <Text style={[styles.buttonText, { color: '#ADACB0' }]}>
+                  Verify & Pay{' '}
+                  <Text style={[styles.currencySymbol, { color: '#ADACB0' }]}>
+                    {checkoutDetails.currencySymbol}
+                  </Text>
+                  {checkoutDetails.amount}
+                </Text>
+              </Pressable>
+            )}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default UpiScreen;