Notes

internalAndExternalValidation = index => {
const contact = this.partnerInformationForm.contacts[index];
if (!contact) return false;
const hasExternal = contact.type === 'External';
const hasInternal = contact.type === 'Internal';
const hasInternalAndExternal = hasExternal && hasInternal;
const isValid = this.partnerInformationForm.internalApple === false && !hasInternalAndExternal;
return isValid;
};

areAllInternalAndExternalValidation = () => {
return this.partnerInformationForm.contacts.every((contact, index) => {
const isValid = this.internalAndExternalValidation(index);
return isValid;
});
};

isValidContactExternalValidation = index => {
const contact = this.partnerInformationForm.contacts[index];
if (!contact) return false;
const isValid = this.partnerInformationForm.internalApple === true && contact.type === 'External';
return isValid;
};

areAllContactExternalValidation = () => {
return this.partnerInformationForm.contacts.every((contact, index) => {
const isValid = this.isValidContactExternalValidation(index);
return isValid;
});
};
import React, {useEffect} from 'react';
import {observer} from 'mobx-react';
import {StoreContext} from '../utils/StoreContext';
import TypeAhead from '@aosprodsys/brucke-ui-core/dist/es/components/TypeAhead';
import Input from '@aosprodsys/brucke-ui-core/dist/es/components/Input';
import styles from '../sass/components/contact-information.scss';

export const ContactInformation = () => {
const {createPartner} = React.useContext(StoreContext);
const {
partnerInformationForm,
partnerTypeOptions,
updateValueForContacts,
addContact,
removeContact,
emailValidation,
internalAndExternalValidation,
isValidContactExternalValidation
} = createPartner;
const {contacts} = partnerInformationForm;
useEffect(() => {
if (contacts.length === 0) {
addContact();
}
}, []);

const isContactComplete = contact => {
return contact.type && contact.name && contact.email;
};
const canAddMoreContacts = contacts.length === 0 || isContactComplete(contacts[contacts.length - 1]);

return (
<div className={styles.contactInformation}>
{contacts.length > 0 &&
contacts.map((row, index) => {
const selectedPartnerType = partnerTypeOptions.find(option => option.value === row.type) || null;
return (
<div className="contact-details" key={index}>
<TypeAhead
id="contact Type"
placeholder="Partner Type"
showChevronIcon={true}
errorMessage={
(internalAndExternalValidation(index) &&
'Both External and Internal Contact Type must be avilable for External Partners') ||
(isValidContactExternalValidation(index) &&
'User should be able to add external contact info only for External Partners selects as Yes')
}
className="form-wrapper"
clearable={false}
selectOptions={{
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: partnerTypeOptions,
showSelectedValue: true,
hideSelectedOptions: true
}}
value={selectedPartnerType}
onChange={selected => {
updateValueForContacts(index, 'type', selected.value);
}}
/>
<Input
placeholder="Partner Name"
id="Contact Name"
className="form-wrapper"
disabled={!row.type}
inputProps={{
value: row.name,
disabled: !row.type,
debounceTimeout: 700,
onChange: e => {
updateValueForContacts(index, 'name', e.target.value);
}
}}
/>
<Input
className="form-wrapper"
placeholder="Partner Email"
id="Contact Email"
errorMessage={row.email && !emailValidation(index) && 'Please enter valid email'}
disabled={!row.type}
inputProps={{
value: row.email,
disabled: !row.type,
debounceTimeout: 700,
onChange: e => {
updateValueForContacts(index, 'email', e.target.value);
}
}}
/>
{contacts.length > 1 && (
<button className="link" onClick={() => removeContact(index)}>
Remove Contact
</button>
)}
</div>
);
})}
<button
className={`link ${!canAddMoreContacts ? 'add-contact' : ''}`}
disabled={!canAddMoreContacts}
onClick={() => {
addContact();
}}
>
Add Another Contact
</button>
</div>
);
};
export default observer(ContactInformation);
<button
className="button button-block button-elevated"
onClick={() => {
createPartner.savePartnerInformation();
}}
disabled={
disableSave ||
validatePartnerKey ||
!isEmailValid ||
!isAreAllInternalAndExternalValidation ||
isAreAllContactExternalValidation
}
>
Save
</button>