Skip to content

S
sweepstake
Commit af2d9222 by Arjun Jhukal
Options

updated the card expiration date format

parent a7b4c8f6
Showing with 110 additions and 89 deletions
src/components/pages/dashboard/userDashboard/withdrawl/renderFields.tsx
...@@ -12,7 +12,6 @@ interface RenderFieldsProps { ...@@ -12,7 +12,6 @@ interface RenderFieldsProps {
} }
export const RenderFields = ({ field, formik }: RenderFieldsProps) => { export const RenderFields = ({ field, formik }: RenderFieldsProps) => {
// Get the actual field object from payment_fields array
const fieldIndex = formik.values.payment_fields?.findIndex( const fieldIndex = formik.values.payment_fields?.findIndex(
(f: MasspayPaymentFields) => f.token === field.token (f: MasspayPaymentFields) => f.token === field.token
); );
...@@ -32,7 +31,6 @@ export const RenderFields = ({ field, formik }: RenderFieldsProps) => { ...@@ -32,7 +31,6 @@ export const RenderFields = ({ field, formik }: RenderFieldsProps) => {
formattedValue = dayjs(value as Dayjs).format("YYYY-MM-DD"); formattedValue = dayjs(value as Dayjs).format("YYYY-MM-DD");
} }
// Update the value in the payment_fields array
if (fieldIndex !== -1) { if (fieldIndex !== -1) {
const updatedFields = [...formik.values.payment_fields]; const updatedFields = [...formik.values.payment_fields];
updatedFields[fieldIndex] = { updatedFields[fieldIndex] = {
...@@ -127,102 +125,124 @@ export const RenderFields = ({ field, formik }: RenderFieldsProps) => { ...@@ -127,102 +125,124 @@ export const RenderFields = ({ field, formik }: RenderFieldsProps) => {
); );
case "date": case "date":
return ( if (field.type === "CardExpiration") {
<div className="input__field text-left"> return (
<InputLabel>{field.label} <span className="text-red-500">*</span></InputLabel> <div className="input__field text-left">
<LocalizationProvider dateAdapter={AdapterDayjs}> <InputLabel>{field.label} <span className="text-red-500">*</span></InputLabel>
<DatePicker <OutlinedInput
value={fieldValue ? dayjs(fieldValue) : null} fullWidth
onChange={(newValue) => handleChange(newValue)} id={field.token}
onClose={handleBlur} name={`payment_fields.${field.token}`}
slotProps={{ value={fieldValue}
textField: { onChange={(e) => handleChange(e.target.value)}
fullWidth: true, onBlur={handleBlur}
id: field.token, error={Boolean(fieldError)}
name: `payment_fields.${field.token}`, placeholder={field.expected_value}
placeholder: field.expected_value || "YYYY-MM-DD", />
error: Boolean(fieldError), {fieldError && (
onBlur: handleBlur, <FormHelperText error>{fieldError}</FormHelperText>
helperText: fieldError || "", )}
sx: { </div>
'& .MuiOutlinedInput-root, & .MuiPickersInputBase-root, & .MuiPickersOutlinedInput-root': { )
borderRadius: '27px', }
background: 'rgba(118, 107, 120, 0.55)', else {
color: '#fff', return (
'& .MuiOutlinedInput-notchedOutline, & .MuiPickersOutlinedInput-notchedOutline': { <div className="input__field text-left">
border: '0.576px solid rgba(255, 255, 255, 0.04)', <InputLabel>{field.label} <span className="text-red-500">*</span></InputLabel>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
value={fieldValue ? dayjs(fieldValue) : null}
onChange={(newValue) => handleChange(newValue)}
onClose={handleBlur}
slotProps={{
textField: {
fullWidth: true,
id: field.token,
name: `payment_fields.${field.token}`,
placeholder: field.expected_value || "YYYY-MM-DD",
error: Boolean(fieldError),
onBlur: handleBlur,
helperText: fieldError || "",
sx: {
'& .MuiOutlinedInput-root, & .MuiPickersInputBase-root, & .MuiPickersOutlinedInput-root': {
borderRadius: '27px',
background: 'rgba(118, 107, 120, 0.55)',
color: '#fff',
'& .MuiOutlinedInput-notchedOutline, & .MuiPickersOutlinedInput-notchedOutline': {
border: '0.576px solid rgba(255, 255, 255, 0.04)',
},
'&:hover .MuiOutlinedInput-notchedOutline, &:hover .MuiPickersOutlinedInput-notchedOutline': {
borderColor: 'rgba(255,255,255,0.2)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiPickersOutlinedInput-notchedOutline': {
borderColor: '#B801C0',
},
}, },
'&:hover .MuiOutlinedInput-notchedOutline, &:hover .MuiPickersOutlinedInput-notchedOutline': { '& .MuiOutlinedInput-input, & .MuiPickersInputBase-input': {
borderColor: 'rgba(255,255,255,0.2)', padding: '12px 16px',
color: '#fff',
'&::placeholder': {
color: 'rgba(255, 255, 255, 0.2)',
fontWeight: 300,
fontSize: '12px',
opacity: 1,
},
}, },
'&.Mui-focused .MuiOutlinedInput-notchedOutline, &.Mui-focused .MuiPickersOutlinedInput-notchedOutline': { '& .MuiInputAdornment-root': {
borderColor: '#B801C0', marginRight: '8px',
}, },
}, '& .MuiInputAdornment-root button': {
'& .MuiOutlinedInput-input, & .MuiPickersInputBase-input': { color: 'rgba(255, 255, 255, 0.7)',
padding: '12px 16px', '&:hover': {
color: '#fff', color: '#fff',
'&::placeholder': { background: 'rgba(255, 255, 255, 0.08)',
color: 'rgba(255, 255, 255, 0.2)', }
fontWeight: 300,
fontSize: '12px',
opacity: 1,
}, },
}, '& .MuiIconButton-root': {
'& .MuiInputAdornment-root': { padding: '8px',
marginRight: '8px',
},
'& .MuiInputAdornment-root button': {
color: 'rgba(255, 255, 255, 0.7)',
'&:hover': {
color: '#fff',
background: 'rgba(255, 255, 255, 0.08)',
} }
},
'& .MuiIconButton-root': {
padding: '8px',
} }
} },
}, popper: {
popper: { sx: {
sx: { "& .MuiPickersCalendarHeader-label": {
"& .MuiPickersCalendarHeader-label": { color: "#fff",
color: "#fff", },
}, "& .MuiDayCalendar-weekDayLabel": {
"& .MuiDayCalendar-weekDayLabel": { color: "#fff",
color: "#fff", },
}, "& .MuiPickersDay-root": {
"& .MuiPickersDay-root": { color: "#fff",
color: "#fff", },
}, "& .MuiPickersDay-root.Mui-selected": {
"& .MuiPickersDay-root.Mui-selected": {
backgroundColor: "#B801C0",
},
"& .MuiPickersDay-root:hover": {
backgroundColor: "rgba(184, 1, 192, 0.3)",
},
"& .MuiPickersArrowSwitcher-button": {
color: "#fff",
},
"& .MuiPickersCalendarHeader-root": {
color: "#fff",
},
"& .MuiPickersDay-root.MuiPickersDay-today": {
backgroundColor: "#B801C0",
border: "1px solid #fff",
"&:not(.Mui-selected)": {
backgroundColor: "#B801C0", backgroundColor: "#B801C0",
}, },
"& .MuiPickersDay-root:hover": {
backgroundColor: "rgba(184, 1, 192, 0.3)",
},
"& .MuiPickersArrowSwitcher-button": {
color: "#fff",
},
"& .MuiPickersCalendarHeader-root": {
color: "#fff",
},
"& .MuiPickersDay-root.MuiPickersDay-today": {
backgroundColor: "#B801C0",
border: "1px solid #fff",
"&:not(.Mui-selected)": {
backgroundColor: "#B801C0",
},
},
}, },
}, },
}, }}
}} maxDate={dayjs()}
maxDate={dayjs()} format="YYYY-MM-DD"
format="YYYY-MM-DD" />
/> </LocalizationProvider>
</LocalizationProvider> </div>
</div> );
); }
default: default:
return ( return (
......
src/types/transaction.ts
...@@ -65,7 +65,7 @@ export interface MasspayPaymentFields { ...@@ -65,7 +65,7 @@ export interface MasspayPaymentFields {
is_required: boolean; is_required: boolean;
label: string; label: string;
validation: 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; expected_value: string;
value: string; value: string;
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment