digipay-utility-payment 0.0.11 → 0.0.12

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
@@ -2253,210 +2278,242 @@ class BillWorkflowComponent {
         this.topupAndBillpaymentService.saveWorkflowData(workflowState);
     }
     getExtraFieldsToShow(field) {
-        if (field) {
-            let isReadOnly = false;
-            let fieldValue = null;
-            let customValidators = {};
-            if (field?.external_field_key === "dial_code") {
-                isReadOnly = true;
-                fieldValue = this.currentUserDetails?.dial_code;
-                this.fieldsModel = { "dial_code": fieldValue };
-            }
-            // Check if this is an amount field and we have a selected product
-            const isAmountField = field?.external_field_key?.toLowerCase().includes("amount") ||
-                field?.field_title?.toLowerCase().includes("amount");
-            if (isAmountField && this.selectedProduct) {
-                if (this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.FIXED) {
-                    // Fixed price: make field readonly and set the fixed price
-                    isReadOnly = true;
-                    fieldValue = this.selectedProduct?.product_fixed_price || 0;
-                    if (this.fieldsModel) {
-                        this.fieldsModel[field.external_field_key] = fieldValue;
-                    }
-                    else {
-                        this.fieldsModel = { [field.external_field_key]: fieldValue };
-                    }
-                }
-                else if (this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.RANGE) {
-                    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: {
-                            expression: (control) => {
-                                const value = control?.value;
-                                if (value === null || value === undefined || value === '') {
-                                    return true; // No error if empty
-                                }
-                                const valueStr = String(value).trim();
-                                // Convert string to number (handles leading zeros: "01" becomes 1, "08" becomes 8)
-                                const numValue = Number(valueStr);
-                                if (isNaN(numValue) || !isFinite(numValue)) {
-                                    return true; // Skip validation for invalid numbers
-                                }
-                                // Return true if value is IN range (no error), false if out of range (error)
-                                return numValue >= rangeMin && numValue <= rangeMax;
-                            },
-                            message: () => `${this.translationService.translate("COMMON_LABEL_AMOUNT_MUST_BE_BETWEEN")} ${rangeMin} ${this.translationService.translate("COMMON_LABEL_AND")} ${rangeMax}`
-                        }
-                    };
-                }
-            }
-            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"),
-                        },
-                    };
-                }
+        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 = field?.field_validation || [];
+        let isRequired = false;
+        let minLength;
+        let maxLength;
+        let minValue;
+        let maxValue;
+        const validationMessages = {};
+        validations.forEach((validation) => {
+            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;
             }
-            const validations = field?.field_validation || [];
-            const normalizedFieldType = this.normalizeFieldType(field?.field_type);
-            const normalizedValidations = this.normalizeValidations(validations);
-            const isRequired = normalizedValidations.isRequired;
-            const minLength = normalizedValidations.minLength;
-            const maxLength = normalizedValidations.maxLength;
-            let minValue = normalizedValidations.minValue;
-            let maxValue = normalizedValidations.maxValue;
-            // For range products, don't set HTML5 min/max to allow typing any value
-            // We'll validate using custom validator only
-            // This prevents HTML5 from blocking input before validation
-            if (isAmountField && this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.RANGE) {
-                // Don't override min/max - let custom validator handle it
-                // This allows users to type any value, then validate on blur/submit
+            else if (fieldType === 5) {
+                maxValue = parseFloat(fieldValue);
+                if (fieldError)
+                    validationMessages.max = fieldError;
             }
-            let res = {
-                key: field.external_field_key,
-                templateOptions: {},
-                className: "col-12",
-                wrappers: ["form-field-horizontal"],
-                type: "input",
-                // Enable real-time validation on change/input
-                modelOptions: {
-                    updateOn: 'change'
-                },
-                // Show errors in real-time (even when not touched)
-                expressionProperties: {
-                    'templateOptions.disabled': 'formState.disabled',
-                },
-                // Mark field as touched on value change to show errors immediately
-                hooks: {
-                    onInit: (field) => {
-                        const control = field.formControl;
-                        if (control) {
-                            // Subscribe to value changes and mark as touched to show errors immediately
-                            control.valueChanges.subscribe(() => {
-                                if (control.invalid && control.value !== null && control.value !== '') {
-                                    control.markAsTouched();
-                                }
-                            });
-                        }
+        });
+        let res = {
+            key: field.external_field_key,
+            templateOptions: {},
+            className: "col-sm-6",
+            wrappers: ["form-field-horizontal"],
+            type: "input",
+            modelOptions: { updateOn: 'change' },
+            expressionProperties: {
+                'templateOptions.disabled': 'formState.disabled',
+            },
+            hooks: {
+                onInit: (field) => {
+                    const control = field.formControl;
+                    if (control) {
+                        control.valueChanges.subscribe(() => {
+                            if (control.invalid && control.value !== null && control.value !== '') {
+                                control.markAsTouched();
+                            }
+                        });
                     }
                 }
-            };
-            // Add custom validators if any
-            if (Object.keys(customValidators).length > 0) {
-                res["validators"] = customValidators;
             }
-            if (normalizedFieldType == 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,
-                };
-                if (fieldValue !== null) {
-                    res["defaultValue"] = fieldValue;
-                }
-            }
-            else if (normalizedFieldType == TOPUP_BILL_PAYMENT_FIELD_TYPE.NUMERIC) {
-                // For range products, don't set min/max in templateOptions to allow typing
-                // Custom validator will handle validation
-                const templateOptions = {
-                    label: `${field.field_title} `,
-                    placeholder: `${this.translationService.translate("COMMON_LABEL_PLEASE_ENTER")} ${field.field_title}`,
-                    required: isRequired,
-                    minLength: minLength,
-                    maxLength: maxLength,
-                    readonly: isReadOnly,
-                };
-                // Only set min/max if NOT a range product (to allow typing any value for range products)
-                if (!(isAmountField && this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.RANGE)) {
-                    templateOptions.min = minValue;
-                    templateOptions.max = maxValue;
-                }
-                res["templateOptions"] = templateOptions;
-                res["type"] = "number-field";
-                if (fieldValue !== null) {
-                    res["defaultValue"] = fieldValue;
-                }
-            }
-            return res;
+        };
+        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,
+            };
         }
