113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
import { Divider, Tag } from "antd";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard";
|
|
import ProText from "components/ProText";
|
|
import { useTranslation } from "react-i18next";
|
|
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 { 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 (
|
|
<>
|
|
<ProInputCard title={t("redeem.restaurantLocation")}>
|
|
<div className={styles.mapContainer}>
|
|
<GoogleMap
|
|
readOnly={true}
|
|
initialLocation={{
|
|
lat: parseFloat(redeemDetails?.gift?.lat || "0"),
|
|
lng: parseFloat(redeemDetails?.gift?.lng || "0"),
|
|
address: "",
|
|
}}
|
|
height="160px"
|
|
/>
|
|
</div>
|
|
|
|
<Divider style={{ margin: "16px 0" }} />
|
|
|
|
<div className={styles.orderNotes}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 4,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<ProText
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 14,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
{redeemDetails?.gift?.restaurant}
|
|
</ProText>
|
|
|
|
<ProText
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 14,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
color: "#777580",
|
|
}}
|
|
>
|
|
{redeemDetails?.gift?.restaurant}
|
|
</ProText>
|
|
</div>
|
|
<Tag
|
|
onClick={handleGetDirections}
|
|
style={{
|
|
backgroundColor: "#FFF9E6",
|
|
color: "#E8B400",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 4,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<DirectionsIcon />
|
|
<ProText
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 14,
|
|
lineHeight: "140%",
|
|
letterSpacing: "0%",
|
|
color: "#E8B400",
|
|
}}
|
|
>
|
|
{t("redeem.getDirections")}
|
|
</ProText>
|
|
</Tag>
|
|
</div>
|
|
</ProInputCard>
|
|
</>
|
|
);
|
|
}
|