BG-634: Create deposit - better cash field

src/app/deposits/components/create-deposit-dialog/create-deposit-dialog.component.html

@@ -4,6 +4,7 @@
         [extensions]="extensions"
         [formControl]="control"
         namespace="deposit"
+        noToolbar
         type="DepositParams"
     ></cc-fistful-thrift-form>
     <v-dialog-actions>
@@ -12,3 +13,7 @@
         </button>
     </v-dialog-actions>
 </v-dialog>
+
+<ng-template #sourceCashTemplate let-cashControl="control">
+    <cc-source-cash-field [formControl]="cashControl"></cc-source-cash-field>
+</ng-template>

src/app/deposits/components/create-deposit-dialog/create-deposit-dialog.component.ts

@@ -1,15 +1,17 @@
 import { BehaviorSubject, combineLatest, first, map, of, switchMap } from 'rxjs';
 
-import { Component, DestroyRef, TemplateRef, ViewChild, inject } from '@angular/core';
+import { Component, DestroyRef, TemplateRef, inject, viewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, Validators } from '@angular/forms';
 
+import { Cash } from '@vality/domain-proto/domain';
 import { DepositParams } from '@vality/fistful-proto/deposit';
 import { DialogSuperclass, NotifyLogService, progressTo } from '@vality/matez';
 import { ThriftFormExtension, isTypeWithAliases } from '@vality/ng-thrift';
 
 import { DomainObjectsStoreService } from '~/api/domain-config';
 import { ThriftDepositManagementService, ThriftRepositoryClientService } from '~/api/services';
+import { SourceCash, SourceCashFieldComponent } from '~/components/source-cash-field';
 import { getDomainObjectOption } from '~/components/thrift-api-crud/domain/services/domain-metadata-form-extensions/utils/get-domain-object-option';
 import { UserInfoBasedIdGeneratorService } from '~/services';
 
@@ -27,8 +29,8 @@ export class CreateDepositDialogComponent extends DialogSuperclass<CreateDeposit
     private domainStoreService = inject(DomainObjectsStoreService);
     private fetchSourcesService = inject(FetchSourcesService);
     private thriftRepositoryClientService = inject(ThriftRepositoryClientService);
-
-    @ViewChild('currencyTemplate') currencyTemplate: TemplateRef<unknown>;
+    private sourceCashTemplate =
+        viewChild<TemplateRef<SourceCashFieldComponent>>('sourceCashTemplate');
 
     control = new FormControl(this.getDefaultValue(), [Validators.required]);
     progress$ = new BehaviorSubject(0);
@@ -44,18 +46,21 @@ export class CreateDepositDialogComponent extends DialogSuperclass<CreateDeposit
             extension: () => of({ hidden: true }),
         },
         {
-            determinant: (data) => of(isTypeWithAliases(data, 'CurrencySymbolicCode', 'base')),
+            determinant: (data) => of(isTypeWithAliases(data, 'Cash', 'base')),
             extension: () =>
-                this.fetchSourcesService.sources$.pipe(
-                    map((sources) => ({
-                        options: sources.map((source) => ({
-                            label: source.name,
-                            value: source.currency_symbolic_code,
-                            details: source,
-                        })),
-                        isIdentifier: true,
-                    })),
-                ),
+                of({
+                    template: this.sourceCashTemplate(),
+                    converter: {
+                        outputToInternal: (outputValue: Cash): Partial<SourceCash> => ({
+                            amount: outputValue?.amount,
+                            currencySymbolicCode: outputValue?.currency?.symbolic_code,
+                        }),
+                        internalToOutput: (inputValue: SourceCash): Cash => ({
+                            amount: inputValue?.amount,
+                            currency: { symbolic_code: inputValue?.currencySymbolicCode },
+                        }),
+                    },
+                }),
         },
         {
             determinant: (data) => of(isTypeWithAliases(data, 'WalletID', 'deposit')),

src/app/deposits/components/create-deposit-dialog/create-deposit-dialog.module.ts

@@ -10,8 +10,8 @@ import { MatSelectModule } from '@angular/material/select';
 
 import { DialogModule } from '@vality/matez';
 
-import { CurrencySourceFieldComponent } from '~/components/currency-source-field';
 import { FistfulThriftFormComponent } from '~/components/fistful-thrift-form';
+import { SourceCashFieldComponent } from '~/components/source-cash-field';
 import { UserInfoBasedIdGeneratorModule } from '~/services';
 
 import { CreateDepositDialogComponent } from './create-deposit-dialog.component';
@@ -28,8 +28,8 @@ import { CreateDepositDialogComponent } from './create-deposit-dialog.component'
         MatProgressBarModule,
         UserInfoBasedIdGeneratorModule,
         DialogModule,
-        CurrencySourceFieldComponent,
         FistfulThriftFormComponent,
+        SourceCashFieldComponent,
     ],
     declarations: [CreateDepositDialogComponent],
 })

