Notes

removeEndpointForFeedType = ({index, feedType}) => {
const updatedEndpoints = this.endpointsForFeedTypes[feedType].filter(
(endpoint, endpointIndex) => endpointIndex !== index
);
this.endpointsForFeedTypes = {
...this.endpointsForFeedTypes,
[feedType]: updatedEndpoints.length === 0 ? [this.endpointForm] : updatedEndpoints
};
};

import React from 'react';
import {observer} from 'mobx-react';
import ActionsMenu from '@aosprodsys/brucke-ui-core/dist/es/components/ActionsMenuV2';
import Exclamation from '@apple/symbols/medium/exclamationmark.circle.fill.svg';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import Input from '@aosprodsys/brucke-ui-core/dist/es/components/Input';
import Radio from '@aosprodsys/brucke-ui-core/dist/es/components/Radio';
import Modal from '@aosprodsys/brucke-ui-core/dist/es/components/Modal';
import {StoreContext} from '../utils/StoreContext';
import checkFormFieldsHasData from '../utils/checkFormFieldsHasData';
import Accordion from './Accordion';
import IncludeHeaders from './IncludeHeaders';
import {ROLES, hasPermissions} from '../utils/hasPermissions';
import styles from '../sass/components/create-endpoint-accordion.scss';

export const CreateEndpointsAccordion = props => {
const {endpoint, index, feedType} = props;
const {createPartner} = React.useContext(StoreContext);
const {
updateEndpointsForFeedTypes,
removeEndpointForFeedType,
channelTypes,
updateEditedEndpoint,
endpointsViewType,
partnerInformation,
endpointsForFeedTypes,
toggleDeleteEndpointModal,
isDeleteEndpointModalOpen,
isSavingEndpoints,
partnerInformationForm,
subscriptionDetails,
setEndpointIdForDeletion,
setEndpointNameForDeletion
} = createPartner;

let internalApple = '';
if (partnerInformation?.id) {
internalApple = partnerInformation.internalApple;
} else {
internalApple = partnerInformationForm.internalApple;
}
let partnerKey = '';
if (partnerInformation?.id) {
partnerKey = partnerInformation.name;
} else {
partnerKey = partnerInformationForm.name;
}
const {endpointName, channel, enabled, endpointUri, includeHeaders, excludeHeaders, idmsA3Enabled, appId} = endpoint;
let mandatoryFields = {endpointName, channel, enabled, endpointUri, idmsA3Enabled};
if (!!idmsA3Enabled) {
mandatoryFields = {...mandatoryFields, appId};
}
const disableRemoveButton = !(
endpointsForFeedTypes[feedType]?.length >= 1 && checkFormFieldsHasData(mandatoryFields)
);
const disableFields = !partnerInformation?.id || !subscriptionDetails?.length;
const AccordionHeader = props => {
return (
<div className="review-header-container">
<span className="global-header-large">{props?.data?.header}</span>
{hasPermissions([ROLES.Admin, ROLES.Write]) && (
<button
className={`link form-wrapper ${disableRemoveButton ? 'button-disabled' : ''}`}
onClick={() => {
toggleDeleteEndpointModal(endpoint.id, endpointName);
}}
disabled={disableRemoveButton}
>
Remove Endpoint
</button>
)}
</div>
);
};
const InnerDetails = props => {
const selectedChannelType = channelTypes.find(item => item.id === channel?.id);
return (
<div className="template">
<div className="global-body-large-bold form-wrapper">Delivery</div>
<TypeAhead
className="deliver-form-wrapper"
id="Delivery"
placeholder="Delivery"
showChevronIcon={true}
clearable={false}
selectOptions={{
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: channelTypes,
showSelectedValue: true,
hideSelectedOptions: true,
isDisabled: disableFields
}}
value={selectedChannelType}
onChange={selects => {
let selectedValue = !selects ? null : {...selects};
updateEndpointsForFeedTypes({index, feedType, key: 'channel', value: selectedValue});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({endpointsForFeedTypesIndex: index, feedType, key: 'channel', value: selectedValue});
}
}}
/>
<div className="global-body-large-bold form-wrapper">Endpoint Name</div>
<div className="end-point-name">
<Input
id="name"
className="form-wrapper"
placeholder="Partner Key"
inputProps={{
value: partnerKey,
debounceTimeout: 700,
disabled: true
}}
/>
&nbsp;&nbsp;-
<Input
placeholder="Endpoint Name"
id="Endpoint Name"
className="form-wrapper"
inputProps={{
debounceTimeout: 1100,
value: endpointName,
disabled: disableFields,
onChange: e => {
updateEndpointsForFeedTypes({index, feedType, key: 'endpointName', value: e.target.value});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({
endpointsForFeedTypesIndex: index,
feedType,
key: 'endpointName',
value: e.target.value
});
}
}
}}
/>
</div>
<div className="global-body-large-bold form-wrapper">Endpoint Status</div>
<div className="form-wrapper">
<Radio
{...{
inputProps: {
name: `enabled-${index}`,
checked: enabled === true,
value: true,
disabled: disableFields,
onChange: () => {
updateEndpointsForFeedTypes({index, feedType, key: 'enabled', value: true});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({endpointsForFeedTypesIndex: index, feedType, key: 'enabled', value: true});
}
}
},
label: 'On'
}}
/>
<Radio
{...{
inputProps: {
name: `enabled-${index}`,
checked: enabled === false,
disabled: disableFields,
value: false,
onChange: () => {
updateEndpointsForFeedTypes({index, feedType, key: 'enabled', value: false});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({endpointsForFeedTypesIndex: index, feedType, key: 'enabled', value: false});
}
}
},
label: 'Off'
}}
/>
</div>
<div className="global-body-large-bold form-wrapper">URI</div>
<Input
className="endpoint-name-wrapper"
placeholder="Enter URI"
id="ExcludeHeaders"
inputProps={{
debounceTimeout: 1100,
value: endpointUri,
disabled: disableFields,
onChange: e => {
updateEndpointsForFeedTypes({index, feedType, key: 'endpointUri', value: e.target.value});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({
endpointsForFeedTypesIndex: index,
feedType,
key: 'endpointUri',
value: e.target.value
});
}
}
}}
/>
<div className="global-body-large-bold form-wrapper">Include Headers</div>
<IncludeHeaders
rows={Object.keys(includeHeaders || {}).map(item => {
return {keyItem: item, valueItem: includeHeaders[`${item}`]};
})}
disabled={disableFields}
hideLabels={true}
keyInputPlaceholder={'Enter Key'}
valueInputPlaceholder={'Enter Value'}
customAddButtonRenderer={handleAddNew => (
<div>
<span className="add-header" onClick={handleAddNew}>
<span>Add Another Header</span>
</span>
</div>
)}
onChange={rows => {
let formatValue = {};
(rows || []).forEach(element => {
formatValue[element.keyItem] = element.valueItem;
});
updateEndpointsForFeedTypes({index, feedType, key: 'includeHeaders', value: formatValue});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({
endpointsForFeedTypesIndex: index,
feedType,
key: 'includeHeaders',
value: formatValue
});
}
}}
/>
<div className="form-group">
<div className="global-body-large-bold exclude-header-container">
Exclude Headers
<ActionsMenu
title={() => <Exclamation desiredFontSize={9} className="exclude-headers-info-icon" />}
arrowStyle={{display: 'none'}}
placement={'right'}
position={'right'}
includeArrow={false}
offsetX={-20}
offsetY={2}
hover={true}
>
<span
className="global-body"
onClick={e => {
e.preventDefault();
e.stopPropagation();
}}
>
Enter as a comma delimited list (e.g. Host, Host 1, Host 2’).
</span>
</ActionsMenu>
</div>
<Input
className="endpoint-name-wrapper form-wrapper"
placeholder="Enter Headers to Exclude (Comma Delimited)"
id="ExcludeHeaders"
inputProps={{
value:
Array.isArray(excludeHeaders) && excludeHeaders.length ? excludeHeaders.join(', ') : excludeHeaders,
debounceTimeout: 1100,
disabled: disableFields,
onChange: e => {
updateEndpointsForFeedTypes({index, feedType, key: 'excludeHeaders', value: e.target.value});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({
endpointsForFeedTypesIndex: index,
feedType,
key: 'excludeHeaders',
value: e.target.value
});
}
}
}}
/>
</div>
<div className="global-body-large-bold form-wrapper">IDMS A3 Authorised</div>
<div className="form-wrapper">
<Radio
{...{
inputProps: {
name: `idmsA3Enabled-${index}`,
checked: idmsA3Enabled === true,
disabled: disableFields || !(internalApple === true),
value: true,
onChange: () => {
updateEndpointsForFeedTypes({index, feedType, key: 'idmsA3Enabled', value: true});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({
endpointsForFeedTypesIndex: index,
feedType,
key: 'idmsA3Enabled',
value: true
});
}
}
},
label: 'Yes'
}}
/>
<Radio
{...{
inputProps: {
name: `idmsA3Enabled-${index}`,
checked: idmsA3Enabled === false,
value: false,
disabled: disableFields || !(internalApple === true),
onChange: () => {
updateEndpointsForFeedTypes({index, feedType, key: 'idmsA3Enabled', value: false});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({
endpointsForFeedTypesIndex: index,
feedType,
key: 'idmsA3Enabled',
value: false
});
}
}
},
label: 'No'
}}
/>
</div>
{idmsA3Enabled && (
<>
<div className="global-body-large-bold form-wrapper">App ID</div>
<Input
className="endpoint-name-wrapper"
placeholder="Enter App ID"
id="app-id"
inputProps={{
debounceTimeout: 1100,
value: appId,
type: 'number',
onChange: e => {
updateEndpointsForFeedTypes({index, feedType, key: 'appId', value: e.target.value});
if (endpointsViewType === 'edit') {
updateEditedEndpoint({
endpointsForFeedTypesIndex: index,
feedType,
key: 'appId',
value: e.target.value
});
}
}
}}
/>
</>
)}
</div>
);
};
return (
<div className={styles.createEndpointAccordion}>
<Accordion
template={[{header: `Endpoint ${index + 1}`}]}
Inner={AccordionHeader}
showIcon={false}
InnerDetails={InnerDetails}
initialExpanded={true}
expandButton={() => <button className="link">Hide Details</button>}
collapseButton={() => <button className="link"> Show Details</button>}
/>
<Modal
{...{
className: `${styles.confirmModal} confirm-modal`,
show: isDeleteEndpointModalOpen,
isSaving: isSavingEndpoints,
onHide: () => {
toggleDeleteEndpointModal();
},
modalType: 'warning',
onConfirm: () => {
if (setEndpointIdForDeletion) {
createPartner.deleteEndpoint(setEndpointIdForDeletion, setEndpointNameForDeletion);
} else {
removeEndpointForFeedType({index, feedType});
}
toggleDeleteEndpointModal();
}
}}
>
<>
Endpoint <h4>{`${setEndpointNameForDeletion}`}</h4> is going to be deleted.
<br />
Do you want to continue?
<>
<br />
<br />
Note: This action can not be undone
</>
</>
</Modal>
</div>
);
};
export default observer(CreateEndpointsAccordion);