113 lines
4.6 KiB
TypeScript
113 lines
4.6 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Text, View, ViewStyle } from 'react-native';
|
|
|
|
import {
|
|
IconRecordAccount,
|
|
IconRecordContact,
|
|
IconRecordLead,
|
|
IconRecordOpportunity
|
|
} from '../../../base/icons/svg';
|
|
import { BUTTON_TYPES } from '../../../base/ui/constants.native';
|
|
import { formatAmount } from '../../functions';
|
|
import { ISalesforceData, SalesforceObjectType } from '../../types';
|
|
|
|
import { RecordListItem } from './RecordListItem';
|
|
import styles from './styles';
|
|
|
|
interface IProps {
|
|
onUnlink: (type: SalesforceObjectType, id: string) => void;
|
|
salesforceData: ISalesforceData | null;
|
|
unlinkingId: string | null;
|
|
}
|
|
|
|
/**
|
|
* Component for displaying currently linked Salesforce objects with unlink buttons.
|
|
*
|
|
* @param {IProps} props - Component props.
|
|
* @returns {React.ReactElement}
|
|
*/
|
|
export const CurrentLinksSection = ({ salesforceData, unlinkingId, onUnlink }: IProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
const hasAccount = Boolean(salesforceData?.account);
|
|
const hasLeads = salesforceData?.leads?.length;
|
|
const hasContacts = salesforceData?.contacts?.length;
|
|
const hasDeal = Boolean(salesforceData?.deal);
|
|
const hasAnyLinks = hasAccount || hasLeads || hasContacts || hasDeal;
|
|
|
|
if (!hasAnyLinks) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<View style = { styles.currentLinksSection as ViewStyle }>
|
|
<Text style = { styles.sectionTitle }>{t('dialog.currentLinks')}</Text>
|
|
|
|
{salesforceData?.account && (
|
|
<RecordListItem
|
|
actionLabelKey = 'dialog.unlink'
|
|
actionType = { BUTTON_TYPES.TERTIARY }
|
|
compact = { true }
|
|
disabled = { unlinkingId !== null }
|
|
icon = { IconRecordAccount }
|
|
isLoading = { unlinkingId === salesforceData.account.accountId }
|
|
metadata = { t('record.type.account') }
|
|
name = { salesforceData.account.accountName }
|
|
/* eslint-disable-next-line react/jsx-no-bind */
|
|
onAction = { () => onUnlink('Account', salesforceData.account!.accountId) } />
|
|
)}
|
|
|
|
{salesforceData?.leads?.map(lead => (
|
|
<RecordListItem
|
|
actionLabelKey = 'dialog.unlink'
|
|
actionType = { BUTTON_TYPES.TERTIARY }
|
|
compact = { true }
|
|
disabled = { unlinkingId !== null }
|
|
icon = { IconRecordLead }
|
|
isLoading = { unlinkingId === lead.leadId }
|
|
key = { lead.leadId }
|
|
metadata = { `${t('record.type.lead')}${lead.leadCompany ? ` \u2022 ${lead.leadCompany}` : ''}` }
|
|
name = { lead.leadName }
|
|
/* eslint-disable-next-line react/jsx-no-bind */
|
|
onAction = { () => onUnlink('Lead', lead.leadId) } />
|
|
))}
|
|
|
|
{salesforceData?.contacts?.map(contact => (
|
|
<RecordListItem
|
|
actionLabelKey = 'dialog.unlink'
|
|
actionType = { BUTTON_TYPES.TERTIARY }
|
|
compact = { true }
|
|
disabled = { unlinkingId !== null }
|
|
icon = { IconRecordContact }
|
|
isLoading = { unlinkingId === contact.contactId }
|
|
key = { contact.contactId }
|
|
metadata = { t('record.type.contact') }
|
|
name = { contact.contactName }
|
|
/* eslint-disable-next-line react/jsx-no-bind */
|
|
onAction = { () => onUnlink('Contact', contact.contactId) } />
|
|
))}
|
|
|
|
{salesforceData?.deal && (
|
|
<RecordListItem
|
|
actionLabelKey = 'dialog.unlink'
|
|
actionType = { BUTTON_TYPES.TERTIARY }
|
|
compact = { true }
|
|
disabled = { unlinkingId !== null }
|
|
icon = { IconRecordOpportunity }
|
|
isLoading = { unlinkingId === salesforceData.deal.opportunityId }
|
|
metadata = { `${salesforceData.deal.opportunityStage}${
|
|
salesforceData.deal.amount !== undefined
|
|
? ` \u2022 $${formatAmount(salesforceData.deal.amount)}`
|
|
: ''
|
|
}` }
|
|
name = { salesforceData.deal.opportunityName }
|
|
/* eslint-disable-next-line react/jsx-no-bind */
|
|
onAction = { () => onUnlink('Opportunity', salesforceData.deal!.opportunityId) } />
|
|
)}
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default CurrentLinksSection;
|