intergrate openening times & show extras

src/assets/locals/ar.json

@@ -170,7 +170,15 @@
     "justXMorePurchasesToUnlockYourFREEItem": "فقط {{cups}} أكثر للفتح الوجبة المجانية!",
     "youreJustXCupsAwayFromYourNextReward": "🎉 أنت فقط {{cups}} أكثر للحصول على المكافأة التالية!",
     "callWaiter": "اتصل بالرادير",
-    "balance": "الرصيد"
+    "balance": "الرصيد",
+    "closed": "مغلق",
+    "sunday": "الأحد",
+    "monday": "الإثنين",
+    "tuesday": "الثلاثاء",
+    "wednesday": "الأربعاء",
+    "thursday": "الخميس",
+    "friday": "الجمعة",
+    "saturday": "السبت"
   },
   "cart": {
     "addSpecialRequestOptional": "إضافة طلب خاص (اختياري)",

src/assets/locals/en.json

@@ -182,7 +182,15 @@
     "justXMorePurchasesToUnlockYourFREEItem": "Just {{cups}} more purchases to unlock your FREE item!",
     "youreJustXCupsAwayFromYourNextReward": "🎉 You're just {{cups}} stamps away from your next reward!",
     "callWaiter": "Call Waiter",
-    "balance": "Balance"
+    "balance": "Balance",
+    "closed": "Closed",
+    "sunday": "Sunday",
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday"
   },
   "cart": {
     "remainingToPay": "Remaining to Pay",

src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx

@@ -4,19 +4,70 @@ import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
 import ProText from "components/ProText";
 import ProTitle from "components/ProTitle";
 import { useAppSelector } from "redux/hooks";
+import { useGetOpeningTimesQuery } from "redux/api/others";
+import { useMemo } from "react";
 
 interface OpeningTimesBottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
 }
 
