Merge pull request #209 from skyflowapi/sk-235-readme-and-sample-for-input-formatting

SK-235 Add Readme and Sample for Input formatting

Author: aadarsh-st

README.md

@@ -323,7 +323,8 @@ Along with Collect Element we can define other options which takes a object of o
 const options = {
   required: false, // Optional, indicates whether the field is marked as required. Defaults to 'false'.
   enableCardIcon: true, // Optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType).
-  format: String, // Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType).
+  format: String, // Optional, format for the element.
+  translation: {}, // Optional, indicates the allowed data type value for format. 
   enableCopy: false, // Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false').
   allowedFileType: string[], // Optional, allowed extensions for the file to be uploaded.
   cardMetadata: {}, // Optional, metadata to control card number element behavior. (only applicable for CARD_NUMBER ElementType).
@@ -336,25 +337,57 @@ const options = {
 
 - `enableCardIcon` parameter indicates whether the icon is visible for the CARD_NUMBER element, defaults to true
 
-- `format` parameter takes string value and indicates the format pattern applicable to the element type, It's currently only applicable to `EXPIRATION_DATE` and `EXPIRATION_YEAR` element types.
 
 - `enableCopy` parameter indicates whether the copy icon is visible in collect and reveal elements.
 
 - `allowedFileType` parameter indicates the allowedFileType extensions to be uploaded.
 
-The values that are accepted for `EXPIRATION_DATE` are
+- `format`: A string value that indicates the format pattern applicable to the element type.
+    Only applicable to EXPIRATION_DATE, CARD_NUMBER, EXPIRATION_YEAR, and INPUT_FIELD elements.
 
-- `MM/YY` (default)
-- `MM/YYYY`
-- `YY/MM`
-- `YYYY/MM`
+      - For INPUT_FIELD elements,
+        - the length of `format` determines the expected length of the user input.
+        - if `translation` isn't specified, the `format` value is considered a string literal.
 
-The values that are accepted for `EXPIRATION_YEAR` are
+    `translation`: An object of key value pairs, where the key is a character that appears in `format` and the value is a simple regex pattern of acceptable inputs for that character. Each key can only appear once. Only applicable for INPUT_FIELD elements.
 
-- `YY` (default)
-- `YYYY`
+    Accepted values by element type:
+
+    | Element type    | `format` and `translation` values                                                                                                                                                           | Examples                                                                                                                                   |
+    | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
+    | EXPIRATION_DATE | <li>`format`</li> <ul><li>`mm/yy` (default)</li><li>`mm/yyyy`</li><li>`yy/mm`</li><li>`yyyy/mm`</li></ul>                                                                                  | <ul><li>12/27</li><li>12/2027</li> <li>27/12</li> <li> 2027/12</li></ul></ul>                                                              |
+    | EXPIRATION_YEAR | <li>`format`</li> <ul><li>`yy` (default)</li><li>`yyyy`</li></ul>                                                                                                                          | <ul><li>27</li><li>2027</li></ul>                                                                                                          |
+    | CARD_NUMBER     | <li>`format`</li> <ul><li>`XXXX XXXX XXXX XXXX` (default)</li><li>`XXXX-XXXX-XXXX-XXXX`</li></ul>                                                                                          | <ul><li>1234 5678 9012 3456</li><li>1234-5678-9012-3456</li></ul>                                                                          |
+    | INPUT_FIELD     | <li>`format`: A string that matches the desired output, with placeholder characters of your choice.</li><li>`translation`: An object of key/value pairs. Defaults to `{"X": "[0-9]"}`</li> | With a `format` of `+91 XXXX-XX-XXXX` and a `translation` of `{"X": "[0-9]"}`, user input of "1234121234" displays as "+91 1234-12-1234". |
+
+
+    **Note:** If `format` isn't specified or receives an invalid value, it uses the element type's default value.
+
+    **Collect Element Options examples for INPUT_FIELD**
+
+    Example 1
+    ```js
+    const options = {
+      format:'+91 XXXX-XX-XXXX',
+      translation: { 'X': '[0-9]' } 
+    }
+    ```
+
+    User input: "1234121234"
+    Value displayed in INPUT_FIELD: "+91 1234-12-1234"
+
+    Example 2
+    ```js
+    const options = {
+      required: true, 
+      enableCardIcon: true,
+      format: 'AY XX-XXX-XXXX',
+      translation: { 'X': '[0-9]',  'Y': '[A-Z]' } 
+    }
+    ```
+    User input: "B123412124"
+    Value displayed in INPUT_FIELD: "AB 12-341-2124"
 
-`NOTE`: If not specified or invalid value is passed to the `format` then it takes default value.
 
 - `cardMetadata`: An object of metadata keys to control card number element behavior. It supports an optional key called `scheme`, which accepts an array of Skyflow accept card types based on which SDK will display card brand choice dropdown in the card number element. `CardType` is an enum with all skyflow supported card schemes.
 

samples/SkyflowElements/src/App.tsx

@@ -16,6 +16,7 @@ import CardBrandChoice from './components/CardBrandChoice';
 import ThreeDSHelperFunctions from './components/3DSHelperFunctions';
 import OverrideDefaultErrors from './components/OverrideDefaultErrors'
 import Masking from './components/Masking';
+import InputFormatting from './components/InputFormatting';
 
 const App = () => {
 
@@ -67,6 +68,13 @@ const App = () => {
         <CustomValidations />
       </div>
       <br />
+      <div id='Sample for Input Formatting'>
+        <p>
+          <b>Sample for Input Formatting</b>
+        </p>
+        <InputFormatting />
+      </div>
+      <br />
       <div id='Sample for Composable Elements In Modal'>
         <p>
           <b>Sample Composable Elements Dynamic properties update</b>

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

@@ -0,0 +1,139 @@
+import React from 'react';
+import {
+    useCollectContainer,
+    InputFieldElement,
+    useMakeSkyflowStyles,
+    CardNumberElement,
+} from 'skyflow-react-js';
+
+const InputFormatting = () => {
+    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();
+
+    // Phone Number (+91 XXXXX-XXXXX)
+    const numberOptions = {
+        format: '+91 XXXXX-XXXXX',
+        translation: { 'X': '[0-9]' }
+    };
+
+    // Email (XXXXX@XXXXX.XXX)
+    const emailOptions = {
+        format: 'XXXXXXXXXX@XXXXXXXXXX.XXX',
+        translation: { 'X': '[A-Za-z0-9._%+-]' }
+    };
+
+    // OTP spaced format: "XXX-XXX"
+    const otpOptions = {
+        format: 'XXX-XXX',
+        translation: { 'X': '[0-9]' }
+    };
+
+    return (
+        <div className='CollectElements' style={{ width: '300px' }}>
+            {/* Card Number (Default Format) */}
+             <CardNumberElement
+                id={'collectCardNumber2'}
+                container={container}
+                table={'table1'}
+                classes={classes}
+                column={'card_number'}
+                label={'Collect Card Number'}
+                skyflowID={'<SKYFLOW_ID>'}
+            />
+
+            {/* Number Field */}
+            <InputFieldElement
+                id='number'
+                container={container}
+                classes={classes}
+                table={'table1'}
+                column={'number'}
+                label={'Number'}
+                options={numberOptions}
+            />
+
+            {/* Email Field */}
+            <InputFieldElement
+                id='email'
+                container={container}
+                classes={classes}
+                table={'table1'}
+                column={'email'}
+                label={'Email'}
+                options={emailOptions}
+            />
+
+
+            {/* OTP Field */}
+            <InputFieldElement
+                id='otp'
+                container={container}
+                classes={classes}
+                table={'table1'}
+                column={'otp'}
+                label={'OTP'}
+                options={otpOptions}
+            />
+            <button onClick={handleCollect}>Collect</button>
+        </div>
+    );
+};
+
+export default InputFormatting;