@zezosoft/react-native-zezopay 1.0.2 → 1.0.4

package/src/ZezoPay/ZezoPay.tsx

@@ -1,176 +0,0 @@
-import React from 'react';
-import {
-  View,
-  StyleSheet,
-  Keyboard,
-  TouchableWithoutFeedback,
-  StatusBar,
-  Text,
-} from 'react-native';
-import { ArrowLeft } from 'lucide-react-native';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import Header from './components/Header';
-import type { ZezoPayProps } from './types';
-import PaymentMethod from './components/PaymentMethod';
-import { Summary } from './components/Summary';
-import PayButton from './components/PayButton';
-import { useZezoPay } from './utils/hooks/useZezoPay';
-import { formatCurrency } from './utils';
-
-const ZezoPay: React.FC<ZezoPayProps> = ({
-  title = 'Payments',
-  summaryItems,
-  onBack,
-  userInfo,
-  publicKey,
-  digitalProductId,
-  subscriptionId,
-  callback,
-  handlePayment,
-}) => {
-  const {
-    selectedPayment,
-    setSelectedPayment,
-    summaryItems: items,
-    totalPrice,
-    isSuccess,
-    error,
-    isProcessing,
-    providers,
-    loading,
-    providerError,
-    removeItem,
-    handlePayNow,
-  } = useZezoPay({
-    publicKey: publicKey,
-    userInfo: {
-      _id: userInfo._id,
-      name: userInfo?.name || '',
-      email: userInfo?.email || '',
-    },
-    subscriptionId: subscriptionId,
-    digitalProductId: digitalProductId,
-    summaryItems: summaryItems || [],
-    callback,
-    handlePayment,
-  });
-
-  return (
-    <SafeAreaProvider>
-      <SafeAreaView style={styles.safeArea} edges={['bottom', 'left', 'right']}>
-        <StatusBar
-          barStyle="dark-content"
-          backgroundColor={styles.safeArea.backgroundColor}
-        />
-        <SafeAreaView style={styles.headerSafeArea} edges={['top']}>
-          <View style={styles.headerWrapper}>
-            <Header
-              title={title}
-              onBack={onBack}
-              leftIcon={<ArrowLeft size={moderateScale(24)} color="#000" />}
-            />
-          </View>
-        </SafeAreaView>
-
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-          <View style={styles.container}>
-            <KeyboardAwareScrollView
-              style={styles.scrollView}
-              contentContainerStyle={styles.scrollContent}
-              keyboardShouldPersistTaps="handled"
-              enableOnAndroid
-              extraScrollHeight={verticalScale(20)}
-              showsVerticalScrollIndicator={false}
-              contentInsetAdjustmentBehavior="never"
-            >
-              <View style={styles.content}>
-                <PaymentMethod
-                  providers={providers || []}
-                  onProviderChange={setSelectedPayment}
-                  selectedProvider={selectedPayment}
-                  isLoading={loading}
-                  error={providerError?.message}
-                />
-
-                <Summary items={items} onRemoveItem={removeItem} />
-              </View>
-            </KeyboardAwareScrollView>
-
-            {/* Bottom container for error + PayButton */}
-            <View style={styles.bottomContainer}>
-              {error ? (
-                <View style={styles.errorWrapper}>
-                  <Text style={styles.errorText}>{error}</Text>
-                </View>
-              ) : null}
-
-              <PayButton
-                onPaymentInitiate={handlePayNow}
-                status={
-                  isSuccess
-                    ? 'success'
-                    : isProcessing
-                      ? 'processing'
-                      : !selectedPayment || totalPrice === 0
-                        ? 'disabled'
-                        : 'idle'
-                }
-                paymentButtonText={`Pay ${formatCurrency({
-                  amount: totalPrice,
-                  minimumFractionDigits: 0,
-                })}`}
-                noteText="Powered by Zezo Pay"
-              />
-            </View>
-          </View>
-        </TouchableWithoutFeedback>
-      </SafeAreaView>
-    </SafeAreaProvider>
-  );
-};
-
-const styles = StyleSheet.create({
-  safeArea: { flex: 1, backgroundColor: '#FFFFFF' },
-  headerSafeArea: { backgroundColor: '#FFFFFF' },
-  headerWrapper: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#E5E7EB',
-    zIndex: 10,
-  },
-  container: { flex: 1, position: 'relative' },
-  scrollView: { flex: 1, paddingBottom: verticalScale(80) },
-  scrollContent: {
-    flexGrow: 1,
-    paddingTop: verticalScale(10),
-    paddingBottom: verticalScale(80),
-  },
-  content: { paddingHorizontal: scale(16) },
-  bottomContainer: {
-    position: 'absolute',
-    bottom: 0,
-    left: 0,
-    right: 0,
-    paddingHorizontal: scale(16),
-    paddingVertical: verticalScale(16),
-    backgroundColor: '#FFFFFF',
-    borderTopWidth: 1,
-    borderTopColor: '#E5E7EB',
-    alignItems: 'center',
-    zIndex: 5,
-  },
-  errorWrapper: {
-    marginBottom: verticalScale(8),
-    width: '100%',
-    alignItems: 'center',
-  },
-  errorText: {
-    color: '#DC2626',
-    fontSize: moderateScale(14),
-    fontWeight: '500',
-    textAlign: 'center',
-  },
-});
-
-export default ZezoPay;

