Frontend/form submission validation visibility (#878)

### Requirements List
- _None_

### Description List
- Update practitioner registration and obtain privileges form to include
a feature that scrolls and focuses the user to the first invalid
required input in the form (from top to bottom)
- Undoes the prior flow which includes disabled continue buttons until
all required fields are valid
- Improve unrelated test coverage
- Fix mobile bug where nav would scroll behind the fixed next / previous
buttons in the obtain privileges flow
- Update payment summary screen title

### Testing List
- `yarn test:unit:all` should run without errors or warnings
- `yarn serve` should run without errors or warnings
- `yarn build` should run without errors or warnings
- `yarn test:unit:coverage` confirm the branches line item has an
updated acceptable percentage
- Code review
- Testing
- Proceed to the practitioner registration form and confirm that the
continue button is no longer disabled and will auto position screen to
the first invalid required field in the form, as well as direct focus on
that input element, with the exception of radio buttons which will focus
the entire input group
        - Confirm that form can be successfully submitted as expected 
- Confirm that same experience in the obtain privileges form flow with a
slight exception to the select privileges screen which disables the
continue button initially until at least 1 state is selected
        - Confirm that form can be successfully submitted as expected 

Closes #855 
Closes #863
Closes #605  

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
* Forms now automatically scroll and focus to the first invalid input
when validation fails.
* Payment summary screen displays a new overlay payment button when
submission is disabled.

* **Bug Fixes**
* Validation for checkboxes and attestations now correctly enforces that
required boxes must be checked.
* Attestation inputs for state selection are now managed more reliably,
improving form behavior.

* **Style**
  * Improved spacing and layout for form navigation and payment buttons.
  * Enhanced error highlighting for checkbox fields.
* Main navigation now appears above more elements due to increased
stacking order.

* **Localization**
  * Updated Spanish translation for "payment summary".

* **Tests**
* Added tests for form validation, scrolling to invalid inputs, and date
formatting utilities.

* **Refactor**
  * Simplified logic for enabling submit buttons in several forms.
  * Streamlined attestation input management in state selection forms.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: rmolinares

webroot/src/components/Forms/InputRadioGroup/InputRadioGroup.vue

@@ -7,6 +7,7 @@
 
 <template>
     <div
+        :id="formInput.id"
         class="input-container radio-group-container"
         :class="{
             'has-error': !!formInput.errorMessage,

webroot/src/components/Forms/_mixins/form.mixin.ts

@@ -42,6 +42,12 @@ class MixinForm extends Vue {
         return values;
     }
 
+    get formInputs(): Array<FormInput> {
+        return this.formKeys
+            .map((key) => this.formData[key])
+            .filter((input) => input instanceof FormInput);
+    }
+
     get formSubmitInputs(): Array<FormInput> {
         const { formData } = this;
 
@@ -155,23 +161,23 @@ class MixinForm extends Vue {
     }
 
     validateAll(config: any = {}): void {
-        const { formData } = this;
-
-        this.formKeys.forEach((key) => {
+        this.formInputs.forEach((input) => {
             if (config.asTouched) {
-                formData[key].isTouched = true;
+                input.isTouched = true;
             }
-
-            formData[key].validate();
+            input.validate();
         });
 
         this.checkValidForAll();
+
+        // Scroll to first invalid input unless explicitly skipped
+        if (!this.isFormValid && !config.skipErrorScroll) {
+            this.showInvalidFormError();
+        }
     }
 
     checkValidForAll(): void {
-        const { formData } = this;
-
-        this.isFormValid = this.formKeys.every((key) => formData[key].isValid);
+        this.isFormValid = this.formInputs.every((input) => input.isValid);
     }
 
     updateFormSubmitSuccess(message: string): void {
@@ -211,6 +217,31 @@ class MixinForm extends Vue {
         this.updateFormSubmitError(errorMessage);
     }
 
+    showInvalidFormError(): void {
+        // Find the first invalid input that has a validation schema
+        const firstInvalidInput = this.formInputs.find((input) =>
+            !input.isSubmitInput && !input.isValid);
+
+        // If we found an invalid input, try to scroll to and focus its input by name
+        if (firstInvalidInput) {
+            this.scrollToInput(firstInvalidInput);
+        }
+    }
+
+    protected scrollToInput(formInput: FormInput): void {
+        const element = document.getElementsByName(formInput.name)[0] as HTMLElement | undefined;
+
+        if (element) {
+            // Scroll to the element
+            element.scrollIntoView({
+                behavior: 'smooth',
+                block: 'center'
+            });
+
+            element.focus();
+        }
+    }
+
     @Watch('locale') localeChanged() {
         // @TODO: For now we just brute force the form re-init on language change. Making all the layers reactive (messages inside Joi schemas, etc) was messy.
         this.initFormInputs();

webroot/src/components/Forms/_mixins/mixins.spec.ts

@@ -9,6 +9,8 @@ import { mountShallow } from '@tests/helpers/setup';
 import FormMixin from '@components/Forms/_mixins/form.mixin';
 import InputMixin from '@components/Forms/_mixins/input.mixin';
 import { FormInput } from '@models/FormInput/FormInput.model';
+import Joi from 'joi';
+import sinon from 'sinon';
 
 const chaiMatchPattern = require('chai-match-pattern');
 const chai = require('chai').use(chaiMatchPattern);
@@ -124,6 +126,96 @@ describe('Form mixin', async () => {
 
         expect(component.isFormError).to.equal(true);
     });
+    it('should show invalid form error when there is an invalid input', async () => {
+        const wrapper = await mountShallow(FormMixin);
+        const component = wrapper.vm;
+        const formInput = new FormInput({
+            name: 'test-input',
+            isValid: false,
+            isSubmitInput: false,
+            validation: Joi.string().required()
+        });
+        const spy = sinon.spy();
+
+        component.formData.testInput = formInput;
+        component.scrollToInput = spy;
+        component.showInvalidFormError();
+
+        expect(spy.calledOnce).to.equal(true);
+    });
+    it('should not call scrollToInput when all inputs are valid', async () => {
+        const wrapper = await mountShallow(FormMixin);
+        const component = wrapper.vm;
+        const formInput = new FormInput({
+            name: 'test-input',
+            isValid: true,
+            isSubmitInput: false,
+        });
+        const spy = sinon.spy();
+
+        component.formData.testInput = formInput;
+        component.scrollToInput = spy;
+        component.showInvalidFormError();
+
+        expect(spy.notCalled).to.equal(true);
+    });
+    it('should skip submit inputs when finding invalid form inputs', async () => {
+        const wrapper = await mountShallow(FormMixin);
+        const component = wrapper.vm;
+        const submitInput = new FormInput({
+            name: 'submit-input',
+            isValid: false,
+            isSubmitInput: true,
+            validation: Joi.string().required()
+        });
+        const regularInput = new FormInput({
+            name: 'regular-input',
+            isValid: false,
+            isSubmitInput: false,
+            validation: Joi.string().required()
+        });
+        const spy = sinon.spy();
+
+        component.formData.submitInput = submitInput;
+        component.formData.regularInput = regularInput;
+        component.scrollToInput = spy;
+        component.showInvalidFormError();
+
+        expect(spy.calledOnce).to.equal(true);
+        expect(spy.firstCall.args[0].name).to.equal(regularInput.name);
+    });
+    it('should scroll to input element when element exists', async () => {
+        const wrapper = await mountShallow(FormMixin);
+        const component = wrapper.vm;
+        const formInput = new FormInput({
+            name: 'test-input',
+        });
+        const scrollSpy = sinon.spy();
+        const focusSpy = sinon.spy();
+        const mockElement = {
+            scrollIntoView: scrollSpy,
+            focus: focusSpy
+        } as unknown as HTMLElement;
+
+        sinon.stub(document, 'getElementsByName').callsFake((name: string) => {
+            if (name === 'test-input') {
+                return {
+                    length: 1,
+                    0: mockElement,
+                    item: (index: number) => (index === 0 ? mockElement : null),
+                } as unknown as NodeListOf<HTMLElement>;
+            }
+            return {
+                length: 0,
+                item: () => null,
+            } as unknown as NodeListOf<HTMLElement>;
+        });
+
+        component.scrollToInput(formInput);
+
+        expect(scrollSpy.calledOnce).to.be.true;
+        expect(focusSpy.calledOnce).to.be.true;
+    });
 });
 describe('Input mixin', async () => {
     it('should mount the component', async () => {

webroot/src/components/Page/PageMainNav/PageMainNav.less

@@ -11,7 +11,7 @@
     position: fixed;
     top: @appHeaderHeight;
     left: 0;
-    z-index: 1;
+    z-index: 4;
     display: flex;
     flex-direction: column;
     width: 0;

webroot/src/components/PrivilegeCard/PrivilegeCard.vue

@@ -135,7 +135,7 @@
                                         ? $t('common.loading')
                                         : $t('licensing.confirmPrivilegeDeactivateSubmit')"
                                     :isWarning="true"
-                                    :isEnabled="isFormValid && !isFormLoading"
+                                    :isEnabled="!isFormLoading"
                                 />
                             </div>
                         </form>

webroot/src/components/PrivilegePurchaseFinalize/PrivilegePurchaseFinalize.less

@@ -115,6 +115,25 @@
                 }
             }
         }
+
+        .payment-button-container {
+            position: relative;
+            flex-grow: 1;
+
+            .payment-overlay-button {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 1;
+                justify-content: start;
+                width: 100%;
+                height: 100%;
+
+                :deep(.input-button) {
+                    width: 100%;
+                }
+            }
+        }
     }
 
     .form-row {

webroot/src/components/PrivilegePurchaseFinalize/PrivilegePurchaseFinalize.ts

@@ -265,7 +265,7 @@ export default class PrivilegePurchaseFinalize extends mixins(MixinForm) {
                 id: 'no-refunds-check',
                 name: 'no-refunds-check',
                 label: this.$t('licensing.noRefundsMessage'),
-                validation: Joi.boolean().required(),
+                validation: Joi.boolean().invalid(false).required().messages(this.joiMessages.boolean),
                 value: false,
                 isDisabled: false
             }),
@@ -382,4 +382,13 @@ export default class PrivilegePurchaseFinalize extends mixins(MixinForm) {
 
         formButtons?.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
+
+    handlePaymentButtonClick(): void {
+        // Validate all inputs first to ensure we have current validation state
+        this.validateAll({ asTouched: true });
+
+        if (!this.isFormValid) {
+            this.showInvalidFormError();
+        }
+    }
 }

webroot/src/components/PrivilegePurchaseFinalize/PrivilegePurchaseFinalize.vue

@@ -10,7 +10,7 @@
         <form class="complete-purchase-form" @submit.prevent="() => null">
             <div class="finalize-purchase-container">
                 <div class="finalize-purchase-title-row">
-                    <h1 class="finalize-purchase-title">{{$t('payment.payment')}}</h1>
+                    <h1 class="finalize-purchase-title">{{$t('payment.paymentSummary')}}</h1>
                 </div>
                 <MockPopulate :isEnabled="isMockPopulateEnabled" @selected="mockPopulate" />
                 <div class="cost-breakdown-container">
@@ -55,14 +55,23 @@
             <div v-if="formErrorMessage" class="form-error-message">{{formErrorMessage}}</div>
             <div id="button-row" class="button-row">
                 <div class="form-nav-buttons">
-                    <PrivilegePurchaseAcceptUI
-                        class="form-nav-button accept-ui"
-                        :paymentSdkConfig="currentCompactPaymentSdkConfig"
-                        :buttonLabel="$t('common.next')"
-                        :isEnabled="!isFormLoading && isSubmitEnabled"
-                        @success="acceptUiSuccessResponse"
-                        @error="acceptUiErrorResponse"
-                    />
+                    <div class="payment-button-container">
+                        <InputButton
+                            v-if="!isSubmitEnabled"
+                            :label="$t('payment.payment')"
+                            :isDisabled="isFormLoading || !isSubmitEnabled"
+                            class="payment-overlay-button"
+                            @click="handlePaymentButtonClick"
+                        />
+                        <PrivilegePurchaseAcceptUI
+                            class="form-nav-button accept-ui"
+                            :paymentSdkConfig="currentCompactPaymentSdkConfig"
+                            :buttonLabel="$t('payment.payment')"
+                            :isEnabled="!isFormLoading && isSubmitEnabled"
+                            @success="acceptUiSuccessResponse"
+                            @error="acceptUiErrorResponse"
+                        />
+                    </div>
                     <InputButton
                         :label="$t('common.back')"
                         :isTransparent="true"