updated the card expiration date format

src/components/pages/dashboard/userDashboard/withdrawl/renderFields.tsx

@@ -12,7 +12,6 @@ interface RenderFieldsProps {
 }
 
 export const RenderFields = ({ field, formik }: RenderFieldsProps) => {
-    // Get the actual field object from payment_fields array
     const fieldIndex = formik.values.payment_fields?.findIndex(
         (f: MasspayPaymentFields) => f.token === field.token
     );
@@ -32,7 +31,6 @@ export const RenderFields = ({ field, formik }: RenderFieldsProps) => {
             formattedValue = dayjs(value as Dayjs).format("YYYY-MM-DD");
         }
 
-        // Update the value in the payment_fields array
         if (fieldIndex !== -1) {
             const updatedFields = [...formik.values.payment_fields];
             updatedFields[fieldIndex] = {
@@ -127,6 +125,27 @@ export const RenderFields = ({ field, formik }: RenderFieldsProps) => {
             );
 
         case "date":
+            if (field.type === "CardExpiration") {
+                return (
+                    <div className="input__field text-left">
+                        <InputLabel>{field.label} <span className="text-red-500">*</span></InputLabel>
+                        <OutlinedInput
+                            fullWidth
+                            id={field.token}
+                            name={`payment_fields.${field.token}`}
+                            value={fieldValue}
+                            onChange={(e) => handleChange(e.target.value)}
+                            onBlur={handleBlur}
+                            error={Boolean(fieldError)}
+                            placeholder={field.expected_value}
+                        />
+                        {fieldError && (
+                            <FormHelperText error>{fieldError}</FormHelperText>
+                        )}
+                    </div>
+                )
+            }
+            else {
                 return (
                     <div className="input__field text-left">
                         <InputLabel>{field.label} <span className="text-red-500">*</span></InputLabel>
@@ -223,6 +242,7 @@ export const RenderFields = ({ field, formik }: RenderFieldsProps) => {
                         </LocalizationProvider>
                     </div>
                 );
+            }
 
         default:
             return (

src/types/transaction.ts

@@ -65,7 +65,7 @@ export interface MasspayPaymentFields {
     is_required: boolean;
     label: string;
     validation: string;
-    type: "BillReferenceNumber" | "BankAccountType" | "BankAccountNumber" | "BankRoutingNumber" | "SocialSecurity" | "DateOfBirth" | "Address1" | "IDSelfieCollection";
+    type: "BillReferenceNumber" | "BankAccountType" | "BankAccountNumber" | "BankRoutingNumber" | "SocialSecurity" | "DateOfBirth" | "Address1" | "IDSelfieCollection" | "CardExpiration";
     expected_value: string;
     value: string;
 }
\ No newline at end of file