@zezosoft/react-native-zezopay 1.0.0

package/src/ZezoPay/components/PaymentMethod.tsx

@@ -0,0 +1,259 @@
+import type { PaymentProviderData } from '@zezosoft/zezopay-client';
+import React, { memo, useCallback } from 'react';
+import { Pressable, StyleSheet, Text, View, Animated } from 'react-native';
+import { scale, moderateScale, verticalScale } from 'react-native-size-matters';
+
+interface PaymentMethodProps {
+  providers: PaymentProviderData[];
+  selectedProvider: string | null;
+  onProviderChange: (provider: string) => void;
+  isLoading?: boolean;
+  error?: string | null;
+}
+
+const COLORS = {
+  background: '#ffffff',
+  lightGray: '#f9fafb',
+  grayBorder: '#e5e7eb',
+  grayText: '#6b7280',
+  darkText: '#111827',
+  logoFallback: '#9ca3af',
+  skeleton: '#d1d5db',
+  error: '#dc2626',
+  selectedBorder: '#2563EB',
+  selectedBackground: '#eff6ff',
+  radioBorder: '#9ca3af',
+};
+
+const ProviderLogo: React.FC<{
+  name: string;
+  logo?: string;
+  isLoading?: boolean;
+}> = ({ name, logo, isLoading }) => {
+  if (isLoading) return <View style={styles.skeletonLogo} />;
+
+  if (logo) {
+    return (
+      <View style={styles.logoWrapper}>
+        <Animated.Image
+          source={{ uri: logo }}
+          style={styles.logo}
+          accessibilityLabel={`${name} logo`}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.logoFallback}>
+      <Text style={styles.logoFallbackText}>{name[0]}</Text>
+    </View>
+  );
+};
+
+const ProviderItem: React.FC<{
+  provider: PaymentProviderData;
+  isProviderSelected: boolean;
+  isLoading: boolean;
+  onPress: (provider: string) => void;
+}> = memo(({ provider, isProviderSelected, isLoading, onPress }) => (
+  <Pressable
+    onPress={() => onPress(provider.provider)}
+    key={provider.provider}
+    style={[
+      styles.gatewayItem,
+      isProviderSelected && styles.gatewaySelected,
+      isLoading && styles.disabled,
+    ]}
+    disabled={isLoading}
+    accessibilityState={{ selected: isProviderSelected, disabled: isLoading }}
+  >
+    <View style={styles.providerContainer}>
+      <ProviderLogo
+        name={provider.provider}
+        logo={provider.logo}
+        isLoading={isLoading}
+      />
+      {isLoading ? (
+        <View style={styles.skeletonText} />
+      ) : (
+        <Text style={styles.gatewayText}>{provider.provider}</Text>
+      )}
+    </View>
+    <View style={[styles.radio, isProviderSelected && styles.radioSelected]}>
+      {isProviderSelected && <View style={styles.radioDot} />}
+    </View>
+  </Pressable>
+));
+
+const PaymentMethod: React.FC<PaymentMethodProps> = ({
+  providers,
+  selectedProvider,
+  onProviderChange,
+  isLoading = false,
+  error = null,
+}) => {
+  const handleProviderChange = useCallback(
+    (provider: string) => onProviderChange(provider),
+    [onProviderChange]
+  );
+
+  const skeletonItems = Array.from({ length: 3 }, (_, i) => ({
+    provider: `loading-${i}`,
+    logo: '',
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title} accessibilityRole="header">
+        Payment Gateways
+      </Text>
+
+      {(isLoading ? skeletonItems : providers).map((provider) => (
+        <ProviderItem
+          key={provider.provider}
+          provider={provider as PaymentProviderData}
+          isProviderSelected={provider.provider === selectedProvider}
+          isLoading={isLoading}
+          onPress={handleProviderChange}
+        />
+      ))}
+
+      {error && (
+        <View style={styles.noProvidersWrapper}>
+          <Text style={styles.errorText}>{error}</Text>
+        </View>
+      )}
+
+      {!isLoading && !error && providers.length === 0 && (
+        <View style={styles.noProvidersWrapper}>
+          <Text style={styles.noProvidersText}>
+            No payment gateways available
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: scale(16),
+    backgroundColor: COLORS.background,
+    borderRadius: scale(12),
+    elevation: 4,
+    marginBottom: verticalScale(16),
+    shadowColor: '#000',
+    shadowOpacity: 0.05,
+    shadowRadius: 10,
+    shadowOffset: { width: 0, height: 2 },
+    maxHeight: 250,
+  },
+  title: {
+    fontSize: moderateScale(16),
+    fontWeight: '700',
+    marginBottom: verticalScale(8),
+    color: COLORS.darkText,
+  },
+  errorText: {
+    fontSize: moderateScale(14),
+    color: COLORS.error,
+    marginBottom: verticalScale(8),
+  },
+  noProvidersWrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minHeight: 150,
+  },
+  noProvidersText: {
+    fontSize: moderateScale(14),
+    color: COLORS.grayText,
+    textAlign: 'center',
+  },
+  gatewayItem: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: scale(10),
+    borderRadius: scale(10),
+    backgroundColor: COLORS.lightGray,
+    borderWidth: 1,
+    borderColor: COLORS.grayBorder,
+    marginBottom: verticalScale(8),
+  },
+  gatewaySelected: {
+    borderColor: COLORS.selectedBorder,
+    backgroundColor: COLORS.selectedBackground,
+  },
+  disabled: { opacity: 0.6 },
+  providerContainer: { flexDirection: 'row', alignItems: 'center' },
+  logoWrapper: {
+    width: scale(32),
+    height: scale(32),
+    backgroundColor: COLORS.background,
+    borderRadius: scale(6),
+    padding: scale(3),
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: scale(12),
+  },
+  logo: {
+    width: '100%',
+    height: '100%',
+    resizeMode: 'contain',
+    borderRadius: scale(4),
+  },
+  skeletonLogo: {
+    width: scale(28),
+    height: scale(28),
+    borderRadius: scale(14),
+    backgroundColor: COLORS.skeleton,
+    marginRight: scale(12),
+  },
+  logoFallback: {
+    width: scale(28),
+    height: scale(28),
+    borderRadius: scale(14),
+    backgroundColor: COLORS.logoFallback,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: scale(12),
+  },
+  logoFallbackText: {
+    fontSize: moderateScale(12),
+    fontWeight: '700',
+    color: COLORS.background,
+    textTransform: 'uppercase',
+  },
+  gatewayText: {
+    fontSize: moderateScale(15),
+    fontWeight: '600',
+    textTransform: 'capitalize',
+    color: COLORS.darkText,
+  },
+  skeletonText: {
+    width: scale(80),
+    height: verticalScale(14),
+    backgroundColor: COLORS.skeleton,
+    borderRadius: scale(4),
+  },
+  radio: {
+    width: scale(20),
+    height: scale(20),
+    borderRadius: scale(10),
+    borderWidth: scale(2),
+    borderColor: COLORS.radioBorder,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioSelected: { borderColor: COLORS.selectedBorder },
+  radioDot: {
+    width: scale(10),
+    height: scale(10),
+    borderRadius: scale(5),
+    backgroundColor: COLORS.selectedBorder,
+  },
+});
+
+export default memo(PaymentMethod);

package/src/ZezoPay/components/Summary.tsx

@@ -0,0 +1,188 @@
+import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
+import { X } from 'lucide-react-native';
+import type { ISummaryItem } from '@zezosoft/zezopay-client';
+import { formatCurrency } from '../utils';
+
+export const Summary = ({
+  items = [],
+  displayCurrency = 'INR',
+  onRemoveItem,
+}: {
+  items: ISummaryItem[];
+  displayCurrency?: string;
+  onRemoveItem?: (id: ISummaryItem['id']) => void;
+}) => {
+  // Show error if no items
+  if (!items || items.length === 0) {
+    return (
+      <View style={styles.errorWrapper}>
+        <Text style={styles.errorText}>No items in summary.</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      <Text style={styles.title}>Summary</Text>
+      <View style={styles.list}>
+        {items.map((item) => {
+          let discountedPrice = item.price;
+          if (item.discount) {
+            if (typeof item.discount === 'number') {
+              discountedPrice = (item.price * (100 - item.discount)) / 100;
+            } else if (item.discount.type === 'percentage') {
+              discountedPrice =
+                (item.price * (100 - item.discount.amount)) / 100;
+            } else if (item.discount.type === 'fixed') {
+              discountedPrice = item.price - item.discount.amount;
+            }
+          }
+
+          return (
+            <View key={`summary-${item.id}`} style={styles.itemBox}>
+              <View style={styles.row}>
+                <View style={styles.left}>
+                  {item.image ? (
+                    <Image source={{ uri: item.image }} style={styles.logo} />
+                  ) : (
+                    <View style={[styles.logo, styles.logoTextContainer]}>
+                      <Text style={styles.logoText}>
+                        {item.name.slice(0, 2).toUpperCase()}
+                      </Text>
+                    </View>
+                  )}
+
+                  <View style={styles.info}>
+                    <Text style={styles.itemName}>{item.name}</Text>
+
+                    {item.discount ? (
+                      <Text style={styles.subText}>
+                        <Text style={styles.strike}>
+                          {formatCurrency({
+                            amount: item.price,
+                            currency: displayCurrency,
+                          })}
+                        </Text>
+                        <Text> </Text>
+                        <Text style={styles.discounted}>
+                          {formatCurrency({
+                            amount: discountedPrice,
+                            currency: displayCurrency,
+                          })}
+                        </Text>
+                        {item.duration ? (
+                          <Text>{` /${item.duration}`}</Text>
+                        ) : null}
+                      </Text>
+                    ) : (
+                      <Text style={styles.subText}>
+                        {formatCurrency({
+                          amount: discountedPrice,
+                          currency: displayCurrency,
+                        })}
+                        {item.duration ? (
+                          <Text>{` /${item.duration}`}</Text>
+                        ) : null}
+                      </Text>
+                    )}
+                  </View>
+                </View>
+
+                {onRemoveItem && (
+                  <TouchableOpacity
+                    onPress={() => onRemoveItem(item.id)}
+                    style={styles.removeBtn}
+                  >
+                    <X size={20} />
+                  </TouchableOpacity>
+                )}
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 10,
+  },
+  list: {
+    gap: 10,
+  },
+  itemBox: {
+    padding: 12,
+    borderRadius: 12,
+    marginBottom: 10,
+    borderColor: '#a6e6cf',
+    borderWidth: 1,
+    backgroundColor: 'rgba(224, 243, 236, 0.68)',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  left: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    flex: 1,
+  },
+  logo: {
+    width: 42,
+    height: 42,
+    borderRadius: 8,
+    backgroundColor: '#ddd',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logoTextContainer: {
+    backgroundColor: '#444',
+  },
+  logoText: {
+    fontWeight: '700',
+    color: '#fff',
+  },
+  info: {
+    flexDirection: 'column',
+  },
+  itemName: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: '#111',
+  },
+  subText: {
+    fontSize: 13,
+    color: '#222',
+  },
+  strike: {
+    textDecorationLine: 'line-through',
+    color: '#444',
+  },
+  discounted: {
+    fontWeight: '700',
+    color: '#000',
+  },
+  removeBtn: {
+    padding: 6,
+    borderRadius: 20,
+  },
+  errorWrapper: {
+    padding: 12,
+    borderRadius: 12,
+    backgroundColor: '#fee2e2',
+    borderWidth: 1,
+    borderColor: '#fca5a5',
+    marginVertical: 10,
+  },
+  errorText: {
+    color: '#b91c1c',
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

package/src/ZezoPay/components/VoucherBox.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  StyleSheet,
+  TouchableOpacity,
+} 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',
+  disabledOrangeStart: '#df7026ff',
+  disabledOrangeEnd: '#ce6320ff',
+  black: '#000',
+  white: '#fff',
+};
+
+interface VoucherBoxProps {
+  voucher: string;
+  setVoucher: (v: string) => void;
+  onApply?: () => void;
+}
+
+const VoucherBox: React.FC<VoucherBoxProps> = ({
+  voucher,
+  setVoucher,
+  onApply,
+}) => {
+  return (
+    <View>
+      <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 }}
+          >
+            <Text
+              style={[styles.buttonText, !voucher && styles.disabledButtonText]}
+            >
+              Apply
+            </Text>
+          </LinearGradient>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    fontSize: moderateScale(16),
+    fontWeight: '700',
+    color: COLORS.black,
+    marginBottom: verticalScale(8),
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    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),
+  },
+  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),
+  },
+  buttonText: {
+    color: COLORS.white,
+    fontWeight: '700',
+    fontSize: moderateScale(15),
+    textTransform: 'uppercase',
+  },
+  disabledButtonText: {
+    color: COLORS.white,
+    opacity: 0.7,
+  },
+});
+
+export default VoucherBox;

