IMP-231: Add shops tariffs page (only dev) (#359)

package.json

@@ -34,7 +34,7 @@
     "@vality/fistful-proto": "2.0.1-6600be9.0",
     "@vality/machinegun-proto": "1.0.0",
     "@vality/magista-proto": "2.0.2-28d11b9.0",
-    "@vality/ng-core": "17.2.1-pr-61-d842667.0",
+    "@vality/ng-core": "17.2.1-pr-62-e7ae3c9.0",
     "@vality/ng-thrift": "17.0.1-pr-5-2ce0f11.0",
     "@vality/payout-manager-proto": "2.0.1-eb4091a.0",
     "@vality/repairer-proto": "2.0.2-07b73e9.0",

src/app/api/dominator/dominator.service.ts

@@ -24,7 +24,7 @@ export class DominatorService {
             map(toWachterHeaders('Dominator')),
         );
         const metadata$ = from(
-            import('@vality/fistful-proto/metadata.json').then(
+            import('@vality/dominator-proto/metadata.json').then(
                 (m) => m.default as ThriftAstMetadata[],
             ),
         );

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, isDevMode } from '@angular/core';
 import { Link } from '@vality/ng-core';
 import { KeycloakService } from 'keycloak-angular';
 import sortBy from 'lodash-es/sortBy';
@@ -18,6 +18,7 @@ import { ROUTING_CONFIG as REPAIRING_ROUTING_CONFIG } from './sections/repairing
 import { ROUTING_CONFIG as PARTIES_ROUTING_CONFIG } from './sections/search-parties/routing-config';
 import { SHOPS_ROUTING_CONFIG } from './sections/shops';
 import { ROUTING_CONFIG as SOURCES_ROUTING_CONFIG } from './sections/sources/routing-config';
+import { ROUTING_CONFIG as TARIFFS_ROUTING_CONFIG } from './sections/tariffs/routing-config';
 import { ROUTING_CONFIG as TERMINALS_ROUTING_CONFIG } from './sections/terminals';
 import { ROUTING_CONFIG as WALLETS_ROUTING_CONFIG } from './sections/wallets/routing-config';
 import { ROUTING_CONFIG as WITHDRAWALS_ROUTING_CONFIG } from './sections/withdrawals/routing-config';
@@ -80,6 +81,15 @@ export class AppComponent {
                     url: '/sources',
                     services: SOURCES_ROUTING_CONFIG.services,
                 },
+                ...(isDevMode()
+                    ? [
+                          {
+                              label: 'Tariffs',
+                              url: '/tariffs',
+                              services: TARIFFS_ROUTING_CONFIG.services,
+                          },
+                      ]
+                    : []),
             ],
             [
                 {
@@ -103,41 +113,40 @@ export class AppComponent {
                     services: CLAIMS_ROUTING_CONFIG.services,
                 },
             ],
-            sortBy(
-                [
-                    {
-                        label: 'Payments',
-                        url: '/payments',
-                        services: PAYMENTS_ROUTING_CONFIG.services,
-                    },
-                    {
-                        label: 'Payouts',
-                        url: '/payouts',
-                        services: PAYOUTS_ROUTING_CONFIG.services,
-                    },
-                    {
-                        label: 'Chargebacks',
-                        url: '/chargebacks',
-                        services: WALLETS_ROUTING_CONFIG.services,
-                    },
-                    {
-                        label: 'Deposits',
-                        url: '/deposits',
-                        services: DEPOSITS_ROUTING_CONFIG.services,
-                    },
-                    {
-                        label: 'Withdrawals',
-                        url: '/withdrawals',
-                        services: WITHDRAWALS_ROUTING_CONFIG.services,
-                    },
-                ],
-                'label',
-            ),
+            [
+                {
+                    label: 'Payments',
+                    url: '/payments',
+                    services: PAYMENTS_ROUTING_CONFIG.services,
+                },
+                {
+                    label: 'Payouts',
+                    url: '/payouts',
+                    services: PAYOUTS_ROUTING_CONFIG.services,
+                },
+                {
+                    label: 'Chargebacks',
+                    url: '/chargebacks',
+                    services: WALLETS_ROUTING_CONFIG.services,
+                },
+                {
+                    label: 'Deposits',
+                    url: '/deposits',
+                    services: DEPOSITS_ROUTING_CONFIG.services,
+                },
+                {
+                    label: 'Withdrawals',
+                    url: '/withdrawals',
+                    services: WITHDRAWALS_ROUTING_CONFIG.services,
+                },
+            ],
         ];
