SK-2050: add SkyflowRevealElementRef type

Author: saileshwar-skyflow

example/src/App.tsx

@@ -26,11 +26,28 @@ const App = () => {
       return new Promise((resolve, reject) => {
         const Http = new XMLHttpRequest();
 
-        resolve('eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2MiOiJiOTYzZTcxMjFkZDY0YTZkOTY0MGQ3ZTNlNGNjODdhNyIsImF1ZCI6Imh0dHBzOi8vbWFuYWdlLWJsaXR6LnNreWZsb3dhcGlzLmRldiIsImV4cCI6MTc2NjMyNzg5NCwiaWF0IjoxNzY2MjQxNDk0LCJpc3MiOiJzYS1hdXRoQG1hbmFnZS1ibGl0ei5za3lmbG93YXBpcy5kZXYiLCJqdGkiOiJwZWViYTFiYmExZTA0ODFjODk0ZGM2MWVjN2ZhODk5OSIsInN1YiI6Im0xODQ2YzA2M2FlODQ4MjhhNzM4OWQ3ZTc0OTE5MzE5In0.c1n87PWuKU0LJ2-tSwlK5rsTUfjE_zKKAkeDYclkP0Xh_6gnAynA83UoxJV8qDbPsmu1zuCXW7Pt4-M6kCDUViVkv2KhHYDbDByXl_PG7cVNrj0d6kxkUm_FORRFmyyCWZKy3S2tomdw_gQar2LakuENuWXAR2gL5LSywb_XZmJxgolLe6RdqcHxdSQTV5j7PkjbhfSnkuMaFK0_z8fA8Wdm-44aCa-eALAFEHCZ0-YiQqlB_24ERQxL9bfD6dxiVJqyWVEg-hrGUE0WDUtNQVhoevbcQdC7GxH7AA_yk2xUxxJh7w7OzN1-YBmQWXGgQUZg4DXT9qnugNxeH8B6Tg')
+        Http.onreadystatechange = () => {
+          if (Http.readyState === 4) {
+            if (Http.status === 200) {
+              const response = JSON.parse(Http.responseText);
+              resolve(response.accessToken);
+            } else {
+              reject('Error occured');
+            }
+          }
+        };
+
+        Http.onerror = error => {
+          reject('Error occured');
+        };
+
+        const url = '<YOUR_AUTH_BEARER_TOKEN_API_URL>';
+        Http.open('GET', url);
+        Http.send();
       });
     },
-    vaultID: 'tfe60a6eef66434b82e982285610e668',
-    vaultURL: 'https://qhdmceurtnlz.vault.skyflowapis.dev',
+    vaultID: '<VAULT_ID>',
+    vaultURL: '<VAULT_URL>',
     options: {
       logLevel: LogLevel.ERROR,
       env: Env.PROD,
@@ -40,7 +57,7 @@ const App = () => {
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <SkyflowProvider config={skyflowConfig}>
-        {/* {!displayCollect && !displayComposable && !displayCobrandedCard && <>
+        {!displayCollect && !displayComposable && !displayCobrandedCard && <>
           <View style={{ margin: 10 }}>
             <Button onPress={() => { setDisplayCollect(true) }} title='Collect And Reveal Elements' />
           </View>
@@ -50,14 +67,14 @@ const App = () => {
           <View style={{ margin: 10 }}>
             <Button onPress={() => { setDisplayCobrandedCard(true) }} title='Co-branded Card' />
           </View>
-        </>} */}
+        </>}
 
-        {true && <ElementView handleReset={handleReset} />}
-        {/* {displayComposable && <ComposableElements handleReset={handleReset} />}
-        {displayCobrandedCard && <CardBrandChoice handleReset={handleReset} />} */}
+        {displayCollect && <ElementView handleReset={handleReset} />}
+        {displayComposable && <ComposableElements handleReset={handleReset} />}
+        {displayCobrandedCard && <CardBrandChoice handleReset={handleReset} />}
       </SkyflowProvider>
     </SafeAreaView>
   );
 };
 
-export default App;
+export default App;

example/src/ElementView.tsx

