SK-2126 insert unformatted card number to vault

__tests__/components/__snapshots__/components.test.js.snap

@@ -26,6 +26,7 @@ exports[`test Collect And Reveal Elements Components test CardHolderNameElement
   />
   <Text
     style={Object {}}
+    testID="name-error"
   />
 </View>
 `;
@@ -89,6 +90,7 @@ exports[`test Collect And Reveal Elements Components test CardNumberElement comp
   </View>
   <Text
     style={Object {}}
+    testID="cardnumber-error"
   />
 </View>
 `;
@@ -121,6 +123,7 @@ exports[`test Collect And Reveal Elements Components test CvvElement component 1
   />
   <Text
     style={Object {}}
+    testID="cvv-error"
   />
 </View>
 `;
@@ -153,6 +156,7 @@ exports[`test Collect And Reveal Elements Components test ExpirationDateElement
   />
   <Text
     style={Object {}}
+    testID="date-error"
   />
 </View>
 `;
@@ -185,6 +189,7 @@ exports[`test Collect And Reveal Elements Components test ExpirationMonthElement
   />
   <Text
     style={Object {}}
+    testID="month-error"
   />
 </View>
 `;
@@ -217,6 +222,7 @@ exports[`test Collect And Reveal Elements Components test ExpirationYearElement
   />
   <Text
     style={Object {}}
+    testID="year-error"
   />
 </View>
 `;
@@ -247,6 +253,7 @@ exports[`test Collect And Reveal Elements Components test InputFieldElement comp
   />
   <Text
     style={Object {}}
+    testID="inputfield-error"
   />
 </View>
 `;
@@ -279,6 +286,7 @@ exports[`test Collect And Reveal Elements Components test PinElement component 1
   />
   <Text
     style={Object {}}
+    testID="pin-error"
   />
 </View>
 `;
@@ -298,6 +306,7 @@ Array [
   </Text>,
   <Text
     style={Object {}}
+    testID="Card Number-error"
   />,
 ]
 `;

__tests__/core-utils/collect.test.js

@@ -1,7 +1,7 @@
 /*
     Copyright (c) 2022 Skyflow, Inc.
 */
-import { tokenize } from '../../src/core-utils/collect';
+import { tokenize, getElementValueToInsert } from '../../src/core-utils/collect';
 import CollectElement from '../../src/core/CollectElement';
 import Skyflow from '../../src/core/Skyflow';
 import { ElementType, Env, LogLevel } from '../../src/utils/constants';
@@ -525,3 +525,31 @@ describe('test collect utils class', () => {
   });
 
 });
+
+describe('getVaultInsertValue', () => {
+  class MockCollectElement {
+    constructor(type, value) {
+      this.type = type;
+      this.value = value;
+    }
+    getClientState() {
+      return { elementType: this.type };
+    }
+    getUnformattedValue() {
+      return this.value.replace(/[\s-]/g, '');
+    }
+    getInternalState() {
+      return { value: this.value };
+    }
+  }
+
+  test('returns unformatted value for CARD_NUMBER', () => {
+    const element = new MockCollectElement(ElementType.CARD_NUMBER, '4111 1111 1111 1111');
+    expect(getElementValueToInsert(element)).toBe('4111111111111111');
+  });
+
+  test('returns value as is for non-CARD_NUMBER', () => {
+    const element = new MockCollectElement(ElementType.CVV, '123');
+    expect(getElementValueToInsert(element)).toBe('123');
+  });
+});

__tests__/core/collectElement.test.js

@@ -517,4 +517,16 @@ describe('test Collect Element class', () => {
     cardNumberElement.onChangeElement('', true);
     expect(cardNumberElement.getClientState().selectedCardScheme).toEqual('DISCOVER');
   })
+
+  it('should remove spaces from value', () => {
+    const elementInput = {
+      table: 'cards',
+      column: 'number',
+      type: ElementType.CARD_NUMBER,
+      containerType: ContainerType.COLLECT,
+    };
+    const collectElement = new CollectElement(elementInput, {}, context);
+    collectElement.updateValue('4111 1111 1111 1111');
+    expect(collectElement.getUnformattedValue()).toBe('4111111111111111');
+  });
 });

src/components/CardHolderNameElement/index.tsx

@@ -49,6 +49,7 @@ const CardHolderNameElement: React.FC<CollectElementProps> = ({ container, optio
             ref={textInputRef}
             value={elementValue}
             placeholder={rest.placeholder}
+            testID={rest?.testID}
             onChangeText={(text) => {
                 element?.onChangeElement(text)
                 setElementValue(element.getInternalState().value)
@@ -75,7 +76,7 @@ const CardHolderNameElement: React.FC<CollectElementProps> = ({ container, optio
         {
             container && container?.type === ContainerType.COLLECT
             &&
-            <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+            <Text style={rest?.errorTextStyles?.base || {}}  testID="name-error">{errorText}</Text>
         }
 
     </View>);

src/components/CardNumberElement/index.tsx

@@ -109,6 +109,7 @@ const CardNumberElement: React.FC<CollectElementProps> = ({ container, options,
             ref={textInputRef}
             value={elementValue}
             placeholder={rest.placeholder}
+            testID={rest?.testID}
             onChangeText={(text) => {
                 element?.onChangeElement(text)
                 setElementValue(element.getInternalState().value)
@@ -141,7 +142,7 @@ const CardNumberElement: React.FC<CollectElementProps> = ({ container, options,
         {
             container && container?.type === ContainerType.COLLECT
             &&
-            <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+            <Text style={rest?.errorTextStyles?.base || {}} testID="cardnumber-error">{errorText}</Text>
         }
     </View>);
 }

src/components/CvvElement/index.tsx

@@ -49,6 +49,7 @@ const CvvElement: React.FC<CollectElementProps> = ({ container, options = { requ
             ref={textInputRef}
             value={elementValue}            
             placeholder={rest.placeholder}
+            testID={rest?.testID}
             onChangeText={(text) => {
                 element?.onChangeElement(text);
                 setElementValue(element.getInternalState().value)
@@ -76,7 +77,7 @@ const CvvElement: React.FC<CollectElementProps> = ({ container, options = { requ
         {
             container && container?.type === ContainerType.COLLECT
             &&
-            <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+            <Text style={rest?.errorTextStyles?.base || {}} testID="cvv-error">{errorText}</Text>
         }
     </View>);
 }

src/components/ExpirationDateElement/index.tsx

@@ -54,6 +54,7 @@ const ExpirationDateElement: React.FC<CollectElementProps> = ({ container, optio
             ref={textInputRef}
             value={elementValue}
             placeholder={rest.placeholder}
+            testID={rest?.testID}
             onChangeText={(text) => {
                 element?.onChangeElement(text);
                 setElementValue(element.getInternalState().value)
@@ -84,7 +85,7 @@ const ExpirationDateElement: React.FC<CollectElementProps> = ({ container, optio
         {
             container && container?.type === ContainerType.COLLECT
             &&
-            <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+            <Text style={rest?.errorTextStyles?.base || {}} testID="date-error">{errorText}</Text>
         }
     </View>);
 }

src/components/ExpirationMonthElement/index.tsx

@@ -49,6 +49,7 @@ const ExpirationMonthElement: React.FC<CollectElementProps> = ({ container, opti
             ref={textInputRef}
             value={elementValue}
             placeholder={rest.placeholder}
+            testID={rest?.testID}
             onChangeText={(text) => {
                 element?.onChangeElement(text);
                 setElementValue(element.getInternalState().value)
@@ -79,7 +80,7 @@ const ExpirationMonthElement: React.FC<CollectElementProps> = ({ container, opti
         {
             container && container?.type === ContainerType.COLLECT
             &&
-            <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+            <Text style={rest?.errorTextStyles?.base || {}} testID="month-error">{errorText}</Text>
         }
     </View>);
 }

src/components/ExpirationYearElement/index.tsx

@@ -55,6 +55,7 @@ const ExpirationYearElement: React.FC<CollectElementProps> = ({ container, optio
             ref={textInputRef}
             value={elementValue}
             placeholder={rest.placeholder}
+            testID={rest?.testID}
             onChangeText={(text) => {
                 element?.onChangeElement(text);
                 setElementValue(element.getInternalState().value)
@@ -85,7 +86,7 @@ const ExpirationYearElement: React.FC<CollectElementProps> = ({ container, optio
         {
             container && container?.type === ContainerType.COLLECT
             &&
-            <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+            <Text style={rest?.errorTextStyles?.base || {}} testID="year-error">{errorText}</Text>
         }
     </View>);
 }

src/components/InputFieldElement/index.tsx

@@ -51,6 +51,7 @@ const InputFieldElement: React.FC<CollectElementProps> = ({ container, options =
             ref={textInputRef}
             value={elementValue}
             placeholder={rest.placeholder}
+            testID={rest?.testID}
             onChangeText={(text) => {
                 element?.onChangeElement(text);
                 setElementValue(element.getInternalState().value)
@@ -76,7 +77,7 @@ const InputFieldElement: React.FC<CollectElementProps> = ({ container, options =
         {
             container && container?.type === ContainerType.COLLECT
             &&
-            <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+            <Text style={rest?.errorTextStyles?.base || {}} testID="inputfield-error">{errorText}</Text>
         }
     </View>);
 }

src/components/PinElement/index.tsx

@@ -49,6 +49,7 @@ const PinElement: React.FC<CollectElementProps> = ({ container, options = { requ
             ref={textInputRef}
             value={elementValue}
             placeholder={rest.placeholder}
+            testID={rest?.testID}
             onChangeText={(text) => {
                 element?.onChangeElement(text)
                 setElementValue(element.getInternalState().value)
@@ -76,7 +77,7 @@ const PinElement: React.FC<CollectElementProps> = ({ container, options = { requ
         {
             container && container?.type === ContainerType.COLLECT
             &&
-            <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+            <Text style={rest?.errorTextStyles?.base || {}} testID="pin-error">{errorText}</Text>
         }
     </View>);
 }

src/components/RevealElement/index.tsx

@@ -27,8 +27,8 @@ const RevealElement: React.FC<RevealElementProps> = ({ container, label, ...rest
 
     return <>
         <Text style={rest.labelStyles?.base || {}}>{label}</Text>
-        <Text selectable style={rest?.inputStyles?.base || {}}>{value}</Text>
-        <Text style={rest?.errorTextStyles?.base || {}}>{errorText}</Text>
+        <Text selectable style={rest?.inputStyles?.base || {}} testID={rest?.testID}>{value}</Text>
+        <Text style={rest?.errorTextStyles?.base || {}} testID={`${label}-error`}>{errorText}</Text>
     </>
 
 }

src/core-utils/collect/index.ts

@@ -7,7 +7,7 @@ import _ from 'lodash';
 import Skyflow from '../../core/Skyflow';
 import SkyflowError from '../../utils/skyflow-error';
 import SKYFLOW_ERROR_CODE from '../../utils/skyflow-error-code';
-import { IInsertRecord, IInsertResponse } from '../../../src/utils/constants';
+import { ElementType, IInsertRecord, IInsertResponse } from '../../../src/utils/constants';
 import omit from 'lodash/omit';
 const set = require('set-value');
 
@@ -184,6 +184,12 @@ export const constructElementsInsertReq = (req: any, options: any) => {
   return { records };
 };
 
+export function getElementValueToInsert(element: CollectElement) {
+  return element.getClientState().elementType === ElementType.CARD_NUMBER
+    ? element.getUnformattedValue()
+    : element.getInternalState().value;
+}
+
 export const tokenize = (
   skyflowClient: Skyflow,
   elementList: CollectElement[],
@@ -223,14 +229,14 @@ export const tokenize = (
         set(
           elementsUpdateData[skyflowID],
           column,
-          currentElement.getInternalState().value,
+          getElementValueToInsert(currentElement),
         );
       } else {
         elementsUpdateData[skyflowID] = {};
         set(
           elementsUpdateData[skyflowID],
           column,
-          currentElement.getInternalState().value,
+          getElementValueToInsert(currentElement),
         );
         set(
           elementsUpdateData[skyflowID],
@@ -240,10 +246,10 @@ export const tokenize = (
       }
     }
     else if (elementsData[table]) {
-      set(elementsData[table], column, currentElement.getInternalState().value);
+      set(elementsData[table], column, getElementValueToInsert(currentElement));
     } else {
       elementsData[table] = {};
-      set(elementsData[table], column, currentElement.getInternalState().value);
+      set(elementsData[table], column, getElementValueToInsert(currentElement));
     }
   });
 

src/core/CollectElement/index.ts

@@ -136,6 +136,10 @@ class CollectElement extends SkyflowElement {
     return this.#state;
   }
 
+  getUnformattedValue() {
+    return this.#state.value.trim().replace(/[\s-]/g, '');
+  }
+
   getElementInput() {
     return this.#elementInput;
   }

src/core/constants/index.ts

@@ -163,7 +163,7 @@ export const DEFAULT_CARD_INPUT_MAX_LENGTH = 23;
 
 export const REVEAL_ELEMENT_ERROR_TEXT = 'Invalid Token';
 
-export const DEFAULT_COLLECT_ELEMENT_ERROR_TEXT = 'Invalid Value';
+export const DEFAULT_COLLECT_ELEMENT_ERROR_TEXT = 'Invalid value';
 
 export const DEFAULT_VALIDATION_ERROR_TEXT = 'Validation Failed';
 

src/utils/constants/index.ts

@@ -55,6 +55,7 @@ export interface CollectElementProps {
   errorTextStyles?: StylesBaseVariant;
   containerMethods?: Record<any, any>;
   skyflowID?: string;
+  testID?: string;
 }
 
 export enum ElementType {
@@ -114,6 +115,7 @@ export interface RevealElementProps {
   labelStyles?: StylesBaseVariant;
   errorTextStyles?: StylesBaseVariant;
   redaction?: RedactionType;
+  testID?: string;
 }
 
 export enum MessageType {