Notes

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import Icon from 'foundation-components-icon';
import _ from 'lodash';
import { colorNames } from 'cib-ui-components';
import { RecoveryMessage } from 'foundation-components-notifications';
import {
Heading,
Textfield,
Card,
Select,
Button,
Tooltip
} from 'foundation-components-core';
import { Col, Row } from 'foundation-components-grid';
import objectKeyIterator from '../../utility';

const tradePartnerRole = ['Buyer', 'Supplier'].map((item) => ({
label: item,
value: item
}));

const tradeRelatedParty = ['Yes', 'No'].map((item) => ({
label: item,
value: item
}));

export default class BuyerSupplierInformation extends React.Component {
constructor(props) {
super(props);
this.state = {
buyerSupplierCounter: 1,
selected: null,
isDisable: true,
buyerSupplierList: [
{
buyerSupplierCounter: 0,
id: 0
}
],
buyerSupplierInfoList: [
{
id: null,
buyOrSupp: null,
nameOfBuyOrSupp: null,
buyOrSuppCntryOpr: null,
isBuyOrSuppRelParty: null
}
],
descriptionFlag: false,
validFlag: []
};
}

appendInvoice = () => {
let buyerSupplierCounterValue = this.state.buyerSupplierCounter;
buyerSupplierCounterValue += buyerSupplierCounterValue;

this.setState(() => ({
buyerSupplierCounter: buyerSupplierCounterValue,
buyerSupplierList: this.state.buyerSupplierList.concat({
buyerSupplierCounter: buyerSupplierCounterValue,
id: buyerSupplierCounterValue
})
}));
};

deleteSelectedRecord = (e) => {
const newInvoiceList = this.state.buyerSupplierList.filter(
(val) => val.id !== parseInt(e.currentTarget.dataset.key, 10)
);
const updatedBuyerSupplierList = this.state.buyerSupplierInfoList.filter(
(val) => val.id !== parseInt(e.currentTarget.dataset.key, 10)
);
this.props.updateParentState(
'buyerSupplierInfoList',
updatedBuyerSupplierList
);
this.setState(
{
buyerSupplierList: newInvoiceList,
buyerSupplierInfoList: updatedBuyerSupplierList
},
() => {
this.validationHandler();
}
);
};

buyerSupplierSubmitHandler = (e, value, index, id) => {
const { buyerSupplierInfoList } = this.state;
if (!buyerSupplierInfoList[index]) {
buyerSupplierInfoList[index] = {
id: null,
buyOrSupp: null,
nameOfBuyOrSupp: null,
buyOrSuppCntryOpr: null,
isBuyOrSuppRelParty: null
};
}
buyerSupplierInfoList[index][e] = value;
buyerSupplierInfoList[index].id = id;
this.setState(() => ({ buyerSupplierInfoList }));
this.submitButtonStatus();
this.validationHandler();
};

buyerSupplierForDescSubmitHandler = (e, value, index, id) => {
const { buyerSupplierInfoList } = this.state;
if (!buyerSupplierInfoList[index]) {
buyerSupplierInfoList[index] = {
id: null,
buyOrSupp: null,
nameOfBuyOrSupp: null,
buyOrSuppCntryOpr: null,
isBuyOrSuppRelParty: null
};
}
buyerSupplierInfoList[index][e] = value;
buyerSupplierInfoList[index].id = id;
};

submitButtonStatus = (descriptionFlag) => {
const { buyerSupplierInfoList } = this.state;

const buyerSupplierInfoDetailsFlag =
buyerSupplierInfoList.length > 0
? buyerSupplierInfoList.every((listItem) => objectKeyIterator(listItem))
: false;

const flagValue = buyerSupplierInfoDetailsFlag && descriptionFlag;

this.setState({ isDisable: flagValue }, () => {
this.props.updateParentState('buyerSupplierListFlag', flagValue);
});
};

validationHandler = () => {
this.props.updateParentState(
'buyerSupplierInfoList',
this.state.buyerSupplierInfoList
);
this.submitButtonStatus(this.state.descriptionFlag);
};

descriptionValidationFlag = (descriptionFlag, id) => {
const validFlag = [...this.state.validFlag];
let status;
if (descriptionFlag === false) {
validFlag[id] = true;
this.setState({
validFlag
});
} else {
validFlag[id] = false;
this.setState({
validFlag
});
}
const holder = validFlag.filter((item) => {
if (item) {
return true;
}
return false;
});
this.setState(() => ({
descriptionFlag
}));
if (holder.length === 0) {
status = true;
} else {
status = false;
}
this.submitButtonStatus(status);
};

render() {
const { selected } = this.state;
const countryList = _.uniq(this.props.countryList).map((item) => ({
label: item,
value: item
}));
const length =
this.props.buyerSupplierInfoList.length ===
this.state.buyerSupplierList.length;
const flagVal = this.state.isDisable && length;
const flag = !flagVal;

return (
<div>
<Row>
<Col xs={12} sm={12} md={12}>
<Card>
<Heading
rank
weight="bold"
color="primaryColor2"
textcase="uppercase"
size="medium"
>
BUYER & SUPPLIER INFORMATION
</Heading>
<StyledBorderLine />
<HeaderContainer>
<Col xs={2} sm={2} md={2}>
<Heading
rank
size="extraSmall"
color="greyScaleColor2"
textcase="uppercase"
>
TRADING PARTNER ROLE
</Heading>
</Col>
<Col xs={3} sm={3} md={3}>
<Heading
rank
size="extraSmall"
color="greyScaleColor2"
>
NAME{' '}
<Tooltip content="Special characters allowed are Dot (.), Space ( ),Front Slash (/),Back Slash () and Comma (,).">
<Icon
name={Icon.NAMES.info2}
size="small"
color="greyScaleColor2"
/>
</Tooltip>
</Heading>
</Col>
<Col xs={3} sm={3} md={3}>
<Heading
rank
size="extraSmall"
color="greyScaleColor2"
textcase="uppercase"
>
COUNTRY OF OPERATION
</Heading>
</Col>
<Col xs={3} sm={3} md={3}>
<Heading
rank
size="extraSmall"
color="greyScaleColor2"
textcase="uppercase"
>
RELATED PARTY?
</Heading>
</Col>
</HeaderContainer>
{this.state.buyerSupplierList.map((element, index) => (
<Row key={element.id} uniqueId={element.id}>
<Col xs={2} sm={2} md={2}>
<Select
label=""
placeholder="Select"
options={tradePartnerRole}
defaultSelected={selected}
onChange={(e) =>
this.buyerSupplierSubmitHandler(
'buyOrSupp',
e.value,
index,
element.id
)
}
/>
</Col>
<Col xs={3} sm={3} md={3}>
<Description>
<TextfieldContainer>
<Textfield
maxlength={250}
theme={{ container: 'inputOverride' }}
placeholder="Enter Buyer or Supplier Name"
pattern="^[A-Za-z0-9,. /\]*$"
onChange={(e) =>
this.buyerSupplierForDescSubmitHandler(
'nameOfBuyOrSupp',
e.target.value || null,
index,
element.id
)
}
onValidityChange={(state) =>
this.descriptionValidationFlag(state.isValid, element.id)
}
onBlur={this.validationHandler}
onClear={this.validationHandler}
/>
</TextfieldContainer>
</Description>
<Container>
<RecoveryMessage
type="critical"
open={this.state.validFlag && this.state.validFlag.length === 0 ? false : this.state.validFlag[element.id]}
>
<RecoveryMessageContainer>
Unsupported special character detected! Special characters allowed are Dot(.),Space( ),Front Slash(/),Back Slash() and Comma(,).
</RecoveryMessageContainer>
</RecoveryMessage>
</Container>
</Col>
<Col xs={3} sm={3} md={3}>
<Select
label=""
searchable
matchOptions="CONTAINS"
placeholder="Select"
options={countryList}
defaultSelected={selected}
onChange={(e) =>
this.buyerSupplierSubmitHandler(
'buyOrSuppCntryOpr',
e.value,
index,
element.id
)
}
/>
</Col>
<Col xs={2} sm={2} md={2}>
<Select
label=""
placeholder="Select"
options={tradeRelatedParty}
defaultSelected={selected}
onChange={(e) =>
this.buyerSupplierSubmitHandler(
'isBuyOrSuppRelParty',
e.value,
index,
element.id
)
}
/>
</Col>
<Col xs={2} sm={2} md={2}>
<DeleteButton
buttonType="secondary"
iconName="04-close"
data-key={element.id}
key={element.id}
onClick={this.deleteSelectedRecord}
disabled={this.state.buyerSupplierList.length <= 1}
>
DELETE
</DeleteButton>
</Col>
</Row>
))}
<Row>
<Button
buttonType="tertiary"
iconName="38-expand"
onClick={this.appendInvoice}
disabled={flag}
>
ADD NEW ROW
</Button>
</Row>
</Card>
</Col>
</Row>
</div>
);
}
}