package/src/ZezoPay/components/Header.tsx

@@ -1,107 +0,0 @@
-import React from 'react';
-import { View, Text, Pressable, StyleSheet, Platform } from 'react-native';
-import type { ViewStyle, TextStyle } from 'react-native';
-import { ArrowLeft } from 'lucide-react-native';
-import { scale, moderateScale } from 'react-native-size-matters';
-
-export interface HeaderProps {
-  title: string;
-  titleStyle?: TextStyle;
-  containerStyle?: ViewStyle;
-  leftIcon?: React.ReactNode;
-  onBack?: () => void;
-}
-
-const Header: React.FC<HeaderProps> = ({
-  title,
-  titleStyle,
-  containerStyle,
-  leftIcon,
-  onBack,
-}) => {
-  return (
-    <View style={[styles.header, containerStyle]}>
-      {/* Left Button Container */}
-      <View style={styles.gridItemLeft}>
-        <View style={styles.backBtnContainer}>
-          <Pressable
-            onPress={onBack}
-            android_ripple={{
-              color: 'rgba(0,0,0,0.1)',
-              borderless: false,
-              radius: scale(100),
-            }}
-            style={({ pressed }) => [
-              styles.backBtnWrapper,
-              pressed && Platform.OS === 'ios' && styles.backBtnPressed,
-            ]}
-            hitSlop={10}
-          >
-            <View style={styles.backBtn}>
-              {leftIcon ? (
-                leftIcon
-              ) : (
-                <ArrowLeft size={moderateScale(20)} color="#000" />
-              )}
-            </View>
-          </Pressable>
-        </View>
-      </View>
-
-      {/* Title */}
-      <View style={styles.gridItem}>
-        <Text style={[styles.title, titleStyle]} numberOfLines={1}>
-          {title}
-        </Text>
-      </View>
-
-      <View style={styles.gridItem} />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-    height: scale(44),
-    paddingHorizontal: scale(16),
-    justifyContent: 'space-between',
-  },
-  gridItem: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  gridItemLeft: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  backBtnContainer: {
-    borderRadius: scale(100),
-    overflow: 'hidden', // crucial for Android ripple
-  },
-  backBtnWrapper: {
-    borderRadius: scale(100),
-  },
-  backBtn: {
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: scale(10),
-    width: scale(35),
-    height: scale(35),
-  },
-  backBtnPressed: {
-    backgroundColor: 'rgba(0,0,0,0.1)', // iOS pressed effect
-  },
-  title: {
-    fontSize: moderateScale(18),
-    fontWeight: '700',
-    color: '#000',
-    textAlign: 'center',
-  },
-});
-
-export default Header;

package/src/ZezoPay/components/PayButton.tsx

