digipay-utility-payment 0.0.11 → 0.0.13

package/fesm2022/digipay-utility-payment.mjs

@@ -1306,7 +1306,7 @@ class FormlyHorizontalWrapperComponent extends FieldWrapper {
           <em class="text-danger">*</em>
         }
       </label>
-      <div class="col-md-5">
+      <div class="col-md-7">
         <ng-template #fieldComponent></ng-template>
         @if (showError) {
           <div class="invalid-feedback d-block">
@@ -1331,7 +1331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           <em class="text-danger">*</em>
         }
       </label>
-      <div class="col-md-5">
+      <div class="col-md-7">
         <ng-template #fieldComponent></ng-template>
         @if (showError) {
           <div class="invalid-feedback d-block">
@@ -1928,19 +1928,16 @@ class BillWorkflowComponent {
         this.topupAndBillpaymentService.vendorProvider.pipe(takeUntil(this.destroy$)).subscribe(data => {
             if (isNotNull(data)) {
                 this.vendorProvider = data;
-                console.log("vendorProvider==>", this.vendorProvider);
             }
         });
         this.topupAndBillpaymentService.workFlowUserInput.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (isNotNull(data)) {
                 this.workFlowUserInput = data;
-                console.log("workFlowUserInput==>", this.workFlowUserInput);
             }
         });
         this.topupAndBillpaymentService.vendorPlan.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (isNotNull(data)) {
                 this.selectedProduct = data;
-                console.log("selectedProduct==>", this.selectedProduct);
             }
         });
         this.topupAndBillpaymentService.currentScreenStep.pipe(takeUntil(this.destroy$)).subscribe((index) => {
@@ -1959,7 +1956,6 @@ class BillWorkflowComponent {
         this.topupAndBillpaymentService.workflowData.pipe(takeUntil(this.destroy$)).subscribe((data) => {
             if (isNotNull(data)) {
                 this.allWorkflowData = data;
-                console.log("allWorkflowData==>", this.allWorkflowData);
             }
         });
         // Create form with updateOn: 'change' for real-time validation
@@ -2087,7 +2083,36 @@ class BillWorkflowComponent {
         }
     }
     submitForm() {
-        if (!this.validateEnteredAmountAgainstBill()) {
+        // Mark all fields as touched to show validation errors
+        this.fieldsArray.forEach((field) => {
+            if (!field.key)
+                return;
+            const formControl = this.detailsForm.get(field?.key.toString());
+            if (formControl) {
+                formControl.markAsTouched();
+                formControl.updateValueAndValidity();
+            }
+        });
+        // Check if any required fields are empty
+        let hasEmptyFields = false;
+        this.fieldsArray.forEach((field) => {
+            const isRequired = field?.templateOptions?.required;
+            const fieldKey = field.key?.toString();
+            if (!fieldKey)
+                return;
+            const formControl = this.detailsForm.get(fieldKey);
+            const fieldValue = formControl?.value;
+            if (isRequired && (!fieldValue || fieldValue === '' || fieldValue === null || fieldValue === undefined)) {
+                hasEmptyFields = true;
+                if (formControl) {
+                    formControl.setErrors({ required: true });
+                    formControl.markAsTouched();
+                }
+            }
+        });
+        if (hasEmptyFields || !this.detailsForm.valid) {
+            // Show error message when form is invalid or has empty required fields
+            this.toasterService.error(this.translationService.translate("LABEL_PLEASE_FILL_ALL_REQUIRED_FIELDS"));
             return;
         }
         // Validate amount range for products with range price type
@@ -2252,6 +2277,93 @@ class BillWorkflowComponent {
         };
         this.topupAndBillpaymentService.saveWorkflowData(workflowState);
     }
+    //     getExtraFieldsToShow(field: any): FormlyFieldConfig | undefined {
+    //     if (!field) return undefined;  // Early return for falsy field
+    //     let isReadOnly = false;
+    //     if (field?.external_field_key === "dial_code") {
+    //         isReadOnly = true;
+    //         this.fieldsModel = { "dial_code": this.currentUserDetails?.dial_code };
+    //     }
+    //     const validations: Array<any> = field?.field_validation || [];
+    //     let isRequired: boolean = false;
+    //     let minLength: number | undefined;
+    //     let maxLength: number | undefined;
+    //     let minValue: number | undefined;
+    //     let maxValue: number | undefined;
+    //     const validationMessages: any = {};
+    //     validations.forEach((validation: any) => {
+    //         const fieldType = validation?.field_types;
+    //         const fieldValue = validation?.field_values;
+    //         const fieldError = validation?.field_error;
+    //         if (fieldType === 1) {
+    //             isRequired = fieldValue === "true" || fieldValue === true || fieldValue === "1";
+    //         } else if (fieldType === 2) {
+    //             maxLength = parseInt(fieldValue);
+    //             if (fieldError) validationMessages.maxlength = fieldError;
+    //         } else if (fieldType === 3) {
+    //             minValue = parseFloat(fieldValue);
+    //             if (fieldError) validationMessages.min = fieldError;
+    //         } else if (fieldType === 4) {
+    //             minLength = parseInt(fieldValue);
+    //             if (fieldError) validationMessages.minlength = fieldError;
+    //             if (!isRequired) isRequired = true;
+    //         } else if (fieldType === 5) {
+    //             maxValue = parseFloat(fieldValue);
+    //             if (fieldError) validationMessages.max = fieldError;
+    //         }
+    //     });
+    //     let res: FormlyFieldConfig = {
+    //         key: field.external_field_key,
+    //         templateOptions: {} as FormlyTemplateOptions,
+    //         className: "col-sm-6",
+    //         wrappers: ["form-field-horizontal"],
+    //         type: "input",
+    //         modelOptions: { updateOn: 'change' },
+    //         expressionProperties: {
+    //             'templateOptions.disabled': 'formState.disabled',
+    //         },
+    //         hooks: {
+    //             onInit: (field: FormlyFieldConfig) => {
+    //                 const control = field.formControl;
+    //                 if (control) {
+    //                     control.valueChanges.subscribe(() => {
+    //                         if (control.invalid && control.value !== null && control.value !== '') {
+    //                             control.markAsTouched();
+    //                         }
+    //                     });
+    //                 }
+    //             }
+    //         }
+    //     };
+    //     if (isRequired) {
+    //         validationMessages.required = `${field.field_title} ${this.translationService.translate("LABEL_IS_REQUIRED")}`;
+    //     }
+    //     if (Object.keys(validationMessages).length > 0) {
+    //         res["validation"] = { messages: validationMessages };
+    //     }
+    //     if (field.field_type == TOPUP_BILL_PAYMENT_FIELD_TYPE.TEXT_BOX) {
+    //         res["templateOptions"] = {
+    //             label: `${field.field_title} `,
+    //             placeholder: `${this.translationService.translate("COMMON_LABEL_PLEASE_ENTER")} ${field.field_title}`,
+    //             required: isRequired,
+    //             minLength: minLength,
+    //             maxLength: maxLength,
+    //             readonly: isReadOnly,
+    //         };
+    //     } else if (field.field_type == TOPUP_BILL_PAYMENT_FIELD_TYPE.NUMERIC) {
+    //         res["templateOptions"] = {
+    //             label: `${field.field_title} `,
+    //             placeholder: `${this.translationService.translate("COMMON_LABEL_PLEASE_ENTER")} ${field.field_title}`,
+    //             required: isRequired,
+    //             min: minValue,
+    //             max: maxValue,
+    //             minLength: minLength,
+    //             maxLength: maxLength,
+    //         };
+    //         res["type"] = "number-field";
+    //     }
+    //     return res;  // Always reached now
+    // }
     getExtraFieldsToShow(field) {
         if (field) {
             let isReadOnly = false;
@@ -2281,7 +2393,6 @@ class BillWorkflowComponent {
                     const rangeMin = Number(this.selectedProduct?.product_range_price?.min) || 0;
                     const rangeMax = Number(this.selectedProduct?.product_range_price?.max) || 0;
                     customValidators = {
-                        ...customValidators,
                         // Range validator - checks if value is within the allowed range
                         // Allows typing leading zeros (e.g., "01", "08") but validates the numeric value
                         range: {
@@ -2304,24 +2415,6 @@ class BillWorkflowComponent {
                     };
                 }
             }
-            if (isAmountField) {
-                const billAmount = this.getBillAmount();
-                if (billAmount !== null) {
-                    customValidators = {
-                        ...customValidators,
-                        billAmountMax: {
-                            expression: (control) => {
-                                const enteredAmount = this.parseFormAmount(control?.value);
-                                if (enteredAmount === null) {
-                                    return true;
-                                }
-                                return enteredAmount <= billAmount;
-                            },
-                            message: () => this.translationService.translate("COMMON_LABEL_AMOUNT_MUST_NOT_EXCEED_BILL_AMOUNT"),
-                        },
-                    };
-                }
-            }
             const validations = field?.field_validation || [];
             const normalizedFieldType = this.normalizeFieldType(field?.field_type);
             const normalizedValidations = this.normalizeValidations(validations);
@@ -2413,50 +2506,6 @@ class BillWorkflowComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
-    getSelectedBill() {
-        return this.allWorkflowData?.selectedBill ?? this.selectedBill ?? null;
-    }
-    getBillAmount() {
-        const billAmount = Number(this.getSelectedBill()?.bill_amount);
-        if (isNaN(billAmount) || billAmount <= 0) {
-            return null;
-        }
-        return billAmount;
-    }
-    findAmountField() {
-        return this.fieldsArray.find((field) => {
-            const keyStr = String(field?.key || "").toLowerCase();
-            const labelStr = String(field?.templateOptions?.label || "").toLowerCase();
-            return keyStr.includes("amount") || labelStr.includes("amount");
-        });
-    }
-    parseFormAmount(value) {
-        if (value === null || value === undefined || value === "") {
-            return null;
-        }
-        const amount = typeof value === "number" ? value : parseFloat(String(value));
-        return isNaN(amount) ? null : amount;
-    }
-    validateEnteredAmountAgainstBill() {
-        const billAmount = this.getBillAmount();
-        if (billAmount === null) {
-            return true;
-        }
-        const amountField = this.findAmountField();
-        if (!amountField?.key) {
-            return true;
-        }
-        const fieldKey = String(amountField.key);
-        const enteredAmount = this.parseFormAmount(this.detailsForm?.value[fieldKey]);
-        if (enteredAmount === null || enteredAmount <= billAmount) {
-            return true;
-        }
-        this.toasterService.error(this.translationService.translate("COMMON_LABEL_AMOUNT_MUST_NOT_EXCEED_BILL_AMOUNT"));
-        const control = this.detailsForm.get(fieldKey);
-        control?.setErrors({ ...(control.errors ?? {}), billAmountMax: true });
-        control?.markAsTouched();
-        return false;
-    }
     normalizeWorkflowDetails(workflowDetails) {
         if (!Array.isArray(workflowDetails))
             return [];
@@ -2627,7 +2676,7 @@ class WorkFlowComponent {
                     this.prepareFormFields(this.workFlowDetails?.screen_config);
                 }
                 else {
-                    this.toasterService.error(res?.error[0]);
+                    this.toasterService.error(this.translationService.translate(res?.error[0]));
                 }
             },
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "digipay-utility-payment",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"