DonationConfirmationReceiptApp.tsx
87 lines
| 1 | import {createRoot, render} from '@wordpress/element'; |
| 2 | import {withTemplateWrapper} from '@givewp/forms/app/templates'; |
| 3 | import amountFormatter from '@givewp/forms/app/utilities/amountFormatter'; |
| 4 | import {ReceiptDetail} from '@givewp/forms/types'; |
| 5 | |
| 6 | const formTemplates = window.givewp.form.templates; |
| 7 | const DonationReceiptTemplate = withTemplateWrapper(formTemplates.layouts.receipt); |
| 8 | |
| 9 | /** |
| 10 | * Get data from the server |
| 11 | */ |
| 12 | const {receipt} = window.givewpDonationConfirmationReceiptExports; |
| 13 | |
| 14 | /** |
| 15 | * This function is used to format the amount value. It also handles cased when there are additional details within the string. For example "$25.00 / month" |
| 16 | * |
| 17 | * @since 3.0.0 |
| 18 | */ |
| 19 | const getAmountFormatted = (value) => { |
| 20 | const amount = parseFloat(value); |
| 21 | const amountFormatted = amountFormatter(receipt.settings.currency, {}).format(amount); |
| 22 | const additionalDetails = value.replace(/^[\d|.,]+/, '').trim(); |
| 23 | |
| 24 | if (!additionalDetails) { |
| 25 | return amountFormatted; |
| 26 | } else { |
| 27 | return `${amountFormatted} ${additionalDetails}`; |
| 28 | } |
| 29 | }; |
| 30 | |
| 31 | /** |
| 32 | * Return readable value |
| 33 | * |
| 34 | * @since 3.0.0 |
| 35 | */ |
| 36 | const getDetailValue = (value) => { |
| 37 | if (typeof value === 'string') { |
| 38 | return value; |
| 39 | } |
| 40 | |
| 41 | if (value?.amount) { |
| 42 | return getAmountFormatted(value.amount); |
| 43 | } |
| 44 | |
| 45 | return JSON.stringify(value); |
| 46 | }; |
| 47 | |
| 48 | /** |
| 49 | * Prepare detail values before render |
| 50 | * |
| 51 | * @since 3.0.0 |
| 52 | */ |
| 53 | const prepareDetails = (details: ReceiptDetail[]) => { |
| 54 | return details?.map(({label, value}) => ({ |
| 55 | label, |
| 56 | value: getDetailValue(value), |
| 57 | })); |
| 58 | }; |
| 59 | |
| 60 | /** |
| 61 | * |
| 62 | * @since 3.0.0 |
| 63 | */ |
| 64 | function DonationConfirmationReceiptApp() { |
| 65 | return ( |
| 66 | <DonationReceiptTemplate |
| 67 | heading={receipt.settings.heading} |
| 68 | description={receipt.settings.description} |
| 69 | donorDashboardUrl={receipt.settings.donorDashboardUrl} |
| 70 | pdfReceiptLink={receipt.settings.pdfReceiptLink} |
| 71 | donorDetails={receipt.donorDetails} |
| 72 | donationDetails={prepareDetails(receipt.donationDetails)} |
| 73 | subscriptionDetails={prepareDetails(receipt.subscriptionDetails)} |
| 74 | eventTicketsDetails={prepareDetails(receipt.eventTicketsDetails)} |
| 75 | additionalDetails={prepareDetails(receipt.additionalDetails)} |
| 76 | /> |
| 77 | ); |
| 78 | } |
| 79 | |
| 80 | const root = document.getElementById('root-givewp-donation-confirmation-receipt'); |
| 81 | |
| 82 | createRoot(root).render(<DonationConfirmationReceiptApp />); |
| 83 | |
| 84 | root.scrollIntoView({ |
| 85 | behavior: 'smooth', |
| 86 | }); |
| 87 |