TD-869: New deposit details page. New create revert dialog (#334)

package.json

@@ -33,7 +33,7 @@
     "@vality/fistful-proto": "2.0.1-8ecf2b7.0",
     "@vality/machinegun-proto": "1.0.0",
     "@vality/magista-proto": "2.0.2-28d11b9.0",
-    "@vality/ng-core": "^17.2.1-pr-57-0134d85.0",
+    "@vality/ng-core": "^17.2.1-pr-57-3adeb57.0",
     "@vality/payout-manager-proto": "2.0.1-eb4091a.0",
     "@vality/repairer-proto": "2.0.2-07b73e9.0",
     "@vality/thrift-ts": "2.4.1-8ad5123.0",

src/app/sections/deposit-details/deposit-details.component.html

@@ -1,7 +1,14 @@
-<cc-page-layout title="Deposit details">
-    <cc-deposit-main-info
-        *ngIf="deposit$ | async as deposit"
-        [deposit]="deposit"
-    ></cc-deposit-main-info>
+<cc-page-layout [progress]="isLoading$ | async" title="Deposit details">
+    <mat-card *ngIf="deposit$ | async">
+        <mat-card-content>
+            <cc-thrift-viewer
+                [extensions]="extensions$ | async"
+                [metadata]="metadata$ | async"
+                [value]="deposit$ | async"
+                namespace="fistful_stat"
+                type="StatDeposit"
+            ></cc-thrift-viewer>
+        </mat-card-content>
+    </mat-card>
     <cc-reverts *ngIf="deposit$ | async as deposit" [deposit]="deposit"></cc-reverts>
 </cc-page-layout>

src/app/sections/deposit-details/deposit-details.component.ts

@@ -1,6 +1,22 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { formatDate } from '@angular/common';
+import { ChangeDetectionStrategy, Component, OnInit, Inject, LOCALE_ID } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { pluck, take } from 'rxjs/operators';
+import { DepositStatus, RevertStatus } from '@vality/fistful-proto/fistful_stat';
+import { Timestamp } from '@vality/fistful-proto/internal/base';
+import { formatCurrency, getImportValue } from '@vality/ng-core';
+import startCase from 'lodash-es/startCase';
+import { of, Observable } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+
+import { getUnionKey, getUnionValue } from '../../../utils';
+import { ManagementService } from '../../api/wallet';
+import {
+    MetadataViewExtension,
+    MetadataViewExtensionResult,
+} from '../../shared/components/json-viewer';
+import { isTypeWithAliases } from '../../shared/components/metadata-form';
+import { AmountCurrencyService } from '../../shared/services';
+import { FetchSourcesService } from '../sources';
 
 import { ReceiveDepositService } from './services/receive-deposit/receive-deposit.service';
 
@@ -11,15 +27,114 @@ import { ReceiveDepositService } from './services/receive-deposit/receive-deposi
 })
 export class DepositDetailsComponent implements OnInit {
     deposit$ = this.fetchDepositService.deposit$;
+    isLoading$ = this.fetchDepositService.isLoading$;
+    metadata$ = getImportValue(import('@vality/fistful-proto/metadata.json'));
+    extensions$: Observable<MetadataViewExtension[]> = this.fetchDepositService.deposit$.pipe(
+        map((deposit) => [
+            {
+                determinant: (d) => of(isTypeWithAliases(d, 'Timestamp', 'base')),
+                extension: (_, value: Timestamp) =>
+                    of({ value: formatDate(value, 'dd.MM.yyyy HH:mm:ss', 'en') }),
+            },
+            {
+                determinant: (d) =>
+                    of(isTypeWithAliases(d, 'CurrencySymbolicCode', 'fistful_stat')),
+                extension: () => of({ hidden: true }),
+            },
+            {
+                determinant: (d) => of(isTypeWithAliases(d, 'Amount', 'base')),
+                extension: (_, amount: number) =>
+                    this.amountCurrencyService.getCurrency(deposit.currency_symbolic_code).pipe(
+                        map((c) => ({
+                            value: formatCurrency(
+                                amount,
+                                c.data.symbolic_code,
+                                'long',
+                                this._locale,
+                                c.data.exponent,
+                            ),
+                        })),
+                    ),
+            },
+            {
+                determinant: (d) => of(isTypeWithAliases(d, 'DepositStatus', 'fistful_stat')),
+                extension: (_, status: DepositStatus) =>
+                    of({
+                        value: startCase(getUnionKey(status)),
+                        tooltip: Object.keys(getUnionValue(status)).length
+                            ? getUnionValue(status)
+                            : undefined,
+                        tag: true,
+                        color: (
+                            {
+                                failed: 'warn',
+                                pending: 'pending',
+                                succeeded: 'success',
+                            } as const
+                        )[getUnionKey(status)],
+                    }),
+            },
+            {
+                determinant: (d) => of(isTypeWithAliases(d, 'RevertStatus', 'fistful_stat')),
+                extension: (_, status: RevertStatus, viewValue: string) =>
+                    of({
+                        value: startCase(viewValue),
+                        tag: true,
+                        color: (
+                            {
+                                [1]: 'pending',
+                                [2]: 'success',
+                            } as const
+                        )[status],
+                    }),
+            },
+            {
+                determinant: (d) => of(isTypeWithAliases(d, 'WalletID', 'fistful_stat')),
+                extension: (_, id: string) =>
+                    this.walletManagementService.Get(id, {}).pipe(
+                        map(
+                            (wallet): MetadataViewExtensionResult => ({
+                                value: wallet.name,
+                                tooltip: wallet.id,
+                                link: [
+                                    ['/wallets'],
+                                    { queryParams: { wallet_id: JSON.stringify([wallet.id]) } },
+                                ],
+                            }),
+                        ),
+                    ),
+            },
+            {
+                determinant: (d) => of(isTypeWithAliases(d, 'SourceID', 'fistful_stat')),
+                extension: (_, id: string) =>
+                    this.fetchSourcesService.sources$.pipe(
+                        map((sources) => sources.find((s) => s.id === id)),
+                        map(
+                            (source): MetadataViewExtensionResult => ({
+                                value: source.name,
+                                tooltip: source.id,
+                            }),
+                        ),
+                    ),
+            },
+        ]),
+    );
 
     constructor(
         private fetchDepositService: ReceiveDepositService,
         private route: ActivatedRoute,
+        @Inject(LOCALE_ID) private _locale: string,
+        private amountCurrencyService: AmountCurrencyService,
+        private walletManagementService: ManagementService,
+        private fetchSourcesService: FetchSourcesService,
     ) {}
 
     ngOnInit() {
         this.route.params
-            .pipe(take(1), pluck('depositID'))
+            .pipe(
+                take(1),
+                map((p) => p.depositID),
+            )
             .subscribe((depositID) => this.fetchDepositService.receiveDeposit(depositID));
     }
 }

