WEB-506 feat: add Remittance Module with 7-step payout wizard (#3200)

WEB-506 fix: address CodeRabbit review (security, validation) WEB-506 fix: make API gateway header name configurable (MIFOS_REMITTANCE_API_HEADER) WEB-506 fix: remove duplicate translation keys (Personal Information, Transaction Details)
2026-02-21 23:52:37 -06:00
parent e8bfdd435d
commit 4c8f5d8343
50 changed files with 3684 additions and 13 deletions
@@ -0,0 +1,107 @@
+<!--
+  Copyright since 2025 Mifos Initiative
+
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<div class="step-content">
+  <h3>{{ 'labels.heading.Confirm Payout' | translate }}</h3>
+  <p class="description">
+    {{ 'labels.text.Please review the details carefully before confirming the payment.' | translate }}
+  </p>
+
+  <div class="confirmation-card">
+    <!-- Transaction info -->
+    @if (remittanceData) {
+      <div class="card-section">
+        <h4>{{ 'labels.heading.Transaction' | translate }}</h4>
+        @if (officeName) {
+          <div class="info-row">
+            <span class="label">{{ 'labels.inputs.Office' | translate }}</span>
+            <span class="value">{{ officeName }}</span>
+          </div>
+        }
+        <div class="info-row">
+          <span class="label">{{ 'labels.inputs.Code' | translate }}</span>
+          <span class="value">{{ remittanceData.pin }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">{{ 'labels.inputs.Date' | translate }}</span>
+          <span class="value">{{ remittanceData.created | date: 'medium' }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">{{ 'labels.inputs.Payout Amount' | translate }}</span>
+          <span class="value amount">{{
+            remittanceData.receivingAmount | currency: remittanceData.receivingCurrency
+          }}</span>
+        </div>
+        <div class="info-row">
+          <span class="label">{{ 'labels.inputs.Sender' | translate }}</span>
+          <span class="value">{{ remittanceData.senderName }}</span>
+        </div>
+      </div>
+    }
+
+    <mat-divider></mat-divider>
+
+    <!-- Recipient info -->
+    <div class="card-section">
+      <h4>{{ 'labels.heading.Recipient' | translate }}</h4>
+      <div class="info-row">
+        <span class="label">{{ 'labels.inputs.Name' | translate }}</span>
+        @if (recipientData?.givenName) {
+          <span class="value">{{ recipientData.givenName }} {{ recipientData.lastName }}</span>
+        } @else {
+          <span class="value">{{ remittanceData?.recipientName }}</span>
+        }
+      </div>
+      @if (recipientData?.primaryDocument?.documentType) {
+        <div class="info-row">
+          <span class="label">{{ 'labels.inputs.Document' | translate }}</span>
+          <span class="value"
+            >{{ recipientData.primaryDocument?.documentType }} -
+            {{ recipientData.primaryDocument?.documentNumber }}</span
+          >
+        </div>
+      }
+    </div>
+
+    @if (payoutAssignment) {
+      <mat-divider></mat-divider>
+
+      <!-- Assignment info -->
+      <div class="card-section">
+        <h4>{{ 'labels.heading.Payout Assignment' | translate }}</h4>
+        <div class="info-row">
+          <span class="label">{{ 'labels.inputs.Status' | translate }}</span>
+          <span class="value">{{ payoutAssignment.status }}</span>
+        </div>
+        @if (payoutAssignment?.trackingNumber) {
+          <div class="info-row">
+            <span class="label">{{ 'labels.inputs.Reference Number' | translate }}</span>
+            <span class="value mono">{{ payoutAssignment.trackingNumber }}</span>
+          </div>
+        }
+      </div>
+    }
+  </div>
+
+  @if (errorMessage) {
+    <div class="error-banner">
+      <mat-icon>error_outline</mat-icon>
+      <span>{{ errorMessage }}</span>
+    </div>
+  }
+
+  <div class="step-actions">
+    <button mat-raised-button color="warn" (click)="confirmPayout()" [disabled]="isLoading || !vendor">
+      @if (isLoading) {
+        <mat-spinner diameter="20"></mat-spinner>
+      } @else {
+        <span><mat-icon>check_circle</mat-icon> {{ 'labels.buttons.Confirm Payment' | translate }}</span>
+      }
+    </button>
+  </div>
+</div>