give
/
src
/
Subscriptions
/
resources
/
admin
/
components
/
SubscriptionDetailsPage
/
Tabs
/
Donations
/
index.tsx
give
/
src
/
Subscriptions
/
resources
/
admin
/
components
/
SubscriptionDetailsPage
/
Tabs
/
Donations
Last commit date
AddRenewalModal
8 months ago
apiSettings.ts
10 months ago
index.tsx
9 months ago
styles.module.scss
9 months ago
index.tsx
116 lines
| 1 | import { __ } from "@wordpress/i18n"; |
| 2 | import { ListTablePage } from "@givewp/components"; |
| 3 | import type { ListTablePageRef } from "@givewp/components"; |
| 4 | import { getSubscriptionOptionsWindowData, useRefreshSubscriptionInBackground } from "@givewp/subscriptions/utils"; |
| 5 | import styles from './styles.module.scss'; |
| 6 | import cn from 'classnames'; |
| 7 | import { DonationRowActions } from "@givewp/donations/components/DonationRowActions"; |
| 8 | import BlankSlate from "@givewp/components/ListTable/BlankSlate"; |
| 9 | import apiSettings from './apiSettings'; |
| 10 | import AddRenewalDialog from "./AddRenewalModal"; |
| 11 | import { useState, useRef } from "react"; |
| 12 | import { useDispatch } from "@wordpress/data"; |
| 13 | import { store as coreStore } from "@wordpress/core-data"; |
| 14 | |
| 15 | const { mode, adminUrl, pluginUrl } = getSubscriptionOptionsWindowData(); |
| 16 | |
| 17 | // This is necessary to reuse the DonationRowActions component |
| 18 | // that expects the window.GiveDonations object to be present |
| 19 | // while avoiding to expose the entire window.GiveDonations object. |
| 20 | if (!window?.GiveDonations) { |
| 21 | // @ts-ignore |
| 22 | window.GiveDonations = { |
| 23 | adminUrl, |
| 24 | }; |
| 25 | } |
| 26 | |
| 27 | /** |
| 28 | * @since 4.8.0 |
| 29 | */ |
| 30 | const ListTableBlankSlate = ( |
| 31 | <BlankSlate |
| 32 | imagePath={`${pluginUrl}build/assets/dist/images/list-table/blank-slate-donations-icon.svg`} |
| 33 | description={__('No donations found', 'give')} |
| 34 | href={'https://docs.givewp.com/donations'} |
| 35 | linkText={__('GiveWP Donations.', 'give')} |
| 36 | /> |
| 37 | ); |
| 38 | |
| 39 | /** |
| 40 | * @since 4.8.0 |
| 41 | */ |
| 42 | export default function SubscriptionDetailsPageDonationsTab() { |
| 43 | const [isAddRenewalDialogOpen, setIsAddRenewalDialogOpen] = useState(false); |
| 44 | const listTableRef = useRef<ListTablePageRef>(null); |
| 45 | const dispatch = useDispatch(`givewp/admin-details-page-notifications`); |
| 46 | const { saveEntityRecord } = useDispatch(coreStore); |
| 47 | const refreshSubscriptionInBackground = useRefreshSubscriptionInBackground(); |
| 48 | const urlParams = new URLSearchParams(window.location.search); |
| 49 | const subscriptionId = Number(urlParams.get('id')); |
| 50 | |
| 51 | const handleAddRenewal = async (data: any) => { |
| 52 | try { |
| 53 | const response = await saveEntityRecord('givewp', 'donation', { |
| 54 | subscriptionId, |
| 55 | type: 'renewal', |
| 56 | amount: data.amount, |
| 57 | createdAt: (new Date(data.date)).toISOString(), |
| 58 | updateRenewalDate: !!data.updateRenewalDate, |
| 59 | gatewayTransactionId: data.transactionId, |
| 60 | }); |
| 61 | |
| 62 | if (response?.id) { |
| 63 | await listTableRef.current?.refresh(); |
| 64 | |
| 65 | if (!!data.updateRenewalDate) { |
| 66 | await refreshSubscriptionInBackground(subscriptionId); |
| 67 | } |
| 68 | |
| 69 | dispatch.addSnackbarNotice({ |
| 70 | id: `add-renewal-success`, |
| 71 | content: __(`Renewal added successfully`, 'give'), |
| 72 | }); |
| 73 | } else { |
| 74 | throw new Error(response); |
| 75 | } |
| 76 | } catch (error) { |
| 77 | console.error(error); |
| 78 | dispatch.addSnackbarNotice({ |
| 79 | id: `add-renewal-error`, |
| 80 | type: 'error', |
| 81 | content: __(`Failed to add renewal`, 'give'), |
| 82 | }); |
| 83 | } |
| 84 | }; |
| 85 | |
| 86 | return ( |
| 87 | <div className={styles.container}> |
| 88 | <div className={styles.header}> |
| 89 | <h2 className={styles.title}>{__('Donations', 'give')}</h2> |
| 90 | <p className={styles.description}>{__('Show all recurring donations under this subscription.', 'give')}</p> |
| 91 | </div> |
| 92 | <button className={styles.button} onClick={() => setIsAddRenewalDialogOpen(true)}>{__('Add renewal', 'give')}</button> |
| 93 | |
| 94 | <div className={styles.tableWrapper}> |
| 95 | <ListTablePage |
| 96 | ref={listTableRef} |
| 97 | title={__('Donations', 'give')} |
| 98 | apiSettings={apiSettings} |
| 99 | listTableBlankSlate={ListTableBlankSlate} |
| 100 | singleName={__('result', 'give')} |
| 101 | pluralName={__('results', 'give')} |
| 102 | paymentMode={mode === 'test'} |
| 103 | contentMode={true} |
| 104 | rowActions={DonationRowActions} |
| 105 | /> |
| 106 | </div> |
| 107 | |
| 108 | <AddRenewalDialog |
| 109 | isOpen={isAddRenewalDialogOpen} |
| 110 | handleClose={() => setIsAddRenewalDialogOpen(false)} |
| 111 | handleConfirm={handleAddRenewal} |
| 112 | /> |
| 113 | </div> |
| 114 | ); |
| 115 | } |
| 116 |