Notes

import React, { useEffect } from 'react';
import {
L2Footer,
L2Header,
} from '@highradius/base_components/lib/core/components';
import {
TextField,
Dropdown,
ToggleSwitch,
} from '@highradius/base_components/lib/core/uiElements';
import { Typography } from '@highradius/base_components/lib/core/tokens';
import { Grid , Tooltip } from '@material-ui/core';
import { Close } from '@material-ui/icons';
import { FormattedMessage } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux';
import messages from './messages';
import { useInjectReducer } from 'utils/injectReducer';
import { useInjectSaga } from 'utils/injectSaga';
import { useEditRuleStyles } from './styles';
import { fetchAccountTypeDropdownStart, updateRuleConfigStart } from './actions';
import saga from './saga';
import { getErrorObject, handleErrorValidation, isErrorExist } from 'utils/ErrorValidation';
import { NUMBER_ONLY_REGEX, NUMBER_REGEX } from 'utils/constants';
import reducer from './reducer';
import { selectAccountTypeDropdownState } from './selectors';

const RulesPopup = (props: any) => {
useInjectReducer({ key: 'editRuleDetails', reducer });
useInjectSaga({ key: 'editRuleDetails', saga });
const classes = useEditRuleStyles();
const dispatch = useDispatch();
const data = props?.args?.data;
const ruleName = data?.ruleName;

const intialData = {
status : data?.status,
accountTypeName : data?.acctypesRules?.accountTypeName,
amount : data?.glBalanceRules?.valueRange?.amount,
operator : data?.glBalanceRules?.valueRange?.operator,
currentPeriodStart : data?.glBalanceRules?.periodRange?.currentPeriodStart,
currentPeriodEnd : data?.glBalanceRules?.periodRange?.currentPeriodEnd,
}
const [configPopUp, setConfigPopUp] = React.useState<any>(intialData);
const [disableSave, setDisableSave] = React.useState<any>(true);
const [validationErrorState, setValidationErrorState] = React.useState(
getErrorObject(intialData),
);

const accDropdownData = useSelector(selectAccountTypeDropdownState);

useEffect(() => {
dispatch(
fetchAccountTypeDropdownStart({
url: `/pms/task/client_category?filter=custom`,
apiMethod: 'get',
params: {},
}),
);
}, []);

// const periodDropdown = {[
// {
// value: "current period",
// label: "Current Period"
// },
// {
// "value": "current period-3",
// "label": "Current Period-3"
// }
// ]
// };

const payloadMaker = (ruleName) => {
if (ruleName === 'Change in GL Balance' || ruleName === 'Value of GL Balance') {
return{
...data?.glBalanceRules,
periodRange: {
currentPeriodEnd : configPopUp?.currentPeriodEnd,
currentPeriodStart : configPopUp?.currentPeriodEnd,
name : "range"
},
valueRange :
{
amount : configPopUp?.amount,
name : "amount",
operator : configPopUp?.operator,
}
}
}
else if (ruleName === 'Ignore Account types'){
return {
...data?.acctypesRules,
accountTypeName: configPopUp?.accountTypeName,
}
}
return null;
};

const handleClose = () => {
setConfigPopUp(intialData);
setValidationErrorState(getErrorObject(intialData));
props.uxManager.dispatch(props.uxManager.config.actions.toggleDialog());
};

const getTooltipTitle = (name) => {
switch (name) {
case 'amount':
if (validationErrorState?.[name]?.startWithNumericError) {
return validationErrorState[name].startWithNumericError;
}
break;
default:
break;
}
return '';
};

const handleCustomErrorValidation = (e) => {
const { name, value } = e.target;
let errorObject = validationErrorState?.[name];
switch (name) {
case 'amount':
if (
value.toString().trim().length &&
value.toString().trim().match(NUMBER_REGEX) === null
) {
errorObject = {
...errorObject,
startWithNumericError: (
<FormattedMessage {...messages.validationError} />
),
};
} else {
delete errorObject?.startWithNumericError;
}
break;
default:
break;
}
setValidationErrorState((prev) => ({ ...prev, [name]: errorObject }));
};

const handleChange = (e) => {
if(e.target.name == "accountTypeName"){
let arrayValue = [...e.target.value];
console.log(e,"e");
console.log(arrayValue,"aa");
setConfigPopUp((prev) => ({
...prev,
[e.target.name] : arrayValue,
}));
}
else{
setConfigPopUp((prev) => ({
...prev,
[e.target.name] : e.target.value,
}));
}
console.log("config",configPopUp);
handleCustomErrorValidation(e);
handleErrorValidation(e, setValidationErrorState);
setDisableSave(false);
};
const handleUpdate = () => {
const payload = {

ruleData: {
...data,
acctypesRules:(ruleName=='Ignore Account types')?payloadMaker(ruleName):null,
glBalanceRules: (ruleName!='Ignore Account types')?payloadMaker(ruleName):null,
status: configPopUp?.status,
},
refresh: props?.args?.refresh,
};

dispatch(
updateRuleConfigStart({
url: `/pms/rules/${data?.pkRuleId}/_update`,
apiMethod: 'put',
params: payload,
}),
);
handleClose();
};

const getHeader = () => (
<L2Header
label={`${ruleName}`}
actions={[{ onClick: handleClose, Icon: Close, tooltip: 'Close' }]}
/>
);
const RulesCondition = () => {
if (ruleName === 'Change in GL Balance' || ruleName === 'Value of GL Balance') {
return (
<>
{/* Conditions */}
<div className={classes.conditionFirstRow}>
<Grid className={classes.innerRoot}>
<Typography noWrap variant="body-m-regular">01 {ruleName}</Typography>
</Grid>
<Grid className={classes.innerRoot} item xs={4}>
<Dropdown className={classes.dropvalue}
placeholder="Between"
fullWidth
limitChips={1}
name="between"
mandatory
value="Between"
options = {[
{
"value": "Between",
"label": "Between"
}
]

}
/>
</Grid>
<Grid className={classes.innerRoot} item xs={4}>
<Dropdown className={classes.dropvalue}
placeholder="Current Period"
fullWidth
limitChips={1}
name="currentPeriodStart"
mandatory
value={configPopUp?.currentPeriodStart}
onChange={(_e, _opt, value, name) =>
handleChange({ target: { name, value } })
}
options= {[
{
"value": "current period",
"label": "Current Period"
},
{
"value": "current period-3",
"label": "Current Period-3"
}
]
}

/>
</Grid>
<Grid className={classes.innerRoot} item xs={4}>
<Dropdown className={classes.dropvalue}
placeholder="Current Period-2"
fullWidth
limitChips={1}
name="currentPeriodEnd"
mandatory
value={configPopUp?.currentPeriodEnd}
onChange={(_e, _opt, value, name) =>
handleChange({ target: { name, value } })
}
options= {[
{
"value": "current period",
"label": "Current Period"
},
{
"value": "current period-3",
"label": "Current Period-3"
}
]
}
// options={dropdownData({ disabledName: 'viewStakeHoldersObject' })}
// value={configPopUp?.editStakeHoldersObject}
/>
</Grid>
</div>
{/* Condition2*/}
<div className={classes.conditionFirstRow}>
<Grid className={classes.innerRoot} >
<Typography noWrap variant="body-m-regular">02 {ruleName}</Typography>
</Grid>
<Grid className={classes.condition} item xs={4}>
<Dropdown className={classes.dropvalue}
placeholder="Less than equal to"
fullWidth
align="left"
// limitChips={1}
name="operator"
value={configPopUp?.operator}
onChange={(_e, _opt, value, name) =>
handleChange({ target: { name, value } })
}
mandatory
options = {[
{
"value": "LESS THAN",
"label": "Less than"
},
{
"value": "LESS THAN EQUAL TO",
"label": "Less than equal to"
},
{
"value": "EQUAL",
"label": "equal"
}
]
}
/>
</Grid>
<Grid item xs={4}>
<Tooltip title={getTooltipTitle('amount')}>
<TextField className={classes.dropvalue}
name="amount"
value={configPopUp?.amount}
mandatory
fullWidth
onChange={handleChange}
error={Boolean(Object.keys(validationErrorState.amount).length)}
/>
</Tooltip>
</Grid>
<Grid item xs={4}></Grid>
</div>
<Grid container direction="row" className={classes.mandatory} item xs={12}>
<Typography variant="body-xs-medium" mandatory>All Mandatory fields</Typography>
</Grid>
</>
);
}
else if(ruleName === 'Ignore Account types'){
return (
<>
<Grid container direction="column" className={classes.dropdown} item xs={12}>
{/* Rule Name */}
<Grid className={classes.innerGrid} item xs={12}>
<Dropdown className={classes.dropvalue}
placeholder="Cash"
fullWidth
label={ruleName}
alignment="top-bottom"
limitChips={2}
loading={accDropdownData?.accountType?.loading}
name="accountTypeName"
mandatory
multiple
value = {configPopUp?.accountTypeName}
onChange={(_e, _opt, value, name) =>
handleChange({ target: { name, value } })
}
options={accDropdownData?.accountType?.data.map((items) => ({
value: items?.category,
displayValue: items?.category,
}))}
/>
</Grid>
</Grid>
<Grid container direction="row" className={classes.mandatory} item xs={12}>
<Typography variant="body-xs-medium" mandatory>All Mandatory fields</Typography>
</Grid>
</>
);
}
else if(ruleName === 'Recon Frequency'){
return (
<>
</>
);
}
return null;
};


const getFirstRow = () => (
<div className={classes.firstRow}>

{/* Rule Name */}
<Grid item xs={6}>
<TextField
label="Rule Name"
alignment="top-bottom"
name="rulesName"
fullWidth
value={ruleName}
mandatory
/>
</Grid>
<Grid className={classes.innerRoot} item xs={6}>
<Dropdown
className={classes.dropvalueUp}
placeholder="Edit Status"
label="Status"
alignment="top-bottom"
fullWidth
limitChips={1}
name="status"
mandatory
value={configPopUp?.status}
options={[
{
value: 'Active',
label: 'Active',
},
{
value: 'Inactive',
label: 'Inactive',
},
]}
onChange={(_e, _opt, value, name) =>
handleChange({ target: { name, value } })
}
/>
</Grid>
</div>
);

const getEditRuleForm = () => (

<Grid container
className={classes.contentRoot}
>
{ getFirstRow()}
<Grid item xs={12}>
<Typography variant="body-xl-bold">Condition</Typography>
</Grid>
{RulesCondition()}
{/* </Grid> */}
</Grid>
);

const getFooter = () => (
<L2Footer
align="right"
actions={[
{
variant: 'secondary',
onClick: handleClose,
children: <FormattedMessage {...messages.commonMsgCancel} />,
'data-testid': 'editRuleClose',
},
{
variant: 'primary',
onClick: handleUpdate,
disabled: disableSave || isErrorExist(validationErrorState),
children: <FormattedMessage {...messages.commonMsgSave} />,
'data-testid': 'editRuleSave',
},
]}
/>
);



const getContent = () => <>{getEditRuleForm()}</>;
return (
<div className={classes.dialogRoot}>
{getHeader()}
{getContent()}
{getFooter()}
</div>
);

};
export default RulesPopup;