redeem: integration

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 />