diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx index b3737ea25be4096202d959c78b9555a505f316c7..e8a88718ea08e0a3f42bd4ea0a1b6e47af61d721 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.jsx +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.jsx @@ -64,6 +64,7 @@ import { PayeeAutocomplete } from '../autocomplete/PayeeAutocomplete'; import { Button } from '../common/Button'; import { Popover } from '../common/Popover'; import { Text } from '../common/Text'; +import { Tooltip } from '../common/Tooltip'; import { View } from '../common/View'; import { getStatusProps } from '../schedules/StatusBadge'; import { DateSelect } from '../select/DateSelect'; @@ -537,6 +538,7 @@ function PayeeCell({ valueStyle, transaction, subtransactions, + importedPayee, isPreview, onEdit, onUpdate, @@ -610,9 +612,30 @@ function PayeeCell({ fontStyle: 'italic', fontWeight: 300, userSelect: 'none', + borderBottom: importedPayee + ? `1px dashed ${theme.pageTextSubdued}` + : 'none', }} > - {parentPayee} + {importedPayee ? ( + <Tooltip + content={ + <View style={{ padding: 10 }}> + <Text style={{ fontWeight: 'bold' }}>Imported Payee</Text> + <Text style={{ fontWeight: 'normal' }}> + {importedPayee} + </Text> + </View> + } + style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }} + placement="bottom" + triggerProps={{ delay: 750 }} + > + {parentPayee} + </Tooltip> + ) : ( + parentPayee + )} </Text> </View> </CellButton> @@ -637,17 +660,48 @@ function PayeeCell({ } }} formatter={() => getPayeePretty(transaction, payee, transferAccount)} - unexposedContent={props => ( - <> - <PayeeIcons - transaction={transaction} - transferAccount={transferAccount} - onNavigateToTransferAccount={onNavigateToTransferAccount} - onNavigateToSchedule={onNavigateToSchedule} + unexposedContent={props => { + const payeeName = ( + <UnexposedCellContent + {...props} + style={ + importedPayee + ? { borderBottom: `1px dashed ${theme.pageTextSubdued}` } + : {} + } /> - <UnexposedCellContent {...props} /> - </> - )} + ); + + return ( + <div style={{ display: 'flex', alignItems: 'center' }}> + <PayeeIcons + transaction={transaction} + transferAccount={transferAccount} + onNavigateToTransferAccount={onNavigateToTransferAccount} + onNavigateToSchedule={onNavigateToSchedule} + /> + {importedPayee ? ( + <Tooltip + content={ + <View style={{ padding: 10 }}> + <Text style={{ fontWeight: 'bold' }}>Imported Payee</Text> + <Text style={{ fontWeight: 'normal' }}> + {importedPayee} + </Text> + </View> + } + style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }} + placement="bottom" + triggerProps={{ delay: 750 }} + > + {payeeName} + </Tooltip> + ) : ( + payeeName + )} + </div> + ); + }} > {({ onBlur, @@ -656,28 +710,26 @@ function PayeeCell({ onSave, shouldSaveFromKey, inputStyle, - }) => { - return ( - <PayeeAutocomplete - payees={payees} - accounts={accounts} - value={payee?.id} - shouldSaveFromKey={shouldSaveFromKey} - inputProps={{ - onBlur, - onKeyDown, - style: inputStyle, - }} - showManagePayees={true} - clearOnBlur={false} - focused={true} - onUpdate={(id, value) => onUpdate?.(value)} - onSelect={onSave} - onManagePayees={() => onManagePayees(payee?.id)} - menuPortalTarget={undefined} - /> - ); - }} + }) => ( + <PayeeAutocomplete + payees={payees} + accounts={accounts} + value={payee?.id} + shouldSaveFromKey={shouldSaveFromKey} + inputProps={{ + onBlur, + onKeyDown, + style: inputStyle, + }} + showManagePayees={true} + clearOnBlur={false} + focused={true} + onUpdate={(id, value) => onUpdate?.(value)} + onSelect={onSave} + onManagePayees={() => onManagePayees(payee?.id)} + menuPortalTarget={undefined} + /> + )} </CustomCell> ); } diff --git a/upcoming-release-notes/3018.md b/upcoming-release-notes/3018.md new file mode 100644 index 0000000000000000000000000000000000000000..320c1a0fc01ffe3508714847811655593eac97dc --- /dev/null +++ b/upcoming-release-notes/3018.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [matt-fidd] +--- + +Add imported payee tooltip to transaction tables