1. /**
2.  * AddRestrictedPayeePanel.js
3.  */
4.  
5. import React, { Component, Fragment } from "react";
6. import PropTypes from "prop-types";
7. import { observer } from "mobx-react";
8. import Col from "react-bootstrap/lib/Col";
9. import Row from "react-bootstrap/lib/Row";
10. import { BaseContext } from "frontend-react-f4-base-commons";
11. import { BaseComponents } from "frontend-react-f4-base-ui";
12. import { browserHistory } from "react-router";
13. import LeftPanel from "../LeftPanel/LeftPanel";
14. import RightPanel from "../RightPanel/RightPanel";
15. import CitrineFunctionCodes from "../../enums/CitrineFunctionCodes";
16. import { NoAccessCTR } from "frontend-react-f4-base-ui/lib/containers";
17. import FeedbackModalMessage from "../FeedbackModalMessage/FeedbackModalMessage";
18.  
19. import StepWizard from "../StepWizard/StepWizard";
20. import BoHeader from "../BoHeader/BoHeader";
21. import BoTwoColMainForm from "../BoTwoColMainForm/BoTwoColMainForm";
22. import BoTwoColForm from "../BoTwoColForm/BoTwoColForm";
23. import BoTwoColBottom from "../BoTwoColBottom/BoTwoColBottom";
24.  
25. const { connect } = BaseContext;
26. const {
27.   strings,
28.   F4InputField,
29.   FeedbackModal1,
30.   Feedback,
31.   F4ButtonSave,
32.   F4Form
33. } = BaseComponents;
34.  
35. @observer
36. @connect
37. class AddRestrictedPayeePanel extends Component {
38.   constructor(props) {
39.     super(props);
40.     this.state = {
41.       clickedSave: false,
42.       clickedSaveAdd: false,
43.       clickedNext: false,
44.       pages: {
45.         initial: 0,
46.         confirm: 1,
47.         ack: 2
48.       }
49.     };
50.   }
51.  
52.   departmentDetails = () => {
53.     const { RestrictedPayeeStore } = this.context.store;
54.     return (
55.       <Fragment>
56.         <Row>
57.           <Col md={3}>
58.             <F4InputField
59.               // onChange={this.onChangeText.bind(this, "cd")}
60.               focusLabelClassName="focusLabel"
61.               labelField={strings.global_cd}
62.               value={
63.                 RestrictedPayeeStore.Inputs.cd
64.                   ? RestrictedPayeeStore.Inputs.cd
65.                   : ""
66.               }
67.               required
68.               maxLength="10"
69.               onlyLetterNumber
70.             />
71.           </Col>
72.         </Row>
73.         <Row>
74.           <Col md={6}>
75.             <F4InputField
76.               // onChange={this.onChangeText.bind(this, "dscp")}
77.               focusLabelClassName="focusLabel"
78.               labelField={strings.global_description}
79.               value={
80.                 RestrictedPayeeStore.Inputs.dscp
81.                   ? RestrictedPayeeStore.Inputs.dscp
82.                   : ""
83.               }
84.               required
85.               maxLength="100"
86.             />
87.           </Col>
88.         </Row>
89.       </Fragment>
90.     );
91.   };
92.   render() {
93.     const { RestrictedPayeeStore, SettingsStore, auth } = this.context.store;
94.  
95.     const copyFromInitial = RestrictedPayeeStore.list;
96.  
97.     // if (
98.     //   (RestrictedPayeeStore.Inputs.cd == "" && !isAdd) ||
99.     //   auth.sessionUser.user == null
100.     // )
101.     //   return (
102.     //     <NoAccessCTR
103.     //       image={<img height="80" src="images/ego-icons/unauthorized-bo.svg" />}
104.     //     />
105.     //   );
106.  
107.     return (
108.       <div onKeyPress={this.handleKeyPress}>
109.         <FeedbackModal1 modalSettings={SettingsStore.modalSettings} />
110.         <BoHeader>
111.           {strings.formatString(strings.global_addobj, strings.global_payee)}
112.         </BoHeader>
113.         <F4Form ref={ref => (this.formRef = ref)}>
114.           <BoTwoColMainForm>
115.             <BoTwoColForm
116.               store={RestrictedPayeeStore}
117.               subTitle={strings.formatString(
118.                 strings.global_objinfo,
119.                 strings.global_payee
120.               )}
121.               // isAdd={isAdd}
122.               // showCopyFrom={isAdd}
123.               // copyFromProps={
124.               //   isAdd
125.               //     ? {
126.               //         dataList: copyFromInitial,
127.               //         title: strings.global_deptes,
128.               //         fields: DepartmentStore.copyFromFields,
129.               //         fieldInputs: DepartmentStore.nobInputs,
130.               //         onSearch: this.search,
131.               //         onClickItem: () =>
132.               //           setTimeout(this.forceValidateAllFields, 300),
133.               //         store: DepartmentStore.copyFromStore
134.               //       }
135.               //     : null
136.               // }
137.             >
138.               {this.departmentDetails()}
139.               {/* <BoTwoColBottom store={DepartmentStore} /> */}
140.             </BoTwoColForm>
141.           </BoTwoColMainForm>
142.         </F4Form>
143.         <div className="twoColRightPanel">
144.           <RightPanel
145.             hasAddToBookmarks
146.             hasManualUpload
147.             // hasManualUpload={
148.             //   isAdd &&
149.             //   (DepartmentStore.hasManualAuth && DepartmentStore.hasUploadAuth)
150.             // }
151.             hasSuggestedLinks
152.             // funcCd={
153.             //   isAdd
154.             //     ? CitrineFunctionCodes.DEPARTMENT_ADD
155.             //     : CitrineFunctionCodes.DEPARTMENT_EDIT
156.             // }
157.             style={{ width: "100%", padding: "0" }}
158.             onClickUpload={() => {
159.               RestrictedPayeeStore.resetInputs();
160.               RestrictedPayeeStore.resetErrorList();
161.               RestrictedPayeeStore.isManual = false;
162.             }}
163.           />
164.         </div>
165.  
166.         <StepWizard
167.           formRef={this.formRef}
168.           title={strings.formatString(
169.             strings.global_objinfo,
170.             strings.global_payee
171.           )}
172.           currentStep={RestrictedPayeeStore.selectedMenuOnAdd + 1}
173.           totalSteps={3}
174.           // withQuickSave={isAdd}
175.           withQuickSave
176.           // onClickQuickSave={succCB => this.validateAddAndSaveAnother(succCB)}
177.           onClickQuickSave
178.           onClickNext={succCB => this.validateAddDepartment(succCB)}
179.           onClickBack={null}
180.           store={RestrictedPayeeStore}
181.           nextButtonRef={ref => (this.buttonRef = ref)}
182.         />
183.       </div>
184.     );
185.   }
186. }
187.  
188. AddRestrictedPayeePanel.propTypes = {
189.   // props definition
190. };
191.  
192. AddRestrictedPayeePanel.defaultProps = {
193.   // default props
194. };
195.  
196. export default AddRestrictedPayeePanel;
197.