-const textStyle: React.CSSProperties = {
+const dayTextStyle: React.CSSProperties = {
   fontWeight: 400,
   fontStyle: "Regular",
   fontSize: 14,
   lineHeight: "140%",
   letterSpacing: "0%",
-  marginBottom: 4,
+};
+
+const todayTextStyle: React.CSSProperties = {
+  fontWeight: 700,
+  fontStyle: "Bold",
+  fontSize: 14,
+  lineHeight: "140%",
+  letterSpacing: "0%",
+};
+
+// Helper function to format time (HH:mm to 12h format)
+const formatTime = (time: string | null | undefined): string => {
+  if (!time) return "";
+
+  // If already in 12h format (contains AM/PM), return as is
+  if (time.includes("AM") || time.includes("PM")) {
+    return time;
+  }
+
+  // Parse 24h format (HH:mm)
+  const [hours, minutes] = time.split(":");
+  const hour24 = parseInt(hours, 10);
+
+  if (isNaN(hour24)) return time;
+
+  const hour12 = hour24 % 12 || 12;
+  const ampm = hour24 >= 12 ? "PM" : "AM";
+  return `${hour12}:${minutes} ${ampm}`;
+};
+
+// Helper function to get time ranges for a day
+const getDayTimes = (
+  openingTimes: any,
+  dayIndex: number,
+): { shift1: string | null; shift2: string | null } => {
+  if (!openingTimes) {
+    return { shift1: null, shift2: null };
+  }
+
+  const from1 = openingTimes[`${dayIndex}_from` as keyof typeof openingTimes];
+  const to1 = openingTimes[`${dayIndex}_to` as keyof typeof openingTimes];
+  const from2 = openingTimes[`2_${dayIndex}_from` as keyof typeof openingTimes];
+  const to2 = openingTimes[`2_${dayIndex}_to` as keyof typeof openingTimes];
+
+  const shift1 =
+    from1 && to1 ? `${formatTime(from1)} - ${formatTime(to1)}` : null;
+  const shift2 =
+    from2 && to2 ? `${formatTime(from2)} - ${formatTime(to2)}` : null;
+
+  return { shift1, shift2 };
 };
 
 export function OpeningTimesBottomSheet({
@@ -26,6 +77,12 @@ export function OpeningTimesBottomSheet({
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
   const { restaurant } = useAppSelector((state) => state.order);
+  const { data: openingTimes } = useGetOpeningTimesQuery(
+    restaurant?.restautantId,
+    {
+      skip: !restaurant?.restautantId,
+    },
+  );
 
   const days = [
     "sunday",
@@ -37,7 +94,11 @@ export function OpeningTimesBottomSheet({
     "saturday",
   ];
   const todayIndex = new Date().getDay();
-  const todayDay = days[todayIndex];
+
+  // Memoize day times to avoid recalculating on every render
+  const dayTimes = useMemo(() => {
+    return days.map((_, index) => getDayTimes(openingTimes, index));
+  }, [openingTimes]);
 
   return (
     <ProBottomSheet
@@ -46,170 +107,92 @@ export function OpeningTimesBottomSheet({
       title={t("menu.openingTimes")}
       showCloseButton={false}
       initialSnap={1}
-      height={445}
+      height={500}
-      snapPoints={[445]}
+      snapPoints={[500]}
     >
       <div
         style={{
           display: "flex",
           flexDirection: "column",
-          padding: 20,
+          padding: "20px 20px 0",
+          gap: 24,
         }}
       >
-        <ProTitle level={5}>{t("menu.address")}</ProTitle>
+        {/* Address Section */}
-        <ProText type="secondary">
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
-          {isRTL ? restaurant?.addressAR : restaurant?.address}
+          <ProTitle level={5} style={{ marginBottom: 0 }}>
-        </ProText>
+            {t("menu.address")}
+          </ProTitle>
+          <ProText
+            type="secondary"
+            style={{ fontSize: 14, lineHeight: "20px" }}
+          >
+            {isRTL ? restaurant?.addressAR : restaurant?.address}
+          </ProText>
+        </div>
 
-        <ProTitle level={5}>{t("menu.openingTimes")}</ProTitle>
+        {/* Opening Times Section */}
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-          <ProText
+          <ProTitle level={5} style={{ marginBottom: 0 }}>
-            type="secondary"
+            {t("menu.openingTimes")}
+          </ProTitle>
+          <div
             style={{
-              ...textStyle,
+              display: "flex",
-              fontWeight: todayDay === "sunday" ? 700 : 400,
+              flexDirection: "column",
+              gap: 12,
             }}
           >
-            sunday
+            {days.map((day, index) => {
-          </ProText>
+              const isToday = index === todayIndex;
-          <ProText
+              const { shift1, shift2 } = dayTimes[index];
-            type="secondary"
+              const hasShifts = shift1 || shift2;
-            style={{
+              const timeDisplay = shift2
-              ...textStyle,
+                ? `${shift1}, ${shift2}`
-              fontWeight: todayDay === "sunday" ? 700 : 400,
+                : shift1 || t("menu.closed");
-            }}
+
-          >
+              return (
-            10:00 AM to 10:00 PM
+                <div
-          </ProText>
+                  key={day}
-        </div>
+                  style={{
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
+                    display: "flex",
-          <ProText
+                    justifyContent: "space-between",
-            type="secondary"
+                    alignItems: "flex-start",
-            style={{
+                    padding: isToday ? "8px 12px" : "4px 0",
-              ...textStyle,
+                    backgroundColor: isToday
-              fontWeight: todayDay === "monday" ? 700 : 400,
+                      ? "rgba(0, 0, 0, 0.02)"
-            }}
+                      : "transparent",
-          >
+                    borderRadius: 8,
-            monday
+                    transition: "background-color 0.2s ease",
-          </ProText>
+                  }}
-          <ProText
+                >
-            type="secondary"
+                  <ProText
-            style={{
+                    type={isToday ? undefined : "secondary"}
-              ...textStyle,
+                    style={{
-              fontWeight: todayDay === "monday" ? 700 : 400,
+                      ...(isToday ? todayTextStyle : dayTextStyle),
-            }}
+                      textTransform: "capitalize",
-          >
+                      flex: 1,
-            10:00 AM to 10:00 PM
+                    }}
-          </ProText>
+                  >
-        </div>
+                    {t(`menu.${day}`)}
-        <div style={{ display: "flex", justifyContent: "space-between"}}>
+                  </ProText>
-          <ProText
+                  <ProText
-            type="secondary"
+                    type={isToday ? undefined : "secondary"}
-            style={{
+                    style={{
-              ...textStyle,
+                      ...(isToday ? todayTextStyle : dayTextStyle),
-              fontWeight: todayDay === "tuesday" ? 700 : 400,
+                      textAlign: isRTL ? "left" : "right",
-            }}
+                      flex: 1,
-          >
+                      color: !hasShifts ? "#999" : undefined,
-            tuesday
+                    }}
-          </ProText>
+                  >
-          <ProText
+                    {timeDisplay}
-            type="secondary"
+                  </ProText>
-            style={{
+                </div>
-              ...textStyle,
+              );
-              fontWeight: todayDay === "tuesday" ? 700 : 400,
+            })}
-            }}
+          </div>
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "wednesday" ? 700 : 400,
-            }}
-          >
-            wednesday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "wednesday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "thursday" ? 700 : 400,
-            }}
-          >
-            thursday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "thursday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "friday" ? 700 : 400,
-            }}
-          >
-            friday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "friday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
-        </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "saturday" ? 700 : 400,
-            }}
-          >
-            saturday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "saturday" ? 700 : 400,
-            }}
-          >
-            10:00 AM to 10:00 PM
-          </ProText>
         </div>
       </div>
