@zezosoft/react-native-zezopay 1.0.2 → 1.0.3

package/src/ZezoPay/components/VoucherBox.tsx

@@ -5,11 +5,11 @@ import {
   TextInput,
   StyleSheet,
   TouchableOpacity,
+  ActivityIndicator,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 
-// Centralized color definitions
 const COLORS = {
   primaryOrange: '#FF7847',
   secondaryOrange: '#c24c21',
@@ -20,58 +20,92 @@ const COLORS = {
 };
 
 interface VoucherBoxProps {
-  voucher: string;
-  setVoucher: (v: string) => void;
-  onApply?: () => void;
+  onApply?: ({ voucherCode }: { voucherCode: string }) => void;
+  loading?: boolean;
+  couponApplied?: boolean;
+  onRemove?: () => void;
 }
 
 const VoucherBox: React.FC<VoucherBoxProps> = ({
-  voucher,
-  setVoucher,
   onApply,
+  loading = false,
+  couponApplied = false,
+  onRemove,
 }) => {
+  const [voucher, setVoucher] = React.useState('');
+
   return (
-    <View>
+    <View style={styles.container}>
       <Text style={styles.title}>Voucher</Text>
-      <View style={styles.inputWrapper}>
-        <TextInput
-          placeholder={'Enter code...'}
-          style={styles.input}
-          value={voucher}
-          onChangeText={setVoucher}
-          accessibilityLabel="Voucher code input"
-        />
-        <TouchableOpacity
-          style={styles.button}
-          onPress={onApply}
-          disabled={!voucher}
-          activeOpacity={0.8}
-          accessibilityRole="button"
-          accessibilityLabel="Apply voucher code"
-        >
-          <LinearGradient
-            colors={
-              voucher
-                ? [COLORS.primaryOrange, COLORS.secondaryOrange]
-                : [COLORS.disabledOrangeStart, COLORS.disabledOrangeEnd]
-            }
-            style={styles.gradient}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
+
+      {couponApplied ? (
+        // Display applied voucher with remove button
+        <View style={styles.appliedWrapper}>
+          <Text style={styles.appliedText}>{voucher}</Text>
+          <TouchableOpacity
+            style={styles.removeButton}
+            onPress={() => {
+              setVoucher('');
+              onRemove?.();
+            }}
+            accessibilityRole="button"
+            accessibilityLabel="Remove voucher"
+          >
+            <Text style={styles.removeText}>Remove</Text>
+          </TouchableOpacity>
+        </View>
+      ) : (
+        // Input for new voucher
+        <View style={styles.inputWrapper}>
+          <TextInput
+            placeholder="Enter code..."
+            style={styles.input}
+            value={voucher}
+            onChangeText={(text) => setVoucher(text.toUpperCase())}
+            autoCapitalize="characters"
+            editable={!loading}
+            accessibilityLabel="Voucher code input"
+          />
+          <TouchableOpacity
+            style={styles.button}
+            onPress={() => onApply?.({ voucherCode: voucher })}
+            disabled={!voucher || loading}
+            activeOpacity={0.8}
+            accessibilityRole="button"
+            accessibilityLabel="Apply voucher code"
           >
-            <Text
-              style={[styles.buttonText, !voucher && styles.disabledButtonText]}
+            <LinearGradient
+              colors={
+                voucher
+                  ? [COLORS.primaryOrange, COLORS.secondaryOrange]
+                  : [COLORS.disabledOrangeStart, COLORS.disabledOrangeEnd]
+              }
+              style={styles.gradient}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
             >
-              Apply
-            </Text>
-          </LinearGradient>
-        </TouchableOpacity>
-      </View>
+              {loading ? (
+                <ActivityIndicator size="small" color={COLORS.white} />
+              ) : (
+                <Text
+                  style={[
+                    styles.buttonText,
+                    !voucher && styles.disabledButtonText,
+                  ]}
+                >
+                  Apply
+                </Text>
+              )}
+            </LinearGradient>
+          </TouchableOpacity>
+        </View>
+      )}
     </View>
   );
 };
 
 const styles = StyleSheet.create({
+  container: { marginBottom: verticalScale(12) },
   title: {
     fontSize: moderateScale(16),
     fontWeight: '700',
@@ -83,40 +117,33 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: COLORS.white,
     height: moderateScale(47),
-    minHeight: verticalScale(45),
-    maxHeight: verticalScale(50),
     borderRadius: scale(8),
     borderWidth: 1,
     borderColor: COLORS.primaryOrange,
     width: '100%',
-    shadowColor: COLORS.black,
-    shadowOffset: { width: 0, height: 2 },
     paddingVertical: verticalScale(2),
-    marginBottom: verticalScale(8),
+    overflow: 'hidden',
   },
   input: {
     flex: 1,
     height: '100%',
     fontSize: moderateScale(14),
     paddingHorizontal: scale(14),
-    paddingVertical: verticalScale(8),
     borderRadius: scale(12),
   },
   button: {
     minWidth: scale(80),
     height: moderateScale(45),
-    borderRadius: scale(10),
     overflow: 'hidden',
     justifyContent: 'center',
     alignItems: 'center',
-    marginRight: scale(3),
   },
   gradient: {
     width: '100%',
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: scale(10),
+    // borderRadius: scale(10),
   },
   buttonText: {
     color: COLORS.white,
@@ -124,9 +151,31 @@ const styles = StyleSheet.create({
     fontSize: moderateScale(15),
     textTransform: 'uppercase',
   },
-  disabledButtonText: {
-    color: COLORS.white,
-    opacity: 0.7,
+  disabledButtonText: { opacity: 0.7 },
+  appliedWrapper: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderColor: COLORS.primaryOrange,
+    borderWidth: 1,
+    backgroundColor: '#F3F4F6',
+    borderRadius: scale(8),
+    paddingHorizontal: scale(12),
+    paddingVertical: verticalScale(10),
+  },
+  appliedText: {
+    fontSize: moderateScale(14),
+    fontWeight: '600',
+    color: COLORS.black,
+  },
+  removeButton: {
+    paddingHorizontal: scale(5),
+    paddingVertical: verticalScale(4),
+  },
+  removeText: {
+    fontSize: moderateScale(14),
+    fontWeight: '700',
+    color: COLORS.primaryOrange,
   },
 });
 

package/src/ZezoPay/http/api-sdk.ts

@@ -0,0 +1,27 @@
+import PaymentService from './services/payments/payments';
+
+export interface IOptions {
+  publicKey: string;
+}
+
+export interface APIError {
+  type: string;
+  status?: number | string;
+  message: string;
+  path?: string;
+  location?: string;
+}
+
+export class ZezoPayClient {
+  payments: PaymentService;
+
+  /**
+   * Constructor for the ZezoPay class.
+   * @param options
+   */
+  constructor(options: IOptions) {
+    this.payments = new PaymentService(options);
+  }
+}
+
+export * from './services/payments/payments.types';

package/src/ZezoPay/http/services/baseService.ts

@@ -0,0 +1,37 @@
+import axios, {
+  type AxiosInstance,
+  type AxiosRequestConfig,
+  type AxiosResponse,
+} from 'axios';
+import type { APIError, IOptions } from '../api-sdk';
+import { formatAPIError } from '../utils/errorFormatter';
+
+class BaseService {
+  protected client: AxiosInstance;
+
+  constructor(options: IOptions) {
+    this.client = axios.create({
+      baseURL: 'https://payapi.zezo.in',
+      // baseURL: 'http://localhost:5501',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'x-public-key': String(options.publicKey) || '',
+      },
+    });
+  }
+
+  protected async request<T = any>(
+    config: AxiosRequestConfig
+  ): Promise<AxiosResponse<T>> {
+    try {
+      return await this.client.request<T>(config);
+    } catch (error) {
+      // 🔥 Always return consistent APIError format
+      const formattedError: APIError = formatAPIError(error);
+      throw formattedError;
+    }
+  }
+}
+
+export default BaseService;

package/src/ZezoPay/http/services/payments/payments.ts

@@ -0,0 +1,66 @@
+import type { AxiosResponse } from 'axios';
+import type {
+  ICheckoutPayload,
+  ICheckoutResult,
+  ICouponResponse,
+  IOptions,
+  PaymentProviderList,
+} from '../../api-sdk';
+import BaseService from '../baseService';
+
+class PaymentService extends BaseService {
+  constructor(options: IOptions) {
+    super(options);
+  }
+
+  /**
+   * Get available payment providers
+   */
+  async providers({
+    platform = 'web',
+  }: {
+    platform?: 'web' | 'ios' | 'android';
+  } = {}): Promise<AxiosResponse<PaymentProviderList>> {
+    return this.request<PaymentProviderList>({
+      method: 'GET',
+      url: '/api/v1/payments/ready',
+      headers: {
+        'x-platform': platform,
+      },
+    });
+  }
+
+  /**
+   * Create a checkout session
+   */
+  async checkout(
+    payload: ICheckoutPayload,
+    platform?: 'web' | 'ios' | 'android'
+  ): Promise<AxiosResponse<ICheckoutResult>> {
+    return this.request<ICheckoutResult>({
+      method: 'POST',
+      url: '/api/v1/payments/checkout',
+      data: payload,
+      headers: {
+        'x-platform': platform || 'web',
+      },
+    });
+  }
+  /**
+   * Verify a coupon
+   */
+  async verifyCoupon(payload: {
+    code: string;
+    userId: string;
+  }): Promise<AxiosResponse<ICouponResponse>> {
+    return this.request<ICouponResponse>({
+      method: 'POST',
+      url: `/api/v1/payments/apply-coupon/${payload.code}`,
+      data: {
+        userId: payload.userId,
+      },
+    });
+  }
+}
+
+export default PaymentService;

package/src/ZezoPay/http/services/payments/payments.types.ts

@@ -0,0 +1,120 @@
+/**
+ * Supported payment providers
+ */
+export type PaymentProvider =
+  | 'stripe'
+  | 'razorpay'
+  | 'phonepe'
+  | 'ccavenue'
+  | string;
+
+/**
+ * Payment provider info used in UI
+ */
+export interface IReadyPaymentProvider {
+  logo: string;
+  provider: PaymentProvider;
+}
+
+/**
+ * Basic user info attached to payments
+ */
+export interface UserInfo {
+  _id: string;
+  name: string;
+  email?: string;
+  phone?: string;
+}
+
+/**
+ * Extra metadata for payments
+ */
+export interface PaymentMeta {
+  isPaymentInitiatedEnabled?: boolean;
+  userInfo: UserInfo;
+  summary?: Record<string, any>;
+  [key: string]: any; // Allow flexible fields
+}
+
+/**
+ * Base checkout input shared across types
+ */
+export interface BaseCheckoutInput {
+  userId: string;
+  provider: PaymentProvider;
+  metadata: PaymentMeta;
+  currency?: string;
+  coupon_code?: string;
+}
+
+/**
+ * Checkout payload variations
+ */
+export type ICheckoutPayload =
+  | (BaseCheckoutInput & { type: 'normal'; price: number })
+  | (BaseCheckoutInput & { type: 'subscription'; subscriptionId: string })
+  | (BaseCheckoutInput & { type: 'digital-product'; digitalProductId: string });
+
+/**
+ * Checkout API response
+ */
+export interface ICheckoutResult {
+  status: boolean;
+  price: number;
+  currency:
+    | 'INR'
+    | 'USD'
+    | 'EUR'
+    | 'GBP'
+    | 'JPY'
+    | 'AUD'
+    | 'CAD'
+    | 'CNY'
+    | 'SGD'
+    | string;
+  provider: PaymentProvider;
+  real_price: number;
+  orderId: string;
+  publicKey: string;
+  extraData?: Record<string, any>;
+}
+
+/**
+ * Verification of payment status
+ */
+export interface IPaymentVerify {
+  _id: string;
+  userId: string;
+  orderId: string;
+  status: 'success' | 'failed' | 'pending';
+  meta_data: PaymentMeta;
+  [key: string]: any;
+}
+
+export interface IPaymentVerification {
+  message: string;
+  data: IPaymentVerify;
+}
+
+/**
+ * List of supported providers
+ */
+export type PaymentProviderList = IReadyPaymentProvider[];
+
+export interface ICouponValidity {
+  start_date: string; // ISO date string
+  end_date: string; // ISO date string
+}
+
+export interface ICouponData {
+  _id: string;
+  name: string;
+  discount: number; // percentage or fixed amount
+  type: 'percentage' | 'amount';
+  validity: ICouponValidity;
+}
+
+export interface ICouponResponse {
+  message: string;
+  data: ICouponData;
+}

package/src/ZezoPay/http/utils/errorFormatter.ts

@@ -0,0 +1,88 @@
+// utils/formatAPIError.ts
+
+import type { APIError } from '../api-sdk';
+
+interface IBackendError {
+  response?: {
+    status?: number;
+    headers?: Record<string, string>;
+    data?: {
+      message?: string;
+      error?: {
+        type?: string;
+        message?: string;
+        path?: string;
+        location?: string;
+      };
+      errors?: {
+        type?: string;
+        msg?: string;
+        path?: string;
+        location?: string;
+      }[];
+    };
+  };
+  config?: {
+    url?: string;
+  };
+  code?: string;
+  message?: string;
+}
+
+/**
+ * Converts any kind of error (network, backend, unknown) into a consistent APIError format
+ */
+export function formatAPIError(err: unknown): APIError {
+  const error = err as IBackendError;
+
+  if (
+    error?.code === 'ECONNREFUSED' ||
+    error?.message?.includes('Network Error')
+  ) {
+    return {
+      type: 'network_error',
+      status: error.code,
+      message: 'Network error: check your connection.',
+      path: error?.config?.url || '',
+      location: '',
+    };
+  }
+
+  const isHtml =
+    error?.response?.headers?.['content-type']?.includes('text/html') ||
+    (typeof error?.response?.data === 'string' &&
+      (error.response.data as string).startsWith('<!DOCTYPE html>'));
+
+  if (isHtml) {
+    return {
+      type: 'invalid_route',
+      status: error?.response?.status || 404,
+      message: 'This API endpoint does not exist or cannot be called.',
+      path: error?.config?.url || '',
+      location: '',
+    };
+  }
+
+  const firstError = error?.response?.data?.errors?.[0];
+  const errorObj = error?.response?.data?.error;
+  const message =
+    firstError?.msg || errorObj?.message || error?.response?.data?.message;
+
+  if (message) {
+    return {
+      type: firstError?.type || errorObj?.type || 'backend_error',
+      status: error?.response?.status,
+      message,
+      path: firstError?.path || errorObj?.path || error?.config?.url || '',
+      location: firstError?.location || errorObj?.location || '',
+    };
+  }
+
+  return {
+    type: 'unknown_error',
+    status: error?.response?.status,
+    message: error?.message || 'An unknown error occurred.',
+    path: error?.config?.url || '',
+    location: '',
+  };
+}

package/src/ZezoPay/types/index.ts

@@ -1,6 +1,44 @@
 // types.ts
 
-import type { HandlePayment, UserInfo } from '@zezosoft/zezopay-client';
+import type {
+  ICheckoutResult,
+  PaymentMeta,
+  PaymentProvider,
+  UserInfo,
+} from '../http/api-sdk';
+
+/* Summary Item */
+export interface ISummaryItem {
+  id: string | number;
+  name: string;
+  price: number;
+  duration?: string;
+  image?: string;
+  discount?: number | { amount: number; type: 'percentage' | 'fixed' };
+}
+/* Handle Payment Type */
+export type HandlePayment = ({
+  provider,
+  subscriptionId,
+  digitalProductId,
+  userInfo,
+  coupon_code,
+  metadata,
+}: {
+  provider: PaymentProvider;
+  subscriptionId?: string | null;
+  digitalProductId?: string | null;
+  userInfo: UserInfo;
+  coupon_code?: string | null;
+  metadata?: PaymentMeta | null;
+}) => Promise<ICheckoutResult | null>;
+
+/* Callbacks */
+export interface ZezoPayCallbacks {
+  onSuccess?: (response: any) => void;
+  onFailure?: (error: any) => void;
+  onError?: (error: any) => void;
+}
 
 export type PaymentDetails = {
   userId: string;
@@ -19,13 +57,9 @@ export type ZezoPayProps = {
   userInfo: UserInfo;
   title: string;
   onBack: () => void;
-  callback?: ZezoPayCallbacks;
+  callbacks?: ZezoPayCallbacks;
   handlePayment?: HandlePayment;
-};
-
-export type ZezoPayCallbacks = {
-  onSuccess?: (data: any) => void;
-  onFailure?: (error: any) => void;
+  voucher?: boolean;
 };
 
 export type PaymentProviderType =