Multiple Requests at the same time from the same user

I'm facing an issue when submitting the verifyPINForm form. In some cases, the request for verifyOtp is being sent twice at the same time, which is causing issues on the backend side.

• the component template:

<form [formGroup]="verifyPINForm" novalidate (ngSubmit)="submitForm()">
<div class="enter-verification-code">
<p>{{ "VERIFICATION_CODE_TITLE" | translate }}</p>
<input inputmode="numeric" [ngClass]="{ 'invalid-field': verifyPINForm.invalid && isFormSubmitted }"
type="text" formControlName="pin"
maxlength="6"
placeholder="{{ 'OTP_PLACE_HOLDER' | translate }}"
/>
<div class="error-text-container"
*ngIf="(pinControl.invalid && pinControl.touched) && pinControl.dirty">
<small *ngIf="pinControl.errors?.required" class="text-danger">
{{"VALIDATION.PIN_REQUIRED" | translate}}
</small>
</div>
</div>

<button type="button" (click)="closeDialog()"
*ngIf="!!errorMessage ||
statusCode == sendOtpErrors.discount_code_used_error ||
statusCode == sendOtpErrors.discount_code_used_same_time_error ||
statusCode == sendOtpErrors.discount_code_not_active ||
statusCode == sendOtpErrors.already_sent_otp">
{{"TRY_AGAIN" | translate}}
</button>
<button *ngIf="!errorMessage &&
statusCode != sendOtpErrors.discount_code_used_error &&
statusCode != sendOtpErrors.discount_code_used_same_time_error &&
statusCode != sendOtpErrors.discount_code_not_active &&
statusCode != sendOtpErrors.already_sent_otp"
[disabled]="submissionInProgress || isDisabledSendBtn || isFormSubmitted || utilService.isLoading || verifyPINForm.invalid"
type="submit">
{{"CONFIRM_PAYMENT_ACTION" | translate}}
</button>
</form>

• The component ts file:

submitForm(): void {
if (this.shouldPreventSubmission()) {
this.utilService.logMessage("Submission prevented - already processing", null);
return;
}

// Immediately set flags to prevent subsequent attempts
this.prepareForSubmission();

// Generate a unique request ID to track this specific submission
const requestId = this.generateRequestId();
this.currentRequestId = requestId;

// Add a small delay to ensure UI updates before processing
setTimeout(() => {
// Only proceed if this is still the active request
if (this.currentRequestId === requestId) {
this.processVerifyOtp(requestId);
} else {
this.utilService.logMessage("Request already superseded by newer request", null);
}
}, 50);
}

private processVerifyOtp(requestId: string): void {
if (requestId !== this.currentRequestId) {
return;
}

const payload: VerifyTransactionOtpRequest = {
transactionOTP: this.pinControl.value,
transactionId: this.state.transactionID
};

this.utilService.logMessage("Verify Otp payload: ", payload);
this.utilService.showLoading();

this.transactionService.verifyOtp(payload)
.pipe(
finalize(() => {
// Only process completion if this is still the active request
if (requestId === this.currentRequestId) {
this.utilService.hideLoading();
this.currentRequestId = null; // Clear request ID
this.handleSubmissionComplete();
}
})
)
.subscribe({
next: (response: any) => {
// Only process success if this is still the active request
if (requestId === this.currentRequestId) {
this.handleVerifyOtpResponse(response);
}
},
error: (error) => {
// Only process error if this is still the active request
if (requestId === this.currentRequestId) {
this.handleVerifyOtpError(error);
}
}
});
}

• The request :

public verifyOtp(payload: VerifyTransactionOtpRequest) {
return this._http.post<VerifyTransactionOtpResponse>(ApiEndpointsMapper.payment.transaction.commit.verifyOtp, payload)
}


What could cause this issue to happen? and is it may be related to user internet connection?

I've tried to put a timeout after the user clicks the form submission button in case there was a slight time frame where the button is enabled between the form processing the response and moving to the next modal but the issue presisted.

Continue reading...