32279 OPs PPR UI - Duplicate Submissions

[eve-git]

Issue #: /bcgov/entity###
bcgov/entity#32279

Description of changes:
Prevent duplicate submissions

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the PPR license (Apache 2.0).

[Copilot]

Pull request overview

This PR implements duplicate submission prevention for the PPR UI by replacing the throttle-based approach with a reactive submitting flag. The changes prevent users from accidentally submitting forms multiple times through double-clicks or rapid button presses.

Changes:

• Replaced lodash throttle with a submitting flag check for financing statement submissions
• Added button disabling logic when submission is in progress
• Added comprehensive test coverage for duplicate submission prevention
• Fixed a syntax error in existing test (period to comma)

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
ppr-ui/package.json	Version bump from 6.0.8 to 6.0.9
ppr-ui/src/components/common/ButtonFooter.vue	Implemented submitting flag to prevent duplicate submissions, removed throttle from submitStatement, added flag reset on error paths, disabled button during submission
ppr-ui/tests/unit/ButtonFooter.spec.ts	Fixed syntax error and added test to verify goToPay is called only once despite multiple rapid submitNext calls

Comments suppressed due to low confidence (2)

ppr-ui/src/components/common/ButtonFooter.vue:375

• The function name 'throttleSubmitStatement' is misleading since throttling was removed in favor of the submitting flag check at the caller level. Consider renaming this function to something like 'submitStatement' or 'saveStatement' in a future refactoring to better reflect its current behavior.

    const throttleSubmitStatement = async (stateModel: StateModelIF): Promise<FinancingStatementIF> => {
      const statement = await saveFinancingStatement(
        stateModel,
        userSelectedPaymentMethod.value === ConnectPaymentMethod.DIRECT_PAY
      )
      return statement
    }

ppr-ui/tests/unit/ButtonFooter.spec.ts:364

• The test verifies that goToPay is called once when submitNext is called twice, which validates the core duplicate prevention logic. However, consider also asserting that wrapper.vm.submitting is true after the first call and that the button is disabled (expect(multiClickWrapper.find('#reg-next-btn').attributes().disabled).toBeDefined()) to fully validate the UI state during submission.

  it('calls goToPay once when ppr Review Confirm is triggered', async () => {
    const goToPayMock = vi.fn()
    const useNavigationSpy = vi.spyOn(navigationComposable, 'useNavigation').mockReturnValue({
      goToDash: vi.fn(),
      goToRoute: vi.fn(),
      goToPay: goToPayMock
    } as any)
    vi.spyOn(registrationUtils, 'saveFinancingStatement').mockResolvedValue({
      paymentPending: true,
      payment: { invoiceId: '12345' },
      documentId: 'T1000001'
    } as any)

    const multiClickWrapper = await createComponent(ButtonFooter, {
      currentStepName: RouteNames.REVIEW_CONFIRM,
      navConfig: RegistrationButtonFooterConfig,
      certifyValid: true
    }, RouteNames.REVIEW_CONFIRM, null, [pinia])

    store.getStateModel.registration = mockedModelAmendmdmentAdd.registration
    store.getStateModel.registration.lengthTrust.valid = true
    store.getStateModel.registration.parties.valid = true
    store.getStateModel.registration.collateral.valid = true
    store.isRoleStaffReg = { value: false }
    await flushPromises()

    vi.useFakeTimers()
    await multiClickWrapper.vm.submitNext()
    vi.advanceTimersByTime(3000)
    await multiClickWrapper.vm.submitNext()
    await flushPromises()

    expect(goToPayMock).toHaveBeenCalledTimes(1)
    vi.useRealTimers()
    useNavigationSpy.mockRestore()
  })

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.