BuyerSupplierInformation.propTypes = {
buyerSupplierInfoList: PropTypes.arrayOf(
/**
* Specifies the consumable data structure for component.
*/
PropTypes.shape({
/**
* Specifies the id.
*/
id: PropTypes.number,
/**
* Specifies the role.
*/
buyOrSupp: PropTypes.string,
/**
* Specifies the name.
*/
nameOfBuyOrSupp: PropTypes.string,
/**
* Specifies the operation country.
*/
buyOrSuppCntryOpr: PropTypes.string,
/**
* Specifies related party information.
*/
isBuyOrSuppRelParty: PropTypes.string
})
),
/**
* Specifies available country list.
*/
countryList: PropTypes.array,
updateParentState: PropTypes.func
};

const HeaderContainer = styled(Row)`
padding-top: 15px;
`;

const Description = styled.div`
margin-top: 8px;
`;

const DeleteButton = styled(Button)`
margin-top: 15px;
`;

const StyledBorderLine = styled.hr`
border: none;
padding-top: 10px;
border-top: 1px solid ${colorNames.GreyScaleColor1};
opacity: 0.1;
`;

const TextfieldContainer = styled.div`
.inputOverride input[type='text'] {
height: 38px;
}
`;

export const RecoveryMessageContainer = styled.div`
font-size: 15px;
`;

const Container = styled.div`
font-size: 20px;
`;