From 5d81f857da87126cacd8051e8d436ef304083f56 Mon Sep 17 00:00:00 2001
From: Samandar Turgunboyev <turgunboyevsamandar4@gmail.com>
Date: Wed, 11 Mar 2026 20:01:52 +0500
Subject: [PATCH] validation added

---
 src/features/cart/ui/OrderPage.tsx           | 59 +++++++++++++-------
 src/features/profile/ui/RefreshOrder.tsx     | 25 +++++++--
 src/shared/config/i18n/messages/uz.d.json.ts | 18 +-----
 src/shared/ui/textarea.tsx                   |  2 +-
 4 files changed, 62 insertions(+), 42 deletions(-)

diff --git a/src/features/cart/ui/OrderPage.tsx b/src/features/cart/ui/OrderPage.tsx
index a503346..b502e9c 100644
--- a/src/features/cart/ui/OrderPage.tsx
+++ b/src/features/cart/ui/OrderPage.tsx
@@ -221,6 +221,7 @@ const OrderPage = () => {
   };
 
   const cityValue = form.watch('city');
+  const comment = form.watch('comment');
 
   useEffect(() => {
     if (!cityValue || cityValue.length < 3) return;
@@ -368,25 +369,45 @@ const OrderPage = () => {
                   <FormField
                     control={form.control}
                     name="comment"
-                    render={({ field }) => (
-                      <FormItem>
-                        <Label className="block mt-3 text-sm font-medium text-gray-700">
-                          {t('Izoh')}
-                        </Label>
-                        <FormControl>
-                          <Textarea
-                            {...field}
-                            maxLength={300}
-                            className="w-full min-h-42 max-h-64 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
-                            placeholder={t('Izoh')}
-                          />
-                        </FormControl>
-                        <div className="text-right text-xs text-gray-500">
-                          {field.value?.length || 0}/300
-                        </div>
-                        <FormMessage />
-                      </FormItem>
-                    )}
+                    render={({ field }) => {
+                      const length = field.value?.length || 0;
+
+                      return (
+                        <FormItem>
+                          <Label className="block mt-3 text-sm font-medium text-gray-700">
+                            {t('Izoh')}
+                          </Label>
+
+                          <FormControl>
+                            <Textarea
+                              {...field}
+                              className={cn(
+                                'w-full min-h-42 max-h-64 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500',
+                                length > 300 &&
+                                  'border-red-500 focus-visible:border-red-500 focus-visible:ring-none focus-visible:outline-0',
+                              )}
+                              placeholder={t('Izoh')}
+                            />
+                          </FormControl>
+
+                          <div
+                            className={cn(
+                              'text-right text-xs',
+                              comment.length > 300
+                                ? 'text-red-500'
+                                : 'text-gray-500',
+                            )}
+                          >
+                            {comment.length}/300
+                          </div>
+                          {comment.length > 300 && (
+                            <p className="text-red-500 text-md">
+                              {t('Izoh 300 belgidan oshmasligi kerak')}
+                            </p>
+                          )}
+                        </FormItem>
+                      );
+                    }}
                   />
                 </div>
 
diff --git a/src/features/profile/ui/RefreshOrder.tsx b/src/features/profile/ui/RefreshOrder.tsx
index 5a3c13b..739323c 100644
--- a/src/features/profile/ui/RefreshOrder.tsx
+++ b/src/features/profile/ui/RefreshOrder.tsx
@@ -354,6 +354,7 @@ const RefreshOrder = () => {
   );
 
   const totalItems = orderItems.reduce((sum, item) => sum + item.quantity, 0);
+  const comment = form.watch('comment');
 
   if (isLoading) {
     return (
@@ -442,15 +443,29 @@ const RefreshOrder = () => {
                         <FormControl>
                           <Textarea
                             {...field}
-                            maxLength={300}
-                            className="w-full min-h-42 max-h-64 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
+                            className={cn(
+                              'w-full min-h-42 max-h-64 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500',
+                              comment.length > 300 &&
+                                'border-red-500 focus-visible:border-red-500 focus-visible:ring-none focus-visible:outline-0',
+                            )}
                             placeholder={t('Izoh')}
                           />
                         </FormControl>
-                        <div className="text-right text-xs text-gray-500">
-                          {field.value?.length || 0}/300
+                        <div
+                          className={cn(
+                            'text-right text-xs',
+                            comment.length > 300
+                              ? 'text-red-500'
+                              : 'text-gray-500',
+                          )}
+                        >
+                          {comment.length}/300
                         </div>
-                        <FormMessage />
+                        {comment.length > 300 && (
+                          <p className="text-red-500 text-md">
+                            {t('Izoh 300 belgidan oshmasligi kerak')}
+                          </p>
+                        )}
                       </FormItem>
                     )}
                   />
diff --git a/src/shared/config/i18n/messages/uz.d.json.ts b/src/shared/config/i18n/messages/uz.d.json.ts
index 53020ef..114c7a8 100644
--- a/src/shared/config/i18n/messages/uz.d.json.ts
+++ b/src/shared/config/i18n/messages/uz.d.json.ts
@@ -43,12 +43,10 @@ declare const messages: {
   "To'g'ri email manzilini kiriting": "To'g'ri email manzilini kiriting";
   "To'g'ri telefon raqamini kiriting": "To'g'ri telefon raqamini kiriting";
   'File yuklash majburiy': 'File yuklash majburiy';
-
   'Maxfiylik Siyosati': 'Maxfiylik Siyosati';
   "Gastro Market sizning ma'lumotlaringiz xavfsizligini jiddiy qabul qiladi": "Gastro Market sizning ma'lumotlaringiz xavfsizligini jiddiy qabul qiladi";
   'Oxirgi yangilanish: 16 Dekabr 2025': 'Oxirgi yangilanish: 16 Dekabr 2025';
   "Ushbu Maxfiylik Siyosati Gastro Market online magazinida siz tomonidan taqdim etilgan shaxsiy ma'lumotlarni qanday to'playmiz": "Ushbu Maxfiylik Siyosati Gastro Market online magazinida siz tomonidan taqdim etilgan shaxsiy ma'lumotlarni qanday to'playmiz, ishlatamiz va himoya qilishimizni tushuntiradi. Xizmatlarimizdan foydalanish orqali siz ushbu siyosatda tasvirlangan amaliyotlarga rozilik bildirasiz.";
-
   "Biz To'playdigan Ma'lumotlar": "1. Biz To'playdigan Ma'lumotlar";
   "Sizning tajribangizni yaxshilash uchun biz quyidagi ma'lumotlarni to'playmiz": "Sizning tajribangizni yaxshilash uchun biz quyidagi ma'lumotlarni to'playmiz:";
   'Ism email manzil telefon raqami': 'Ism, email manzil, telefon raqami';
@@ -59,7 +57,6 @@ declare const messages: {
   "Kompaniya Ma'lumotlari": "Kompaniya Ma'lumotlari";
   'Fayllar:': 'Fayllar:';
   "Texnik Ma'lumotlar": "Texnik Ma'lumotlar";
-
   "Ma'lumotlardan Foydalanish": "2. Ma'lumotlardan Foydalanish";
   "To'plangan ma'lumotlaringizdan quyidagi maqsadlarda foydalanamiz:": "To'plangan ma'lumotlaringizdan quyidagi maqsadlarda foydalanamiz:";
   "Hamkorlik so'rovlarini qayta ishlash va javob berish": "Hamkorlik so'rovlarini qayta ishlash va javob berish";
@@ -67,27 +64,23 @@ declare const messages: {
   "Sayt xavfsizligini ta'minlash va firibgarlikka qarshi kurashish": "Sayt xavfsizligini ta'minlash va firibgarlikka qarshi kurashish";
   'Foydalanuvchi tajribasini tahlil qilish va yaxshilash': 'Foydalanuvchi tajribasini tahlil qilish va yaxshilash';
   'Qonuniy talablarni bajarish': 'Qonuniy talablarni bajarish';
-
   "Ma'lumotlar Xavfsizligi": "3. Ma'lumotlar Xavfsizligi";
   "Biz sizning shaxsiy ma'lumotlaringizni himoya qilish uchun zamonaviy xavfsizlik choralarini qo'llaymiz:": "Biz sizning shaxsiy ma'lumotlaringizni himoya qilish uchun zamonaviy xavfsizlik choralarini qo'llaymiz:";
   "SSL/TLS shifrlash orqali ma'lumotlar uzatish": "SSL/TLS shifrlash orqali ma'lumotlar uzatish";
   "Xavfsiz serverlar va ma'lumotlar bazasida saqlash": "Xavfsiz serverlar va ma'lumotlar bazasida saqlash";
   'Cheklangan kirish huquqlari va autentifikatsiya': 'Cheklangan kirish huquqlari va autentifikatsiya';
   'Doimiy xavfsizlik monitoringi va yangilanishlar': 'Doimiy xavfsizlik monitoringi va yangilanishlar';
-
   "Ma'lumotlarni Ulashish": "4. Ma'lumotlarni Ulashish";
   "Biz sizning shaxsiy ma'lumotlaringizni uchinchi shaxslarga sotmaymiz": "Biz sizning shaxsiy ma'lumotlaringizni uchinchi shaxslarga sotmaymiz";
   'Sizning roziligingiz bilan': 'Sizning roziligingiz bilan';
   "Qonuniy talablar bo'yicha": "Qonuniy talablar bo'yicha";
   "Xizmat ko'rsatuvchi ishonchli hamkorlar bilan (maxfiylik shartnomalari ostida)": "Xizmat ko'rsatuvchi ishonchli hamkorlar bilan (maxfiylik shartnomalari ostida)";
   'Kompaniya birlashuvi yoki sotilishi holatida': 'Kompaniya birlashuvi yoki sotilishi holatida';
-
   "Biz Bilan Bog'lanish": "Biz Bilan Bog'lanish";
   "Ushbu Maxfiylik Siyosati yoki shaxsiy ma'lumotlaringiz haqida savollaringiz bo'lsa, biz bilan bog'laning:": "Ushbu Maxfiylik Siyosati yoki shaxsiy ma'lumotlaringiz haqida savollaringiz bo'lsa, biz bilan bog'laning:";
   Telefon: 'Telefon';
   "Toshkent, O'zbekiston": "Toshkent, O'zbekiston";
   Manzil: 'Manzil';
-
   Miqdor: 'Miqdor';
   Jami: 'Jami';
   'Bepul yetkazib berish': 'Bepul yetkazib berish';
@@ -98,25 +91,21 @@ declare const messages: {
   'Ishlab chiqaruvchi': 'Ishlab chiqaruvchi';
   Hajmi: 'Hajmi';
   "O'xshash mahsulotlar": "O'xshash mahsulotlar";
-
   'Hech narsa topilmadi': 'Hech narsa topilmadi';
   'Qidiruv natijalari': 'Qidiruv natijalari';
   'Tavsiya etiladi': 'Tavsiya etiladi';
   Yuklanmoqda: 'Yuklanmoqda....';
   'Natija topilmadi': 'Natija topilmadi';
-
   Asosiy: 'Asosiy';
   Katalog: 'Katalog';
   Sevimli: 'Sevimli';
   Savatda: 'Savatda';
   Profil: 'Profil';
-
   'Username yoki parol xato kiritildi': 'Username yoki parol xato kiritildi';
   'Tizimga kirish': 'Tizimga kirish';
   Username: 'Username';
   Parol: 'Parol';
   Kirish: 'Kirish';
-
   "Savatingiz bo'sh": "Savatingiz bo'sh";
   "Mahsulotlar qo'shish uchun katalogga o'ting": "Mahsulotlar qo'shish uchun katalogga o'ting";
   'Xarid qilishni boshlash': 'Xarid qilishni boshlash';
@@ -131,7 +120,6 @@ declare const messages: {
   'Xaridni davom ettirish': 'Xaridni davom ettirish';
   'Tez yetkazib berish 1-2 kun ichida': 'Tez yetkazib berish 1-2 kun ichida';
   "Xavfsiz to'lov usullari": "Xavfsiz to'lov usullari";
-
   'Buyurtma qabul qilindi!': 'Buyurtma qabul qilindi!';
   'Buyurtma raqami': 'Buyurtma raqami';
   'Buyurtmangiz muvaffaqiyatli qabul qilindi': 'Buyurtmangiz muvaffaqiyatli qabul qilindi.';
@@ -176,7 +164,6 @@ declare const messages: {
   "Sevimlilar bo'sh": "Sevimlilar bo'sh";
   "Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz": "Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz. Mahsulotlar ro'yxatiga o'ting va yoqqan mahsulotlaringizni saqlang.";
   'Sevimli mahsulotlar': 'Sevimli mahsulotlar';
-
   'Faol buyurtmalar': 'Faol buyurtmalar';
   Barchasi: 'Barchasi';
   'Buyurtmalar tarixi': 'Buyurtmalar tarixi';
@@ -185,7 +172,6 @@ declare const messages: {
   Umumiy: 'Umumiy';
   Buyurtmalar: 'Buyurtmalar';
   Tarix: 'Tarix';
-
   Faol: 'Faol';
   Tugadi: 'Tugadi';
   Yetkazish: 'Yetkazish';
@@ -199,10 +185,8 @@ declare const messages: {
   "Agarda sizda kirish uchun login va parol yo'q bolsa iltimos bizga murojat qiling": "Agarda sizda kirish uchun login va parol yo'q bolsa iltimos bizga murojat qiling";
   'Murojat qilish': 'Murojat qilish';
   "So'rov yuborildi!": "So'rov yuborildi!";
-
   "Tez-tez So'raladigan Savollar": "Tez-tez So'raladigan Savollar";
   "Gastro Market haqida eng ko'p so'raladigan savollarga javoblar": "Gastro Market haqida eng ko'p so'raladigan savollarga javoblar";
-
   'Barcha mahsulotlar': 'Barcha mahsulotlar';
   'Xatolik yuz berdi: Mahsulot omborxonada yetarli emas': 'Xatolik yuz berdi: Mahsulot omborxonada yetarli emas';
   'Bu kategoriyada hozircha mahsulot yo‘q': 'Bu kategoriyada hozircha mahsulot yo‘q';
@@ -211,7 +195,6 @@ declare const messages: {
   Kataloglar: 'Kataloglar';
   'Naqd bilan olinadi': 'Naqd bilan olinadi';
   "Pul o'tkazish yo'li bilan olinadi": "Pul o'tkazish yo'li bilan olinadi";
-
   "Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin": "Diqqat! Mahsulot narxi o'zgargan bo'lishi mumkin";
   "So'nggi yangilanish:": "So'nggi yangilanish";
   only_available: 'Faqat {maxBalance} dona mavjud';
@@ -225,5 +208,6 @@ declare const messages: {
   Yangilangan: 'Yangilangan';
   "Narxi o'zgargan bo'lishi mumkin": "Narxi o'zgargan bo'lishi mumkin";
   'ga yangilandi': 'ga yangilandi';
+  'Izoh 300 ta belgidan oshmasligi kerak': 'Izoh 300 ta belgidan oshmasligi kerak';
 };
 export default messages;
diff --git a/src/shared/ui/textarea.tsx b/src/shared/ui/textarea.tsx
index 99dd374..11fcf74 100644
--- a/src/shared/ui/textarea.tsx
+++ b/src/shared/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
     <textarea
       data-slot="textarea"
       className={cn(
-        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'border-input placeholder:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         className,
       )}
       {...props}