How to prevent multiple orders being submitted within a couple seconds?

LFS version: requires v12.09 or later

Context:

When an agent reaches the final Order Summary Screen in any of the Limio flows and clicks the Submit button, a callout is triggered to the Limio system to publish the order. After clicking Submit, the button becomes greyed out and unclickable to prevent multiple submissions.

However, a specific issue arises if the agent clicks Next after clicking Submit to navigate through the flow during order processing.

If the Next button is clicked:

1. The component on the Order Summary Screen reloads.

2. The Submit button becomes enabled again.

3. The ongoing order context is lost:

   • Agents cannot view the loading events of the ongoing order.

   • Agents might inadvertently click Submit again, submitting a duplicate order.

This behavior can lead to unnecessary issues, including duplicate submissions and associated consequences.

Solution: Introducing submittedOrderFlag

To address this problem, we introduced a new property called submittedOrderFlag in the flowOrderSummary component and an accompanying input for self-reference. Here’s how it works:

1. submittedOrderFlag: Tracks whether an order has already been submitted.

2. Self-Reference Input: Allows the flow to persist the submission status in the flow context.

Steps to Implement

1. Add Self-Reference to the Input:

   • Open the flow in the Flow Builder.

   • Locate the flowOrderSummary component.

   • Add the self-reference input to the component to check for an already submitted order.

2. Save a New Flow Copy:

   • After making the changes, save the flow with a new version.

3. Activate the Updated Flow:

   • Activate the new version to ensure it takes effect.

How It Works

1. 1. Order Submission Triggers the Flag
      When the agent submits an order, the submittedOrderFlag is automatically set in the flow context.

   2. Submit Button Gets Disabled
      With the flag set, the Submit button is immediately greyed out and becomes unclickable. This visually confirms that the submission is in progress or completed.

   3. Reload-Resistant UX
      If the agent clicks Next and the component reloads (as might happen during navigation), the submittedOrderFlag remains in context. As a result:

      • The Submit button stays disabled.

      • A message appears stating:
        “This order has already been submitted.”
        
        

Why This Matters

This mechanism ensures:

• No accidental duplicate submissions — even during reloads.

• Clear visual feedback — both the disabled button and confirmation message reinforce submission state.

Note

Navigating Back Re-enables Submission
If the agent clicks Previous, the flow treats this as a change to the order. In this case:

• • The submittedOrderFlag is cleared.

  • The Submit button becomes active again, allowing the agent to submit a new version of the order.