added mobile category page

features/cart/components/OrderSummary.tsx

@@ -99,7 +99,8 @@ export default function OrderSummary({
     paymentType &&
     isPhoneValid &&
     name.trim() !== "" &&
-    lastName.trim() !== "";
+    lastName.trim() !== "" &&
+    note.trim() !== "";
 
   const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const input = e.target.value;
@@ -289,16 +290,26 @@ export default function OrderSummary({
 
       {/* Note */}
       <div className="mb-8">
-        <Label className="text-xl font-bold mb-4 block text-gray-900">
+        <Label className="text-xl flex gap-1 font-bold mb-4 text-gray-900">
           {t("note")}
+          <span className="text-red-500">*</span>
         </Label>
         <Textarea
           value={note}
           onChange={(e) => onNoteChange(e.target.value)}
-          className="rounded-[10px] resize-none border-2 border-gray-200 focus:border-gray-900 transition-colors"
+          className={`rounded-[10px] resize-none border-2 transition-colors ${
+            showValidation && note.trim() === ""
+              ? "border-red-500"
+              : "border-gray-200 focus:border-gray-900"
+          }`}
           rows={3}
           placeholder={t("note")}
         />
+        {showValidation && note.trim() === "" && (
+          <p className="text-xs text-red-500 mt-2 font-medium">
+            {t("requiredField")}
+          </p>
+        )}
       </div>
 
       {/* Billing */}