diff --git a/__tests__/components/__snapshots__/components.test.js.snap b/__tests__/components/__snapshots__/components.test.js.snap index 53f6bc9..792f7d3 100644 --- a/__tests__/components/__snapshots__/components.test.js.snap +++ b/__tests__/components/__snapshots__/components.test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`test Collect And Reveal Elements Components test CardHolderNameElement component 1`] = ` +exports[`test Collect Elements Components test CardHolderNameElement component 1`] = ` `; -exports[`test Collect And Reveal Elements Components test CardNumberElement component 1`] = ` +exports[`test Collect Elements Components test CardNumberElement component 1`] = ` `; -exports[`test Collect And Reveal Elements Components test CvvElement component 1`] = ` +exports[`test Collect Elements Components test CvvElement component 1`] = ` `; -exports[`test Collect And Reveal Elements Components test ExpirationDateElement component 1`] = ` +exports[`test Collect Elements Components test ExpirationDateElement component 1`] = ` `; -exports[`test Collect And Reveal Elements Components test ExpirationMonthElement component 1`] = ` +exports[`test Collect Elements Components test ExpirationMonthElement component 1`] = ` `; -exports[`test Collect And Reveal Elements Components test ExpirationYearElement component 1`] = ` +exports[`test Collect Elements Components test ExpirationYearElement component 1`] = ` `; -exports[`test Collect And Reveal Elements Components test InputFieldElement component 1`] = ` +exports[`test Collect Elements Components test InputFieldElement component 1`] = ` `; -exports[`test Collect And Reveal Elements Components test PinElement component 1`] = ` +exports[`test Collect Elements Components test PinElement component 1`] = ` `; -exports[`test Collect And Reveal Elements Components test RevealElement component 1`] = ` +exports[`test Collect Elements Components test Reveal Elements Components renders correctly with the handler & snapshot 1`] = ` Array [ Provider Childern diff --git a/__tests__/components/components.test.js b/__tests__/components/components.test.js index aa2fb49..f08a705 100644 --- a/__tests__/components/components.test.js +++ b/__tests__/components/components.test.js @@ -37,7 +37,7 @@ const changeTrigger = jest.fn(); const foucsTrigger = jest.fn(); const blurTrigger = jest.fn(); -describe('test Collect And Reveal Elements Components', () => { +describe('test Collect Elements Components', () => { let collectContainer; beforeEach(() => { jest.clearAllMocks(); @@ -558,44 +558,102 @@ describe('test Collect And Reveal Elements Components', () => { } }); - it('test RevealElement component', () => { - const revealSetMethodMock = jest.fn(); - const revealContainer = new RevealContainer(testSkyflowClient); - jest.spyOn(revealContainer, 'create').mockImplementation(() => ({ - setMethods: revealSetMethodMock, - })); + describe('test Reveal Elements Components', () => { + it('renders correctly with the handler & snapshot', () => { + const revealSetMethodMock = jest.fn(); + const revealContainer = new RevealContainer(testSkyflowClient); + jest.spyOn(revealContainer, 'create').mockImplementation(() => ({ + setMethods: revealSetMethodMock, + })); + + const revealElement = render( + + ); - const revealElement = render( - - ); + expect(revealElement).toMatchSnapshot(); + expect(revealSetMethodMock).toBeCalledTimes(1); - expect(revealElement).toMatchSnapshot(); - expect(revealSetMethodMock).toBeCalledTimes(1); + // render without alttext + const revealElement2 = render( + + ); + try { + render(); + } catch (err) { + expect(err).toEqual( + new SkyflowError( + SKYFLOW_ERROR_CODE.CONTAINER_OBJECT_IS_REQUIRED, + ['Reveal', 'useRevealContainer()'], + true + ) + ); + } + }); + + it('renders formatted value when format is provided', () => { + const revealSetMethodMock = jest.fn(); + const revealContainer = new RevealContainer(testSkyflowClient); + jest.spyOn(revealContainer, 'create').mockImplementation(() => ({ + setMethods: revealSetMethodMock, + })); + + const format = 'XXXX XXXX XXXX XXXX'; + const altText = '4111111111111111'; - // render without alttext - const revealElement2 = render( - - ); - try { - render(); - } catch (err) { - expect(err).toEqual( - new SkyflowError( - SKYFLOW_ERROR_CODE.CONTAINER_OBJECT_IS_REQUIRED, - ['Reveal', 'useRevealContainer()'], - true - ) + render( + ); - } + + // Should format altText using format + expect(screen.getByTestId('reveal-format').props.children).toBe( + '4111 1111 1111 1111' + ); + }); + + it('renders formatted value when format and translation are provided', () => { + const revealSetMethodMock = jest.fn(); + const revealContainer = new RevealContainer(testSkyflowClient); + jest.spyOn(revealContainer, 'create').mockImplementation(() => ({ + setMethods: revealSetMethodMock, + })); + + const format = 'XX-XX-XX-YYZ-ZZX'; + const translation = { X: '[0-9]', Y: '[A-Z]' }; + const altText = '123456AB7'; + + render( + + ); + + // Should format altText using format and translation + expect( + screen.getByTestId('reveal-format-translation').props.children + ).toBe('12-34-56-ABZ-ZZ7'); + }); }); it('test skyflow provider', () => { diff --git a/src/components/RevealElement/index.tsx b/src/components/RevealElement/index.tsx index 5aa885a..36bbbf6 100644 --- a/src/components/RevealElement/index.tsx +++ b/src/components/RevealElement/index.tsx @@ -7,13 +7,22 @@ import RevealSkyflowElement from "../../core/RevealSkyflowElement"; import { RevealElementProps } 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: React.FC = ({ container, label, ...rest }) => { +const RevealElement: React.FC = ({ container, label, format, translation, ...rest }) => { const [element, setElement] = React.useState(undefined); const [errorText, setErrorText] = React.useState(''); const [value, setValue] = React.useState(rest?.altText || rest.token); + const formattedValue = React.useMemo(() => { + if (!format) return value; + const valueTranslation = translation ?? DEFAULT_INPUT_FIELD_TRANSLATION; + const formattedText = formatInputFieldValue(value, format, valueTranslation); + return formattedText ? formattedText : value; + }, [value, format, translation]); + useEffect(() => { if (container) { const revealElement = container.create(rest); @@ -22,12 +31,11 @@ const RevealElement: React.FC = ({ container, label, ...rest } else { throw new SkyflowError(SKYFLOW_ERROR_CODE.CONTAINER_OBJECT_IS_REQUIRED, ['Reveal', 'useRevealContainer()'], true) } - }, []); return <> {label} - {value} + {formattedValue} {errorText} diff --git a/src/utils/constants/index.ts b/src/utils/constants/index.ts index ab507ad..e6f8786 100644 --- a/src/utils/constants/index.ts +++ b/src/utils/constants/index.ts @@ -109,6 +109,8 @@ export interface RevealElementInput { export interface RevealElementProps { token: string; container: RevealContainer; + format?: string + translation?: Record; label?: string; altText?: string; inputStyles?: StylesBaseVariant;