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

import { Form, Image, 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";
import { formatPriceUi } from "utils/helpers";

const PaymentMethods = () => {
  const { t } = useTranslation();
  const { paymentMethod, orderType } = useAppSelector(selectCart);
  const dispatch = useAppDispatch();
  const grandTotal = useAppSelector(selectGrandTotal);
  const { restaurant } = useAppSelector((state) => state.order);
  // const { isRTL } = useAppSelector((state) => state.locale);

  const options: {
    label: React.ReactNode;
    value: string;
    price?: string;
    icon?: React.ReactNode;
    style?: React.CSSProperties;
    hideCurrency?: boolean;
  }[] = [
    ...(orderType !== OrderType.Gift
      ? [
          {
            label: (
              <>
                <ProText
                  style={{
                    color: "#E8B400",
                    // [isRTL ? "marginLeft" : "marginRight"]: 4,
                  }}
                >
                  {/* $ */}
                </ProText>
                <ProText style={{ color: "#5F6C7B" }}>
                  {t("checkout.cash")}
                </ProText>
              </>
            ),
            value: "cash",
            price: formatPriceUi(grandTotal, restaurant.currency_decimals ?? 3),
            style: {
              color: colors.primary,
            },
          },
        ]
      : []),
    // {
    //   label: t("checkout.creditDebitCard"),
    //   value: "creditDebitCard",
    //   price: t("checkout.expiresIn") + ":12/26",
    //   hideCurrency: true,
    // },
    {
      label: (
        <>
          {/* <RCardIcon className={styles.eCardIcon} /> */}
          <ProText style={{ color: "#5F6C7B" }}>
            {t("checkout.thawani")}
          </ProText>
        </>
      ),
      value: "thawani",
      icon: (
        <div className={styles.differentCardIcon}>
          <Image
            preview={false}
            src={"thawani.png"}
            alt="thawani"
            width={24}
            height={24}
            style={{
              position: "relative",
              bottom: 3,
            }}
          />
        </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%", gap: 16 }}>
            {options.map((option) => (
              <div key={option.value}>
                <Radio
                  key={option.value}
                  value={option.value}
                  onClick={() => onPaymentSelect(option.value)}
                  className={styles.circleCheckbox}
                  style={{
                    height: 48,
                    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;