TD-373: Load invoices and refunds in payments (#83)

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/payment-details.component.ts

@@ -1,11 +1,9 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { Invoice, PaymentSearchResult } from '@vality/swag-anapi-v2';
 import isEmpty from 'lodash-es/isEmpty';
-import isNil from 'lodash-es/isNil';
-import isObject from 'lodash-es/isObject';
 import { Observable } from 'rxjs';
 
-import { ComponentChange, ComponentChanges } from '@dsh/type-utils';
+import { ComponentChanges } from '@dsh/type-utils';
 
 import { PaymentIds } from '../../types';
 import { InvoiceDetailsService } from './services/invoice-details/invoice-details.service';
@@ -15,10 +13,11 @@ import { isPaymentFlowHold } from './types/is-payment-flow-hold';
     selector: 'dsh-payment-details',
     templateUrl: 'payment-details.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [InvoiceDetailsService],
 })
 export class PaymentDetailsComponent implements OnChanges {
     @Input() payment: PaymentSearchResult;
-    @Output() refreshPayment: EventEmitter<PaymentIds> = new EventEmitter();
+    @Output() refreshPayment = new EventEmitter<PaymentIds>();
 
     get isHoldShown(): boolean {
         if (isPaymentFlowHold(this.payment.flow)) {
@@ -31,9 +30,9 @@ export class PaymentDetailsComponent implements OnChanges {
 
     constructor(private invoiceDetails: InvoiceDetailsService) {}
 
-    ngOnChanges(changes: ComponentChanges<PaymentDetailsComponent>): void {
+    ngOnChanges({ payment }: ComponentChanges<PaymentDetailsComponent>): void {
-        if (isObject(changes.payment)) {
+        if (payment && payment.currentValue) {
-            this.changeInvoiceID(changes.payment);
+            this.changeInvoiceID(payment.currentValue);
         }
     }
 
@@ -41,10 +40,7 @@ export class PaymentDetailsComponent implements OnChanges {
         this.refreshPayment.emit(ids);
     }
 
-    private changeInvoiceID({ currentValue: payment }: ComponentChange<PaymentDetailsComponent, 'payment'>): void {
+    private changeInvoiceID(payment: PaymentSearchResult): void {
-        if (isNil(payment)) {
-            return;
-        }
         this.invoiceDetails.setInvoiceID(payment.invoiceID);
     }
 }

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/payment-invoice-info/payment-invoice-info.component.html

@@ -1,21 +1,23 @@
 <ng-container *transloco="let t; scope: 'payment-section'; read: 'paymentSection.paymentDetails.invoiceDetails'">
-    <div *ngIf="invoice; else loading" fxLayout="column" fxLayoutGap="24px">
+    <div fxLayout="column" fxLayoutGap="24px">
         <div class="payment-invoice-info-title mat-title" fxLayout fxLayoutAlign="space-between center">
             <div>
                 {{ t('title') }}
-                <span dshSecondaryTitle>#{{ invoice.id }}</span>
+                <span *ngIf="invoice">#{{ invoice.id }}</span>
             </div>
         </div>
-        <dsh-invoice-details [invoice]="invoice"></dsh-invoice-details>
+        <ng-container *ngIf="!invoice; else details">
+            <div *ngIf="!isLoading; else loading" class="dsh-body-1">
+                {{ t('notFound') }}
             </div>
             <ng-template #loading>
-        <div class="payment-invoice-info-title mat-title" fxLayout fxLayoutAlign="space-between center">
-            <div>
-                {{ t('title') }}
-            </div>
-        </div>
                 <div *transloco="let c; scope: 'components'; read: 'components.shared'">
                     <div class="dsh-body-1">{{ c('loading') }}</div>
                 </div>
             </ng-template>
         </ng-container>
+        <ng-template #details>
+            <dsh-invoice-details [invoice]="invoice"></dsh-invoice-details>
+        </ng-template>
+    </div>
+</ng-container>

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/payment-invoice-info/payment-invoice-info.component.ts

@@ -10,4 +10,8 @@ import { Invoice } from '@vality/swag-payments';
 // TODO: implement dump component for this + shared one for operations
 export class PaymentInvoiceInfoComponent {
     @Input() invoice: Invoice;
+
+    get isLoading() {
+        return this.invoice === undefined;
+    }
 }

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/payments-details.module.ts

@@ -11,7 +11,6 @@ import { PaymentDetailsComponent } from './payment-details.component';
 import { PaymentInvoiceInfoModule } from './payment-invoice-info';
 import { PaymentMainInfoModule } from './payment-main-info';
 import { RefundsModule } from './refunds';
-import { InvoiceDetailsService } from './services/invoice-details/invoice-details.service';
 
 @NgModule({
     imports: [
@@ -27,6 +26,5 @@ import { InvoiceDetailsService } from './services/invoice-details/invoice-detail
     ],
     declarations: [PaymentDetailsComponent],
     exports: [PaymentDetailsComponent],
-    providers: [InvoiceDetailsService],
 })
 export class PaymentsDetailsModule {}

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/refunds-list/refunds-list.component.html

@@ -7,7 +7,7 @@
         <div fxLayout fxLayoutGap="16px" fxLayoutAlign="space-between">
             <div>
                 {{ t('header') }}
-                <span dshSecondaryTitle>#{{ item.id }}</span>
+                <span>#{{ item.id }}</span>
             </div>
         </div>
         <dsh-refund-details [refund]="item"></dsh-refund-details>

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/refunds/services/fetch-refunds/fetch-refunds.service.ts

@@ -1,13 +1,15 @@
 import { Inject, Injectable } from '@angular/core';
 import { SearchRefundsRequestParams, RefundSearchResult } from '@vality/swag-anapi-v2';
 import moment from 'moment';
-import { Observable } from 'rxjs';
+import { Observable, switchMap } from 'rxjs';
-import { shareReplay } from 'rxjs/operators';
+import { shareReplay, first } from 'rxjs/operators';
 
 import { SearchService } from '@dsh/api/anapi';
 import { SEARCH_LIMIT } from '@dsh/app/sections/tokens';
 import { DEBOUNCE_FETCHER_ACTION_TIME, PartialFetcher } from '@dsh/app/shared';
 
+import { PaymentInstitutionRealmService } from '../../../../../../../services';
+
 @Injectable()
 export class FetchRefundsService extends PartialFetcher<
     RefundSearchResult,
@@ -20,7 +22,8 @@ export class FetchRefundsService extends PartialFetcher<
         @Inject(SEARCH_LIMIT)
         private searchLimit: number,
         @Inject(DEBOUNCE_FETCHER_ACTION_TIME)
-        debounceActionTime: number
+        debounceActionTime: number,
+        private paymentInstitutionRealmService: PaymentInstitutionRealmService
     ) {
         super(debounceActionTime);
     }
@@ -29,13 +32,19 @@ export class FetchRefundsService extends PartialFetcher<
         { invoiceID, paymentID }: Pick<SearchRefundsRequestParams, 'invoiceID' | 'paymentID'>,
         continuationToken: string
     ) {
-        return this.searchService.searchRefunds({
+        return this.paymentInstitutionRealmService.realm$.pipe(
+            first(),
+            switchMap((paymentInstitutionRealm) =>
+                this.searchService.searchRefunds({
                     fromTime: moment().subtract(3, 'y').startOf('d').utc().format(),
                     toTime: moment().endOf('d').utc().format(),
                     invoiceID,
                     paymentID,
                     limit: this.searchLimit,
                     continuationToken,
-        });
+                    paymentInstitutionRealm,
+                })
+            )
+        );
     }
 }

src/app/sections/payment-section/operations/payments/payments-panels/payments-details/services/invoice-details/invoice-details.service.ts

@@ -3,11 +3,13 @@ import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { Invoice } from '@vality/swag-anapi-v2';
 import moment from 'moment';
 import { Observable, ReplaySubject } from 'rxjs';
-import { distinctUntilChanged, switchMap, tap, pluck } from 'rxjs/operators';
+import { distinctUntilChanged, switchMap, tap, map, withLatestFrom } from 'rxjs/operators';
 
 import { SearchService } from '@dsh/api/anapi';
 import { ErrorService } from '@dsh/app/shared/services';
 
+import { PaymentInstitutionRealmService } from '../../../../../../services';
+
 @UntilDestroy()
 @Injectable()
 export class InvoiceDetailsService {
@@ -18,7 +20,11 @@ export class InvoiceDetailsService {
     private invoiceData$ = new ReplaySubject<Invoice | null>(1);
     private innerErrors$ = new ReplaySubject<Error>(1);
 
-    constructor(private searchService: SearchService, private errorService: ErrorService) {
+    constructor(
+        private searchService: SearchService,
+        private errorService: ErrorService,
+        private paymentInstitutionRealmService: PaymentInstitutionRealmService
+    ) {
         this.invoice$ = this.invoiceData$.asObservable();
         this.error$ = this.innerErrors$.asObservable();
 
@@ -36,15 +42,17 @@ export class InvoiceDetailsService {
                 tap(() => {
                     this.resetInvoiceData();
                 }),
-                switchMap((invoiceID: string) => {
+                withLatestFrom(this.paymentInstitutionRealmService.realm$),
+                switchMap(([invoiceID, paymentInstitutionRealm]) => {
                     return this.searchService.searchInvoices({
                         invoiceID,
                         fromTime: moment().subtract(3, 'y').startOf('d').utc().format(),
                         toTime: moment().endOf('d').utc().format(),
                         limit: 1,
+                        paymentInstitutionRealm,
                     });
                 }),
-                pluck('result', 0),
+                map(({ result }) => result?.[0] ?? null),
                 untilDestroyed(this)
             )
             .subscribe({

src/app/sections/payment-section/operations/payments/payments.component.ts

@@ -5,7 +5,8 @@ import { Observable } from 'rxjs';
 
 import { QueryParamsService } from '@dsh/app/shared/services';
 
-import { PaymentInstitutionRealmService, RealmMixService } from '../../services';
+import { RealmMixService } from '../../services';
+import { PaymentInstitutionRealmService } from '../../services/payment-institution-realm.service';
 import { Filters } from './payments-filters';
 import { PaymentsExpandedIdManager, FetchPaymentsService } from './services';
 import { PaymentSearchFormValue } from './types';
@@ -14,7 +15,7 @@ import { PaymentSearchFormValue } from './types';
 @Component({
     selector: 'dsh-payments',
     templateUrl: 'payments.component.html',
-    providers: [FetchPaymentsService, PaymentsExpandedIdManager, RealmMixService],
+    providers: [FetchPaymentsService, PaymentsExpandedIdManager, RealmMixService, PaymentInstitutionRealmService],
 })
 export class PaymentsComponent implements OnInit {
     realm$ = this.paymentInstitutionRealmService.realm$;

src/app/sections/payment-section/operations/refunds/refunds-list/refund-details/components/refund-invoice-info/refund-invoice-info.component.html

@@ -5,7 +5,7 @@
 >
     <div fxLayout fxLayoutGap="16px" fxLayoutAlign="space-between">
         <div class="mat-title">
-            {{ t('title') }} <span dshSecondaryTitle>#{{ (invoice$ | async)?.id }}</span>
+            {{ t('title') }} <span>#{{ (invoice$ | async)?.id }}</span>
         </div>
     </div>
     <ng-container *ngIf="isLoading$ | async; else afterLoading">

src/app/sections/payment-section/services/payment-institution-realm.service.ts

@@ -4,12 +4,15 @@ import { PaymentInstitution } from '@vality/swag-payments';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+import { shareReplayRefCount } from '@dsh/operators';
+
 import RealmEnum = PaymentInstitution.RealmEnum;
 
 @Injectable()
 export class PaymentInstitutionRealmService {
     realm$: Observable<RealmEnum | undefined> = this.route.params.pipe(
-        map(() => this.route.snapshot.params.realm as RealmEnum)
+        map(({ realm }) => realm as RealmEnum),
+        shareReplayRefCount()
     );
 
     constructor(private route: ActivatedRoute) {}

src/assets/i18n/payment-section/ru.json

@@ -212,6 +212,7 @@
             "title": "Платеж совершен с удержанием денежных средств"
         },
         "invoiceDetails": {
+            "notFound": "Инвойс не найден",
             "title": "Инвойс"
         },
         "payerDetails": {