@zezosoft/react-native-zezopay 1.0.2 → 1.0.4

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 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

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

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

package/src/ZezoPay/types/index.ts

@@ -1,70 +0,0 @@
-// types.ts
-
-import type { HandlePayment, 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;
-  handlePayment?: HandlePayment;
-};
-
-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

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