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()}
);