diff --git a/src/assets/locals/ar.json b/src/assets/locals/ar.json index d4dd557..1435555 100644 --- a/src/assets/locals/ar.json +++ b/src/assets/locals/ar.json @@ -563,6 +563,8 @@ "voucherBalance": "رصيد القسيمة", "getDirections": "الحصول على الاتجاهات", "giftedItems": "العناصر المهدية", - "viewAll": "عرض الكل" + "viewAll": "عرض الكل", + "voucherCodeCopied": "تم نسخ رمز القسيمة", + "copyFailed": "فشل نسخ رمز القسيمة" } } diff --git a/src/assets/locals/en.json b/src/assets/locals/en.json index ba3e5b1..55c6ed5 100644 --- a/src/assets/locals/en.json +++ b/src/assets/locals/en.json @@ -581,6 +581,8 @@ "voucherBalance": "Voucher Balance", "getDirections": "Get Directions", "giftedItems": "Gifted Items", - "viewAll": "View All" + "viewAll": "View All", + "voucherCodeCopied": "Voucher code copied!", + "copyFailed": "Failed to copy voucher code" } } diff --git a/src/pages/redeem/components/GiftItemsCard.tsx b/src/pages/redeem/components/GiftItemsCard.tsx index 044dd2f..865fd08 100644 --- a/src/pages/redeem/components/GiftItemsCard.tsx +++ b/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) => (
- {index !== orderDetails?.orderItems?.length - 1 && ( + {index !== redeemDetails?.gift?.items?.length - 1 && ( )}
diff --git a/src/pages/redeem/components/LocationCard.tsx b/src/pages/redeem/components/LocationCard.tsx index a4234bb..5f9640d 100644 --- a/src/pages/redeem/components/LocationCard.tsx +++ b/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() { - {restaurant.restautantName} + {redeemDetails?.gift?.restaurant} - {restaurant.address} + {redeemDetails?.gift?.restaurant} diff --git a/src/pages/redeem/components/VoucherBalanceCard.tsx b/src/pages/redeem/components/VoucherBalanceCard.tsx index 65cc299..ae9faca 100644 --- a/src/pages/redeem/components/VoucherBalanceCard.tsx +++ b/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 ( <> - - {t("redeem.pending")} - - + + {t("redeem.pending")} + } >
@@ -87,7 +85,7 @@ export function VoucherBalanceCard() { color: "#333333", }} > - +
@@ -100,9 +98,6 @@ export function VoucherBalanceCard() { flexDirection: "row", justifyContent: "space-between", }} - onClick={() => { - navigate(`/${subdomain}/cart`); - }} > state.order); - const hasRefetchedRef = useRef(false); const navigate = useNavigate(); const { subdomain } = useParams(); - const { data: orderDetails, isLoading } = useGetOrderDetailsQuery( - { - orderID: voucherId || "", - restaurantID: localStorage.getItem("restaurantID") || "", - }, + const { data: redeemDetails, isLoading } = useGetRedeemDetailsQuery( + voucherId || "", { skip: !voucherId, }, ); - // Get restaurant subdomain for refetching - const restaurantSubdomain = restaurant?.subdomain; - const { refetch: refetchRestaurantDetails } = useGetRestaurantDetailsQuery( - restaurantSubdomain || "", - { - skip: !restaurantSubdomain, - }, - ); - - // Reset refetch flag when orderId changes - useEffect(() => { - hasRefetchedRef.current = false; - }, [voucherId]); - - // Refetch restaurant details when order status has alias "closed" - useEffect(() => { - if (orderDetails?.status && !hasRefetchedRef.current) { - const hasClosedStatus = orderDetails.status.some( - (status) => status?.alias === "closed", - ); - - if (hasClosedStatus && restaurantSubdomain) { - refetchRestaurantDetails(); - hasRefetchedRef.current = true; - } - } - }, [orderDetails?.status, restaurantSubdomain, refetchRestaurantDetails]); - const handleCheckout = () => { navigate(`/${subdomain}/menu?orderType=${OrderType.Redeem}`); }; + const handleCopyVoucherCode = async () => { + const voucherCode = redeemDetails?.gift?.voucher_code; + if (voucherCode) { + try { + await navigator.clipboard.writeText(voucherCode); + message.success( + t("redeem.voucherCodeCopied") || "Voucher code copied!", + ); + } catch (error) { + message.error(t("redeem.copyFailed") || "Failed to copy voucher code"); + } + } + }; + + if (isLoading) return ; + return ( <> @@ -96,7 +74,7 @@ export default function RedeemPage() { - {isLoading || !orderDetails?.restaurant_iimage ? ( + {isLoading || !redeemDetails?.gift?.restaurant_iimage ? (
- - + - {t("redeem.showThisCodeAtTheRestaurant")} - - -
- - {t("redeem.useThisCodeIfScanningNotPossible")} + {t("redeem.showThisCodeAtTheRestaurant")} -
- + +
+ + + {t("redeem.useThisCodeIfScanningNotPossible")} + +
+ -
- - Active - Expires in 12 days - + + Active - Expires in 12 days + +
({ @@ -171,6 +173,15 @@ export const branchApi = baseApi.injectEndpoints({ return response.result; }, }), + getRedeemDetails: builder.query({ + query: (voucherId: string) => ({ + url: `${REDEEM_DETAILS_URL}/${voucherId}`, + method: "GET", + }), + transformResponse: (response: any) => { + return response.result; + }, + }), }), }); export const { @@ -185,4 +196,5 @@ export const { useRateOrderMutation, useGetUserDetailsQuery, useGetEGiftCardsQuery, + useGetRedeemDetailsQuery, } = branchApi; diff --git a/src/utils/constants.ts b/src/utils/constants.ts index e18dd34..7202743 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -108,4 +108,5 @@ export const SEND_OTP_URL = `${API_BASE_URL}sendOtp`; export const CONFIRM_OTP_URL = `${API_BASE_URL}confirmOtp`; export const PAYMENT_CONFIRMATION_URL = `https://menu.fascano.com/payment/confirmation`; export const DISCOUNT_URL = `${BASE_URL}getDiscount`; -export const EGIFT_CARDS_URL = `${BASE_URL}gift/cards`; \ No newline at end of file +export const EGIFT_CARDS_URL = `${BASE_URL}gift/cards`; +export const REDEEM_DETAILS_URL = `${BASE_URL}gift/getGiftOrderByVoucherCode`; \ No newline at end of file