SHARE
TWEET

Untitled

a guest May 23rd, 2019 57 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import PropTypes from 'prop-types';
  3. import { observer, inject } from 'mobx-react';
  4. import classnames from 'classnames';
  5. import { InputField, InfoBlock, ScrollToHere } from 'shared/modules/Useful';
  6. import { ButtonCaption, Button } from 'Gizmo/UI/Buttons';
  7.  
  8. const TEXT = {
  9.   title: 'Активировать сертификат',
  10.   certNumberLabel: 'Код сертификата',
  11.   buttonLabel: 'Применить',
  12.   successMessage: 'Сертификат успешно применён',
  13. };
  14.  
  15. @inject('userStore')
  16. @observer
  17. export class CertificateActivationForm extends Component {
  18.   static propTypes = {
  19.     userStore: PropTypes.object,
  20.     className: PropTypes.string,
  21.   };
  22.   state = {
  23.     code: this.props.userStore.certificateCode || '',
  24.   };
  25.   componentWillUnmount() {
  26.     const { userStore: { dropCertificateState } } = this.props;
  27.     dropCertificateState();
  28.   }
  29.   handleCodeChange = ({ target: { value } }) => {
  30.     const { userStore: { dropCertificateState } } = this.props;
  31.     this.setState({
  32.       code: value,
  33.     });
  34.     dropCertificateState();
  35.   }
  36.   handleActivation = (e) => {
  37.     e.preventDefault();
  38.     const { userStore: { activateCertificate } } = this.props;
  39.     const { code } = this.state;
  40.     code && activateCertificate(code);
  41.   }
  42.   render() {
  43.     const {
  44.       userStore: {
  45.         certificateActivationError,
  46.         certificatePending,
  47.         certificateActivationSuccess,
  48.         certificateCode,
  49.       },
  50.       className,
  51.     } = this.props;
  52.     const { code } = this.state;
  53.     return (
  54.       <form
  55.         className={classnames('cert-activation-form', className)}
  56.         data-test="cert-activation-form-component"
  57.         onSubmit={this.handleActivation}
  58.       >
  59.         {certificateCode && <ScrollToHere />}
  60.         <h4 className="cert-activation-form__title">{TEXT.title}</h4>
  61.         <div className="cert-activation-form__field-wrp">
  62.           <InputField
  63.             wrapperProps={{ className: 'cert-activation-form__field-grp' }}
  64.             className="cert-activation-form__field"
  65.             label={TEXT.certNumberLabel}
  66.             value={code}
  67.             onChange={this.handleCodeChange}
  68.             autoFocus={Boolean(certificateCode)}
  69.           />
  70.         </div>
  71.         <div className="cert-activation-form__actions">
  72.           <Button
  73.             className="gizmo-btn_common gizmo-btn_accent"
  74.             data-test="cert-activation-form-button"
  75.             type="submit"
  76.             disabled={!code}
  77.             inProgress={certificatePending}
  78.           >
  79.             <ButtonCaption>{TEXT.buttonLabel}</ButtonCaption>
  80.           </Button>
  81.         </div>
  82.         {certificateActivationSuccess &&
  83.           <span
  84.             className="cert-activation-form__success-msg"
  85.             data-test="cert-activation-form-success"
  86.           >
  87.             {TEXT.successMessage}
  88.           </span>
  89.         }
  90.         {certificateActivationError &&
  91.           <InfoBlock
  92.             className="cert-activation-form__error"
  93.             data-test="cert-activation-form-error"
  94.           >
  95.             {certificateActivationError}
  96.           </InfoBlock>
  97.         }
  98.       </form>
  99.     );
  100.   }
  101. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top