@sanctum-key/react-native-sdk 1.0.0

package/src/TransfergratisSdkView.tsx

@@ -0,0 +1,11 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+
+import { TransfergratisSdkViewProps } from './TransfergratisSdk.types';
+
+const NativeView: React.ComponentType<TransfergratisSdkViewProps> =
+  requireNativeView('TransfergratisSdk');
+
+export default function TransfergratisSdkView(props: TransfergratisSdkViewProps) {
+  return <NativeView {...props} />;
+}

package/src/TransfergratisSdkView.web.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { TransfergratisSdkViewProps } from './TransfergratisSdk.types';
+
+export default function TransfergratisSdkView(props: TransfergratisSdkViewProps) {
+  return (
+    <div>
+      {/* <iframe
+        style={{ flex: 1 }}
+        src={props.url}
+        onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}
+      /> */}
+    </div>
+  );
+}

package/src/api/axios.ts

@@ -0,0 +1,144 @@
+import axios, {
+    AxiosInstance,
+    AxiosRequestConfig,
+    InternalAxiosRequestConfig,
+    AxiosResponse,
+} from 'axios';
+
+export type ApiConfiguration = {
+    baseURL: string;
+    apiKey?: string;
+    authToken?: string;
+    timeoutMs?: number;
+};
+
+export type ApiErrorData = {
+    message?: string;
+    code?: string | number;
+    details?: unknown;
+};
+
+export class HttpClient {
+    private instance: AxiosInstance;
+    private apiKey?: string;
+    private authToken?: string;
+
+    constructor(configuration: ApiConfiguration) {
+        this.apiKey = configuration.apiKey;
+        this.authToken = configuration.authToken;
+        this.instance = axios.create({
+            baseURL: configuration.baseURL,
+            timeout: configuration.timeoutMs ?? 15000,
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json',
+            },
+        });
+
+        this.instance.interceptors.request.use(
+            (request: InternalAxiosRequestConfig) => {
+                const headers = request.headers ?? {};
+                if (this.apiKey && !headers['x-api-key']) {
+                    headers['x-api-key'] = this.apiKey;
+                }
+                if (this.authToken && !headers.Authorization) {
+                    headers.Authorization = `Bearer ${this.authToken}`;
+                }
+                request.headers = headers;
+                return request;
+            },
+            (error) => Promise.reject(error)
+        );
+
+        this.instance.interceptors.response.use(
+            (response: AxiosResponse) => response,
+            (error) => {
+                if (!error.response) {
+                    return Promise.reject({
+                        message: 'Network error. Please check your connection.',
+                        code: 'network_error',
+                        details: error?.message,
+                    } as ApiErrorData);
+                }
+                const { status, data } = error.response as AxiosResponse<ApiErrorData>;
+                if (status === 401) {
+                    return Promise.reject({
+                        message: data?.message || 'Unauthorized',
+                        code: 401,
+                        details: data,
+                    } as ApiErrorData);
+                }
+                return Promise.reject({
+                    message: data?.message || 'Request failed',
+                    code: status,
+                    details: data,
+                } as ApiErrorData);
+            }
+        );
+    }
+
+    setAuthToken(token?: string): void {
+        this.authToken = token;
+    }
+
+    setApiKey(key?: string): void {
+        this.apiKey = key;
+    }
+
+    setBaseURL(url: string): void {
+        this.instance.defaults.baseURL = url;
+    }
+
+    async get<T = unknown>(url: string, requestConfig?: AxiosRequestConfig): Promise<T> {
+        const res = await this.instance.get<T>(url, requestConfig);
+        return res.data as T;
+    }
+
+    async post<T = unknown, B = unknown>(
+        url: string,
+        body?: B,
+        requestConfig?: AxiosRequestConfig
+    ): Promise<T> {
+        const res = await this.instance.post<T>(url, body, requestConfig);
+        return res.data as T;
+    }
+
+    async put<T = unknown, B = unknown>(
+        url: string,
+        body?: B,
+        requestConfig?: AxiosRequestConfig
+    ): Promise<T> {
+        const res = await this.instance.put<T>(url, body, requestConfig);
+        return res.data as T;
+    }
+
+    async patch<T = unknown, B = unknown>(
+        url: string,
+        body?: B,
+        requestConfig?: AxiosRequestConfig
+    ): Promise<T> {
+        const res = await this.instance.patch<T>(url, body, requestConfig);
+        return res.data as T;
+    }
+
+    async delete<T = unknown>(url: string, requestConfig?: AxiosRequestConfig): Promise<T> {
+        const res = await this.instance.delete<T>(url, requestConfig);
+        return res.data as T;
+    }
+}
+
+export default HttpClient;
+
+
+// ml service api
+export const mlService = new HttpClient({
+    baseURL: 'https://api.ml.transfergratis.com',
+    apiKey: 'your-api-key',
+});
+// backedn service api
+export const backendService = new HttpClient({
+    baseURL: 'https://api.backend.transfergratis.com',
+    apiKey: 'your-api-key',
+});
+
+

