web-menu-react-version-/src/pages/redeem/page.tsx

import {
  Button,
  Card,
  Form,
  Image,
  Layout,
  QRCode,
  Skeleton,
  message,
} from "antd";

import ProHeader from "components/ProHeader/ProHeader";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { useNavigate, useParams } from "react-router-dom";
import { useGetRedeemDetailsQuery } from "redux/api/others";
import styles from "./redeem.module.css";
import CopyIcon from "components/Icons/CopyIcon";
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";
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 || "",
    {
      skip: !voucherId,
    },
  );

  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>
        <ProHeader>{t("redeem.title")}</ProHeader>
        <Layout.Content className={styles.redeemContainer}>
          <div
            style={{
              textAlign: "center",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              margin: "32px 28px 21px 28px",
              gap: 8,
            }}
          >
            <ProText
              style={{ fontSize: 16, fontWeight: 600, color: "#333333" }}
            >
              {t("redeem.hiX", { name: redeemDetails?.gift?.recipient_name })}
            </ProText>
            <ProText
              style={{ fontSize: 14, fontWeight: 400, color: "#95949C" }}
            >
              {t("redeem.youHaveReceivedAGiftCarFromX", {
                name: redeemDetails?.gift?.sender_name,
              })}
            </ProText>
          </div>

          {isLoading || !redeemDetails?.gift?.restaurant_iimage ? (
            <div className={styles.carouselContainer}>
              <div className={styles.cardWrapper}>
                <Skeleton.Image
                  active
                  style={{
                    width: 205,
                    height: 134,
                    borderRadius: 8,
                  }}
                />
              </div>
            </div>
          ) : (
            <div className={styles.carouselContainer}>
              <div className={styles.cardWrapper}>
                <Image
                  src={redeemDetails?.gift?.card_url}
                  width={205}
                  height={134}
                  className={styles.cardImage}
                />
              </div>
            </div>
          )}

          <div
            style={{
              textAlign: "center",
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              margin: "18px 28px 26px 28px",
              gap: 12,
            }}
          >
            <ProText
              style={{
                fontWeight: 400,
                fontStyle: "Regular",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color: "#95949C",
              }}
            >
              {redeemDetails?.gift?.message || t("redeem.description")}
            </ProText>
            <ProText
              style={{
                fontWeight: 600,
                fontStyle: "SemiBold",
                fontSize: 14,
                lineHeight: "140%",
                letterSpacing: "0%",
                textAlign: "center",
                color: "#333333",
              }}
            >
              {redeemDetails?.gift?.sender_name}
            </ProText>
          </div>

          <div>
            <Card
              style={{
                borderRadius: 0,
                borderTopRightRadius: 16,
                borderTopLeftRadius: 16,
                border: "1px solid transparent",
                borderImageSource:
                  "radial-gradient(38.92% 103.83% at 49.85% -3.83%, #FFB700 0%, rgba(255, 233, 179, 0) 100%)",
                borderImageSlice: 1,
              }}
              styles={{
                body: {
                  display: "flex",
                  flexDirection: "column",
                  gap: 24,
                  alignItems: "center",
                  justifyContent: "center",
                  padding: 32,
                },
              }}
            >
              <ProText
                style={{
                  fontWeight: 400,
                  fontStyle: "Regular",
                  fontSize: 14,
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  color: "#95949C",
                  alignItems: "center",
                }}
              >
                {t("redeem.showThisCodeAtTheRestaurant")}
              </ProText>
              <QRCode value={redeemDetails?.gift?.gr_url || "-"} />
              <div
                style={{ display: "flex", flexDirection: "column", gap: 12 }}
              >
                <Button
                  style={{
                    height: 40,
                    borderRadius: 888,
                    gap: 16,
                    opacity: 1,
                    borderWidth: 1,
                    backgroundColor: "var(--background)",
                  }}
                  icon={<CopyIcon className={styles.copyIcon} />}
                  iconPlacement="end"
                  onClick={handleCopyVoucherCode}
                >
                  {redeemDetails?.gift?.voucher_code}
                </Button>
                <ProText
                  style={{
                    fontWeight: 400,
                    fontStyle: "Regular",
                    fontSize: 14,
                    lineHeight: "140%",
                    letterSpacing: "0%",
                    color: "#95949C",
                    alignItems: "center",
                  }}
                >
                  {t("redeem.useThisCodeIfScanningNotPossible")}
                </ProText>
              </div>
            </Card>

            <div
              style={{
                width: "100%",
                height: 44,
                opacity: 1,
                borderBottomRightRadius: 16,
                borderBottomLeftRadius: 16,
                paddingTop: 12,
                paddingBottom: 12,
                gap: 10,
                borderTopWidth: 1,
                background: "#FFF9E6",
                borderTop: "1px solid #FFEDB0",
                textAlign: "center",
              }}
            >
              <ProText
                style={{
                  fontSize: 14,
                  fontWeight: 500,
                  fontStyle: "Medium",
                  lineHeight: "140%",
                  letterSpacing: "0%",
                  textAlign: "center",
                  color: "#E8B400",
                }}
              >
                Active - Expires in 12 days
              </ProText>
            </div>
          </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}>
          <Button
            type="primary"
            shape="round"
            className={styles.checkoutButton}
            onClick={handleCheckout}
          >
            {t("redeem.redeemNow")}
          </Button>
        </Layout.Footer>
      </Layout>
    </>
  );
}