IMP-161: Add withdrawals external id (#168)

package.json

@@ -8,7 +8,7 @@
     "fix": "npm run lint:fix && npm run format:fix && npm run spell:fix",
     "build": "ng build && transloco-optimize dist/assets/i18n",
     "test": "ng test",
-    "i18n:extract": "transloco-keys-manager extract && prettier src/assets/i18n/* --write",
+    "i18n:extract": "transloco-keys-manager extract && prettier src/assets/i18n/** --write",
     "i18n:clean": "transloco-keys-manager extract --remove-extra-keys && prettier src/assets/i18n/* --write",
     "i18n:check": "transloco-keys-manager find --emit-error-on-extra-keys",
     "coverage": "npx http-server -c-1 -o -p 9875 ./coverage",

src/app/app.component.html

@@ -1,8 +1,29 @@
-<dsh-home>
+<dsh-home *transloco="let t; scope: 'app'; read: 'app'">
     <dsh-sections *ngIf="bootstrapped$ | async; else spinner"></dsh-sections>
     <ng-template #spinner>
         <div fxFlexAlign="center" fxLayout="row">
             <dsh-spinner style="margin: auto"></dsh-spinner>
         </div>
     </ng-template>
+    <div *ngIf="isDev" style="display: flex; justify-content: center">
+        <div
+            [matMenuTriggerFor]="menu"
+            class="dsh-body-2"
+            style="cursor: pointer; display: flex; gap: 8px; align-items: center"
+        >
+            <dsh-bi icon="globe" size="sm"></dsh-bi>
+            <!-- t(language.en) -->
+            <!-- t(language.ru) -->
+            {{ t('language.' + languageService.active) }}
+        </div>
+        <mat-menu #menu="matMenu">
+            <button
+                *ngFor="let language of languageService.list"
+                mat-menu-item
+                (click)="languageService.set(language)"
+            >
+                {{ t('language.' + language) }}
+            </button>
+        </mat-menu>
+    </div>
 </dsh-home>

src/app/app.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, isDevMode } from '@angular/core';
 import * as sentry from '@sentry/angular-ivy';
 import { first } from 'rxjs/operators';
 
+import { LanguageService } from '@dsh/app/language';
+
 import { BootstrapService } from './bootstrap.service';
 import { ContextOrganizationService } from './shared';
 
