Spike: form challenges api (front-end)

[jonwaldstein]

Resolves GIVE-1117

Description

This is currently a WIP...

This adds a (front-end) form challenges api to the donation form. The backend still utilizes our existing validation framework.

useEffect(() => {
    const challenge = {
      id: inputProps.name,
      async execute(setValue) {
        const prompt = window.prompt('What is the secret code?');
        const validated = prompt === '1234';

        if (validated) {
          setValue(prompt);

          return true;
        }

        setValue(null);

        return false;
      }
    };

    window.givewp.form.challenges.register(challenge);

    return () => {
      window.givewp.form.challenges.unregiste
      r(challenge);
    };

  }, []);

Affects

The donation form validation

Visuals

import {useEffect} from 'react';

export default function Field({
   Label,
   ErrorMessage,
   fieldError,
   inputProps
 }) {

  const formState = window.givewp.form.hooks.useFormState();
  const {submitCount} = formState;

  useEffect(() => {
    const challenge = {
      id: inputProps.name,
      async execute(setValue) {
        const prompt = window.prompt('What is the secret code?');
        const validated = prompt === '1234';

        if (validated) {
          setValue(prompt);

          return true;
        }

        setValue(null);

        return false;
      }
    };

    window.givewp.form.challenges.register(challenge);

    return () => {
      window.givewp.form.challenges.unregister(challenge);
    };

  }, [submitCount]);

  return (
    <label className={fieldError && 'givewp-field-error-label'}>
      <input type="hidden" {...inputProps} defaultValue={'123'} />

      <ErrorMessage />
    </label>
  );
}

Testing Instructions

WIP

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

[github-actions]

This PR is stale because it has been open 45 days with no activity. Stale PRs will NOT be automatically closed.