redeem: integration

2026-01-11 15:25:45 +03:00
parent 6271c14eff
commit b0288ebcf6
9 changed files with 278 additions and 170 deletions
--- a/src/assets/locals/ar.json
+++ b/src/assets/locals/ar.json
@@ -563,6 +563,8 @@
    "voucherBalance": "رصيد القسيمة",
    "getDirections": "الحصول على الاتجاهات",
    "giftedItems": "العناصر المهدية",
-    "viewAll": "عرض الكل"
+    "viewAll": "عرض الكل",
+    "voucherCodeCopied": "تم نسخ رمز القسيمة",
+    "copyFailed": "فشل نسخ رمز القسيمة"
  }
 }
--- 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"
  }
 }
--- 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) => (
            <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>
--- 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() {
          <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 />
--- a/src/pages/redeem/components/VoucherBalanceCard.tsx
+++ b/src/pages/redeem/components/VoucherBalanceCard.tsx
@@ -1,27 +1,26 @@
 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,
@@ -42,7 +41,6 @@ export function VoucherBalanceCard() {
          >
            {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={{
--- a/src/pages/redeem/page.tsx
+++ b/src/pages/redeem/page.tsx
@@ -1,73 +1,51 @@
-import { Button, Card, Image, Layout, Skeleton } from "antd";
+import { Button, Card, Image, Layout, QRCode, Skeleton, message } from "antd";

 import ProHeader from "components/ProHeader/ProHeader";
 import ProText from "components/ProText";
-import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
-import {
-  useGetOrderDetailsQuery,
-  useGetRestaurantDetailsQuery,
-} from "redux/api/others";
+import { useGetRedeemDetailsQuery } from "redux/api/others";
 import styles from "./redeem.module.css";
-import QRIcon from "components/Icons/QRIcon";
 import CopyIcon from "components/Icons/CopyIcon";
-import { useAppSelector } from "redux/hooks";
 import { LocationCard } from "./components/LocationCard.tsx";
 import { GiftItemsCard } from "./components/GiftItemsCard.tsx";
 import { VoucherBalanceCard } from "./components/VoucherBalanceCard.tsx";
 import { OrderType } from "pages/checkout/hooks/types.ts";
+import { Loader } from "components/Loader/Loader.tsx";

 export default function RedeemPage() {
  const { t } = useTranslation();
  const { voucherId } = useParams();
-  const { restaurant } = useAppSelector((state) => 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 <Loader />;
+
  return (
    <>
      <Layout>
@@ -96,7 +74,7 @@ export default function RedeemPage() {
            </ProText>
          </div>

-          {isLoading || !orderDetails?.restaurant_iimage ? (
+          {isLoading || !redeemDetails?.gift?.restaurant_iimage ? (
            <div className={styles.carouselContainer}>
              <div className={styles.cardWrapper}>
                <Skeleton.Image
@@ -113,7 +91,7 @@ export default function RedeemPage() {
            <div className={styles.carouselContainer}>
              <div className={styles.cardWrapper}>
                <Image
-                  src={orderDetails?.restaurant_iimage}
+                  src={redeemDetails?.gift?.card_url}
                  width={205}
                  height={134}
                  className={styles.cardImage}
@@ -161,6 +139,7 @@ export default function RedeemPage() {
            </ProText>
          </div>

+          <div>
            <Card
              style={{
                borderRadius: 0,
@@ -195,8 +174,10 @@ export default function RedeemPage() {
              >
                {t("redeem.showThisCodeAtTheRestaurant")}
              </ProText>
-            <QRIcon />
-            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              <QRCode value={redeemDetails?.gift?.gr_url || "-"} />
+              <div
+                style={{ display: "flex", flexDirection: "column", gap: 12 }}
+              >
                <Button
                  style={{
                    height: 40,
@@ -208,8 +189,9 @@ export default function RedeemPage() {
                  }}
                  icon={<CopyIcon className={styles.copyIcon} />}
                  iconPlacement="end"
+                  onClick={handleCopyVoucherCode}
                >
-                GFT - 92KD - 7X84
+                  {redeemDetails?.gift?.voucher_code}
                </Button>
                <ProText
                  style={{
@@ -257,6 +239,7 @@ export default function RedeemPage() {
                Active - Expires in 12 days
              </ProText>
            </div>
+          </div>

          <div
            style={{
--- a/src/pages/redeem/types.ts
+++ b/src/pages/redeem/types.ts
@@ -0,0 +1,94 @@
+export interface RedeemResponse {
+    gift: Gift
+    working_hours: WorkingHours
+    notes: Notes
+    is_restaurant_closed: boolean
+  }
+  
+  export interface Gift {
+    id: number
+    voucher_amount: string
+    amount: string
+    restorant_id: number
+    voucher_code: string
+    used_amount: string
+    show_sender_info: number
+    remaining_amount: string
+    is_used: number
+    sender_phone: string
+    gift_type: string
+    sender_name: string
+    recipient_phone: string
+    recipient_name: string
+    message: any
+    created_at: string
+    card_url: string
+    gr_url: string
+    restaurant: string
+    global_currency: string
+    lat: string
+    lng: string
+    local_currency: string
+    restaurant_iimage: string
+    order_id: number
+    items: Item[]
+    itemsImagePrefix: string
+    itemsImagePrefixOld: string
+  }
+  
+  export interface Item {
+    id: number
+    is_loyalty_used: number
+    no_of_stamps_give: number
+    isHasLoyalty: boolean
+    is_vat_disabled: number
+    name: string
+    price: number
+    qty: number
+    variant_price: string
+    image: string
+    imageName: string
+    variantName: string
+    variantLocalName: string
+    extras: any[]
+    descriptionEN: string
+    descriptionAR: string
+    itemline: string
+    itemlineAR: string
+    itemlineAREN: string
+    extrasgroups: any[]
+    extragroupnew: any[]
+    itemComment: string
+    variant: any
+    itemExtras: any[]
+    AvaiilableVariantExtras: any[]
+    isPrinted: number
+    category_id: number
+    pos_order_id: string
+    updated_at: string
+    created_at: string
+    old_qty: number
+    new_qty: number
+    last_printed_qty: number
+    deleted_qty: number
+    discount_value: any
+    discount_type_id: any
+    original_price: number
+    pricing_method: string
+    is_already_paid: number
+    hash_item: string
+  }
+  
+  export interface WorkingHours {
+    opening_time: string
+    closing_time: string
+    opening_time_2: any
+    closing_time_2: any
+    is_open: boolean
+  }
+  
+  export interface Notes {
+    en: string
+    ar: string
+  }
+  
--- a/src/redux/api/others.ts
+++ b/src/redux/api/others.ts
@@ -10,6 +10,7 @@ import {
  TABLES_URL,
  USER_DETAILS_URL,
  EGIFT_CARDS_URL,
+  REDEEM_DETAILS_URL,
 } from "utils/constants";

 import { OrderDetails } from "pages/checkout/hooks/types";
@@ -21,6 +22,7 @@ import {
 } from "utils/types/appTypes";
 import { baseApi } from "./apiSlice";
 import { EGiftCard } from "pages/EGiftCards/type";
+import { RedeemResponse } from "pages/redeem/types";

 export const branchApi = baseApi.injectEndpoints({
  endpoints: (builder) => ({
@@ -171,6 +173,15 @@ export const branchApi = baseApi.injectEndpoints({
        return response.result;
      },
    }),
+    getRedeemDetails: builder.query<RedeemResponse, string>({
+      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;
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -109,3 +109,4 @@ 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`;
+export const REDEEM_DETAILS_URL = `${BASE_URL}gift/getGiftOrderByVoucherCode`;