Notes

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Icon from 'foundation-components-icon';
import {
Heading,
Textfield,
Card,
ActionBar,
OverlayModal
} from 'foundation-components-core';
import { Toast } from 'foundation-components-notifications';
import { Col, Grid, Row } from 'foundation-components-grid';
import { fontSize, colorNames } from 'cib-ui-components';
import BuyerSupplierInformation from '../components/BuyerSupplierInformation';
import GoodsInformation from '../components/GoodsInformation';
import CountryInformation from '../components/CountryInformation';
import Declaration from '../components/Declaration';
import { setTradeDDFormData, setTradeDetails } from '../action';
import {
getGoodsDetails,
getTaxReferenceNumber,
getOverlayOpen,
getToastOpen
} from '../reducer';

const buttons = [
{
buttontext: 'Submit',
buttontype: 'primary',
action: '',
disabled: true,
position: 'right'
},
{
buttontext: 'Reset',
buttontype: 'secondary',
action: '',
position: 'left'
}
];

export class ProcedureRollout extends React.Component {
constructor(props) {
super(props);
this.state = {
expiryDate: null,
buyerSupplierListFlag: false,
goodsInfoDetailsFlag: false,
cntryImportFlag: false,
cntryExportFlag: false,
goodsMvmtWithinCntryFlag: null,
buyerSupplierInfoList: [],
goodsInfoDetails: [],
cntryImport: [],
cntryExport: [],
declaration: {
confirm: false,
aggrement: false
},
isOpen: false,
submitOverlayOpen: false,
keyValForBuyer: 1,
keyValForGoods: 2,
keyValForCountry: 3,
keyValForDecl: 4
};
}

componentDidMount = () => {
this.props.setTradeDetails(this.props.location.search);
};

openOverlay = () => {
this.setState({
submitOverlayOpen: true
});
};

closeOverlay = () => {
this.setState({
submitOverlayOpen: false
});
};

closeToast = () => {
this.setState({ isOpen: false });
};

clearHandler = () => {
const num = Math.floor(Math.random() * 6) + 1;
const numForGoods = Math.floor(Math.random() * 6) + 5;
const numForCountry = Math.floor(Math.random() * 5) + 11;
const numForDecl = Math.floor(Math.random() * 5) + 16;

this.setState({
keyValForBuyer: num,
keyValForGoods: numForGoods,
keyValForCountry: numForCountry,
keyValForDecl: numForDecl,
buyerSupplierListFlag: false,
goodsInfoDetailsFlag: false,
cntryImportFlag: false,
cntryExportFlag: false,
goodsMvmtWithinCntryFlag: null,
buyerSupplierInfoList: [],
goodsInfoDetails: [],
cntryImport: [],
cntryExport: [],
declaration: {
confirm: false,
aggrement: false
},
submitOverlayOpen: false
});
};

submitTradeResponse = async () => {
const {
buyerSupplierInfoList,
cntryExport,
cntryImport,
expiryDate,
goodsInfoDetails,
goodsMvmtWithinCntryFlag
} = this.state;
const { taxRefNo } = this.props;
const requestData = {};
requestData.tradeDdForm = {};
const tradeDdForm = requestData.tradeDdForm;
tradeDdForm.txnRefNo = taxRefNo;
tradeDdForm.expiryDate = expiryDate;
tradeDdForm.goodsMvmtWithinCntryFlag = goodsMvmtWithinCntryFlag;
tradeDdForm.goodsInfoDetails = goodsInfoDetails;
tradeDdForm.cntryImport = cntryImport;
tradeDdForm.cntryExport = cntryExport;
tradeDdForm.buyerSuplierInfoList = buyerSupplierInfoList;
tradeDdForm.goodsInfoDetails = tradeDdForm.goodsInfoDetails.map(
(listItem) => {
const { id, ...other } = listItem;
return other;
}
);
tradeDdForm.buyerSuplierInfoList = tradeDdForm.buyerSuplierInfoList.map(
(listItem) => {
const { id, ...other } = listItem;
return other;
}
);
tradeDdForm.cntryImport = tradeDdForm.cntryImport.map(
(listItem) => listItem.goodsCountryOrigin
);
tradeDdForm.cntryExport = tradeDdForm.cntryExport.map(
(listItem) => listItem.goodsCountryDestination
);
tradeDdForm.goodsInfoDetails = tradeDdForm.goodsInfoDetails.map(
(listItem) => {
const { id, ...other } = listItem;
other.goodsCategory = other.goodsCat;
other.goodsDescription = other.goodsDesc;
other.areGoodsSubjecttoExpCntr = other.subToExpCntr;
const { goodsCat, goodsDesc, subToExpCntr, ...others } = other;
return others;
}
);
tradeDdForm.buyerSuplierInfoList = tradeDdForm.buyerSuplierInfoList.map(
(listItem) => {
const { id, ...other } = listItem;
other.buyerOrSupplier = other.buyOrSupp;
other.nameofBuyerOrSupplier = other.nameOfBuyOrSupp;
other.buyersorSupplierCountryofOperations = other.buyOrSuppCntryOpr;
other.isBuyerorSupplieraRelatedPartyToYou = other.isBuyOrSuppRelParty;
const {
buyOrSupp,
nameOfBuyOrSupp,
buyOrSuppCntryOpr,
isBuyOrSuppRelParty,
...others
} = other;
return others;
}
);

const response = await this.props.setTradeDDFormData(requestData);
if (response.transactionSuccess) {
this.props.history.push('/tradeConfirmation');
} else {
this.setState({
isOpen: true,
submitOverlayOpen: false
});
}
};

updateParentState = (keyName, value) => {
this.setState(() => ({ [keyName]: value }));
};

overlayModalErrorResponse = () => {
const { overlayOpen, toastOpen } = this.props;
const { cntryList, goodsCatList } = this.props.goodsDetails;
if (overlayOpen) {
return (
<OverlayModal open={overlayOpen} hasCloseIcon={false} position="top">
<Alignment>
<Icon
name="25-urgent"
title="25-urgent"
size="extraLarge"
color="primaryColor2"
/>
<Heading
rank
size="extraLarge"
weight="bold"
color="primaryColor2"
align="center"
>
Validation Failed
</Heading>
<Heading
rank
size="extraLarge"
weight="regular"
color="primaryColor2"
align="center"
>
The page URL has either expired or the data has already been
submitted
</Heading>
</Alignment>
</OverlayModal>
);
} else if (toastOpen) {
return (
<Toast
timeout={5000}
open={this.state.isOpen}
type="confirm"
onCloseClick={this.closeToast}
>
<ToastMessage>
Trade disclosure form submitted successfully
</ToastMessage>
</Toast>
);
} else {
return (
<ComponentContainer fluid>
<TitleLabel>
<Heading
rank
size="extraLarge"
color="primaryColor3"
weight="light"
textcase="uppercase"
align="left"
>
TRADE DISCLOSURE FORM
</Heading>
</TitleLabel>
<StyledBorderLine />
<Heading
size="extraSmall"
rank
color="primaryColor2"
weight="bold"
align="right"
>
Please provide information on Trade Transaction(s) you will be
conducting through the Bank
</Heading>
<Row>
<Col xs={12} sm={12} md={12}>
<Card>
<Row>
<Col xs={2} sm={2} md={2}>
<Heading
rank
size="small"
weight="bold"
textcase="uppercase"
>
REFERENCE NO.
</Heading>
</Col>
<Col xs={4} sm={4} md={4}>
<ReferenceField>
<Textfield
size="large"
value={this.props.taxRefNo || ''}
placeholder=""
disabled
canClear={false}
onChange={() => {}}
/>
</ReferenceField>
</Col>
</Row>
</Card>
</Col>
</Row>
<StyledBorderLine />
<BuyerSupplierInformation
key={this.state.keyValForBuyer}
buyerSupplierInfoList={this.state.buyerSupplierInfoList}
updateParentState={this.updateParentState}
countryList={cntryList.sort()}
/>
<StyledBorderLine />
<GoodsInformation
key={this.state.keyValForGoods}
goodsInfoDetails={this.state.goodsInfoDetails}
updateParentState={this.updateParentState}
goodsList={goodsCatList.sort()}
/>
<StyledBorderLine />
<CountryInformation
key={this.state.keyValForCountry}
cntryImport={this.state.cntryImport}
cntryExport={this.state.cntryExport}
updateParentState={this.updateParentState}
countryList={cntryList.sort()}
/>
<StyledBorderLine />
<Declaration
key={this.state.keyValForDecl}
declaration={this.state.declaration}
updateParentState={this.updateParentState}
/>
<StyledBorderLine />
<Row>
<Col xs={12} sm={12} md={12}>
<Heading
rank
size="extraSmall"
weight="regular"
color="primaryColor3"
>
<Notice>Legal Notice</Notice>
Copyrights © 2002 - 2016 Standard Chartered Bank
</Heading>
</Col>
</Row>
<br />
<Row>
<Col xs={12} sm={12} md={12}>
<ActionBarContainer>
<ActionBar buttons={buttons} />
</ActionBarContainer>
</Col>
</Row>
<OverlayModal
open={this.state.submitOverlayOpen}
title="Submit Confirmation"
requestClose={this.closeOverlay}
position="top"
actionbar={{
buttons: [
{
buttontype: 'secondary',
buttontext: 'Cancel',
action: this.closeOverlay,
position: 'left'
},
{
buttontype: 'primary',
buttontext: 'Submit',
action: this.submitTradeResponse,
position: 'right'
}
]
}}
>
Do you want to submit data?
</OverlayModal>
</ComponentContainer>
);
}
};

render() {
const declarationFlag =
this.state.declaration.aggrement && this.state.declaration.confirm;
const goodsMvmtWithinCntryFlag =
Boolean(this.state.goodsMvmtWithinCntryFlag) || false;

let isDisable =
this.state.buyerSupplierListFlag &&
this.state.goodsInfoDetailsFlag &&
this.state.cntryImportFlag &&
this.state.cntryExportFlag &&
declarationFlag &&
goodsMvmtWithinCntryFlag;
if (this.state.goodsMvmtWithinCntryFlag === 'Yes') {
isDisable =
this.state.buyerSupplierListFlag &&
this.state.goodsInfoDetailsFlag &&
this.state.cntryImportFlag &&
declarationFlag &&
goodsMvmtWithinCntryFlag;
}
buttons[0].action = this.openOverlay;
buttons[1].action = this.clearHandler;
buttons[0].disabled = !isDisable;

return <div>{this.overlayModalErrorResponse()}</div>;
}
}

