Merge pull request #361 from hmcts/feature/EUI-1439-transactions-screen

Feature/eui 1439 transactions screen

api/lib/config/environments/preview.config.ts

@@ -1,19 +1,21 @@
 export default {
   services: {
-    ccdDataApi: 'https://ccd-data-store-api-aat.service.core-compute-aat.internal',
-    ccdDefApi: 'https://ccd-definition-store-api-aat.service.core-compute-aat.internal',
-    idamWeb: 'https://idam-web-public.aat.platform.hmcts.net',
-    idamApi: 'https://idam-api.aat.platform.hmcts.net',
-    s2s: 'http://rpe-service-auth-provider-aat.service.core-compute-aat.internal',
-    rdProfessionalApi: 'http://rd-professional-api-aat.service.core-compute-aat.internal',
+      ccdDataApi: 'http://ccd-data-store-api-aat.service.core-compute-aat.internal',
+      ccdDefApi: 'http://ccd-definition-store-api-aat.service.core-compute-aat.internal',
+      idamWeb: 'https://idam-web-public.aat.platform.hmcts.net',
+      idamApi: 'https://idam-api.aat.platform.hmcts.net',
+      s2s: 'http://rpe-service-auth-provider-aat.service.core-compute-aat.internal',
+      rdProfessionalApi: 'http://rd-professional-api-aat.service.core-compute-aat.internal',
+      feeAndPayApi: 'http://payment-api-aat.service.core-compute-aat.internal',
   },
   health: {
-    ccdDataApi: 'https://ccd-data-store-api-aat.service.core-compute-aat.internal/health',
-    ccdDefApi: 'https://ccd-definition-store-api-aat.service.core-compute-aat.internal/health',
-    idamWeb: 'https://idam-web-public.aat.platform.hmcts.net/health',
-    idamApi: 'https://idam-api.aat.platform.hmcts.net/health',
-    s2s: 'http://rpe-service-auth-provider-aat.service.core-compute-aat.internal/health',
-    rdProfessionalApi: 'http://rd-professional-api-aat.service.core-compute-aat.internal/health',
+      ccdDataApi: 'http://ccd-data-store-api-aat.service.core-compute-aat.internal/health',
+      ccdDefApi: 'http://ccd-definition-store-api-aat.service.core-compute-aat.internal/health',
+      idamWeb: 'https://idam-web-public.aat.platform.hmcts.net/health',
+      idamApi: 'https://idam-api.aat.platform.hmcts.net/health',
+      s2s: 'http://rpe-service-auth-provider-aat.service.core-compute-aat.internal/health',
+      rdProfessionalApi: 'http://rd-professional-api-aat.service.core-compute-aat.internal/health',
+      feeAndPayApi: 'http://payment-api-aat.service.core-compute-aat.internal/health',
   },
   useProxy: false,
   secureCookie: false,
@@ -30,5 +32,5 @@ export default {
     {id: 'IA'},
     {id: 'EMPLOYMENT'},
     {id: 'CMC'}
-  ],
+      ],
 }

api/lib/tunnel.ts

@@ -1,16 +1,21 @@
-import * as globalTunnel from 'global-tunnel-ng'
-import {config} from './config'
+import { createGlobalProxyAgent } from 'global-agent'
 import * as log4js from 'log4js'
+import {config, configEnv} from './config'
 
-export const tunnel = globalTunnel
+export const globalProxyAgent = createGlobalProxyAgent()
 
 const logger = log4js.getLogger('tunnel')
 logger.level = config.logging
 