package/src/ZezoPay/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export { default as ZezoPay } from './ZezoPay';

package/src/ZezoPay/types/index.ts

@@ -0,0 +1,69 @@
+// types.ts
+
+import type { UserInfo } from '@zezosoft/zezopay-client';
+
+export type PaymentDetails = {
+  userId: string;
+  price: number;
+  metadata?: {
+    isPaymentInitiatedEnabled?: boolean;
+    userInfo?: UserInfo;
+  };
+};
+
+export type ZezoPayProps = {
+  publicKey: string;
+  subscriptionId?: string;
+  digitalProductId?: string;
+  summaryItems: SummaryItem[];
+  userInfo: UserInfo;
+  title: string;
+  onBack: () => void;
+  callback?: ZezoPayCallbacks;
+};
+
+export type ZezoPayCallbacks = {
+  onSuccess?: (data: any) => void;
+  onFailure?: (error: any) => void;
+};
+
+export type PaymentProviderType =
+  | 'razorpay'
+  | 'stripe'
+  | 'ccavenue'
+  | 'phonepe';
+
+export type ZezoPayHookProps = {
+  publicKey: string;
+  userInfo: {
+    _id: string;
+    name: string;
+    email?: string;
+    phone?: string;
+  };
+  handlePayment?: (args: {
+    provider: PaymentProviderType;
+    subscriptionId?: string;
+    digitalProductId?: string;
+    userInfo: { _id: string; name: string; email?: string; phone?: string };
+  }) => Promise<any>;
+  subscriptionId?: string;
+  digitalProductId?: string;
+  summaryItems?: SummaryItem[];
+  validateVoucherCode?: (code: string) => number;
+  callbacks?: ZezoPayCallbacks;
+};
+
+export type Discount = {
+  type: 'percentage' | 'fixed';
+  amount: number;
+};
+
+export type SummaryItem = {
+  id: string;
+  name: string;
+  price: number;
+  discount?: number | { type: 'percentage' | 'fixed'; amount: number };
+  duration?: string;
+  image?: string;
+};

package/src/ZezoPay/utils/hooks/useAsync.ts

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+
+export function useAsync<T>(asyncFn: () => Promise<T>, deps: any[] = []) {
+  const [result, setResult] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    setLoading(true);
+
+    asyncFn()
+      .then((res) => {
+        if (mounted) {
+          setResult(res);
+          setError(null);
+        }
+      })
+      .catch((err) => {
+        if (mounted)
+          setError(
+            err instanceof Error
+              ? err
+              : new Error(err.msg || err.message || 'Unknown error')
+          );
+      })
+      .finally(() => {
+        if (mounted) setLoading(false);
+      });
+
+    return () => {
+      mounted = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return { result, loading, error };
+}