1. /**
2.  * ApproveRestrictedPayeeCTR.js
3.  */
4.  
5. import React, { Component } from "react";
6. import Helmet from "react-helmet";
7. import { BaseContainers, BaseComponents } from "frontend-react-f4-base-ui";
8. import { BaseContext } from "frontend-react-f4-base-commons";
9. import { observer } from "mobx-react";
10. import TextArea from "../../components/TextArea/TextArea";
11. import moment from "moment";
12. import { Modal } from "antd";
13. import MaintenanceApprovalConfirmPanel from "../../components/MaintenanceApprovalConfirmPanel/MaintenanceApprovalConfirmPanel";
14. import MaintenanceApprovalPanel from "../../components/MaintenanceApprovalPanel/MaintenanceApprovalPanel";
15. import CitrineFunctionCodes from "../../enums/CitrineFunctionCodes";
16. import MaintenanceApprovalAckPanel from "../../components/MaintenanceApprovalAckPanel/MaintenanceApprovalAckPanel";
17. import ViewPage from "../../components/ViewPage/ViewPage";
18. import AckMessage from "../../components/AckMessage/AckMessage";
19. import _ from "underscore";
20. import ApproveRejectViewPageActionPanel from "../../components/ApproveRejectViewPageActionPanel/ApproveRejectViewPageActionPanel";
21.  
22. import BoNewViewPage from "../../components/BoNewViewPage/BoNewViewPage";
23. import NewViewRestrictedPayeePanel from "../../components/NewViewRestrictedPayeePanel/NewViewRestrictedPayeePanel";
24.  
25. const { connect } = BaseContext;
26. const { F4ContentContainer } = BaseContainers;
27. const { strings, F4Stepper, Feedback } = BaseComponents;
28.  
29. import ClientConfig from "../../config/ClientConfig";
30.  
31. @observer
32. @connect
33. class ApproveRestrictedPayeeCTR extends Component {
34.   constructor(props) {
35.     super(props);
36.  
37.     this.state = {
38.       pages: {
39.         initial: 0,
40.         confirm: 1,
41.         ack: 2,
42.         view: 3,
43.         viewForConfirmAck: 4,
44.         ackForSingle: 5
45.       },
46.       showErrorModal: false,
47.       errorModalMsg: "",
48.       readOnly: false,
49.       prevPage: 0,
50.       isForView: false,
51.       clickedApprove: false,
52.       clickedReject: false
53.     };
54.   }
55.  
56.   componentDidMount() {
57.     const { RestrictedPayeeStore } = this.context.store;
58.     const { onLoadResults } = this.props;
59.     RestrictedPayeeStore.resetApprovalFields();
60.     if (onLoadResults && onLoadResults === true) {
61.       this.onSearch();
62.     }
63.   }
64.  
65.   redirectTo = pageNo => {
66.     const { RestrictedPayeeStore } = this.context.store;
67.     RestrictedPayeeStore.selectedMenuOnApprove = pageNo;
68.   };
69.  
70.   confirmOnClickBack = () => {
71.     const { MaintenanceStore, RestrictedPayeeStore } = this.context.store;
72.     MaintenanceStore.approveList = null;
73.     RestrictedPayeeStore.resetApprovalFields();
74.     this.redirectTo(
75.       this.state.isForView ? this.state.pages.view : this.state.pages.initial
76.     );
77.     this.setState({ isForView: false });
78.   };
79.  
80.   confirmOnClickSubmit = (isApprove, succCB) => {
81.     const { auth, RestrictedPayeeStore, SettingsStore } = this.context.store;
82.  
83.     SettingsStore.isScreenLoading = true;
84.     this.setState({ prevPage: this.state.pages.confirm });
85.     RestrictedPayeeStore.approveListReqModel.localUserCd =
86.       auth.sessionUser.user.cd;
87.     RestrictedPayeeStore.approveListReqModel.isApprove = isApprove;
88.     RestrictedPayeeStore.approveListReqModel.remarks =
89.       RestrictedPayeeStore.approvalConfirmProps.remarks;
90.     RestrictedPayeeStore.approveListReqModel.maintenanceList =
91.       RestrictedPayeeStore.approvalConfirmProps.dataList;
92.  
93.     if (isApprove) {
94.       RestrictedPayeeStore.validateApproval(
95.         RestrictedPayeeStore.approveListReqModel.maintenanceList,
96.         res => {
97.           console.log("Res on validate Approval", res);
98.           if (res.body && res.body.error) {
99.             if (res.body.error.errors) {
100.               _.each(res.body.error.errors, errStr => {
101.                 RestrictedPayeeStore.errors.push(errStr.message);
102.               });
103.             } else if (res.body.error.message) {
104.               RestrictedPayeeStore.errors.push(res.body.error.message);
105.             }
106.             SettingsStore.isScreenLoading = false;
107.             this.setState({ clickedApprove: false });
108.             succCB && succCB();
109.           } else {
110.             this.approveList(isApprove, succCB);
111.             // SettingsStore.isScreenLoading = false;
112.           }
113.         }
114.       );
115.     } else {
116.       this.approveList(isApprove, succCB);
117.       // SettingsStore.isScreenLoading = false;
118.     }
119.   };
120.  
121.   approveList = (isApprove, succCB) => {
122.     const { RestrictedPayeeStore, SettingsStore } = this.context.store;
123.  
124.     let message = isApprove
125.       ? strings.formatString(
126.           strings.feedback_success_approval,
127.           strings.global_restrictedpayeenm,
128.           "approved"
129.         )
130.       : strings.formatString(
131.           strings.feedback_success_approval,
132.           strings.global_restrictedpayeenm,
133.           "rejected"
134.         );
135.     let messageSingle = isApprove
136.       ? "Restricted Payee Name was approved."
137.       : "Restricted Payee Name was rejected.";
138.     RestrictedPayeeStore.approveList(
139.       RestrictedPayeeStore.approveListReqModel,
140.       res => {
141.         console.log("Approve List: ", res);
142.         if (!res.body && res.text) {
143.           RestrictedPayeeStore.approvalAckProps = {
144.             dataList: RestrictedPayeeStore.approvalConfirmProps.dataList,
145.             action: isApprove
146.               ? strings.global_approve.toLowerCase()
147.               : strings.global_reject.toLowerCase(),
148.             remarks: RestrictedPayeeStore.approvalConfirmProps.remarks,
149.             refNo: res.text,
150.             message: this.state.isForView ? messageSingle : message
151.           };
152.           if (this.state.isForView) {
153.             let maintenanceList =
154.               RestrictedPayeeStore.approvalAckProps.dataList;
155.             RestrictedPayeeStore.restrictedPayeeDtlString =
156.               maintenanceList &&
157.               maintenanceList.length > 0 &&
158.               JSON.parse(maintenanceList[0].dtlString);
159.             this.redirectTo(this.state.pages.ackForSingle);
160.             this.setState({
161.               prevPage: this.state.pages.ackForSingle
162.             });
163.           } else {
164.             this.redirectTo(this.state.pages.ack);
165.             this.setState({ prevPage: this.state.pages.ack });
166.           }
167.           SettingsStore.isScreenLoading = false;
168.           succCB && succCB();
169.         } else {
170.           if (res.body.error.errors) {
171.             _.each(res.body.error.errors, errStr => {
172.               RestrictedPayeeStore.errors.push(errStr.message);
173.             });
174.           } else if (res.body.error.message) {
175.             RestrictedPayeeStore.errors.push(res.body.error.message);
176.           }
177.           SettingsStore.isScreenLoading = false;
178.           succCB && succCB();
179.         }
180.       }
181.     );
182.   };
183.  
184.   onClickRefNo = data => {
185.     const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
186.     RestrictedPayeeStore.resetErrorList();
187.     RestrictedPayeeStore.viewPageMaintenanceData = data;
188.  
189.     MaintenanceStore.remarks = null;
190.     RestrictedPayeeStore.resetApprovalFields();
191.     this.redirectTo(this.state.pages.view);
192.     this.setState({
193.       readOnly: false,
194.       prevPage: this.state.pages.confirm,
195.       isForView: true
196.     });
197.   };
198.  
199.   onClickRefNoForConfirmAck = data => {
200.     const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
201.     RestrictedPayeeStore.viewPageMaintenanceData = data;
202.     this.redirectTo(this.state.pages.viewForConfirmAck);
203.     this.setState({ readOnly: true });
204.   };
205.  
206.   onClickApprove = (maintenanceList, remarks, succCB) => {
207.     const {
208.       RestrictedPayeeStore,
209.       MaintenanceStore,
210.       auth,
211.       SettingsStore
212.     } = this.context.store;
213.     MaintenanceStore.errors = [];
214.     SettingsStore.isScreenLoading = true;
215.     this.setState({ clickedApprove: true });
216.     RestrictedPayeeStore.validateApproval(maintenanceList, res => {
217.       console.log("Res on Validate Payee Approval: ", res);
218.       if (res.body && res.body.error) {
219.         if (res.body.error.errors) {
220.           _.each(res.body.error.errors, errStr => {
221.             MaintenanceStore.errors.push(errStr.message);
222.             RestrictedPayeeStore.errors.push(errStr.message);
223.           });
224.         } else if (res.body.error.message) {
225.           MaintenanceStore.errors.push(res.body.error.message);
226.           RestrictedPayeeStore.errors.push(res.body.error.message);
227.         }
228.         MaintenanceStore.remarks = null;
229.         SettingsStore.isScreenLoading = false;
230.         this.setState({ clickedApprove: false });
231.         succCB && succCB();
232.       } else {
233.         console.log("No Errors.");
234.         MaintenanceStore.validateApprovalReqModel.isApprove = true;
235.         MaintenanceStore.validateApprovalReqModel.maintenanceList = maintenanceList;
236.         MaintenanceStore.validateApprovalReqModel.modelNm =
237.           strings.global_payee;
238.         MaintenanceStore.validateApprovalReqModel.remarks = remarks;
239.         MaintenanceStore.validateApprovalReqModel.requiresApprovalFuncCd =
240.           CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL;
241.         //CitrineFunctionCodes.COURIER_MAINTENANCE_REQUIRES_APPROVAL;
242.         MaintenanceStore.validateApprovalReqModel.userCd =
243.           auth.sessionUser.user.cd;
244.  
245.         MaintenanceStore.validateApproval(
246.           MaintenanceStore.validateApprovalReqModel,
247.           res => {
248.             if (res.body && res.body.error) {
249.               _.each(res.body.error.errors, errStr => {
250.                 MaintenanceStore.errors.push(errStr.message);
251.               });
252.               this.setState({ clickedApprove: false });
253.               SettingsStore.isScreenLoading = false;
254.               succCB && succCB();
255.             } else {
256.               console.log("No Errors.");
257.  
258.               RestrictedPayeeStore.approvalConfirmProps = {
259.                 action: strings.global_approve.toLowerCase(),
260.                 remarks: remarks,
261.                 dataList: maintenanceList
262.               };
263.               RestrictedPayeeStore.resetErrorList();
264.               if (this.state.isForView) {
265.                 this.confirmOnClickSubmit(true, null);
266.               } else {
267.                 this.redirectTo(this.state.pages.confirm);
268.                 this.setState({
269.                   prevPage: this.state.pages.confirm
270.                 });
271.                 SettingsStore.isScreenLoading = false;
272.               }
273.               MaintenanceStore.remarks = null;
274.               this.setState({ clickedApprove: false });
275.               succCB && succCB();
276.             }
277.           }
278.         );
279.       }
280.     });
281.   };
282.  
283.   onClickReject = (maintenanceList, remarks, succCB) => {
284.     const {
285.       RestrictedPayeeStore,
286.       MaintenanceStore,
287.       auth,
288.       SettingsStore
289.     } = this.context.store;
290.  
291.     SettingsStore.isScreenLoading = true;
292.     MaintenanceStore.errors = [];
293.     this.setState({ clickedReject: true });
294.  
295.     MaintenanceStore.validateApprovalReqModel.isApprove = false;
296.     MaintenanceStore.validateApprovalReqModel.maintenanceList = maintenanceList;
297.     MaintenanceStore.validateApprovalReqModel.modelNm = strings.global_payee;
298.     MaintenanceStore.validateApprovalReqModel.remarks = remarks;
299.     MaintenanceStore.validateApprovalReqModel.requiresApprovalFuncCd =
300.       CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL;
301.     // CitrineFunctionCodes.COURIER_MAINTENANCE_REQUIRES_APPROVAL;
302.     MaintenanceStore.validateApprovalReqModel.userCd = auth.sessionUser.user.cd;
303.  
304.     MaintenanceStore.validateApproval(
305.       MaintenanceStore.validateApprovalReqModel,
306.       res => {
307.         if (res.body && res.body.error) {
308.           _.each(res.body.error.errors, errStr => {
309.             MaintenanceStore.errors.push(errStr.message);
310.           });
311.  
312.           this.setState({
313.             showErrorModal: true,
314.             errorModalMsg: MaintenanceStore.errors[0],
315.             clickedReject: false
316.           });
317.           SettingsStore.isScreenLoading = false;
318.           succCB && succCB();
319.         } else {
320.           console.log("No Errors.");
321.           RestrictedPayeeStore.approvalConfirmProps = {
322.             action: strings.global_reject.toLowerCase(),
323.             remarks: remarks,
324.             dataList: maintenanceList
325.           };
326.           RestrictedPayeeStore.resetErrorList();
327.           if (this.state.isForView) {
328.             this.confirmOnClickSubmit(false, () => {
329.               this.setState({
330.                 clickedReject: false
331.               });
332.             });
333.           } else {
334.             this.redirectTo(this.state.pages.confirm);
335.             this.setState({
336.               prevPage: this.state.pages.confirm,
337.               clickedReject: false
338.             });
339.           }
340.           SettingsStore.isScreenLoading = false;
341.           succCB && succCB();
342.         }
343.         MaintenanceStore.remarks = null;
344.       }
345.     );
346.   };
347.  
348.   onSearch = multiSort => {
349.     const { RestrictedPayeeStore, MaintenanceStore, auth } = this.context.store;
350.  
351.     if (!multiSort) {
352.       multiSort = {
353.         page: 0,
354.         count: 10,
355.         sortList: [
356.           {
357.             direction: "desc",
358.             sort: "updatedDt"
359.           }
360.         ]
361.       };
362.     }
363.  
364.     let fields = RestrictedPayeeStore.approvalFields;
365.     {
366.       fields != undefined &&
367.         fields.map(
368.           field =>
369.             (MaintenanceStore.searchRequestModel[field.index] = field.value)
370.         );
371.     }
372.  
373.     MaintenanceStore.errors = [];
374.  
375.     MaintenanceStore.searchRequestModel.notCreatedBy = auth.sessionUser.user.cd;
376.     MaintenanceStore.searchRequestModel.filterTypeOne = {
377.       isCaseSensitive: false,
378.       isEq: true
379.     };
380.     MaintenanceStore.searchRequestModel.filterTypeTwo = {
381.       isCaseSensitive: false,
382.       isEq: false
383.     };
384.     MaintenanceStore.searchRequestModel.funcCd =
385.       CitrineFunctionCodes.RESTRICTED_PAYEE_NM_REQUIRES_APPROVAL;
386.     //CitrineFunctionCodes.COURIER_MAINTENANCE_REQUIRES_APPROVAL;
387.  
388.     MaintenanceStore.findBySearchModel(
389.       MaintenanceStore.searchRequestModel,
390.       multiSort,
391.       res => {
392.         if (res.body && !res.body.error) {
393.           console.log("app res: ", res);
394.           MaintenanceStore.responseBody = res.body;
395.           MaintenanceStore.approveList = res.body.content;
396.           let data = MaintenanceStore.approveList;
397.           MaintenanceStore.dataTableRef.setState({
398.             data: data,
399.             copyOfData: data,
400.             totalItemsCount: res.body.totalElements
401.           });
402.           MaintenanceStore.dataTableRef &&
403.             MaintenanceStore.dataTableRef.forceUpdate();
404.         } else {
405.           console.log("Error", res.body.error);
406.         }
407.         // this.setState({ hasClickedSearch: true });
408.       }
409.     );
410.   };
411.  
412.   _createData = () => {
413.     return [
414.       {
415.         headerTitle: strings.global_refno,
416.         name: "refNo",
417.         type: "link",
418.         width: 100,
419.         cell: props => (
420.           <span
421.             className="linkInTable"
422.             onClick={() => this.onClickRefNo(props.data)}
423.           >
424.             {" "}
425.             {props.data.refNo}{" "}
426.           </span>
427.         )
428.       },
429.       {
430.         headerTitle: strings.global_restrictedpayeenm,
431.         name: "filterOne",
432.         type: "text",
433.         width: 100
434.       },
435.       {
436.         headerTitle: strings.global_amount,
437.         name: "filterTwo",
438.         type: "text",
439.         width: 100
440.       },
441.       {
442.         headerTitle: strings.global_func,
443.         // name: "actnFuncCd",
444.         name: "actnFunc.description",
445.         type: "text",
446.         width: 150,
447.         sortBy: "actnFunc.description",
448.         cell: props => (
449.           <span className="abstractInTable">
450.             {props.data.actnFunc.description}
451.           </span>
452.         )
453.       },
454.       {
455.         headerTitle: strings.global_creatdby,
456.         name: "createdBy",
457.         type: "text",
458.         width: 150
459.       },
460.       {
461.         headerTitle: strings.global_createdt,
462.         name: "createdDt",
463.         type: "text",
464.         width: 150,
465.         formatter: "date"
466.       }
467.     ];
468.   };
469.  
470.   _createDataForConfirmAck = () => {
471.     return [
472.       {
473.         headerTitle: strings.global_refno,
474.         name: "refNo",
475.         type: "link",
476.         width: 100,
477.         cell: props => (
478.           <span
479.             className="linkInTable"
480.             onClick={() => this.onClickRefNoForConfirmAck(props.data)}
481.           >
482.             {" "}
483.             {props.data.refNo}{" "}
484.           </span>
485.         )
486.       },
487.       {
488.         headerTitle: strings.global_restrictedpayeenm,
489.         name: "filterOne",
490.         type: "text",
491.         width: 100
492.       },
493.       {
494.         headerTitle: strings.global_amount,
495.         name: "filterTwo",
496.         type: "text",
497.         width: 100
498.       },
499.       {
500.         headerTitle: strings.global_func,
501.         // name: "actnFuncCd",
502.         name: "actnFunc.description",
503.         type: "text",
504.         width: 150,
505.         sortBy: "actnFunc.description",
506.         cell: props => (
507.           <span className="abstractInTable">
508.             {props.data.actnFunc.description}
509.           </span>
510.         )
511.       },
512.       {
513.         headerTitle: strings.global_creatdby,
514.         name: "createdBy",
515.         type: "text",
516.         width: 150
517.       },
518.       {
519.         headerTitle: strings.global_createdt,
520.         name: "createdDt",
521.         type: "text",
522.         width: 120,
523.         formatter: "date"
524.       }
525.     ];
526.   };
527.  
528.   onClickDownload = multiSort => {
529.     const { MaintenanceStore, auth } = this.context.store;
530.     return new Promise(resolve => {
531.       MaintenanceStore.findBySearchModel(
532.         MaintenanceStore.searchRequestModel,
533.         multiSort,
534.         res => {
535.           if (res.body && !res.body.error) {
536.             resolve(res.body.content);
537.           }
538.         }
539.       );
540.     });
541.   };
542.  
543.   _showMaintenanceApprovalPanel() {
544.     const { RestrictedPayeeStore } = this.context.store;
545.     return (
546.       <MaintenanceApprovalPanel
547.         reportProps={{
548.           onClickDownload: this.onClickDownload,
549.           reportHeader2: "Approve/Reject Checkbook Type Report",
550.           fileName: "Approve_Reject_Payee"
551.         }}
552.         title={strings.formatString(
553.           strings.portlet_title_maintenance,
554.           strings.global_restrictedpayeenm
555.         )}
556.         initialFields={RestrictedPayeeStore.approvalFields}
557.         funcCd={CitrineFunctionCodes.RESTRICTED_PAYEE_NM_APPROVE_REJECT}
558.         //funcCd={CitrineFunctionCodes.COURIER_MAINTENANCE_APPROVE_REJECT}
559.         columnHeaders={this._createData()}
560.         onSearchApprove={this.onSearch}
561.         onApprove={this.onClickApprove}
562.         onReject={this.onClickReject}
563.       />
564.     );
565.   }
566.  
567.   _showMaintenanceApprovalConfirmPanel() {
568.     const { MaintenanceStore, RestrictedPayeeStore } = this.context.store;
569.     let isApprove =
570.       RestrictedPayeeStore.approvalConfirmProps.action === "approve";
571.     return (
572.       <MaintenanceApprovalAckPanel
573.         isMultiple={true}
574.         isAck={false}
575.         isConfirm={true}
576.         columnHeaders={this._createDataForConfirmAck()}
577.         action={RestrictedPayeeStore.approvalConfirmProps.action}
578.         remarks={RestrictedPayeeStore.approvalConfirmProps.remarks}
579.         dataList={RestrictedPayeeStore.approvalConfirmProps.dataList}
580.         onClickBack={() => {
581.           MaintenanceStore.remarks = null;
582.           RestrictedPayeeStore.resetErrorList();
583.           this.confirmOnClickBack();
584.         }}
585.         onClickSubmit={() => this.confirmOnClickSubmit(isApprove, null)}
586.         errorFeedback={RestrictedPayeeStore.errors}
587.         stepWizardHeader={"Confirm Details"}
588.         modelName={strings.global_payee}
589.       />
590.     );
591.   }
592.  
593.   _showMaintenanceApprovalAckPanel() {
594.     const { MaintenanceStore, RestrictedPayeeStore } = this.context.store;
595.     return (
596.       <MaintenanceApprovalAckPanel
597.         isMultiple={true}
598.         isAck={true}
599.         isConfirm={false}
600.         header={RestrictedPayeeStore.approvalAckProps.message}
601.         refNo={RestrictedPayeeStore.approvalAckProps.refNo}
602.         columnHeaders={this._createDataForConfirmAck()}
603.         action={RestrictedPayeeStore.approvalAckProps.action}
604.         remarks={RestrictedPayeeStore.approvalAckProps.remarks}
605.         dataList={RestrictedPayeeStore.approvalAckProps.dataList}
606.         hasButtons
607.         modelName={strings.global_payee}
608.         backButtonLabel={strings.formatString(
609.           strings.button_middle_backxtopage,
610.           strings.formatString(
611.             strings.global_approveobj,
612.             strings.global_restrictedpayeenms
613.           )
614.         )}
615.         onClickBack={() => {
616.           MaintenanceStore.remarks = null;
617.           RestrictedPayeeStore.resetApprovalFields();
618.           MaintenanceStore.approveList = null;
619.           this.redirectTo(this.state.pages.initial);
620.         }}
621.         stepWizardHeader={strings.global_acknowledgement}
622.       />
623.     );
624.   }
625.  
626.   _showViewPage(actionButtons) {
627.     const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
628.     let dtlStringData = RestrictedPayeeStore.viewPageMaintenanceData
629.       ? JSON.parse(RestrictedPayeeStore.viewPageMaintenanceData.dtlString)
630.       : null;
631.     let funcDscp =
632.       RestrictedPayeeStore.viewPageMaintenanceData &&
633.       RestrictedPayeeStore.viewPageMaintenanceData.actnFunc.description;
634.     return (
635.       <BoNewViewPage
636.         errorList={RestrictedPayeeStore.errors}
637.         isApproveReject
638.         funcDscp={funcDscp}
639.         hasBackButton
640.         backButtonLabel={strings.formatString(
641.           strings.global_approveobj,
642.           strings.global_restrictedpayeenm
643.         )}
644.         store={MaintenanceStore}
645.         modelNm={strings.global_payee}
646.         viewPanel={
647.           <NewViewRestrictedPayeePanel
648.             isView={true}
649.             data={dtlStringData ? dtlStringData : null}
650.           />
651.         }
652.         onClickBack={() => {
653.           MaintenanceStore.resetRemarks();
654.           MaintenanceStore.errors = [];
655.           RestrictedPayeeStore.resetErrorList();
656.           MaintenanceStore.approveList = null;
657.           this.setState({ isForView: false });
658.           this.redirectTo(this.state.pages.initial);
659.         }}
660.         onClickApprove={() => {
661.           this.setState({ isForView: true });
662.           let data = [];
663.           data.push(RestrictedPayeeStore.viewPageMaintenanceData);
664.           this.onClickApprove(data, MaintenanceStore.remarks);
665.           MaintenanceStore.errors = [];
666.         }}
667.         onClickReject={() => {
668.           this.setState({ isForView: true });
669.           let data = [];
670.           data.push(RestrictedPayeeStore.viewPageMaintenanceData);
671.           this.checkIfHasRemarks(data);
672.           MaintenanceStore.errors = [];
673.         }}
674.       />
675.     );
676.   }
677.  
678.   _showViewPageForConfirmAck() {
679.     const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
680.     let dtlStringData = this.showViewPageConfirmAckData();
681.     return (
682.       <BoNewViewPage
683.         fullView={true}
684.         errorList={RestrictedPayeeStore.errors}
685.         // isApproveReject
686.         hasBackButton
687.         backButtonLabel={
688.           this.state.prevPage == this.state.pages.ack
689.             ? strings.global_acknowledgement
690.             : strings.global_confirm
691.         }
692.         store={MaintenanceStore}
693.         modelNm={strings.global_payee}
694.         viewPanel={
695.           <NewViewRestrictedPayeePanel
696.             isView={true}
697.             data={dtlStringData ? dtlStringData : null}
698.           />
699.         }
700.         onClickBack={() => {
701.           this.state.prevPage == this.state.pages.ack
702.             ? this.redirectTo(this.state.pages.ack)
703.             : this.redirectTo(this.state.pages.confirm);
704.         }}
705.       />
706.     );
707.   }
708.  
709.   _showAckForSingle() {
710.     const { MaintenanceStore, RestrictedPayeeStore } = this.context.store;
711.     let data = RestrictedPayeeStore.restrictedPayeeDtlString;
712.     let funcDscp =
713.       RestrictedPayeeStore.viewPageMaintenanceData &&
714.       RestrictedPayeeStore.viewPageMaintenanceData.actnFunc.description;
715.     return (
716.       <MaintenanceApprovalAckPanel
717.         isAck={true}
718.         isConfirm={false}
719.         funcDscp={funcDscp}
720.         columnHeaders={this._createDataForConfirmAck()}
721.         action={RestrictedPayeeStore.approvalAckProps.action}
722.         remarks={RestrictedPayeeStore.approvalAckProps.remarks}
723.         dataList={RestrictedPayeeStore.approvalAckProps.dataList}
724.         hasButtons
725.         modelName={strings.global_payee}
726.         backButtonLabel={strings.formatString(
727.           strings.button_middle_backxtopage,
728.           strings.formatString(
729.             strings.global_approveobj,
730.             strings.global_restrictedpayeenm
731.           )
732.         )}
733.         onClickBack={() => {
734.           MaintenanceStore.remarks = null;
735.           MaintenanceStore.approveList = null;
736.           RestrictedPayeeStore.resetApprovalFields();
737.           this.redirectTo(this.state.pages.initial);
738.           this.setState({
739.             isForView: false
740.           });
741.         }}
742.         viewPanel={
743.           <NewViewRestrictedPayeePanel
744.             header={RestrictedPayeeStore.approvalAckProps.message}
745.             refNo={RestrictedPayeeStore.approvalAckProps.refNo}
746.             isConfirm={false}
747.             isAck={true}
748.             data={data ? data : null}
749.             store={MaintenanceStore}
750.             errorFeedback={MaintenanceStore.errors}
751.             hideStepper={true}
752.           />
753.         }
754.       />
755.     );
756.   }
757.  
758.   showViewPageConfirmAckData() {
759.     const { RestrictedPayeeStore } = this.context.store;
760.     return RestrictedPayeeStore.viewPageMaintenanceData
761.       ? JSON.parse(RestrictedPayeeStore.viewPageMaintenanceData.dtlString)
762.       : null;
763.   }
764.  
765.   handleCancel = () => {
766.     this.setState({
767.       showErrorModal: false,
768.       errorModalMsg: ""
769.     });
770.   };
771.  
772.   handleKeyDown = e => {
773.     const { MaintenanceStore } = this.context.store;
774.     MaintenanceStore.remarks = e.target.value;
775.   };
776.  
777.   checkIfHasRemarks = data => {
778.     const { MaintenanceStore, SettingsStore } = this.context.store;
779.     if (!MaintenanceStore.remarks) {
780.       let errorList = [
781.         strings.formatString(
782.           strings.feedback_bad_isrequired,
783.           strings.global_remarks
784.         )
785.       ];
786.       RestrictedPayeeStore.errors = errorList;
787.       this.setState({
788.         showErrorModal: true,
789.         errorModalMsg: errorList[0]
790.       });
791.       SettingsStore.isScreenLoading = false;
792.     } else {
793.       this.onClickReject(data, MaintenanceStore.remarks);
794.     }
795.   };
796.  
797.   render() {
798.     const { RestrictedPayeeStore, MaintenanceStore } = this.context.store;
799.  
800.     const actionButtons = (
801.       <div>
802.         <div className="row approval-remarks">
803.           <TextArea
804.             labelField={strings.global_remarks}
805.             value={MaintenanceStore.remarks}
806.             placeHolder={strings.global_remarks}
807.             onChange={this.handleKeyDown}
808.             maxLength="255"
809.           />
810.         </div>
811.         <div className="bo-feedback">
812.           <Feedback isError={true} feedbackList={RestrictedPayeeStore.errors} />
813.         </div>
814.         <ApproveRejectViewPageActionPanel
815.           approveMessage={strings.formatString(
816.             strings.global_approveobj,
817.             strings.global_restrictedpayeenm
818.           )}
819.           rejectMessage={strings.formatString(
820.             strings.global_rejectobj,
821.             strings.global_restrictedpayeenm
822.           )}
823.           onClickApprove={() => {
824.             this.setState({ isForView: true });
825.             let data = [];
826.             data.push(RestrictedPayeeStore.viewPageMaintenanceData);
827.             this.onClickApprove(data, MaintenanceStore.remarks);
828.             MaintenanceStore.errors = [];
829.           }}
830.           onClickReject={() => {
831.             this.setState({ isForView: true });
832.             let data = [];
833.             data.push(RestrictedPayeeStore.viewPageMaintenanceData);
834.             this.checkIfHasRemarks(data);
835.             MaintenanceStore.errors = [];
836.           }}
837.         />
838.       </div>
839.     );
840.  
841.     const data = [
842.       { key: 0, content: this._showMaintenanceApprovalPanel() },
843.       { key: 1, content: this._showMaintenanceApprovalConfirmPanel() },
844.       { key: 2, content: this._showMaintenanceApprovalAckPanel() },
845.       { key: 3, content: this._showViewPage(actionButtons) },
846.       { key: 4, content: this._showViewPageForConfirmAck() },
847.       { key: 5, content: this._showAckForSingle() }
848.     ];
849.  
850.     return (
851.       <F4ContentContainer>
852.         <Helmet title={strings.business_banking} />
853.         <Modal
854.           visible={this.state.showErrorModal}
855.           closable={true}
856.           onClose={this.handleCancel}
857.           onCancel={this.handleCancel}
858.           okButtonProps={{
859.             style: { display: "none" }
860.           }}
861.           cancelButtonProps={{
862.             style: { display: "none" }
863.           }}
864.           destroyOnClose={true}
865.           className="errorModalFeedback"
866.         >
867.           {this.state.showErrorModal ? (
868.             <div>
869.               <div
870.                 class="swal2-icon swal2-error swal2-animate-error-icon"
871.                 style={{ display: "flex" }}
872.               >
873.                 <span class="swal2-x-mark">
874.                   <span class="swal2-x-mark-line-left" />
875.                   <span class="swal2-x-mark-line-right" />
876.                 </span>
877.               </div>
878.               <div className="errorModalLabel">{this.state.errorModalMsg}</div>
879.             </div>
880.           ) : null}
881.         </Modal>
882.         <F4Stepper
883.           data={data}
884.           activeKey="key"
885.           activeValue={RestrictedPayeeStore.selectedMenuOnApprove}
886.         />
887.       </F4ContentContainer>
888.     );
889.   }
890. }
891.  
892. export default ApproveRestrictedPayeeCTR;
893.