setView( VIEW.SETTINGS ) } /> }
+
+ { VIEW.SETTINGS === view && (
+
+
+
+ { onBack ? (
+
+ { backLabel }
+
+ ) : (
+
+ { backLabel }
+
+ ) }
+
+
+
+
{ children }
+ { aside &&
{ aside }
}
+
+
+ { /* translators: 1: current step number, 2: total number of steps. */
+ __( 'Step', 'rave-woocommerce-payment-gateway' ) }{ ' ' }
+
+ { current } { __( 'of', 'rave-woocommerce-payment-gateway' ) } { 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-woocommerce-payment-gateway' )
+ : __( 'Copy', 'rave-woocommerce-payment-gateway' ) }
+
+
+ );
+};
+
+/**
+ * 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 }
+
+ ×
+
+
+);
diff --git a/client/admin/fonts/Inter-cyrillic-ext-normal.woff2 b/client/admin/fonts/Inter-cyrillic-ext-normal.woff2
new file mode 100644
index 0000000..405017d
Binary files /dev/null and b/client/admin/fonts/Inter-cyrillic-ext-normal.woff2 differ
diff --git a/client/admin/fonts/Inter-cyrillic-normal.woff2 b/client/admin/fonts/Inter-cyrillic-normal.woff2
new file mode 100644
index 0000000..f57ab2f
Binary files /dev/null and b/client/admin/fonts/Inter-cyrillic-normal.woff2 differ
diff --git a/client/admin/fonts/Inter-greek-ext-normal.woff2 b/client/admin/fonts/Inter-greek-ext-normal.woff2
new file mode 100644
index 0000000..2fc07e9
Binary files /dev/null and b/client/admin/fonts/Inter-greek-ext-normal.woff2 differ
diff --git a/client/admin/fonts/Inter-greek-normal.woff2 b/client/admin/fonts/Inter-greek-normal.woff2
new file mode 100644
index 0000000..41576da
Binary files /dev/null and b/client/admin/fonts/Inter-greek-normal.woff2 differ
diff --git a/client/admin/fonts/Inter-latin-ext-normal.woff2 b/client/admin/fonts/Inter-latin-ext-normal.woff2
new file mode 100644
index 0000000..fb2522c
Binary files /dev/null and b/client/admin/fonts/Inter-latin-ext-normal.woff2 differ
diff --git a/client/admin/fonts/Inter-latin-normal.woff2 b/client/admin/fonts/Inter-latin-normal.woff2
new file mode 100644
index 0000000..937631c
Binary files /dev/null and b/client/admin/fonts/Inter-latin-normal.woff2 differ
diff --git a/client/admin/fonts/Inter-vietnamese-normal.woff2 b/client/admin/fonts/Inter-vietnamese-normal.woff2
new file mode 100644
index 0000000..e905732
Binary files /dev/null and b/client/admin/fonts/Inter-vietnamese-normal.woff2 differ
diff --git a/client/admin/fonts/Millik.woff2 b/client/admin/fonts/Millik.woff2
new file mode 100644
index 0000000..ce3671b
Binary files /dev/null and b/client/admin/fonts/Millik.woff2 differ
diff --git a/client/admin/fonts/Moderat-Bold.woff2 b/client/admin/fonts/Moderat-Bold.woff2
new file mode 100644
index 0000000..f44b8a3
Binary files /dev/null and b/client/admin/fonts/Moderat-Bold.woff2 differ
diff --git a/client/admin/fonts/Moderat-Medium.woff2 b/client/admin/fonts/Moderat-Medium.woff2
new file mode 100644
index 0000000..d655c1a
Binary files /dev/null and b/client/admin/fonts/Moderat-Medium.woff2 differ
diff --git a/client/admin/fonts/Moderat-Regular.woff2 b/client/admin/fonts/Moderat-Regular.woff2
new file mode 100644
index 0000000..dc9dd31
Binary files /dev/null and b/client/admin/fonts/Moderat-Regular.woff2 differ
diff --git a/client/admin/icons.js b/client/admin/icons.js
new file mode 100644
index 0000000..a26f174
--- /dev/null
+++ b/client/admin/icons.js
@@ -0,0 +1,195 @@
+/**
+ * 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 );
+
+export const FlutterwaveWordmark = () =>
+ svg(
+ { viewBox: '0 0 200 32', className: 'flw-wordmark', role: 'img', 'aria-label': 'Flutterwave' },
+ el( 'path', {
+ d: 'M14.8 4.2c4.6-2.6 10.2-.9 12.6 3.7 2.3 4.6.5 10.2-4 12.7l-9.9 5.5c-4.6 2.6-10.2.9-12.6-3.7C-1.4 17.8.4 12.2 5 9.7l9.8-5.5Z',
+ fill: '#F5A623',
+ } ),
+ el( 'path', {
+ d: 'M5.2 4.2C9.8 1.6 15.4 3.3 17.8 7.9c2.3 4.6.5 10.2-4 12.7-4.6 2.6-10.2.9-12.6-3.7C-1.1 12.3.7 6.7 5.2 4.2Z',
+ fill: '#F04E23',
+ opacity: '0.85',
+ } ),
+ el(
+ 'text',
+ { x: '40', y: '23', fill: '#2B1A0F', fontFamily: 'Georgia, serif', fontSize: '22', fontWeight: '600' },
+ 'flutterwave'
+ )
+ );
+
+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'
+ )
+ ),
+};
diff --git a/client/admin/index.js b/client/admin/index.js
new file mode 100644
index 0000000..4f00edd
--- /dev/null
+++ b/client/admin/index.js
@@ -0,0 +1,23 @@
+/**
+ * Mounts the Flutterwave admin app.
+ */
+
+import { createRoot } from '@wordpress/element';
+import App from './app';
+import './style.scss';
+
+const mount = () => {
+ const root = document.getElementById( 'flutterwave-admin-root' );
+
+ if ( ! root ) {
+ return;
+ }
+
+ createRoot( root ).render( 0 ? () => setActive( active - 1 ) : undefined }
+ >
+
+ { TABS.map( ( item, index ) => (
+ {
+ setErrors( {} );
+ setActive( index );
+ } }
+ >
+ { item.label }
+
+ ) ) }
+
+
+
+
+
+
+
+ { tab.cta }
+
+
+
+ );
+};
+
+export default Settings;
diff --git a/client/admin/screens/Success.js b/client/admin/screens/Success.js
new file mode 100644
index 0000000..9dc4072
--- /dev/null
+++ b/client/admin/screens/Success.js
@@ -0,0 +1,38 @@
+/**
+ * Terminal screen of the wizard. Auto-advances to the settings view so the
+ * merchant is not left on a dead end.
+ */
+
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { SuccessIllustration } from '../icons';
+
+/**
+ * @param {Object} props
+ * @param {Function} props.onDone Called once the confirmation has been shown.
+ * @return {Element} The success screen.
+ */
+const Success = ( { onDone } ) => {
+ useEffect( () => {
+ const timer = setTimeout( onDone, 2600 );
+ return () => clearTimeout( timer );
+ }, [ onDone ] );
+
+ return (
+
+
+
{ __( 'Store setup successful!', 'rave-woocommerce-payment-gateway' ) }
+
+ { __(
+ 'You have successfully connected your Flutterwave for Business account to WooCommerce.',
+ 'rave-woocommerce-payment-gateway'
+ ) }
+
+
+ { __( 'Go to settings', 'rave-woocommerce-payment-gateway' ) } →
+
+
+
+
+
+
+ { __( 'Welcome to Flutterwave', 'rave-woocommerce-payment-gateway' ) }
+
+
+
+ { __(
+ 'Flutterwave enables you to collect payments in over 30 currencies worldwide. With support for Cards, Mobile money, Bank transfer, Apple Pay, Google Pay and more.',
+ 'rave-woocommerce-payment-gateway'
+ ) }
+
+
+
+ { __( 'Activate Flutterwave', 'rave-woocommerce-payment-gateway' ) }
+
+
+
+
+ );
+};
+
+export default Welcome;
diff --git a/client/admin/screens/Wizard.js b/client/admin/screens/Wizard.js
new file mode 100644
index 0000000..73cd7a5
--- /dev/null
+++ b/client/admin/screens/Wizard.js
@@ -0,0 +1,134 @@
+/**
+ * The three-step onboarding wizard.
+ *
+ * Each step saves on "Save & continue" so a merchant who drops out halfway
+ * keeps what they entered, and the final step flips the onboarding flag and
+ * enables the gateway.
+ */
+
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Page, StepBadge, Stepper, Button, LoadingScreen } from '../components';
+import { GeneralForm, ApiForm, MethodsForm } from './forms';
+import { STEPS } from '../lib/constants';
+import { saveSettings, completeOnboarding } from '../lib/api';
+import { validateGeneral, validateApi, validateMethods } from '../lib/validate';
+
+const STEP_META = [
+ {
+ title: __( 'General details', 'rave-woocommerce-payment-gateway' ),
+ subtitle: __( 'Please fill in your correct details to setup your store', 'rave-woocommerce-payment-gateway' ),
+ crumb: __( 'Flutterwave Payment', 'rave-woocommerce-payment-gateway' ),
+ fields: [ 'title', 'description', 'paymentStyle', 'autocompleteOrder' ],
+ validate: validateGeneral,
+ Form: GeneralForm,
+ },
+ {
+ title: __( 'API & webhook', 'rave-woocommerce-payment-gateway' ),
+ subtitle: __( 'Please fill in your correct details to setup your store', 'rave-woocommerce-payment-gateway' ),
+ crumb: __( 'General', 'rave-woocommerce-payment-gateway' ),
+ fields: [ 'testPublicKey', 'testSecretKey', 'livePublicKey', 'liveSecretKey', 'secretHash', 'goLive' ],
+ validate: validateApi,
+ Form: ApiForm,
+ },
+ {
+ title: __( 'Payment methods', 'rave-woocommerce-payment-gateway' ),
+ subtitle: __( 'Add your preferred methods to your checkout.', 'rave-woocommerce-payment-gateway' ),
+ crumb: __( 'API & Webhook', 'rave-woocommerce-payment-gateway' ),
+ fields: [ 'paymentMethods', 'advancedMethods', 'disableLogging', 'disableBarter' ],
+ validate: validateMethods,
+ Form: MethodsForm,
+ },
+];
+
+/**
+ * @param {Object} props
+ * @param {Object} props.values Current form values.
+ * @param {Function} props.setValue `( key, value ) => void`.
+ * @param {Function} props.onSaved Receives the payload returned by the API.
+ * @param {Function} props.onFinished Called after the final step saves.
+ * @param {Function} props.onError Receives an error message.
+ * @return {Element} The wizard.
+ */
+const Wizard = ( { values, setValue, onSaved, onFinished, onError } ) => {
+ const [ index, setIndex ] = useState( 0 );
+ const [ busy, setBusy ] = useState( false );
+ const [ submitting, setSubmitting ] = useState( false );
+ const [ errors, setErrors ] = useState( {} );
+
+ const meta = STEP_META[ index ];
+ const { Form } = meta;
+ const isLast = index === STEP_META.length - 1;
+
+ // Mirrors the designs: the primary button stays faded until the step is
+ // actually completable.
+ const complete = Object.keys( meta.validate( values ) ).length === 0;
+
+ const patchFor = ( step ) =>
+ step.fields.reduce( ( patch, key ) => ( { ...patch, [ key ]: values[ key ] } ), {} );
+
+ const advance = async () => {
+ const found = meta.validate( values );
+
+ if ( Object.keys( found ).length ) {
+ setErrors( found );
+ return;
+ }
+
+ setErrors( {} );
+ setBusy( true );
+
+ try {
+ if ( isLast ) {
+ setSubmitting( true );
+ const payload = await completeOnboarding( patchFor( meta ) );
+ onSaved( payload );
+ onFinished();
+ } else {
+ const payload = await saveSettings( patchFor( meta ) );
+ onSaved( payload );
+ setIndex( index + 1 );
+ }
+ } catch ( error ) {
+ setSubmitting( false );
+ onError( error?.message || __( 'Could not save your settings. Please try again.', 'rave-woocommerce-payment-gateway' ) );
+ } finally {
+ setBusy( false );
+ }
+ };
+
+ if ( submitting ) {
+ return 0 ? () => setIndex( index - 1 ) : undefined }
+ aside={ { meta.title }
+ { meta.subtitle }
+ 0 ? 'has-back' : '' }` }>
+ { index > 0 && (
+ setIndex( index - 1 ) } disabled={ busy }>
+ { __( 'Go back', 'rave-woocommerce-payment-gateway' ) }
+
+ ) }
+
+ { isLast
+ ? __( 'Save', 'rave-woocommerce-payment-gateway' )
+ : __( 'Save & continue', 'rave-woocommerce-payment-gateway' ) }
+
+
+
+ );
+};
+
+export default Wizard;
diff --git a/client/admin/screens/forms.js b/client/admin/screens/forms.js
new file mode 100644
index 0000000..c994d12
--- /dev/null
+++ b/client/admin/screens/forms.js
@@ -0,0 +1,317 @@
+/**
+ * The three form bodies, shared by the onboarding wizard and the tabbed
+ * settings screen so both surfaces stay in step with one another.
+ */
+
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+ Field,
+ TextInput,
+ TextArea,
+ Select,
+ Checkbox,
+ CopyField,
+} from '../components';
+import { METHOD_MARKS } from '../icons';
+import {
+ CHECKOUT_OPTIONS,
+ PAYMENT_METHODS,
+ ADVANCED_METHODS,
+ TOOLTIPS,
+} from '../lib/constants';
+
+/**
+ * A random 64-character hex string, the same shape the server generates.
+ *
+ * @return {string} The new secret hash.
+ */
+const generateSecretHash = () => {
+ const bytes = new Uint8Array( 32 );
+ window.crypto.getRandomValues( bytes );
+
+ return Array.from( bytes, ( byte ) => byte.toString( 16 ).padStart( 2, '0' ) ).join( '' );
+};
+
+/**
+ * Step 1 — payment method title, description, checkout style, autocomplete.
+ *
+ * @param {Object} props
+ * @param {Object} props.values Current form values.
+ * @param {Function} props.setValue `( key, value ) => void`.
+ * @param {Object} [props.errors] Per-field validation messages.
+ * @return {Element} The form body.
+ */
+export const GeneralForm = ( { values, setValue, errors = {} } ) => (
+ <>
+
+ setValue( 'title', event.target.value ) }
+ />
+
+
+
+