dmenu-admin/src/pages/orders/components/PaymentInfo.tsx

import { formatFaNumber, formatPrice } from "@/helpers/func";
import { PaymentMethodEnum } from "@/pages/paymentMethods/enum/Enum";
import { DeliveryMethodEnum } from "@/pages/shipmentMethod/enum/Enum";
import type { FC } from "react";
import type { Order } from "../types/Types";

interface PaymentInfoProps {
  order: Order;
  getPaymentStatusColor: (status: string) => string;
  getPaymentStatusTextColor: (status: string) => string;
  getPaymentStatusText: (status: string) => string;
}

const PaymentInfo: FC<PaymentInfoProps> = ({ order, getPaymentStatusColor, getPaymentStatusTextColor, getPaymentStatusText }) => {
  const paymentStatus = order.payments?.[0]?.status;

  const getDeliveryMethodText = (method: string): string => {
    const methodMap: Record<string, string> = {
      [DeliveryMethodEnum.DineIn]: "سرو در رستوران",
      [DeliveryMethodEnum.CustomerPickup]: "دریافت از محل",
      [DeliveryMethodEnum.DeliveryCar]: "تحویل به خودرو",
      [DeliveryMethodEnum.DeliveryCourier]: "بیرون بر",
    };
    return methodMap[method] || method;
  };

  const getPaymentMethodText = (method: string): string => {
    const methodMap: Record<string, string> = {
      [PaymentMethodEnum.Cash]: "پرداخت نقدی",
      [PaymentMethodEnum.Online]: "پرداخت آنلاین",
      [PaymentMethodEnum.CreditCard]: "پرداخت کارت به کارت",
      [PaymentMethodEnum.Wallet]: "کیف پول",
    };
    return methodMap[method] || method;
  };

  return (
    <div className="w-[330px] h-fit bg-white rounded-4xl p-8">
      <div className="flex justify-between items-center">
        <div className="font-light">اطلاعات پرداخت</div>

        <div className="flex gap-1.5 items-center">
          <div className={`size-2 rounded-full ${getPaymentStatusColor(paymentStatus)}`}></div>
          <div className={`text-[13px] ${getPaymentStatusTextColor(paymentStatus)}`}>{getPaymentStatusText(paymentStatus)}</div>
        </div>
      </div>

      <div className="mt-10">
        <div className="flex text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
          <div className="text-description">روش ارسال</div>
          <div>{order.deliveryMethod ? getDeliveryMethodText(order.deliveryMethod.method) : "-"}</div>
        </div>

        {order.deliveryMethod?.description && (
          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
            <div className="text-description">توضیحات روش ارسال</div>
            <div>{order.deliveryMethod.description}</div>
          </div>
        )}

        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
          <div className="text-description">روش پرداخت</div>
          <div>{order.paymentMethod ? getPaymentMethodText(order.paymentMethod.method) : "-"}</div>
        </div>

        {order.paymentMethod?.description && (
          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
            <div className="text-description">توضیحات روش پرداخت</div>
            <div>{order.paymentMethod.description}</div>
          </div>
        )}

        {order.paymentMethod?.gateway && (
          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
            <div className="text-description">درگاه پرداخت</div>
            <div>{order.paymentMethod.gateway}</div>
          </div>
        )}

        {order.paymentId && (
          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
            <div className="text-description">شناسه پرداخت</div>
            <div className="font-mono text-xs">{order.paymentId}</div>
          </div>
        )}

        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
          <div className="text-description">جمع آیتم‌ها</div>
          <div>{formatPrice(order.subTotal)}</div>
        </div>

        {order.itemsDiscount > 0 && (
          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
            <div className="text-description">تخفیف آیتم‌ها</div>
            <div className="text-green-600">-{formatPrice(order.itemsDiscount)}</div>
          </div>
        )}

        {order.couponDiscount > 0 && (
          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
            <div className="text-description">تخفیف کوپن</div>
            <div className="text-green-600">-{formatPrice(order.couponDiscount)}</div>
          </div>
        )}

        {order.totalDiscount > 0 && (
          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
            <div className="text-description font-medium">جمع تخفیف‌ها</div>
            <div className="text-green-600 font-medium">-{formatPrice(order.totalDiscount)}</div>
          </div>
        )}

        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
          <div className="text-description">هزینه ارسال</div>
          <div>{formatPrice(order.deliveryFee)}</div>
        </div>

        {order.tax > 0 && (
          <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
            <div className="text-description">مالیات</div>
            <div>{formatPrice(order.tax)}</div>
          </div>
        )}

        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
          <div className="text-description">تعداد آیتم‌ها</div>
          <div>{formatFaNumber(order.totalItems)}</div>
        </div>

        <div className="flex mt-4 text-[13px] font-bold justify-between items-center">
          <div>مبلغ کل</div>
          <div>{formatPrice(order.total)}</div>
        </div>
      </div>
    </div>
  );
};

export default PaymentInfo;