-      <Button
-        type="primary"
-        style={{ width: "100%", height: 48 }}
-        onClick={onClose}
-      >
-        {t("menu.close")}
-      </Button>
     </ProBottomSheet>
   );
 }

src/pages/product/components/ExtraGroupsContainer.tsx

@@ -14,7 +14,6 @@ export default function ExtraGroupsContainer({
   selectedExtrasByGroup: Record<number, string[]>;
   setSelectedExtrasByGroup: Dispatch<SetStateAction<Record<number, string[]>>>;
 }) {
-
   return (
     <>
       {groupsList.length > 0 && (

src/pages/product/page.tsx

@@ -214,6 +214,8 @@ export default function ProductDetailPage({
     );
   }
 
+  console.log(product.theExtrasGroups);
+
   return (
     <div
       style={{
@@ -367,14 +369,13 @@ export default function ProductDetailPage({
                   />
                 )}
 
-                {product.theExtrasGroups.length === 0 &&
+                {getExtras()?.length > 0 && (
-                  getExtras()?.length > 0 && (
+                  <ExtraComponent
-                    <ExtraComponent
+                    extrasList={getExtras()}
-                      extrasList={getExtras()}
+                    selectedExtras={selectedExtras}
-                      selectedExtras={selectedExtras}
+                    setSelectedExtras={setSelectedExtras}
-                      setSelectedExtras={setSelectedExtras}
+                  />
-                    />
+                )}
-                  )}
               </Space>
             </div>
           )}

src/redux/api/others.ts

@@ -13,6 +13,7 @@ import {
   REDEEM_DETAILS_URL,
   LOYALTY_HISTORY_URL,
   CREATE_GIFT_AMOUNT_URL,
+  OPENING_TIMES_URL,
 } from "utils/constants";
 
 import { OrderDetails } from "pages/checkout/hooks/types";
@@ -25,6 +26,7 @@ import {
 import { baseApi } from "./apiSlice";
 import { EGiftCard } from "pages/EGiftCards/type";
 import { RedeemResponse } from "pages/redeem/types";
+import { OpeningTimeResponse } from "./types";
 
 export const branchApi = baseApi.injectEndpoints({
   endpoints: (builder) => ({
@@ -210,6 +212,15 @@ export const branchApi = baseApi.injectEndpoints({
         body,
       }),
     }),
+    getOpeningTimes: builder.query<OpeningTimeResponse, string | void>({
+      query: (restaurantId: string) => ({
+        url: OPENING_TIMES_URL +"/"+ restaurantId,
+        method: "GET",
+      }),
+      transformResponse: (response: any) => {
+        return response.result;
+      },
+    }),
   }),
 });
 export const {
@@ -227,4 +238,5 @@ export const {
   useGetRedeemDetailsQuery,
   useGetLoyaltyHistoryQuery,
   useCreateGiftAmountMutation,
+  useGetOpeningTimesQuery,
 } = branchApi;

src/redux/api/types.ts

@@ -0,0 +1,34 @@
+export interface OpeningTimeResponse {
+  id: number;
+  created_at: string;
+  updated_at: string;
+  "0_from": string;
+  "0_to": string;
+  "1_from": string;
+  "1_to": string;
+  "2_from": string;
+  "2_to": string;
+  "3_from": string;
+  "3_to": string;
+  "4_from": string;
+  "4_to": string;
+  "5_from": string;
+  "5_to": string;
+  "6_from": string;
+  "6_to": string;
+  restorant_id: number;
+  "2_0_from": any;
+  "2_0_to": any;
+  "2_1_from": any;
+  "2_1_to": any;
+  "2_2_from": any;
+  "2_2_to": any;
+  "2_3_from": any;
+  "2_3_to": any;
+  "2_4_from": any;
+  "2_4_to": any;
+  "2_5_from": any;
+  "2_5_to": any;
+  "2_6_from": any;
+  "2_6_to": any;
+}

src/utils/constants.ts

@@ -112,3 +112,4 @@ export const EGIFT_CARDS_URL = `${BASE_URL}gift/cards`;
 export const REDEEM_DETAILS_URL = `${BASE_URL}gift/getGiftOrderByVoucherCode`;
 export const LOYALTY_HISTORY_URL = `${BASE_URL}loyaltyHistory`;
 export const CREATE_GIFT_AMOUNT_URL = `${BASE_URL}gift/addGiftAmount`;
+export const OPENING_TIMES_URL = `${BASE_URL}restaurant/getWorkingHours`;