Notes

import React from 'react';
import {observer} from 'mobx-react';
import Accordion from './Accordion';
import NavTabs from '../components/NavTabs';
import {StoreContext} from '../utils/StoreContext';
import CreateEndpointsAccordion from './CreateEndpointsAccordion';
import checkFormFieldsHasData from '../utils/checkFormFieldsHasData';
import styles from '../sass/components/create-endpoints.scss';
import isEmpty from 'lodash-es/isEmpty';
//import {toJS} from 'mobx';

export const CreateEndpoints = () => {
const AccordionHeader = props => {
const {createPartner} = React.useContext(StoreContext);
const {
endpointsForFeedTypes,
toggleUnsavedWarningModal,
isSavingEndpoints,
isIncludeHeaderValueValidation,
endpointsViewType,
editedEndpoint
} = createPartner;
const getMandatoryFields = endpoint => {
let mandatoryFields = {};
const {endpointName, channel, enabled, endpointUri, idmsA3Enabled, appId} = endpoint;
mandatoryFields = {endpointName, channel, enabled, endpointUri, idmsA3Enabled};
if (!!idmsA3Enabled) {
mandatoryFields = {...mandatoryFields, appId};
}
return mandatoryFields;
};
const isAllFeedEndpointFieldsHasValue = Object.keys(endpointsForFeedTypes).every(feedType => {
return endpointsForFeedTypes[feedType].every(endpoint =>
checkFormFieldsHasData(getMandatoryFields(endpoint), true)
);
});

const isSomeEndpointFieldsHasValue = Object.keys(endpointsForFeedTypes).every(feedType => {
return endpointsForFeedTypes[feedType].every(endpoint =>
checkFormFieldsHasData(
{
...getMandatoryFields(endpoint),
includeHeaders: endpoint.includeHeaders,
excludeHeaders: endpoint.excludeHeaders
},
false,
['idmsA3Enabled']
)
);
});

const isNewEndpointsCreateValid = Object.keys(endpointsForFeedTypes).every(feedType => {
return endpointsForFeedTypes[feedType]
.filter(item => !item.id)
.every(endpoint => checkFormFieldsHasData(getMandatoryFields(endpoint), true));
});

const isFieldEditValid = Object.keys(editedEndpoint || {}).every(feedType => {
return editedEndpoint[feedType].filter(item => item?.id).every(endpoint => {
let formData = {};
formData = endpointsForFeedTypes[feedType]?.find(item => item.id === endpoint.id);
return checkFormFieldsHasData(getMandatoryFields(formData), true);
});
});
const isAllEditsValid = !isEmpty(editedEndpoint) && isFieldEditValid;

console.log(isAllFeedEndpointFieldsHasValue, 'isAllFeedEndpointFieldsHasValue');

const disableSave = !(
(endpointsViewType === 'create' && isAllFeedEndpointFieldsHasValue) ||
(endpointsViewType === 'edit' && isAllEditsValid && isNewEndpointsCreateValid)
);
const disableCancel = !(
(endpointsViewType === 'create' && isSomeEndpointFieldsHasValue) ||
(endpointsViewType === 'edit' && !isEmpty(editedEndpoint))
);

return (
<div className="review-header-container">
<span className="global-header-large">{props?.data?.header}</span>
<div className="link-action-container">
<button
onClick={() => {
toggleUnsavedWarningModal('endpoint');
}}
className="button button-block button-elevated button-secondary"
disabled={disableCancel}
>
Cancel
</button>
<button
className="button button-block button-elevated"
disabled={disableSave || isSavingEndpoints || isIncludeHeaderValueValidation()}
onClick={() => {
createPartner.saveEndpoints();
}}
>
{isSavingEndpoints ? 'Saving...' : 'Save'}
</button>
</div>
</div>
);
};
const InnerDetails = () => {
const {createPartner} = React.useContext(StoreContext);

const {
endpointsForFeedTypes,
addEndpointForFeedType,
subscriptionFeedTypes,
createEndactiveTab,
availableFeedTypes,
isSavingEndpoints,
subscriptionDetails
} = createPartner;

const getMandatoryFields = endpoint => {
let mandatoryFields = {};
const {endpointName, channel, enabled, endpointUri, idmsA3Enabled, appId} = endpoint;
mandatoryFields = {endpointName, channel, enabled, endpointUri, idmsA3Enabled};
if (!!idmsA3Enabled) {
mandatoryFields = {...mandatoryFields, appId};
}
return mandatoryFields;
};
// checks for 1st endpoint is having all manadatory fields
const disableAdd = !(
endpointsForFeedTypes[createEndactiveTab]?.length >= 1 &&
endpointsForFeedTypes[createEndactiveTab].every(endpoint =>
checkFormFieldsHasData(getMandatoryFields(endpoint), true)
)
);

const tabOrder = ['PD', 'CPF', 'CH', 'DH'];
const sortedavailableFeedTypes = [...availableFeedTypes].sort((a, b) => {
const indexA = tabOrder.indexOf(a.name);
const indexB = tabOrder.indexOf(b.name);
if (indexA === -1) return 1;
if (indexB === -1) return 1;
return indexA - indexB;
});

//const hasSubscriptionFeedTypes = !isEmpty(subscriptionFeedTypes);

const hasSubscriptionFeedTypes = subscriptionFeedTypes
? isEmpty(subscriptionFeedTypes) || Object.values(subscriptionFeedTypes).some(value => value)
: '';

const disabledPdTab = isEmpty(subscriptionDetails);

if (!endpointsForFeedTypes['PD'] || !endpointsForFeedTypes['PD'].length) {
addEndpointForFeedType('PD');
}

return (
<div>
{isSavingEndpoints ? (
<div className="loader" />
) : !hasSubscriptionFeedTypes && disabledPdTab ? (
<div className="endpoints-container">
<p>There are no endpoints until the subscription section atleaset one feed type details are entered</p>
</div>
) : (
<div className="endpoints-container">
<NavTabs
active={createEndactiveTab}
navs={[
...(!disabledPdTab ? [{label: 'Part (PD)', value: 'PD'}] : []),
...sortedavailableFeedTypes
.filter(item => subscriptionFeedTypes[item.name])
.map(item => ({label: `${item.displayName} (${item.name})`, value: item.name}))
]}
onClick={(e, name) => {
createPartner.updateValue({key: 'createEndactiveTab', value: name});
}}
/>
<div className="endpoints-accordions">
{endpointsForFeedTypes[createEndactiveTab]?.map((endpoint, index) => {
return (
<CreateEndpointsAccordion
key={`endpoint-item-${index}`}
index={index}
endpoint={endpoint}
feedType={createEndactiveTab}
/>
);
})}
</div>
<button
className={`link ${disableAdd ? 'button-disabled' : ''}`}
onClick={() => {
addEndpointForFeedType(createEndactiveTab);
}}
disabled={disableAdd}
>
Add Another Endpoint
</button>
</div>
)}
</div>
);
};
return (
<div className={styles.createEndpoint}>
<Accordion
template={[{header: 'Endpoints'}]}
Inner={observer(AccordionHeader)}
showIcon={true}
InnerDetails={observer(InnerDetails)}
initialExpanded={true}
/>
</div>
);
};
export default observer(CreateEndpoints);