| 1 |
import {withTemplateWrapper} from '@givewp/forms/app/templates'; |
| 2 |
import SectionNode from '@givewp/forms/app/fields/SectionNode'; |
| 3 |
import useVisibilityCondition from '@givewp/forms/app/hooks/useVisibilityCondition'; |
| 4 |
import {Field, isField, Section as SectionType} from '@givewp/forms/types'; |
| 5 |
import DonationFormErrorBoundary from '@givewp/forms/app/errors/boundaries/DonationFormErrorBoundary'; |
| 6 |
import {useEffect} from '@wordpress/element'; |
| 7 |
|
| 8 |
const formTemplates = window.givewp.form.templates; |
| 9 |
const FormSectionTemplate = withTemplateWrapper(formTemplates.layouts.section, 'section'); |
| 10 |
|
| 11 |
export default function Section({section}: {section: SectionType}) { |
| 12 |
const showNode = useVisibilityCondition(section.visibilityConditions); |
| 13 |
const {unregister} = window.givewp.form.hooks.useFormContext(); |
| 14 |
|
| 15 |
useEffect(() => { |
| 16 |
if (showNode) { |
| 17 |
return; |
| 18 |
} |
| 19 |
|
| 20 |
section.walkNodes((field: Field) => { |
| 21 |
unregister(field.name); |
| 22 |
}, isField); |
| 23 |
}, [showNode]); |
| 24 |
|
| 25 |
if (!showNode) { |
| 26 |
return null; |
| 27 |
} |
| 28 |
|
| 29 |
return ( |
| 30 |
<FormSectionTemplate section={section}> |
| 31 |
{section.nodes.map((node) => ( |
| 32 |
<DonationFormErrorBoundary key={node.name}> |
| 33 |
<SectionNode node={node} /> |
| 34 |
</DonationFormErrorBoundary> |
| 35 |
))} |
| 36 |
</FormSectionTemplate> |
| 37 |
); |
| 38 |
} |
| 39 |
|