@@ -12,10 +14,12 @@ import { ContextOrganizationService } from './shared';
 })
 export class AppComponent implements OnInit {
     bootstrapped$ = this.bootstrapService.bootstrapped$;
+    isDev = isDevMode();
 
     constructor(
         private bootstrapService: BootstrapService,
         private contextOrganizationService: ContextOrganizationService,
+        public languageService: LanguageService,
     ) {}
 
     ngOnInit(): void {

src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
 import { APP_INITIALIZER, ErrorHandler, LOCALE_ID, NgModule, isDevMode } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
 import {
     DateAdapter,
     MAT_DATE_FORMATS,
@@ -9,6 +10,7 @@ import {
 } from '@angular/material/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
+import { MatMenuModule } from '@angular/material/menu';
 import {
     MAT_MOMENT_DATE_ADAPTER_OPTIONS,
     MAT_MOMENT_DATE_FORMATS,
@@ -17,7 +19,7 @@ import {
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
-import { TranslocoModule, provideTransloco } from '@ngneat/transloco';
+import { TranslocoModule, provideTransloco, TRANSLOCO_SCOPE } from '@ngneat/transloco';
 import * as sentry from '@sentry/angular-ivy';
 import { FlexLayoutModule } from 'ng-flex-layout';
 
@@ -29,7 +31,7 @@ import { WalletModule } from '@dsh/app/api/wallet';
 import { ErrorModule } from '@dsh/app/shared/services';
 import { QUERY_PARAMS_SERIALIZERS } from '@dsh/app/shared/services/query-params/utils/query-params-serializers';
 import { createDateRangeWithPresetSerializer } from '@dsh/components/date-range-filter';
-import { SpinnerModule } from '@dsh/components/indicators';
+import { SpinnerModule, BootstrapIconModule } from '@dsh/components/indicators';
 
 import { ENV, environment } from '../environments';
 
@@ -72,6 +74,9 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
         WalletModule,
         SpinnerModule,
         ApiKeysModule,
+        MatButtonModule,
+        BootstrapIconModule,
+        MatMenuModule,
     ],
     providers: [
         LanguageService,
@@ -135,6 +140,7 @@ import { TranslocoHttpLoaderService } from './transloco-http-loader.service';
             provide: QUERY_PARAMS_SERIALIZERS,
             useValue: [createDateRangeWithPresetSerializer()],
         },
+        { provide: TRANSLOCO_SCOPE, useValue: 'app' },
     ],
     bootstrap: [AppComponent],
 })

src/app/language/language.service.ts

@@ -11,6 +11,7 @@ import { LANGUAGES, Language } from './languages';
 @Injectable({ providedIn: 'root' })
 export class LanguageService {
     active: Language;
+    list = LANGUAGES;
 
     private static readonly key = 'language';
 
@@ -20,9 +21,7 @@ export class LanguageService {
     ) {}
 
     async init() {
-        // TODO: Use after language change support starts
-        // const storageLang = this.settingsService.getLocalStorageItem(LanguageService.key);
-        const storageLang = null;
+        const storageLang = this.settingsService.getLocalStorageItem(LanguageService.key);
         let language: Language;
         if (Array.from<string>(LANGUAGES).includes(storageLang)) {
             language = storageLang as Language;
@@ -37,8 +36,7 @@ export class LanguageService {
         await this.set(language);
     }
 
-    // TODO: Make it public after language change support starts
-    private async set(language: Language) {
+    async set(language: Language) {
         this.active = language;
         registerLocaleData(ANGULAR_LOCALE_DATA[language], language);
         if (language !== 'en') {

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

@@ -3,8 +3,8 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { TranslocoService } from '@ngneat/transloco';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { PaymentInstitution } from '@vality/swag-payments';
-import { combineLatest, Observable, Subject } from 'rxjs';
-import { filter, map, pluck, switchMapTo, first } from 'rxjs/operators';
+import { combineLatest, Observable, Subject, defer, ReplaySubject } from 'rxjs';
+import { filter, map, switchMapTo, first } from 'rxjs/operators';
 
 import { SHOPS } from '@dsh/app/shared/components/inputs/shop-field';
 
@@ -32,10 +32,10 @@ export class PaymentSectionComponent implements OnInit {
     navbarItemConfig$: Observable<NavbarItemConfig[]> = this.transloco
         .selectTranslation('payment-section')
         .pipe(map(() => toNavbarItemConfig(this.getNavbarItemLabels())));
-    activeSection$: Observable<string>;
+    activeSection$ = defer(() => this.activeSectionChange$).pipe(map((s) => s.label));
     noShops$: Observable<boolean> = this.realmShopsService.shops$.pipe(map((s) => s.length === 0));
 
-    private activeSectionChange$ = new Subject<NavbarItemConfig>();
+    private activeSectionChange$ = new ReplaySubject<NavbarItemConfig>();
     private realmChange$ = new Subject<PaymentInstitution.RealmEnum>();
     private navigateToShops$ = new Subject<void>();
 
@@ -70,8 +70,6 @@ export class PaymentSectionComponent implements OnInit {
                     }),
             );
 
-        this.activeSection$ = this.activeSectionChange$.pipe(pluck('label'));
-
         this.navigateToShops$.pipe(switchMapTo(this.realmService.realm$.pipe(first()))).subscribe(
             (realm) =>
                 void this.router.navigate(['../../', 'realm', realm, 'shops'], {

src/app/sections/wallet-section/withdrawals/withdrawals-list/components/withdrawal-details/withdrawal-details.component.html

@@ -21,7 +21,10 @@
     <dsh-details-item [title]="t('wallet')">
         {{ withdrawal.wallet | walletDetails }}
     </dsh-details-item>
-    <dsh-details-item *ngIf="withdrawal.failure" [title]="t('error')" gdColumn="1/-1">
+    <dsh-details-item *ngIf="withdrawal.externalID" [title]="t('externalId')">
+        {{ withdrawal.externalID }}
+    </dsh-details-item>
+    <dsh-details-item *ngIf="withdrawal.failure" [title]="t('error')">
         <div
             *transloco="
                 let errors;

src/assets/i18n/app/en.json

@@ -0,0 +1,6 @@
+{
+    "language": {
+        "en": "English",
+        "ru": "Russian (Русский)"
+    }
+}

src/assets/i18n/app/ru.json

@@ -0,0 +1,6 @@
+{
+    "language": {
+        "en": "Английский (English)",
+        "ru": "Русский"
+    }
+}

src/assets/i18n/wallet-section/en.json

@@ -175,6 +175,7 @@
     "withdrawals": {
         "details": {
             "error": "Error",
+            "externalId": "External ID",
             "fee": "Fee",
             "status": "Status",
             "wallet": "Wallet"

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

@@ -175,6 +175,7 @@
     "withdrawals": {
         "details": {
             "error": "Ошибка",
+            "externalId": "External ID",
             "fee": "Комиссия",
             "status": "Статус",
             "wallet": "Кошелек"