add editable Account Type and Customer Segment dropdowns in product classification

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.html

@@ -74,12 +74,20 @@
       <div class="sad-grid sad-grid--classification">
         <mat-form-field appearance="outline" class="sad-field">
           <mat-label>Account Type</mat-label>
-          <input matInput [value]="productTemplate.accountType || ''" readonly />
+          <mat-select [(ngModel)]="selectedAccountType" [ngModelOptions]="{ standalone: true }">
+            @for (opt of accountTypeOptions; track opt) {
+              <mat-option [value]="opt">{{ opt }}</mat-option>
+            }
+          </mat-select>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="sad-field">
           <mat-label>Customer Segment</mat-label>
-          <input matInput [value]="productTemplate.customerSegment || ''" readonly />
+          <mat-select [(ngModel)]="selectedCustomerSegment" [ngModelOptions]="{ standalone: true }">
+            @for (opt of customerSegmentOptions; track opt) {
+              <mat-option [value]="opt">{{ opt }}</mat-option>
+            }
+          </mat-select>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="sad-field">

src/app/current-accounts/current-account-stepper/current-account-details-step/current-account-details-step.component.ts

@@ -116,6 +116,10 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
 
   /** Local copy of product template for displaying classification info */
   productTemplate: any = null;
+  accountTypeOptions: string[] = [];
+  customerSegmentOptions: string[] = [];
+  selectedAccountType: string | null = null;
+  selectedCustomerSegment: string | null = null;
 
   constructor() {
     this.createCurrentAccountDetailsForm();
@@ -192,6 +196,10 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
             }
           }
           this.productTemplate = response;
+          this.accountTypeOptions = this.extractOptions(response.accountTypeOptions, response.accountType);
+          this.customerSegmentOptions = this.extractOptions(response.customerSegmentOptions, response.customerSegment);
+          this.selectedAccountType = response.accountType ?? null;
+          this.selectedCustomerSegment = response.customerSegment ?? null;
           this.currentAccountProductTemplate.emit(response);
           this.fieldOfficerData = response.fieldOfficerOptions;
           this.currentAccountProductSelected = true;
@@ -215,6 +223,13 @@ export class CurrentAccountDetailsStepComponent implements OnInit {
   /**
    * Formats template dates into the current CBS date format.
    */
+  private extractOptions(options: any[], fallback?: string): string[] {
+    if (Array.isArray(options) && options.length > 0) {
+      return options.map((o: any) => o.value ?? o.name ?? o);
+    }
+    return fallback ? [fallback] : [];
+  }
+
   formatTemplateDate(value: any): string {
     if (!value) {
       return '';

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.html

@@ -74,12 +74,20 @@
       <div class="rad-grid rad-grid--classification">
         <mat-form-field appearance="outline" class="rad-field">
           <mat-label>Account Type</mat-label>
-          <input matInput [value]="productTemplate.accountType || ''" readonly />
+          <mat-select [(ngModel)]="selectedAccountType" [ngModelOptions]="{ standalone: true }">
+            @for (opt of accountTypeOptions; track opt) {
+              <mat-option [value]="opt">{{ opt }}</mat-option>
+            }
+          </mat-select>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="rad-field">
           <mat-label>Customer Segment</mat-label>
-          <input matInput [value]="productTemplate.customerSegment || ''" readonly />
+          <mat-select [(ngModel)]="selectedCustomerSegment" [ngModelOptions]="{ standalone: true }">
+            @for (opt of customerSegmentOptions; track opt) {
+              <mat-option [value]="opt">{{ opt }}</mat-option>
+            }
+          </mat-select>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="rad-field">

src/app/deposits/recurring-deposits/recurring-deposits-account-stepper/recurring-deposits-account-details-step/recurring-deposits-account-details-step.component.ts

@@ -8,7 +8,7 @@
 
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter, inject, ChangeDetectorRef } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, FormsModule } from '@angular/forms';
 import { SettingsService } from 'app/settings/settings.service';
 import { Dates } from 'app/core/utils/dates';
 
@@ -33,7 +33,8 @@ import { IntroducerSearchComponent } from 'app/shared/introducer-search/introduc
     MatStepperPrevious,
     FaIconComponent,
     MatStepperNext,
-    IntroducerSearchComponent
+    IntroducerSearchComponent,
+    FormsModule
   ]
 })
 export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
@@ -69,6 +70,10 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
 
   /** Local copy of product template for displaying classification info */
   productTemplate: any = null;
