intergrate openening times & show extras

2026-01-15 11:43:36 +03:00
parent 046773cb8b
commit 0ce2d320a8
8 changed files with 212 additions and 166 deletions
--- a/src/assets/locals/ar.json
+++ b/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": "إضافة طلب خاص (اختياري)",
--- a/src/assets/locals/en.json
+++ b/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",
--- a/src/components/CustomBottomSheet/OpeningTimesBottomSheet.tsx
+++ b/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}
-      snapPoints={[445]}
+      height={500}
+      snapPoints={[500]}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "column",
-          padding: 20,
+          padding: "20px 20px 0",
+          gap: 24,
        }}
      >
-        <ProTitle level={5}>{t("menu.address")}</ProTitle>
-        <ProText type="secondary">
+        {/* Address Section */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          <ProTitle level={5} style={{ marginBottom: 0 }}>
+            {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>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
+        {/* Opening Times Section */}
+        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+          <ProTitle level={5} style={{ marginBottom: 0 }}>
+            {t("menu.openingTimes")}
+          </ProTitle>
+          <div
            style={{
-              ...textStyle,
-              fontWeight: todayDay === "sunday" ? 700 : 400,
+              display: "flex",
+              flexDirection: "column",
+              gap: 12,
            }}
          >
-            sunday
+            {days.map((day, index) => {
+              const isToday = index === todayIndex;
+              const { shift1, shift2 } = dayTimes[index];
+              const hasShifts = shift1 || shift2;
+              const timeDisplay = shift2
+                ? `${shift1}, ${shift2}`
+                : shift1 || t("menu.closed");
+
+              return (
+                <div
+                  key={day}
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "flex-start",
+                    padding: isToday ? "8px 12px" : "4px 0",
+                    backgroundColor: isToday
+                      ? "rgba(0, 0, 0, 0.02)"
+                      : "transparent",
+                    borderRadius: 8,
+                    transition: "background-color 0.2s ease",
+                  }}
+                >
+                  <ProText
+                    type={isToday ? undefined : "secondary"}
+                    style={{
+                      ...(isToday ? todayTextStyle : dayTextStyle),
+                      textTransform: "capitalize",
+                      flex: 1,
+                    }}
+                  >
+                    {t(`menu.${day}`)}
                  </ProText>
                  <ProText
-            type="secondary"
+                    type={isToday ? undefined : "secondary"}
                    style={{
-              ...textStyle,
-              fontWeight: todayDay === "sunday" ? 700 : 400,
+                      ...(isToday ? todayTextStyle : dayTextStyle),
+                      textAlign: isRTL ? "left" : "right",
+                      flex: 1,
+                      color: !hasShifts ? "#999" : undefined,
                    }}
                  >
-            10:00 AM to 10:00 PM
+                    {timeDisplay}
                  </ProText>
                </div>
-        <div style={{ display: "flex", justifyContent: "space-between" }}>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "monday" ? 700 : 400,
-            }}
-          >
-            monday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "monday" ? 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 === "tuesday" ? 700 : 400,
-            }}
-          >
-            tuesday
-          </ProText>
-          <ProText
-            type="secondary"
-            style={{
-              ...textStyle,
-              fontWeight: todayDay === "tuesday" ? 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 === "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>
      </div>
-      <Button
-        type="primary"
-        style={{ width: "100%", height: 48 }}
-        onClick={onClose}
-      >
-        {t("menu.close")}
-      </Button>
    </ProBottomSheet>
  );
 }
--- a/src/pages/product/components/ExtraGroupsContainer.tsx
+++ b/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 && (
--- a/src/pages/product/page.tsx
+++ b/src/pages/product/page.tsx
@@ -214,6 +214,8 @@ export default function ProductDetailPage({
    );
  }

+  console.log(product.theExtrasGroups);
+
  return (
    <div
      style={{
@@ -367,8 +369,7 @@ export default function ProductDetailPage({
                  />
                )}

-                {product.theExtrasGroups.length === 0 &&
-                  getExtras()?.length > 0 && (
+                {getExtras()?.length > 0 && (
                  <ExtraComponent
                    extrasList={getExtras()}
                    selectedExtras={selectedExtras}
--- a/src/redux/api/others.ts
+++ b/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;
--- a/src/redux/api/types.ts
+++ b/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;
+}
--- a/src/utils/constants.ts
+++ b/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`;