boxpay-checkout-reactnative-sdk 1.0.16 → 1.0.17-beta1

package/src/components/orderDetails.tsx

@@ -1,503 +0,0 @@
-import { View, Text, Image, Pressable, ScrollView } from 'react-native';
-import { useState } from 'react';
-import { SvgUri } from 'react-native-svg';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-
-export interface OrderDetailsProps {
-  totalAmount: string;
-  itemsArray: ItemsProp[];
-  subTotalAmount: string;
-  shippingAmount: string;
-  taxAmount: string;
-  surchargeDetails : SurchargeProp[],
-  selectedPaymentMethod : string
-}
-
-export interface ItemsProp {
-  imageUrl: string;
-  imageTitle: string;
-  imageOty: number;
-  imageAmount: string;
-}
-
-export interface SurchargeProp {
-  title : string, 
-  amount : number,
-  applicable : string
-}
-
-const OrderDetails = ({
-  totalAmount,
-  itemsArray,
-  subTotalAmount,
-  shippingAmount,
-  taxAmount,
-  surchargeDetails,
-  selectedPaymentMethod
-}: OrderDetailsProps) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const { checkoutDetails } = checkoutDetailsHandler;
-  const itemHeight = 70; // Approximate height of each row
-  const maxVisibleItems = 3;
-  const scrollHeight =
-    Math.min(itemsArray.length, maxVisibleItems) * itemHeight;
-
-  const MyImage = ({ uri }: { uri: string }) => {
-    const isSvg = uri?.endsWith('.svg');
-
-    return isSvg ? (
-      <View
-        style={{
-          width: 44,
-          height: 44,
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <SvgUri
-          uri={uri}
-          width={100} // Keep original size
-          height={100}
-          style={{ transform: [{ scale: 0.4 }] }}
-        />
-      </View>
-    ) : (
-      <Image
-        source={{ uri }}
-        style={{ width: 44, height: 44 }}
-        resizeMode="contain"
-      />
-    );
-  };
-
-  return (
-    <View>
-      {isExpanded ? (
-        <View
-          style={{
-            borderColor: '#F1F1F1',
-            borderWidth: 1,
-            marginHorizontal: 16,
-            marginVertical: 8,
-            paddingVertical: 16,
-            backgroundColor: 'white',
-            borderRadius: 12,
-          }}
-        >
-          <Pressable onPress={() => setIsExpanded(false)}>
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                paddingHorizontal: 12,
-              }}
-            >
-              <Text
-                style={{
-                  fontSize: 14,
-                  color: '#363840',
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                }}
-              >
-                Price Details
-              </Text>
-              <Image
-                source={require('../../assets/images/chervon-down.png')}
-                style={{
-                  height: 6,
-                  width: 14,
-                  marginHorizontal: 6, // Space between price and arrow
-                  alignSelf: 'center',
-                  transform: [
-                    {
-                      rotate: '180deg',
-                    },
-                  ],
-                }}
-              />
-            </View>
-          </Pressable>
-          <View
-            style={{ height: scrollHeight, overflow: 'hidden', marginTop: 12 }}
-          >
-            <ScrollView
-              nestedScrollEnabled={true}
-              showsVerticalScrollIndicator={true}
-              style={{ paddingHorizontal: 12 }}
-            >
-              {itemsArray.map((item, index) => (
-                <View
-                  key={index}
-                  style={{
-                    flexDirection: 'row',
-                    marginBottom: 8,
-                    alignItems: 'flex-start',
-                  }}
-                >
-                  {/* Image */}
-                  {item.imageUrl !== '' && (
-                    <View
-                      style={{
-                        borderColor: '#DCDEE3',
-                        borderWidth: 1,
-                        borderRadius: 8,
-                        width: 54,
-                        height: 54,
-                        padding: 4,
-                      }}
-                    >
-                      <MyImage uri={item.imageUrl} />
-                    </View>
-                  )}
-
-                  {/* Title & Quantity - Stays attached to the image */}
-                  <View
-                    style={{ flexGrow: 1, flexShrink: 1, paddingHorizontal: 8 }}
-                  >
-                    <Text
-                      style={{
-                        fontFamily: checkoutDetails.fontFamily.regular,
-                        fontSize: 12,
-                        color: '#2D2B32',
-                      }}
-                      numberOfLines={2}
-                      ellipsizeMode={'tail'}
-                    >
-                      {item.imageTitle}
-                    </Text>
-                    <Text
-                      style={{
-                        fontFamily: checkoutDetails.fontFamily.semiBold,
-                        fontSize: 12,
-                        color: '#2D2B32',
-                      }}
-                    >
-                      Qty: {item.imageOty}
-                    </Text>
-                  </View>
-
-                  {/* Amount - Stays at the right */}
-                  <View style={{ alignSelf: 'flex-start' }}>
-                    <Text
-                      style={{
-                        fontFamily: checkoutDetails.fontFamily.regular,
-                        fontSize: 12,
-                        color: '#2D2B32',
-                        textAlign: 'right',
-                      }}
-                    >
-                      <Text
-                        style={{
-                          fontFamily: 'Inter-Regular',
-                          fontSize: 12,
-                          color: '#2D2B32',
-                        }}
-                      >
-                        {' '}
-                        {checkoutDetails.currencySymbol}
-                      </Text>
-                      {item.imageAmount}
-                    </Text>
-                  </View>
-                </View>
-              ))}
-            </ScrollView>
-          </View>
-
-          {(subTotalAmount !== '' ||
-            taxAmount !== '' ||
-            shippingAmount !== '') && (
-            <View
-              style={{
-                borderBottomWidth: 1.5, // Thickness of the line
-                borderBottomColor: '#E6E6E6', // Color of the line
-                borderStyle: 'dashed', // Makes it dashed
-                width: '100%', // Full width
-                marginVertical: 10,
-                marginTop: 4,
-              }}
-            />
-          )}
-
-          {subTotalAmount !== '' && (
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: 8,
-                paddingHorizontal: 12,
-              }}
-            >
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.regular,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                Subtotal
-              </Text>
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                <Text
-                  style={{
-                    fontFamily: 'Inter-SemiBold',
-                    fontSize: 14,
-                    color: '#2D2B32',
-                  }}
-                >
-                  {' '}
-                  {checkoutDetails.currencySymbol}
-                </Text>
-                {subTotalAmount}
-              </Text>
-            </View>
-          )}
-          {taxAmount !== '' && (
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: 8,
-                paddingHorizontal: 12,
-              }}
-            >
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.regular,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                Tax
-              </Text>
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                <Text
-                  style={{
-                    fontFamily: 'Inter-SemiBold',
-                    fontSize: 14,
-                    color: '#2D2B32',
-                  }}
-                >
-                  {' '}
-                  {checkoutDetails.currencySymbol}
-                </Text>
-                {taxAmount}
-              </Text>
-            </View>
-          )}
-          {shippingAmount !== '' && (
-            <View
-              style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: 8,
-                paddingHorizontal: 12,
-              }}
-            >
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.regular,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                Shipping Amount
-              </Text>
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                <Text
-                  style={{
-                    fontFamily: 'Inter-SemiBold',
-                    fontSize: 14,
-                    color: '#2D2B32',
-                  }}
-                >
-                  {checkoutDetails.currencySymbol}
-                </Text>
-                {shippingAmount}
-              </Text>
-            </View>
-          )}
-          {surchargeDetails.length != 0 && (
-            surchargeDetails
-            ?.filter(item => {
-              const applicable = item?.applicable?.toLowerCase?.();
-          
-              return (
-                !applicable || // handles "", null, undefined
-                applicable === selectedPaymentMethod?.toLowerCase?.()
-              );
-            })
-            .map((item, index)  => (
-              <View
-              key={index}
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              marginBottom: 8,
-              paddingHorizontal: 12,
-            }}
-            >
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.regular,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                {item.title}
-              </Text>
-              <Text
-                style={{
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                  fontSize: 14,
-                  color: '#2D2B32',
-                }}
-              >
-                <Text
-                  style={{
-                    fontFamily: 'Inter-SemiBold',
-                    fontSize: 14,
-                    color: '#2D2B32',
-                  }}
-                >
-                  {checkoutDetails.currencySymbol}
-                </Text>
-                {item.amount.toLocaleString()}
-              </Text>
-            </View>
-            ))
-          )}
-          <View
-            style={{
-              flexDirection: 'row',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              backgroundColor: '#F1F1F1',
-              paddingHorizontal: 8,
-              paddingVertical: 12,
-              borderRadius: 8,
-              marginHorizontal: 12,
-            }}
-          >
-            <Text
-              style={{
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-                fontSize: 16,
-                color: '#1D1C20',
-              }}
-            >
-              Total
-            </Text>
-            <Text
-              style={{
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-                fontSize: 16,
-                color: '#1D1C20',
-              }}
-            >
-              <Text
-                style={{
-                  fontFamily: 'Inter-SemiBold',
-                  fontSize: 16,
-                  color: '#1D1C20',
-                }}
-              >
-                {' '}
-                {checkoutDetails.currencySymbol}
-              </Text>
-              {totalAmount}
-            </Text>
-          </View>
-        </View>
-      ) : (
-        <Pressable onPress={() => setIsExpanded(true)}>
-          <View
-            style={{
-              borderColor: '#F1F1F1',
-              borderWidth: 1,
-              marginHorizontal: 16,
-              marginVertical: 8,
-              paddingVertical: 16,
-              paddingHorizontal: 12,
-              backgroundColor: 'white',
-              flexDirection: 'row',
-              borderRadius: 12,
-              justifyContent: 'space-between',
-              alignItems: 'center', // Ensures vertical alignment
-            }}
-          >
-            {/* Price Details Text */}
-            <Text
-              style={{
-                fontSize: 14,
-                color: '#363840',
-                fontFamily: checkoutDetails.fontFamily.semiBold,
-              }}
-            >
-              Price Details
-            </Text>
-
-            {/* Wrap Price and Arrow in a Row */}
-            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-              <Text
-                style={{
-                  fontSize: 14,
-                  color: '#363840',
-                  fontFamily: checkoutDetails.fontFamily.semiBold,
-                }}
-              >
-                <Text
-                  style={{
-                    fontSize: 14,
-                    color: '#363840',
-                    fontFamily: 'Inter-SemiBold',
-                  }}
-                >
-                  {checkoutDetails.currencySymbol}
-                </Text>
-                {totalAmount}
-              </Text>
-
-              {/* Arrow Icon */}
-
-              <Image
-                source={require('../../assets/images/chervon-down.png')}
-                style={{
-                  height: 6,
-                  width: 14,
-                  marginHorizontal: 6, // Space between price and arrow
-                  alignSelf: 'center',
-                }}
-              />
-            </View>
-          </View>
-        </Pressable>
-      )}
-    </View>
-  );
-};
-
-export default OrderDetails;

