bilingo-ui/src/components/Payment/Common/PayPlatformOptions/index.tsx

import React, { PureComponent } from "react";
import classnames from "classnames";
import { FormattedMessage } from "react-intl";

import iconAlipay from "../assets/kcxq_popovers_icon_alipay@2x.png";
import iconWechatpay from "../assets/kcxq_popovers_icon_wechatpay@2x.png";
import iconPaypal from "../assets/kcxq_popovers_icon_paypal@2x.png";
import mobileIconAlipay from "../assets/payment_btn_pay_alipay@2x.png";
import mobileIconWechatpay from "../assets/payment_btn_pay_wechatpay@2x.png";
import mobileIconPaypal from "../assets/payment_btn_pay_paypal@2x.png";

import styles from "./PayPlatformOptions.less";

type PAY_CHANNEL_VALUE =
  | "PAYPAL_PAYPAL"
  | "ALI_WEB"
  | "ALI_WAP"
  | "WX_WAP"
  | "WX_NATIVE";
type PAY_CHANNEL_TYPE = {
  PAYPAL: PAY_CHANNEL_VALUE;
  ALI_WEB: PAY_CHANNEL_VALUE;
  ALI_WAP: PAY_CHANNEL_VALUE;
  WX_WAP: PAY_CHANNEL_VALUE;
  WX_NATIVE: PAY_CHANNEL_VALUE;
};

type Props = {
  payitem: PAY_CHANNEL_VALUE;
  onPayItemChange: (value: PAY_CHANNEL_VALUE) => void;
  isMobile: boolean;
  size: "small" | "normal" | "large";
  withTitle: boolean;
  locale: "zh" | "en";
};

export const PAY_CHANNEL: PAY_CHANNEL_TYPE = {
  PAYPAL: "PAYPAL_PAYPAL", // PAYPAL_LIVE
  ALI_WEB: "ALI_WEB",
  ALI_WAP: "ALI_WAP",
  WX_WAP: "WX_WAP",
  WX_NATIVE: "WX_NATIVE"
};

class PayPlatformOptions extends PureComponent<Props, {}> {
  render() {
    const {
      payitem,
      onPayItemChange,
      isMobile = false,
      size = "normal",
      withTitle = true,
      locale = "zh"
    } = this.props;

    let titleDOM = null;
    if (withTitle) {
      titleDOM = (
        <div className={styles.label}>
          <FormattedMessage id="pay.channel.select.text" />
        </div>
      );
    }

    if (isMobile) {
      return (
        <div>
          {titleDOM}
          <div
            className={classnames(styles["payment-method-box"], {
              [styles.mobile]: isMobile
            })}
          >
            <div className={styles.flexContainer}>
              <div className={styles.flexItem}>
                <div
                  className={classnames(
                    {
                      [styles.payitem]: true,
                      [styles.active]: payitem === PAY_CHANNEL.ALI_WEB,
                      [styles.small]: size === "small"
                    },
                    styles[locale]
                  )}
                  onClick={() => {
                    onPayItemChange(PAY_CHANNEL.ALI_WEB);
                  }}
                >
                  <img
                    src={mobileIconAlipay}
                    alt="alipay"
                    className={styles["payment-method"]}
                  />
                  <div className={styles.platformName}>
                    <FormattedMessage id="pay.channel.ali" />
                  </div>
                </div>
              </div>
              <div className={styles.flexItem}>
                <div
                  className={classnames(
                    {
                      [styles.payitem]: true,
                      [styles.active]: payitem === PAY_CHANNEL.WX_NATIVE,
                      [styles.small]: size === "small"
                    },
                    styles[locale]
                  )}
                  onClick={() => {
                    onPayItemChange(PAY_CHANNEL.WX_NATIVE);
                  }}
                >
                  <img
                    src={mobileIconWechatpay}
                    alt="wechatpay"
                    className={styles["payment-method"]}
                  />
                  <div className={styles.platformName}>
                    <FormattedMessage id="pay.channel.wechat" />
                  </div>
                </div>
              </div>
              <div className={styles.flexItem}>
                <div
                  className={classnames(
                    {
                      [styles.payitem]: true,
                      [styles.active]: payitem === PAY_CHANNEL.PAYPAL,
                      [styles.small]: size === "small"
                    },
                    styles[locale]
                  )}
                  onClick={() => {
                    onPayItemChange(PAY_CHANNEL.PAYPAL);
                  }}
                >
                  <img
                    src={mobileIconPaypal}
                    alt="paypal"
                    className={styles["payment-method"]}
                  />
                  <div className={styles.platformName}>
                    <FormattedMessage id="pay.channel.paypal" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }

    return (
      <div>
        {titleDOM}
        <div className={styles["payment-method-box"]}>
          <div className={styles.flexContainer}>
            <div className={styles.flexItem}>
              <div
                className={classnames(
                  {
                    [styles.payitem]: true,
                    [styles.active]: payitem === PAY_CHANNEL.ALI_WEB,
                    [styles.small]: size === "small"
                  },
                  styles[locale]
                )}
                onClick={() => {
                  onPayItemChange(PAY_CHANNEL.ALI_WEB);
                }}
              >
                <span className={styles["payment-method-before"]} />
                <img
                  src={iconAlipay}
                  alt="alipay"
                  className={styles["payment-method"]}
                />
              </div>
            </div>
            <div className={styles.flexItem}>
              <div
                className={classnames(
                  {
                    [styles.payitem]: true,
                    [styles.active]: payitem === PAY_CHANNEL.WX_NATIVE,
                    [styles.small]: size === "small"
                  },
                  styles[locale]
                )}
                onClick={() => {
                  onPayItemChange(PAY_CHANNEL.WX_NATIVE);
                }}
              >
                <span className={styles["payment-method-before"]} />
                <img
                  src={iconWechatpay}
                  alt="wechatpay"
                  className={styles["payment-method"]}
                />
              </div>
            </div>
            <div className={styles.flexItem}>
              <div
                className={classnames(
                  {
                    [styles.payitem]: true,
                    [styles.active]: payitem === PAY_CHANNEL.PAYPAL,
                    [styles.small]: size === "small"
                  },
                  styles[locale]
                )}
                onClick={() => {
                  onPayItemChange(PAY_CHANNEL.PAYPAL);
                }}
              >
                <span className={styles["payment-method-before"]} />
                <img
                  src={iconPaypal}
                  alt="paypal"
                  className={styles["payment-method"]}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default PayPlatformOptions;