redeem: keep intergration

src/assets/locals/en.json

@@ -583,6 +583,8 @@
     "giftedItems": "Gifted Items",
     "viewAll": "View All",
     "voucherCodeCopied": "Voucher code copied!",
-    "copyFailed": "Failed to copy voucher code"
+    "copyFailed": "Failed to copy voucher code",
+    "hiX": "Hi {{name}}!",
+    "youHaveReceivedAGiftCarFromX": "You have received a gift car from {{name}}!"
   }
 }

src/pages/redeem/page.tsx

@@ -1,4 +1,13 @@
-import { Button, Card, Image, Layout, QRCode, Skeleton, message } from "antd";
+import {
+  Button,
+  Card,
+  Form,
+  Image,
+  Layout,
+  QRCode,
+  Skeleton,
+  message,
+} from "antd";
 
 import ProHeader from "components/ProHeader/ProHeader";
 import ProText from "components/ProText";
@@ -12,13 +21,15 @@ 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";
+import { CollectWay } from "pages/checkout/components/CollectWay/CollectWay.tsx";
+import PickupTimeCard from "pages/checkout/components/pickupEstimate/TimeEstimateCard.tsx";
 
 export default function RedeemPage() {
   const { t } = useTranslation();
   const { voucherId } = useParams();
   const navigate = useNavigate();
   const { subdomain } = useParams();
-
+  const [form] = Form.useForm();
   const { data: redeemDetails, isLoading } = useGetRedeemDetailsQuery(
     voucherId || "",
     {
@@ -65,12 +76,14 @@ export default function RedeemPage() {
             <ProText
               style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}
             >
-              {t("redeem.addGiftDetails")}
+              {t("redeem.hiX", { name: redeemDetails?.gift?.recipient_name })}
             </ProText>
             <ProText
               style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}
             >
-              {t("redeem.description")}
+              {t("redeem.youHaveReceivedAGiftCarFromX", {
+                name: redeemDetails?.gift?.sender_name,
+              })}
             </ProText>
           </div>
 
@@ -122,7 +135,7 @@ export default function RedeemPage() {
                 color: "#95949C",
               }}
             >
-              {t("redeem.description")}
+              {redeemDetails?.gift?.message || t("redeem.description")}
             </ProText>
             <ProText
               style={{
@@ -135,7 +148,7 @@ export default function RedeemPage() {
                 color: "#333333",
               }}
             >
-              {t("redeem.addGiftDetails")}
+              {redeemDetails?.gift?.sender_name}
             </ProText>
           </div>
 
@@ -241,18 +254,24 @@ export default function RedeemPage() {
             </div>
           </div>
 
-          <div
-            style={{
-              margin: "20px 0",
-              display: "flex",
-              flexDirection: "column",
-              gap: 16,
-            }}
-          >
-            <GiftItemsCard />
-            <VoucherBalanceCard />
-            <LocationCard />
-          </div>
+          <Form form={form}>
+            <div
+              style={{
+                margin: "20px 0",
+                display: "flex",
+                flexDirection: "column",
+                gap: 16,
+              }}
+            >
+              {redeemDetails?.gift?.gift_type === "ORDER" && <GiftItemsCard />}
+              {redeemDetails?.gift?.gift_type === "AMOUNT" && (
+                <VoucherBalanceCard />
+              )}
+              <LocationCard />
+              <CollectWay />
+              <PickupTimeCard />
+            </div>
+          </Form>
         </Layout.Content>
 
         <Layout.Footer className={styles.checkoutButtonContainer}>