@@ -19,7 +19,7 @@ const ElementView = (props) => {
 
   return (
     <View style={styles.container}>
-      {true ? (
+      {showReveal ? (
         <RevealElements tokens={tokens} setShowRevealView={setShowRevealView} handleReset={props.handleReset}/>
       ) : (
         <CollectElements setTokens={setTokens} handleReset={props.handleReset}/>
@@ -35,4 +35,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default ElementView;
+export default ElementView;

example/src/RevealElements.tsx

@@ -2,7 +2,7 @@
   Copyright (c) 2022 Skyflow, Inc.
 */
 
-import React, { useRef } from 'react';
+import React from 'react';
 import { Button, StyleSheet, View } from 'react-native';
 import {
   RedactionType,
@@ -15,8 +15,6 @@ const RevealElements = (props) => {
   const revealContainer = useRevealContainer();
   const skyflowContainer = useSkyflow();
 
-  const revealElementRef = useRef(null);
-
   const handleReveal = () => {
     revealContainer
       .reveal()
@@ -28,16 +26,6 @@ const RevealElements = (props) => {
       });
   };
 
-  const handleSetToken = () => {
-    if (revealElementRef.current) {
-      console.log('Updating token via Ref...');
-      // This calls the setToken method you defined in useImperativeHandle inside the SDK
-      revealElementRef.current.setToken('57b28973-9690-4031-88fe-b98650d3ac93'); 
-    } else {
-      console.error('Ref is null, cannot set token');
-    }
-  };
-
   const handleGet = () =>{
     const getRecord1 = {
       ids: [
@@ -86,8 +74,7 @@ const RevealElements = (props) => {
   return (
     <View>
       <RevealElement
-        ref={revealElementRef}
-        token={'INVALID_TOKEN'}
+        token={props.tokens.card_number}
         container={revealContainer}
         label='Card Number'
         altText='XXXX XXXX XXXX XXXX'
@@ -96,7 +83,7 @@ const RevealElements = (props) => {
         errorTextStyles={revealerrorTextStyles}
         redaction={RedactionType.REDACTED}
       />
-      {/* <RevealElement
+      <RevealElement
         token={props.tokens.expiration_date}
         container={revealContainer}
         label='Expiration Date'
@@ -124,12 +111,20 @@ const RevealElements = (props) => {
         inputStyles={revealInputStyles}
         labelStyles={revealLabelStyles}
         errorTextStyles={revealerrorTextStyles}
-      /> */}
+      />
       <View style={buttonStyles.button}>
         <Button title='Reveal' onPress={handleReveal} />
       </View>
       <View style={buttonStyles.button}>
-        <Button title='Update Token (Set Token)' color="#841584" onPress={handleSetToken} />
+        <Button title='Get method' onPress={handleGet} />
+      </View>
+      <View style={buttonStyles.button}>
+        <Button
+          title='GO TO COLLECT'
+          onPress={() => {
+            props.setShowRevealView(null);
+          }}
+        />
       </View>
       <View style={buttonStyles.button}>
         <Button
@@ -166,4 +161,4 @@ const buttonStyles = StyleSheet.create({
     margin: 10,
   },
 });
-export default RevealElements;
+export default RevealElements;

src/components/RevealElement/index.tsx

@@ -4,13 +4,13 @@
 import React, { useEffect, useImperativeHandle, forwardRef } from "react";
 import { Text } from "react-native";
 import RevealSkyflowElement from "../../core/RevealSkyflowElement";
-import { RevealElementProps } from "../../utils/constants"
+import { RevealElementProps, SkyflowRevealElementRef } from "../../utils/constants"
 import SkyflowError from "../../utils/skyflow-error";
 import SKYFLOW_ERROR_CODE from "../../utils/skyflow-error-code";
 import { formatInputFieldValue } from "../../utils/helpers";
 import { DEFAULT_INPUT_FIELD_TRANSLATION } from "../../core/constants";
 
-const RevealElement = forwardRef((props: RevealElementProps, ref) => {
+const RevealElement = forwardRef<SkyflowRevealElementRef, RevealElementProps>((props, ref) => {
     const { container, label, format, translation, ...rest } = props;
 
     const [element, setElement] = React.useState<RevealSkyflowElement | undefined>(undefined);

src/index.ts

@@ -9,6 +9,7 @@ export {
   LogLevel,
   ValidationRuleType,
   RedactionType,
+  SkyflowRevealElementRef,
 } from './utils/constants';
 export { CardType } from './core/constants'
 export { default as useCollectContainer } from './hooks/useCollectContainer';

src/utils/constants/index.ts

@@ -137,6 +137,10 @@ export interface IRevealResponseType {
   errors?: Record<string, any>[];
 }
 
+export interface SkyflowRevealElementRef {
+    setToken: (newToken: string) => void;
+}
+
 export enum ValidationRuleType {
   REGEX_MATCH_RULE = 'REGEX_MATCH_RULE',
   LENGTH_MATCH_RULE = 'LENGTH_MATCH_RULE',