SK-1976 update README and sample for error override (#168)

Author: skyflow-shravan

README.md

@@ -1088,6 +1088,87 @@ export default App
   value: '41111111XXXXXXXX',
 };
 ```
+
+### Override default error Messages
+
+You can override the default error messages with custom ones by using `setErrorOverride`. This is especially useful to override default error messages in non-English languages.
+
+To override error messages dynamically, you need to:
+
+  1. Create a ref using `React.useRef`.
+
+  2. Pass the ref to the Skyflow element for which you want to set the custom error.
+
+  3. Use `setErrorOverride` on ref.current to set the custom message.
+
+`setErrorOverride` overrides the default error message when the value is invalid. The error resets automatically when the value becomes valid.
+
+```javascript
+import {
+  CardNumberElement,
+  useCollectContainer,
+  CardHolderNameElement,
+  SkyflowCollectElementRef,
+} from 'skyflow-react-js';
+
+const CollectElements = () => {
+  const container = useCollectContainer();
+
+  const cardNumberRef = React.useRef<SkyflowCollectElementRef | null>(null);
+  const cardholderNameRef = React.useRef<SkyflowCollectElementRef | null>(null);
+
+  const onCardNumberBlur = (state: any) => {
+    if(state.isEmpty){
+      //can override the message when the field is required and empty
+      cardNumberRef.current?.setErrorOverride("custom error for required");
+    } else if(!state.isValid){
+      //can override the message when the input is invalid
+      cardNumberRef.current?.setErrorOverride("custom error for invalid number");
+    }
+  }
+
+  const onCardholderNameBlur = (state: any) => {
+    if(state.isEmpty){
+      //can override the message when the field is required and empty
+      cardNameRef.current?.setErrorOverride("custom error for required");
+    } else if(!state.isValid){
+      //can override the message when the input is invalid
+      cardNameRef.current?.setErrorOverride("custom error for invalid name");
+    }
+  }
+
+  return (
+    <div>
+     <CardNumberElement
+        id={'collectCardNumber'}
+        container={container}
+        table={'table1'}
+        column={'card_number'}
+        label='Card number'
+        ref={cardNumberRef}
+        options={{required:true}}
+        onBlur={onCardNumberBlur}
+      />
+      <CardHolderNameElement
+        id={'collectCardName'}
+        container={container}
+        table={'table1'}
+        column={'cardholder_name'}
+        label='Name'
+        ref={cardNameRef}
+        options={{required:true}}
+        onBlur={onCardholderNameBlur}
+      />
+    </div>
+  )
+}
+```
+
+**Note**:
+- Maintain different references for different elements.
+- `setErrorOverride` can only override default error messages.
+- `setErrorOverride` can only be used in BLUR event listener as shown in the above example.
+
 ## Using Skyflow File Input Element to upload a file
 
 You can upload binary files to a vault using the Skyflow File Input Element. Use the following steps to securely upload a file.

samples/SkyflowElements/src/App.tsx

@@ -14,6 +14,7 @@ import DynamicCollectElements from './components/DynamicCollectElements';
 import DynamicRevealElements from './components/DynamicRevealElements';
 import CardBrandChoice from './components/CardBrandChoice';
 import ThreeDSHelperFunctions from './components/3DSHelperFunctions';
+import OverrideDefaultErrors from './components/OverrideDefaultErrors'
 
 const App = () => {
 
@@ -64,36 +65,48 @@ const App = () => {
         </p>
         <CustomValidations />
       </div>
+      <br />
       <div id='Sample for Composable Elements In Modal'>
         <p>
           <b>Sample Composable Elements Dynamic properties update</b>
         </p>
         <DynamicComposableElements />
       </div>
+      <br />
       <div id='Sample for Collect Elements Update Properties'>
         <p>
           <b>Sample Collect Elements Dynamic properties update</b>
         </p>
         <DynamicCollectElements />
       </div>
+      <br />
       <div id='Sample for Reveal Elements Update Properties'>
         <p>
           <b>Sample Reveal Elements Dynamic properties update</b>
         </p>
         <DynamicRevealElements />
       </div>
+      <br />
       <div id='Sample for Card Brand Choice'>
         <p>
           <b>Sample Card Brand Choice</b>
         </p>
         <CardBrandChoice />
       </div>
+      <br />
       <div id='Sample for 3DS Helper Functions'>
         <p>
           <b>Sample 3DS Helper Functions</b>
         </p>
         <ThreeDSHelperFunctions />
       </div>
+      <br />
+      <div id='Sample for override default error messages'>
+        <p>
+          <b>Override default error messages</b>
+        </p>
+        <OverrideDefaultErrors />
+      </div>
     </div>
   );
 };

samples/SkyflowElements/src/components/OverrideDefaultErrors/index.tsx

@@ -0,0 +1,127 @@
+/*
+	Copyright (c) 2022 Skyflow, Inc.
+*/
+import React from 'react';
+import {
+  CardNumberElement,
+  useCollectContainer,
+  useMakeSkyflowStyles,
+  CardHolderNameElement,
+  SkyflowCollectElementRef,
+} from 'skyflow-react-js';
+
+const OverrideDefaultErrors = () => {
+  const container = useCollectContainer();
+
+  const handleCollect = () => {
+    const response = container.collect();
+    response
+      .then((res: unknown) => {
+        console.log(JSON.stringify(res));
+      })
+      .catch((e: unknown) => {
+        console.log(e);
+      });
+  };
+
+  const useStyles = useMakeSkyflowStyles({
+    inputStyles: {
+      base: {
+        border: '1px solid black',
+        borderRadius: '4px',
+        color: '#1d1d1d',
+        padding: '10px 16px',
+        fontFamily: '"Roboto", sans-serif'
+      },
+      complete: {
+        color: '#4caf50',
+      },
+      empty: {},
+      focus: {},
+      invalid: {
+        color: '#f44336',
+      },
+      global: {
+        '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+      }
+    },
+    labelStyles: {
+      base: {
+        fontSize: '16px',
+        fontWeight: 'bold',
+        fontFamily: '"Roboto", sans-serif'
+      },
+      global: {
+        '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+      },
+      requiredAsterisk:{
+        color: 'red'
+      }
+    },
+    errorTextStyles: {
+      base: {
+        color: 'red',
+        fontFamily: '"Roboto", sans-serif'
+      },
+      global: {
+        '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+      },
+    },
+  });
+
+  const classes = useStyles();
+
+  const cardNumberRef = React.useRef<SkyflowCollectElementRef | null>(null);
+
+  const cardholderNameRef = React.useRef<SkyflowCollectElementRef | null>(null);
+
+  const onCardNumberBlur = (state: any) => {
+    if(state.isEmpty){
+      //can override the message when the field is required and empty
+      cardNumberRef.current?.setErrorOverride("custom error for required");
+    } else if(!state.isValid){
+      //can override the message when the input is invalid
+      cardNumberRef.current?.setErrorOverride("custom error for invalid number");
+    }
+  }
+
+  const onCardholderNameBlur = (state: any) => {
+    if(state.isEmpty){
+      //can override the message when the field is required and empty
+      cardholderNameRef.current?.setErrorOverride("custom error for required");
+    } else if(!state.isValid){
+      //can override the message when the input is invalid
+      cardholderNameRef.current?.setErrorOverride("custom error for invalid name");
+    }
+  }
+
+  return (
+    <div className='CollectElements' style={{width: '300px'}}>
+      <CardNumberElement
+        id={'collectCardNumber'}
+        container={container}
+        table={'cards'}
+        classes={classes}
+        column={'card_number'}
+        label='Card number'
+        ref={cardNumberRef}
+        options={{required:true}}
+        onBlur={onCardNumberBlur}
+      />
+      <CardHolderNameElement
+        id={'collectCardName'}
+        container={container}
+        table={'cards'}
+        classes={classes}
+        column={'cardholder_name'}
+        label='Name'
+        ref={cardholderNameRef}
+        options={{required:true}}
+        onBlur={onCardholderNameBlur}
+      />
+      <button onClick={handleCollect}>Collect</button>
+    </div>
+  );
+};
+
+export default OverrideDefaultErrors;