Vitron-Front/app/components/cart/ReceiverInformation.tsx

import { useState } from "react";
import AppInput from "../../components/AppInput";
import { Button } from "../../components/ui/button";
import { FileText, User, Loader2 } from "lucide-react";
import { formatPrice } from "../../utils/helpers";
import { formatDateRange } from "./ShippingInformation";
import { useParams } from "@remix-run/react";
import {
  Address,
  CartItem,
  CartItem as CartItemType,
  SellerCourierList,
} from "src/api/types";
import { useVerifyDiscountCode } from "../../requestHandler/use-discount-hooks";

interface ReceiverInformationProps {
  selectedAddressInfo: Address | null;
  selectedCourierInfo: SellerCourierList | null;
  total: string;
  cartItems: CartItemType[];
  discountValue: number | null;
}

export const ReceiverInformation = ({
  selectedAddressInfo,
  selectedCourierInfo,
  total,
  cartItems,
  discountValue,
}: ReceiverInformationProps) => {
  const [discountCode, setDiscountCode] = useState<string>("");
  const { cartId } = useParams();
  const isFaceToFace = selectedCourierInfo?.courierIsFaceToFace;
  // Use the verify discount code hook
  const { mutate: verifyDiscountCode, isPending: isLoading } =
    useVerifyDiscountCode();

  const sendDiscountCode = async () => {
    if (!cartId || !discountCode) return;

    verifyDiscountCode(
      {
        code: parseInt(discountCode),
        cartId: cartId,
      },
      {
        onSuccess: () => {
          setDiscountCode("");
        },
      }
    );
  };

  return (
    <div className="w-full">
      {!isFaceToFace && (
        <div className="py-4 flex flex-col gap-4 border-b px-4 w-full">
          <div className="gap-1 flex items-center">
            <div>
              <User size={24} />
            </div>
            <p className={"text-B16 font-bold"}>تحویل گیرنده</p>
          </div>

          <AppInput
            inputDir="rtl"
            inputTitle={"نام تحویل گیرنده"}
            inputValue={selectedAddressInfo?.receiverName || ""}
            inputPlaceholder={"------------"}
            inputOnChange={() => {}}
            disabled={true}
          />
          <AppInput
            inputDir="ltr"
            disabled={true}
            inputTitle={"شماره موبایل"}
            inputValue={selectedAddressInfo?.phoneNumber || ""}
            inputPlaceholder={"---------"}
            inputOnChange={() => {}}
          />
          <div className="flex w-full gap-2 items-end">
            <AppInput
              inputDir="rtl"
              inputTitle={"کد تخفیف دارید؟"}
              inputValue={discountCode}
              inputPlaceholder={"کد تخفیف را اینجا وارد کنید"}
              inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                const value = e.target.value;
                setDiscountCode(value);
              }}
            />
            <Button
              disabled={!discountCode || isLoading}
              size={"lg"}
              className="px-8"
              variant="dark"
              onClick={() => sendDiscountCode()}
            >
              {isLoading ? (
                <>
                  <Loader2 className="animate-spin" />
                  درحال ثبت...
                </>
              ) : (
                "ثبت"
              )}
            </Button>
          </div>
        </div>
      )}
      <InvoiceContent
        selectedCourierInfo={selectedCourierInfo}
        selectedAddressInfo={selectedAddressInfo}
        cartItems={cartItems}
        total={total}
        discountValue={discountValue}
      />
    </div>
  );
};

interface InvoiceContentProps {
  selectedCourierInfo: SellerCourierList | null;
  selectedAddressInfo: Address | null;
  cartItems: CartItem[];
  total: string;
  discountValue: number | null;
}
export const InvoiceContent = ({
  selectedCourierInfo,
  selectedAddressInfo,
  cartItems,
  total,
  discountValue,
}: InvoiceContentProps) => {
  const isFaceToFace = selectedCourierInfo?.courierIsFaceToFace;
  return (
    <div className="py-4 flex flex-col gap-4 px-4 w-full">
      <div className="gap-1 flex items-center">
        <div>
          <FileText size={24} />
        </div>
        <p className={"text-B16 font-bold"}>فاکتور خرید</p>
      </div>
      {!selectedCourierInfo ? (
        <div className="flex justify-center py-12 px-4">
          <Loader2 className="animate-spin" />
          <p className="text-B14">در حال بارگذاری...</p>
        </div>
      ) : (
        <>
          {!isFaceToFace && (
            <div className="flex flex-col gap-4 px-4 w-full border-b pb-4">
              <div className="w-full justify-between flex gap-1">
                <p className="text-R12">کد پستی</p>
                {!selectedAddressInfo ? (
                  <Loader2 className="animate-spin" />
                ) : (
                  <p className="text-R12">{selectedAddressInfo?.postalCode}</p>
                )}
              </div>
              <div className="w-full flex gap-1 justify-between">
                <p className="text-R12">زمان تحویل</p>
                <p className="text-R12">
                  {formatDateRange(selectedCourierInfo?.estimatedDays)}
                </p>
              </div>
              <div className="w-full justify-between flex gap-1">
                {!selectedAddressInfo ? (
                  <Loader2 className="animate-spin" />
                ) : (
                  <p className="text-R12">
                    آدرس:{selectedAddressInfo?.mainAddress}
                  </p>
                )}
              </div>
            </div>
          )}
          <div className="flex flex-col gap-4 px-4 w-full border-b pb-4">
            {cartItems?.map((item, index) => (
              <div key={index} className="w-full justify-between flex gap-1">
                <p className="text-R12">{item.productVariant?.productTitle}</p>
                <p className="text-R12 tracking-wide">
                  {formatPrice(item.productVariant?.discountPrice || "0")}x
                  {item.quantity} تومان
                </p>
              </div>
            ))}
            <div className="w-full justify-between flex gap-1">
              <p className="text-R12">مقدار تخفیف</p>
              {!selectedCourierInfo ? (
                <Loader2 className="animate-spin" />
              ) : (
                <p className="text-R12 tracking-wide">
                  {formatPrice(discountValue?.toString() || "0")} تومان
                </p>
              )}
            </div>
            <div className="w-full justify-between flex gap-1">
              <p className="text-R12">هزینه ارسال</p>
              {!selectedCourierInfo ? (
                <Loader2 className="animate-spin" />
              ) : (
                <p className="text-R12 tracking-wide">
                  {selectedCourierInfo?.courierIsFreightCollect
                    ? "پس پرداخت"
                    : `${formatPrice(
                        selectedCourierInfo?.deliveryPrice?.toString() || "0"
                      )} تومان`}
                </p>
              )}
            </div>
            <div className="w-full justify-between flex gap-1">
              <p className="text-B16 font-bold">مبلغ کل فاکتور</p>
              {!selectedCourierInfo ? (
                <Loader2 className="animate-spin" />
              ) : (
                <p className="text-B16 font-bold tracking-wide">
                  {formatPrice(parseFloat(total).toString())} تومان
                </p>
              )}
            </div>
          </div>
        </>
      )}
    </div>
  );
};