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

package/build/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sanctum-key/react-native-sdk",
-    "version": "1.0.27",
+    "version": "1.0.28",
     "description": "Sanctum Key React Native SDK",
     "main": "build/src/index.js",
     "types": "build/src/index.d.ts",

package/build/src/components/KYCElements/IDCardCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IDCardCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/KYCElements/IDCardCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,EAAE,iBAAiB,EAAoI,MAAM,uBAAuB,CAAC;AAsB5L,UAAU,cAAc;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACvC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAg/BtD,CAAC"}
+{"version":3,"file":"IDCardCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/KYCElements/IDCardCapture.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAIpE,OAAO,EAAE,iBAAiB,EAAoI,MAAM,uBAAuB,CAAC;AAsB5L,UAAU,cAAc;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,kBAAkB;IAC1B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IACvC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,GAAG,MAAM,CAAC,KAAK,IAAI,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAUD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0jCtD,CAAC"}

package/build/src/components/KYCElements/IDCardCapture.js

@@ -47,6 +47,58 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
     const [scanPhase, setScanPhase] = useState('image');
     const [pendingCAImage, setPendingCAImage] = useState(null);
     const scannedBarcodeRef = useRef(null);
+    // 🚨 NEW: State for the expiring link code
+    const [generatedCode, setGeneratedCode] = useState(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) => {
+        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) {
+            showAlert('Error', error.message || 'Failed to generate code');
+        }
+        finally {
+            setIsGeneratingCode(false);
+        }
+    };
     useEffect(() => {
         if (typeof window !== 'undefined' && window.location)
             setCurrentUrl(window.location.href);
@@ -814,62 +866,71 @@ export const IDCardCapture = ({ component, value = {}, onValueChange, error, lan
       </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'
+    <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>
+        </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.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.qrCodeWrapper}>
-                <QRCode value={qrPlatform === 'android'
+      <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>
+                : 'https://apps.apple.com/ca/app/transfergratis-money-transfer/id1605411731'} size={180} backgroundColor="#FFFFFF" color="#0F172A"/>
+      </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.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>
 
-              <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>
+      {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>)}
+      <Button title={state.currentLanguage === 'en' ? "Cancel & Stay on Laptop" : "Annuler et rester sur l'ordinateur"} onPress={() => setShowQRModal(false)} variant="outline" fullWidth/>
+    </View>
+  </View>)}
     </View>);
 };
 const styles = StyleSheet.create({
@@ -986,5 +1047,52 @@ 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',
+    },
 });
 //# sourceMappingURL=IDCardCapture.js.map