web-menu-react-version/src/components/PaymentMethods/PaymentMethods.tsx

import { Form, Radio, Space } from "antd";
import { Group } from "antd/es/radio";
import ArabicPrice from "components/ArabicPrice";
import DifferentCardIcon from "components/Icons/paymentMethods/DifferentCardIcon";
import ProText from "components/ProText";
import {
  selectCart,
  selectGrandTotal,
  updatePaymentMethod,
} from "features/order/orderSlice";
import { useTranslation } from "react-i18next";
import { useAppDispatch, useAppSelector } from "redux/hooks";
import { colors, ProGray1 } from "../../ThemeConstants";
import ProInputCard from "../ProInputCard/ProInputCard";
import styles from "./PaymentMethods.module.css";
import { OrderType } from "pages/checkout/hooks/types.ts";

const PaymentMethods = () => {
  const { t } = useTranslation();
  const { paymentMethod, orderType } = useAppSelector(selectCart);
  const dispatch = useAppDispatch();
  const grandTotal = useAppSelector(selectGrandTotal);

  const options: {
    label: string;
    value: string;
    price?: string;
    icon?: React.ReactNode;
    style?: React.CSSProperties;
    hideCurrency?: boolean;
  }[] = [
    ...(orderType !== OrderType.Gift
      ? [
          {
            label: t("checkout.cash"),
            value: "cash",
            price: grandTotal.toString(),
            style: {
              color: colors.primary,
            },
          },
        ]
      : []),
    {
      label: t("checkout.creditDebitCard"),
      value: "creditDebitCard",
      price: t("checkout.expiresIn") + ":12/26",
      hideCurrency: true,
    },
    {
      label: t("checkout.differentCard"),
      value: "differentCard",
      icon: (
        <div className={styles.differentCardIcon}>
          <DifferentCardIcon />
        </div>
      ),
      hideCurrency: true,
    },
    {
      label: t("checkout.fascanoWallet"),
      value: "fascanoWallet",
      price: "7.50",
      style: {
        color: colors.primary,
      },
    },
  ];

  const onPaymentSelect = (value: string) => {
    dispatch(updatePaymentMethod(value));
  };

  return (
    <ProInputCard title={t("checkout.selectedPaymentMethod")}>
      <Form.Item
        name="paymentMethod"
        required
        rules={[
          { required: true, message: t("checkout.pleaseSelectPaymentMethod") },
        ]}
        initialValue={paymentMethod}
      >
        <Group
          className={styles.paymentMethods}
          style={{
            width: "100%",
          }}
          size="large"
        >
          <Space orientation="vertical" style={{ width: "100%" }}>
            {options.map((option) => (
              <div key={option.value}>
                <Radio
                  key={option.value}
                  value={option.value}
                  onClick={() => onPaymentSelect(option.value)}
                  style={{
                    height: 50,
                    borderRadius: 888,
                    border: "1px solid #DDD",
                    padding: 16,
                  }}
                >
                  <div
                    style={{
                      display: "flex",
                      flexDirection: "row",
                      justifyContent: "space-between",
                      width: "100%",
                      position: "relative",
                      top: -4,
                    }}
                  >
                    <ProText
                      style={{
                        fontSize: "0.85rem",
                        color: ProGray1,
                      }}
                    >
                      {option.label}
                    </ProText>
                    {!option.icon ? (
                      <ArabicPrice
                        price={option.price || 0}
                        hideCurrency={option.hideCurrency}
                        style={{
                          fontSize: "0.75rem",
                          color: ProGray1,
                          fontWeight: 400,
                          ...option?.style,
                          position: "relative",
                          top: 4,
                        }}
                      />
                    ) : (
                      <>{option.icon}</>
                    )}
                  </div>
                </Radio>
              </div>
            ))}
          </Space>
        </Group>
      </Form.Item>
    </ProInputCard>
  );
};

export default PaymentMethods;