package/src/components/paymentFailed.tsx

@@ -1,103 +0,0 @@
-import { View, Text, StyleSheet, Pressable } from 'react-native';
-import React, { useEffect } from 'react';
-import Modal from 'react-native-modal';
-import LottieView from 'lottie-react-native';
-import { checkoutDetailsHandler } from '../sharedContext/checkoutDetailsHandler';
-import callUIAnalytics from '../postRequest/callUIAnalytics';
-import { AnalyticsEvents } from '../interface';
-
-interface PaymentFailedProps {
-  onClick: () => void;
-  onExit: () => void;
-  errorMessage: string;
-}
-
-const PaymentFailed: React.FC<PaymentFailedProps> = ({
-  onClick,
-  errorMessage,
-  onExit,
-}) => {
-  const { checkoutDetails } = checkoutDetailsHandler;
-  useEffect(() => {
-    if(!checkoutDetails.isFailedScreenVisible) {
-      callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Payment Failed Screen skipped because merchant does not require", "")
-      onExit()
-    }
-  },[])
-  return (
-    <View>
-      <Modal isVisible={true} style={styles.modal}>
-        <View style={styles.sheet}>
-          <LottieView
-            source={require('../../assets/animations/payment_failed.json')}
-            autoPlay
-            loop={false}
-            style={{ width: 90, height: 90, alignSelf: 'center' }}
-          />
-          <Text style={[styles.successfulHeading, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>Payment Failed</Text>
-          <Text
-            style={{
-              fontSize: 14,
-              fontFamily: checkoutDetails.fontFamily.regular,
-              color: '#000000D9',
-              textAlign: 'center',
-              alignSelf: 'center',
-              paddingTop: 8,
-              paddingBottom: 16,
-              lineHeight: 20,
-            }}
-          >
-            {errorMessage}
-          </Text>
-          <Pressable
-            style={[
-              styles.buttonContainer,
-              { backgroundColor: checkoutDetails.buttonColor, borderRadius: checkoutDetails.ctaBorderRadius, },
-            ]}
-            onPress={()=> {
-              callUIAnalytics(AnalyticsEvents.PAYMENT_RESULT_SCREEN_DISPLAYED, "Payment Failed Screen button clicked", errorMessage)
-              onClick()
-            }}
-          >
-            <Text style={styles.buttonText}>Retry Payment</Text>
-          </Pressable>
-          {/* <Pressable style={[styles.buttonContainer, {backgroundColor:'white', borderColor:'#1CA672', borderWidth:1}]} onPress={onClick}>
-                        <Text style={[styles.buttonText, {color:'#1CA672'}]}>Return to Payment Options</Text>
-                    </Pressable> */}
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-export default PaymentFailed;
-
-const styles = StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0,
-  },
-  sheet: {
-    backgroundColor: 'white',
-    padding: 20,
-    borderTopLeftRadius: 20,
-    borderTopRightRadius: 20,
-  },
-  successfulHeading: {
-    color: '#E84142',
-    fontSize: 20,
-    alignSelf: 'center',
-    paddingTop: 8,
-  },
-  buttonContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 12,
-    backgroundColor: '#1CA672',
-  },
-  buttonText: {
-    color: 'white',
-    fontSize: 16,
-    paddingVertical: 12,
-  },
-});