Notes

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, partnerViewType, partnerTypeOptions, editedPartnerInformation} = createPartner;
const {contacts} = partnerInformationForm;

useEffect(() => {
if (contacts.length === 0) {
addContact();
}
}, []);

const addContact = () => {
contacts.push({type: null, name: null, email: null});
};
const removeContact = index => {
contacts.splice(index, 1);
};
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, i) => {
return (
<div className="contact-details" key={i}>
<TypeAhead
id="contact Type"
placeholder="Partner Type"
showChevronIcon={true}
className="form-wrapper"
clearable={false}
selectOptions={{
isMulti: false,
closeMenuOnSelect: true,
backspaceRemovesValue: true,
options: partnerTypeOptions,
showSelectedValue: true,
hideSelectedOptions: true
}}
value={row.type}
onChange={selected => {
console.log(selected.value, 'selected');
createPartner.updateValueForContacts(i, 'type', selected.value);
if (partnerViewType === 'edit') {
createPartner.updateValueForContacts(i, 'type', {
...editedPartnerInformation,
type: selected.value
});
}
}}
/>
<Input
placeholder="Partner Name"
id="Contact Name"
className="form-wrapper"
disabled={!row.type}
inputProps={{
value: row.name,
onChange: e => {
createPartner.updateValueForContacts(i, 'name', e.target.value);
if (partnerViewType === 'edit') {
createPartner.updateValueForContacts(i, 'name', {
...editedPartnerInformation,
name: value.target.value
});
}
}
}}
/>
<Input
className="form-wrapper"
placeholder="Partner Email"
id="Contact Email"
disabled={!row.type}
inputProps={{
value: row.email,
onChange: e => {
createPartner.updateValueForContacts(i, 'email', e.target.value);
if (partnerViewType === 'edit') {
createPartner.updateValueForContacts(i, 'email', {
...editedPartnerInformation,
email: value.target.value
});
}
}
}}
/>
{contacts.length > 1 && (
<button className="link" onClick={() => removeContact(i)}>
Remove Contact
</button>
)}
</div>
);
})}

<button
className={`link ${!canAddMoreContacts ? 'add-contact' : ''}`}
disabled={!canAddMoreContacts}
onClick={() => addContact()}
>
Add Another Contact
</button>
</div>
);
};

export default observer(ContactInformation);

editedPartnerInformation = {};
updateValueForContacts = (index, key, value) => {
const updatedContacts = [...this.partnerInformationForm.contacts];
updatedContacts[index] = {...updatedContacts[index], [key]: value};
this.partnerInformationForm.contacts = updatedContacts;
};

updatePartnerInformation = ({key, value}) => {
this.partnerInformationForm[key] = value;
};
savePartnerInformation = async () => {
try {
this.isSavingPartnerInfo = true;
let partnerId;
if (this.partnerViewType === 'create') {
// api for create
const stringifyContacts = contacts => contacts.map(contact => JSON.stringify(contact));
const contacts = stringifyContacts(this.partnerInformationForm.contacts);

partnerId = (await api.createPartnerInfo({
...this.partnerInformationForm,
contacts: contacts
})).data;
}

if (this.partnerViewType === 'edit') {
//api for put
await api.updatePartner(this.partnerId, {
...this.editedPartnerInformation,
id: this.partnerId,
version: this.partnerInformation.version
});
}
console.log(partnerId, 'partnerId');

let partnerInformation = (await api.fetchPartnerInformation(
this.partnerViewType === 'create' ? partnerId : this.partnerId
)).data;
console.log(partnerInformation, 'partnerInformation');

runInAction(() => {
if (this.partnerViewType === 'create') {
this.partnerId = partnerId;
}
this.isSavingPartnerInfo = false;
this.partnerViewType = 'read';
this.partnerInformation = partnerInformation;
this.partnerInformationForm = partnerInformation;
this.editedPartnerInformation = {};
});
} catch (err) {
console.log('err', err);
handleError(
err,
err.message ||
`Unable to ${this.partnerViewType === 'create' ? 'save' : 'update'} partner information. Please try again`,
() => {
runInAction(() => {
this.isSavingPartnerInfo = false;
});
}
);
}
};