[PLAY-1732] Add credit card and cvv masks (#4090)

**What does this PR do?** A clear and concise description with your
runway ticket url.
Runway https://runway.powerhrg.com/backlog_items/PLAY-1732

Add more masks to Text input 
Credit Card 16 number separated by space 
CVV 3 or 4 numbers 

You can check them out here
https://pr4090.playbook.beta.px.powerapp.cloud/kits/text_input/react#mask


![screenshot-localhost_3000-2025_01_06-15_52_30](https://github.com/user-attachments/assets/83d2d4e8-da39-4bae-a2d8-39aef1016c51)

playbook/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx

@@ -16,6 +16,8 @@ const TextInputMask = (props) => {
     zipCode: '',
     postalCode: '',
     ssn: '',
+    creditCard: '',
+    cvv: ''
   })
 
   const handleOnChangeFormField =  ({ target }) => {
@@ -57,6 +59,22 @@ const TextInputMask = (props) => {
           value={formFields.ssn}
           {...props}
       />
+      <TextInput
+          label="Credit Card"
+          mask="creditCard"
+          name="creditCard"
+          onChange={handleOnChangeFormField}
+          value={formFields.creditCard}
+          {...props}
+      />
+      <TextInput
+          label="CVV"
+          mask="cvv"
+          name="cvv"
+          onChange={handleOnChangeFormField}
+          value={formFields.cvv}
+          {...props}
+      />
 
       <br />
       <br />

playbook/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -6,7 +6,7 @@ type InputMask = {
 }
 
 type InputMaskDictionary = {
-    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
+    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn' | 'creditCard' | 'cvv']: InputMask
 }
 
 const formatCurrencyDefaultValue = (value: string): string => {
@@ -58,6 +58,15 @@ const formatSSN = (value: string): string => {
         .replace(/(\d{3})(?=\d)/, '$1-')
 }
 
+const formatCreditCard = (value: string): string => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 16)
+    return cleaned.replace(/(\d{4})(?=\d)/g, '$1 ')
+}
+
+const formatCVV = (value: string): string => {
+    return value.replace(/\D/g, '').slice(0, 4)
+}
+
 export const INPUTMASKS: InputMaskDictionary = {
     currency: {
         format: formatCurrency,
@@ -84,4 +93,16 @@ export const INPUTMASKS: InputMaskDictionary = {
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
     },
+    creditCard: {
+        format: formatCreditCard,
+        formatDefaultValue: formatCreditCard,
+        pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
+        placeholder: '1234 5678 9012 3456',
+    },
+    cvv: {
+        format: formatCVV,
+        formatDefaultValue: formatCVV,
+        pattern: '\\d{3,4}',
+        placeholder: '123',
+    },
 } 

playbook/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -226,3 +226,83 @@ test('returns masked ssn value', () => {
 
   expect(input.value).toBe('123-45-6789')
 })
+
+const TextInputCreditCardMask = (props) => {
+  const [creditCard, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="creditCard"
+        onChange={handleOnChange}
+        value={creditCard}
+        {...props}
+    />
+  )
+}
+
+test('returns masked credit card value', () => {
+  render(
+    <TextInputCreditCardMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: '1234567890123456' } })
+
+  expect(input.value).toBe('1234 5678 9012 3456')
+
+  fireEvent.change(input, { target: { value: '1234' } })
+
+  expect(input.value).toBe('1234')
+
+  fireEvent.change(input, { target: { value: '' } })
+
+  expect(input.value).toBe('')
+})
+
+const TextInputCVVMask = (props) => {
+  const [cvv, setValue] = useState('')
+  const handleOnChange = ({ target }) => {
+    setValue(target.value)
+  }
+
+  return (
+    <TextInput
+        mask="cvv"
+        onChange={handleOnChange}
+        value={cvv}
+        {...props}
+    />
+  )
+}
+
+test('returns masked CVV value', () => {
+  render(
+    <TextInputCVVMask
+        data={{ testid: testId }}
+    />
+  )
+
+  const kit = screen.getByTestId(testId)
+
+  const input = within(kit).getByRole('textbox')
+
+  fireEvent.change(input, { target: { value: '1234' } })
+
+  expect(input.value).toBe('1234')
+
+  fireEvent.change(input, { target: { value: '123' } })
+
+  expect(input.value).toBe('123')
+
+  fireEvent.change(input, { target: { value: '' } })
+
+  expect(input.value).toBe('')
+})