@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/currency-fields/currency-fields.component.ts

@@ -0,0 +1,589 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ValidationService } from '../../services/validation.service';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+import { AggregationFunctionService } from '../../services/aggregate.service';
+type CurrencyMeta = {
+  codes: string[];
+  symbols?: string[];
+  mainUnit: string;
+  subUnit: string;
+  decimals: number;
+};
+
+@Component({
+  selector: 'lib-currency-fields',
+  templateUrl: './currency-fields.component.html',
+  styleUrls: ['./currency-fields.component.scss'],
+})
+export class CurrencyFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Input() disableEdit: boolean = false;
+  @Output() answerChange = new EventEmitter<{
+    answer: any;
+    maxPossibleScore?: number;
+    amountInWords: string;
+    currency: string;
+  }>();
+  @Input() rowId: any;
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  placeholder: string = '';
+  min!: number;
+  max!: number;
+  currencySymbol: string = '';
+  decimalPrecision!: number;
+  symbolPosition: string = 'Before the value';
+  thousandSeparator!: boolean;
+  showAmountInWords: boolean = false;
+  enteredAmount!: string;
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+  private elementId: string = '';
+  amountInWordsText: string = '';
+  defaultCurrency:string='';
+  constructor(
+    private validationService: ValidationService,
+    private tracker: ElementTrackerService,
+    private aggregateService: AggregationFunctionService
+  ) {}
+
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.defaultCurrency=this.question.formElement?.appearance?.defaultCurrency || '';
+    this.placeholder = this.question.formElement?.appearance?.placeholder || '';
+    this.currencySymbol = this.question.formElement?.appearance?.currencySymbol;
+    this.decimalPrecision =
+      this.question.formElement?.appearance?.decimalPrecision || 2;
+    this.symbolPosition =
+      this.question.formElement?.appearance?.symbolPosition ||
+      'Before the value';
+    this.thousandSeparator =
+      this.question.formElement?.appearance?.thousandSeparator;
+    this.min = this.question.formElement.validation.min;
+    this.max = this.question.formElement.validation.max;
+    this.showAmountInWords =
+      this.question.formElement?.appearance?.showAmountInWords;
+    if (this.question.formElement?.appearance?.currency) {
+      let userLocaleCureency = this.question.formElement?.appearance?.currency;
+      if (this.question.formElement.appearance.currencyOption) {
+        let currencyOption =
+          this.question.formElement.appearance.currencyOption;
+        if (currencyOption == 'auto') {
+          if (
+            this.question.formElement.appearance.limitCurrencySymbol &&
+            this.question.formElement.appearance.limitCurrencySymbol.length > 0
+          ) {
+            this.currencySymbol =
+              this.question.formElement.appearance.limitCurrencySymbol.includes(
+                userLocaleCureency
+              )
+                ? userLocaleCureency
+                : this.question.formElement?.appearance?.currencySymbol;
+          } else {
+            this.currencySymbol = userLocaleCureency;
+          }
+        } else if (currencyOption == 'specific') {
+          this.currencySymbol =
+            this.question.formElement?.appearance?.specificCurrencySymbol;
+        }
+      }
+    }
+    if (
+      !this.currencySymbol &&
+      this.question.formElement?.appearance?.currencySymbol
+    ) {
+      this.currencySymbol =
+        this.question.formElement?.appearance?.currencySymbol;
+    }
+    if(this.question.formElement?.appearance?.defaultCurrency){
+      this.currencySymbol = this.question.formElement?.appearance?.defaultCurrency;
+    }
+    if(this.question.answerCurrency){
+      this.currencySymbol=this.question.answerCurrency;
+    }
+
+
+    if (this.question.answer) {
+      this.initializeAnswer();
+    }
+    if (this.showAmountInWords) {
+      this.amountInWordsText = this.question.amountInWords;
+    }
+    if (this.question.childLogics && this.question.answer) {
+      this.updateChildLogics(this.question);
+    }
+    this.aggregateService.setNumberField(
+      this.rowId,
+      this.question.id,
+      this.question.answer
+    );
+  }
+
+  initializeAnswer() {
+    let value = this.question?.answer;
+    if (!value) return;
+    // check if numeric
+    if (!isNaN(Number(value))) {
+      if (this.thousandSeparator) {
+        const parts = value.split('.');
+        parts[0] = Number(parts[0]).toLocaleString('en-US'); // adds proper thousand separator
+        value = parts.join('.');
+      } else {
+        value = value;
+      }
+    }
+
+    this.enteredAmount = value;
+  }
+
+  preventNumberScroll(event: WheelEvent) {
+    if (document.activeElement === event.target) {
+      event.preventDefault();
+    }
+  }
+
+  validateNumber() {
+    this.validationFailed = false;
+    this.validationService.clearInvalid(this.buildElementId());
+    this.validationMessage = '';
+    let enteredAmount = this.parseCurrencyToNumber(this.enteredAmount);
+    if (this.required && !enteredAmount) {
+      this.validationFailed = true;
+      this.validationMessage = `Please enter a valid amount`;
+      this.question.validationMessage = `Please enter a valid amount`;
+      this.question.validation = false;
+    } else if (
+      (this.min !== undefined && enteredAmount < this.min) ||
+      (this.max !== undefined && enteredAmount > this.max)
+    ) {
+      this.validationFailed = true;
+
+      // Construct appropriate validation message based on whether min, max, or both are provided
+      if (this.min !== undefined && this.max !== undefined) {
+        this.validationMessage = `Please enter a valid amount between ${this.min} and ${this.max}`;
+        this.question.validationMessage = `Please enter a valid amount between ${this.min} and ${this.max}`;
+      } else if (this.min !== undefined) {
+        this.validationMessage = `Please enter a amount greater than or equal to ${this.min}`;
+        this.question.validationMessage = `Please enter a amount greater than or equal to ${this.min}`;
+      } else if (this.max !== undefined) {
+        this.validationMessage = `Please enter a amount less than or equal to ${this.max}`;
+        this.question.validationMessage = `Please enter a amount less than or equal to ${this.max}`;
+      }
+
+      this.question.validation = false;
+    } else {
+      this.question.validation = true;
+    }
+    if (this.question.childLogics) {
+      this.updateChildLogics(this.question);
+    }
+  }
+
+  validateInput(event: any) {
+    this.validationService.clearInvalid(this.buildElementId());
+
+    // remove existing commas & currency symbol
+    let rawValue: string = (event.target.value || '')
+      .replace(/,/g, '')
+      .replace(this.currencySymbol || '', '');
+
+    // remove any characters except digits and dot
+    rawValue = rawValue.replace(/[^\d.]/g, '');
+
+    // keep only the first dot (remove any additional dots)
+    const firstDot = rawValue.indexOf('.');
+    if (firstDot !== -1) {
+      // split into before-first-dot and rest, remove additional dots from rest
+      const before = rawValue.slice(0, firstDot);
+      const after = rawValue.slice(firstDot + 1).replace(/\./g, '');
+      rawValue = `${before}.${after}`;
+    }
+
+    // determine decimal precision to enforce (default to 2)
+    const dp =
+      typeof this.decimalPrecision === 'number' && this.decimalPrecision >= 0
+        ? this.decimalPrecision
+        : 2;
+
+    // if there's a decimal part, trim it to allowed length
+    if (rawValue.includes('.')) {
+      const [intPart, decimalPart = ''] = rawValue.split('.');
+      const trimmedDecimal = decimalPart.slice(0, dp);
+      rawValue = trimmedDecimal
+        ? `${intPart}.${trimmedDecimal}`
+        : intPart + '.';
+    }
+
+    // format with thousand separator for display
+    let formattedValue = rawValue;
+    if (this.thousandSeparator && rawValue) {
+      const parts = rawValue.split('.');
+      // handle case where user types ".12" -> parts[0] === ''
+      const intPartForFormat = parts[0] === '' ? '0' : parts[0];
+      parts[0] = Number(intPartForFormat).toLocaleString('en-US');
+      formattedValue = parts.join('.');
+      // if original had leading '.' (user typed ".12"), restore it visually as ".12"
+      if (rawValue.startsWith('.') && !formattedValue.startsWith('.')) {
+        formattedValue = formattedValue.replace(/^0/, '');
+      }
+    }
+
+    // keep numeric version for backend/calculations
+    this.question.answer = rawValue;
+    this.question.currencySymbol = this.currencySymbol;
+
+    // update field display
+    event.target.value = formattedValue;
+
+    this.aggregateService.setNumberField(
+      this.rowId,
+      this.question.id,
+      rawValue ? parseFloat(rawValue) : 0
+    );
+
+    if (this.question.childLogics) {
+      this.updateChildLogics(this.question);
+    }
+    if (this.showAmountInWords) {
+      this.amountInWordsText = this.convertAmountToWords(rawValue);
+      this.question.amountInWords = this.amountInWordsText;
+    }
+
+    this.answerChange.emit({
+      answer: this.question.answer,
+      maxPossibleScore: 0,
+      amountInWords: this.question.amountInWords,
+      currency: this.currencySymbol
+    });
+    this.validateNumber();
+  }
+
+  // 2) typed currency map
+  private currencyMap: Record<string, CurrencyMeta> = {
+    USD: {
+      codes: ['USD'],
+      symbols: ['$', 'US$'],
+      mainUnit: 'Dollars',
+      subUnit: 'Cents',
+      decimals: 2,
+    },
+    INR: {
+      codes: ['INR'],
+      symbols: ['₹', 'Rs', '₨'],
+      mainUnit: 'Rupees',
+      subUnit: 'Paisa',
+      decimals: 2,
+    },
+    EUR: {
+      codes: ['EUR'],
+      symbols: ['€'],
+      mainUnit: 'Euros',
+      subUnit: 'Cents',
+      decimals: 2,
+    },
+    AED: {
+      codes: ['AED'],
+      symbols: ['AED', 'د.إ'],
+      mainUnit: 'Dirhams',
+      subUnit: 'Fils',
+      decimals: 2,
+    },
+    GBP: {
+      codes: ['GBP'],
+      symbols: ['£'],
+      mainUnit: 'Pounds',
+      subUnit: 'Pence',
+      decimals: 2,
+    },
+    JPY: {
+      codes: ['JPY'],
+      symbols: ['¥'],
+      mainUnit: 'Yen',
+      subUnit: '',
+      decimals: 0,
+    },
+    // add more entries as needed
+  };
+
+  // 3) convertAmountToWords using CurrencyMeta typing
+  convertAmountToWords(value: string): string {
+    if (!value) return '';
+
+    // prefer currencyCode (ISO) if available; fall back to symbol
+    const currencyCode = this.question?.currencyCode || null;
+    const currencySymbol =
+      this.question?.currencySymbol || this.currencySymbol || null;
+
+    // find currency metadata from map:
+    let meta: CurrencyMeta | undefined;
+
+    if (currencyCode) {
+      meta = this.currencyMap[currencyCode];
+    }
+
+    if (!meta && currencySymbol) {
+      meta = Object.values(this.currencyMap).find(
+        (m) => Array.isArray(m.symbols) && m.symbols.includes(currencySymbol)
+      );
+    }
+
+    // use fallback if not found — typed as CurrencyMeta
+    if (!meta) {
+      const fallbackName = (
+        currencyCode ||
+        currencySymbol ||
+        'Currency'
+      ).toString();
+      meta = {
+        codes: [currencyCode || fallbackName],
+        symbols: currencySymbol ? [currencySymbol] : [],
+        mainUnit: fallbackName,
+        subUnit: '',
+        decimals: 2,
+      };
+    }
+
+    // normalize numeric parts
+    const normalized = (value || '').toString().replace(/,/g, '');
+    const [intPartStr = '0', decimalPartStr = ''] = normalized.split('.');
+
+    const intPartNum = Number(intPartStr) || 0;
+
+    // calculate subunit number robustly:
+    const dp =
+      typeof meta.decimals === 'number' && meta.decimals >= 0
+        ? meta.decimals
+        : 2;
+    let subUnitNumber = 0;
+
+    if (dp > 0 && decimalPartStr) {
+      const scale = Math.pow(10, dp);
+      const decDigits = decimalPartStr.replace(/\D/g, '');
+      // if shorter than dp, multiply; if longer, trim to dp
+      const trimmed = decDigits.slice(0, dp);
+      subUnitNumber = Number(trimmed) * Math.pow(10, dp - trimmed.length);
+      // guard for rounding overflow (e.g., .999 -> 1.00)
+      if (subUnitNumber >= scale) {
+        // increment integer part
+        return this.buildFinalPhrase(intPartNum + 1, 0, meta);
+      }
+    }
+
+    return this.buildFinalPhrase(intPartNum, subUnitNumber, meta);
+  }
+
+  // 4) buildFinalPhrase accepts CurrencyMeta (or same shape) — typed accordingly
+  private buildFinalPhrase(
+    intNum: number,
+    subNum: number,
+    meta: { mainUnit: string; subUnit: string; decimals: number }
+  ): string {
+    const mainWords = this.numberToWords(intNum) || 'Zero';
+
+    if (meta.decimals === 0 || !meta.subUnit) {
+      return `${mainWords} ${meta.mainUnit} Only`;
+    }
+
+    if (!subNum) {
+      return `${mainWords} ${meta.mainUnit} Only`;
+    }
+
+    const subWords = this.numberToWords(subNum);
+    return `${mainWords} ${meta.mainUnit} and ${subWords} ${meta.subUnit} Only`;
+  }
+
+  // -------------------------
+  // NUMBER → WORDS (Up to Crores)
+  // -------------------------
+  numberToWords(num: number): string {
+    if (num === 0) return 'Zero';
+
+    const a = [
+      '',
+      'One',
+      'Two',
+      'Three',
+      'Four',
+      'Five',
+      'Six',
+      'Seven',
+      'Eight',
+      'Nine',
+      'Ten',
+      'Eleven',
+      'Twelve',
+      'Thirteen',
+      'Fourteen',
+      'Fifteen',
+      'Sixteen',
+      'Seventeen',
+      'Eighteen',
+      'Nineteen',
+    ];
+    const b = [
+      '',
+      '',
+      'Twenty',
+      'Thirty',
+      'Forty',
+      'Fifty',
+      'Sixty',
+      'Seventy',
+      'Eighty',
+      'Ninety',
+    ];
+
+    const toWords = (n: number): string => {
+      if (n < 20) return a[n];
+      if (n < 100) return `${b[Math.floor(n / 10)]} ${a[n % 10]}`.trim();
+      if (n < 1000)
+        return `${a[Math.floor(n / 100)]} Hundred ${toWords(n % 100)}`.trim();
+      if (n < 100000)
+        return `${toWords(Math.floor(n / 1000))} Thousand ${toWords(
+          n % 1000
+        )}`.trim();
+      if (n < 10000000)
+        return `${toWords(Math.floor(n / 100000))} Lakh ${toWords(
+          n % 100000
+        )}`.trim();
+      return `${toWords(Math.floor(n / 10000000))} Crore ${toWords(
+        n % 10000000
+      )}`.trim();
+    };
+
+    return toWords(num);
+  }
+
+  updateChildLogics(question: any) {
+    if (question.childLogics && Array.isArray(question.childLogics)) {
+      question.childLogics.forEach((childLogic: any) => {
+        if (
+          this.evaluateCondition(
+            question.answer,
+            childLogic.condition,
+            childLogic.inputValue
+          )
+        ) {
+          childLogic.showLogic = true;
+        } else {
+          childLogic.showLogic = false;
+          this.clearAnswersRecursively(childLogic);
+        }
+      });
+    }
+  }
+
+  parseCurrencyToNumber(value: string): number {
+    if (!value) return 0;
+
+    // Remove currency symbol, commas, spaces
+    const numericString = value
+      .replace(new RegExp(`\\${this.currencySymbol}`, 'g'), '') // remove symbol
+      .replace(/,/g, '') // remove thousand separators
+      .trim();
+
+    // Convert to number
+    const num = parseFloat(numericString);
+    return isNaN(num) ? 0 : num;
+  }
+
+  clearAnswersRecursively(logic: any) {
+    if (!logic || !logic.rows) return;
+
+    logic.rows.forEach((row: any) => {
+      row.grid.forEach((item: any) => {
+        const element = item.element;
+
+        if (item.entityType === 'QUESTION' && element) {
+          // Clear answer if present
+          if ('answer' in element) {
+            element.answer = '';
+          }
+
+          // Recursively clear childLogics if any
+          if (element.childLogics && element.childLogics.length > 0) {
+            element.childLogics.forEach((childLogic: any) => {
+              this.clearAnswersRecursively(childLogic);
+            });
+          }
+        }
+
+        if (item.entityType === 'SUBFORM' && element && element.rows) {
+          // SUBFORM contains its own rows structure like a form
+          this.clearAnswersRecursively({ rows: element.rows });
+        }
+      });
+    });
+  }
+
+  evaluateCondition(answer: any, condition: any, inputValue: any) {
+    switch (condition) {
+      case '>':
+        return answer > Number(inputValue);
+      case '<':
+        return answer < Number(inputValue);
+      case '>=':
+        return answer >= Number(inputValue);
+      case '<=':
+        return answer <= Number(inputValue);
+      case '=':
+        return answer == inputValue;
+      case '!=':
+        return answer != inputValue;
+      default:
+        return false;
+    }
+  }
+
+  handleValidation(
+    isValid: boolean,
+    message: string = 'This field is required'
+  ) {
+    if (isValid) {
+      this.validationService.clearInvalid(this.buildElementId());
+    } else {
+      // this.validationService.setInvalid(this.question.id, message);
+    }
+  }
+
+  private buildElementId(): string {
+    return this.inLine || this.inCard
+      ? `${this.submissionIndex}-${this.question.id}`
+      : `${this.question.id}`;
+  }
+
+  get isInvalid(): boolean {
+    return !!this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  get errorMessage(): string | null {
+    return this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  ngAfterViewInit() {
+    if (this.inLine || this.inCard) {
+      this.elementId = `question-${this.submissionIndex}-${this.question.id}`;
+    } else {
+      this.elementId = `question-${this.question.id}`;
+    }
+
+    this.tracker.registerElement(this.elementId);
+  }
+
+  ngOnDestroy() {
+    if (this.elementId) {
+      this.tracker.unregisterElement(this.elementId);
+    }
+  }
+}