@zezosoft/react-native-zezopay 1.0.3 → 1.0.4

package/src/ZezoPay/components/PaymentMethod.tsx

@@ -1,263 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import { Pressable, StyleSheet, Text, View, Animated } from 'react-native';
-import { scale, moderateScale, verticalScale } from 'react-native-size-matters';
-import type { IReadyPaymentProvider } from '../http/api-sdk';
-
-interface PaymentMethodProps {
-  providers: IReadyPaymentProvider[];
-  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: IReadyPaymentProvider;
-  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>
-
-      {error ? (
-        <View style={styles.noProvidersWrapper}>
-          <Text style={styles.errorText}>{error}</Text>
-        </View>
-      ) : (
-        <>
-          {(isLoading ? skeletonItems : providers).map((provider) => (
-            <ProviderItem
-              key={provider.provider}
-              provider={provider}
-              isProviderSelected={provider.provider === selectedProvider}
-              isLoading={isLoading}
-              onPress={handleProviderChange}
-            />
-          ))}
-
-          {!isLoading && 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,
-    position: 'relative',
-    borderRadius: scale(12),
-    elevation: 4,
-    marginBottom: verticalScale(16),
-    shadowColor: '#000',
-    shadowOpacity: 0.05,
-    shadowRadius: 10,
-    shadowOffset: { width: 0, height: 2 },
-    flexShrink: 1,
-  },
-  title: {
-    fontSize: moderateScale(16),
-    fontWeight: '700',
-    marginBottom: verticalScale(8),
-    color: COLORS.darkText,
-  },
-  errorText: {
-    fontSize: moderateScale(14),
-    color: COLORS.error,
-    textAlign: 'center',
-    marginVertical: verticalScale(16),
-  },
-  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

@@ -1,188 +0,0 @@
-import { View, Text, Image, TouchableOpacity, StyleSheet } from 'react-native';
-import { X } from 'lucide-react-native';
-import { formatCurrency } from '../utils';
-import type { ISummaryItem } from '../types';
-
-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

@@ -1,182 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  TextInput,
-  StyleSheet,
-  TouchableOpacity,
-  ActivityIndicator,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-
-const COLORS = {
-  primaryOrange: '#FF7847',
-  secondaryOrange: '#c24c21',
-  disabledOrangeStart: '#df7026ff',
-  disabledOrangeEnd: '#ce6320ff',
-  black: '#000',
-  white: '#fff',
-};
-
-interface VoucherBoxProps {
-  onApply?: ({ voucherCode }: { voucherCode: string }) => void;
-  loading?: boolean;
-  couponApplied?: boolean;
-  onRemove?: () => void;
-}
-
-const VoucherBox: React.FC<VoucherBoxProps> = ({
-  onApply,
-  loading = false,
-  couponApplied = false,
-  onRemove,
-}) => {
-  const [voucher, setVoucher] = React.useState('');
-
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Voucher</Text>
-
-      {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"
-          >
-            <LinearGradient
-              colors={
-                voucher
-                  ? [COLORS.primaryOrange, COLORS.secondaryOrange]
-                  : [COLORS.disabledOrangeStart, COLORS.disabledOrangeEnd]
-              }
-              style={styles.gradient}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 1, y: 0 }}
-            >
-              {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',
-    color: COLORS.black,
-    marginBottom: verticalScale(8),
-  },
-  inputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: COLORS.white,
-    height: moderateScale(47),
-    borderRadius: scale(8),
-    borderWidth: 1,
-    borderColor: COLORS.primaryOrange,
-    width: '100%',
-    paddingVertical: verticalScale(2),
-    overflow: 'hidden',
-  },
-  input: {
-    flex: 1,
-    height: '100%',
-    fontSize: moderateScale(14),
-    paddingHorizontal: scale(14),
-    borderRadius: scale(12),
-  },
-  button: {
-    minWidth: scale(80),
-    height: moderateScale(45),
-    overflow: 'hidden',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  gradient: {
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center',
-    // borderRadius: scale(10),
-  },
-  buttonText: {
-    color: COLORS.white,
-    fontWeight: '700',
-    fontSize: moderateScale(15),
-    textTransform: 'uppercase',
-  },
-  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,
-  },
-});
-
-export default VoucherBox;

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

@@ -1,27 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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;