| 1 |
import {__} from '@wordpress/i18n'; |
| 2 |
import isRouteInlineRedirect from '@givewp/forms/app/utilities/isRouteInlineRedirect'; |
| 3 |
import ModalForm from '@givewp/src/Campaigns/Blocks/shared/components/ModalForm'; |
| 4 |
import '../editor/styles/index.scss'; |
| 5 |
import renderDonationForm from './renderDonationForm'; |
| 6 |
import EmbedFrame from '@givewp/forms/shared/EmbedFrame'; |
| 7 |
|
| 8 |
/** |
| 9 |
* @since 4.17.0 add skeletonHtml, the server-rendered skeleton for the on-page loading state. |
| 10 |
* @since 3.2.1 Revert the display style value of "fullForm" to "onpage". |
| 11 |
* @since 3.1.2 |
| 12 |
*/ |
| 13 |
type DonationFormBlockAppProps = { |
| 14 |
formFormat: 'onpage' | 'newTab' | 'modal' | string; |
| 15 |
dataSrc: string; |
| 16 |
embedId: string; |
| 17 |
openFormButton: string; |
| 18 |
formUrl: string; |
| 19 |
formViewUrl: string; |
| 20 |
skeletonHtml?: string; |
| 21 |
}; |
| 22 |
|
| 23 |
/** |
| 24 |
* @since 3.4.0 |
| 25 |
*/ |
| 26 |
const inlineRedirectRoutes = ['donation-confirmation-receipt-view']; |
| 27 |
|
| 28 |
/** |
| 29 |
* @since 3.4.0 |
| 30 |
*/ |
| 31 |
const isRedirect = (url: string) => { |
| 32 |
const redirectUrl = new URL(url); |
| 33 |
const redirectUrlParams = new URLSearchParams(redirectUrl.search); |
| 34 |
|
| 35 |
return isRouteInlineRedirect(redirectUrlParams, inlineRedirectRoutes); |
| 36 |
}; |
| 37 |
|
| 38 |
/** |
| 39 |
* @since 4.17.0 render every format through EmbedFrame for a shared loading and fallback state, with |
| 40 |
* a skeleton of the form on the on-page format. |
| 41 |
* @since 4.3.0 replace ModalForm with Campaigns ModalForm. |
| 42 |
* @since 3.4.0 add logic for inline redirects. |
| 43 |
* @since 3.2.0 replace form format reveal with new tab. |
| 44 |
* @since 3.0.0 |
| 45 |
*/ |
| 46 |
export default function DonationFormBlockApp({ |
| 47 |
formFormat, |
| 48 |
dataSrc, |
| 49 |
embedId, |
| 50 |
openFormButton, |
| 51 |
formUrl, |
| 52 |
formViewUrl, |
| 53 |
skeletonHtml, |
| 54 |
}: DonationFormBlockAppProps) { |
| 55 |
const isFormRedirect = isRedirect(dataSrc); |
| 56 |
|
| 57 |
if (formFormat === 'newTab') { |
| 58 |
return ( |
| 59 |
<a |
| 60 |
className={'givewp-donation-form-link'} |
| 61 |
href={formUrl} |
| 62 |
target={'_blank'} |
| 63 |
rel={'noopener noreferrer'} |
| 64 |
aria-label={`${openFormButton} ${__('Opens in a new tab', 'give')}`} |
| 65 |
> |
| 66 |
{openFormButton} |
| 67 |
</a> |
| 68 |
); |
| 69 |
} |
| 70 |
|
| 71 |
if (formFormat === 'modal' || formFormat === 'reveal') { |
| 72 |
return ( |
| 73 |
<ModalForm |
| 74 |
buttonText={openFormButton} |
| 75 |
dataSrc={dataSrc} |
| 76 |
embedId={embedId} |
| 77 |
isFormRedirect={isFormRedirect} |
| 78 |
formViewUrl={formViewUrl} |
| 79 |
formUrl={formUrl} |
| 80 |
/> |
| 81 |
); |
| 82 |
} |
| 83 |
|
| 84 |
return <EmbedFrame src={dataSrc} embedId={embedId} fallbackUrl={formUrl} skeletonHtml={skeletonHtml} />; |
| 85 |
} |
| 86 |
|
| 87 |
const roots = document.querySelectorAll('.root-data-givewp-embed'); |
| 88 |
|
| 89 |
/** |
| 90 |
* @since 4.7.0 update to use renderDonationForm |
| 91 |
* @since 3.22.0 Add locale support |
| 92 |
*/ |
| 93 |
roots?.forEach((root) => { |
| 94 |
renderDonationForm(root); |
| 95 |
}); |
| 96 |
|