@@ -1,132 +0,0 @@
-import React from 'react';
-import {
-  View,
-  Text,
-  Pressable,
-  StyleSheet,
-  ActivityIndicator,
-} from 'react-native';
-import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import LinearGradient from 'react-native-linear-gradient';
-import { Check } from 'lucide-react-native';
-
-interface PayButtonProps {
-  onPaymentInitiate: () => void;
-  status?: 'idle' | 'processing' | 'success' | 'disabled';
-  paymentButtonText?: string;
-  paymentProcessingText?: string;
-  paymentSuccessText?: string;
-  noteText?: string;
-}
-
-const PayButton: React.FC<PayButtonProps> = ({
-  onPaymentInitiate,
-  status = 'idle',
-  paymentButtonText = 'Pay Now',
-  paymentProcessingText = 'Processing...',
-  paymentSuccessText = 'Payment Successful',
-  noteText = 'Powered by Zezo Pay',
-}) => {
-  const colorsMap = {
-    idle: ['#0251ca', '#063482'],
-    processing: ['#0a84ff', '#1784e6'],
-    success: ['#28a745', '#1c7c31'],
-    disabled: ['#556fadff', '#3d71e9ff'],
-  };
-
-  return (
-    <View style={styles.container}>
-      {status === 'success' ? (
-        <View style={styles.shadowWrapper}>
-          <LinearGradient
-            colors={colorsMap.success}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 0 }}
-            style={styles.paymentButton}
-          >
-            <Check size={20} color="#fff" />
-            <Text style={[styles.successText, { marginLeft: scale(8) }]}>
-              {paymentSuccessText}
-            </Text>
-          </LinearGradient>
-        </View>
-      ) : (
-        <Pressable
-          onPress={onPaymentInitiate}
-          disabled={status === 'processing' || status === 'disabled'}
-          style={({ pressed }) => [
-            { opacity: pressed ? 0.85 : 1, width: '100%' },
-          ]}
-        >
-          <View style={styles.shadowWrapper}>
-            <LinearGradient
-              colors={colorsMap[status]}
-              start={{ x: 0, y: 0 }}
-              end={{ x: 1, y: 0 }}
-              style={styles.paymentButton}
-            >
-              {status === 'processing' ? (
-                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                  <ActivityIndicator
-                    color="#fff"
-                    style={{ marginRight: scale(8) }}
-                  />
-                  <Text style={styles.paymentText}>
-                    {paymentProcessingText}
-                  </Text>
-                </View>
-              ) : (
-                <Text style={styles.paymentText}>{paymentButtonText}</Text>
-              )}
-            </LinearGradient>
-          </View>
-        </Pressable>
-      )}
-
-      {noteText && <Text style={styles.noteText}>{noteText}</Text>}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { width: '100%', alignItems: 'center' },
-  shadowWrapper: {
-    width: '100%',
-    height: verticalScale(50),
-    borderRadius: scale(12),
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 3 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    elevation: 3,
-    backgroundColor: '#0000',
-    justifyContent: 'center',
-  },
-  paymentButton: {
-    width: '100%',
-    height: '100%',
-    borderRadius: scale(12),
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  paymentText: {
-    color: '#fff',
-    fontSize: moderateScale(18),
-    fontWeight: '700',
-  },
-  successText: {
-    color: '#fff',
-    fontSize: moderateScale(18),
-    fontWeight: '700',
-  },
-  noteText: {
-    marginTop: verticalScale(10),
-    fontSize: moderateScale(13),
-    fontWeight: '600',
-    color: '#FF7847',
-    textAlign: 'center',
-  },
-});
-
-export default PayButton;

package/src/ZezoPay/components/PaymentMethod.tsx

@@ -1,263 +0,0 @@
-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>
-
-      {error ? (
-        <View style={styles.noProvidersWrapper}>
-          <Text style={styles.errorText}>{error}</Text>
-        </View>
-      ) : (
-        <>
-          {(isLoading ? skeletonItems : providers).map((provider) => (
-            <ProviderItem
-              key={provider.provider}
-              provider={provider as PaymentProviderData}
-              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);