refactor: improve loan product creation UI and localization (#3711)

Co-authored-by: YousufFFFF <ansariyousuf365@gmail.com>

Author: YousufFFFF

src/app/products/loan-products/create-loan-product/loan-product-selection.component.html

@@ -8,16 +8,9 @@
 
 <div class="landing-page">
   <section class="landing-page__hero">
-    <div>
-      <p class="landing-page__eyebrow">{{ 'labels.text.Products' | translate }}</p>
-      <h1>{{ 'labels.heading.Loan product creation' | translate }}</h1>
-      <p class="landing-page__copy">{{ 'labels.text.Select a product below' | translate }}</p>
-    </div>
-
-    <div class="landing-page__badge">
-      <span>{{ 'labels.text.Version 2' | translate }}</span>
-      <strong>{{ 'labels.text.Personal and Custom Loan enabled' | translate }}</strong>
-    </div>
+    <p class="landing-page__eyebrow">{{ 'labels.text.Products' | translate }}</p>
+    <h1>{{ 'labels.heading.Loan product creation' | translate }}</h1>
+    <p class="landing-page__copy">{{ 'labels.text.Select a product below' | translate }}</p>
   </section>
 
   <section class="product-grid">
@@ -28,29 +21,27 @@ <h1>{{ 'labels.heading.Loan product creation' | translate }}</h1>
       [class.product-card--disabled]="product.disabled"
     >
       <div class="product-card__header">
-        <div>
-          <p class="product-card__eyebrow">{{ 'labels.inputs.Product' | translate }}</p>
-          <h3>{{ product.name }}</h3>
+        <div class="product-card__icon">
+          <mat-icon aria-hidden="true">{{ product.icon }}</mat-icon>
         </div>
         <span class="product-chip" [class.product-chip--active]="product.active">
-          {{ (product.active ? 'labels.inputs.Active' : 'labels.inputs.Disabled') | translate }}
+          {{ (product.active ? 'labels.inputs.Active' : 'labels.text.Upcoming') | translate }}
         </span>
       </div>
 
-      <p class="product-card__description">{{ product.description }}</p>
+      <h3 class="product-card__title">{{ product.name }}</h3>
+      <p class="product-card__description">{{ product.description | translate }}</p>
 
-      <button
+      <a
         *ngIf="product.active"
-        mat-raised-button
+        mat-button
         color="primary"
+        class="product-card__cta"
         [routerLink]="['/products', 'loan-products', product.route]"
         [queryParams]="{ productType: 'loan' }"
       >
-        {{ 'labels.buttons.Create' | translate }} {{ product.name }}
-      </button>
-      <button *ngIf="!product.active" mat-stroked-button disabled>
-        {{ 'labels.text.Coming soon' | translate }}
-      </button>
+        {{ 'labels.buttons.Create' | translate }}
+      </a>
     </mat-card>
   </section>
 </div>

src/app/products/loan-products/create-loan-product/loan-product-selection.component.scss

@@ -16,10 +16,6 @@
 }
 
 .landing-page__hero {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-  align-items: flex-start;
   border-radius: 1rem;
   background: var(--mat-sys-surface-container, #2e2e2e);
   padding: 1.25rem;
@@ -38,20 +34,6 @@
   margin: 0.5rem 0 0;
 }
 
-.landing-page__badge,
-.product-chip {
-  border-radius: 999px;
-  padding: 0.35rem 0.75rem;
-  font-size: 0.8rem;
-}
-
-.landing-page__badge {
-  display: grid;
-  gap: 0.25rem;
-  background: rgb(255 255 255 / 8%);
-  min-width: 12rem;
-}
-
 .product-grid {
   display: flex;
   flex-wrap: wrap;
@@ -84,33 +66,55 @@
 .product-card__header {
   display: flex;
   justify-content: space-between;
+  align-items: flex-start;
   gap: 0.75rem;
 }
 
-.product-card__eyebrow {
-  margin: 0 0 0.25rem;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  opacity: 0.75;
+.product-card__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.75rem;
+  background: rgb(255 255 255 / 8%);
+  color: rgb(255 255 255 / 70%);
+}
+
+.product-card--active .product-card__icon {
+  background: rgb(30 136 229 / 18%);
+  color: var(--mat-sys-primary, #1e88e5);
+}
+
+.product-card__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
 }
 
 .product-card__description {
   margin: 0;
   line-height: 1.4;
 }
 
+.product-card__cta {
+  justify-self: start;
+  padding: 0;
+  min-width: 0;
+}
+
+.product-card__cta::after {
+  content: ' →';
+}
+
 .product-chip {
   align-self: flex-start;
+  border-radius: 999px;
+  padding: 0.35rem 0.75rem;
+  font-size: 0.8rem;
   background: rgb(255 255 255 / 8%);
 }
 
 .product-chip--active {
   background: rgb(30 136 229 / 22%);
 }
-
-@media (width <= 768px) {
-  .landing-page__hero {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}

src/app/products/loan-products/create-loan-product/loan-product-selection.component.ts

@@ -10,6 +10,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
 import { PRODUCT_CARDS } from '../wizard/loan-product.config';
 
@@ -22,6 +23,7 @@ import { PRODUCT_CARDS } from '../wizard/loan-product.config';
     ...STANDALONE_SHARED_IMPORTS,
     MatCardModule,
     MatButtonModule,
+    MatIconModule,
     RouterLink
   ],
   changeDetection: ChangeDetectionStrategy.OnPush

src/app/products/loan-products/wizard/loan-product.config.spec.ts

@@ -7,7 +7,7 @@
  */
 
 import { LoanProducts } from '../loan-products';
-import { buildPayload } from './loan-product.config';
+import { buildPayload, PRODUCT_CARDS } from './loan-product.config';
 
 describe('loan-product.config buildPayload', () => {
   it('removes unsupported hidden defaults from the personal loan payload', () => {
@@ -432,3 +432,13 @@ describe('loan-product.config buildPayload', () => {
     expect(payload.enableAutoRepaymentForDownPayment).toBe(true);
   });
 });
+
+describe('loan-product.config PRODUCT_CARDS', () => {
+  it('gives every product card a non-empty icon', () => {
+    PRODUCT_CARDS.forEach((product) => {
+      expect(product.icon).toBeDefined();
+      expect(typeof product.icon).toBe('string');
+      expect(product.icon.length).toBeGreaterThan(0);
+    });
+  });
+});

src/app/products/loan-products/wizard/loan-product.config.ts

@@ -86,6 +86,7 @@ export interface ProductCard {
   disabled?: boolean;
   route?: string;
   ctaLabel?: string;
+  icon: string;
 }
 
 export type FieldType = 'text' | 'number' | 'select' | 'checkbox' | 'textarea' | 'date';
@@ -123,119 +124,140 @@ export interface FormStep {
 export const PRODUCT_CARDS: ProductCard[] = [
   {
     name: 'Custom / Advanced',
-    description: 'Flexible configuration with advanced controls for tranche and arrears behavior.',
+    // Fully qualified translation key (rather than literal display text like the other cards below) so
+    // this specific description can be localized; the template applies `| translate` to every card's
+    // `description`, and untranslated literal text safely falls through the missing-translation handler
+    // unchanged, so this doesn't require touching the other, not-yet-translated cards.
+    description: 'labels.text.Complete control over every aspect of product behavior',
     active: true,
     disabled: false,
     route: 'custom-advanced',
-    ctaLabel: 'Create Custom / Advanced'
+    ctaLabel: 'Create Custom / Advanced',
+    icon: 'tune'
   },
   {
     name: 'Personal Loan',
     description:
       'Unsecured funding for personal needs like travel, medical expenses, or weddings, with flexible tenure and minimal documentation.',
     active: true,
     disabled: false,
-    route: 'personal-loan'
+    route: 'personal-loan',
+    icon: 'account_balance_wallet'
   },
   {
     name: 'Two Wheeler Loan',
     description: 'Finance for new or used two-wheelers with quick approval and flexible down payment options.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'pedal_bike'
   },
   {
     name: 'JLG Loan',
     description:
       'Group-backed microloans for individuals in a Joint Liability Group, typically for income-generating activities.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'group'
   },
   {
     name: 'Education Loan',
     description:
       'Funding for tuition and related expenses for domestic or international studies, with repayment options aligned to course duration.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'school'
   },
   {
     name: 'Home Loan',
     description: 'Long-tenure financing to purchase, construct, or renovate a residential property.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'home'
   },
   {
     name: 'Mortgage Loan (LAP)',
     description: 'Loan against property where an existing residential or commercial asset is pledged as collateral.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'home_work'
   },
   {
     name: 'Agri Loan',
     description:
       'Credit for farming-related needs such as crop production, equipment, or land development, often tied to agricultural cycles.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'agriculture'
   },
   {
     name: 'Auto Loan',
     description: 'Financing for new or used car purchases with structured EMIs over a chosen tenure.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'directions_car'
   },
   {
     name: 'Gold Loan',
     description:
       'Quick secured loan against pledged gold ornaments or coins, with fast disbursal and minimal paperwork.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'diamond'
   },
   {
     name: 'Consumer Durable Loan',
     description:
       'Point-of-sale financing for electronics, appliances, and other durable goods, often with zero-cost EMI options.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'devices'
   },
   {
     name: 'Loan vs Securities / FD',
     description:
       'Credit extended against shares, mutual funds, or fixed deposits without liquidating the underlying investment.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'account_balance'
   },
   {
     name: 'Credit Card EMI',
     description: 'Converts card spends or available credit limit into structured EMIs.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'credit_card'
   },
   {
     name: 'BNPL',
     description:
       'Buy now, pay later financing for short-term, often interest-free purchases, settled in fixed installments.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'shopping_cart'
   },
   {
     name: 'Invoice Discounting',
     description:
       'Short-term financing against unpaid invoices to improve business cash flow before customer payment is due.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'receipt_long'
   },
   {
     name: 'Merchant Cash Advance',
     description:
       'Working capital advanced against future card or digital sales, repaid as a percentage of daily transactions.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'storefront'
   },
   {
     name: 'Line of Credit',
     description:
       'A revolving credit limit that can be drawn, repaid, and reused as needed, with interest charged only on the amount utilized.',
     active: false,
-    disabled: true
+    disabled: true,
+    icon: 'credit_score'
   }
 ];
 

src/assets/translations/cs-CS.json

@@ -3994,9 +3994,8 @@
       "Tellers": "Věštci",
       "Template defaults are preloaded": "Výchozí hodnoty šablony jsou předvyplněny",
       "Select a product below": "Vyberte produkt níže",
-      "Version 2": "Verze 2",
-      "Personal and Custom Loan enabled": "Osobní a vlastní úvěr povolen",
-      "Coming soon": "Již brzy",
+      "Upcoming": "Nadcházející",
+      "Complete control over every aspect of product behavior": "Úplná kontrola nad každým aspektem chování produktu — od moratoria a subvencí až po struktury s více tranšemi, pravidla rozdělování plateb a mnohem více.",
       "Template I am trying to use": "Toto je šablona, ​​kterou se snažím použít. Je to v pořádku?",
       "Templates": "Šablony",
       "Tenant": "Nájemce",

src/assets/translations/de-DE.json

@@ -3995,9 +3995,8 @@
       "Tellers": "Kassierer",
       "Template defaults are preloaded": "Template defaults are preloaded",
       "Select a product below": "Select a product below",
-      "Version 2": "Version 2",
-      "Personal and Custom Loan enabled": "Personal and Custom Loan enabled",
-      "Coming soon": "Coming soon",
+      "Upcoming": "Demnächst",
+      "Complete control over every aspect of product behavior": "Vollständige Kontrolle über jeden Aspekt des Produktverhaltens — von Moratorium und Subvention bis hin zu Multi-Tranchen-Strukturen, Aufteilungsregeln und mehr.",
       "Template I am trying to use": "Dies ist die Vorlage, die ich verwenden möchte. Ist das gut.",
       "Templates": "Vorlagen",
       "Tenant": "Mandant",