give
/
src
/
PaymentGateways
/
Gateways
/
Offline
/
resources
/
formBuilder
/
withOfflineInspectorControls.tsx
addOfflineAttributes.ts
2 years ago
index.tsx
2 years ago
useSetDefaultAttributes.ts
2 years ago
withOfflineInspectorControls.tsx
2 years ago
withOfflineInspectorControls.tsx
126 lines
| 1 | import {createHigherOrderComponent} from '@wordpress/compose'; |
| 2 | import {InspectorControls} from '@wordpress/block-editor'; |
| 3 | import {__} from '@wordpress/i18n'; |
| 4 | import {PanelBody, PanelRow, ToggleControl} from '@wordpress/components'; |
| 5 | import {createInterpolateElement} from '@wordpress/element'; |
| 6 | import ControlForPopover from '@givewp/form-builder/components/settings/ControlForPopover'; |
| 7 | import PopoverContentWithTemplateTags from '@givewp/form-builder/components/settings/PopoverContentWithTemplateTags'; |
| 8 | |
| 9 | import useSetDefaultAttributes from './useSetDefaultAttributes'; |
| 10 | import {offlineAttributes} from './addOfflineAttributes'; |
| 11 | import usePopoverState from '@givewp/form-builder/hooks/usePopoverState'; |
| 12 | |
| 13 | declare const window: { |
| 14 | giveOfflineGatewaySettings: { |
| 15 | offlineSettingsUrl: string; |
| 16 | }; |
| 17 | } & Window; |
| 18 | |
| 19 | type OfflineAttributes = { |
| 20 | offlineEnabled?: boolean; |
| 21 | offlineUseGlobalInstructions?: boolean; |
| 22 | offlineDonationInstructions?: string; |
| 23 | }; |
| 24 | |
| 25 | type OfflineSetAttributes = (attributes: OfflineAttributes) => void; |
| 26 | |
| 27 | const offlineInstructionTags = [ |
| 28 | { |
| 29 | id: 'offline_mailing_address', |
| 30 | description: __('The mailing address provided to the donor to send their payment to.', 'give'), |
| 31 | }, |
| 32 | { |
| 33 | id: 'sitename', |
| 34 | description: __('The name of this website.', 'give'), |
| 35 | }, |
| 36 | ]; |
| 37 | |
| 38 | function OfflineInspectorControls({ |
| 39 | attributes, |
| 40 | setAttributes, |
| 41 | }: { |
| 42 | setAttributes: OfflineSetAttributes; |
| 43 | attributes: OfflineAttributes; |
| 44 | }) { |
| 45 | const {isOpen: isInstructionsOpen, toggle: toggleInstructions, close: closeInstructions} = usePopoverState(); |
| 46 | useSetDefaultAttributes(attributes, setAttributes, offlineAttributes); |
| 47 | |
| 48 | const windowSettings = window.giveOfflineGatewaySettings; |
| 49 | const textWithLinkToOfflineSettings = (textTemplate: string) => |
| 50 | createInterpolateElement(textTemplate, { |
| 51 | a: <a href={windowSettings.offlineSettingsUrl} target="_blank" />, |
| 52 | }); |
| 53 | |
| 54 | const globalDefaultHelper = textWithLinkToOfflineSettings( |
| 55 | __( |
| 56 | 'Global instructions are defined in the <a>Global Settings</a>. When disabled, custom instructions can be written for this form', |
| 57 | 'give' |
| 58 | ) |
| 59 | ); |
| 60 | |
| 61 | return ( |
| 62 | <InspectorControls> |
| 63 | <PanelBody title={__('Offline Donations', 'give')}> |
| 64 | <PanelRow> |
| 65 | <ToggleControl |
| 66 | label={__('Enable offline donations', 'give')} |
| 67 | checked={attributes.offlineEnabled} |
| 68 | onChange={(value) => setAttributes({offlineEnabled: value})} |
| 69 | /> |
| 70 | </PanelRow> |
| 71 | {attributes.offlineEnabled && ( |
| 72 | <PanelRow> |
| 73 | <ToggleControl |
| 74 | label={__('Use global instructions', 'give')} |
| 75 | checked={attributes.offlineUseGlobalInstructions} |
| 76 | onChange={(value) => setAttributes({offlineUseGlobalInstructions: value})} |
| 77 | help={globalDefaultHelper} |
| 78 | /> |
| 79 | </PanelRow> |
| 80 | )} |
| 81 | {attributes.offlineEnabled && !attributes.offlineUseGlobalInstructions && ( |
| 82 | <PanelRow> |
| 83 | <ControlForPopover |
| 84 | id="offline-donation-instructions" |
| 85 | help={__( |
| 86 | 'Enter the instructions you want to display to the donor during the donation process. Most likely this would include important information like mailing address and who to make the check out to', |
| 87 | 'give' |
| 88 | )} |
| 89 | heading={__('Donation Instructions', 'give')} |
| 90 | onButtonClick={toggleInstructions} |
| 91 | isButtonActive={isInstructionsOpen} |
| 92 | > |
| 93 | {isInstructionsOpen && ( |
| 94 | <PopoverContentWithTemplateTags |
| 95 | onContentChange={(content) => setAttributes({offlineDonationInstructions: content})} |
| 96 | heading={__('Donation Instructions', 'give')} |
| 97 | content={attributes.offlineDonationInstructions} |
| 98 | templateTags={offlineInstructionTags} |
| 99 | onClose={closeInstructions} |
| 100 | richText |
| 101 | /> |
| 102 | )} |
| 103 | </ControlForPopover> |
| 104 | </PanelRow> |
| 105 | )} |
| 106 | </PanelBody> |
| 107 | </InspectorControls> |
| 108 | ); |
| 109 | } |
| 110 | |
| 111 | const withInspectorControls = createHigherOrderComponent((BlockEdit) => { |
| 112 | return (props) => { |
| 113 | if (props.name === 'givewp/payment-gateways') { |
| 114 | return ( |
| 115 | <> |
| 116 | <BlockEdit {...props} /> |
| 117 | <OfflineInspectorControls {...props} /> |
| 118 | </> |
| 119 | ); |
| 120 | } |
| 121 | return <BlockEdit {...props} />; |
| 122 | }; |
| 123 | }, 'withInspectorControl'); |
| 124 | |
| 125 | export default withInspectorControls; |
| 126 |