Feature: Add additional gateway notice

[kjohnson]

Resolves GIVE-1092

Description

This PR adds a notice about additional payment gateways to the payment gateway block.

Affects

Adds a notice in the inspector controls.

Dev note: the external link element cannot be added to the block card description directly, which only accepts a string. The implementation here is a workaround, which is documented.

Visuals

Inspector Controls for Payment Gateways block

Testing Instructions

Create a v3 donation form.
Go to the Build tab/screen.
Click on the Payment Gateways block.
Dismiss the notice.
Reload the form builder.

Pre-review Checklist

• Acceptance criteria satisfied and marked in related issue
• Relevant @unreleased tags included in DocBlocks
• Includes unit tests
• Reviewed by the designer (if follows a design)
• Self Review of code and UX completed

[kjohnson]

Build for QA, see https://github.com/impress-org/givewp/actions/runs/10253458388.

[kjohnson]

Build for QA, see https://github.com/impress-org/givewp/actions/runs/10269404181.

[kjohnson]

Build for QA, see https://github.com/impress-org/givewp/actions/runs/10271659133.

[glaubersilva]

@kjohnson Looks good to me, I just left a comment related to a small change.

Also, I noticed on the Zeplin Design that the offline instructions are displayed before the notice instead of after, which makes the implementation from this PR slightly different from the original design - check the attached screenshot for reference.

Honestly, I don't know if it should be a concern. So, I would like to confirm with @jdghinson if it's ok as it is currently or if we need to change it.

[kjohnson]

@glaubersilva thanks. I didn't have the Offline Donations showing when I added this. I'll take a look.

[kjohnson]

@glaubersilva it seems that the Offline Donations settings are added by filtering the Block's Edit component, so there isn't a way to control this ordering from within the Payment Gateways block.

We could inject this notice as a filter, which is what I'll try next.

[kjohnson]

The order issue is actually due to the use of a Higher Order Component to append the Offline Donation inspector controls, where as the filter is only used to render the block itself.

[kjohnson]

@glaubersilva Ok, I was able to re-position the notice using a filter and a higher order component, see 15ca140.

[glaubersilva]

@kjohnson Thanks for the changes, this seems more with the design now. However, to compile the files on my local machine I have to delete lines a couple of unused imports on the FormBuilder/resources/js/form-builder/src/blocks/fields/payment-gateways/Edit.tsx file.

Besides that, it's all good. So, I'll approve the PR to advance things, but remember to remove this not used imports before sending it to QA. =)

Nice work!

[glaubersilva]

[kjohnson]

Thanks, @glaubersilva. I removed those unused imports, see d1e3cde.

[kjohnson]

Build for QA, see https://github.com/impress-org/givewp/actions/runs/10421224477.

[rickalday]

Passed manual QA tests.