boxpay-checkout-reactnative-sdk 1.0.11-beta → 1.0.11-beta3

package/lib/typescript/src/styles/screens/walletScreenStyles.d.ts

@@ -47,14 +47,13 @@ declare const styles: {
     };
     bottomContainer: {
         justifyContent: "center";
-        alignItems: "flex-end";
+        alignItems: "center";
         backgroundColor: string;
         flexDirection: "row";
     };
     bottomText: {
         fontSize: number;
         color: string;
-        marginBottom: number;
     };
     bottomImage: {
         height: number;

package/lib/typescript/src/styles/screens/walletScreenStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"walletScreenStyles.d.ts","sourceRoot":"","sources":["../../../../../src/styles/screens/walletScreenStyles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2FV,CAAA;AAEF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"walletScreenStyles.d.ts","sourceRoot":"","sources":["../../../../../src/styles/screens/walletScreenStyles.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FV,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/lib/typescript/src/utility.d.ts

@@ -56,4 +56,6 @@ export declare function extractNames(fullName: string): {
 export declare const formatTime: (timeRemaining: number) => string;
 export declare const formatExpiry: (input: string) => string;
 export declare const getPhoneNumberCodeAndCountryName: (countryCodeRef: string) => CountryDetails | any;
+export declare const formatDate: (dateStr: string) => string;
+export declare const isEmpty: (value: unknown) => boolean;
 //# sourceMappingURL=utility.d.ts.map

package/lib/typescript/src/utility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["../../../src/utility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMhG,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,aAAa,EAAE,EACrB,UAAU,EAAE,MAAM,GACjB,YAAY,EAAE,CAehB;AAGD,wBAAgB,gBAAgB;;;;;;EAQ/B;AAED,wBAAgB,cAAc;;;;;;;;;;;EAa7B;AAED,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;EA8BhC;AAED,eAAO,MAAQ,MAAM,UAAE,KAAK,QAA6B,CAAC;AAE1D,eAAO,MAAM,YAAY,GAAI,gBAAgB,MAAM;;;;CA0BlD,CAAC;AAMF,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG/C;AAED,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAavE;AAGD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG9C;AAED,wBAAgB,aAAa,CAAC,eAAe,EAAG,eAAe,GAAI,MAAM,CAMxE;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAcA;AAED,eAAO,MAAM,UAAU,GAAI,eAAgB,MAAM,WAIhD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,MAgB5C,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAAI,gBAAiB,MAAM,KAAI,cAAc,GAAG,GAK5F,CAAA"}
+{"version":3,"file":"utility.d.ts","sourceRoot":"","sources":["../../../src/utility.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMhG,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,aAAa,EAAE,EACrB,UAAU,EAAE,MAAM,GACjB,YAAY,EAAE,CAehB;AAGD,wBAAgB,gBAAgB;;;;;;EAQ/B;AAED,wBAAgB,cAAc;;;;;;;;;;;EAa7B;AAED,wBAAgB,iBAAiB;;;;;;;;;;;;;;;;;;;EA8BhC;AAED,eAAO,MAAQ,MAAM,UAAE,KAAK,QAA6B,CAAC;AAE1D,eAAO,MAAM,YAAY,GAAI,gBAAgB,MAAM;;;;CA0BlD,CAAC;AAMF,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG/C;AAED,wBAAgB,gCAAgC,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAavE;AAGD,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG9C;AAED,wBAAgB,aAAa,CAAC,eAAe,EAAG,eAAe,GAAI,MAAM,CAMxE;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAcA;AAED,eAAO,MAAM,UAAU,GAAI,eAAgB,MAAM,WAIhD,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,MAgB5C,CAAC;AAEF,eAAO,MAAM,gCAAgC,GAAI,gBAAiB,MAAM,KAAI,cAAc,GAAG,GAK5F,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,WAWzC,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,OAAO,KAAG,OAQxC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxpay-checkout-reactnative-sdk",
-  "version": "1.0.11-beta",
+  "version": "1.0.11-beta3",
   "description": "Boxpay Payment Gateway",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -145,7 +145,7 @@
   "create-react-native-library": {
     "languages": "js",
     "type": "library",
-    "version": "1.0.11-beta"
+    "version": "1.0.11-beta3"
   },
   "dependencies": {
     "axios": "^1.11.0",

package/src/components/checkboxContainer.tsx

@@ -52,7 +52,7 @@ const styles = StyleSheet.create({
     borderRadius: 3,
     justifyContent: 'center',
     alignItems: 'center',
-    marginLeft: 8,
+    marginLeft: 16,
   },
   checkmark: {
     color: '#fff',

package/src/components/header.tsx

@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
     color: '#363840'
   },
   headerDesc: {
-    marginTop: -4,
+    paddingTop: 2,
     fontSize: 12,
     color: '#4F4D55'
   },

package/src/components/paymentSelector.tsx

@@ -138,7 +138,7 @@ const PaymentSelector = ({
           }}
         >
           <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
-            Proceed to Pay{' '}
+            Pay{' '}
             <Text
               style={{
                 fontFamily: 'Inter-SemiBold',

package/src/components/paymentSuccess.tsx

@@ -256,11 +256,9 @@ const styles = StyleSheet.create({
     fontSize: 16,
   },
   dashedLine: {
-    borderBottomWidth: 2, // Thickness of the line
-    borderBottomColor: '#E6E6E6', // Color of the line
-    borderStyle: 'dashed', // Makes it dashed
+    backgroundColor: '#E6E6E6', // Color of the line
     width: '100%', // Full width
-    marginVertical: 10, // Some spacing
-    marginTop: 16,
+    marginVertical: 10,
+    height : 2
   },
 });

package/src/components/savedCardComponent.tsx

@@ -201,7 +201,7 @@ const SavedCardRow = ({
           }}
         >
           <Text style={[styles.buttonText, {fontFamily: checkoutDetails.fontFamily.semiBold,}]}>
-            Proceed to Pay{' '}
+            Pay{' '}
             <Text
               style={{
                 fontFamily: 'Inter-SemiBold',

package/src/components/subscriptionRow.tsx

@@ -0,0 +1,19 @@
+import { View, Text } from "react-native"
+import type { CheckoutDetails } from "../interface"
+
+interface SubscriptionArgs{
+    checkoutDetails : CheckoutDetails, 
+    heading: string, 
+    value : string
+}
+
+const SubscriptionRow = ({checkoutDetails, heading, value} : SubscriptionArgs) => {
+    return (
+        <View style={{ flexDirection : 'row', justifyContent : 'space-between', marginHorizontal : 16, paddingTop : 4}}>
+            <Text style={{fontFamily :checkoutDetails.fontFamily.regular, color : '#2D2B32'}}>{heading}</Text>
+            <Text style={{fontFamily :checkoutDetails.fontFamily.semiBold, color : '#2D2B32'}}>{value}</Text>
+        </View>
+    )
+}
+
+export default SubscriptionRow

package/src/interface.ts

@@ -13,6 +13,7 @@ export enum ConfigurationOptions {
 export enum UIConfigurationOptions {
   FontFamily = 'FONT_FAMILY',
   CTABorderRadius = 'CTA_BORDER_RADIUS',
+  TextInputFields = 'TEXT_INPUT_FIELDS'
 }
 
 export interface FontConfiguration {
@@ -23,10 +24,16 @@ export interface FontConfiguration {
   extraBold?: string
 }
 
+export interface TextInputFields {
+  focusedBorderColor? : string;
+  borderColor? : string
+}
+
 // 👇 Each key has its own strict type
 export interface UIConfiguration {
   [UIConfigurationOptions.FontFamily]?: FontConfiguration;
   [UIConfigurationOptions.CTABorderRadius]?: number;
+  [UIConfigurationOptions.TextInputFields]?: TextInputFields
 }
 
 export interface BoxpayCheckoutProps {
@@ -46,6 +53,8 @@ export interface CheckoutDetails {
   ctaBorderRadius : number,
   buttonColor: string;
   buttonTextColor : string;
+  textInputFieldFocusedOutlineColor : string;
+  textInputFieldUnFocusedOutlineColor : string;
   headerColor : string;
   headerTextColor : string;
   env: string;
@@ -78,7 +87,8 @@ export interface CheckoutDetails {
   isUPIOtmQRMethodEnabled : boolean,
   isOrderItemDetailsVisible : boolean,
   isSICheckboxVisible : boolean,
-  isSubscriptionCheckout : boolean
+  isSubscriptionCheckout : boolean,
+  subscriptionDetails : {label:string,value : string | null}[] | null
 }
 
 interface AnalyticsResponse {
@@ -532,8 +542,20 @@ interface OrderDetails {
   items : OrderItem[] | null
 }
 
-interface SubscriptionDetails {
+export interface SubscriptionDetails {
   type : string,
+  billingCycle : {
+    billingTimeUnit : string,
+    count : number,
+    billingCycleValue : string
+  },
+  billingDuration : {
+    type : string,
+    noOfCycles : number
+  },
+  nextBillingDateLocale : string,
+  expiryDateLocale : string,
+  recurringExpiryDateLocale : string,
   maxAmountLocaleFull : string
 }
 

package/src/screens/addressScreen.tsx

@@ -20,6 +20,7 @@ import {
 } from '../sharedContext/userdataHandler';
 import styles from '../styles/screens/addressScreenStyles.';
 import { extractNames, getPhoneNumberCodeAndCountryName } from '../utility';
+import { getTextInputTheme } from '../sharedContext/getTextInputTheme';
 
 type AddressScreenRouteProp = RouteProp<CheckoutStackParamList, 'AddressScreen'>;
 type AddressScreenNavigationProp = NavigationProp<CheckoutStackParamList, 'AddressScreen'>;
@@ -358,12 +359,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
             }
             value={countryTextField || ''}
             onChangeText={(_) => {}}
-            theme={{
-              colors: {
-                primary: '#2D2B32',
-                outline: '#E6E6E6',
-              },
-            }}
+            theme={getTextInputTheme()}
             style={[
               styles.textInput,
               { marginTop: 28, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
@@ -411,12 +407,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                 onChangeText={(it) => {
                   onChangeFullName(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
                 style={[
                   styles.textInput,
                   { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
@@ -465,12 +456,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                   }
                   value={selectedPhoneCode || ''}
                   onChangeText={(_) => {}}
-                  theme={{
-                    colors: {
-                      primary: '#2D2B32',
-                      outline: '#E6E6E6',
-                    },
-                  }}
+                  theme={getTextInputTheme()}
                   style={[
                     styles.textInput,
                     { width: 100, marginEnd: 8, fontFamily: checkoutDetails.fontFamily.regular,},
@@ -514,12 +500,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                   onChangeText={(it) => {
                     onChangePhoneNumber(it)
                   }}
-                  theme={{
-                    colors: {
-                      primary: '#2D2B32',
-                      outline: '#E6E6E6',
-                    },
-                  }}
+                  theme={getTextInputTheme()}
                   style={[styles.textInput, { flex: 1 , fontFamily: checkoutDetails.fontFamily.regular,}]}
                   error={isPhoneNumberValid == false}
                   outlineStyle={{
@@ -560,12 +541,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                 onChangeText={(it) => {
                   onChangeEmailId(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
                 style={[
                   styles.textInput,
                   { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
@@ -617,12 +593,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                     onChangeText={(it) => {
                       onChangePostalCode(it);
                     }}
-                    theme={{
-                      colors: {
-                        primary: '#2D2B32',
-                        outline: '#E6E6E6',
-                      },
-                    }}
+                    theme={getTextInputTheme()}
                     style={[styles.textInput, {fontFamily: checkoutDetails.fontFamily.regular,}]}
                     error={isPinValid == false}
                     outlineStyle={{
@@ -662,12 +633,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                     onChangeText={(it) => {
                       onChangeCity(it);
                     }}
-                    theme={{
-                      colors: {
-                        primary: '#2D2B32',
-                        outline: '#E6E6E6',
-                      },
-                    }}
+                    theme={getTextInputTheme()}
                     style={[styles.textInput, { marginStart: 8, fontFamily: checkoutDetails.fontFamily.regular, }]}
                     error={isCityValid == false}
                     outlineStyle={{
@@ -706,12 +672,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                 onChangeText={(it) => {
                   onChangeState(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
                 style={[
                   styles.textInput,
                   { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
@@ -753,12 +714,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                 onChangeText={(it) => {
                   onChangeMainAddress(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
                 style={[
                   styles.textInput,
                   { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },
@@ -800,12 +756,7 @@ const AddressScreen = ({ route, navigation }: Props) => {
                 onChangeText={(it) => {
                   setSecondaryAddressTextField(it);
                 }}
-                theme={{
-                  colors: {
-                    primary: '#2D2B32',
-                    outline: '#E6E6E6',
-                  },
-                }}
+                theme={getTextInputTheme()}
                 style={[
                   styles.textInput,
                   { marginTop: 20, marginHorizontal: 16, fontFamily: checkoutDetails.fontFamily.regular, },