<commit_before>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

// ======================================================
// Containers
// ======================================================
import { FooterAction } from '../../Utils';

// ======================================================
// Components
// ======================================================
import { Loading, ProductSummary, MobileTopupTitle } from '../../../components';
import Layout from '../../Layout';

// ======================================================
// Actions
// ======================================================
import * as ApplicationActions from '../../../actions/applicationActions';

// ======================================================
// Selectors
// ======================================================
import MasterappSelector from '../../../selectors/masterapp';
import OrderSelector from '../../../selectors/order';

const mapStateToProps = (state) => {
  return {
    moneyBoxActive: MasterappSelector.verifyIsMoneyBoxActive(state.masterapp),
    baseURL: MasterappSelector.getBaseURL(state.masterapp),
    mobileTopupTotalPrice: OrderSelector.getSelectedMobileTopupTotalPrice(state.order),
    discountAmount: OrderSelector.getDiscountAmount(state.order),
    mobileTopupBanner: OrderSelector.getMobileTopupBanner(state.order)
  };
};

const actions = {
  ...ApplicationActions,
};

const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);

class MobileTopupPage extends Component {

  static propTypes = {
    moneyBoxActive: PropTypes.bool.isRequired,
    mobileTopupTotalPrice: PropTypes.number,
    discountAmount: PropTypes.number,
    baseURL: PropTypes.string.isRequired,
    submitProduct: PropTypes.func.isRequired,
    verifyDiscountCode: PropTypes.func.isRequired,
    initMobileTopupPage: PropTypes.func.isRequired,
    willReceivePropsEnableMoneyBoxWhenInitPage: PropTypes.func.isRequired,
    mobileTopupBanner: PropTypes.string,
  }

  static defaultProps = {
    mobileTopupTotalPrice: 0,
    discountAmount: 0
  }

  componentDidMount = () => {
    const { initMobileTopupPage } = this.props;
    initMobileTopupPage();
  }

  componentWillReceiveProps = (nextProps) => {
    const { willReceivePropsEnableMoneyBoxWhenInitPage } = this.props;
    // willReceivePropsEnableMoneyBoxWhenInitPage(this.props, nextProps);
  }

  render() {
    const {
      moneyBoxActive,
      mobileTopupBanner,
      mobileTopupTotalPrice,
      discountAmount,
      baseURL,
      submitProduct,
      verifyDiscountCode,
    } = this.props;
    return (
      <div>
        <Layout.Title>
          <MobileTopupTitle
            baseURL={baseURL}
            bgImage={mobileTopupBanner}
          />
        </Layout.Title>
        <Layout.Content>
          <ProductSummary
            title={'ยืนยันชำระเงินค่าเติมเงิน'}
            productPrice={mobileTopupTotalPrice}
            discountAmount={discountAmount}
            onSubmit={submitProduct}
            onSubmitDiscount={verifyDiscountCode}
          />
          <FooterAction />
        </Layout.Content>
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MobileTopupPage);<commit_msg>Add audio to mobile topup page<commit_after>import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
// ======================================================
// Hoc
// ======================================================
import withAudio from '../../../hoc/withAudio';
// ======================================================
// Containers
// ======================================================
import { FooterAction } from '../../Utils';

// ======================================================
// Components
// ======================================================
import { Loading, ProductSummary, MobileTopupTitle } from '../../../components';
import Layout from '../../Layout';

// ======================================================
// Actions
// ======================================================
import * as ApplicationActions from '../../../actions/applicationActions';

// ======================================================
// Selectors
// ======================================================
import MasterappSelector from '../../../selectors/masterapp';
import OrderSelector from '../../../selectors/order';

const mapStateToProps = (state) => {
  return {
    moneyBoxActive: MasterappSelector.verifyIsMoneyBoxActive(state.masterapp),
    baseURL: MasterappSelector.getBaseURL(state.masterapp),
    mobileTopupTotalPrice: OrderSelector.getSelectedMobileTopupTotalPrice(state.order),
    discountAmount: OrderSelector.getDiscountAmount(state.order),
    mobileTopupBanner: OrderSelector.getMobileTopupBanner(state.order)
  };
};

const actions = {
  ...ApplicationActions,
};

const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);

class MobileTopupPage extends Component {

  static propTypes = {
    moneyBoxActive: PropTypes.bool.isRequired,
    mobileTopupTotalPrice: PropTypes.number,
    discountAmount: PropTypes.number,
    baseURL: PropTypes.string.isRequired,
    submitProduct: PropTypes.func.isRequired,
    verifyDiscountCode: PropTypes.func.isRequired,
    initMobileTopupPage: PropTypes.func.isRequired,
    willReceivePropsEnableMoneyBoxWhenInitPage: PropTypes.func.isRequired,
    mobileTopupBanner: PropTypes.string,
  }

  static defaultProps = {
    mobileTopupTotalPrice: 0,
    discountAmount: 0
  }

  componentDidMount = () => {
    const { initMobileTopupPage } = this.props;
    initMobileTopupPage();
  }

  componentWillReceiveProps = (nextProps) => {
    const { willReceivePropsEnableMoneyBoxWhenInitPage } = this.props;
    // willReceivePropsEnableMoneyBoxWhenInitPage(this.props, nextProps);
  }

  render() {
    const {
      moneyBoxActive,
      mobileTopupBanner,
      mobileTopupTotalPrice,
      discountAmount,
      baseURL,
      submitProduct,
      verifyDiscountCode,
    } = this.props;
    return (
      <div>
        <Layout.Title>
          <MobileTopupTitle
            baseURL={baseURL}
            bgImage={mobileTopupBanner}
          />
        </Layout.Title>
        <Layout.Content>
          <ProductSummary
            title={'ยืนยันชำระเงินค่าเติมเงิน'}
            productPrice={mobileTopupTotalPrice}
            discountAmount={discountAmount}
            onSubmit={submitProduct}
            onSubmitDiscount={verifyDiscountCode}
          />
          <FooterAction />
        </Layout.Content>
      </div>
    );
  }
}

export default withAudio({ src: 'http://localhost:8888/vms/html-v2/voice/3.m4a' })(connect(mapStateToProps, mapDispatchToProps)(MobileTopupPage));
{'fraction_non_alphanumeric': 0.24322766570605187, 'fraction_numerical': 0.001585014409221902, 'mean_word_length': 3.8470670391061454, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 29, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3128614', 'n_tokens_mistral': 1840, 'n_tokens_neox': 1799, 'n_words': 298}