MI-8,TD-678: Hide payouts, claims; hide calc amount: deposits, withdrawals (#136)

2024-11-06 02:25:23 +00:00 · 2023-07-27 12:18:23 +04:00 · 2023-07-27 12:18:23 +04:00 · e047b1f0c2
commit e047b1f0c2
parent c057293387
23 changed files with 146 additions and 97 deletions
--- a/src/app/api/wallet/downloads.service.ts
+++ b/src/app/api/wallet/downloads.service.ts
@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { DownloadsService as ApiService } from '@vality/swag-wallet';
+
+import { createApi } from '../utils';
+import { PartyIdExtension } from '../utils/extensions';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class DownloadsService extends createApi(ApiService, [PartyIdExtension]) {}
--- a/src/app/api/wallet/index.ts
+++ b/src/app/api/wallet/index.ts
@ -6,3 +6,4 @@ export * from './identities.service';
 export * from './deposits.service';
 export * from './wallet-dictionary.service';
 export * from './reports.service';
+export * from './downloads.service';
--- a/src/app/sections/payment-section/payment-section-routing.module.ts
+++ b/src/app/sections/payment-section/payment-section-routing.module.ts
@ -41,13 +41,13 @@ const PAYMENT_SECTION_ROUTES: Routes = [
                },
                [RoleAccessName.Reports]
            ),