const mapStateToProps = (state) => ({
goodsDetails: getGoodsDetails(state),
taxRefNo: getTaxReferenceNumber(state),
overlayOpen: getOverlayOpen(state),
toastOpen: getToastOpen(state)
});

const mapDispatchToProps = {
setTradeDDFormData,
setTradeDetails
};

ProcedureRollout.propTypes = {
setTradeDDFormData: PropTypes.func,
setTradeDetails: PropTypes.func,
goodsDetails: PropTypes.shape({
cntryList: PropTypes.array,
goodsCatList: PropTypes.array
}),
overlayOpen: PropTypes.bool,
toastOpen: PropTypes.bool,
taxRefNo: PropTypes.string,
history: PropTypes.object,
location: PropTypes.string
};

export default connect(
mapStateToProps,
mapDispatchToProps
)(ProcedureRollout);

const StyledBorderLine = styled.hr`
border: none;
border-top: 1px solid ${colorNames.PrimaryColor3};
opacity: 0.3;
`;

const ReferenceField = styled.div`
margin-top: -6px;
`;
const ComponentContainer = styled(Grid)`
padding: 20px;
`;

const ActionBarContainer = styled.div`
margin: 0 auto;
width: 80%;
`;
const TitleLabel = styled.div`
padding: 10px 0;
`;
const Alignment = styled.div`
text-align: center;
`;
const Notice = styled.span`
text-decoration: underline;
padding-right: 10px;
`;
const ToastMessage = styled.div`
font-size: ${fontSize.extraSmall};
color: ${colorNames.SecondaryColor1};
text-align: left;
font-family: SCSans-Bold;
`;