diff --git a/src/components/EditProfileModal.js b/src/components/EditProfileModal.js index 48220cd..81452f3 100644 --- a/src/components/EditProfileModal.js +++ b/src/components/EditProfileModal.js @@ -45,6 +45,8 @@ const EditProfileModal = ({ const [errors, setErrors] = useState({}); const [showPassportPicker, setShowPassportPicker] = useState(false); + const [showMonthPicker, setShowMonthPicker] = useState(false); + const [showYearPicker, setShowYearPicker] = useState(false); const phoneInputRef = useRef(null); const passwordInputRef = useRef(null); @@ -88,9 +90,9 @@ const EditProfileModal = ({ newErrors.card_name = 'Kartyň ady 255 harpdan köp bolmaly däl'; } - // Card number validation (optional, must be 16 digits) - if (formData.card_number && !/^\d{16}$/.test(formData.card_number.trim())) { - newErrors.card_number = 'Kart belgisi 16 sany sandan durmaly'; + // Card number validation (optional, must be 16 digits and allow hyphens) + if (formData.card_number && !/^[0-9]{4}-?[0-9]{4}-?[0-9]{4}-?[0-9]{4}$/.test(formData.card_number.trim())) { + newErrors.card_number = 'Kart belgisi 16 sany sandan durmaly (mysal: 9999-9999-9999-9999)'; } // Card month validation (optional, 1-12) @@ -102,8 +104,12 @@ const EditProfileModal = ({ } // Card year validation (optional, 4 digits and reasonable year) - if (formData.card_year && !/^\d{4}$/.test(formData.card_year.trim())) { - newErrors.card_year = 'Ýyl 4 sany sandan durmaly'; + if (formData.card_year) { + const year = parseInt(formData.card_year.trim(), 10); + const currentYear = new Date().getFullYear(); + if (!/^[0-9]{4}$/.test(formData.card_year.trim()) || year < currentYear - 10 || year > currentYear + 10) { + newErrors.card_year = `Ýyl ${currentYear - 10}-den ${currentYear + 10}-e çenli bolmaly`; + } } setErrors(newErrors); @@ -147,7 +153,8 @@ const EditProfileModal = ({ } if (formData.card_number) { - updateData.card_number = formData.card_number.trim(); + // Remove all non-digit characters before sending + updateData.card_number = formData.card_number.replace(/[^\d]/g, ''); } onSave(updateData); @@ -245,6 +252,129 @@ const EditProfileModal = ({ ); }; + const renderMonthPicker = () => { + if (!showMonthPicker) return null; + + const months = Array.from({ length: 12 }, (_, i) => String(i + 1).padStart(2, '0')); + + return ( + setShowMonthPicker(false)} + > + setShowMonthPicker(false)}> + + + + Kart aýy + setShowMonthPicker(false)}> + Boldy + + + + { + updateFormData('card_month', ''); + setShowMonthPicker(false); + }} + > + + Saýlaň + + + {months.map((month) => ( + { + updateFormData('card_month', month); + setShowMonthPicker(false); + }} + > + + {month} + + + ))} + + + + + + ); + }; + + const renderYearPicker = () => { + if (!showYearPicker) return null; + + const currentYear = new Date().getFullYear(); + const years = Array.from({ length: 75 }, (_, i) => String(currentYear - 10 + i)); // +/- 10 years + + return ( + setShowYearPicker(false)} + > + setShowYearPicker(false)}> + + + + Kartyň senesi + setShowYearPicker(false)}> + Boldy + + + + { + updateFormData('card_year', ''); + setShowYearPicker(false); + }} + > + + Saýlaň + + + {years.map((year) => ( + { + updateFormData('card_year', year); + setShowYearPicker(false); + }} + > + + {year} + + + ))} + + + + + + ); + }; + return ( cardNameInputRef.current?.focus()} /> @@ -362,36 +493,55 @@ const EditProfileModal = ({ ref={cardNumberInputRef} label="Kart belgisi" value={formData.card_number} - onChangeText={(value) => updateFormData('card_number', value)} + onChangeText={(value) => { + const unmaskedValue = value.replace(/[^\d]/g, ''); // Remove non-digits + let maskedValue = ''; + for (let i = 0; i < unmaskedValue.length; i++) { + if (i > 0 && i % 4 === 0) { + maskedValue += '-'; + } + maskedValue += unmaskedValue[i]; + } + updateFormData('card_number', maskedValue); + }} error={errors.card_number} keyboardType="numeric" - maxLength={16} + maxLength={19} // 16 digits + 3 hyphens returnKeyType="next" onSubmitEditing={() => cardMonthInputRef.current?.focus()} /> - updateFormData('card_month', value)} - error={errors.card_month} - keyboardType="numeric" - maxLength={2} - returnKeyType="next" - onSubmitEditing={() => cardYearInputRef.current?.focus()} - /> + + Kart aýy (MM) + setShowMonthPicker(true)} + > + + {formData.card_month || 'Saýlaň'} + + + + {errors.card_month && ( + {errors.card_month} + )} + - updateFormData('card_year', value)} - error={errors.card_year} - keyboardType="numeric" - maxLength={4} - returnKeyType="done" - /> + + Kartyň senesi (YYYY) + setShowYearPicker(true)} + > + + {formData.card_year || 'Saýlaň'} + + + + {errors.card_year && ( + {errors.card_year} + )} + @@ -422,6 +572,8 @@ const EditProfileModal = ({ {renderPassportSeriesPicker()} + {renderMonthPicker()} + {renderYearPicker()} );