upstream-jitsi-meet/react/features/salesforce/components/native/SearchResultsSection.tsx

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 {
    IAccountMatch,
    IContactMatch,
    ILeadMatch,
    IOpportunityMatch,
    ISearchResults,
    SalesforceObjectType
} from '../../types';

import { RecordListItem } from './RecordListItem';
import styles from './styles';

interface IProps {
    linkingId: string | null;
    onLink: (type: SalesforceObjectType, data: IAccountMatch | ILeadMatch | IContactMatch | IOpportunityMatch) => void;
    results: ISearchResults;
}

/**
 * Component for displaying Salesforce search results with link buttons.
 *
 * @param {IProps} props - Component props.
 * @returns {React.ReactElement}
 */
export const SearchResultsSection = ({ results, linkingId, onLink }: IProps) => {
    const { t } = useTranslation();

    const hasResults = results.accounts.length
        || results.leads.length
        || results.contacts.length
        || results.opportunities.length;

    if (!hasResults) {
        return (
            <View style = { styles.noResultsContainer as ViewStyle }>
                <Text style = { styles.noResultsText }>
                    {t('dialog.searchResultsNotFound')}
                </Text>
            </View>
        );
    }

    return (
        <View>
            {!!results.accounts.length && (
                <>
                    <Text style = { styles.groupTitle }>{t('record.type.account')}</Text>
                    {results.accounts.map(account => (
                        <RecordListItem
                            actionLabelKey = 'dialog.link'
                            actionType = { BUTTON_TYPES.PRIMARY }
                            disabled = { linkingId !== null }
                            icon = { IconRecordAccount }
                            isLoading = { linkingId === account.accountId }
                            key = { account.accountId }
                            name = { account.accountName }
                            /* eslint-disable-next-line react/jsx-no-bind */
                            onAction = { () => onLink('Account', account) } />
                    ))}
                </>
            )}

            {!!results.leads.length && (
                <>
                    <Text style = { styles.groupTitle }>{t('record.type.lead')}</Text>
                    {results.leads.map(lead => (
                        <RecordListItem
                            actionLabelKey = 'dialog.link'
                            actionType = { BUTTON_TYPES.PRIMARY }
                            disabled = { linkingId !== null }
                            icon = { IconRecordLead }
                            isLoading = { linkingId === lead.leadId }
                            key = { lead.leadId }
                            metadata = { lead.leadCompany }
                            name = { lead.leadName }
                            /* eslint-disable-next-line react/jsx-no-bind */
                            onAction = { () => onLink('Lead', lead) } />
                    ))}
                </>
            )}

            {!!results.contacts.length && (
                <>
                    <Text style = { styles.groupTitle }>{t('record.type.contact')}</Text>
                    {results.contacts.map(contact => (
                        <RecordListItem
                            actionLabelKey = 'dialog.link'
                            actionType = { BUTTON_TYPES.PRIMARY }
                            disabled = { linkingId !== null }
                            icon = { IconRecordContact }
                            isLoading = { linkingId === contact.contactId }
                            key = { contact.contactId }
                            metadata = { contact.contactEmail }
                            name = { contact.contactName }
                            /* eslint-disable-next-line react/jsx-no-bind */
                            onAction = { () => onLink('Contact', contact) } />
                    ))}
                </>
            )}

            {!!results.opportunities.length && (
                <>
                    <Text style = { styles.groupTitle }>{t('record.type.opportunity')}</Text>
                    {results.opportunities.map(opp => (
                        <RecordListItem
                            actionLabelKey = 'dialog.link'
                            actionType = { BUTTON_TYPES.PRIMARY }
                            disabled = { linkingId !== null }
                            icon = { IconRecordOpportunity }
                            isLoading = { linkingId === opp.opportunityId }
                            key = { opp.opportunityId }
                            metadata = { `${opp.opportunityStage}${
                                opp.amount !== undefined ? ` \u2022 $${formatAmount(opp.amount)}` : ''
                            }` }
                            name = { opp.opportunityName }
                            /* eslint-disable-next-line react/jsx-no-bind */
                            onAction = { () => onLink('Opportunity', opp) } />
                    ))}
                </>
            )}
        </View>
    );
};

export default SearchResultsSection;