Initial commit

src/components/PaymentMethods/PaymentMethods.tsx

@@ -0,0 +1,124 @@
+import { 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 { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import { colors } from "../../ThemeConstants";
+import ProInputCard from "../ProInputCard/ProInputCard";
+import styles from "./PaymentMethods.module.css";
+
+interface PaymentMethodsProps {
+  onPaymentSelect?: () => void;
+}
+
+const PaymentMethods = ({
+  onPaymentSelect,
+  ...props
+}: PaymentMethodsProps) => {
+  const { t } = useTranslation();
+  const { isRTL } = useAppSelector((state) => state.locale);
+
+  const options: {
+    label: string;
+    value: string;
+    price?: string;
+    icon?: React.ReactNode;
+    style?: React.CSSProperties;
+  }[] = [
+    {
+      label: t("checkout.creditDebitCard"),
+      value: "creditDebitCard",
+      price: "Expires in:12/26",
+    },
+
+    {
+      label: t("checkout.differentCard"),
+      value: "differentCard",
+      icon: (
+        <div className={styles.differentCardIcon}>
+          {" "}
+          <DifferentCardIcon />
+        </div>
+      ),
+    },
+    {
+      label: t("checkout.fascanoWallet"),
+      value: "fascanoWallet",
+      price: "7.50",
+      style: {
+        color: colors.primary,
+      },
+    },
+  ];
+
+  return (
+    <ProInputCard title={t("checkout.selectedPaymentMethod")}>
+      <Group
+        className={styles.paymentMethods}
+        style={{
+          width: "100%",
+        }}
+        {...props}
+        size="large"
+      >
+        <Space direction="vertical" style={{ width: "100%" }}>
+          {options.map((option) => (
+            <div key={option.value}>
+              <Radio
+                key={option.value}
+                value={option.value}
+                onClick={onPaymentSelect}
+                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: "rgba(95, 108, 123, 1)",
+                    }}
+                  >
+                    {option.label}
+                  </ProText>
+                  {!option.icon ? (
+                    <ArabicPrice
+                      price={option.price}
+                      style={{
+                        fontSize: "0.85rem",
+                        color: "rgba(95, 108, 123, 1)",
+                        fontWeight: 400,
+                        ...option?.style,
+                      }}
+                    />
+                  ) : (
+                    <>{option.icon}</>
+                  )}
+                </div>
+              </Radio>
+              {/* {index !== options.length - 1 && (
+              <Divider style={{ margin: 0 }} />
+            )} */}
+            </div>
+          ))}
+        </Space>
+      </Group>
+    </ProInputCard>
+  );
+};
+
+export default PaymentMethods;