redeem: integration

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={{