@piserve-tech/form-submission 1.3.317 → 1.3.319

package/src/form-submission/submit-form/submit-form.component.ts

@@ -1,1953 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  SimpleChanges,
-  ViewChild,
-} from '@angular/core';
-import { FormService } from '../../services/form.service';
-import * as mapper from '../../services/mapper.service';
-import { PublicForm } from '../../models/publicForm.model';
-import { ToastrService } from 'ngx-toastr';
-import { Router } from '@angular/router';
-import { DataService } from '../../services/data.service';
-import { RecaptchaService } from '../../services/recaptcha.service';
-import { ValidationService } from '../../services/validation.service';
-import { ElementTrackerService } from '../../services/element-tracker.service';
-import { NavigationTabsComponent } from '../navigation-tabs/navigation-tabs.component';
-import { FormValidationService } from '../../services/form-validation.service';
-import { AggregationFunctionService } from '../../services/aggregate.service';
-import { EmitterDTO } from '../../models/emitters.model';
-import { ScoreCalculationService } from '../../services/score.service';
-import { MatDialog } from '@angular/material/dialog';
-import { SaveDraftModalComponent } from '../save-as-draft/saveDraftModalComponent ';
-import { WhenClauseService } from '../../services/whenClause.service';
-import { HttpEventType } from '@angular/common/http';
-
-interface Answer {
-  questionId: string;
-  answer: any;
-  answerId?: string;
-  deleteFiles?: string[];
-  fields?: any;
-}
-
-interface Submission {
-  submissionId?: string;
-  answers: Answer[];
-}
-
-interface Form {
-  formId: string;
-  deleted?: boolean;
-  deletedSubmissions: any[];
-  submissions: Submission[];
-  copiedForms: string[];
-  scores?:{
-    scoreType: string;
-    score: number;
-  }[];
-  maximumPossibleScore?:number;
-  show?:boolean;
-}
-
-interface CopyForms{
-  id: string,
-  title: string,
-  description: string,
-  parentSubform: string,
-  questionRelation: Record<string, string>;
-}
-
-interface WhenClauseElements{
-  elementId:string;
-  entityType:string;
-  show:boolean;
-}
-
-interface QuestionAnswersWrapper {
-  parentId: string;
-  answers: Answer[];
-  forms: Form[];
-  copySubForms:CopyForms[];
-  scores?:{
-    scoreType: string;
-    score: number;
-  }[];
-  maximumPossibleScore?:number;
-  whenClauseElements: WhenClauseElements[]
-}
-
-interface SubmissionScore {
-  scoreType: string;
-  score: number;
-}
-
-@Component({
-  selector: 'lib-submit-form',
-  templateUrl: './submit-form.component.html',
-  styleUrls: ['./submit-form.component.scss'],
-})
-export class SubmitFormComponent implements OnInit, OnDestroy {
-  question: PublicForm | null = null;
-  @Input() moduleName: string = '';
-  @Input() edit: boolean = false;
-  @Input() submissionId: string = '';
-  @Input() acceptedLanguage: string = '';
-  @Input() skipMargin: boolean = false;
-  @Input() skipValidation: boolean = false;
-  @Input() navigateTo: string = '';
-  @Input() country: string = '';
-  @Output() submit: EventEmitter<any> = new EventEmitter<any>();
-  @Output() apiCalled: EventEmitter<boolean> = new EventEmitter<boolean>();
-  @Output() currentPageIndexChange: EventEmitter<number> =
-    new EventEmitter<number>();
-  @Input() showCancelButton: boolean = false;
-  @Output() cancel: EventEmitter<string> = new EventEmitter<string>();
-  @ViewChild(NavigationTabsComponent, { static: false })
-  child!: NavigationTabsComponent;
-  @Input() isActionTriggered: boolean = false;
-  isLoading: boolean = false;
-  name: string = '';
-  saveAutomatically: boolean = false;
-  saveInterval: number = 0;
-  customizeFont: boolean = false;
-  fontFamily: string = '';
-  fontSize: number = 0;
-  validationSkip: boolean = false;
-  enableDataExport: boolean = false;
-  fileFormats: string[] = [];
-  enableQuestionNumbering: boolean = false;
-  questionNumbering: string = '';
-  enableGoogleRecaptcha: boolean = false;
-  googleRecaptchaKey: string = '';
-  googleRecaptchaSecret: string = '';
-  navigation: string = '';
-  markAllQuestionsAsRequired: boolean = false;
-  pages: any = [];
-  currentPageIndex: number = 0;
-  previousPage: any = {};
-  currentPage: any = {};
-  nextPage: any = {};
-  lastTab: boolean = false;
-  questionAnswers: QuestionAnswersWrapper = {
-    parentId: '',
-    answers: [],
-    forms: [],
-    copySubForms: [],
-    whenClauseElements: []
-  };
-  webhook: any;
-  files: { questionId: string; file: any ; show?:boolean}[] = [];
-  parentQuestions: any;
-  submission: any = {};
-  parentQuestionAnswers: any;
-  parentSubmissionId: string = '';
-  submissionInProgress: boolean = false;
-  submissionInDraft: boolean = false;
-  recaptchaToken: string = '';
-  private isRefreshing: boolean = false;
-  private intervalId: ReturnType<typeof setInterval> | null = null;
-  pageDetails: any = [];
-  pageNumber: number = 1;
-  rowSet: number = 0;
-  rowSetCount: [number] = [0];
-  retryCount: number = 0;
-  maxRetries: number = 5;
-
-  eligibleForSubmission: { status: boolean; message: string } = {
-    status: true,
-    message: '',
-  };
-  webhookPayloadArray: any[] = [];
-  inValidQuestions: Map<string, string> = new Map<string, string>();
-  visitedRows: Map<number, number> = new Map<number, number>();
-  allElementIds: string[] = [];
-  private debounceTimer: any;
-  primaryColor: string = '#084fff';
-  secondaryColor: string = '';
-  isLoadingPages: boolean = false;
-  copySubforms: CopyForms[] = [];
-  emitters: EmitterDTO[] = [];
-  maxPossibleScore!: number;
-  maxPossibleGoodScore!: number;
-  maxPossibleBadScore!: number;
-  sumOfFindings!: number;
-  sumOfGoodFindings!: number;
-  sumOfBadFindings!: number;
-  draft: boolean = false;
-  submissionProgress = 0;
-  showSubmissionLoader = false;
-  progressInterval: any;
-  currentStep = 'Submitting form';
-  animatedDots = '';
-  private dotInterval: any;
-
-  constructor(
-    private formService: FormService,
-    private toastr: ToastrService,
-    private router: Router,
-    private dataService: DataService,
-    private recaptchaService: RecaptchaService,
-    private validationService: ValidationService,
-    private changeDetectorRef: ChangeDetectorRef,
-    private elementTracker: ElementTrackerService,
-    private formValidationService: FormValidationService,
-    private aggregateService: AggregationFunctionService,
-    private scoreCalcService: ScoreCalculationService,
-    public dialog: MatDialog,
-    private whenClauseService:WhenClauseService
-  ) {
-    const navigation = this.router.getCurrentNavigation();
-    this.submission = navigation?.extras.state?.['submission'];
-    this.parentSubmissionId = this.submission?.id;
-    this.parentQuestionAnswers = this.submission?.questionAnswers;
-    this.parentQuestions = navigation?.extras.state?.['parentQuestions'];
-    this.dataService.setParentQuestions(this.parentQuestions);
-  }
-  ngOnDestroy(): void {
-    this.visitedRows.clear();
-    this.recaptchaService.removeRecaptchaScript();
-    if (this.intervalId) {
-      clearInterval(this.intervalId);
-      this.intervalId = null;
-      this.isRefreshing = false;
-    }
-    this.aggregateService.clearAll();
-    this.recaptchaService.removeRecaptchaScript();
-    this.whenClauseService.resetService();
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['acceptedLanguage']) {
-      this.currentPageIndex = 0;
-      this.acceptedLanguage = changes['acceptedLanguage'].currentValue;
-      if (!this.edit) this.getFormData();
-    }
-    if(changes['submissionId']){
-      this.submissionId=changes['submissionId'].currentValue;
-      if (this.edit && this.submissionId) {
-        this.getSubmittedFormData();
-      }
-    }
-  }
-
-  ngOnInit() {
-    if (this.edit && this.submissionId) {
-      // this.getSubmittedFormData();
-    } else {
-      // this.getFormData();
-    }
-
-    if (this.enableGoogleRecaptcha) {
-      this.recaptchaInitialized();
-    }
-  }
-
-  async recaptchaInitialized() {
-    await this.recaptchaService.initialize();
-    this.recaptchaService.render('captcha-container', (token) => {});
-  }
-
-  async getToken(): Promise<string> {
-    return new Promise(async (resolve) => {
-      try {
-        await this.recaptchaService.initialize();
-
-        // Check if CAPTCHA was rendered
-        if (!this.recaptchaService.isRendered()) {
-          console.warn('reCAPTCHA not rendered yet.');
-          return resolve('');
-        }
-
-        // If solved, return the token
-        if (this.recaptchaService.isResolved()) {
-          const token = this.recaptchaService.getResponse();
-
-          return resolve(token);
-        }
-
-        // If expired or unsolved, return empty string
-        console.warn('reCAPTCHA not resolved or expired.');
-        return resolve('');
-      } catch (err) {
-        console.error('reCAPTCHA initialization failed:', err);
-        return resolve('');
-      }
-    });
-  }
-
-  loadFont(fontName: string): void {
-    const fontPath = `assets/fonts/${fontName}.woff2`; // Adjust extension as per your font file
-    const style = document.createElement('style');
-    style.innerHTML = `
-      @font-face {
-        font-family: '${fontName}';
-        src: url('${fontPath}') format('woff2');
-        font-weight: normal;
-        font-style: normal;
-      }
-      body {
-        font-family: '${fontName}', sans-serif;
-      }
-    `;
-    document.head.appendChild(style);
-  }
-
-  getFormData() {
-    this.isLoadingPages = true;
-    this.formService
-      .getQuestions(this.moduleName, 1, 0, true,this.country)
-      .subscribe((response: any) => {
-        this.isLoadingPages = false;
-        this.enableGoogleRecaptcha =
-          response.result.moduleConfiguration?.enableGoogleRecaptcha;
-        this.question = mapper.mapPublicFormToModel(response);
-        this.emitters = this.question.emitters || [];
-        this.assignQuestionProperties(this.question);
-        this.setUpFontFamily(response);
-        this.primaryColor = response.result.primaryColor || '#084fff';
-        this.secondaryColor = response.result.secondaryColor;
-        if (this.enableGoogleRecaptcha) this.recaptchaInitialized();
-        if (response?.result?.pageDetails) {
-          this.pageDetails = response.result.pageDetails;
-          this.nextPage = this.pageDetails[1];
-        }
-        this.webhook = response?.result?.webhooks;
-        this.webhookPayloadArray = response?.result?.webhooks?.map(
-          (w: any) => ({
-            id: w.id,
-            ...this.extractGroupedWebhookData([w]),
-          })
-        );
-
-        this.rowSetCount[0] = response.result.totalNumberRow;
-        for (let i = 0; i < this.pageDetails.length; i++) {
-          if (!this.pages[i]) {
-            this.pages[i] = [];
-          }
-        }
-        this.checkSubmissionEligibility();
-      });
-  }
-
-  getSubmittedFormData() {
-    this.formService
-      .getSubmittedForm(
-        this.moduleName,
-        this.submissionId,
-        1,
-        0,
-        this.navigateTo
-      )
-      .subscribe((response) => {
-        this.enableGoogleRecaptcha =
-          response.result.moduleConfiguration.enableGoogleRecaptcha;
-        this.question = mapper.mapPublicFormToModel(response);
-        this.assignQuestionProperties(this.question);
-        this.primaryColor = response.result.primaryColor || '#084fff';
-        this.secondaryColor = response.result.secondaryColor;
-        this.emitters = this.question.emitters || [];
-        if (response?.result?.pageDetails) {
-          this.pageDetails = response.result.pageDetails;
-          this.nextPage = this.pageDetails[1];
-        }
-        this.webhookPayloadArray;
-        this.webhookPayloadArray = response?.result?.webhooks?.map(
-          (w: any) => ({
-            id: w.id,
-            ...this.extractGroupedWebhookData([w]),
-          })
-        );
-        this.rowSetCount[0] = response.result.totalNumberRow;
-        for (let i = 0; i < this.pageDetails.length; i++) {
-          if (!this.pages[i]) {
-            this.pages[i] = [];
-          }
-        }
-        this.setUpFontFamily(response);
-        if (this.navigateTo) {
-          setTimeout(() => {
-            this.navigateToFormElement();
-          });
-        }
-        if (this.enableGoogleRecaptcha) {
-          this.recaptchaInitialized();
-        }
-        this.checkSubmissionEligibility();
-      });
-  }
-
-  setUpFontFamily(response: any) {
-    //set font family and font size
-    if (response.result?.moduleConfiguration?.customizeFont) {
-      this.fontFamily = response.result.moduleConfiguration?.fontFamily;
-      this.fontSize = response.result.moduleConfiguration?.fontSize || 18;
-    } else {
-      this.fontFamily = 'Poppins';
-      this.fontSize = 18;
-    }
-    this.loadFont(this.fontFamily);
-    document.documentElement.style.setProperty(
-      '--library-font-family',
-      this.fontFamily
-    );
-    document.documentElement.style.setProperty(
-      '--library-font-size',
-      this.fontSize + 'px'
-    );
-  }
-
-  navigateToFormElement() {
-    if (!this.pages) return;
-
-    let foundPageIndex: number | null = null;
-
-    // Step 1: find the page index
-    this.pages.forEach((page: any, pageIndex: number) => {
-      if (!page?.rows) return;
-
-      page.rows.forEach((row: any) => {
-        if (!row?.grid) return;
-
-        row.grid.forEach((gridItem: any) => {
-          const element = gridItem?.element;
-          if (!element) return;
-
-          // Case 1: Direct question match
-          if (
-            gridItem.entityType === 'QUESTION' &&
-            element.id === this.navigateTo
-          ) {
-            foundPageIndex = pageIndex;
-          }
-
-          // Case 2: Subform match
-          if (gridItem.entityType === 'SUBFORM') {
-            if (element.id === this.navigateTo) {
-              foundPageIndex = pageIndex;
-            }
-            if (
-              element.submissions?.some(
-                (s: any) => s.submissionId === this.navigateTo
-              )
-            ) {
-              foundPageIndex = pageIndex;
-            }
-          }
-        });
-      });
-    });
-
-    if (foundPageIndex !== null) {
-      // Step 2: Set current page
-      this.currentPageIndex = foundPageIndex;
-      this.currentPage = this.pages[this.currentPageIndex];
-
-      if (this.navigation == 'TAB') {
-        this.child.triggerFunction(this.currentPageIndex);
-      } else {
-
-        this.previousPage = this.pageDetails[this.currentPageIndex - 1];
-        this.nextPage = this.pageDetails[this.currentPageIndex + 1];
-      }
-      // Step 3: Wait for DOM render and scroll
-      setTimeout(() => {
-        const elementId = `question-${this.navigateTo}`;
-        const el = document.getElementById(elementId);
-        if (el) {
-          el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-          this.checkSubmissionEligibility();
-        }
-      }, 0);
-    } else {
-      console.warn(`navigateTo id ${this.navigateTo} not found in any page`);
-    }
-  }
-
-  assignQuestionProperties(question: PublicForm) {
-    this.name = question.name;
-    this.pages = question.pages;
-    if (this.parentQuestions) {
-      this.parentQuestionAnswers = question?.questionAnswers;
-      this.parentSubmissionId = question?.parentId;
-    }
-    this.currentPage = this.pages[0];
-    this.nextPage = this.pages[1];
-    this.saveAutomatically = question.formConfiguration.saveAutomatically;
-    this.saveInterval = question.formConfiguration.saveInterval;
-    this.customizeFont = question.formConfiguration.customizeFont;
-    this.fontFamily = question.formConfiguration.fontFamily;
-    this.fontSize = question.formConfiguration.fontSize;
-    this.enableDataExport = question.formConfiguration.enableDataExport;
-    this.fileFormats = question.formConfiguration.fileFormats;
-    this.enableQuestionNumbering =
-      question.formConfiguration.enableQuestionNumbering;
-    this.questionNumbering = question.formConfiguration.questionNumbering;
-    this.enableGoogleRecaptcha =
-      question.formConfiguration.enableGoogleRecaptcha;
-    this.googleRecaptchaKey = question.formConfiguration.googleRecaptchaKey;
-    this.googleRecaptchaSecret =
-      question.formConfiguration.googleRecaptchaSecret;
-    this.navigation = question.formConfiguration.navigation;
-    this.markAllQuestionsAsRequired =
-      question.formConfiguration.markAllQuestionsAsRequired;
-    this.apiCalled.emit(true);
-  }
-
-  navigateToNextPage() {
-    if (!this.isLoading) {
-      this.isLoading = true;
-      const nextIndex = this.currentPageIndex + 1;
-      if (nextIndex < this.pageDetails.length) {
-        if (this.markAllQuestionsAsRequired) {
-          const currentPageData = this.pages[this.currentPageIndex];
-          let validationResponse = true;
-          if (!this.validationSkip) {
-            validationResponse =
-              this.formValidationService.validateRequiredQuestions(
-                currentPageData
-              ).isValid;
-          }
-          if (validationResponse) {
-            this.previousPage = this.pageDetails[this.currentPageIndex];
-            if (this.pages[nextIndex].length != 0) {
-              this.currentPage = this.pages[nextIndex];
-              this.currentPageIndex = nextIndex;
-            } else {
-              this.setCurrentPage(nextIndex);
-            }
-            this.nextPage = this.pageDetails[nextIndex + 1];
-          }
-        } else {
-          this.previousPage = this.pageDetails[this.currentPageIndex];
-          if (this.pages[nextIndex].length != 0) {
-            this.currentPage = this.pages[nextIndex];
-            this.currentPageIndex = nextIndex;
-          } else {
-            this.setCurrentPage(nextIndex);
-          }
-          this.nextPage = this.pageDetails[nextIndex + 1];
-        }
-      }
-      this.isLoading = false;
-      this.checkSubmissionEligibility();
-    }
-  }
-
-  navigateToPreviousPage() {
-    if (this.currentPageIndex > 0) {
-      if (this.markAllQuestionsAsRequired) {
-        const currentPageData = this.pages[this.currentPageIndex];
-        let validationResponse = true;
-        if (!this.validationSkip) {
-          validationResponse =
-            this.formValidationService.validateRequiredQuestions(
-              currentPageData
-            ).isValid;
-        }
-        if (validationResponse) {
-          this.nextPage = this.pageDetails[this.currentPageIndex];
-          this.currentPageIndex--;
-          if (this.pages[this.currentPageIndex].length != 0) {
-            this.currentPage = this.pages[this.currentPageIndex];
-          } else {
-            this.setCurrentPage(this.currentPageIndex);
-          }
-          this.previousPage = this.pageDetails[this.currentPageIndex - 1];
-        }
-      } else {
-        this.nextPage = this.pageDetails[this.currentPageIndex];
-        this.currentPageIndex--;
-        if (this.pages[this.currentPageIndex].length != 0) {
-          this.currentPage = this.pages[this.currentPageIndex];
-        } else {
-          this.setCurrentPage(this.currentPageIndex);
-        }
-        this.previousPage = this.pageDetails[this.currentPageIndex - 1];
-      }
-    }
-    this.checkSubmissionEligibility();
-  }
-
-  checkSubmissionEligibility(): void {
-    this.eligibleForSubmission = this.validateAllElementLoaded();
-  }
-
-  setCurrentPage(index: number) {
-    if (index < this.pages.length) {
-      // If page already exists AND has content → no need to fetch again
-      if (
-        this.pages[index] &&
-        this.pages[index].rows &&
-        this.pages[index].rows.length > 0
-      ) {
-        this.checkSubmissionEligibility();
-        return;
-      }
-    }
-    this.pageNumber = index + 1;
-    if (this.edit) {
-      this.formService
-        .getSubmittedForm(
-          this.moduleName,
-          this.submissionId,
-          this.pageNumber,
-          this.rowSet
-        )
-        .subscribe((response: any) => {          
-          const mappedResponse = mapper.mapPageToModel(response.result.pages[0],response.result?.currency,response.result?.defaultCurrency);
-          if (mappedResponse) {
-            this.pages[index] = mappedResponse;
-          }
-          this.currentPageIndex = index;
-          this.currentPage = this.pages[index];
-          this.rowSetCount[index] = response.result.totalNumberRow;
-          this.checkSubmissionEligibility();
-        });
-    } else {
-      this.formService
-        .getQuestions(this.moduleName, this.pageNumber, this.rowSet, true,this.country)
-        .subscribe((response: any) => {
-          const mappedResponse = mapper.mapPageToModel(response.result.pages[0],response.result?.currency,response.result?.defaultCurrency);
-          if (mappedResponse) {
-            this.pages[index] = mappedResponse;
-          }
-          this.currentPageIndex = index;
-          this.currentPage = this.pages[index];
-          this.rowSetCount[index] = response.result.totalNumberRow;
-          this.checkSubmissionEligibility();
-        });
-    }
-
-    if (this.markAllQuestionsAsRequired) {
-      const currentPageData = this.pages[this.currentPageIndex];
-      let validationResponse = true;
-      if (!this.validationSkip) {
-        validationResponse =
-          this.formValidationService.validateRequiredQuestions(
-            currentPageData
-          ).isValid;
-      }
-      if (validationResponse) {
-        this.currentPageIndex = index;
-      } else {
-        this.checkSubmissionEligibility();
-        return;
-      }
-    } else {
-      this.checkSubmissionEligibility();
-      this.currentPageIndex = index;
-    }
-  }
-
-  loadMoreData(index: number): void {
-    if (!this.isLoading) {
-      this.isLoading = true;
-      let rowCountLimit = this.rowSetCount[index];
-      let i = 0;
-      this.pages[index].rows.forEach((row: any) => {
-        row.grid.forEach((gridItem: any) => {
-          i++;
-        });
-      });
-      let rowCount = i / 20;
-      rowCount = Math.ceil(rowCount);
-
-      if (this.visitedRows.has(index)) {
-        if (this.visitedRows.get(index) === rowCount) {
-          this.isLoading = false;
-          return;
-        }
-      }
-
-      if (rowCount + 1 > rowCountLimit && !this.navigateTo) {
-        this.checkSubmissionEligibility();
-        this.isLoading = false;
-        return;
-      }
-      this.visitedRows.set(index, rowCount);
-
-      if (this.edit) {
-        this.formService
-          .getSubmittedForm(
-            this.moduleName,
-            this.submissionId,
-            index + 1,
-            rowCount
-          )
-          .subscribe((response: any) => {
-            const newRows = response?.result?.pages[0]?.rows ?? [];
-            this.pages[index].rows = [
-              ...(this.pages[index]?.rows ?? []),
-              ...newRows,
-            ];
-            this.currentPageIndex = index;
-            this.currentPage = this.pages[index];
-            this.rowSetCount[index] = response.result.totalNumberRow;
-            this.checkSubmissionEligibility();
-            this.isLoading = false;
-          });
-      } else {
-        this.formService
-          .getQuestions(this.moduleName, index + 1, rowCount)
-          .subscribe((response: any) => {
-            const newRows = response?.result?.pages[0]?.rows ?? [];
-            this.pages[index].rows = [
-              ...(this.pages[index]?.rows ?? []),
-              ...newRows,
-            ];
-            this.currentPageIndex = index;
-            this.currentPage = this.pages[index];
-            this.rowSetCount[index] = response.result.totalNumberRow;
-            this.checkSubmissionEligibility();
-            this.isLoading = false;
-          });
-      }
-
-      this.checkSubmissionEligibility();
-    }
-  }
-
-  generateQuestionAnswers() {
-    this.maxPossibleScore = 1;
-    this.sumOfFindings = 0;
-    this.sumOfBadFindings = 0;
-    this.sumOfGoodFindings = 0;
-    this.maxPossibleBadScore = 0;
-    this.maxPossibleGoodScore = 0;
-    this.copySubforms = [];
-
-    // this.maxPossibleGoodScore = 0;
-    // this.maxPossibleBadScore = 0;
-    const extractQuestions = (
-      formElements: any[],
-      parentFormId: string | null = null,
-      isInSubForm: boolean = false,
-      subFormIndex: number = 0
-    ): { answers: Answer[]; forms: Form[] } => {
-      const questions: Answer[] = [];
-      const forms: Form[] = [];
-      formElements.forEach((element) => {
-        if (element.entityType === 'QUESTION' && element.show) {
-          let baseQuestion: any;
-          if (element.element.formElement.elementType === 'FILE_PICKER') {
-            baseQuestion = {
-              questionId: element.element.id,
-              answer: '',
-            };
-            if (Array.isArray(element.element.answer)) {
-              const questionId = isInSubForm
-                ? `${parentFormId}_${subFormIndex}_${element.element.id}`
-                : element.element.id;
-              this.files.push({
-                questionId: questionId,
-                file: element.element.answer,
-                show: element.show
-              });
-            }
-          } else {
-            baseQuestion = {
-              questionId: element.element.id,
-              answer: element.element.answer,
-              score: element.element.score,
-              maximumPossibleScore: element.element.maxPossibleScore,
-              currencySymbol: element.element?.currencySymbol,
-              amountInWords: element.element?.amountInWords,
-              show: element.show
-            };
-          }
-          if (this.edit) {
-            questions.push({
-              ...baseQuestion,
-              answerId: element.element.answerId || '',
-              deleteFiles: element.element.deleteFiles || [],
-            });
-          } else {
-            questions.push(baseQuestion);
-          }
-
-          if (
-            (element.element.formElement.elementType === 'DROP_DOWN' ||
-              element.element.formElement.elementType === 'RADIO_BUTTON' ||
-              element.element.formElement.elementType === 'CHECK_BOX') &&
-            element.element.formElement.scoring &&
-            element.element.formElement.scoring.enableScoring &&
-            !isInSubForm
-          ) {
-            this.maxPossibleScore *=
-              this.scoreCalcService.getMaxPossibleScoreForQuestion(
-                element.element
-              );
-            if (
-              element.element.score &&
-              element.element.score != null &&
-              element.element.score != undefined
-            ) {
-              this.sumOfFindings += element.element.score;
-            }
-          }
-
-          if (element.element.childLogics) {
-            for (let logic of element.element.childLogics) {
-              if (logic.showLogic) {
-                for (let row of logic.rows) {
-                  const result = extractQuestions(
-                    row.grid,
-                    parentFormId,
-                    isInSubForm,
-                    subFormIndex
-                  );
-                  questions.push(...result.answers);
-                  forms.push(...result.forms);
-                }
-              }
-            }
-          }
-        } else if (element.entityType === 'SUBFORM' && element.show) {
-          const subformId = element.element.id;
-          const submissionId = element.element.submissionId;
-          if (element.element.copySubformMeta) {
-            this.copySubforms.push(element.element.copySubformMeta);
-          }
-          if (element.element.property.subFormStructure === 'single') {
-            let allAnswers: Answer[] = [];
-
-            element.element.rows.forEach((row: any) => {
-              const extracted = extractQuestions(
-                row.grid,
-                subformId,
-                true,
-                forms.length
-              );
-              extracted.answers.forEach((answer) => {
-                allAnswers.push({ ...answer });
-              });
-            });
-            let copiedForms;
-            if (element.element.copiedForms) {
-              copiedForms = element.element.copiedForms;
-            }
-            const subform: Form = {
-              formId: subformId,
-              deleted: element.element.deleted,
-              deletedSubmissions: [],
-              submissions: [
-                {
-                  submissionId: submissionId,
-                  answers: allAnswers,
-                },
-              ],
-              copiedForms: copiedForms,
-            };
-
-            forms.push(subform);
-          } else if (element.element.property.subFormStructure === 'multiple') {
-            const subformAnswers: Answer[] = [];
-            let subformQuestions: any = { answers: [] };
-            element.element.rows.forEach((row: any) => {
-              subformQuestions = extractQuestions(
-                row.grid,
-                subformId,
-                true,
-                forms.length
-              );
-            });
-            const existingSubform = forms.find(
-              (form) => form.formId === subformId
-            );
-            if (
-              (element.element.property.subFormType == 'inline' ||
-                element.element.property.subFormType == 'card') &&
-              element.element.submissions
-            ) {
-              element.element.submissions = this.clearEmptySubmissions(
-                element.element.submissions
-              );
-            }
-            element.element?.submissions?.forEach(
-              (submission: any, index: number) => {
-                for (const s of submission.scores ?? []) {
-                  if (s.scoreType === 'GOOD_SCORE') {
-                    this.sumOfGoodFindings += s.score;
-                  }
-                  if (s.scoreType === 'BAD_SCORE') {
-                    this.sumOfBadFindings += s.score;
-                  }
-                }
-                delete submission.hasAllScoringAnsweredOnce;
-                submission.answers.forEach((answer: any) => {
-                  delete answer.htmlContent;
-                  if (Array.isArray(answer.files)) {
-                    const questionId = `${subformId}_${index}_${answer.questionId}`;
-                    this.files.push({
-                      questionId: questionId,
-                      file: answer.files,
-                    });
-                    delete answer.files;
-                  }
-                  delete answer.attachments;
-                });
-              }
-            );
-            let copiedForms;
-            if (element.element.copiedForms) {
-              copiedForms = element.element.copiedForms;
-            }
-
-            const subform: Form = {
-              formId: subformId,
-              deleted: element.element.deleted,
-              scores: element.element.scores,
-              deletedSubmissions: element.element.deletedSubmissions,
-              submissions: element.element.submissions,
-              copiedForms: copiedForms,
-            };
-            forms.push(subform);
-            this.maxPossibleScore +=
-              element.element?.maxPossibleScore *
-              element.element?.submissions?.length;
-            this.maxPossibleGoodScore +=
-              element.element?.maxPossibleScore?.good *
-              element.element?.submissions?.length || 0;
-            this.maxPossibleBadScore +=
-              element.element?.maxPossibleScore?.bad *
-              element.element?.submissions?.length || 0;
-          }
-        } else if (element.entityType === 'QUESTION_GROUP' && element.show) {
-          // Handle Question Group by iterating through rows
-          element.element.rows.forEach((row: any) => {
-            row.grid.forEach((gridItem: any) => {
-              if (gridItem.entityType === 'QUESTION' && gridItem.show) {
-                let baseQuestion: any;
-                if (
-                  gridItem.element?.formElement.elementType === 'FILE_PICKER'
-                ) {
-                  baseQuestion = {
-                    questionId: gridItem.element.id,
-                    answer: '',
-                  };
-                  if (Array.isArray(gridItem.element.answer)) {
-                    const questionId = isInSubForm
-                      ? `${parentFormId}_${subFormIndex}_${gridItem.element.id}`
-                      : gridItem.element.id;
-                    this.files.push({
-                      questionId: questionId,
-                      file: gridItem.element.answer,
-                    });
-                  }
-                } else {
-                  baseQuestion = {
-                    questionId: gridItem.element.id,
-                    answer: gridItem.element.answer,
-                    amountInWords: gridItem.element.amountInWords
-                  };
-                }
-                if (this.edit) {
-                  questions.push({
-                    ...baseQuestion,
-                    answerId: gridItem.element.answerId || '',
-                    deleteFiles: gridItem.element.deleteFiles || [],
-                  });
-                } else {
-                  questions.push(baseQuestion);
-                }
-
-                if (gridItem.element.childLogics) {
-                  for (let logic of gridItem.element.childLogics) {
-                    if (logic.showLogic) {
-                      for (let row of logic.rows) {
-                        const result = extractQuestions(
-                          row.grid,
-                          parentFormId,
-                          isInSubForm,
-                          subFormIndex
-                        );
-                        questions.push(...result.answers);
-                        forms.push(...result.forms);
-                      }
-                    }
-                  }
-                }
-              }
-            });
-          });
-        } else if (element.entityType === 'MULTIFIELD' && element.show) {
-          element.element.rows.forEach((row: any) => {
-            row.grid.forEach((gridItem: any) => {
-              if (gridItem.entityType === 'QUESTION' && gridItem.show) {
-                questions.push({
-                  questionId: gridItem.element.id,
-                  answer: gridItem.element.answer || '',
-                });
-              }
-            });
-          });
-        }
-      });
-      return { answers: questions, forms: forms };
-    };
-
-    const processPages = (
-      pages: any[]
-    ): { answers: Answer[]; forms: Form[] } => {
-      const questions: Answer[] = [];
-      const forms: Form[] = [];
-
-      pages.forEach((page) => {
-        page.rows.forEach((row: any) => {
-          const result = extractQuestions(row.grid);
-          questions.push(...result.answers);
-          forms.push(...result.forms);
-        });
-      });
-
-      return { answers: questions, forms: forms };
-    };
-    const result = processPages(this.pages);
-    const grids = this.whenClauseService.getActiveWhenClauseGrids();
-    const simplified = grids.map(grid => ({
-      elementId: grid?.element?.id ?? null,
-      entityType: grid?.entityType ?? null,
-      show: grid?.show ?? false
-    }));
-    this.questionAnswers = {
-      parentId: '',
-      answers: result.answers,
-      forms: result.forms,
-      copySubForms: this.copySubforms,
-      whenClauseElements: simplified
-    };
-  }
-
-  clearEmptySubmissions(submissions: any) {
-    const nonEmptySubmissions: Submission[] = [];
-    const emptySubmissionIds: string[] = [];
-
-    submissions.forEach((submission: any) => {
-      const hasValue = submission.answers.some(
-        (answer: any) =>
-          answer.answer !== '' &&
-          answer.answer !== null &&
-          answer.answer !== undefined
-      );
-      if (hasValue) {
-        nonEmptySubmissions.push(submission);
-      } else if (submission.submissionId) {
-        emptySubmissionIds.push(submission.submissionId);
-      }
-    });
-
-    submissions = nonEmptySubmissions;
-    return submissions;
-  }
-
-  validateAllElementLoaded(): { status: boolean; message: string } {
-    if (this.pages.length < this.pageDetails.length) {
-      return {
-        status: false,
-        message:
-          'Please ensure all pages are fully visible before submitting the form.',
-      };
-    }
-
-    const incompletePages: string[] = [];
-
-    this.pages.forEach((p: any, i: number) => {
-      if (p && Array.isArray(p.rows)) {
-        let j = 0;
-        p.rows.forEach((row: any) => {
-          row.grid.forEach((gridItem: any) => {
-            j++;
-          });
-        });
-        if (
-          !p ||
-          !Array.isArray(p.rows) ||
-          (Math.ceil(j / 20) != this.rowSetCount[i] && !this.navigateTo)
-        ) {
-          incompletePages.push(this.pageDetails[i].name);
-        }
-      } else {
-        incompletePages.push(this.pageDetails[i].name);
-      }
-    });
-
-    if (incompletePages.length > 0) {
-      return {
-        status: false,
-        message: `Some sections are still loading. Please scroll through the following pages to ensure all questions are loaded: ${incompletePages.join(
-          ', '
-        )}.`,
-      };
-    }
-
-    return {
-      status: true,
-      message: 'Great! All sections are complete. You can now submit the form.',
-    };
-  }
-  saveasDraftPopup(): void {
-    if (!this.skipValidation) {
-      return;
-    }
-    const dialogRef = this.dialog.open(SaveDraftModalComponent, {
-      width: '450px',
-      panelClass: 'custom-dialog-container',
-      autoFocus: false,
-      disableClose: true,
-      data: {
-        primaryColor: this.primaryColor,
-      },
-    });
-
-    dialogRef.afterClosed().subscribe((result) => {
-      if (result) {
-        this.validationSkip = true;
-        this.submitForm();
-      } else {
-        this.validationSkip = false;
-      }
-    });
-  }
-
-  saveAsDraft() {
-    this.validationSkip = true;
-    this.draft = true;
-    this.submitForm();
-  }
-
-  async submitForm() {
-    this.startSubmissionLoader();
-    if (this.webhook) {
-      this.webhookPayloadArray = this.webhook.map((w: any) => ({
-        id: w.id,
-        ...this.extractGroupedWebhookData([w]),
-      }));
-    }
-    if (!this.validateAllElementLoaded().status) {
-      this.toastr.warning('Please wait for all elements to load');
-      this.submit.emit({
-        status: 'failed',
-      });
-      return;
-    }
-    if (this.submissionInProgress || this.submissionInDraft) {
-      this.submit.emit({
-        status: 'failed',
-      });
-      return;
-    }
-    let recaptchaToken: string | undefined;
-    this.inValidQuestions.clear();
-    this.validationService.clearAll();
-    if (this.enableGoogleRecaptcha) {
-      try {
-        recaptchaToken = await this.getToken();
-
-        if (!recaptchaToken) {
-          this.toastr.error(
-            'Please complete the CAPTCHA verification before submitting the form.'
-          );
-          this.submissionInProgress = false;
-          this.submissionInDraft = false;
-          this.resetSubmissionLoader();
-          this.validationSkip = false;
-          this.draft = false;
-          this.submit.emit({
-            status: 'failed',
-          });
-          return;
-        }
-      } catch (error: any) {
-        console.error(
-          'Error while getting reCAPTCHA token:',
-          error.error?.message
-        );
-        this.toastr.error('Failed to verify reCAPTCHA.');
-        this.submissionInProgress = false;
-        this.submissionInDraft = false;
-        this.resetSubmissionLoader();
-        this.validationSkip = false;
-        this.draft = false;
-        this.submit.emit({
-          status: 'failed',
-        });
-        return;
-      }
-    }
-
-    if (this.draft || this.validationSkip) {
-      this.submissionInDraft = true;
-    } else {
-      this.submissionInProgress = true;
-    }
-
-    let validationResponse = true;
-    if (!this.validationSkip) {
-      validationResponse = this.validateForm(this.pages).isValid;
-    }
-
-    if (!validationResponse) {
-      this.saveasDraftPopup();
-      this.submissionInProgress = false;
-      this.submissionInDraft = false;
-      this.resetSubmissionLoader();
-      this.validationSkip = false;
-      this.draft = false;
-      this.submit.emit({
-        status: 'failed',
-      });
-      return;
-    }
-    const getCircularReplacer = () => {
-      const seen = new WeakSet();
-      return (_key: string, value: any) => {
-        if (typeof value === 'object' && value !== null) {
-          if (seen.has(value)) {
-            return undefined;
-          }
-          seen.add(value);
-        }
-        return value;
-      };
-    };
-
-    this.generateQuestionAnswers();
-    const formFinalScore = this.calculateFormFinalScore();
-    this.questionAnswers.scores = formFinalScore;
-    if (validationResponse) {
-      const formData = new FormData();
-      formData.append('skipValidation', this.validationSkip ? 'true' : 'false');
-      this.questionAnswers.parentId = this.parentSubmissionId;
-      formData.append(
-        'json',
-        JSON.stringify(this.questionAnswers, getCircularReplacer())
-      );
-      if (this.webhookPayloadArray) {
-        formData.append(
-          'webhookPayload',
-          JSON.stringify(this.webhookPayloadArray)
-        );
-      } else {
-        formData.append('webhookPayload', JSON.stringify([]));
-      }
-      if (this.files.length > 0) {
-        const seenQuestionIds = new Set<string>();
-
-        const uniqueFiles = this.files.filter((fileItem) => {
-          if (seenQuestionIds.has(fileItem.questionId)) {
-            return false;
-          }
-          seenQuestionIds.add(fileItem.questionId);
-          return true;
-        });
-
-        uniqueFiles.forEach((fileItem) => {
-          fileItem.file.forEach((file: any) => {
-            formData.append(fileItem.questionId, file._file);
-          });
-        });
-      }
-      const formServiceCall =
-        this.edit && this.submissionId
-          ? this.formService.updateForm(
-              this.moduleName,
-              this.submissionId,
-              formData,
-              recaptchaToken ?? ''
-            )
-          : this.formService.submitForm(
-              this.moduleName,
-              formData,
-              recaptchaToken ?? ''
-            );
-
-      formServiceCall.subscribe({
-        next: (event) => {
-          if (event.type === HttpEventType.UploadProgress) {
-            if (event.total) {
-              const percentDone = Math.round((event.loaded / event.total) * 100);
-              this.setProgress(Math.min(95, percentDone));
-            }
-          }
-      
-          if (event.type === HttpEventType.Response) {
-            this.completeSubmissionLoader();
-      
-            const response = event.body;
-      
-            // existing success logic ↓
-            this.toastr.success(
-              this.edit
-                ? 'Form updated successfully'
-                : 'Form submitted successfully'
-            );
-            let emittingValues;
-            if (this.emitters) {
-              emittingValues = this.mapEmittersToValues();
-            }
-  
-            if (this.validationSkip || this.draft) {
-              this.submit.emit({
-                status: 'draft',
-                submissionId: response.result,
-                score: formFinalScore,
-                ...(emittingValues || {}),
-              });
-            } else {
-              this.submit.emit({
-                status: 'success',
-                submissionId: response.result,
-                score: formFinalScore,
-                ...(emittingValues || {}),
-              });
-            }
-            this.submissionInProgress = false;
-            this.submissionInDraft = false;
-            this.draft = false;
-            this.validationSkip = false;
-          }
-        },
-        error: (error) => {
-          this.validationService.clearAll();
-          this.findQuestionPageIndex(
-            this.parseErrorsToMap(error.error.message)
-          );
-          this.currentPageIndex = this.pages.length - 1;
-          this.navigateToFirstError();
-          this.resetSubmissionLoader();
-          this.submissionInProgress = false;
-          this.draft = false;
-          this.validationSkip = false;
-          this.submissionInDraft = false;
-          this.saveasDraftPopup();
-          this.submit.emit({
-            status: 'failed',
-            message: error.error.message
-          });
-        },
-      });
-    } else {
-      // this.toastr.error(validationResponse.message);
-      this.submit.emit({
-        status: 'failed',
-      });
-      this.saveasDraftPopup();
-      this.submissionInProgress = false;
-      this.submissionInDraft = false;
-      this.resetSubmissionLoader();
-      this.validationSkip = false;
-      this.draft = false;
-    }
-  }
-
-setProgress(value: number) {
-  this.submissionProgress = value;
-  this.updateStepText(value);
-}
-
-
-startSubmissionLoader() {
-  this.showSubmissionLoader = true;
-  this.setProgress(0);
-
-  // Simulated progress until backend upload updates it
-  this.progressInterval = setInterval(() => {
-    if (this.submissionProgress < 85) {
-      this.setProgress(this.submissionProgress + 2);
-    }
-  }, 300);
-}
-
-completeSubmissionLoader() {
-  clearInterval(this.progressInterval);
-
-  this.setProgress(100);
-
-  setTimeout(() => {
-    this.showSubmissionLoader = false;
-    this.setProgress(0);
-  }, 500);
-}
-
-resetSubmissionLoader() {
-  clearInterval(this.progressInterval);
-
-  this.showSubmissionLoader = false;
-  clearInterval(this.dotInterval);
-  this.animatedDots = '';
-  this.setProgress(0);
-}
-
-
-startTextLoader() {
-  let dotCount = 0;
-
-  this.dotInterval = setInterval(() => {
-    dotCount = (dotCount + 1) % 4;
-    this.animatedDots = '.'.repeat(dotCount);
-  }, 500);
-}
-
-updateStepText(progress: number) {
-  if (progress < 25) {
-    this.currentStep = 'Validating form';
-  } else if (progress < 60) {
-    this.currentStep = 'Uploading data';
-  } else if (progress < 90) {
-    this.currentStep = 'Saving submission';
-  } else {
-    this.currentStep = 'Finalizing';
-  }
-}
-
-  calculateFormFinalScore(): SubmissionScore[] {
-    const goodScore = this.maxPossibleGoodScore
-      ? 100 - (this.sumOfGoodFindings / this.maxPossibleGoodScore) * 100
-      : 0;
-
-    const badScore = this.maxPossibleBadScore
-      ? 100 - (this.sumOfBadFindings / this.maxPossibleBadScore) * 100
-      : 0;
-
-    return [
-      { scoreType: 'GOOD_SCORE', score: Math.round(goodScore) },
-      { scoreType: 'BAD_SCORE', score: Math.round(badScore) },
-    ];
-  }
-
-  mapEmittersToValues(): { [key: string]: any } {
-    const answerMap = new Map(
-      this.questionAnswers.answers.map((qa) => [qa.questionId, qa.answer])
-    );
-
-    const result: { [key: string]: any } = {};
-
-    this.emitters.forEach((emitter) => {
-      if (emitter.valueSource === 'CUSTOM_INPUT') {
-        result[emitter.keyName] = emitter.inputValue;
-      } else if (
-        emitter.valueSource === 'QUESTION' &&
-        emitter.questionId &&
-        answerMap.has(emitter.questionId)
-      ) {
-        result[emitter.keyName] = answerMap.get(emitter.questionId);
-      }
-    });
-
-    return result;
-  }
-
-  parseErrorsToMap(errorString: string): Map<string, string> {
-    const errorMap = new Map<string, string>();
-    // Convert the incorrect format to a valid object structure
-    errorString
-      .replace(/[{}]/g, '') // Remove curly braces
-      .split(', ') // Split key-value pairs
-      .forEach((pair) => {
-        const [key, value] = pair.split('=');
-        if (key && value) {
-          errorMap.set(key.trim(), value.trim()); // Store in Map
-        }
-      });
-
-    return errorMap;
-  }
-  async navigateToFirstError() {
-    const firstError = this.validationService.getFirstInvalid();
-    if (!firstError) return;
-
-    const elementId = `question-${firstError.id}`;
-
-    this.retryCount = 0;
-
-    // Change page if needed
-    if (this.currentPageIndex !== firstError.pageIndex) {
-      this.currentPageIndex = firstError.pageIndex;
-      if (this.currentPageIndex + 1 < this.pageDetails.length) {
-        this.nextPage = this.pageDetails[this.currentPageIndex + 1];
-      }
-      if (this.currentPageIndex - 1 >= 0) {
-        this.previousPage = this.pageDetails[this.currentPageIndex - 1];
-      }
-
-      this.debounce(() => this.changeDetectorRef.detectChanges(), 100);
-      if (this.navigation === 'TAB')
-        this.child.triggerFunction(firstError.pageIndex);
-    }
-
-    await this.scrollToElementWithRetry(elementId);
-  }
-
-  private async scrollToElementWithRetry(elementId: string): Promise<void> {
-    this.retryCount++;
-    const element = document.getElementById(elementId);
-
-    if (element) {
-      requestAnimationFrame(() => this.scrollAndFocus(element));
-      return;
-    }
-
-    if (this.retryCount < this.maxRetries) {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-      return this.scrollToElementWithRetry(elementId);
-    }
-
-    console.error(
-      `Element ${elementId} not found after ${this.maxRetries} attempts`
-    );
-    requestAnimationFrame(() => this.fallbackScroll());
-  }
-
-  private scrollAndFocus(element: HTMLElement) {
-    element.scrollIntoView({
-      behavior: 'smooth',
-      block: 'center',
-      inline: 'nearest',
-    });
-
-    const focusable = element.querySelector(
-      'input, select, textarea, button, [tabindex]:not([tabindex="-1"])'
-    ) as HTMLElement;
-    focusable?.focus();
-  }
-
-  private fallbackScroll() {
-    const pageElement = document.querySelector(
-      `.page-${this.currentPageIndex}`
-    );
-    pageElement?.scrollIntoView({ behavior: 'auto' });
-  }
-
-  private debounce(func: () => void, delay: number) {
-    clearTimeout(this.debounceTimer);
-    this.debounceTimer = setTimeout(func, delay);
-  }
-  //   extractId(message: string): string | null {
-  //     const match = message.match(/[0-9a-fA-F-]{36}/);
-  //     return match ? match[0] : null;
-  // }
-
-  //  removeId(message: string): string {
-  //   return message.replace(/[0-9a-fA-F-]{36}$/, "").trim();
-  // }
-
-  findQuestionPageIndex(questionErrors: Map<string, string>): void {
-    for (let pageIndex = 0; pageIndex < this.pages.length; pageIndex++) {
-      const page = this.pages[pageIndex];
-
-      for (const row of page.rows) {
-        for (const element of row.grid) {
-          this.checkAndStoreInvalidQuestions(
-            element,
-            questionErrors,
-            pageIndex
-          );
-        }
-      }
-    }
-  }
-
-  private checkAndStoreInvalidQuestions(
-    element: any,
-    questionErrors: Map<string, string>,
-    pageIndex: number
-  ): void {
-    if (element.element.id && questionErrors.has(element.element.id)) {
-      this.validationService.setInvalid(
-        element.element.id,
-        questionErrors.get(element.element.id)!,
-        pageIndex
-      );
-    }
-
-    // Handle subforms recursively
-    if (element.entityType === 'SUBFORM' && element.element.rows) {
-      for (const row of element.element.rows) {
-        for (const gridItem of row.grid) {
-          this.checkAndStoreInvalidQuestions(
-            gridItem,
-            questionErrors,
-            pageIndex
-          );
-        }
-      }
-    }
-    if (
-      (element.entityType === 'QUESTION_GROUP' ||
-        element.entityType === 'MULTIFIELD') &&
-      element.element.rows
-    ) {
-      for (const row of element.element.rows) {
-        for (const gridItem of row.grid) {
-          this.checkAndStoreInvalidQuestions(
-            gridItem,
-            questionErrors,
-            pageIndex
-          );
-        }
-      }
-    }
-
-    // Handle logic-based conditions recursively
-    if (element.entityType === 'QUESTION' && element.element.childLogics) {
-      for (const logic of element.element.childLogics) {
-        if (logic.showLogic) {
-          for (const row of logic.rows) {
-            for (const gridItem of row.grid) {
-              this.checkAndStoreInvalidQuestions(
-                gridItem,
-                questionErrors,
-                pageIndex
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-
-  focusQuestionElement(container: HTMLElement) {
-    // Find first focusable element within the question
-    const focusable = container.querySelector(
-      'input, select, textarea, [tabindex]'
-    );
-    if (focusable) {
-      (focusable as HTMLElement).focus();
-    } else {
-      container.focus();
-    }
-  }
-  validateForm(jsonData: any): {
-    isValid: boolean;
-    message: string;
-    pageIndex: number | 0;
-  } {
-    const validateQuestions = (
-      formElements: any[]
-    ): { isValid: boolean; message: string; pageIndex: number | 0 } => {
-      for (let element of formElements) {
-        if (element.entityType === 'QUESTION') {
-          const required = element.element.required;
-          const answer = element.element.answer;
-          const validation = element.element.validation;
-          const show = element.show;
-          if (element.element.formElement.elementType === 'FILE_PICKER') {
-            const attachment = element.element.attachments;
-            if (required && show) {
-              if (
-                (!answer || answer?.length === 0) &&
-                (!attachment || attachment?.length == 0)
-              ) {
-                this.inValidQuestions.set(
-                  element.element.id,
-                  'Required file question has no files uploaded.'
-                );
-                return {
-                  isValid: false,
-                  message: `Form is invalid - Required file question ${element.element.questionNumber} has no files uploaded.`,
-                  pageIndex: 0,
-                };
-              }
-            }
-          } else {
-            if (required && show) {
-              if (
-                answer === null ||
-                answer === undefined ||
-                (typeof answer === 'string' && answer.trim() === '') ||
-                (typeof answer === 'object' && Object.keys(answer).length === 0)
-              ) {
-                this.inValidQuestions.set(
-                  element.element.id,
-                  'This is a required question'
-                );
-                return {
-                  isValid: false,
-                  message: `Form is invalid - Question ${element.element.questionNumber} is required but no answer provided.`,
-                  pageIndex: 0,
-                };
-              } else if (validation === false) {
-                this.inValidQuestions.set(
-                  element.element.id,
-                  element.element.validationMessage
-                );
-                return {
-                  isValid: false,
-                  message: `Form is invalid - Question ${element.element.questionNumber} is required but validation is false.`,
-                  pageIndex: 0,
-                };
-              }
-            } else if (!required && answer && Object.keys(answer).length > 0) {
-              if (validation === false) {
-                this.inValidQuestions.set(
-                  element.element.id,
-                  element.element.validationMessage
-                );
-                return {
-                  isValid: false,
-                  message: `Form is invalid - Question ${element.element.questionNumber} is not required but answer provided with validation false.`,
-                  pageIndex: 0,
-                };
-              }
-            }
-          }
-          if (element.element.childLogics) {
-            for (let logic of element.element.childLogics) {
-              if (logic.showLogic) {
-                const result = validateQuestions(logic.rows);
-                if (!result.isValid) return result;
-              }
-            }
-          }
-        } else if (element.entityType === 'SUBFORM' && !element.element.deleted) {
-          if(element.element.property?.subFormStructure == 'single'){
-            for(let row of element.element.rows){
-              const result = validateQuestions(row.grid);
-              if (!result.isValid) return result;
-            }
-          } else {
-            this.validateSubForm(element);
-          }
-        } else if (
-          (element.entityType === 'QUESTION_GROUP' ||
-            element.entityType === 'MULTIFIELD') &&
-          element.element.rows
-        ) {
-          for (const row of element.element.rows) {
-            const result = validateQuestions(row.grid);
-            if (!result.isValid && element.entityType != 'MULTIFIELD')
-              return result;
-          }
-        }
-      }
-      return { isValid: true, message: '', pageIndex: 0 };
-    };
-
-    for (let pageIndex = 0; pageIndex < jsonData.length; pageIndex++) {
-      const page = jsonData[pageIndex];
-      for (let row of page.rows) {
-        const result = validateQuestions(row.grid);
-        this.inValidQuestions.forEach((message: string, id: string) => {
-          this.validationService.setInvalid(id, message, pageIndex);
-        });
-        this.inValidQuestions = new Map<string, string>();
-        // if (!result.isValid) {
-        //   return {
-        //     isValid: false,
-        //     message: `Page ${pageIndex + 1}: ${result.message}`,
-        //     pageIndex: pageIndex,
-        //   };
-        // }
-      }
-    }
-    this.currentPageIndex = jsonData.length - 1;
-    if (this.validationService.getFirstInvalid()) {
-      this.navigateToFirstError();
-      return {
-        isValid: false,
-        message: `Page`,
-        pageIndex: 0,
-      };
-    }
-    return {
-      isValid: true,
-      message: 'Form is valid.',
-      pageIndex: 0,
-    };
-  }
-
-  validateSubForm(element: any) {
-    if (element.entityType !== 'SUBFORM') {
-      return;
-    }
-  
-    const submissions = element.element?.submissions || [];
-  
-    /* ------------------------------
-     * 1️⃣ Subform required but no submission
-     * ------------------------------ */
-    if (element.element?.required && submissions.length === 0) {
-      this.inValidQuestions.set(
-        element.element.id,
-        'At least one submission is required'
-      );
-      return; // nothing else to validate
-    }
-  
-    submissions.forEach((submission: any, submissionIndex: number) => {
-      const answers = submission.answers || [];
-  
-      /* ------------------------------
-       * 2️⃣ Submission exists but no answers
-       * ------------------------------ */
-      const hasAnyAnswer = answers.some(
-        (a: any) =>
-          a.answer !== null &&
-          a.answer !== undefined &&
-          a.answer !== '' &&
-          !(Array.isArray(a.answer) && a.answer.length === 0)
-      );
-  
-      if (element.element?.required && !hasAnyAnswer) {
-        const key = `${element.element.id}`;
-        this.inValidQuestions.set(
-          key,
-          'At least one answer is required in the subform'
-        );
-        return;
-      }
-  
-      /* ------------------------------
-       * 3️⃣ Existing question-level validations
-       * ------------------------------ */
-      answers.forEach((answerObj: any) => {
-        const question = this.findQuestionById(
-          element.element.rows,
-          answerObj.questionId
-        );
-  
-        const ans = answerObj.answer;
-  
-        // Required question check
-        if ((question?.required || answerObj.required) &&
-            (ans === '' || ans === null || ans === undefined || ans?.length === 0)) {
-          const key = `${submissionIndex}-${question.id}`;
-          this.inValidQuestions.set(key, 'This is a required question');
-        }
-  
-        // Email validation
-        if (question?.formElement?.elementType === 'EMAIL' && ans) {
-          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-          if (!emailRegex.test(ans)) {
-            const key = `${submissionIndex}-${question.id}`;
-            this.inValidQuestions.set(
-              key,
-              'Please enter a valid email address'
-            );
-          }
-        }
-      });
-    });
-  }
-  
-
-  // 🔍 Helper: find question definition inside rows
-  private findQuestionById(rows: any[], questionId: string): any {
-    for (const row of rows) {
-      for (const gridElement of row.grid) {
-        if (
-          gridElement.entityType === 'QUESTION' &&
-          gridElement.element.id === questionId
-        ) {
-          return gridElement.element;
-        }
-      }
-    }
-    return null;
-  }
-
-  updateSubFormWithSubmissions(event: any) {
-    this.updateSubForm(this.pages, event);
-  }
-
-  updateSubForm = (pages: any[], updatedSubForm: any) => {
-    pages.forEach((page) => {
-      page.rows.forEach((row: any) => {
-        row.grid.forEach((element: any) => {
-          if (
-            element.entityType === 'SUBFORM' &&
-            element.element.id === updatedSubForm.id
-          ) {
-            // Update the existing subform with the new data
-            element.element = updatedSubForm;
-          } else if (
-            element.entityType === 'SUBFORM' &&
-            element.element.id !== updatedSubForm.formId
-          ) {
-            // Handle multiple subforms logic here if needed
-          } else if (
-            element.entityType === 'QUESTION' &&
-            element.element.childLogics
-          ) {
-            // Recursively update child logics
-            // element.element.childLogics.forEach((logic: any) => {
-            //   if (logic.showLogic) {
-            //     this.updateSubForm(logic.rows, updatedSubForm);
-            //   }
-            // });
-          }
-        });
-      });
-    });
-  };
-
-  extractGroupedWebhookData(webhooks: any[]): {
-    headers: Record<string, string>;
-    params: Record<string, string>;
-    pathVariables: Record<string, string>;
-    requestBodies: Record<string, string>;
-  } {
-    const result: {
-      headers: Record<string, string>;
-      params: Record<string, string>;
-      pathVariables: Record<string, string>;
-      requestBodies: Record<string, string>;
-    } = {
-      headers: {},
-      params: {},
-      pathVariables: {},
-      requestBodies: {},
-    };
-
-    for (const webhook of webhooks ?? []) {
-      for (const item of webhook?.headers ?? []) {
-        const value = this.getValueFromStorage(item.valueSource, item.inputValue);
-        if (value !== null) {
-          result.headers[item.keyName] = value;
-        }
-      }
-
-      for (const item of webhook?.params ?? []) {
-        const value = this.getValueFromStorage(item.valueSource, item.inputValue);
-        if (value !== null) {
-          result.params[item.keyName] = value;
-        }
-      }
-
-      for (const item of webhook?.pathVariables ?? []) {
-        const value = this.getValueFromStorage(item.valueSource, item.inputValue);
-        if (value !== null) {
-          result.pathVariables[item.keyName] = value;
-        }
-      }
-
-      for (const item of webhook?.requestBodies ?? []) {
-        const value = this.getValueFromStorage(item.valueSource, item.inputValue);
-        if (value !== null) {
-          result.requestBodies[item.keyName] = value;
-        }
-      }
-    }
-
-    return result;
-  }
-
-  getValueFromStorage(
-    source: 'LOCAL_STORAGE' | 'SESSION_STORAGE',
-    key: string
-  ): string | null {
-    if (source === 'LOCAL_STORAGE') return localStorage.getItem(key);
-    if (source === 'SESSION_STORAGE') return sessionStorage.getItem(key);
-    return null;
-  }
-
-  cancelled(){
-    this.cancel.emit();
-  }
-}