redeem: integration

src/pages/redeem/components/GiftItemsCard.tsx

@@ -4,7 +4,10 @@ import ProText from "components/ProText";
 import { useTranslation } from "react-i18next";
 import styles from "./GiftItemsCard.module.css";
 import { useParams } from "react-router-dom";
-import { useGetOrderDetailsQuery } from "redux/api/others";
+import {
+  useGetOrderDetailsQuery,
+  useGetRedeemDetailsQuery,
+} from "redux/api/others";
 import ImageWithFallback from "components/ImageWithFallback";
 import { useAppSelector } from "redux/hooks";
 import useBreakPoint from "hooks/useBreakPoint";
@@ -16,15 +19,13 @@ export function GiftItemsCard({ isCart = false }: { isCart?: boolean }) {
   const { t } = useTranslation();
 
   const { voucherId } = useParams();
-  const { data: orderDetails, isLoading } = useGetOrderDetailsQuery(
+  const { data: redeemDetails, isLoading } = useGetRedeemDetailsQuery(
+    voucherId || "",
     {
-      orderID: voucherId || "5711385",
-      restaurantID: localStorage.getItem("restaurantID") || "",
+      skip: !voucherId,
     },
-    // {
-    //   skip: !voucherId,
-    // },
   );
+
   const { isRTL } = useAppSelector((state) => state.locale);
   const { isMobile, isTablet } = useBreakPoint();
   const getMenuItemImageStyle = () => {
@@ -176,7 +177,7 @@ export function GiftItemsCard({ isCart = false }: { isCart?: boolean }) {
             ))}
           </>
         ) : (
-          orderDetails?.orderItems?.map((item: any, index: number) => (
+          redeemDetails?.gift?.items?.map((item: any, index: number) => (
             <div key={index} style={{ position: "relative" }}>
               <Space
                 size="middle"
@@ -284,7 +285,7 @@ export function GiftItemsCard({ isCart = false }: { isCart?: boolean }) {
                 </div>
               </Space>
 
-              {index !== orderDetails?.orderItems?.length - 1 && (
+              {index !== redeemDetails?.gift?.items?.length - 1 && (
                 <Divider style={{ margin: "16px 0" }} />
               )}
             </div>

src/pages/redeem/components/LocationCard.tsx

@@ -1,16 +1,32 @@
 import { Divider, Tag } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProText from "components/ProText";
-import { selectCart } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks";
 import styles from "./LocationCard.module.css";
 import { GoogleMap } from "components/CustomBottomSheet/GoogleMap";
 import DirectionsIcon from "components/Icons/DirectionsIcon";
+import { useGetRedeemDetailsQuery } from "redux/api/others";
+import { useParams } from "react-router-dom";
 
 export function LocationCard() {
   const { t } = useTranslation();
-  const { restaurant } = useAppSelector(selectCart);
+  const { voucherId } = useParams();
+  const { data: redeemDetails } = useGetRedeemDetailsQuery(voucherId || "", {
+    skip: !voucherId,
+  });
+
+  const handleGetDirections = () => {
+    const lat = redeemDetails?.gift?.lat;
+    const lng = redeemDetails?.gift?.lng;
+
+    if (lat && lng) {
+      // Google Maps URL that works on both mobile and desktop
+      // On mobile devices, this will open the Google Maps app if installed
+      const googleMapsUrl = `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
+      // Use window.location.href for better mobile compatibility (works in webviews)
+      window.location.href = googleMapsUrl;
+    }
+  };
 
   return (
     <>
@@ -19,8 +35,8 @@ export function LocationCard() {
           <GoogleMap
             readOnly={true}
             initialLocation={{
-              lat: parseFloat(restaurant.lat || "0"),
-              lng: parseFloat(restaurant.lng || "0"),
+              lat: parseFloat(redeemDetails?.gift?.lat || "0"),
+              lng: parseFloat(redeemDetails?.gift?.lng || "0"),
               address: "",
             }}
             height="160px"
@@ -48,7 +64,7 @@ export function LocationCard() {
                 color: "#333333",
               }}
             >
-              {restaurant.restautantName}
+              {redeemDetails?.gift?.restaurant}
             </ProText>
 
             <ProText
@@ -61,16 +77,18 @@ export function LocationCard() {
                 color: "#777580",
               }}
             >
-              {restaurant.address}
+              {redeemDetails?.gift?.restaurant}
             </ProText>
           </div>
           <Tag
+            onClick={handleGetDirections}
             style={{
               backgroundColor: "#FFF9E6",
               color: "#E8B400",
               display: "flex",
               alignItems: "center",
               gap: 4,
+              cursor: "pointer",
             }}
           >
             <DirectionsIcon />

src/pages/redeem/components/VoucherBalanceCard.tsx

@@ -1,48 +1,46 @@
 import { Divider, Switch, Tag } from "antd";
 import ProInputCard from "components/ProInputCard/ProInputCard";
 import ProText from "components/ProText";
-import { selectCart } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppSelector } from "redux/hooks";
 import styles from "./VoucherBalanceCard.module.css";
 import { useNavigate, useParams } from "react-router-dom";
 import CardAmountIcon from "components/Icons/CardAmountIcon";
 import ArabicPrice from "components/ArabicPrice";
+import { useGetRedeemDetailsQuery } from "redux/api/others";
 
 export function VoucherBalanceCard() {
   const { t } = useTranslation();
-  const { giftDetails } = useAppSelector(selectCart);
 
   const navigate = useNavigate();
-  const { subdomain } = useParams();
-
+  const { voucherId } = useParams();
+  const { data: redeemDetails } = useGetRedeemDetailsQuery(voucherId || "", {
+    skip: !voucherId,
+  });
   return (
     <>
       <ProInputCard
         title={t("redeem.voucherBalance")}
         titleRight={
-          <>
-            <Tag
-              style={{
-                height: 23,
-                textAlign: "center",
-                opacity: 1,
-                paddingRight: 10,
-                paddingLeft: 10,
-                borderRadius: 100,
-                fontWeight: 500,
-                fontStyle: "Medium",
-                fontSize: 12,
-                lineHeight: "140%",
-                letterSpacing: "0%",
-                cursor: "pointer",
-                backgroundColor: "#FFF9E6",
-                color: "#B58D00",
-              }}
-            >
-              {t("redeem.pending")}
-            </Tag>
-          </>
+          <Tag
+            style={{
+              height: 23,
+              textAlign: "center",
+              opacity: 1,
+              paddingRight: 10,
+              paddingLeft: 10,
+              borderRadius: 100,
+              fontWeight: 500,
+              fontStyle: "Medium",
+              fontSize: 12,
+              lineHeight: "140%",
+              letterSpacing: "0%",
+              cursor: "pointer",
+              backgroundColor: "#FFF9E6",
+              color: "#B58D00",
+            }}
+          >
+            {t("redeem.pending")}
+          </Tag>
         }
       >
         <div className={styles.orderNotes}>
@@ -87,7 +85,7 @@ export function VoucherBalanceCard() {
                 color: "#333333",
               }}
             >
-              <ArabicPrice price={giftDetails?.amount || 0} />
+              <ArabicPrice price={redeemDetails?.gift?.amount || 0} />
             </ProText>
           </div>
           <Switch />
@@ -100,9 +98,6 @@ export function VoucherBalanceCard() {
             flexDirection: "row",
             justifyContent: "space-between",
           }}
-          onClick={() => {
-            navigate(`/${subdomain}/cart`);
-          }}
         >
           <ProText
             style={{