src/components/source-cash-field/source-cash-field.component.ts

@@ -1,6 +1,6 @@
 import isNil from 'lodash-es/isNil';
 import { combineLatest, of, switchMap } from 'rxjs';
-import { distinctUntilChanged, map, shareReplay, startWith, take } from 'rxjs/operators';
+import { distinctUntilChanged, map, shareReplay, take } from 'rxjs/operators';
 
 import { CommonModule, getCurrencySymbol } from '@angular/common';
 import {
@@ -36,6 +36,7 @@ import { FetchSourcesService } from '../../app/sources';
 export interface SourceCash {
     amount: number;
     sourceId: StatSource['id'];
+    currencySymbolicCode: string;
 }
 
 const GROUP_SEPARATOR = ' ';
@@ -71,7 +72,6 @@ export class SourceCashFieldComponent
     sourceControl = new FormControl<StatSource>(null);
 
     options$ = this.fetchSourcesService.sources$.pipe(
-        startWith([] as StatSource[]),
         map((sources): Option<StatSource>[] =>
             sources.map((s) => ({
                 label: s.currency_symbolic_code,
@@ -123,14 +123,17 @@ export class SourceCashFieldComponent
                 }),
                 distinctUntilChanged(),
             ),
-            getValueChanges(this.sourceControl).pipe(
-                map((s) => s?.id),
-                distinctUntilChanged(),
-            ),
+            getValueChanges(this.sourceControl).pipe(distinctUntilChanged()),
         ])
             .pipe(
-                map(([amount, sourceId]) =>
-                    !isNil(amount) && sourceId ? { amount, sourceId } : null,
+                map(([amount, source]) =>
+                    !isNil(amount) && source
+                        ? {
+                              amount,
+                              sourceId: source.id,
+                              currencySymbolicCode: source.currency_symbolic_code,
+                          }
+                        : null,
                 ),
                 distinctUntilChanged(),
                 takeUntilDestroyed(this.destroyRef),
@@ -147,14 +150,21 @@ export class SourceCashFieldComponent
     }
 
     handleIncomingValue(value: SourceCash) {
-        const { sourceId, amount } = value || {};
-        if (!sourceId) {
+        const { sourceId, currencySymbolicCode, amount } = value || {};
+        if (!sourceId && !currencySymbolicCode) {
             this.setValues(amount, null);
             return;
         }
         this.options$
             .pipe(
-                map((options) => options.find((o) => o.value.id === value.sourceId)?.value ?? null),
+                map(
+                    (options) =>
+                        options.find((o) =>
+                            sourceId
+                                ? o.value.id === sourceId
+                                : o.value.currency_symbolic_code === currencySymbolicCode,
+                        )?.value ?? null,
+                ),
                 switchMap((s) =>
                     combineLatest([of(s), this.getCurrencyExponent(s?.currency_symbolic_code)]),
                 ),