when users try to navigate to a past date, they'll see a warning message and the date won't change

src/assets/locals/ar.json

@@ -244,7 +244,10 @@
     "couponInvalid": "رمز القسيمة غير صالح",
     "couponExpired": "رمز القسيمة منتهي الصلاحية",
     "couponAlreadyUsed": "رمز القسيمة مستخدم بالفعل",
-    "couponNotApplicable": "رمز القسيمة غير مطبق"
+    "couponNotApplicable": "رمز القسيمة غير مطبق",
+    "am": "ص",
+    "pm": "م",
+    "cannotSelectPastDate": "لا يمكنك اختيار تاريخ سابق. يرجى اختيار اليوم أو تاريخ مستقبلي."
   },
   "checkout": {
     "title": "الدفع",

src/assets/locals/en.json

@@ -254,7 +254,10 @@
     "couponInvalid": "Invalid coupon code",
     "couponExpired": "Coupon expired",
     "couponAlreadyUsed": "Coupon already used",
-    "couponNotApplicable": "Coupon not applicable"
+    "couponNotApplicable": "Coupon not applicable",
+    "am": "AM",
+    "pm": "PM",
+    "cannotSelectPastDate": "You cannot select a past date. Please select today or a future date."
   },
   "checkout": {
     "title": "Checkout",

src/pages/cart/components/timeEstimate/Content.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider } from "antd";
+import { Button, Divider, message } from "antd";
 import BackIcon from "components/Icons/BackIcon.tsx";
 import NextIcon from "components/Icons/NextIcon.tsx";
 import dayjs from "dayjs";
@@ -30,7 +30,7 @@ interface EstimateTimeContentProps {
 
 export default function Content({ onSave, onClose }: EstimateTimeContentProps) {
   const { t } = useTranslation();
-  const [selectedDate, setSelectedDate] = useState<string>(Date());
+  const [selectedDate, setSelectedDate] = useState<string>(dayjs().format(SERVER_DATE_FORMAT));
   const [selectedTime, setSelectedTime] = useState<string>();
   const [isAM, setIsAM] = useState(true);
   const { isRTL } = useAppSelector((state) => state.locale);
@@ -45,6 +45,15 @@ export default function Content({ onSave, onClose }: EstimateTimeContentProps) {
 
   const goToPreviousDay = () => {
     const newDate = dayjs(selectedDate).subtract(1, "d");
+    const today = dayjs().startOf("day");
+    const newDateStart = newDate.startOf("day");
+    
+    // Check if the new date would be before today
+    if (newDateStart.isBefore(today)) {
+      message.warning(t("cart.cannotSelectPastDate"));
+      return;
+    }
+    
     setSelectedDate(newDate.format(SERVER_DATE_FORMAT));
   };
 
@@ -105,7 +114,7 @@ export default function Content({ onSave, onClose }: EstimateTimeContentProps) {
                 <BackIcon className={styles.backIcon} />
               )
             }
-            onClick={goToPreviousDay}
+            onClick={isRTL ? goToNextDay : goToPreviousDay}
             style={{
               display: "flex",
               alignItems: "center",
@@ -141,7 +150,7 @@ export default function Content({ onSave, onClose }: EstimateTimeContentProps) {
                 <NextIcon className={styles.nextIcon} />
               )
             }
-            onClick={goToNextDay}
+            onClick={isRTL ? goToPreviousDay : goToNextDay}
             style={{
               display: "flex",
               alignItems: "center",
@@ -157,7 +166,7 @@ export default function Content({ onSave, onClose }: EstimateTimeContentProps) {
         <div
           style={{
             display: "flex",
-            justifyContent: "end",
+            justifyContent: isRTL ? "start" : "end",
             marginBottom: 20,
             gap: 10,
           }}
@@ -166,13 +175,13 @@ export default function Content({ onSave, onClose }: EstimateTimeContentProps) {
             onClick={() => setIsAM(true)}
             className={styles.toggleButton + " " + (isAM ? styles.active : "")}
           >
-            AM
+            {t("cart.am")}
           </Button>
           <Button
             onClick={() => setIsAM(false)}
             className={styles.toggleButton + " " + (!isAM ? styles.active : "")}
           >
-            PM
+            {t("cart.pm")}
           </Button>
         </div>