@sanctum-key/react-native-sdk 1.0.0

package/src/components/KYCElements/PhoneVerificationTemplate.tsx

@@ -0,0 +1,253 @@
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TextInput, TouchableOpacity, Alert } from 'react-native';
+import { TemplateComponent, LocalizedText } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+import { Button } from '../ui/Button';
+
+interface PhoneVerificationTemplateProps {
+    component: TemplateComponent;
+    value?: any;
+    onValueChange: (data: any) => void;
+    error?: string;
+    language?: string;
+}
+
+type VerificationStep = 'phone' | 'otp';
+
+export const PhoneVerificationTemplate: React.FC<PhoneVerificationTemplateProps> = ({
+    component,
+    value,
+    onValueChange,
+    error: propError,
+}) => {
+    const { actions, getLocalizedText } = useTemplateKYCFlowContext();
+    const { t } = useI18n();
+    // const config = component.config as PhoneVerificationConfig;
+
+    // State
+    const [step, setStep] = useState<VerificationStep>('phone');
+    const [phone, setPhone] = useState('');
+    const [otp, setOtp] = useState('');
+    const [localError, setLocalError] = useState<string | null>(null);
+    const [isSimulating, setIsSimulating] = useState(false);
+
+    const title = getLocalizedText(component.labels as LocalizedText);
+    const instructions = getLocalizedText(component.instructions as LocalizedText);
+
+    // Determine button text based on step
+    const verifyButtonText = getLocalizedText((component.ui as any).buttonText) || t('common.verify') || 'Verify';
+    const sendButtonText = t('common.sendCode') || 'Send Verification Code';
+    const buttonText = step === 'phone' ? sendButtonText : verifyButtonText;
+
+    const handleSendCode = () => {
+        if (!phone || phone.length < 5) {
+            setLocalError(t('errors.invalidPhone') || 'Please enter a valid phone number');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate API call to send code
+        setTimeout(() => {
+            setIsSimulating(false);
+            setStep('otp');
+        }, 1500);
+    };
+
+    const handleVerifyCode = () => {
+        if (!otp || otp.length < 4) {
+            setLocalError(t('errors.invalidCode') || 'Please enter the 6-digit code');
+            return;
+        }
+
+        setLocalError(null);
+        setIsSimulating(true);
+
+        // Simulate verification API
+        setTimeout(() => {
+            setIsSimulating(false);
+
+            // Mock validation logic
+            if (otp === '123456') {
+                onValueChange({ phone, otp, verified: true });
+                actions.nextComponent();
+            } else {
+                setLocalError(t('errors.wrongCode') || 'Invalid verification code. Try 123456');
+            }
+        }, 1500);
+    };
+
+    const onChangePhone = (text: string) => {
+        setPhone(text);
+        if (localError) setLocalError(null);
+    };
+
+    const onChangeOtp = (text: string) => {
+        setOtp(text);
+        if (localError) setLocalError(null);
+    };
+
+    const handleBackToPhone = () => {
+        setStep('phone');
+        setOtp('');
+        setLocalError(null);
+    };
+
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.instructions}>
+                {step === 'phone' ? instructions : (t('kyc.enterCodeSent') || `Please enter the code sent to ${phone}`)}
+            </Text>
+
+            <View style={styles.contentContainer}>
+                {step === 'phone' ? (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.phone') || 'Phone Number'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="+1234567890"
+                            value={phone}
+                            onChangeText={onChangePhone}
+                            keyboardType="phone-pad"
+                            autoComplete="tel"
+                            editable={!isSimulating}
+                        />
+                    </View>
+                ) : (
+                    <View style={styles.inputContainer}>
+                        <Text style={styles.label}>{t('common.verificationCode') || 'Verification Code'}</Text>
+                        <TextInput
+                            style={styles.input}
+                            placeholder="123456"
+                            value={otp}
+                            onChangeText={onChangeOtp}
+                            keyboardType="number-pad"
+                            maxLength={6}
+                            editable={!isSimulating}
+                        />
+                        <TouchableOpacity onPress={handleBackToPhone} style={styles.changeLink}>
+                            <Text style={styles.changeText}>{t('common.back') || 'Change number'}</Text>
+                        </TouchableOpacity>
+                    </View>
+                )}
+
+                {(localError || propError) && (
+                    <Text style={styles.errorText}>{localError || propError}</Text>
+                )}
+
+                <Button
+                    title={isSimulating ? (t('common.processing') || 'Processing...') : buttonText}
+                    onPress={step === 'phone' ? handleSendCode : handleVerifyCode}
+                    style={styles.button}
+                    disabled={
+                        isSimulating ||
+                        (step === 'phone' ? !phone : !otp)
+                    }
+                />
+
+                {step === 'otp' && (
+                    <TouchableOpacity
+                        onPress={() => {
+                            // Resend logic
+                            Alert.alert(
+                                t('common.codeResent') || 'Code Resent',
+                                t('common.codeResentMessage', { email: phone }) || 'Code resent to ' + phone
+                            );
+                        }}
+                        style={styles.resendButton}
+                        disabled={isSimulating}
+                    >
+                        <Text style={styles.resendText}>{t('common.resendCode') || 'Resend Code'}</Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        padding: 24,
+        backgroundColor: 'white',
+        borderRadius: 16,
+        margin: 16,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.1,
+        shadowRadius: 12,
+        elevation: 5,
+        width: '95%',
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: '700',
+        marginBottom: 8,
+        color: '#1a1a1a',
+        textAlign: 'center',
+    },
+    instructions: {
+        fontSize: 16,
+        color: '#666',
+        marginBottom: 32,
+        lineHeight: 24,
+        textAlign: 'center',
+    },
+    contentContainer: {
+        // width: '100%',
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#333',
+        marginBottom: 8,
+        marginLeft: 4,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#e0e0e0',
+        padding: 16,
+        borderRadius: 12,
+        fontSize: 16,
+        backgroundColor: '#f8f9fa',
+        color: '#333',
+    },
+    errorText: {
+        color: '#dc2626',
+        marginBottom: 16,
+        fontSize: 14,
+        textAlign: 'center',
+        backgroundColor: '#fee2e2',
+        padding: 8,
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    button: {
+        height: 50,
+        borderRadius: 12,
+        width: "100%"
+    },
+    changeLink: {
+        alignSelf: 'flex-end',
+        marginTop: 8,
+    },
+    changeText: {
+        color: '#2DBD60',
+        fontSize: 14,
+        fontWeight: '500',
+    },
+    resendButton: {
+        marginTop: 16,
+        alignItems: 'center',
+    },
+    resendText: {
+        color: '#666',
+        fontSize: 14,
+        textDecorationLine: 'underline',
+    },
+});

package/src/components/KYCElements/ReviewSubmitTemplate.tsx

@@ -0,0 +1,201 @@
+import React, { useMemo } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
+import { TemplateComponent } from '../../types/KYC.types';
+import { useTemplateKYCFlowContext } from '../../hooks/useTemplateKYCFlow';
+import { useI18n } from '../../hooks/useI18n';
+
+interface ReviewSubmitTemplateProps {
+  component: TemplateComponent;
+  value: unknown;
+  onValueChange: (data: unknown) => void;
+  error?: string;
+  language?: string;
+}
+
+export const ReviewSubmitTemplate: React.FC<ReviewSubmitTemplateProps> = () => {
+  const { t } = useI18n();
+  const { state, actions, getLocalizedText } = useTemplateKYCFlowContext();
+
+  const idSection = useMemo(() => {
+    const idComp = state.template.components.find(c => c.type === 'id_card');
+    return idComp ? state.componentData[idComp.id] : null;
+  }, [state.template.components, state.componentData]);
+
+  // Helper to coerce possibly-nested localized configs into the expected shape
+  const coerceLocalized = (value: any, fallback: { en: string; fr: string }) => {
+    if (value && typeof value === 'object') {
+      if (typeof value.en === 'string' || typeof value.fr === 'string') {
+        return {
+          en: typeof value.en === 'string' ? value.en : fallback.en,
+          fr: typeof value.fr === 'string' ? value.fr : fallback.fr,
+          ...value,
+        } as { [key: string]: string; en: string; fr: string };
+      }
+    }
+    return fallback;
+  };
+
+  // const reviewComp = useMemo(() => {
+  //   return state.template.components.find(c => c.type === 'review_submit');
+  // }, [state.template.components]);
+
+  const dynamicComponents = useMemo(() => {
+    return state.template.components.filter(c => c.type !== 'review_submit' && c.type !== 'verification_progress');
+  }, [state.template.components]);
+
+  const handleSubmit = async () => {
+    await actions.nextComponent();
+  };
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>{t('kyc.reviewSubmit.title')}</Text>
+      <Text style={styles.subtitle}>{t('kyc.reviewSubmit.subtitle')}</Text>
+
+      <ScrollView contentContainerStyle={styles.scrollContent}>
+        {dynamicComponents.map((comp) => {
+          const compData = state.componentData[comp.id] || {};
+          const isCompleted = state.completedComponents.includes(comp.id);
+          if (comp.type === 'id_card') {
+            const hasFront = !!(compData.front || compData.front_base64 || compData.front_mrz);
+            const hasBack = !!(compData.back || compData.back_base64 || compData.back_mrz);
+            return (
+              <View key={comp.id} style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('kyc.reviewSubmit.documentInfo')}</Text>
+                <View style={styles.row}>
+                  <View style={[styles.tile, hasFront ? styles.active : null]}>
+                    <Text style={styles.tileLabel}>{t('kyc.idCardCapture.frontSide')}</Text>
+                    {hasFront ? <Text style={styles.check}>✓</Text> : null}
+                  </View>
+                  <View style={[styles.tile, hasBack ? styles.active : null]}>
+                    <Text style={styles.tileLabel}>{t('kyc.idCardCapture.backSide')}</Text>
+                    {hasBack ? <Text style={styles.check}>✓</Text> : null}
+                  </View>
+                </View>
+                {idSection?.documentType ? (
+                  <Text style={styles.caption}>{idSection.documentType}</Text>
+                ) : null}
+              </View>
+            );
+          }
+          if (comp.type === 'selfie') {
+            const orientations = ((comp.config as any)?.orientations || ['center', 'right', 'left']) as string[];
+            return (
+              <View key={comp.id} style={styles.section}>
+                <Text style={styles.sectionTitle}>{t('kyc.selfieCapture.title')}</Text>
+                <View style={styles.row}>
+                  {orientations.map((o) => {
+                    const has = !!compData[o];
+                    const colorStyle = o === 'center' ? styles.pink : o === 'right' ? styles.blue : styles.purple;
+                    return (
+                      <View key={o} style={[styles.tile, colorStyle, has ? styles.active : null]}>
+                        <Text style={styles.tileLabel}>{t(`kyc.reviewSubmit.selfieSide.${o}`)}</Text>
+                        {has ? <Text style={styles.check}>✓</Text> : null}
+                      </View>
+                    );
+                  })}
+                </View>
+                <Text style={styles.caption}>{t('kyc.selfieCapture.success')}</Text>
+              </View>
+            );
+          }
+          // Generic fallback for other component types
+          return (
+            <View key={comp.id} style={styles.section}>
+              <Text style={styles.sectionTitle}>{getLocalizedText(coerceLocalized(comp.labels, { en: comp.type, fr: comp.type }))}</Text>
+              <Text style={styles.caption}>{isCompleted ? t('common.success') : t('kyc.verificationProgress.status.pending')}</Text>
+            </View>
+          );
+        })}
+      </ScrollView>
+
+      <TouchableOpacity style={[styles.button, styles.primary]} onPress={handleSubmit}>
+        <Text style={styles.buttonText}>{t('kyc.reviewSubmit.submitButton')}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#111827',
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 14,
+    color: '#6B7280',
+    marginBottom: 16,
+  },
+  section: {
+    backgroundColor: 'white',
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 16,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+    marginBottom: 12,
+  },
+  scrollContent: {
+    paddingBottom: 24,
+  },
+  row: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  tile: {
+    flex: 1,
+    height: 110,
+    borderRadius: 16,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  tileLabel: {
+    fontSize: 14,
+    color: '#111827',
+    marginBottom: 8,
+  },
+  check: {
+    fontSize: 18,
+    color: '#10B981',
+    fontWeight: '700',
+  },
+  active: {
+    backgroundColor: '#DDE9FF',
+  },
+  pink: { backgroundColor: '#FDE2E7' },
+  blue: { backgroundColor: '#DDE9FF' },
+  purple: { backgroundColor: '#EDE2FF' },
+  caption: {
+    marginTop: 10,
+    fontSize: 12,
+    color: '#6B7280',
+  },
+  button: {
+    paddingVertical: 14,
+    borderRadius: 10,
+    alignItems: 'center',
+    marginTop: 12,
+  },
+  primary: {
+    backgroundColor: '#2DBD60',
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});
+
+