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

import React, { Component } from 'react';
import classnames from 'classnames';
import styles from './WaitPayInfoView.less';

import infoIconImg from '../assets/icon-info-blue@2x.svg';

const Button = (...props: any) => <button {...props}>button</button>;

interface Props {
  onClickPayed?: Function;
  onClickProblem?: Function;
}

export class WaitPayInfoView extends Component<Props, {}> {
  static defaultProps = {
    onClickPayed: () => { console.log("onClickPayed"); },
    onClickProblem: () => { console.log("onClickProblem"); }
  }

  render() {
    const { onClickPayed, onClickProblem } = this.props;

    return (
      <div className={styles.waitingContainer}>
        <div className={styles.infoIconImgContainer}>
          <img src={infoIconImg} alt="info label icon" />
        </div>
        <div>
          <div className={styles.pay_text}>
            {"live.course_info.pay.notification"}
          </div>
          <div className={styles.btn_row}>
            <Button
              className={classnames(styles.pay_btn, styles.btn_default)}
              size="small"
              onClick={() => { onClickPayed && onClickPayed() }}
            >
              {"live.course_info.pay.payed"}
            </Button>
            <Button
              className={styles.btn_default}
              size="small"
              style={{
                marginLeft: '16px',
              }}
              onClick={() => { onClickProblem && onClickProblem() }}
            >
              {"live.course_info.pay.help"}
            </Button>
          </div>
        </div>
      </div>
    );
  }
}

export default WaitPayInfoView;