-        return menuItems.map((group) =>
-            group.filter((item) =>
-                this.appAuthGuardService.userHasSomeServiceMethods(item.services),
-            ),
-        );
+        return menuItems
+            .map((group) =>
+                group.filter((item) =>
+                    this.appAuthGuardService.userHasSomeServiceMethods(item.services),
+                ),
+            )
+            .map((group) => sortBy(group, 'label'));
     }
 }

src/app/sections/sections-routing.module.ts

@@ -64,6 +64,10 @@ const ROUTES: Routes = [
         path: 'shops',
         loadChildren: () => import('./shops').then((m) => m.ShopsModule),
     },
+    {
+        path: 'tariffs',
+        loadChildren: () => import('./tariffs').then((m) => m.TariffsModule),
+    },
     {
         path: '404',
         loadChildren: () => import('./not-found').then((m) => m.NotFoundModule),

src/app/sections/tariffs/components/shops-tariffs/shops-tariffs.component.html

@@ -0,0 +1,27 @@
+<cc-page-layout title="Shops tariffs">
+    <cc-page-layout-actions>
+        <v-more-filters-button [filters]="filters"></v-more-filters-button>
+    </cc-page-layout-actions>
+    <v-filters #filters [active]="active$ | async" (clear)="filtersForm.reset()">
+        <ng-template [formGroup]="filtersForm">
+            <cc-merchant-field formControlName="party_id"></cc-merchant-field>
+            <cc-shop-field
+                [partyId]="filtersForm.value.party_id"
+                formControlName="shop_ids"
+                multiple
+            ></cc-shop-field>
+            <v-list-field formControlName="currencies" label="Currencies"></v-list-field>
+            <v-list-field formControlName="term_sets_names" label="Term sets names"></v-list-field>
+            <v-list-field formControlName="term_sets_ids" label="Term sets IDs"></v-list-field>
+        </ng-template>
+    </v-filters>
+
+    <v-table
+        [columns]="columns"
+        [data]="tariffs$ | async"
+        [hasMore]="hasMore$ | async"
+        [progress]="isLoading$ | async"
+        (more)="more()"
+        (update)="update($event)"
+    ></v-table>
+</cc-page-layout>

src/app/sections/tariffs/components/shops-tariffs/shops-tariffs.component.ts

@@ -0,0 +1,143 @@
+import { CommonModule } from '@angular/common';
+import { Component, DestroyRef, Inject, OnInit } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NonNullableFormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { TermSetHierarchyRef } from '@vality/domain-proto/internal/domain';
+import {
+    CommonSearchQueryParams,
+    ShopSearchQuery,
+    ShopTermSet,
+} from '@vality/dominator-proto/internal/dominator';
+import {
+    clean,
+    Column,
+    countChanged,
+    createControls,
+    debounceTimeWithFirst,
+    FiltersModule,
+    getValueChanges,
+    InputFieldModule,
+    ListFieldModule,
+    LoadOptions,
+    QueryParamsService,
+    TableModule,
+    UpdateOptions,
+} from '@vality/ng-core';
+import { map, shareReplay } from 'rxjs/operators';
+import { Overwrite } from 'utility-types';
+
+import {
+    createContractColumn,
+    createPartyColumn,
+    createShopColumn,
+    PageLayoutModule,
+    ShopFieldModule,
+} from '@cc/app/shared';
+import { CurrencyFieldComponent } from '@cc/app/shared/components/currency-field';
+import { MerchantFieldModule } from '@cc/app/shared/components/merchant-field';
+import { DEBOUNCE_TIME_MS } from '@cc/app/tokens';
+
+import { ShopsTariffsService } from './shops-tariffs.service';
+
+type Params = Pick<CommonSearchQueryParams, 'currencies'> &
+    Overwrite<
+        Omit<ShopSearchQuery, 'common_search_query_params'>,
+        { term_sets_ids?: TermSetHierarchyRef['id'][] }
+    >;
+
+@Component({
+    selector: 'cc-shops-tariffs',
+    standalone: true,
+    imports: [
+        CommonModule,
+        PageLayoutModule,
+        TableModule,
+        InputFieldModule,
+        FiltersModule,
+        ReactiveFormsModule,
+        MerchantFieldModule,
+        ShopFieldModule,
+        ListFieldModule,
+        CurrencyFieldComponent,
+    ],
+    templateUrl: './shops-tariffs.component.html',
+})
+export class ShopsTariffsComponent implements OnInit {
+    filtersForm = this.fb.group(
+        createControls<Params>({
+            currencies: null,
+            party_id: null,
+            shop_ids: null,
+            term_sets_names: null,
+            term_sets_ids: null,
+        }),
+    );
+    tariffs$ = this.shopsTariffsService.result$;
+    hasMore$ = this.shopsTariffsService.hasMore$;
+    isLoading$ = this.shopsTariffsService.isLoading$;
+    columns: Column<ShopTermSet>[] = [
+        createShopColumn<ShopTermSet>('shop_id', (d) => d.owner_id),
+        createPartyColumn<ShopTermSet>('owner_id'),
+        createContractColumn<ShopTermSet>(
+            (d) => d.contract_id,
+            (d) => d.owner_id,
+            (d) => d.shop_id,
+        ),
+        { field: 'currency' },
+        {
+            field: 'current_term_set',
+            formatter: (d) => d.current_term_set?.data?.name,
+            description: (d) => d.current_term_set?.data?.description,
+            tooltip: (d) => d.current_term_set,
+        },
+        {
+            field: 'term_set_history',
+            formatter: (d) => d.term_set_history?.length,
+            tooltip: (d) => d.term_set_history,
+        },
+    ];
+    active$ = getValueChanges(this.filtersForm).pipe(
+        map((filters) => countChanged(this.initFiltersValue, filters)),
+        shareReplay({ refCount: true, bufferSize: 1 }),
+    );
+
+    private initFiltersValue = this.filtersForm.value;
+
+    constructor(
+        private shopsTariffsService: ShopsTariffsService,
+        private fb: NonNullableFormBuilder,
+        private qp: QueryParamsService<Params>,
+        @Inject(DEBOUNCE_TIME_MS) private debounceTimeMs: number,
+        private dr: DestroyRef,
+    ) {}
+
+    ngOnInit() {
+        this.filtersForm.patchValue(this.qp.params);
+        getValueChanges(this.filtersForm)
+            .pipe(debounceTimeWithFirst(this.debounceTimeMs), takeUntilDestroyed(this.dr))
+            .subscribe((filters) => {
+                void this.qp.set(filters);
+                this.load(filters);
+            });
+    }
+
+    load(params: Params, options?: LoadOptions) {
+        const { currencies, term_sets_ids, ...otherParams } = params;
+        this.shopsTariffsService.load(
+            clean({
+                common_search_query_params: { currencies },
+                term_sets_ids: term_sets_ids?.map((id) => ({ id })),
+                ...otherParams,
+            }),
+            options,
+        );
+    }
+
+    update(options?: UpdateOptions) {
+        this.shopsTariffsService.reload(options);
+    }
+
+    more() {
+        this.shopsTariffsService.more();
+    }
+}

src/app/sections/tariffs/components/shops-tariffs/shops-tariffs.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { ShopSearchQuery, ShopTermSet } from '@vality/dominator-proto/internal/dominator';
+import {
+    FetchOptions,
+    FetchSuperclass,
+    handleError,
+    NotifyLogService,
+    clean,
+} from '@vality/ng-core';
+import { map } from 'rxjs/operators';
+
+import { DominatorService } from '@cc/app/api/dominator';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class ShopsTariffsService extends FetchSuperclass<ShopTermSet, ShopSearchQuery> {
+    constructor(
+        private dominatorService: DominatorService,
+        private log: NotifyLogService,
+    ) {
+        super();
+    }
+
+    protected fetch(params: ShopSearchQuery, options: FetchOptions<string>) {
+        return this.dominatorService
+            .SearchShopTermSets({
+                ...params,
+                common_search_query_params: clean({
+                    continuation_token: options.continuationToken,
+                    limit: options.size,
+                    currencies: params?.common_search_query_params?.currencies,
+                }),
+            })
+            .pipe(
+                map(({ terms, continuation_token }) => ({
+                    result: terms,
+                    continuationToken: continuation_token,
+                })),
+                handleError(this.log.error),
+            );
+    }
+}

src/app/sections/tariffs/index.ts

@@ -0,0 +1 @@
+export * from './tariffs.module';

src/app/sections/tariffs/routing-config.ts

@@ -0,0 +1,5 @@
+import { Services, RoutingConfig } from '@cc/app/shared/services';
+
+export const ROUTING_CONFIG: RoutingConfig = {
+    services: [Services.Dominator],
+};