How to use the HandleContinue method after completion of signing process?

[tarunjawla]

Hello,i am working with docuseal signing form and i want to save the signed document by calling the method handleContinue can anyone help me with this?
`import {
Component,
OnInit,
OnDestroy,
NgZone,
ViewChild,
ElementRef,
ChangeDetectorRef
} from '@angular/core';
import { NzModalRef } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
import { EntityAgreementService } from '../../../services/entity-agreement.service';
import { Router } from '@angular/router';
import { firstValueFrom } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@component({
selector: 'app-docuseal-form',
template: `

<div
class="docuseal-form-container"
[class.form-signed]="isDocumentSigned"
>

<div *ngIf="isLoading" class="loading-message">

    <!-- DocuSeal form with Angular bindings -->
    <docuseal-form
      *ngIf="!isLoading && formUrl && !isAlreadySigned"
      #docusealForm
      [attr.data-src]="formUrl"
      [attr.data-auto-height]="true"
      [attr.data-readonly]="true"
      [attr.data-hide-title]="true"
      [attr.data-custom-css]="customCss"
      [attr.data-prefill]="prefillDataJson"
      [attr.data-completed-redirect-url]="'/publisher'"
      [attr.data-with-decline]="false"
    >
    </docuseal-form>

    <!-- Already signed message -->
    <div *ngIf="isAlreadySigned" class="already-signed-message">
      <nz-alert
        nzType="success"
        nzMessage="Agreement Already Signed"
        nzDescription="You have already signed this agreement. Redirecting to homepage..."
        class="mb-3"
      ></nz-alert>
    </div>
  </div>

  <!-- Success message and continue button -->
  <div *ngIf="isDocumentSigned" class="success-overlay">
    <div class="success-content">
      <nz-alert
        nzType="success"
        nzMessage="Document signed successfully!"
        nzDescription="Click the button below to continue"
        class="mb-3"
      ></nz-alert>
      <button
        nz-button
        nzType="primary"
        nzSize="large"
        (click)="handleContinue()"
        [nzLoading]="isSaving"
      >
        Continue to Homepage
      </button>
    </div>
  </div>
</div>

, styles: [
.docuseal-container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

  .docuseal-form-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  docuseal-form {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
  }

  .loading-message,
  .already-signed-message {
    text-align: center;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .already-signed-message {
    background: #f6ffed;
  }

  .success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .success-content {
    background: white;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: center;
    max-width: 400px;
    width: 90%;
  }

  .mb-3 {
    margin-bottom: 16px;
  }

  :host ::ng-deep {
    .ant-btn-primary {
      background-color: #1890ff;
      border-color: #1890ff;
    }
  }

  .form-signed {
    opacity: 0.6;
    pointer-events: none;
  }
`

]
})
export class DocuSealFormComponent implements OnInit, OnDestroy {
@ViewChild('docusealForm') docusealFormElement: ElementRef;

formUrl: string;
userData: any;
prefillData: any = {};
prefillDataJson: string;

isLoading = true;
isDocumentSigned = false;
isAlreadySigned = false;
isSaving = false;
private signedDocumentUrl: string;
private docusealInstance: any;

// Custom CSS for DocuSeal form
customCss = #submit_form_button { background-color: #1890ff !important; border-color: #1890ff !important; color: white !important; } #submit_form_button:hover { background-color: #40a9ff !important; border-color: #40a9ff !important; };

constructor(
private modalRef: NzModalRef,
private messageService: NzMessageService,
private entityAgreementService: EntityAgreementService,
private router: Router,
private ngZone: NgZone,
private cdr: ChangeDetectorRef,
private http: HttpClient
) {}

async ngOnInit() {
// Get data from modal config
const modalData = this.modalRef.getConfig().nzData;
this.formUrl = modalData.formUrl;

// Set up prefill data if available
if (modalData.userData) {
  const prefillData = {
    email: modalData.userData.email || '',
    name: modalData.userData.name || ''
  };
  this.prefillDataJson = JSON.stringify(prefillData);
}

if (!this.formUrl) {
  this.messageService.error('Failed to load signing form');
  this.modalRef.close();
  return;
}

try {
  // Check if the form has already been submitted using the backend service
  const publisherId = modalData.publisherId;
  if (publisherId) {
    const status = await firstValueFrom(
      this.entityAgreementService.checkFormSubmissionStatus(publisherId)
    );

    if (status.isSubmitted) {
      console.log('Form already submitted:', status.submitterInfo);
      this.isAlreadySigned = true;

      // Automatically redirect after a short delay
      setTimeout(() => {
        this.ngZone.run(() => {
          this.modalRef.close(true);
          this.router.navigate(['/publisher']);
        });
      }, 2000);
    }
  }
} catch (error) {
  console.error('Error checking form status:', error);
} finally {
  this.isLoading = false;
  this.cdr.detectChanges();
}

// Add event listener for completed event
if (this.docusealFormElement?.nativeElement) {
  const formElement = this.docusealFormElement.nativeElement;
  formElement.addEventListener('completed', this.handleCompletedEvent);
}

}

private handleCompletedEvent = (event: any) => {
console.log('DocuSeal completed event:', event);

if (event?.detail?.submission?.signed_pdf_url) {
  this.signedDocumentUrl = event.detail.submission.signed_pdf_url;

  // Use NgZone to ensure Angular detects the changes
  this.ngZone.run(() => {
    this.isDocumentSigned = true;
    this.cdr.detectChanges();

    // Automatically continue after a short delay
    setTimeout(() => {
      this.handleContinue();
    }, 1000);
  });
}

};

async handleContinue() {
if (!this.signedDocumentUrl) {
this.messageService.error('No signed document found');
return;
}

try {
  this.isSaving = true;
  const publisherId = this.modalRef.getConfig().nzData.publisherId;

  console.log('Saving signed agreement...', {
    publisherId,
    signedDocumentUrl: this.signedDocumentUrl
  });

  // Save signed agreement
  await firstValueFrom(
    this.entityAgreementService.saveSignedAgreement(
      publisherId,
      this.signedDocumentUrl
    )
  );

  console.log('Agreement saved successfully');
  this.messageService.success('Agreement saved successfully');

  // Close modal and navigate to publisher homepage
  this.modalRef.close(true);
} catch (error) {
  console.error('Failed to save signed agreement:', error);
  this.messageService.error('Failed to save agreement');
} finally {
  this.isSaving = false;
}

}

ngOnDestroy() {
// Remove event listeners
if (this.docusealFormElement?.nativeElement) {
const formElement = this.docusealFormElement.nativeElement;
formElement.removeEventListener('completed', this.handleCompletedEvent);
}
}
}
`

[omohokcoj]

@tarun2001jawla use webhooks to download signed documents - documents can't be downloaded form the client-side javascript
https://www.docuseal.com/docs/api#form-webhook

[tarunjawla]

Okay, but how can i call some method after completing the process?

[omohokcoj]

Use javascript ‘completed’ event https://www.docuseal.com/docs/embedded/form#javascript.completed

…

On Mar 11, 2025, at 12:27 PM, Tarun Jawla ***@***.***> wrote: Okay, but how can i call some method after completing the process? — Reply to this email directly, view it on GitHub <#452 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABJK6JGRF74YBDMRJBUDLRT2T23ARAVCNFSM6AAAAABYYPTHF6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENBWGAYTIMA>. You are receiving this because you commented.

[tarunjawla]

Okay, thanks