package/src/components/ConfigurableKYCFlow.tsx

@@ -0,0 +1,334 @@
+import React, { useEffect, useRef } from 'react';
+import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
+import { useKYCFlow } from '../hooks/useKYCFlow';
+import { KYCElementRenderer } from './KYCElementRenderer';
+import { KYCFlowConfig } from '../types/KYC.types';
+
+interface ConfigurableKYCFlowProps {
+  config: KYCFlowConfig;
+  onComplete?: (data: any) => void;
+  onError?: (error: any) => void;
+  onClose?: () => void;
+}
+
+export const ConfigurableKYCFlow: React.FC<ConfigurableKYCFlowProps> = ({
+  config,
+  onComplete,
+  onError,
+  onClose,
+}) => {
+  const {
+    state,
+    actions,
+    currentElement,
+    progress,
+    canGoNext,
+    canGoPrevious,
+    isComplete,
+  } = useKYCFlow();
+
+  const isInitialized = useRef(false);
+
+  useEffect(() => {
+    if (!isInitialized.current) {
+      actions.initializeFlow(config);
+      isInitialized.current = true;
+    }
+  }, [config.id]); // Seulement quand l'ID de la config change
+
+  const handleValueChange = (value: any) => {
+    if (currentElement) {
+      actions.updateElementData(currentElement.id, value);
+    }
+  };
+
+  const handleNext = () => {
+    console.log('handleNext called');
+    console.log('currentElement:', currentElement);
+    console.log('canGoNext:', canGoNext);
+    console.log('state.elementData:', state.elementData);
+    
+    if (currentElement) {
+      console.log('Validating element:', currentElement.id);
+      const isValid = actions?.validateElement?.(currentElement.id);
+      console.log('Validation result:', isValid);
+      
+      if (isValid) {
+        console.log('Moving to next element');
+        actions.nextElement();
+      } else {
+        console.log('Validation failed');
+      }
+    }
+  };
+
+  const handlePrevious = () => {
+    actions.previousElement();
+  };
+
+  const handleComplete = () => {
+    if (onComplete) {
+      onComplete(state.elementData);
+    }
+  };
+
+  const handleRestart = () => {
+    actions.resetFlow();
+  };
+
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleVerificationComplete = () => {
+    actions.nextElement();
+  };
+
+  if (!currentElement) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.loadingText}>Chargement...</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, { backgroundColor: config.styling.backgroundColor }]}>
+      {/* Header avec progression */}
+      {config.settings.showProgressBar && (
+        <View style={styles.header}>
+          <View style={styles.progressContainer}>
+            <View 
+              style={[
+                styles.progressBar, 
+                { 
+                  width: `${progress}%`,
+                  backgroundColor: config.styling.primaryColor,
+                  borderRadius: config.styling.borderRadius,
+                }
+              ]}
+            />
+          </View>
+          {config.settings.showStepNumbers && (
+            <Text style={[styles.stepCounter, { color: config.styling.textColor }]}>
+              Étape {state.currentElementIndex + 1} sur {config.elements.length}
+            </Text>
+          )}
+          <Text style={[styles.headerTitle, { color: config.styling.textColor }]}>
+            {currentElement.title}
+          </Text>
+          <Text style={[styles.headerDescription, { color: config.styling.textColor }]}>
+            {currentElement.description}
+          </Text>
+        </View>
+      )}
+
+      {/* Contenu principal */}
+      <ScrollView style={styles.scrollView}>
+        {state.errors.submit && (
+          <View style={styles.errorContainer}>
+            <Text style={styles.errorText}>
+              Erreur: {state.errors.submit}
+            </Text>
+          </View>
+        )}
+
+        <KYCElementRenderer
+          element={currentElement}
+          value={state.elementData[currentElement.id]}
+          onValueChange={handleValueChange}
+          error={state.errors[currentElement.id]}
+          onComplete={handleVerificationComplete}
+          onRestart={handleRestart}
+          onClose={handleClose}
+        />
+      </ScrollView>
+
+      {/* Footer avec navigation */}
+      {config.settings.allowBackNavigation && (
+        <View style={styles.footer}>
+          {canGoPrevious && (
+            <TouchableOpacity 
+              style={[
+                styles.secondaryButton,
+                { 
+                  backgroundColor: config.styling.secondaryColor,
+                  borderRadius: config.styling.borderRadius,
+                }
+              ]}
+              onPress={handlePrevious}
+              disabled={state.isProcessing}
+            >
+              <Text style={styles.secondaryButtonText}>
+                Précédent
+              </Text>
+            </TouchableOpacity>
+          )}
+
+          <TouchableOpacity 
+            style={[
+              styles.primaryButton,
+              { 
+                backgroundColor: canGoNext ? config.styling.primaryColor : '#ccc',
+                borderRadius: config.styling.borderRadius,
+              }
+            ]}
+            onPress={handleNext}
+            disabled={state.isProcessing || !canGoNext}
+          >
+            <Text style={styles.primaryButtonText}>
+              Suivant
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {/* Bouton suivant seul si pas de navigation retour */}
+      {!config.settings.allowBackNavigation && (
+        <View style={styles.footer}>
+          <TouchableOpacity 
+            style={[
+              styles.fullWidthButton,
+              { 
+                backgroundColor: canGoNext ? config.styling.primaryColor : '#ccc',
+                borderRadius: config.styling.borderRadius,
+              }
+            ]}
+            onPress={handleNext}
+            disabled={state.isProcessing || !canGoNext}
+          >
+            <Text style={styles.primaryButtonText}>
+              {state.isProcessing ? 'Traitement...' : 'Continuer'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {/* Bouton de finalisation */}
+      {isComplete && (
+        <View style={styles.footer}>
+          <TouchableOpacity 
+            style={[
+              styles.fullWidthButton,
+              { 
+                backgroundColor: config.styling.primaryColor,
+                borderRadius: config.styling.borderRadius,
+              }
+            ]}
+            onPress={handleComplete}
+          >
+            <Text style={styles.primaryButtonText}>
+              Terminer
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  loadingText: {
+    fontSize: 18,
+    textAlign: 'center',
+    marginTop: 50,
+    color: '#666',
+  },
+  header: {
+    backgroundColor: 'white',
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e5e5e5',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  progressContainer: {
+    width: '100%',
+    height: 8,
+    backgroundColor: '#e5e5e5',
+    borderRadius: 4,
+    overflow: 'hidden',
+    marginBottom: 8,
+  },
+  progressBar: {
+    height: '100%',
+    borderRadius: 4,
+  },
+  stepCounter: {
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 8,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginTop: 8,
+  },
+  headerDescription: {
+    fontSize: 14,
+    opacity: 0.7,
+  },
+  scrollView: {
+    flex: 1,
+  },
+  errorContainer: {
+    backgroundColor: '#fef2f2',
+    borderWidth: 1,
+    borderColor: '#fecaca',
+    margin: 16,
+    padding: 16,
+    borderRadius: 8,
+  },
+  errorText: {
+    color: '#dc2626',
+    fontWeight: '500',
+  },
+  footer: {
+    backgroundColor: 'white',
+    borderTopWidth: 1,
+    borderTopColor: '#e5e5e5',
+    padding: 16,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  primaryButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    flex: 1,
+    marginLeft: 8,
+  },
+  primaryButtonText: {
+    color: 'white',
+    fontWeight: '600',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  secondaryButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    flex: 1,
+    marginRight: 8,
+  },
+  secondaryButtonText: {
+    color: 'white',
+    fontWeight: '500',
+    fontSize: 16,
+    textAlign: 'center',
+  },
+  fullWidthButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    width: '100%',
+  },
+});