@sanctum-key/react-native-sdk 1.0.26 → 1.0.28

package/src/components/KYCElements/IDCardCapture.tsx

@@ -69,6 +69,64 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
   
   const scannedBarcodeRef = useRef<string | null>(null);
 
+  // 🚨 NEW: State for the expiring link code
+  const [generatedCode, setGeneratedCode] = useState<string | null>(null);
+  const [isGeneratingCode, setIsGeneratingCode] = useState(false);
+  const [codeTimeLeft, setCodeTimeLeft] = useState(0);
+
+  // 🚨 NEW: Countdown Timer Effect
+  useEffect(() => {
+    if (codeTimeLeft <= 0) {
+      if (generatedCode) setGeneratedCode(null); // Clear the code when timer hits 0
+      return;
+    }
+    const timer = setInterval(() => {
+      setCodeTimeLeft((prev) => prev - 1);
+    }, 1000);
+    return () => clearInterval(timer);
+  }, [codeTimeLeft, generatedCode]);
+
+  // 🚨 NEW: Formatting helper
+  const formatTime = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  };
+
+  const handleGenerateCode = async () => {
+    if (isGeneratingCode) return;
+    setIsGeneratingCode(true);
+    try {
+      const apiKey = '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'; 
+
+      if (!apiKey) {
+        showAlert('Error', 'API Key is missing.');
+        setIsGeneratingCode(false);
+        return;
+      }
+
+      // 🚨 Pass the apiKey as the strictly required second parameter
+      const res = await kycService.generateReferralCode(
+        { session_id: state.session.session_id }, 
+        apiKey
+      );
+      
+      // Extract the code from the response
+      const newCode = res.code || res.referral_code || res?.data?.code || res?.data?.referral_code; 
+      
+      if (newCode) {
+        setGeneratedCode(newCode);
+        setCodeTimeLeft(300); // 300 seconds = 5 minutes
+      } else {
+        showAlert('Error', 'Failed to parse code from server response.');
+      }
+    } catch (error: any) {
+      showAlert('Error', error.message || 'Failed to generate code');
+    } finally {
+      setIsGeneratingCode(false);
+    }
+  };
+
   useEffect(() => {
     if (typeof window !== 'undefined' && window.location) setCurrentUrl(window.location.href);
     console.log(currentUrl)
@@ -971,88 +1029,104 @@ export const IDCardCapture: React.FC<IDCardCaptureProps> = ({ component, value =
       </View>
 
       {showQRModal && Platform.OS === 'web' && (
-          <View style={styles.qrModalOverlay}>
-            <View style={styles.qrModalContainer}>
-              <View style={styles.qrModalHeader}>
-                <Text style={styles.qrModalTitle}>
-                  {state.currentLanguage === 'en' ? 'Continue on your phone' : 'Continuer sur votre téléphone'}
-                </Text>
-                <Text style={styles.qrModalText}>
-                  {state.currentLanguage === 'en'
-                    ? "Scan the QR code to download our mobile app and complete the scanning process securely."
-                    : "Scannez le code QR pour télécharger notre application et terminer la numérisation en toute sécurité."}
-                </Text>
-              </View>
-
-              <View style={styles.qrToggleContainer}>
-                <TouchableOpacity
-                  style={[styles.qrToggleButton, qrPlatform === 'android' && styles.qrToggleButtonActive]}
-                  onPress={() => setQrPlatform('android')}
-                >
-                  <Text style={[styles.qrToggleText, qrPlatform === 'android' && styles.qrToggleTextActive]}>
-                    Android
-                  </Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={[styles.qrToggleButton, qrPlatform === 'ios' && styles.qrToggleButtonActive]}
-                  onPress={() => setQrPlatform('ios')}
-                >
-                  <Text style={[styles.qrToggleText, qrPlatform === 'ios' && styles.qrToggleTextActive]}>
-                    iOS (Apple)
-                  </Text>
-                </TouchableOpacity>
-              </View>
+  <View style={styles.qrModalOverlay}>
+    <View style={styles.qrModalContainer}>
+      <View style={styles.qrModalHeader}>
+        <Text style={styles.qrModalTitle}>
+          {state.currentLanguage === 'en' ? 'Continue on your phone' : 'Continuer sur votre téléphone'}
+        </Text>
+        <Text style={styles.qrModalText}>
+          {state.currentLanguage === 'en'
+            ? "Scan the QR code to download our mobile app and complete the scanning process securely."
+            : "Scannez le code QR pour télécharger notre application et terminer la numérisation en toute sécurité."}
+        </Text>
+      </View>
 
-              <View style={styles.qrCodeWrapper}>
-                <QRCode
-                  value={
-                    qrPlatform === 'android'
-                      ? 'https://play.google.com/store/apps/details?id=transfergratis.com&hl=en_CA&gl=US'
-                      : 'https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731'
-                  }
-                  size={200} // Slightly reduced to accommodate the toggle switch
-                  backgroundColor="#FFFFFF"
-                  color="#0F172A"
-                />
-              </View>
+      <View style={styles.qrToggleContainer}>
+        <TouchableOpacity
+          style={[styles.qrToggleButton, qrPlatform === 'android' && styles.qrToggleButtonActive]}
+          onPress={() => setQrPlatform('android')}
+        >
+          <Text style={[styles.qrToggleText, qrPlatform === 'android' && styles.qrToggleTextActive]}>
+            Android
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[styles.qrToggleButton, qrPlatform === 'ios' && styles.qrToggleButtonActive]}
+          onPress={() => setQrPlatform('ios')}
+        >
+          <Text style={[styles.qrToggleText, qrPlatform === 'ios' && styles.qrToggleTextActive]}>
+            iOS (Apple)
+          </Text>
+        </TouchableOpacity>
+      </View>
 
-              {isWebScanningRestricted && (
-                <View style={styles.storeLinksContainer}>
-                  <Text style={styles.storeLinksTitle}>
-                    {state.currentLanguage === 'en' ? 'Or click to open directly:' : 'Ou cliquez pour ouvrir directement :'}
-                  </Text>
-                  <View style={styles.storeButtonsRow}>
-                    <TouchableOpacity
-                      style={styles.storeButton}
-                      onPress={() => window.open('https://play.google.com/store/apps/details?id=transfergratis.com&hl=en_CA&gl=US', '_blank')}
-                    >
-                      <Text style={styles.storeButtonText}>Google Play</Text>
-                    </TouchableOpacity>
-                    <TouchableOpacity
-                      style={styles.storeButton}
-                      onPress={() => window.open('https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731', '_blank')}
-                    >
-                      <Text style={styles.storeButtonText}>App Store</Text>
-                    </TouchableOpacity>
-                  </View>
-                </View>
-              )}
+      <View style={styles.qrCodeWrapper}>
+        <QRCode
+          value={
+            qrPlatform === 'android'
+              ? 'https://play.google.com/store/apps/details?id=transfergratis.com&hl=en_CA&gl=US'
+              : 'https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731'
+          }
+          size={180} 
+          backgroundColor="#FFFFFF"
+          color="#0F172A"
+        />
+      </View>
 
-              <View style={styles.listeningContainer}>
-                <ActivityIndicator size="small" color="#2DBD60" />
-                <Text style={styles.listeningText}>
-                  {state.currentLanguage === 'en' ? "Waiting for you to complete on mobile..." : "En attente de votre complétion sur mobile..."}
-                </Text>
-              </View>
+      <View style={styles.linkCodeSection}>
+        <Text style={styles.linkCodeHeader}>
+          {state.currentLanguage === 'en' ? 'Use code below to proceed on the Sanctum Key App.' : 'Vous avez déjà l\'application ? Liez-la :'}
+        </Text>
+        
+        {generatedCode && codeTimeLeft > 0 ? (
+          <View style={styles.activeCodeContainer}>
+            <Text style={styles.activeCodeText}>{generatedCode}</Text>
+            <Text style={styles.timerText}>
+              {state.currentLanguage === 'en' ? `Expires in ${formatTime(codeTimeLeft)}` : `Expire dans ${formatTime(codeTimeLeft)}`}
+            </Text>
+          </View>
+        ) : (
+          <TouchableOpacity 
+            style={styles.generateCodeButton} 
+            onPress={handleGenerateCode}
+            disabled={isGeneratingCode}
+          >
+            {isGeneratingCode ? (
+               <ActivityIndicator size="small" color="#0F172A" />
+            ) : (
+              <Text style={styles.generateCodeButtonText}>
+                {state.currentLanguage === 'en' ? 'Generate 5-Digit Link Code' : 'Générer un code à 5 chiffres'}
+              </Text>
+            )}
+          </TouchableOpacity>
+        )}
+      </View>
 
-              <Button
-                title={state.currentLanguage === 'en' ? "Cancel & Stay on Laptop" : "Annuler et rester sur l'ordinateur"}
-                onPress={() => setShowQRModal(false)}
-                variant="outline"
-                fullWidth
-              />
-            </View>
+      {isWebScanningRestricted && (
+        <View style={styles.storeLinksContainer}>
+          <Text style={styles.storeLinksTitle}>
+            {state.currentLanguage === 'en' ? 'Or click to open directly:' : 'Ou cliquez pour ouvrir directement :'}
+          </Text>
+          <View style={styles.storeButtonsRow}>
+            <TouchableOpacity style={styles.storeButton} onPress={() => window.open('https://play.google.com/store/apps/details?id=transfergratis.com&hl=en_CA&gl=US', '_blank')} >
+              <Text style={styles.storeButtonText}>Google Play</Text>
+            </TouchableOpacity>
+            <TouchableOpacity style={styles.storeButton} onPress={() => window.open('https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731', '_blank')} >
+              <Text style={styles.storeButtonText}>App Store</Text>
+            </TouchableOpacity>
           </View>
+        </View>
+      )}
+
+      <Button
+        title={state.currentLanguage === 'en' ? "Cancel & Stay on Laptop" : "Annuler et rester sur l'ordinateur"}
+        onPress={() => setShowQRModal(false)}
+        variant="outline"
+        fullWidth
+      />
+    </View>
+  </View>
 )}
     </View>
   );
@@ -1172,4 +1246,51 @@ const styles = StyleSheet.create({
   qrToggleTextActive: {
     color: '#0F172A', // Active text color
   },
+  linkCodeSection: {
+    width: '100%',
+    alignItems: 'center',
+    backgroundColor: '#F8FAFC', // Very light slate
+    borderRadius: 16,
+    padding: 16,
+    marginBottom: 20,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+  },
+  linkCodeHeader: {
+    fontSize: 13,
+    color: '#475569',
+    fontWeight: '600',
+    marginBottom: 12,
+  },
+  generateCodeButton: {
+    backgroundColor: '#E2E8F0',
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    borderRadius: 10,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 44, // Fixed height to prevent jumping during loading state
+  },
+  generateCodeButtonText: {
+    color: '#0F172A',
+    fontWeight: '700',
+    fontSize: 14,
+  },
+  activeCodeContainer: {
+    alignItems: 'center',
+    width: '100%',
+  },
+  activeCodeText: {
+    fontSize: 32,
+    fontWeight: '900',
+    color: '#2DBD60',
+    letterSpacing: 4,
+    marginBottom: 4,
+  },
+  timerText: {
+    fontSize: 12,
+    color: '#EF4444', // Red to indicate urgency
+    fontWeight: '600',
+  },
 });

package/src/components/TemplateKYCExample.tsx

@@ -145,13 +145,14 @@ export interface TemplateKYCExampleProps {
   API_KEY?: string;
   templateId?: string;
   template?: KYCTemplate;
-  env?: KycEnvironment;           // Flow execution: PRODUCTION (full AI) or SANDBOX (skip AI)
-  serverEnv?: BackendEnvironment; // Backend to call: PRODUCTION or TEST (API URL)
+  env?: KycEnvironment;           
+  serverEnv?: BackendEnvironment; 
   existingSessionId?: string;
   initialComponentIndex?: number;
   initialCountryResume?: { code: string; documentType: string; region?: string };
   referenceId?: string;
   onSessionSave?: (sessionId: string) => void;
+  kyc_session_id?: string;
 }
 
 export function TemplateKYCExample({ 
@@ -168,7 +169,8 @@ export function TemplateKYCExample({
   initialComponentIndex, 
   initialCountryResume, 
   referenceId, 
-  onSessionSave 
+  onSessionSave,
+  kyc_session_id 
 }: TemplateKYCExampleProps): JSX.Element { // <--- Explicit Return Type
 
   const handleComplete = (data: VerificationState) => {
@@ -209,6 +211,8 @@ export function TemplateKYCExample({
           initialCountryResume={initialCountryResume}
           referenceId={referenceId}
           onSessionSave={onSessionSave}
+          kyc_session_id={kyc_session_id}
+          
         />
       </View>
     </SafeAreaView>

package/src/components/TemplateKYCFlowRefactored.tsx

@@ -38,6 +38,7 @@ interface TemplateKYCFlowProps {
   initialCountryResume?: { code: string; documentType: string; region?: string };
   referenceId?: string;
   onSessionSave?: (sessionId: string) => void;
+  kyc_session_id?: string;
 }
 
 export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
@@ -55,6 +56,7 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
   initialCountryResume,
   referenceId,
   onSessionSave,
+  kyc_session_id,
 }) => {
   const { t } = useI18n();
   const { template: loadedTemplate, isLoading, error, loadTemplate } = useTemplateLoader();
@@ -158,6 +160,7 @@ export const TemplateKYCFlow: React.FC<TemplateKYCFlowProps> = ({
       initialCountryResume={initialCountryResume}
       referenceId={referenceId}
       onSessionSave={onSessionSave}
+      kyc_session_id={kyc_session_id}
     >
       <TemplateKYCFlowContent onCancel={OnCancel} />
     </TemplateKYCFlowProvider>

package/src/hooks/useTemplateKYCFlow.tsx

@@ -41,6 +41,7 @@ interface TemplateKYCFlowProviderProps {
   initialCountryResume?: { code: string; documentType: string; region?: string };
   referenceId?: string;
   onSessionSave?: (sessionId: string) => void;
+  kyc_session_id?: string;
 }
 
 export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = ({
@@ -57,8 +58,25 @@ export const TemplateKYCFlowProvider: React.FC<TemplateKYCFlowProviderProps> = (
   initialCountryResume,
   referenceId,
   onSessionSave,
+  kyc_session_id
 }) => {
-  const hookResult = useTemplateKYCFlow(template, onComplete, onError, onCancel, initialLanguage, apiKey, env, existingSessionId, initialComponentIndex, initialCountryResume, referenceId, onSessionSave);
+  const finalSessionId = existingSessionId || kyc_session_id;
+
+  const hookResult = useTemplateKYCFlow(
+    template,
+    onComplete,
+    onError,
+    onCancel,
+    initialLanguage,
+    apiKey,
+    env,
+    finalSessionId,
+    initialComponentIndex,
+    initialCountryResume,
+    referenceId,
+    onSessionSave
+  );
+
 
   return (
     <TemplateKYCFlowContext.Provider value={hookResult}>
@@ -668,10 +686,9 @@ export const useTemplateKYCFlow = (
           error: null,
         },
       }));
-      logger.log('Initializing session');
 
+      logger.log('Initializing session');
       const token = apiKey ? undefined : await authentification();
-      console.log('token in initializeSession', { token, apiKey });
 
       if (!token && !apiKey) {
         throw new Error("Cannot proceed: Authentication token and API key are both missing.");
@@ -679,15 +696,37 @@ export const useTemplateKYCFlow = (
 
       let resolvedSessionId = state.session.session_id;
 
+      // 🚨 THE FIX: If we ALREADY have a session ID from the referral code/props
       if (resolvedSessionId && resolvedSessionId.length > 0) {
-        logger.log('Resuming existing session:', resolvedSessionId);
-      } else {
-        const newSessionRes = await kycService.newSession({ token, apiKey });
-        resolvedSessionId = newSessionRes?.session_id;
+        logger.log('Resuming existing session from props:', resolvedSessionId);
 
-        if (!resolvedSessionId) {
-          throw new Error("Backend response did not contain a valid session_id.");
+        if (onSessionSave && !hasSavedSessionRef.current) {
+          hasSavedSessionRef.current = true;
+          onSessionSave(resolvedSessionId);
         }
+
+        // Just mark it as initialized and EXIT. 
+        // We DO NOT call `newSession` or `initialize_session` to avoid overwriting referral data!
+        setState(prev => ({
+          ...prev,
+          session: {
+            ...prev.session,
+            session_id: resolvedSessionId,
+            token: token ?? "",
+            isInitialized: true,
+            isProcessing: false,
+            error: null,
+          }
+        }));
+        return; 
+      }
+
+      // --- NORMAL FLOW (No Referral Code / Blank Canvas) ---
+      const newSessionRes = await kycService.newSession({ token, apiKey });
+      resolvedSessionId = newSessionRes?.session_id;
+
+      if (!resolvedSessionId) {
+        throw new Error("Backend response did not contain a valid session_id.");
       }
 
       if (onSessionSave && !hasSavedSessionRef.current && resolvedSessionId) {
@@ -697,23 +736,22 @@ export const useTemplateKYCFlow = (
 
       const templateId = chooseTemplateId(templateWithReviewAndVerification);
 
-      // This is the API call that we know succeeds
-     await kycService.verificationSession({
-      session_id: resolvedSessionId,
-      step: 0,
-      data: {
-        template_id: templateId,
-        ...(referenceId ? { reference_id: referenceId } : {}),
-        metadata: {
-          language: initialLanguage,
+      // This is the API call that we know succeeds for fresh sessions
+      await kycService.verificationSession({
+        session_id: resolvedSessionId,
+        step: 0,
+        data: {
+          template_id: templateId,
+          ...(referenceId ? { reference_id: referenceId } : {}),
+          metadata: {
+            language: initialLanguage,
+          },
         },
-      },
-      templateId: templateId,
-      token: token ?? "",
-      action: 'initialize_session',
-      apiKey: apiKey,
-    });
-
+        templateId: templateId,
+        token: token ?? "",
+        action: 'initialize_session',
+        apiKey: apiKey,
+      });
 
       setState(prev => ({
         ...prev,
@@ -726,15 +764,9 @@ export const useTemplateKYCFlow = (
           error: null,
         }
       }));
-
     } catch (error: any) {
-      // ✅ FIX: Extract the actual message so it doesn't log as {}
-      const errorMessage = error?.response?.data?.message 
-        || error?.message 
-        || "Erreur lors de l'initialisation de la session";
-
-      logger.error('Error initializing sessionnnn:', errorMessage);
-      
+      const errorMessage = error?.response?.data?.message || error?.message || "Erreur lors de l'initialisation de la session";
+      logger.error('Error initializing session:', errorMessage);
       setState(prev => ({
         ...prev,
         session: {
@@ -747,7 +779,6 @@ export const useTemplateKYCFlow = (
     }
   }, [apiKey, referenceId, chooseTemplateId, templateWithReviewAndVerification, initialLanguage, state.session.session_id, onSessionSave]);
 
-  // When user switches device: resume with existingSessionId + initialStep — ensure session is initialized so loadSessionData runs
   useEffect(() => {
     if (!existingSessionId || state.session.isInitialized) return;
     if (state.session.session_id !== existingSessionId) return;

package/src/index.ts

@@ -1,11 +1,11 @@
-export * from './SanctumKeySdk.types';
-
+// Explicitly mark these as type-only exports to prevent Web Bundler crashes
+export type * from './SanctumKeySdk.types';
 
 // Export KYC types
-export * from './types/KYC.types';
+export type * from './types/KYC.types';
 
 // Export Environment types
-export * from './types/env.types';
+export type * from './types/env.types';
 
 
 export { TemplateKYCExample as LaunchSanctumKeyKYC } from './components/TemplateKYCExample';
@@ -26,4 +26,4 @@ export { EnhancedCameraView } from './components/EnhancedCameraView';
 export { UnifiedCameraModule } from './modules/camera';
 
 // Export Web KYC Components
-export { WebKYCEntry } from './web';
+export { default as WebKYCEntry } from './web/WebKYCEntry';

package/src/modules/api/KYCService.ts

@@ -1037,6 +1037,47 @@ async validateBackTemplate(params: {
     throw new Error(typeof errorMsg === 'string' ? errorMsg : 'Template validation failed');
   }
 }
+
+/**
+   * Generates a new referral code for a specific session.
+   * Endpoint: POST /api/v1/core/referral-code/generate/
+   */
+async generateReferralCode(
+  payload: { session_id: string; [key: string]: any }, 
+  apiKey: string // 🚨 Now strictly required
+): Promise<any> {
+  try {
+    logger.log(`Generating referral code for session: ${payload.session_id}`);
+
+    if (!apiKey) {
+      throw new Error("Authentication failed: API key is required.");
+    }
+
+    const url = `${KYCConfig.getBackendUrl()}/core/referral-code/generate/`;
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      "Authorization": `ApiKey ${apiKey}` // 🚨 Strictly using ApiKey
+    };
+
+    const res = await axios.post(url, payload, { 
+      headers,
+      timeout: 8000 
+    });
+
+    logger.log("generateReferralCode SUCCESS:", JSON.stringify(res.data, null, 2));
+    return res.data;
+
+  } catch (error: any) {
+    const parsedError = errorMessage(error);
+    const finalErrorMessage = parsedError || error?.message || "Failed to generate referral code";
+    logger.error("Error generating referral code:", typeof finalErrorMessage === 'string' ? finalErrorMessage : JSON.stringify(finalErrorMessage));
+    throw new Error(typeof finalErrorMessage === 'string' ? finalErrorMessage : JSON.stringify(finalErrorMessage));
+  }
+}
+
+
+
 }
 
 const kycService = new KYCService("", "");

package/src/modules/camera/NativeCameraModule.web.ts

@@ -0,0 +1,61 @@
+import { Platform } from "react-native";
+
+export interface CameraCaptureResult {
+  success: boolean;
+  path?: string;
+  error?: string;
+}
+
+export interface FilePickerResult {
+  success: boolean;
+  uri?: string;
+  path?: string;
+  error?: string;
+}
+
+export class NativeCameraModule {
+  constructor() {
+    console.log('NativeCameraModule (WEB) constructor called');
+    console.log('Platform:', Platform.OS);
+  }
+
+  async testModule(): Promise<string> {
+    return 'Web Module Mock Successful';
+  }
+
+  async requestCameraPermission(): Promise<boolean> {
+    console.warn('Camera permission mock on Web');
+    // For a real web implementation, you would use navigator.mediaDevices.getUserMedia
+    return true; 
+  }
+
+  async openCameraWithInstructions(instructions: string): Promise<CameraCaptureResult> {
+    console.warn('Native camera cannot be opened on the web.');
+    return {
+      success: false,
+      error: 'Camera capture is not supported in the web mock yet.'
+    };
+  }
+
+  async openFilePicker(allowedTypes: string[] = ['*/*']): Promise<FilePickerResult> {
+    console.warn('Native file picker cannot be opened on the web.');
+    return {
+      success: false,
+      error: 'File picking is not supported in the web mock yet.'
+    };
+  }
+
+  onCameraCapture(callback: (event: any) => void) {
+    return { remove: () => {} };
+  }
+
+  onFileSelected(callback: (event: any) => void) {
+    return { remove: () => {} };
+  }
+
+  onError(callback: (event: any) => void) {
+    return { remove: () => {} };
+  }
+}
+
+export default new NativeCameraModule();