setView( VIEW.SETTINGS ) } />
+ ) }
+
+ { VIEW.SETTINGS === view && (
+
+
+
+ { onBack ? (
+
+ { backLabel }
+
+ ) : (
+
+ { backLabel }
+
+ ) }
+ { actions && (
+
{ actions }
+ ) }
+
+
+
+
+ { children }
+
+ { aside &&
{ aside }
}
+
+
+ {
+ /* translators: 1: current step number, 2: total number of steps. */
+ __( 'Step', 'rave-payment-forms' )
+ }{ ' ' }
+
+ { current } { __( 'of', 'rave-payment-forms' ) } { total }
+
+
+);
+
+/**
+ * The progress rail on the right of each wizard step.
+ *
+ * @param {Object} props
+ * @param {Array} props.steps Step descriptors.
+ * @param {number} props.activeIndex Zero-based index of the current step.
+ * @return {Element} The stepper card.
+ */
+export const Stepper = ( { steps, activeIndex } ) => (
+
+ { steps.map( ( step, index ) => {
+ const done = index < activeIndex;
+ const active = index === activeIndex;
+
+ return (
+
+
+ { ( done || active ) &&
+ { step.label }
+
+ );
+ } ) }
+
+ { text }
+
+);
+
+/**
+ * Label + control wrapper with optional tooltip and error text.
+ *
+ * @param {Object} props
+ * @param {string} props.id Control id.
+ * @param {string} props.label Field label.
+ * @param {string} [props.tooltip] Help text.
+ * @param {string} [props.error] Validation message.
+ * @param {string} [props.hint] Persistent helper text below the control.
+ * @param {*} props.children The control itself.
+ * @return {Element} The field.
+ */
+export const Field = ( { id, label, tooltip, error, hint, children } ) => (
+
+
+ { label }
+ { tooltip &&
+ { children }
+ { hint && (
+
+ { hint }
+
+ ) }
+ { error &&
{ error }
}
+
+
+ { placeholder && { placeholder } }
+ { options.map( ( option ) => (
+
+ { option.label }
+
+ ) ) }
+
+
+
+
+);
+
+/**
+ * Square checkbox with an inline label.
+ *
+ * @param {Object} props
+ * @param {string} props.id Control id.
+ * @param {boolean} props.checked Checked state.
+ * @param {Function} props.onChange Receives the next boolean.
+ * @param {string} props.label Inline label.
+ * @return {Element} The checkbox row.
+ */
+export const Checkbox = ( { id, checked, onChange, label } ) => (
+
+
+
+ { label }
+
+);
+
+/**
+ * Primary/secondary button. Disabled primaries keep the faded orange from the
+ * designs rather than going grey, so the affordance stays readable.
+ *
+ * @param {Object} props
+ * @param {string} [props.variant] `primary` or `secondary`.
+ * @param {boolean} [props.busy] Renders the spinner and blocks clicks.
+ * @param {*} props.children Button label.
+ * @return {Element} The button.
+ */
+export const Button = ( { variant = 'primary', busy, children, ...rest } ) => (
+
+ { busy &&
+);
+
+/**
+ * Read-only field with a Copy button, used for the webhook URL.
+ *
+ * @param {Object} props
+ * @param {string} props.value URL to copy.
+ * @param {string} props.id Control id.
+ * @return {Element} The copy field.
+ */
+export const CopyField = ( { value, id } ) => {
+ const [ copied, setCopied ] = useState( false );
+ const timer = useRef( null );
+
+ useEffect( () => () => clearTimeout( timer.current ), [] );
+
+ const copy = async () => {
+ try {
+ if ( navigator.clipboard?.writeText ) {
+ await navigator.clipboard.writeText( value );
+ } else {
+ const field = document.getElementById( id );
+ field.select();
+ document.execCommand( 'copy' );
+ }
+ setCopied( true );
+ clearTimeout( timer.current );
+ timer.current = setTimeout( () => setCopied( false ), 2000 );
+ } catch {
+ // Clipboard permission denied — the value stays selectable by hand.
+ }
+ };
+
+ return (
+
+
+ { copied
+ ? __( 'Copied', 'rave-payment-forms' )
+ : __( 'Copy', 'rave-payment-forms' ) }
+
+
+ );
+};
+
+/**
+ * Masked input with a Show/Hide toggle, used for the secret key.
+ *
+ * @param {Object} props Standard input props.
+ * @return {Element} The secret field.
+ */
+export const SecretInput = ( props ) => {
+ const [ visible, setVisible ] = useState( false );
+
+ return (
+
+ setVisible( ! visible ) }
+ >
+ { visible
+ ? __( 'Hide', 'rave-payment-forms' )
+ : __( 'Show', 'rave-payment-forms' ) }
+
+
+ );
+};
+
+/**
+ * Full-screen loading state shown between the last wizard step and the success
+ * screen, and while the initial settings request is in flight.
+ *
+ * @return {Element} The spinner.
+ */
+export const LoadingScreen = () => (
+
+
+);
+
+/**
+ * Dismissible toast used for save confirmations and errors.
+ *
+ * @param {Object} props
+ * @param {string} props.status `success` or `error`.
+ * @param {string} props.message Toast copy.
+ * @param {Function} props.onDismiss Dismiss handler.
+ * @return {Element} The toast.
+ */
+export const Toast = ( { status, message, onDismiss } ) => (
+
+ { 'success' === status && (
+
+
+ ) }
+ { message }
+
+ ×
+
+
+);
+
+/**
+ * On/off switch.
+ *
+ * @param {Object} props
+ * @param {boolean} props.checked Whether it is on.
+ * @param {boolean} props.disabled Whether it is busy.
+ * @param {string} props.label Accessible name.
+ * @param {Function} props.onChange Receives the new value.
+ * @return {Element} The switch.
+ */
+export const Switch = ( { checked, disabled, label, onChange } ) => (
+ onChange( ! checked ) }
+ >
+
+);
diff --git a/client/admin/components/list.js b/client/admin/components/list.js
new file mode 100644
index 0000000..067b44f
--- /dev/null
+++ b/client/admin/components/list.js
@@ -0,0 +1,478 @@
+/**
+ * Building blocks for the Payment Forms and Transactions screens: popovers,
+ * multi-selects, status pills, the details drawer, modal and pagination.
+ */
+
+import {
+ useEffect,
+ useId,
+ useMemo,
+ useRef,
+ useState,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { CheckIcon, ChevronDown } from '../icons';
+import { PRESETS, earliestDate, toIsoDate } from '../lib/dates';
+
+/**
+ * Close something when the user clicks outside it or presses Escape.
+ *
+ * @param {Object} ref Ref to the element.
+ * @param {boolean} active Whether to listen.
+ * @param {Function} onClose Close handler.
+ */
+export const useDismiss = ( ref, active, onClose ) => {
+ useEffect( () => {
+ if ( ! active ) {
+ return undefined;
+ }
+
+ const onPointer = ( event ) => {
+ if ( ref.current && ! ref.current.contains( event.target ) ) {
+ onClose();
+ }
+ };
+ const onKey = ( event ) => {
+ if ( 'Escape' === event.key ) {
+ onClose();
+ }
+ };
+
+ document.addEventListener( 'mousedown', onPointer );
+ document.addEventListener( 'keydown', onKey );
+
+ return () => {
+ document.removeEventListener( 'mousedown', onPointer );
+ document.removeEventListener( 'keydown', onKey );
+ };
+ }, [ ref, active, onClose ] );
+};
+
+/**
+ * A grey toolbar button with a trailing icon, as on the Flutterwave dashboard.
+ *
+ * @param {Object} props
+ * @param {*} props.icon Trailing icon.
+ * @param {*} props.children Label.
+ * @return {Element} The button.
+ */
+export const ToolbarButton = ( { icon, children, ...rest } ) => (
+
+ { children }
+ { icon }
+
+);
+
+/**
+ * A panel anchored under its trigger.
+ *
+ * @param {Object} props
+ * @param {boolean} props.open Whether it is shown.
+ * @param {Function} props.onClose Close handler.
+ * @param {*} props.trigger The trigger element.
+ * @param {string} props.label Accessible name.
+ * @param {*} props.children Panel body.
+ * @return {Element} The popover.
+ */
+export const Popover = ( { open, onClose, trigger, label, children } ) => {
+ const ref = useRef( null );
+ useDismiss( ref, open, onClose );
+
+ return (
+
+ { trigger }
+ { open && (
+
+ { children }
+
+ ) }
+
+ { PRESETS.map( ( preset ) => (
+ onChange( preset ) }
+ >
+ { PRESET_LABELS[ preset ] }
+
+ ) ) }
+
+);
+
+/**
+ * Two date inputs limited to the last year.
+ *
+ * @param {Object} props
+ * @param {string} props.from Start date.
+ * @param {string} props.to End date.
+ * @param {Function} props.onChange Receives `{ from, to }`.
+ * @return {Element} The fields.
+ */
+export const DateRange = ( { from, to, onChange } ) => {
+ const min = earliestDate();
+ const max = toIsoDate( new Date() );
+
+ return (
+
+
+ );
+};
+
+/**
+ * Dropdown of checkboxes, optionally searchable.
+ *
+ * @param {Object} props
+ * @param {string} props.label Field label.
+ * @param {Array} props.options `{ value, label }` pairs.
+ * @param {string[]} props.value Selected values.
+ * @param {Function} props.onChange Receives the new selection.
+ * @param {string} props.placeholder Shown when nothing is selected.
+ * @param {boolean} [props.searchable] Type to filter options.
+ * @return {Element} The multi-select.
+ */
+export const MultiSelect = ( {
+ label,
+ options,
+ value,
+ onChange,
+ placeholder,
+ searchable,
+} ) => {
+ const [ open, setOpen ] = useState( false );
+ const [ query, setQuery ] = useState( '' );
+ const ref = useRef( null );
+ const id = useId();
+ useDismiss( ref, open, () => setOpen( false ) );
+
+ const visible = useMemo(
+ () =>
+ options.filter( ( option ) =>
+ option.label
+ .toLowerCase()
+ .includes( query.trim().toLowerCase() )
+ ),
+ [ options, query ]
+ );
+
+ const summary = value.length
+ ? options
+ .filter( ( option ) => value.includes( option.value ) )
+ .map( ( option ) => option.label )
+ .join( ', ' )
+ : '';
+
+ const toggle = ( optionValue ) =>
+ onChange(
+ value.includes( optionValue )
+ ? value.filter( ( item ) => item !== optionValue )
+ : [ ...value, optionValue ]
+ );
+
+ return (
+
+
+ { label }
+
+
+ { searchable ? (
+
setOpen( true ) }
+ onChange={ ( event ) => {
+ setQuery( event.target.value );
+ setOpen( true );
+ } }
+ />
+ ) : (
+
setOpen( ! open ) }
+ >
+
+ { summary || placeholder }
+
+
+ ) }
+
+
+ { open && (
+
+ ) }
+
+
+ { statusLabel( status ) }
+
+);
+
+/**
+ * Previous / Next pagination.
+ *
+ * @param {Object} props
+ * @param {number} props.page Current page.
+ * @param {number} props.pages Total pages.
+ * @param {Function} props.onChange Receives the new page.
+ * @return {Element|null} The pager.
+ */
+export const Pagination = ( { page, pages, onChange } ) => {
+ if ( pages <= 1 ) {
+ return null;
+ }
+
+ return (
+
+ onChange( page - 1 ) }
+ >
+ { __( 'Previous', 'rave-payment-forms' ) }
+
+ = pages }
+ onClick={ () => onChange( page + 1 ) }
+ >
+ { __( 'Next', 'rave-payment-forms' ) }
+
+
+ { sprintf(
+ /* translators: 1: current page, 2: total pages. */
+ __( 'Page %1$d of %2$d', 'rave-payment-forms' ),
+ page,
+ pages
+ ) }
+
+
+ );
+};
+
+/**
+ * Right-hand slide-over panel.
+ *
+ * @param {Object} props
+ * @param {string} props.title Heading.
+ * @param {Function} props.onClose Close handler.
+ * @param {*} props.children Body.
+ * @param {*} [props.footer] Footer actions.
+ * @return {Element} The drawer.
+ */
+export const Drawer = ( { title, onClose, children, footer } ) => {
+ const ref = useRef( null );
+ useDismiss( ref, true, onClose );
+
+ return (
+
+
+
+ { children }
+ { footer && (
+
+ ) }
+
+
+
+
+
{ children }
+ { footer && (
+
+ ) }
+
+
+
{ label }
+ { children || '—' }
+
+);
diff --git a/client/admin/components/tour.js b/client/admin/components/tour.js
new file mode 100644
index 0000000..1182024
--- /dev/null
+++ b/client/admin/components/tour.js
@@ -0,0 +1,536 @@
+/**
+ * Guided tips: a short tour per screen, and the Help menu that replays it or
+ * turns tips on and off.
+ *
+ * A screen calls useTour(), passes the result to in the breadcrumb
+ * bar, and renders once. Tours start by themselves the first time a
+ * screen is opened after onboarding, unless the user has turned tips off.
+ */
+
+import {
+ createPortal,
+ useCallback,
+ useEffect,
+ useLayoutEffect,
+ useRef,
+ useState,
+} from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, Switch } from '.';
+import { Popover } from './list';
+import { ExternalIcon, HelpIcon } from '../icons';
+import { adminData, saveTour } from '../lib/api';
+import {
+ pickTourState,
+ placeTooltip,
+ shouldAutoStart,
+ tourKey,
+ tourSteps,
+} from '../lib/tour';
+
+/**
+ * Space left around the highlighted element.
+ */
+const SPOT_PADDING = 6;
+
+/**
+ * This browser's copy of a user's tour state.
+ *
+ * @param {number} userId User id.
+ * @return {string} Storage key.
+ */
+const storageKey = ( userId ) => `flw_tour_${ userId || 0 }`;
+
+/**
+ * Read the browser copy; storage can be missing or blocked.
+ *
+ * @param {number} userId User id.
+ * @return {Object|null} `{ enabled, seen, at }`.
+ */
+const readLocal = ( userId ) => {
+ try {
+ return JSON.parse(
+ window.localStorage.getItem( storageKey( userId ) )
+ );
+ } catch {
+ return null;
+ }
+};
+
+/**
+ * Write the browser copy.
+ *
+ * @param {number} userId User id.
+ * @param {Object} state `{ enabled, seen }`.
+ */
+const writeLocal = ( userId, state ) => {
+ try {
+ window.localStorage.setItem(
+ storageKey( userId ),
+ JSON.stringify( { ...state, at: Date.now() } )
+ );
+ } catch {
+ // Private windows and blocked storage fall back to the server copy.
+ }
+};
+
+/**
+ * Tour state for a screen.
+ *
+ * @param {string} screen Screen name, e.g. "transactions".
+ * @param {Object} [options]
+ * @param {boolean} [options.ready] Whether the screen has rendered what the steps point at.
+ * @param {boolean} [options.onboarded] Whether onboarding is finished; read from the page by default.
+ * @return {Object} `{ running, steps, enabled, start, finish, setEnabled }`.
+ */
+export const useTour = ( screen, { ready = true, onboarded } = {} ) => {
+ const data = adminData();
+ const [ state, setState ] = useState( () =>
+ pickTourState( data.tour, readLocal( data.userId ) )
+ );
+ const [ running, setRunning ] = useState( false );
+ const started = useRef( false );
+ const isOnboarded = undefined === onboarded ? data.onboarded : onboarded;
+
+ useEffect( () => {
+ if (
+ ! ready ||
+ started.current ||
+ ! shouldAutoStart( state, screen, isOnboarded )
+ ) {
+ return undefined;
+ }
+
+ // A short pause lets the page settle before the first tip appears.
+ const timer = setTimeout( () => {
+ started.current = true;
+ setRunning( true );
+ }, 500 );
+
+ return () => clearTimeout( timer );
+ }, [ ready, state, screen, isOnboarded ] );
+
+ // Keep the browser copy in step, so a page opened before the save lands agrees.
+ const update = ( next ) => {
+ setState( next );
+ writeLocal( data.userId, next );
+ };
+
+ const finish = () => {
+ const key = tourKey( screen );
+
+ setRunning( false );
+
+ if ( ! state.seen.includes( key ) ) {
+ update( { ...state, seen: [ ...state.seen, key ] } );
+ }
+
+ saveTour( { seen: key } ).catch( () => {} );
+ };
+
+ const setEnabled = ( enabled ) => {
+ started.current = true;
+
+ // Turning tips back on shows every page's tour again, starting with this one.
+ update( { enabled, seen: enabled ? [] : state.seen } );
+ setRunning( enabled );
+ saveTour( enabled ? { enabled, reset: true } : { enabled } ).catch(
+ () => {}
+ );
+ };
+
+ return {
+ running,
+ steps: tourSteps()[ screen ] || [],
+ enabled: state.enabled,
+ start: () => setRunning( true ),
+ finish,
+ setEnabled,
+ };
+};
+
+/**
+ * A rect as plain numbers, relative to the viewport.
+ *
+ * @param {Element} element Element.
+ * @return {Object} `{ top, left, width, height }`.
+ */
+const rectOf = ( element ) => {
+ const box = element.getBoundingClientRect();
+
+ return {
+ top: box.top,
+ left: box.left,
+ width: box.width,
+ height: box.height,
+ };
+};
+
+/**
+ * Whether an element is on screen and visible.
+ *
+ * @param {Element|null} element Element.
+ * @return {boolean} True when it has a size.
+ */
+const isShown = ( element ) => {
+ if ( ! element ) {
+ return false;
+ }
+
+ const box = element.getBoundingClientRect();
+
+ return box.width > 0 && box.height > 0;
+};
+
+/**
+ * The running tour: dims the page, highlights one element and explains it.
+ *
+ * @param {Object} props
+ * @param {Object} props.tour Result of useTour().
+ * @return {Element|null} The tour.
+ */
+export const Tour = ( { tour } ) => {
+ if ( ! tour.running || ! tour.steps.length ) {
+ return null;
+ }
+
+ return
+
+ { rect ? (
+
+ ) : (
+
+ ) }
+
+
+ { null !== position?.arrow && position && (
+
+ ) }
+
+ { available.length > 1 && (
+
+ { sprintf(
+ /* translators: 1: step number, 2: number of steps. */
+ __( '%1$d of %2$d', 'rave-payment-forms' ),
+ place + 1,
+ available.length
+ ) }
+
+ ) }
+
+ { step.title }
+
+
{ step.body }
+
+
+ { isLast ? (
+
+ ) : (
+
+ { __( 'Skip tour', 'rave-payment-forms' ) }
+
+ ) }
+
+ { place > 0 && (
+
+ { __( 'Back', 'rave-payment-forms' ) }
+
+ ) }
+
+ { isLast
+ ? __( 'Done', 'rave-payment-forms' )
+ : __( 'Next', 'rave-payment-forms' ) }
+
+
+
+
+
setOpen( ! open ) }
+ >
+ { __( 'Help', 'rave-payment-forms' ) }
+
+ }
+ >
+
+ { tour.steps.length > 0 && (
+
{
+ close();
+ tour.start();
+ } }
+ >
+
+ { __( 'Take the tour', 'rave-payment-forms' ) }
+
+
+ { __(
+ 'A quick walk through this page.',
+ 'rave-payment-forms'
+ ) }
+
+
+ ) }
+
+
+
+
+ { __( 'Show tips', 'rave-payment-forms' ) }
+
+
+ { __(
+ 'Guide me the first time I open each page.',
+ 'rave-payment-forms'
+ ) }
+
+
+ {
+ close();
+ tour.setEnabled( enabled );
+ } }
+ />
+
+
+ { adminData().documentation && (
+
+ { __(
+ 'Flutterwave documentation',
+ 'rave-payment-forms'
+ ) }
+
+ ) }
+
+ );
+};
diff --git a/client/admin/icons.js b/client/admin/icons.js
new file mode 100644
index 0000000..a8e84d8
--- /dev/null
+++ b/client/admin/icons.js
@@ -0,0 +1,449 @@
+/**
+ * Inline SVG marks and illustrations.
+ *
+ * The two welcome-card illustrations are the real Figma exports, loaded from
+ * assets/img/admin/. The remaining marks and the success artwork are still
+ * placeholders drawn to the right proportions and colours, so layout is final
+ * even though the artwork is stand-in. See assets/img/admin/README.md for how
+ * to swap the rest in.
+ */
+
+import { createElement as el } from '@wordpress/element';
+import { adminData } from './lib/api';
+
+const svg = ( props, ...children ) =>
+ el(
+ 'svg',
+ {
+ xmlns: 'http://www.w3.org/2000/svg',
+ focusable: 'false',
+ 'aria-hidden': 'true',
+ ...props,
+ },
+ ...children
+ );
+
+/**
+ * The official Flutterwave logo, served from assets/images/admin/.
+ *
+ * @return {Element} The logo.
+ */
+export const FlutterwaveWordmark = () =>
+ el( 'img', {
+ className: 'flw-wordmark',
+ src: adminData().assetsUrl + 'flutterwave-logo.svg',
+ alt: 'Flutterwave',
+ width: 168,
+ height: 40,
+ } );
+
+export const ChevronLeft = () =>
+ svg(
+ { viewBox: '0 0 16 16', width: '16', height: '16' },
+ el( 'path', {
+ d: 'M10 3 5 8l5 5',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.6',
+ strokeLinecap: 'round',
+ strokeLinejoin: 'round',
+ } )
+ );
+
+export const ChevronDown = () =>
+ svg(
+ { viewBox: '0 0 16 16', width: '16', height: '16' },
+ el( 'path', {
+ d: 'm4 6 4 4 4-4',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.6',
+ strokeLinecap: 'round',
+ strokeLinejoin: 'round',
+ } )
+ );
+
+export const InfoIcon = () =>
+ svg(
+ { viewBox: '0 0 16 16', width: '15', height: '15' },
+ el( 'circle', {
+ cx: '8',
+ cy: '8',
+ r: '7',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.2',
+ } ),
+ el( 'path', {
+ d: 'M8 7.2v4',
+ stroke: 'currentColor',
+ strokeWidth: '1.4',
+ strokeLinecap: 'round',
+ } ),
+ el( 'circle', { cx: '8', cy: '4.9', r: '0.9', fill: 'currentColor' } )
+ );
+
+export const CheckIcon = () =>
+ svg(
+ { viewBox: '0 0 16 16', width: '12', height: '12' },
+ el( 'path', {
+ d: 'm3.5 8.4 3 3 6-6.8',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '2',
+ strokeLinecap: 'round',
+ strokeLinejoin: 'round',
+ } )
+ );
+
+/* -------------------------------------------------------------------------- */
+/* Illustrations */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * The welcome cards use the exported Figma artwork. Each file is 370x190 and
+ * carries its own rounded background, so the card wrapper adds none of its own.
+ *
+ * @param {string} file Filename inside assets/img/admin/.
+ * @return {Function} An illustration component.
+ */
+const exported = ( file ) => () =>
+ el( 'img', {
+ className: 'flw-illustration',
+ src: adminData().assetsUrl + file,
+ alt: '',
+ width: 370,
+ height: 190,
+ loading: 'lazy',
+ } );
+
+export const DocsIllustration = exported( 'welcome-docs.svg' );
+
+export const SupportIllustration = exported( 'welcome-support.svg' );
+
+export const SuccessIllustration = () =>
+ svg(
+ { viewBox: '0 0 120 120', className: 'flw-success-art' },
+ el( 'circle', { cx: '60', cy: '60', r: '58', fill: '#FFF4E3' } ),
+ el( 'rect', {
+ x: '36',
+ y: '30',
+ width: '44',
+ height: '58',
+ rx: '6',
+ fill: '#FF7A00',
+ } ),
+ el( 'rect', {
+ x: '44',
+ y: '42',
+ width: '28',
+ height: '3.5',
+ rx: '1.75',
+ fill: '#FFE0B8',
+ } ),
+ el( 'rect', {
+ x: '44',
+ y: '52',
+ width: '28',
+ height: '3.5',
+ rx: '1.75',
+ fill: '#FFE0B8',
+ } ),
+ el( 'rect', {
+ x: '44',
+ y: '62',
+ width: '18',
+ height: '3.5',
+ rx: '1.75',
+ fill: '#FFE0B8',
+ } ),
+ el( 'circle', { cx: '82', cy: '82', r: '14', fill: '#12B76A' } ),
+ el( 'path', {
+ d: 'm76 82 4 4 8-8',
+ fill: 'none',
+ stroke: '#fff',
+ strokeWidth: '2.4',
+ strokeLinecap: 'round',
+ strokeLinejoin: 'round',
+ } )
+ );
+
+/* -------------------------------------------------------------------------- */
+/* Payment method marks */
+/* -------------------------------------------------------------------------- */
+
+const mark = ( ...children ) =>
+ svg( { viewBox: '0 0 48 32', className: 'flw-method-mark' }, ...children );
+
+export const METHOD_MARKS = {
+ card: () =>
+ mark(
+ el( 'rect', {
+ x: '6',
+ y: '8',
+ width: '36',
+ height: '17',
+ rx: '3',
+ fill: '#1D2939',
+ } ),
+ el( 'rect', {
+ x: '6',
+ y: '12.5',
+ width: '36',
+ height: '4',
+ fill: '#98A2B3',
+ } ),
+ el( 'rect', {
+ x: '9.5',
+ y: '19',
+ width: '10',
+ height: '2.5',
+ rx: '1.25',
+ fill: '#98A2B3',
+ } )
+ ),
+ stablecoin: () =>
+ mark(
+ el( 'circle', { cx: '19', cy: '16', r: '9', fill: '#26A17B' } ),
+ el( 'circle', {
+ cx: '29',
+ cy: '16',
+ r: '9',
+ fill: '#2775CA',
+ opacity: '0.9',
+ } ),
+ el( 'path', {
+ d: 'M26 12.5h6M29 12.5V20',
+ stroke: '#fff',
+ strokeWidth: '1.6',
+ strokeLinecap: 'round',
+ } )
+ ),
+ banktransfer: () =>
+ mark(
+ el( 'path', { d: 'M24 6 40 14H8L24 6Z', fill: '#1D2939' } ),
+ el( 'rect', {
+ x: '11',
+ y: '16',
+ width: '3.5',
+ height: '8',
+ fill: '#1D2939',
+ } ),
+ el( 'rect', {
+ x: '22.25',
+ y: '16',
+ width: '3.5',
+ height: '8',
+ fill: '#1D2939',
+ } ),
+ el( 'rect', {
+ x: '33.5',
+ y: '16',
+ width: '3.5',
+ height: '8',
+ fill: '#1D2939',
+ } ),
+ el( 'rect', {
+ x: '8',
+ y: '25',
+ width: '32',
+ height: '3',
+ rx: '1.5',
+ fill: '#1D2939',
+ } )
+ ),
+ mobilemoney: () =>
+ mark(
+ el( 'rect', {
+ x: '15',
+ y: '4',
+ width: '18',
+ height: '25',
+ rx: '3',
+ fill: '#1D2939',
+ } ),
+ el( 'rect', {
+ x: '17.5',
+ y: '8',
+ width: '13',
+ height: '15',
+ rx: '1.5',
+ fill: '#FFC46B',
+ } ),
+ el( 'circle', { cx: '24', cy: '26', r: '1.4', fill: '#98A2B3' } ),
+ el( 'path', {
+ d: 'M22 15.5h4M24 13.5v4',
+ stroke: '#1D2939',
+ strokeWidth: '1.4',
+ strokeLinecap: 'round',
+ } )
+ ),
+ applepay: () =>
+ mark(
+ el( 'rect', {
+ x: '2',
+ y: '4',
+ width: '44',
+ height: '24',
+ rx: '5',
+ fill: '#fff',
+ stroke: '#D0D5DD',
+ } ),
+ el( 'path', {
+ d: 'M16.4 12.2c-.5.6-1.3 1.1-2.1 1-.1-.8.3-1.7.8-2.2.5-.6 1.4-1 2.1-1.1.1.9-.3 1.7-.8 2.3Zm.8 1.2c-1.2-.1-2.2.7-2.7.7-.6 0-1.4-.6-2.3-.6-1.2 0-2.3.7-2.9 1.8-1.2 2.1-.3 5.3.9 7 .6.9 1.3 1.8 2.2 1.8.9 0 1.2-.6 2.3-.6s1.4.6 2.3.6c1 0 1.6-.8 2.2-1.7.7-1 1-1.9 1-2-.1 0-1.9-.7-1.9-2.9 0-1.8 1.4-2.6 1.5-2.7-.8-1.2-2.1-1.3-2.6-1.4Z',
+ fill: '#111',
+ } ),
+ el(
+ 'text',
+ {
+ x: '24',
+ y: '21',
+ fill: '#111',
+ fontFamily: '-apple-system, Helvetica, Arial, sans-serif',
+ fontSize: '13',
+ fontWeight: '600',
+ },
+ 'Pay'
+ )
+ ),
+ googlepay: () =>
+ mark(
+ el( 'rect', {
+ x: '2',
+ y: '4',
+ width: '44',
+ height: '24',
+ rx: '5',
+ fill: '#fff',
+ stroke: '#D0D5DD',
+ } ),
+ el( 'path', {
+ d: 'M18.6 15.6v3h-1.5v-7.4h2.6c.6 0 1.2.2 1.6.7.5.4.7 1 .7 1.5 0 .6-.2 1.1-.7 1.5-.4.4-1 .7-1.6.7h-1.1Z',
+ fill: '#5F6368',
+ } ),
+ el( 'path', {
+ d: 'M14.4 14.4v1.3h2.2c-.1.6-.4 1-.8 1.3-.4.3-.9.5-1.4.5-1.2 0-2.2-1-2.2-2.2s1-2.2 2.2-2.2c.6 0 1.1.2 1.5.6l1-1a3.6 3.6 0 0 0-2.5-1 3.6 3.6 0 1 0 0 7.2c1 0 1.9-.3 2.5-1 .6-.6 .9-1.5 .9-2.5v-.6h-3.4Z',
+ fill: '#4285F4',
+ } ),
+ el(
+ 'text',
+ {
+ x: '26',
+ y: '20',
+ fill: '#5F6368',
+ fontFamily: 'Arial, sans-serif',
+ fontSize: '12',
+ fontWeight: '600',
+ },
+ 'Pay'
+ )
+ ),
+ opay: () =>
+ mark(
+ el( 'rect', {
+ x: '2',
+ y: '4',
+ width: '44',
+ height: '24',
+ rx: '5',
+ fill: '#fff',
+ stroke: '#D0D5DD',
+ } ),
+ el( 'circle', {
+ cx: '13',
+ cy: '16',
+ r: '5.5',
+ fill: 'none',
+ stroke: '#12B76A',
+ strokeWidth: '2.4',
+ } ),
+ el(
+ 'text',
+ {
+ x: '20',
+ y: '21',
+ fill: '#101B4C',
+ fontFamily: 'Arial, sans-serif',
+ fontSize: '12',
+ fontWeight: '700',
+ },
+ 'Pay'
+ )
+ ),
+};
+
+export const FilterIcon = () =>
+ svg(
+ { viewBox: '0 0 16 16', width: '14', height: '14' },
+ el( 'path', {
+ d: 'M2.5 3h11l-4.25 5v4.25L6.75 13.5V8L2.5 3Z',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.4',
+ strokeLinejoin: 'round',
+ } )
+ );
+
+export const DownloadIcon = () =>
+ svg(
+ { viewBox: '0 0 16 16', width: '14', height: '14' },
+ el( 'path', {
+ d: 'M8 2.5v7.5m0 0L5 7m3 3 3-3M3 11.5V13h10v-1.5',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.4',
+ strokeLinecap: 'round',
+ strokeLinejoin: 'round',
+ } )
+ );
+
+export const PlusIcon = () =>
+ svg(
+ { viewBox: '0 0 16 16', width: '14', height: '14' },
+ el( 'path', {
+ d: 'M8 3v10M3 8h10',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.6',
+ strokeLinecap: 'round',
+ } )
+ );
+
+export const ExternalIcon = () =>
+ svg(
+ { viewBox: '0 0 16 16', width: '12', height: '12' },
+ el( 'path', {
+ d: 'M9.5 2.5h4v4m0-4L7 9m-1-5.5H3.5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V10',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.3',
+ strokeLinecap: 'round',
+ strokeLinejoin: 'round',
+ } )
+ );
+
+export const HelpIcon = () =>
+ svg(
+ { viewBox: '0 0 20 20', width: '18', height: '18' },
+ el( 'circle', {
+ cx: '10',
+ cy: '10',
+ r: '8.25',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.5',
+ } ),
+ el( 'path', {
+ d: 'M7.75 7.6a2.3 2.3 0 0 1 4.45.8c0 1.5-2.2 1.9-2.2 3.1',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: '1.5',
+ strokeLinecap: 'round',
+ } ),
+ el( 'circle', {
+ cx: '10',
+ cy: '14.4',
+ r: '0.95',
+ fill: 'currentColor',
+ } )
+ );
diff --git a/client/admin/index.js b/client/admin/index.js
new file mode 100644
index 0000000..4b2b7e8
--- /dev/null
+++ b/client/admin/index.js
@@ -0,0 +1,33 @@
+/**
+ * Mounts the Flutterwave admin app.
+ */
+
+import { createRoot } from '@wordpress/element';
+import App from './app';
+import PaymentForms from './screens/PaymentForms';
+import Transactions from './screens/Transactions';
+import Integrations from './screens/Integrations';
+import './admin.scss';
+
+const mount = () => {
+ const root = document.getElementById( 'flutterwave-admin-root' );
+
+ if ( ! root ) {
+ return;
+ }
+
+ const screens = {
+ forms: PaymentForms,
+ transactions: Transactions,
+ integrations: Integrations,
+ };
+ const Screen = screens[ root.dataset.screen ] || App;
+
+ createRoot( root ).render( } `{ rendered }`.
+ */
+export const renderBlock = ( type, attributes ) =>
+ apiFetch( {
+ path: `/wp/v2/block-renderer/flutterwave/${ type }?context=edit`,
+ method: 'POST',
+ data: { attributes },
+ } );
+
+export const fetchIntegrations = () =>
+ apiFetch( { path: `${ NAMESPACE }/integrations` } );
+
+export const setIntegration = ( id, enabled ) =>
+ apiFetch( {
+ path: `${ NAMESPACE }/integrations/${ id }`,
+ method: 'POST',
+ data: { enabled },
+ } );
+
+/**
+ * Install a plugin from WordPress.org and activate it, through core's REST API.
+ *
+ * @param {string} slug WordPress.org slug.
+ * @return {Promise} The plugin.
+ */
+export const installPlugin = ( slug ) =>
+ apiFetch( {
+ path: '/wp/v2/plugins',
+ method: 'POST',
+ data: { slug, status: 'active' },
+ } );
+
+/**
+ * Activate an installed plugin.
+ *
+ * @param {string} plugin Plugin id as core's REST API names it, e.g. "woocommerce/woocommerce".
+ * @return {Promise} The plugin.
+ */
+export const activatePlugin = ( plugin ) =>
+ apiFetch( {
+ path: `/wp/v2/plugins/${ plugin }`,
+ method: 'POST',
+ data: { status: 'active' },
+ } );
+
+/**
+ * Update the current user's guided tips: `{ enabled }`, `{ seen }` or `{ reset: true }`.
+ *
+ * @param {Object} data Changes.
+ * @return {Promise} The saved state.
+ */
+export const saveTour = ( data ) =>
+ apiFetch( {
+ path: `${ NAMESPACE }/tour`,
+ method: 'POST',
+ data,
+ // Finish saving even when the merchant closes a tip and leaves the page at once.
+ keepalive: true,
+ } );
diff --git a/client/admin/lib/constants.js b/client/admin/lib/constants.js
new file mode 100644
index 0000000..30e0879
--- /dev/null
+++ b/client/admin/lib/constants.js
@@ -0,0 +1,157 @@
+/**
+ * Shared copy and option lists for the admin app.
+ */
+
+import { __ } from '@wordpress/i18n';
+
+export const STEPS = [
+ { key: 'general', label: __( 'General details', 'rave-payment-forms' ) },
+ { key: 'api', label: __( 'API & webhook', 'rave-payment-forms' ) },
+ { key: 'methods', label: __( 'Payment methods', 'rave-payment-forms' ) },
+ { key: 'redirects', label: __( 'Redirects', 'rave-payment-forms' ) },
+];
+
+/**
+ * Field keys saved by each step or tab. Keep in step with FLW_Settings on the PHP side.
+ */
+export const STEP_FIELDS = {
+ general: [
+ 'title',
+ 'description',
+ 'logoUrl',
+ 'buttonText',
+ 'currency',
+ 'country',
+ 'donationTitle',
+ 'donationDescription',
+ ],
+ api: [ 'publicKey', 'secretKey', 'secretHash' ],
+ methods: [ 'paymentMethods', 'advancedMethods', 'useThemeStyle' ],
+ redirects: [ 'successUrl', 'failedUrl', 'pendingUrl' ],
+};
+
+export const CURRENCY_OPTIONS = [
+ {
+ value: 'any',
+ label: __( 'Let customers choose', 'rave-payment-forms' ),
+ },
+ ...[
+ 'NGN',
+ 'GHS',
+ 'KES',
+ 'USD',
+ 'GBP',
+ 'EUR',
+ 'ZAR',
+ 'TZS',
+ 'UGX',
+ 'RWF',
+ 'ZMW',
+ ].map( ( code ) => ( { value: code, label: code } ) ),
+];
+
+export const COUNTRY_OPTIONS = [
+ { value: 'NG', label: __( 'Nigeria', 'rave-payment-forms' ) },
+ { value: 'GH', label: __( 'Ghana', 'rave-payment-forms' ) },
+ { value: 'KE', label: __( 'Kenya', 'rave-payment-forms' ) },
+ { value: 'ZA', label: __( 'South Africa', 'rave-payment-forms' ) },
+ { value: 'TZ', label: __( 'Tanzania', 'rave-payment-forms' ) },
+ { value: 'UG', label: __( 'Uganda', 'rave-payment-forms' ) },
+ { value: 'RW', label: __( 'Rwanda', 'rave-payment-forms' ) },
+ { value: 'ZM', label: __( 'Zambia', 'rave-payment-forms' ) },
+ { value: 'US', label: __( 'Worldwide', 'rave-payment-forms' ) },
+];
+
+/**
+ * The checkbox list on the "Payment methods" step. `key` maps to the groups in
+ * FLW_Settings::METHOD_MAP on the PHP side.
+ */
+export const PAYMENT_METHODS = [
+ {
+ key: 'card',
+ label: __( 'Cards (credit/debit cards)', 'rave-payment-forms' ),
+ description: __(
+ 'Pay securely using your Visa, Mastercard, or American Express.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ key: 'stablecoin',
+ label: __( 'Stablecoin', 'rave-payment-forms' ),
+ description: __(
+ 'Pay with USDT or USDC. Fast, global, and low-fee.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ key: 'banktransfer',
+ label: __( 'Bank Transfer', 'rave-payment-forms' ),
+ description: __(
+ "Transfer funds directly from your bank account using your bank's transfer service.",
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ key: 'mobilemoney',
+ label: __( 'Mobile Money', 'rave-payment-forms' ),
+ description: __(
+ 'Quick and secure payment directly from your mobile wallet.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ key: 'applepay',
+ label: __( 'Apple Pay', 'rave-payment-forms' ),
+ description: __(
+ 'Check out in seconds using your Apple Pay wallet.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ key: 'googlepay',
+ label: __( 'Google Pay', 'rave-payment-forms' ),
+ description: __(
+ 'Simple and fast checkout using the cards saved to your Google Account.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ key: 'opay',
+ label: __( 'Opay', 'rave-payment-forms' ),
+ description: __(
+ 'Pay directly from your OPay wallet or card.',
+ 'rave-payment-forms'
+ ),
+ },
+];
+
+/**
+ * Flutterwave payment options without a checkbox. Kept editable under
+ * "Advanced" so upgrading merchants never silently lose them.
+ */
+export const ADVANCED_METHODS = [
+ { key: 'ussd', label: __( 'USSD', 'rave-payment-forms' ) },
+ { key: 'qr', label: __( 'QR', 'rave-payment-forms' ) },
+ { key: 'nqr', label: __( 'NQR', 'rave-payment-forms' ) },
+ { key: 'credit', label: __( 'Credit', 'rave-payment-forms' ) },
+ { key: 'barter', label: __( 'Barter', 'rave-payment-forms' ) },
+];
+
+export const TOOLTIPS = {
+ title: __(
+ 'Shown at the top of the Flutterwave payment page. Defaults to your site name.',
+ 'rave-payment-forms'
+ ),
+ currency: __(
+ 'Forms charge in this currency unless a shortcode sets its own.',
+ 'rave-payment-forms'
+ ),
+ publicKey: __(
+ 'Your Flutterwave public key. Use a test key (FLWPUBK_TEST-…) to try payments without real money.',
+ 'rave-payment-forms'
+ ),
+ secretKey: __(
+ 'Your Flutterwave secret key, used to verify payments. It must be from the same mode as the public key.',
+ 'rave-payment-forms'
+ ),
+};
diff --git a/client/admin/lib/dates.js b/client/admin/lib/dates.js
new file mode 100644
index 0000000..ab09af0
--- /dev/null
+++ b/client/admin/lib/dates.js
@@ -0,0 +1,121 @@
+/**
+ * Date helpers for the Transactions filters. Dates are YYYY-MM-DD strings in the
+ * browser's local time, which is what } Steps keyed by screen.
+ */
+export const tourSteps = () => ( {
+ settings: [
+ {
+ title: __(
+ 'Welcome to your Flutterwave dashboard',
+ 'rave-payment-forms'
+ ),
+ body: __(
+ 'You’re set up to take payments. Here’s a one-minute look at what you can do next.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: '[data-tour="settings-tabs"]',
+ title: __( 'Your settings', 'rave-payment-forms' ),
+ body: __(
+ 'Update your business details, API keys, payment methods and redirects here, one tab at a time.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: menuLink( 'flutterwave-payment-forms' ),
+ placement: 'right',
+ title: __( 'Payment Forms', 'rave-payment-forms' ),
+ body: __(
+ 'Create payment buttons, forms, donation forms and pricing cards, and see the pages they’re on.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: menuLink( 'flutterwave-payments-transactions' ),
+ placement: 'right',
+ title: __( 'Transactions', 'rave-payment-forms' ),
+ body: __(
+ 'Every payment in one place. Filter by date, status and currency, and download a CSV.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: menuLink( 'flutterwave-payments-integrations' ),
+ placement: 'right',
+ title: __( 'Integrations', 'rave-payment-forms' ),
+ body: __(
+ 'Take Flutterwave payments in WooCommerce, Easy Digital Downloads and GiveWP.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: '[data-tour="help"]',
+ title: __( 'Help is always here', 'rave-payment-forms' ),
+ body: __(
+ 'Replay a tour or turn tips off from this menu at any time.',
+ 'rave-payment-forms'
+ ),
+ },
+ ],
+ forms: [
+ {
+ target: '[data-tour="new-form"]',
+ title: __( 'Create a form', 'rave-payment-forms' ),
+ body: __(
+ 'Pick a payment button, form, donation form or pricing card, preview it, and we’ll put it on a new page for you.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: '[data-tour="form-types"]',
+ title: __( 'Filter by type', 'rave-payment-forms' ),
+ body: __(
+ 'Every block and shortcode on your site is listed here, whichever way you added it.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: '[data-tour="form-row"]',
+ title: __( 'See what each form earns', 'rave-payment-forms' ),
+ body: __(
+ 'Each row shows the page a form is on, whether it’s live, and the payments it has taken.',
+ 'rave-payment-forms'
+ ),
+ },
+ ],
+ transactions: [
+ {
+ target: '[data-tour="filter"]',
+ title: __( 'Find a payment', 'rave-payment-forms' ),
+ body: __(
+ 'Narrow the list by date, status or currency. The last year is shown to start with.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: '[data-tour="download"]',
+ title: __( 'Download for your records', 'rave-payment-forms' ),
+ body: __(
+ 'Export any date range as a CSV file for your spreadsheet or accountant.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: '[data-tour="transaction-row"]',
+ title: __( 'Open a transaction', 'rave-payment-forms' ),
+ body: __(
+ 'Click a row for the full details. You can re-check a pending payment with Flutterwave from there.',
+ 'rave-payment-forms'
+ ),
+ },
+ ],
+ integrations: [
+ {
+ target: '[data-tour="integrations-available"]',
+ title: __( 'Connect your plugins', 'rave-payment-forms' ),
+ body: __(
+ 'Use Flutterwave in the store or donation plugin you already run. Install, activate or switch on each one from its card.',
+ 'rave-payment-forms'
+ ),
+ },
+ {
+ target: '[data-tour="integrations-soon"]',
+ title: __( 'More on the way', 'rave-payment-forms' ),
+ body: __(
+ 'These are coming next. Tell us which plugin you’d like us to add from the link at the bottom of the page.',
+ 'rave-payment-forms'
+ ),
+ },
+ ],
+} );
+
+/**
+ * The key a finished tour is remembered by.
+ *
+ * @param {string} screen Screen name.
+ * @return {string} e.g. "transactions@1".
+ */
+export const tourKey = ( screen ) => `${ screen }@${ TOUR_VERSION }`;
+
+/**
+ * Whether a screen's tour should start by itself.
+ *
+ * @param {Object} state `{ enabled, seen }` for the current user.
+ * @param {string} screen Screen name.
+ * @param {boolean} onboarded Whether onboarding is finished.
+ * @return {boolean} True the first time a screen is opened with tips on.
+ */
+export const shouldAutoStart = ( state, screen, onboarded ) =>
+ Boolean(
+ onboarded &&
+ state?.enabled &&
+ ! state.seen?.includes( tourKey( screen ) )
+ );
+
+/**
+ * The newer of the server's tour state and the copy kept in this browser.
+ *
+ * Saving happens in the background, so a merchant who closes a tip and moves
+ * straight to another page can load it before the save lands. The browser copy
+ * covers that gap; the server's copy wins when it is newer (another browser).
+ *
+ * @param {Object} server `{ enabled, seen, updated }`, updated in seconds.
+ * @param {Object|null} local `{ enabled, seen, at }`, at in milliseconds.
+ * @return {Object} `{ enabled, seen }`.
+ */
+export const pickTourState = ( server, local ) => {
+ const fromServer = {
+ enabled: server?.enabled !== false,
+ seen: Array.isArray( server?.seen ) ? server.seen : [],
+ };
+
+ if (
+ ! local ||
+ ! Array.isArray( local.seen ) ||
+ ! ( local.at / 1000 > ( server?.updated || 0 ) )
+ ) {
+ return fromServer;
+ }
+
+ return { enabled: local.enabled !== false, seen: local.seen };
+};
+
+const GAP = 14;
+const MARGIN = 16;
+
+/**
+ * Keep a value inside a range.
+ *
+ * @param {number} value Value.
+ * @param {number} min Lower bound.
+ * @param {number} max Upper bound.
+ * @return {number} Clamped value.
+ */
+const clamp = ( value, min, max ) =>
+ Math.min( Math.max( value, min ), Math.max( min, max ) );
+
+/**
+ * Where to put the tooltip next to its target.
+ *
+ * Prefers the requested side and flips when there is not enough room, then
+ * keeps the card inside the viewport. The arrow points at the target's centre.
+ *
+ * @param {Object} target Target rect `{ top, left, width, height }`, or null to centre.
+ * @param {Object} card Card size `{ width, height }`.
+ * @param {Object} viewport Viewport size `{ width, height }`.
+ * @param {string} placement "bottom" (default), "top" or "right".
+ * @return {Object} `{ top, left, side, arrow }`, where arrow is the offset along the card edge.
+ */
+export const placeTooltip = (
+ target,
+ card,
+ viewport,
+ placement = 'bottom'
+) => {
+ if ( ! target ) {
+ return {
+ top: Math.max( MARGIN, ( viewport.height - card.height ) / 2 ),
+ left: Math.max( MARGIN, ( viewport.width - card.width ) / 2 ),
+ side: 'center',
+ arrow: null,
+ };
+ }
+
+ const centreX = target.left + target.width / 2;
+ const centreY = target.top + target.height / 2;
+ const fitsBelow =
+ target.top + target.height + GAP + card.height <=
+ viewport.height - MARGIN;
+ const fitsAbove = target.top - GAP - card.height >= MARGIN;
+ const fitsRight =
+ target.left + target.width + GAP + card.width <=
+ viewport.width - MARGIN;
+
+ let side = placement;
+
+ if ( 'right' === side && ! fitsRight ) {
+ side = 'bottom';
+ }
+
+ if ( 'bottom' === side && ! fitsBelow && fitsAbove ) {
+ side = 'top';
+ } else if ( 'top' === side && ! fitsAbove && fitsBelow ) {
+ side = 'bottom';
+ }
+
+ if ( 'right' === side ) {
+ const top = clamp(
+ centreY - card.height / 2,
+ MARGIN,
+ viewport.height - card.height - MARGIN
+ );
+
+ return {
+ top,
+ left: target.left + target.width + GAP,
+ side,
+ arrow: clamp( centreY - top, 16, card.height - 16 ),
+ };
+ }
+
+ const left = clamp(
+ centreX - card.width / 2,
+ MARGIN,
+ viewport.width - card.width - MARGIN
+ );
+
+ return {
+ top:
+ 'top' === side
+ ? target.top - GAP - card.height
+ : target.top + target.height + GAP,
+ left,
+ side,
+ arrow: clamp( centreX - left, 16, card.width - 16 ),
+ };
+};
diff --git a/client/admin/lib/validate.js b/client/admin/lib/validate.js
new file mode 100644
index 0000000..8a02c65
--- /dev/null
+++ b/client/admin/lib/validate.js
@@ -0,0 +1,168 @@
+/**
+ * Per-step validation. Each function returns a map of field key to message;
+ * an empty object means the step is complete.
+ */
+
+import { __ } from '@wordpress/i18n';
+
+const blank = ( value ) => ! String( value || '' ).trim();
+
+/**
+ * Whether a value is an absolute http(s) URL.
+ *
+ * @param {string} value Candidate URL.
+ * @return {boolean} True when valid.
+ */
+export const isHttpUrl = ( value ) => {
+ try {
+ const url = new URL( String( value || '' ).trim() );
+ return 'http:' === url.protocol || 'https:' === url.protocol;
+ } catch {
+ return false;
+ }
+};
+
+/**
+ * The mode a Flutterwave key belongs to.
+ *
+ * @param {string} key The key.
+ * @param {string} prefix `FLWPUBK` or `FLWSECK`.
+ * @return {string} `test`, `live`, or an empty string when the key is not recognised.
+ */
+export const keyMode = ( key, prefix ) => {
+ const value = String( key || '' ).trim();
+
+ if ( value.startsWith( `${ prefix }_TEST-` ) ) {
+ return 'test';
+ }
+
+ return value.startsWith( `${ prefix }-` ) ? 'live' : '';
+};
+
+/**
+ * The errors worth showing before the merchant has tried to continue: format
+ * problems in fields they have filled in, not "required" errors for empty ones.
+ *
+ * @param {Object} found Errors from a validator.
+ * @param {Object} values Form values.
+ * @return {Object} Field errors.
+ */
+export const formatErrors = ( found, values ) =>
+ Object.fromEntries(
+ Object.entries( found ).filter(
+ ( [ key ] ) => ! blank( values[ key ] )
+ )
+ );
+
+/**
+ * Step 1 needs a title and a default currency.
+ *
+ * @param {Object} values Form values.
+ * @return {Object} Field errors.
+ */
+export const validateGeneral = ( values ) => {
+ const errors = {};
+
+ if ( blank( values.title ) ) {
+ errors.title = __(
+ 'Enter a title customers will see when they pay.',
+ 'rave-payment-forms'
+ );
+ }
+
+ if ( blank( values.currency ) ) {
+ errors.currency = __(
+ 'Choose the currency your forms charge in.',
+ 'rave-payment-forms'
+ );
+ }
+
+ if ( ! blank( values.logoUrl ) && ! isHttpUrl( values.logoUrl ) ) {
+ errors.logoUrl = __(
+ 'Enter a full URL, starting with https://.',
+ 'rave-payment-forms'
+ );
+ }
+
+ return errors;
+};
+
+/**
+ * Step 2 needs a matching public and secret key pair.
+ *
+ * @param {Object} values Form values.
+ * @return {Object} Field errors.
+ */
+export const validateApi = ( values ) => {
+ const errors = {};
+ const publicMode = keyMode( values.publicKey, 'FLWPUBK' );
+ const secretMode = keyMode( values.secretKey, 'FLWSECK' );
+
+ if ( blank( values.publicKey ) ) {
+ errors.publicKey = __( 'Enter your public key.', 'rave-payment-forms' );
+ } else if ( ! publicMode ) {
+ errors.publicKey = __(
+ 'Public keys start with FLWPUBK_TEST- or FLWPUBK-.',
+ 'rave-payment-forms'
+ );
+ }
+
+ if ( blank( values.secretKey ) ) {
+ errors.secretKey = __( 'Enter your secret key.', 'rave-payment-forms' );
+ } else if ( ! secretMode ) {
+ errors.secretKey = __(
+ 'Secret keys start with FLWSECK_TEST- or FLWSECK-.',
+ 'rave-payment-forms'
+ );
+ } else if ( publicMode && publicMode !== secretMode ) {
+ errors.secretKey = __(
+ 'Use a secret key from the same mode (test or live) as your public key.',
+ 'rave-payment-forms'
+ );
+ }
+
+ return errors;
+};
+
+/**
+ * Step 3 needs at least one method, otherwise checkout would offer nothing.
+ *
+ * @param {Object} values Form values.
+ * @return {Object} Field errors.
+ */
+export const validateMethods = ( values ) => {
+ const errors = {};
+ const selected =
+ ( values.paymentMethods || [] ).length +
+ ( values.advancedMethods || [] ).length;
+
+ if ( 0 === selected ) {
+ errors.paymentMethods = __(
+ 'Select at least one payment method.',
+ 'rave-payment-forms'
+ );
+ }
+
+ return errors;
+};
+
+/**
+ * Step 4 needs somewhere to send customers after each outcome.
+ *
+ * @param {Object} values Form values.
+ * @return {Object} Field errors.
+ */
+export const validateRedirects = ( values ) => {
+ const errors = {};
+
+ [ 'successUrl', 'failedUrl', 'pendingUrl' ].forEach( ( key ) => {
+ if ( ! isHttpUrl( values[ key ] ) ) {
+ errors[ key ] = __(
+ 'Enter a full URL, starting with https://.',
+ 'rave-payment-forms'
+ );
+ }
+ } );
+
+ return errors;
+};
diff --git a/client/admin/screens/FormBuilder.js b/client/admin/screens/FormBuilder.js
new file mode 100644
index 0000000..1f75f7e
--- /dev/null
+++ b/client/admin/screens/FormBuilder.js
@@ -0,0 +1,450 @@
+/**
+ * "New form" builder: pick a type, fill in a few fields with a live preview,
+ * then create a draft page with the block or copy the shortcode.
+ */
+
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+ Button,
+ CopyField,
+ Field,
+ Select,
+ TextArea,
+ TextInput,
+} from '../components';
+import { Modal } from '../components/list';
+import { adminData, createFormPage, renderBlock } from '../lib/api';
+import { toShortcode } from '../lib/shortcode';
+import { FORM_TYPES } from './form-types';
+
+const DEFAULTS = {
+ 'payment-button': { amount: 5000, buttonText: '', useUserEmail: false },
+ 'payment-form': { heading: '', description: '', amount: 0, buttonText: '' },
+ 'donation-form': { heading: '', message: '', amounts: '1000, 5000, 10000' },
+ 'pricing-card': {
+ planName: 'Starter',
+ amount: 25000,
+ features: [],
+ badge: '',
+ },
+};
+
+const PAGE_TITLES = {
+ 'payment-button': __( 'Buy now', 'rave-payment-forms' ),
+ 'payment-form': __( 'Make a payment', 'rave-payment-forms' ),
+ 'donation-form': __( 'Donate', 'rave-payment-forms' ),
+ 'pricing-card': __( 'Pricing', 'rave-payment-forms' ),
+};
+
+/**
+ * Amount input showing 0 as empty.
+ *
+ * @param {Object} props
+ * @param {string} props.id Control id.
+ * @param {number} props.value Amount.
+ * @param {Function} props.onChange Receives the number.
+ * @return {Element} The input.
+ */
+const AmountInput = ( { id, value, onChange } ) => (
+ 0 ? String( value ) : '' }
+ placeholder={ __( 'Customer enters the amount', 'rave-payment-forms' ) }
+ onChange={ ( event ) =>
+ onChange( Math.max( 0, parseFloat( event.target.value ) || 0 ) )
+ }
+ />
+);
+
+/**
+ * The fields for one form type.
+ *
+ * @param {Object} props
+ * @param {string} props.type Form type.
+ * @param {Object} props.values Attributes.
+ * @param {Function} props.setValue `( key, value ) => void`.
+ * @return {Element} The fields.
+ */
+const TypeFields = ( { type, values, setValue } ) => {
+ const { currencies = [], siteCurrency } = adminData();
+ const currency = (
+
+ ( {
+ value: code,
+ label: code,
+ } ) ) }
+ onChange={ ( event ) =>
+ setValue( 'currency', event.target.value )
+ }
+ />
+
+ );
+ const text = ( key, label, placeholder ) => (
+
+ setValue( key, event.target.value ) }
+ />
+
+ );
+ const amount = ( label ) => (
+
+ setValue( 'amount', next ) }
+ />
+
+ );
+
+ switch ( type ) {
+ case 'payment-button':
+ return (
+ <>
+
+ { amount( __( 'Amount', 'rave-payment-forms' ) ) }
+ { currency }
+
+ { text(
+ 'buttonText',
+ __( 'Button text', 'rave-payment-forms' ),
+ __( 'Pay {amount}', 'rave-payment-forms' )
+ ) }
+
+ );
+ case 'payment-form':
+ return (
+ <>
+ { text(
+ 'heading',
+ __( 'Heading', 'rave-payment-forms' ),
+ __( 'Pay an invoice', 'rave-payment-forms' )
+ ) }
+
+ { amount(
+ __(
+ 'Fixed amount (optional)',
+ 'rave-payment-forms'
+ )
+ ) }
+ { currency }
+
+ { text(
+ 'buttonText',
+ __( 'Button text', 'rave-payment-forms' ),
+ __( 'Proceed to Flutterwave', 'rave-payment-forms' )
+ ) }
+
+ );
+ case 'donation-form':
+ return (
+ <>
+ { text(
+ 'heading',
+ __( 'Heading', 'rave-payment-forms' ),
+ __( 'Support our work', 'rave-payment-forms' )
+ ) }
+
+