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, partnerTypeOptions, updateValueForContacts} = 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]);
const emailValidation = contacts.map(contact => /^[a-zA-Z0-9_-.][email protected]$/g.test(contact.email));

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}
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);
import React from 'react';
import {observer} from 'mobx-react';
import Accordion from './Accordion';
import {StoreContext} from '../utils/StoreContext';
import Radio from '@aosprodsys/brucke-ui-core/dist/es/components/Radio';
import Input from '@aosprodsys/brucke-ui-core/dist/es/components/Input';
import ActionsMenu from '@aosprodsys/brucke-ui-core/dist/es/components/ActionsMenuV2';
import ContactInformation from './ContactInformation';
import Exclamation from '@apple/symbols/medium/exclamationmark.circle.fill.svg';
import styles from '../sass/components/create-partner-information.scss';
import checkFormFieldsHasData from '../utils/checkFormFieldsHasData';
import isEmpty from 'lodash-es/isEmpty';

export const CreatePartnerInformation = () => {
const {createPartner} = React.useContext(StoreContext);
const {
partnerViewType,
partnerInformationForm,
editedPartnerInformation,
partnerEndpointDetails,
isSavingPartnerInfo,
toggleUnsavedWarningModal
} = createPartner;
const {enabled, displayName, name, internalApple, appleRetail, contacts} = partnerInformationForm;
const disableSave = !(
(partnerViewType === 'create' &&
checkFormFieldsHasData(partnerInformationForm, true) &&
checkFormFieldsHasData(contacts?.[0] || {}, true)) ||
(partnerViewType === 'edit' &&
!isEmpty(editedPartnerInformation) &&
checkFormFieldsHasData(partnerInformationForm, true))
);
const disableCancel = !(
(partnerViewType === 'create' &&
(checkFormFieldsHasData(partnerInformationForm, false, ['enabled', 'internalApple', 'appleRetail', 'contacts']) ||
checkFormFieldsHasData(contacts?.[0] || {}, true))) ||
(partnerViewType === 'edit' && !isEmpty(editedPartnerInformation))
);
const validatePartnerKey = name ? /[^a-zA-Z0-9]/.test(name) : false;
const emailValidation = contacts.map(contact => /^[a-zA-Z0-9_-.][email protected]$/g.test(contact.email));

const AccordionHeader = props => {
return (
<div className="review-header-container">
<span className="global-header-large">{props?.data?.header}</span>
<div className="link-action-container">
<button
disabled={disableCancel}
onClick={() => {
toggleUnsavedWarningModal('partner');
}}
className="button button-block button-elevated button-secondary"
>
Cancel
</button>
<button
className="button button-block button-elevated"
onClick={() => {
createPartner.savePartnerInformation();
}}
disabled={disableSave || validatePartnerKey || emailValidation.includes(false)}
>
Save
</button>
</div>
</div>
);
};

const InnerDetails = props => {
return (
<div>
{isSavingPartnerInfo ? (
<div className="loader" />
) : (
<div className="form-group">
<div className="global-body-large-bold form-wrapper">Status</div>
<div className="form-wrapper">
<Radio
{...{
inputProps: {
name: 'enabled',
checked: enabled === true,
onChange: () => {
createPartner.updatePartnerInformation({key: 'enabled', value: true});
if (partnerViewType === 'edit')
createPartner.updateValue({
key: 'editedPartnerInformation',
value: {...editedPartnerInformation, enabled: true}
});
},
disabled: partnerEndpointDetails.length === 0
},
label: 'Active'
}}
/>
<Radio
{...{
inputProps: {
name: 'enabled',
checked: partnerViewType === 'create' ? true : enabled === false,
onChange: () => {
createPartner.updatePartnerInformation({key: 'enabled', value: false});
if (partnerViewType === 'edit')
createPartner.updateValue({
key: 'editedPartnerInformation',
value: {...editedPartnerInformation, enabled: false}
});
},
disabled: partnerEndpointDetails.length === 0
},
label: 'Inactive'
}}
/>
</div>
<div className="form-group">
<div className="global-body-large-bold form-wrapper">Partner Name</div>
<Input
id="Display Name"
className="form-wrapper"
placeholder={'Partner Name'}
inputProps={{
value: displayName,
debounceTimeout: 700,
onChange: e => {
createPartner.updatePartnerInformation({key: 'displayName', value: e.target.value});
if (partnerViewType === 'edit')
createPartner.updateValue({
key: 'editedPartnerInformation',
value: {...editedPartnerInformation, displayName: e.target.value}
});
}
}}
/>
</div>
<div className="form-group">
<span className="global-body-large-bold form-wrapper partner-key-container">
Partner Key
<ActionsMenu
title={() => <Exclamation desiredFontSize={9} className="feed-type-info-icon" />}
arrowStyle={{display: 'none'}}
placement={'right'}
position={'right'}
includeArrow={false}
offsetX={-20}
offsetY={4}
hover={true}
>
<span
className="global-body"
onClick={e => {
e.preventDefault();
e.stopPropagation();
}}
>
Note: Upon Partner Creation/Save, Partner Key will no longer be editable.
</span>
</ActionsMenu>
</span>
<Input
id="name"
className="form-wrapper"
placeholder="Partner Key"
errorMessage={name && validatePartnerKey && 'Special charecters and space not allowed'}
inputProps={{
value: name,
debounceTimeout: 700,
onChange: e => {
createPartner.updatePartnerInformation({key: 'name', value: e.target.value});
},
disabled: partnerViewType === 'edit'
}}
/>
</div>
<div className="form-group">
<span className="global-body-large-bold form-wrapper">Partner Contacts</span>
<ContactInformation />
</div>
<div className="form-group">
<div className="global-body-large-bold form-wrapper">Apple External</div>
<div className="radio-container form-wrapper">
<Radio
{...{
inputProps: {
name: 'internalApple',
checked: internalApple === false, // apple external is !internalApple
value: true,
onChange: () => {
createPartner.updatePartnerInformation({key: 'internalApple', value: false});
if (partnerViewType === 'edit')
createPartner.updateValue({
key: 'editedPartnerInformation',
value: {...editedPartnerInformation, internalApple: false}
});
}
},
label: 'Yes'
}}
/>
<Radio
{...{
inputProps: {
name: 'internalApple',
checked: internalApple === true,
value: false,
onChange: () => {
createPartner.updatePartnerInformation({key: 'internalApple', value: true});
if (partnerViewType === 'edit')
createPartner.updateValue({
key: 'editedPartnerInformation',
value: {...editedPartnerInformation, internalApple: true}
});
}
},
label: 'No'
}}
/>
</div>
<div className="form-group">
<div className="global-body-large-bold form-wrapper">Apple Retail</div>
<div className="radio-container form-wrapper">
<Radio
{...{
inputProps: {
name: 'appleRetail',
checked: appleRetail === true,
value: true,
onChange: () => {
createPartner.updatePartnerInformation({key: 'appleRetail', value: true});
if (partnerViewType === 'edit')
createPartner.updateValue({
key: 'editedPartnerInformation',
value: {...editedPartnerInformation, appleRetail: true}
});
}
},
label: 'Yes'
}}
/>
<Radio
{...{
inputProps: {
name: 'appleRetail',
checked: appleRetail === false,
value: false,
onChange: () => {
createPartner.updatePartnerInformation({key: 'appleRetail', value: false});
if (partnerViewType === 'edit')
createPartner.updateValue({
key: 'editedPartnerInformation',
value: {...editedPartnerInformation, appleRetail: false}
});
}
},
label: 'No'
}}
/>
</div>
</div>
</div>
</div>
)}
</div>
);
};

return (
<div className={styles.createPartner}>
<Accordion
template={[{header: 'Partner Information'}]}
Inner={AccordionHeader}
showIcon={true}
InnerDetails={InnerDetails}
initialExpanded={true}
/>
</div>
);
};

export default observer(CreatePartnerInformation);