Tabs
6 months ago
DonorDetailsPage.module.scss
1 year ago
index.tsx
10 months ago
slots.ts
10 months ago
index.tsx
122 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { useState } from 'react'; |
| 5 | import cx from 'classnames'; |
| 6 | |
| 7 | /** |
| 8 | * WordPress Dependencies |
| 9 | */ |
| 10 | import { __ } from '@wordpress/i18n'; |
| 11 | |
| 12 | /** |
| 13 | * Internal Dependencies |
| 14 | */ |
| 15 | import { TrashIcon, ViewIcon } from '@givewp/components/AdminDetailsPage/Icons'; |
| 16 | import AdminDetailsPage from '@givewp/components/AdminDetailsPage'; |
| 17 | import ConfirmationDialog from '@givewp/components/AdminDetailsPage/ConfirmationDialog'; |
| 18 | import { getDonorOptionsWindowData, useDonorEntityRecord } from '@givewp/donors/utils'; |
| 19 | import styles from './DonorDetailsPage.module.scss'; |
| 20 | import tabDefinitions from './Tabs/definitions'; |
| 21 | |
| 22 | /** |
| 23 | * @since 4.4.0 |
| 24 | */ |
| 25 | const StatusBadge = ({ status }: { status: string }) => { |
| 26 | const statusMap = { |
| 27 | current: __('Current', 'give'), |
| 28 | prospective: __('Prospective', 'give'), |
| 29 | retained: __('Retained', 'give'), |
| 30 | lapsed: __('Lapsed', 'give'), |
| 31 | new: __('New', 'give'), |
| 32 | recaptured: __('Recaptured', 'give'), |
| 33 | recurring: __('Recurring', 'give'), |
| 34 | }; |
| 35 | |
| 36 | if (!statusMap[status]) { |
| 37 | return null; |
| 38 | } |
| 39 | |
| 40 | return ( |
| 41 | <div className={`${styles.statusBadge} ${styles[`statusBadge--${status}`]}`}> |
| 42 | <span className={styles.statusBadgeIcon}>{statusMap[status].substring(0, 1)}</span> |
| 43 | <span className={styles.statusBadgeText}>{statusMap[status]}</span> |
| 44 | </div> |
| 45 | ); |
| 46 | }; |
| 47 | |
| 48 | /** |
| 49 | * @since 4.4.0 |
| 50 | */ |
| 51 | export default function DonorDetailsPage() { |
| 52 | const { adminUrl } = getDonorOptionsWindowData(); |
| 53 | const [showConfirmationDialog, setShowConfirmationDialog] = useState<boolean>(false); |
| 54 | |
| 55 | const { record: donor } = useDonorEntityRecord(); |
| 56 | |
| 57 | const SendEmailButton = ({ className }: { className: string }) => { |
| 58 | if (!donor?.email) { |
| 59 | return null; |
| 60 | } |
| 61 | |
| 62 | return ( |
| 63 | <a |
| 64 | href={`mailto:${donor.email}`} |
| 65 | className={className} |
| 66 | aria-label={__('Send email to donor', 'give')} |
| 67 | > |
| 68 | {__('Send Email', 'give')} |
| 69 | </a> |
| 70 | ); |
| 71 | }; |
| 72 | |
| 73 | const ContextMenuItems = ({ className }: { className: string }) => { |
| 74 | return ( |
| 75 | <> |
| 76 | {donor?.wpUserPermalink && ( |
| 77 | <a |
| 78 | href={donor.wpUserPermalink} |
| 79 | target="_blank" |
| 80 | aria-label={__('View WordPress profile', 'give')} |
| 81 | className={className} |
| 82 | > |
| 83 | <ViewIcon /> {__('View WordPress profile', 'give')} |
| 84 | </a> |
| 85 | )} |
| 86 | |
| 87 | {/* <a |
| 88 | href="#" |
| 89 | className={cx(className, styles.archive)} |
| 90 | onClick={() => setShowConfirmationDialog(true)} |
| 91 | > |
| 92 | <TrashIcon /> {__('Delete Donor', 'give')} |
| 93 | </a> */} |
| 94 | </> |
| 95 | ); |
| 96 | }; |
| 97 | |
| 98 | return ( |
| 99 | <AdminDetailsPage |
| 100 | objectId={donor?.id} |
| 101 | objectType="donor" |
| 102 | objectTypePlural="donors" |
| 103 | useObjectEntityRecord={useDonorEntityRecord} |
| 104 | tabDefinitions={tabDefinitions} |
| 105 | breadcrumbUrl={`${adminUrl}edit.php?post_type=give_forms&page=give-donors`} |
| 106 | StatusBadge={() => <StatusBadge status={donor?.status} />} |
| 107 | SecondaryActionButton={SendEmailButton} |
| 108 | ContextMenuItems={donor?.wpUserPermalink ? ContextMenuItems : null} // TODO: Remove this once we have items always being shown in the context menu |
| 109 | > |
| 110 | <ConfirmationDialog |
| 111 | title={__('Delete Donor', 'give')} |
| 112 | actionLabel={__('Delete Donor', 'give')} |
| 113 | isOpen={showConfirmationDialog} |
| 114 | handleClose={() => setShowConfirmationDialog(false)} |
| 115 | handleConfirm={() => { }} |
| 116 | > |
| 117 | {__('Are you sure you want to delete this donor?', 'give')} |
| 118 | </ConfirmationDialog> |
| 119 | </AdminDetailsPage> |
| 120 | ); |
| 121 | } |
| 122 |