src/app/sections/deposit-details/deposit-details.module.ts

@@ -9,9 +9,10 @@ import { StatusModule, PageLayoutModule } from '@cc/app/shared/components';
 import { DetailsItemModule } from '@cc/components/details-item';
 import { HeadlineModule } from '@cc/components/headline';
 
+import { ThriftViewerModule } from '../../shared/components/thrift-viewer';
+
 import { DepositDetailsRoutingModule } from './deposit-details-routing.module';
 import { DepositDetailsComponent } from './deposit-details.component';
-import { DepositMainInfoModule } from './deposit-main-info/deposit-main-info.module';
 import { RevertsModule } from './reverts/reverts.module';
 
 @NgModule({
@@ -25,9 +26,9 @@ import { RevertsModule } from './reverts/reverts.module';
         MatProgressSpinnerModule,
         MatButtonModule,
         MatDialogModule,
-        DepositMainInfoModule,
         RevertsModule,
         PageLayoutModule,
+        ThriftViewerModule,
     ],
     declarations: [DepositDetailsComponent],
 })

src/app/sections/deposit-details/reverts/create-revert-dialog/create-revert-dialog.component.html

@@ -1,44 +1,15 @@
 <v-dialog [progress]="!!(progress$ | async)" title="Create revert">
-    <div *ngIf="form" [formGroup]="form" style="display: flex; flex-direction: column; gap: 16px">
-        <div style="display: flex; gap: 24px">
-            <mat-form-field style="flex: 1">
-                <input
-                    formControlName="amount"
-                    matInput
-                    placeholder="Amount"
-                    required
-                    type="number"
-                />
-            </mat-form-field>
-            <mat-form-field style="flex: 1">
-                <input
-                    formControlName="currency"
-                    matInput
-                    placeholder="Currency"
-                    readonly
-                    required
-                    type="text"
-                />
-            </mat-form-field>
-        </div>
-        <div style="display: flex; gap: 24px">
-            <mat-form-field style="flex: 1">
-                <input formControlName="reason" matInput placeholder="Reason" type="text" />
-            </mat-form-field>
-            <mat-form-field style="flex: 1">
-                <input
-                    formControlName="externalID"
-                    matInput
-                    placeholder="External ID"
-                    type="text"
-                />
-            </mat-form-field>
-        </div>
-    </div>
+    <cc-fistful-thrift-form
+        [extensions]="extensions"
+        [formControl]="control"
+        namespace="deposit_revert"
+        noChangeKind
+        type="RevertParams"
+    ></cc-fistful-thrift-form>
 
     <v-dialog-actions>
         <button
-            [disabled]="!!(progress$ | async) || form.invalid"
+            [disabled]="!!(progress$ | async) || control.invalid"
             color="primary"
             mat-button
             (click)="createRevert()"
@@ -47,3 +18,7 @@
         </button>
     </v-dialog-actions>
 </v-dialog>
+
+<ng-template #cashTemplate let-cashControl="control">
+    <cc-cash-field [formControl]="cashControl"></cc-cash-field>
+</ng-template>