+  accountTypeOptions: string[] = [];
+  customerSegmentOptions: string[] = [];
+  selectedAccountType: string | null = null;
+  selectedCustomerSegment: string | null = null;
 
   constructor() {
     this.createRecurringDepositsAccountDetailsForm();
@@ -140,6 +145,10 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
             }
           }
           this.productTemplate = response;
+          this.accountTypeOptions = this.extractOptions(response.accountTypeOptions, response.accountType);
+          this.customerSegmentOptions = this.extractOptions(response.customerSegmentOptions, response.customerSegment);
+          this.selectedAccountType = response.accountType ?? null;
+          this.selectedCustomerSegment = response.customerSegment ?? null;
           this.recurringDepositsAccountProductTemplate.emit(response);
           this.fieldOfficerData = response.fieldOfficerOptions;
           this.isProductSelected = true;
@@ -173,6 +182,13 @@ export class RecurringDepositsAccountDetailsStepComponent implements OnInit {
    * Formats template dates into the current CBS date format.
    * Handles backend date arrays like [2026, 4, 20] as well as strings and Date objects.
    */
+  private extractOptions(options: any[], fallback?: string): string[] {
+    if (Array.isArray(options) && options.length > 0) {
+      return options.map((o: any) => o.value ?? o.name ?? o);
+    }
+    return fallback ? [fallback] : [];
+  }
+
   formatTemplateDate(value: any): string {
     if (!value) {
       return '';

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.html

@@ -78,12 +78,20 @@
       <div class="sad-grid sad-grid--classification">
         <mat-form-field appearance="outline" class="sad-field">
           <mat-label>Account Type</mat-label>
-          <input matInput [value]="productTemplate.accountType || ''" readonly />
+          <mat-select [(ngModel)]="selectedAccountType" [ngModelOptions]="{ standalone: true }">
+            @for (opt of accountTypeOptions; track opt) {
+              <mat-option [value]="opt">{{ opt }}</mat-option>
+            }
+          </mat-select>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="sad-field">
           <mat-label>Customer Segment</mat-label>
-          <input matInput [value]="productTemplate.customerSegment || ''" readonly />
+          <mat-select [(ngModel)]="selectedCustomerSegment" [ngModelOptions]="{ standalone: true }">
+            @for (opt of customerSegmentOptions; track opt) {
+              <mat-option [value]="opt">{{ opt }}</mat-option>
+            }
+          </mat-select>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="sad-field">

src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts

@@ -8,7 +8,7 @@
 
 /** Angular Imports */
 import { Component, OnInit, Input, Output, EventEmitter, inject, ChangeDetectorRef } from '@angular/core';
-import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { Dates } from 'app/core/utils/dates';
 import { SettingsService } from 'app/settings/settings.service';
 
@@ -31,7 +31,8 @@ import { IntroducerSearchComponent } from 'app/shared/introducer-search/introduc
     MatStepperPrevious,
     FaIconComponent,
     MatStepperNext,
-    IntroducerSearchComponent
+    IntroducerSearchComponent,
+    FormsModule
   ]
 })
 export class SavingsAccountDetailsStepComponent implements OnInit {
@@ -67,6 +68,10 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
 
   /** Local copy of product template for displaying classification info */
   productTemplate: any = null;
+  accountTypeOptions: string[] = [];
+  customerSegmentOptions: string[] = [];
+  selectedAccountType: string | null = null;
+  selectedCustomerSegment: string | null = null;
 
   /**
    * Sets share account details form.
@@ -127,6 +132,10 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
         .getSavingsAccountTemplate(entityId, productId, this.savingsAccountTemplate.groupId ? true : false)
         .subscribe((response: any) => {
           this.productTemplate = response;
+          this.accountTypeOptions = this.extractOptions(response.accountTypeOptions, response.accountType);
+          this.customerSegmentOptions = this.extractOptions(response.customerSegmentOptions, response.customerSegment);
+          this.selectedAccountType = response.accountType ?? null;
+          this.selectedCustomerSegment = response.customerSegment ?? null;
           this.savingsAccountProductTemplate.emit(response);
           this.fieldOfficerData = response.fieldOfficerOptions;
           this.savingsProductSelected = true;
@@ -145,6 +154,13 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
    * Formats template dates into the current CBS date format.
    * Handles backend date arrays like [2026, 4, 20] as well as strings and Date objects.
    */
+  private extractOptions(options: any[], fallback?: string): string[] {
+    if (Array.isArray(options) && options.length > 0) {
+      return options.map((o: any) => o.value ?? o.name ?? o);
+    }
+    return fallback ? [fallback] : [];
+  }
+
   formatTemplateDate(value: any): string {
     if (!value) {
       return '';