text: import React, { Component } from 'react';
  import { Col, Row, Container, Form } from 'reactstrap';
  import Button from '../../../../../Base/FormControl/Button';
  import PeDeviceSwitch from '../../../../../Common/PeDeviceSwitch/PeDeviceSwitch';
  import * as Constant from '../../../../../Base/Constant'
  
  export default class IPVpnIpPlusAddPE extends Component {
      constructor(props) {
          super(props);
          this.state = {
              backLinkUrl: props.location.aboutProps !== undefined ? props.location.aboutProps.backLinkUrl : '#',
              serviceTypeId: props.location.aboutProps !== undefined ? props.location.aboutProps.serviceTypeId : '0',
              title: props.location.aboutProps !== undefined ? props.location.aboutProps.title : 'order.addEthernetPeDevice.title',
              addTitle: props.location.aboutProps !== undefined ? props.location.aboutProps.addTitle : 'order.addEthernetPeDevice.addTitle',
              addEthernetPeDevice: {
                  imsPOP: '',
                  name: '',
                  vender: '',
                  address: '',
                  snmpro: '',
                  country: '',
                  city: '',
                  site: '',
                  premise: '',
                  cityName: '',
                  cityCode: '',
                  siteName: '',
                  siteCode: '',
                  premiseName: '',
                  premiseCode: ''
              },
              addDeviceFlag: true,
              imsPOPLocations: [
                  { "name": "All", "code": "AL" },
                  { "name": "Colt", "code": "CO" },
                  { "name": "OLO", "code": "OL" }],
              countries: [
                  { "name": "AT (Austria)", "code": "AT" },
                  { "name": "BE (Belgium)", "code": "BE" },
                  { "name": "CH (Switzerland)", "code": "CH" },
                  { "name": "DE (Germany)", "code": "DE" },
                  { "name": "DK (Denmark)", "code": "DK" },
                  { "name": "ES (Spain)", "code": "ES" },
                  { "name": "FR (France)", "code": "FR" },
                  { "name": "IE (Ireland)", "code": "IE" },
                  { "name": "INT (International)", "code": "INT" },
                  { "name": "IS (Iceland)", "code": "IS" },
                  { "name": "IT (Italy)", "code": "IT" },
                  { "name": "LU (Luxembourg)", "code": "LU" },
                  { "name": "NL (Netherlands)", "code": "NL" },
                  { "name": "PT (Portugal)", "code": "PT" },
                  { "name": "SE (Sweden)", "code": "SE" },
                  { "name": "UK (United Kingdom)", "code": "UK" },
                  { "name": "US (United States)", "code": "US" }
              ],
              cities: [
                  { "name": "BIR (Birmingham)", "code": "BIR" },
                  { "name": "FRA (Frankfurt)", "code": "FRA" }
              ],
              sites: [
                  { "name": "Site 1", "code": "1" },
                  { "name": "Site 2", "code": "2" },
                  { "name": "Site 3", "code": "3" }
              ],
              premises: [
                  { "name": "Premise I", "code": "1" },
                  { "name": "Premise II", "code": "2" },
                  { "name": "Premise III", "code": "3" }
              ],
          }
          this.handleFormSubmit = this.handleFormSubmit.bind(this);
          this.handleClearForm = this.handleClearForm.bind(this);
      }
  
      handleFormSubmit(e) {
          e.preventDefault();
          this.props.history.push(Constant.VIEW_IPVPN_PLUS_DEVICE_URL);
      }
      handleClearForm(e) {
          e.preventDefault();
          this.setState({
              addEthernetPeDevice: {
                  legalCustomerName: '',
                  mainDomain: '',
                  ocn: '',
                  name: '',
                  age: '',
                  gender: '',
                  skills: [],
                  about: ''
              },
          })
      }
  
      handleCancel = (e) => {
          e.preventDefault();
          this.props.history.push(Constant.VIEW_IPVPN_PLUS_SITE_ORDER_URL);
      }
      render() {
          return (
              <div className="glb-font">
                  {/* <Container>
                      <Row>
                          <Col className="heading-gray" xs="12" sm="12" md="12">
                              <h5>
                              <Translation>
                                      {t => <>{t(this.state.title)}</>}
                                  </Translation>
                              </h5>
                          </Col>
                      </Row>
                  </Container> */}
                  <Container className="div-border div-margin">
                      <Form method="POST" onSubmit={this.handleFormSubmit}>
                          <PeDeviceSwitch subTitle="Add IP VPN-IP Plus PE" />
                          <Row>
                              <Col>
                                  <Button click={this.handleCancel} type={"secondary"} align={'right'} submit={false} title="common.cancel" />
                                  <Button action={this.handleClearForm} type={"secondary"} align={'right'} submit={true} title="common.next" />
  
                              </Col>
                          </Row>
                      </Form>
                  </Container>
              </div>
          );
      }
  }
  