-export function init() {
-  logger.info('initialising tunnel: ', config.proxy)
-  globalTunnel.initialize({
-    host: config.proxy.host,
-    port: config.proxy.port,
-  })
+export function init(): void {
+  if (config.proxy && configEnv === 'local') {
+    logger.info('configuring global-agent: ', config.proxy)
+    globalProxyAgent.HTTP_PROXY = `http://${config.proxy.host}:${config.proxy.port}`
+    globalProxyAgent.NO_PROXY = 'localhost'
+  }
+}
+
+export function end(): void {
+  globalProxyAgent.HTTP_PROXY = ''
+  globalProxyAgent.NO_PROXY = ''
 }

api/services/serviceAuth.ts

@@ -4,7 +4,7 @@ import * as otp from 'otp'
 import { config } from '../lib/config'
 import { http } from '../lib/http'
 import * as log4jui from '../lib/log4jui'
-import { tunnel } from '../lib/tunnel'
+import * as tunnel from '../lib/tunnel'
 import { getHealth, getInfo } from '../lib/util'
 import {application} from '../lib/config/application.config'
 

charts/xui-mo-webapp/Chart.yaml

@@ -1,7 +1,7 @@
 apiVersion: v1
 name: xui-mo-webapp
 home: https://github.com/hmcts/rpx-xui-manage-organisations
-version: 0.0.1
+version: 0.0.2
 description: Expert UI
 maintainers:
   - name: HMCTS RPX XUI

package.json

@@ -72,7 +72,7 @@
     "express": "^4.16.4",
     "express-session": "^1.15.6",
     "form-data": "^2.5.1",
-    "global-tunnel-ng": "^2.7.1",
+    "global-agent": "^2.1.8",
     "govuk-frontend": "3.1.0",
     "json-stringify-safe": "^5.0.1",
     "jwt-decode": "^2.2.0",

projects/gov-ui/src/lib/components/govuk-table/govuk-table.component.html

@@ -15,11 +15,13 @@
                 </ng-container>
             </th>
             <td data-selector="table-cell" class="govuk-table__cell"  *ngIf="!(isFirst && firstCellIsHeader)">
-                <ng-container *ngIf="col.type === 'date'">{{formatDate(r[col.key])}}</ng-container>
-                <ng-container *ngIf="!col.type || col.type === 'text' || !r.routerLink">{{r[col.key]}}</ng-container>
                 <ng-container *ngIf="col.type === 'link' && r.routerLink">
                     <a class="govuk-link" [routerLink]="r.routerLink">{{r[col.key]}}</a>
                 </ng-container>
+                <ng-container *ngIf="col.type === 'money'">-{{ r[col.key] | currency:'GBP' }}</ng-container>
+                <ng-container *ngIf="col.type === 'date'">{{formatDate(r[col.key])}}</ng-container>
+                <ng-container *ngIf="col.type === 'dateAtTime'">{{formatDateAtTime(r[col.key])}}</ng-container>
+                <ng-container *ngIf="!col.type || col.type === 'text'">{{r[col.key]}}</ng-container>
             </td>
         </ng-container>
     </tr>

projects/gov-ui/src/lib/components/govuk-table/govuk-table.component.ts

@@ -1,5 +1,6 @@
-import {Component, Input} from '@angular/core';
 import {formatDate} from '@angular/common';
+import {Component, Input} from '@angular/core';
+import { AppUtils } from '../../../../../../src/app/utils/app-utils';
 
 @Component({
     selector: 'app-govuk-table',
@@ -22,10 +23,14 @@ export class GovukTableComponent {
 
     constructor() { }
 
-    formatDate(date: Date): string {
+    public formatDate(date: Date): string {
         return formatDate(date, 'dd/MM/yyyy', 'en-UK');
     }
 
+    public formatDateAtTime(date: Date): string {
+        return AppUtils.formatDateAtTime(date, false);
+    }
+
 }
 
 export class GovukTableColumnConfig {

src/app/app.constants.ts

@@ -16,19 +16,19 @@ const navItemsArray: NavItemModel[] = [
     orderId: 2
   },
   // Hiding the Tab for the Fee And Accounts
-  // {
-  //   text: 'Fee Accounts',
-  //   href: '/fee-accounts',
-  //   active: false,
-  //   orderId: 3
-  // }
+  {
+    text: 'Fee Accounts',
+    href: '/fee-accounts',
+    active: false,
+    orderId: 3
+  }
 ];
 
 const roleBasedNav = {
   'pui-organisation-manager': navItemsArray[0],
   'pui-user-manager': navItemsArray[1],
   // Hiding the role
-  // 'pui-finance-manager': navItemsArray[2],
+  'pui-finance-manager': navItemsArray[2],
 };
 
 const userNav: UserNavModel = {

src/app/store/reducers/app.reducer.spec.ts

@@ -72,13 +72,12 @@ describe('AppReducer', () => {
           active: false,
           orderId: 2
         },
-        // Fix the failing test
-        // {
-        //   href: '/fee-accounts',
-        //   text: 'Fee Accounts',
-        //   active: false,
-        //   orderId: 3
-        // }
+        {
+          href: '/fee-accounts',
+          text: 'Fee Accounts',
+          active: false,
+          orderId: 3
+        }
       ];
       const action = new fromAppActions.SetUserRoles(payload);
       const state = fromApp.reducer(initialState, action);

src/app/utils/app-utils.spec.ts

@@ -157,4 +157,14 @@ describe('AppUtils', () => {
     const url = AppUtils.getEnvironment(nav);
     expect(url).toEqual(AppConstants.ENVIRONMENT_NAMES.prod);
   });
+  it('should format date with time in 12 hour format', () => {
+    const dateTime = new Date(2020, 0, 1, 21, 12);
+    const dateString = AppUtils.formatDateAtTime(dateTime, false);
+    expect(dateString).toEqual('01 Jan 2020 at 9:12 pm');
+  });
+  it('should format date with time in 24 hour format', () => {
+    const dateTime = new Date(2020, 0, 1, 21, 12);
+    const dateString = AppUtils.formatDateAtTime(dateTime, true);
+    expect(dateString).toEqual('01 Jan 2020 at 21:12');
+  });
 });

src/app/utils/app-utils.ts

@@ -2,6 +2,7 @@
  * Contains static stateless utility methods for the App
  *
  */
+import {formatDate} from '@angular/common';
 import { AppConstants } from '../app.constants';
 export class AppUtils {
   /**
@@ -52,6 +53,14 @@ export class AppUtils {
     return stringCapitalised;
   }
 
+  public static formatDateAtTime(date: Date, is24Hour: boolean): string {
+    return `${formatDate(date, 'dd MMM yyyy', 'en-UK')} at ${AppUtils.formatTime(date, is24Hour)}`;
+  }
+
+  public static formatTime(date: Date, is24Hour: boolean): string {
+    return is24Hour ? formatDate(date, 'HH:mm', 'en-UK') : formatDate(date, 'h:mm a', 'en-UK').toLowerCase();
+  }
+
   static setPageTitle(url): string {
     /**
      * it sets correct page titles based on the url.

src/fee-accounts/components/summary/summary.component.html

@@ -1,4 +1,4 @@
-<p>Last updated on {{data && data[0] ? (data[0].effective_date | date:"dd MMM yyyy hh:mm a") : ''}}</p>
+<p>Last updated on {{data && data[0] ? (data[0].effective_date | dateFormatAtTime) : ''}}</p>
 <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
         <dl class="govuk-check-your-answers govuk-check-your-answers--pba-overview">

src/fee-accounts/components/summary/summary.component.ts

@@ -1,7 +1,6 @@
-import {Component, OnInit, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
+import { AppUtils } from 'src/app/utils/app-utils';
 import {SingleAccountSummary} from '../../models/single-account-summary';
-import { formatDate } from '@angular/common';
-
 /**
  * Bootstraps the Summary Components
  */

src/fee-accounts/containers/account-overview/account-overview.component.html

@@ -1,4 +1,5 @@
 <div class="hmcts-width-container">
+  <a routerLink="/fee-accounts" class="govuk-back-link">Back</a>
   <main role="main" class="govuk-main-wrapper">
     <router-outlet></router-outlet>
   </main>

src/fee-accounts/containers/account-summary/account-summary.component.html

@@ -1,13 +1,8 @@
-  <div class="hmcts-identity-bar__container">
-    <div class="hmcts-identity-bar__details">
-        <span class="hmcts-identity-bar__title">{{ accountName$ | async }}</span>
-    </div>
-  </div>
-  <a routerLink="/fee-accounts" class="govuk-back-link">Back</a>
   <app-hmcts-sub-navigation [label]="" [items]="navItems"></app-hmcts-sub-navigation>
   <div class="hmcts-page-heading">
     <div class="hmcts-page-heading__title-wrapper">
       <h1 class="govuk-body govuk-!-font-size-48 govuk-!-font-weight-bold">
+        <span class="govuk-caption-xl">{{ accountName$ | async }}</span>
         Summary
       </h1>
     </div>

src/fee-accounts/containers/account-transactions/account-transactions.component.html

@@ -1,19 +1,15 @@
-<div class="hmcts-identity-bar__container">
-  <div class="hmcts-identity-bar__details">
-      <span class="hmcts-identity-bar__title">{{ accounts && accounts[0] ? accounts[0].account_name : '' }}</span>
-  </div>
-</div>
-<a routerLink="{{backUrl}}" class="govuk-back-link">Back</a>
+
   <app-hmcts-sub-navigation [label]="" [items]="navItems"></app-hmcts-sub-navigation>
   <div class="hmcts-page-heading">
     <div class="hmcts-page-heading__title-wrapper">
       <h1 class="govuk-body govuk-!-font-size-48 govuk-!-font-weight-bold">
+        <span class="govuk-caption-xl">{{ accountName$ | async }}</span>
         Transactions
       </h1>
     </div>
     <div class="hmcts-page-heading__actions-wrapper"></div>
   </div>
-  <p>Last updated on {{accounts && accounts[0] ? (accounts[0].effective_date | date:"dd MMM yyyy hh:mm a") : ''}}</p>
+  <p>Last updated on {{accounts && accounts[0] ? (accounts[0].effective_date | dateFormatAtTime) : ''}}</p>
   <app-govuk-table
     *ngIf="!(loading$ | async) else loading"
     [columnConfig]="columnConfig" [rows]="accountTransactions$ | async" [firstCellIsHeader]="false" [caption]="''"

src/fee-accounts/containers/account-transactions/account-transactions.component.spec.ts

@@ -8,6 +8,7 @@ import { StoreModule } from '@ngrx/store';
 import { reducers } from 'src/fee-accounts/store/reducers';
 import { of } from 'rxjs';
 import { RouterTestingModule } from '@angular/router/testing';
+import { DateFormatAtTimePipe } from 'src/shared/components/custom-pipe/date-pipe-with-to';
 
 describe('AccountTransactionsComponent', () => {
   let component: AccountTransactionsComponent;
@@ -27,7 +28,7 @@ describe('AccountTransactionsComponent', () => {
         StoreModule.forFeature('feeAccounts', reducers),
         RouterTestingModule
       ],
-      declarations: [ AccountTransactionsComponent ],
+      declarations: [ AccountTransactionsComponent, DateFormatAtTimePipe],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       providers: [
         { provide: APP_BASE_HREF, useValue: '/' },