-        return null;
-    }
+        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: any): FormlyFieldConfig | null {
+    //     if (field) {
+    //         let isReadOnly = false;
+    //         let fieldValue: any = null;
+    //         let customValidators: any = {};
+    //         if (field?.external_field_key === "dial_code") {
+    //             isReadOnly = true;
+    //             fieldValue = this.currentUserDetails?.dial_code;
+    //             this.fieldsModel = { "dial_code": fieldValue };
+    //         }
+    //         // Check if this is an amount field and we have a selected product
+    //         const isAmountField = field?.external_field_key?.toLowerCase().includes("amount") ||
+    //                              field?.field_title?.toLowerCase().includes("amount");
+    //         if (isAmountField && this.selectedProduct) {
+    //             if (this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.FIXED) {
+    //                 // Fixed price: make field readonly and set the fixed price
+    //                 isReadOnly = true;
+    //                 fieldValue = this.selectedProduct?.product_fixed_price || 0;
+    //                 if (this.fieldsModel) {
+    //                     this.fieldsModel[field.external_field_key] = fieldValue;
+    //                 } else {
+    //                     this.fieldsModel = { [field.external_field_key]: fieldValue };
+    //                 }
+    //             } else if (this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.RANGE) {
+    //                 const rangeMin = Number(this.selectedProduct?.product_range_price?.min) || 0;
+    //                 const rangeMax = Number(this.selectedProduct?.product_range_price?.max) || 0;
+    //                 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: {
+    //                         expression: (control: any) => {
+    //                             const value = control?.value;
+    //                             if (value === null || value === undefined || value === '') {
+    //                                 return true; // No error if empty
+    //                             }
+    //                             const valueStr = String(value).trim();
+    //                             // Convert string to number (handles leading zeros: "01" becomes 1, "08" becomes 8)
+    //                             const numValue = Number(valueStr);
+    //                             if (isNaN(numValue) || !isFinite(numValue)) {
+    //                                 return true; // Skip validation for invalid numbers
+    //                             }
+    //                             // Return true if value is IN range (no error), false if out of range (error)
+    //                             return numValue >= rangeMin && numValue <= rangeMax;
+    //                         },
+    //                         message: () => `${this.translationService.translate("COMMON_LABEL_AMOUNT_MUST_BE_BETWEEN")} ${rangeMin} ${this.translationService.translate("COMMON_LABEL_AND")} ${rangeMax}`
+    //                     }
+    //                 };
+    //             }
+    //         }
+    //         const validations: Array<any> = field?.field_validation || [];
+    //         const normalizedFieldType = this.normalizeFieldType(field?.field_type);
+    //         const normalizedValidations = this.normalizeValidations(validations);
+    //         const isRequired: boolean = normalizedValidations.isRequired;
+    //         const minLength: number | undefined = normalizedValidations.minLength;
+    //         const maxLength: number | undefined = normalizedValidations.maxLength;
+    //         let minValue: number | undefined = normalizedValidations.minValue;
+    //         let maxValue: number | undefined = normalizedValidations.maxValue;
+    //         // For range products, don't set HTML5 min/max to allow typing any value
+    //         // We'll validate using custom validator only
+    //         // This prevents HTML5 from blocking input before validation
+    //         if (isAmountField && this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.RANGE) {
+    //             // Don't override min/max - let custom validator handle it
+    //             // This allows users to type any value, then validate on blur/submit
+    //         }
+    //         let res: FormlyFieldConfig = {
+    //             key: field.external_field_key,
+    //             templateOptions: {} as any,
+    //             className: "col-12",
+    //             wrappers: ["form-field-horizontal"],
+    //             type: "input",
+    //             // Enable real-time validation on change/input
+    //             modelOptions: {
+    //                 updateOn: 'change'
+    //             },
+    //             // Show errors in real-time (even when not touched)
+    //             expressionProperties: {
+    //                 'templateOptions.disabled': 'formState.disabled',
+    //             },
+    //             // Mark field as touched on value change to show errors immediately
+    //             hooks: {
+    //                 onInit: (field: FormlyFieldConfig) => {
+    //                     const control = field.formControl;
+    //                     if (control) {
+    //                         // Subscribe to value changes and mark as touched to show errors immediately
+    //                         control.valueChanges.subscribe(() => {
+    //                             if (control.invalid && control.value !== null && control.value !== '') {
+    //                                 control.markAsTouched();
+    //                             }
+    //                         });
+    //                     }
+    //                 }
+    //             }
+    //         };
+    //         // Add custom validators if any
+    //         if (Object.keys(customValidators).length > 0) {
+    //             res["validators"] = customValidators;
+    //         }
+    //         if (normalizedFieldType == 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,
+    //             };
+    //             if (fieldValue !== null) {
+    //                 res["defaultValue"] = fieldValue;
+    //             }
+    //         } else if (normalizedFieldType == TOPUP_BILL_PAYMENT_FIELD_TYPE.NUMERIC) {
+    //             // For range products, don't set min/max in templateOptions to allow typing
+    //             // Custom validator will handle validation
+    //             const templateOptions: any = {
+    //                 label: `${field.field_title} `,
+    //                 placeholder: `${this.translationService.translate("COMMON_LABEL_PLEASE_ENTER")} ${field.field_title}`,
+    //                 required: isRequired,
+    //                 minLength: minLength,
+    //                 maxLength: maxLength,
+    //                 readonly: isReadOnly,
+    //             };
+    //             // Only set min/max if NOT a range product (to allow typing any value for range products)
+    //             if (!(isAmountField && this.selectedProduct?.product_price_type === PRODUCT_PRICE_TYPE.RANGE)) {
+    //                 templateOptions.min = minValue;
+    //                 templateOptions.max = maxValue;
+    //             }
+    //             res["templateOptions"] = templateOptions;
+    //             res["type"] = "number-field";
+    //             if (fieldValue !== null) {
+    //                 res["defaultValue"] = fieldValue;
+    //             }
+    //         }
+    //         return res;
+    //     }
+    //     return null;
+    // }
     ngOnDestroy() {
         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 +2684,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.12",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"