-            createPrivateRoute(
-                {
-                    path: 'payouts',
-                    loadChildren: () => import('./payouts/payouts.module').then((m) => m.PayoutsModule),
-                },
-                [RoleAccessName.ViewPayouts]
-            ),
+            // createPrivateRoute(
+            //     {
+            //         path: 'payouts',
+            //         loadChildren: () => import('./payouts/payouts.module').then((m) => m.PayoutsModule),
+            //     },
+            //     [RoleAccessName.ViewPayouts]
+            // ),
            {
                path: 'integrations',
                loadChildren: () => import('./integrations/integrations.module').then((m) => m.IntegrationsModule),
--- a/src/app/sections/payment-section/utils/to-navbar-item-config.ts
+++ b/src/app/sections/payment-section/utils/to-navbar-item-config.ts
@ -22,7 +22,6 @@ export const toNavbarItemConfig = ({
    analytics,
    integrations,
    operations,
-    payouts,
    reports,
 }: Record<
    'shops' | 'analytics' | 'integrations' | 'operations' | 'payouts' | 'reports',
@ -46,12 +45,12 @@ export const toNavbarItemConfig = ({
        label: operations,
        roles: [RoleAccessName.ViewPayments, RoleAccessName.ViewInvoices, RoleAccessName.ViewRefunds],
    },
-    {
-        routerLink: NavbarRouterLink.Payouts,
-        icon: BootstrapIconName.ArrowRightCircle,
-        label: payouts,
-        roles: [RoleAccessName.ViewPayouts],
-    },
+    // {
+    //     routerLink: NavbarRouterLink.Payouts,
+    //     icon: BootstrapIconName.ArrowRightCircle,
+    //     label: payouts,
+    //     roles: [RoleAccessName.ViewPayouts],
+    // },
    {
        routerLink: NavbarRouterLink.Reports,
        icon: BootstrapIconName.FileText,
--- a/src/app/sections/sections-routing.module.ts
+++ b/src/app/sections/sections-routing.module.ts
@ -2,10 +2,10 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';

 const ROUTES: Routes = [
-    {
-        path: 'claim-section',
-        loadChildren: () => import('./claim-section').then((m) => m.ClaimSectionModule),
-    },
+    // {
+    //     path: 'claim-section',
+    //     loadChildren: () => import('./claim-section').then((m) => m.ClaimSectionModule),
+    // },
    {
        path: 'payment-section',
        loadChildren: () => import('./payment-section').then((m) => m.PaymentSectionModule),
--- a/src/app/sections/wallet-section/deposits/deposit-panels/deposit-details/deposit-details.component.html
+++ b/src/app/sections/wallet-section/deposits/deposit-panels/deposit-details/deposit-details.component.html
@ -1,37 +1,28 @@
-<div
-    fxLayout="column"
-    fxLayoutGap="24px"
-    *transloco="let t; scope: 'wallet-section'; read: 'walletSection.depositDetails'"
->
-    <div fxLayout="row" fxLayoutAlign="start center">
-        <div fxFlex="33" class="dsh-headline">
+<ng-container *transloco="let t; scope: 'wallet-section'; read: 'walletSection.depositDetails'">
+    <div
+        gdColumns="1fr"
+        gdColumns.gt-sm="1fr 1fr"
+        gdColumns.gt-md="1fr 1fr 1fr 1fr"
+        gdGap="24px"
+        gdAlignColumns="start center"
+    >
+        <div class="dsh-headline">
            {{ deposit.body.amount | amountCurrency : deposit.body.currency }}
        </div>
-        <dsh-details-item fxFlex="33" [title]="t('amount')">
-            {{ deposit.body.amount | amountCurrency : deposit.body.currency }}
-        </dsh-details-item>
-        <dsh-details-item fxFlex="33" [title]="t('fee')">
+        <dsh-details-item [title]="t('fee')">
            {{ deposit.fee.amount | amountCurrency : deposit.fee.currency }}
        </dsh-details-item>
-    </div>
-    <div fxLayout="row">
-        <dsh-details-item fxFlex="33" [title]="t('status')">
+        <dsh-details-item [title]="t('status')">
            <dsh-status [color]="deposit.status | depositStatusColor">{{
                (depositStatusDict$ | async)?.[deposit.status]
            }}</dsh-status>
        </dsh-details-item>
-        <dsh-details-item fxFlex="33" [title]="t('wallet')">
+        <dsh-details-item [title]="t('wallet')">
            {{ deposit.wallet | walletDetails }}
        </dsh-details-item>
-    </div>
-    <div *ngIf="deposit.failure" fxLayout="row">
-        <dsh-details-item
-            fxFlex="33"
-            [title]="t('error')"
-            *transloco="let errors; scope: 'wallet-section'; read: 'walletSection.depositDetails.errors'"
-        >
-            <!-- t(failed) -->
-            {{ errors(deposit.failure.code) }}
+        <dsh-details-item *ngIf="deposit.failure" [title]="t('error')">
+            <!-- t(errors.failed) -->
+            {{ t('errors.' + deposit.failure.code) }}
        </dsh-details-item>
    </div>
-</div>
+</ng-container>
--- a/src/app/sections/wallet-section/deposits/deposit-panels/deposit-details/deposit-details.module.ts
+++ b/src/app/sections/wallet-section/deposits/deposit-panels/deposit-details/deposit-details.module.ts
@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
+import { FlexModule, GridModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';

 import { ApiModelRefsModule, ApiModelTypesModule, AmountCurrencyModule } from '@dsh/app/shared';
@ -20,6 +20,7 @@ import { DepositDetailsComponent } from './deposit-details.component';
        ApiModelTypesModule,

        AmountCurrencyModule,
+        GridModule,
    ],
    declarations: [DepositDetailsComponent],
    exports: [DepositDetailsComponent],
--- a/src/app/sections/wallet-section/integrations/webhooks/webhook-list/webhook-list.module.ts
+++ b/src/app/sections/wallet-section/integrations/webhooks/webhook-list/webhook-list.module.ts
@ -4,6 +4,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { TranslocoModule } from '@ngneat/transloco';

+import { IdentityNamePipe } from '@dsh/app/shared/pipes/identity-name.pipe';
 import { IndicatorsModule } from '@dsh/components/indicators';
 import { LayoutModule } from '@dsh/components/layout';

@ -23,6 +24,7 @@ import { WebhookDetailsModule } from '../webhook-details';
        IndicatorsModule,
        WebhookDetailsModule,
        DeleteWebhookModule,
+        IdentityNamePipe,
    ],
    declarations: [WebhookListComponent, WebhookRowHeaderComponent, WebhookRowComponent],
    exports: [WebhookListComponent],
--- a/src/app/sections/wallet-section/integrations/webhooks/webhook-list/webhook-row/webhook-row.component.html
+++ b/src/app/sections/wallet-section/integrations/webhooks/webhook-list/webhook-row/webhook-row.component.html
@ -2,5 +2,5 @@
    <dsh-row-label class="wrap-url" fxFlex="66" fxFlex.lt-md="100">
        {{ url }}
    </dsh-row-label>
-    <dsh-row-label fxFlex="34" fxHide.lt-md> {{ identityID }} {{ getIdentityName(identityID) | async }} </dsh-row-label>
+    <dsh-row-label fxFlex="34" fxHide.lt-md>{{ identityID | identityName }}</dsh-row-label>
 </dsh-row>
--- a/src/app/sections/wallet-section/integrations/webhooks/webhook-list/webhook-row/webhook-row.component.ts
+++ b/src/app/sections/wallet-section/integrations/webhooks/webhook-list/webhook-row/webhook-row.component.ts
@ -1,7 +1,4 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { map } from 'rxjs/operators';
-
-import { IdentitiesService } from '@dsh/app/api/wallet';

@Component({
    selector: 'dsh-webhook-row',
@ -10,15 +7,6 @@ import { IdentitiesService } from '@dsh/app/api/wallet';
    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WebhookRowComponent {
-    @Input()
-    url: string;
-
-    @Input()
-    identityID: string;
-
-    constructor(private identitiesService: IdentitiesService) {}
-
-    getIdentityName(identityID: string) {
-        return this.identitiesService.identities$.pipe(map((i) => i.find(({ id }) => id === identityID)?.name));
-    }
+    @Input() url: string;
+    @Input() identityID: string;
 }
--- a/src/app/sections/wallet-section/wallets/wallets-list/components/wallet-details/wallet-details.component.html
+++ b/src/app/sections/wallet-section/wallets/wallets-list/components/wallet-details/wallet-details.component.html
@ -1,9 +1,5 @@
 <div fxLayout="column" fxLayoutGap="24px">
    <dsh-wallet-main-info [wallet]="wallet"></dsh-wallet-main-info>
-    <mat-divider></mat-divider>
-    <dsh-wallet-account-info [walletID]="wallet.id"></dsh-wallet-account-info>
-    <mat-divider></mat-divider>
-    <dsh-wallet-deposits [walletID]="wallet.id"></dsh-wallet-deposits>
-    <mat-divider></mat-divider>
-    <dsh-wallet-withdrawals [walletID]="wallet.id"></dsh-wallet-withdrawals>
+    <!--    <mat-divider></mat-divider>-->
+    <!--    <dsh-wallet-account-info [walletID]="wallet.id"></dsh-wallet-account-info>-->
 </div>
--- a/src/app/sections/wallet-section/wallets/wallets-list/wallet-main-info/wallets-main-info.component.html
+++ b/src/app/sections/wallet-section/wallets/wallets-list/wallet-main-info/wallets-main-info.component.html
@ -1,11 +1,24 @@
 <div
    *transloco="let t; scope: 'wallet-section'; read: 'walletSection.wallets.mainInfo'"
-    fxLayout="column"
-    fxLayout.gt-sm
-    fxLayoutGap="24px"
+    gdGap="24px"
+    gdColumns="1fr"
+    gdColumns.gt-sm="1fr 1fr 1fr"
+    gdAlignColumns="start center"
 >
-    <dsh-details-item fxFlex.gt-sm="66" [title]="t('name')">{{ wallet.name }}</dsh-details-item>
-    <dsh-details-item fxFlex.gt-sm [title]="t('createdAt')">{{
-        wallet.createdAt | date : 'dd.MM.yyyy, HH:mm'
-    }}</dsh-details-item>
+    <div gdColumn.md="1/4">
+        <div
+            class="dsh-headline"
+            *ngIf="walletAccount$ | async as account; else (isLoading$ | async) ? loading : error ? error : null"
+        >
+            {{ account.available.amount | amountCurrency : account.available.currency }}
+        </div>
+    </div>
+    <ng-template #loading>
+        <dsh-spinner size="30"></dsh-spinner>
+    </ng-template>
+    <ng-template #error>
+        <div class="dsh-body-1">{{ t('fetchWalletAccountError') }}</div>
+    </ng-template>
+    <dsh-details-item gdColumn.md="1/3" [title]="t('name')">{{ wallet.name }}</dsh-details-item>
+    <dsh-details-item [title]="t('createdAt')">{{ wallet.createdAt | date : 'dd.MM.yyyy, HH:mm' }}</dsh-details-item>
 </div>
--- a/src/app/sections/wallet-section/wallets/wallets-list/wallet-main-info/wallets-main-info.component.ts
+++ b/src/app/sections/wallet-section/wallets/wallets-list/wallet-main-info/wallets-main-info.component.ts
@ -1,11 +1,28 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges } from '@angular/core';
 import { Wallet } from '@vality/swag-wallet';

+import { ComponentChanges } from '@dsh/type-utils';
+
+import { FetchWalletAccountService } from '../wallet-account-info/services';
+
@Component({
    selector: 'dsh-wallet-main-info',
    templateUrl: 'wallets-main-info.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [FetchWalletAccountService],
 })
-export class WalletsMainInfoComponent {
+export class WalletsMainInfoComponent implements OnChanges {
    @Input() wallet: Wallet;
+
+    walletAccount$ = this.fetchWalletAccountService.walletAccount$;
+    isLoading$ = this.fetchWalletAccountService.isLoading$;
+    error$ = this.fetchWalletAccountService.error$;
+
+    constructor(private fetchWalletAccountService: FetchWalletAccountService) {}
+
+    ngOnChanges({ wallet }: ComponentChanges<WalletsMainInfoComponent>): void {
+        if (wallet?.firstChange && wallet.currentValue) {
+            this.fetchWalletAccountService.fetchWalletAccount(this.wallet.id);
+        }
+    }
 }
--- a/src/app/sections/wallet-section/wallets/wallets-list/wallet-main-info/wallets-main-info.module.ts
+++ b/src/app/sections/wallet-section/wallets/wallets-list/wallet-main-info/wallets-main-info.module.ts
@ -1,14 +1,24 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { FlexModule } from '@angular/flex-layout';
+import { FlexModule, GridModule } from '@angular/flex-layout';
 import { TranslocoModule } from '@ngneat/transloco';

+import { AmountCurrencyModule } from '@dsh/app/shared';
+import { SpinnerModule } from '@dsh/components/indicators';
 import { DetailsItemModule } from '@dsh/components/layout';

 import { WalletsMainInfoComponent } from './wallets-main-info.component';

@NgModule({
-    imports: [CommonModule, FlexModule, DetailsItemModule, TranslocoModule],
+    imports: [
+        CommonModule,
+        FlexModule,
+        DetailsItemModule,
+        TranslocoModule,
+        AmountCurrencyModule,
+        SpinnerModule,
+        GridModule,
+    ],
    declarations: [WalletsMainInfoComponent],
    exports: [WalletsMainInfoComponent],
 })
--- a/src/app/sections/wallet-section/withdrawals/withdrawals-list/components/withdrawal-details/withdrawal-details.component.html
+++ b/src/app/sections/wallet-section/withdrawals/withdrawals-list/components/withdrawal-details/withdrawal-details.component.html
@ -1,15 +1,13 @@
 <div
    *transloco="let t; scope: 'wallet-section'; read: 'walletSection.withdrawals.details'"
    gdColumns="1fr"
-    gdColumns.gt-sm="1fr 1fr 1fr"
+    gdColumns.gt-md="1fr 1fr 1fr 1fr"
+    gdColumns.gt-sm="1fr 1fr"
    gdGap="24px"
 >
    <div class="dsh-headline">
        {{ withdrawal.body.amount | amountCurrency : withdrawal.body.currency }}
    </div>
-    <dsh-details-item [title]="t('amount')">
-        {{ withdrawal.body.amount + withdrawal.fee.amount | amountCurrency : withdrawal.body.currency }}
-    </dsh-details-item>
    <dsh-details-item [title]="t('fee')">
        {{ withdrawal.fee.amount | amountCurrency : withdrawal.fee.currency }} ({{
            withdrawal.fee.amount / withdrawal.body.amount | percent : '1.0-2' : 'en'
--- a/src/app/shared/components/api-model-details/deposit-revert-details/deposit-revert-details.component.html
+++ b/src/app/shared/components/api-model-details/deposit-revert-details/deposit-revert-details.component.html
@ -4,21 +4,21 @@
    *transloco="let t; scope: 'components'; read: 'components.depositRevertDetails'"
 >
    <div fxLayout="row" fxLayoutAlign="start center">
-        <dsh-details-item fxFlex="33" [title]="t('amount')">
+        <dsh-details-item fxFlex="25" [title]="t('amount')">
            {{ revert.body.amount | amountCurrency : revert.body.currency }}
        </dsh-details-item>
-        <dsh-details-item fxFlex="33" [title]="t('status')">
+        <dsh-details-item fxFlex="25" [title]="t('status')">
            <dsh-status [color]="revert.status | depositRevertStatusColor">{{
                (depositRevertStatusDict$ | async)?.[revert.status]
            }}</dsh-status>
        </dsh-details-item>
-        <dsh-details-item fxFlex="33" [title]="t('createdAt')">
+        <dsh-details-item fxFlex="25" [title]="t('createdAt')">
            {{ revert.createdAt | date : 'dd MMMM yyyy, HH:mm' }}
        </dsh-details-item>
    </div>
    <div *ngIf="revert.failure" fxLayout="row">
        <dsh-details-item
-            fxFlex="33"
+            fxFlex="25"
            [title]="t('error')"
            *transloco="let errors; scope: 'components'; read: 'components.depositRevertDetails.errors'"
        >
--- a/src/app/shared/pipes/identity-name.pipe.ts
+++ b/src/app/shared/pipes/identity-name.pipe.ts
@ -0,0 +1,25 @@
+import { AsyncPipe } from '@angular/common';
+import { Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
+import { Identity } from '@vality/swag-wallet';
+import { map } from 'rxjs/operators';
+
+import { IdentitiesService } from '@dsh/app/api/wallet';
+
+@Pipe({
+    name: 'identityName',
+    standalone: true,
+    pure: false,
+})
+export class IdentityNamePipe implements PipeTransform {
+    async = new AsyncPipe(this.cdr);
+
+    constructor(private cdr: ChangeDetectorRef, private identitiesService: IdentitiesService) {}
+
+    transform(id: Identity['id']): Identity['name'] {
+        return this.async.transform(
+            this.identitiesService.identities$.pipe(
+                map((identities) => identities.find((identity) => identity.id === id)?.name || id)
+            )
+        );
+    }
+}
--- a/src/app/shared/services/sections-links/section-links.service.ts
+++ b/src/app/shared/services/sections-links/section-links.service.ts
@ -13,10 +13,10 @@ export class SectionsLinksService {
    sectionLinks$: Observable<SectionLink[]> = combineLatest([
        this.walletsService.hasWallets$,
        this.roleAccessService.isAccessAllowed([RoleAccessName.Wallets]),
-        this.roleAccessService.isAccessAllowed([RoleAccessName.Claims]),
+        // this.roleAccessService.isAccessAllowed([RoleAccessName.Claims]),
        this.transloco.selectTranslation('services'),
    ]).pipe(
-        map(([hasWallets, allowWallets, allowClaims]) =>
+        map(([hasWallets, allowWallets]) =>
            [
                {
                    label: this.transloco.translate('sectionsLinks.links.payments', null, 'services'),
@ -27,10 +27,10 @@ export class SectionsLinksService {
                        label: this.transloco.translate('sectionsLinks.links.wallets', null, 'services'),
                        path: '/wallet-section',
                    },
-                allowClaims && {
-                    label: this.transloco.translate('sectionsLinks.links.claims', null, 'services'),
-                    path: '/claim-section',
-                },
+                // allowClaims && {
+                //     label: this.transloco.translate('sectionsLinks.links.claims', null, 'services'),
+                //     path: '/claim-section',
+                // },
            ].filter(Boolean)
        ),
        first()
--- a/src/assets/i18n/services/en.json
+++ b/src/assets/i18n/services/en.json
@ -10,7 +10,6 @@
    },
    "sectionsLinks": {
        "links": {
-            "claims": "Claims",
            "payments": "Payments",
            "wallets": "Wallets"
        }
--- a/src/assets/i18n/services/ru.json
+++ b/src/assets/i18n/services/ru.json
@ -10,7 +10,6 @@
    },
    "sectionsLinks": {
        "links": {
-            "claims": "Заявки",
            "payments": "Платежи",
            "wallets": "Кошельки"
        }
--- a/src/assets/i18n/wallet-section/en.json
+++ b/src/assets/i18n/wallet-section/en.json
@ -1,6 +1,5 @@
 {
    "depositDetails": {
-        "amount": "Amount",
        "error": "Error",
        "errors": {
            "failed": "Deposit operation failed"
@ -87,6 +86,7 @@
        },
        "mainInfo": {
            "createdAt": "Created at",
+            "fetchWalletAccountError": "Balance loading error",
            "name": "Name"
        },
        "wallet": "Wallet",
@ -158,7 +158,6 @@
    },
    "withdrawals": {
        "details": {
-            "amount": "Payout amount",
            "error": "Error",
            "errors": {
                "failed": "An error occurred when withdrawing funds"
--- a/src/assets/i18n/wallet-section/ru.json
+++ b/src/assets/i18n/wallet-section/ru.json
@ -1,6 +1,5 @@
 {
    "depositDetails": {
-        "amount": "Сумма зачисления",
        "error": "Ошибка",
        "errors": {
            "failed": "Ошибка при пополнении"
@ -87,6 +86,7 @@
        },
        "mainInfo": {
            "createdAt": "Дата и время создания",
+            "fetchWalletAccountError": "Ошибка загрузки баланса",
            "name": "Название"
        },
        "wallet": "Кошелек",
@ -158,7 +158,6 @@
    },
    "withdrawals": {
        "details": {
-            "amount": "Сумма списания",
            "error": "Ошибка",
            "errors": {
                "failed": "Произошла ошибка при выводе средств"
--- a/src/environments/index.ts
+++ b/src/environments/index.ts
@ -3,5 +3,7 @@ import { InjectionToken } from '@angular/core';
 import { environment } from '../environments/environment';

 export type Env = typeof environment;
-export const ENV = new InjectionToken<Env>('Env');
+
 export { environment };
+
+export const ENV = new InjectionToken<Env>('Env');