@hmcts/ccpay-web-component 5.0.5 → 5.0.7-beta03

package/fesm5/hmcts-ccpay-web-component.js

@@ -588,7 +588,7 @@ var PaymentLibComponent = /** @class */ (function () {
     PaymentLibComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-payment-lib',
-                    template: "\n  <ccpay-refund-list [USERID]=\"USERID\" [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" [LOGGEDINUSEREMAIL]=\"LOGGEDINUSEREMAIL\" *ngIf=\"viewName === 'refund-list'\"></ccpay-refund-list>\n    <ccpay-payment-list *ngIf=\"viewName === 'payment-list'\"></ccpay-payment-list>\n    <ccpay-refund-status\n    [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n    [API_ROOT]=\"API_ROOT\"\n    *ngIf=\"viewName === 'refundstatuslist'\"> </ccpay-refund-status >\n    <ccpay-payment-view [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'payment-view'\"\n    [isTurnOff]=\"ISTURNOFF\" [isTakePayment]=\"TAKEPAYMENT\"  [caseType]=\"CASETYPE\"\n    [isOldPcipalOff]=\"ISOLDPCIPALOFF\"\n    [isNewPcipalOff]=\"ISNEWPCIPALOFF\"></ccpay-payment-view>\n\n    <ccpay-process-refund *ngIf=\"viewName === 'process-refund'\"\n    [refundReference]=\"refundReference\"\n    [refundlistsource]=\"refundlistsource\"\n    ></ccpay-process-refund>\n    <ccpay-pba-payment *ngIf=\"viewName === 'pba-payment'\"\n    [pbaPayOrderRef]=\"pbaPayOrderRef\"\n    ></ccpay-pba-payment>\n    <ccpay-case-transactions [isTakePayment]=\"isTakePayment\" [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'case-transactions'\"></ccpay-case-transactions>\n    <app-mark-unidentified-payment *ngIf=\"viewName === 'unidentifiedPage'\"\n    [caseType]=\"CASETYPE\"></app-mark-unidentified-payment>\n    <app-mark-unsolicited-payment *ngIf=\"viewName === 'unsolicitedPage'\"\n    [caseType]=\"CASETYPE\"></app-mark-unsolicited-payment>\n    <app-allocate-payments *ngIf=\"viewName === 'allocate-payments'\"\n    [isTurnOff]=\"ISTURNOFF\"\n    [caseType]=\"CASETYPE\"\n    ></app-allocate-payments>\n    <ccpay-fee-summary *ngIf=\"viewName === 'fee-summary'\"\n      [ccdCaseNumber]=\"CCD_CASE_NUMBER\" \n      [paymentGroupRef]=\"paymentGroupReference\"\n      [isTurnOff]=\"ISTURNOFF\"\n      [caseType]=\"CASETYPE\"\n      [isOldPcipalOff]=\"ISOLDPCIPALOFF\"\n      [isNewPcipalOff]=\"ISNEWPCIPALOFF\"\n      ></ccpay-fee-summary>\n    <ccpay-reports *ngIf=\"viewName === 'reports'\"></ccpay-reports>\n    "
+                    template: "\n  <ccpay-refund-list [USERID]=\"USERID\" [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" [LOGGEDINUSEREMAIL]=\"LOGGEDINUSEREMAIL\" *ngIf=\"viewName === 'refund-list'\"></ccpay-refund-list>\n    <ccpay-payment-list *ngIf=\"viewName === 'payment-list'\"></ccpay-payment-list>\n    <ccpay-refund-status\n    [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\"\n    [API_ROOT]=\"API_ROOT\"\n    *ngIf=\"viewName === 'refundstatuslist'\"> </ccpay-refund-status >\n    <ccpay-payment-view [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'payment-view'\"\n    [isTurnOff]=\"ISTURNOFF\" [isTakePayment]=\"TAKEPAYMENT\"  [caseType]=\"CASETYPE\"\n    [isOldPcipalOff]=\"ISOLDPCIPALOFF\"\n    [ISPAYMENTSTATUSENABLED] = \"ISPAYMENTSTATUSENABLED\"\n    [isNewPcipalOff]=\"ISNEWPCIPALOFF\"></ccpay-payment-view>\n\n    <ccpay-process-refund *ngIf=\"viewName === 'process-refund'\"\n    [refundReference]=\"refundReference\"\n    [refundlistsource]=\"refundlistsource\"\n    ></ccpay-process-refund>\n    <ccpay-pba-payment *ngIf=\"viewName === 'pba-payment'\"\n    [pbaPayOrderRef]=\"pbaPayOrderRef\"\n    ></ccpay-pba-payment>\n    <ccpay-case-transactions [isTakePayment]=\"isTakePayment\" [LOGGEDINUSERROLES]=\"LOGGEDINUSERROLES\" *ngIf=\"viewName === 'case-transactions'\"></ccpay-case-transactions>\n    <app-mark-unidentified-payment *ngIf=\"viewName === 'unidentifiedPage'\"\n    [caseType]=\"CASETYPE\"></app-mark-unidentified-payment>\n    <app-mark-unsolicited-payment *ngIf=\"viewName === 'unsolicitedPage'\"\n    [caseType]=\"CASETYPE\"></app-mark-unsolicited-payment>\n    <app-allocate-payments *ngIf=\"viewName === 'allocate-payments'\"\n    [isTurnOff]=\"ISTURNOFF\"\n    [caseType]=\"CASETYPE\"\n    ></app-allocate-payments>\n    <ccpay-fee-summary *ngIf=\"viewName === 'fee-summary'\"\n      [ccdCaseNumber]=\"CCD_CASE_NUMBER\" \n      [paymentGroupRef]=\"paymentGroupReference\"\n      [isTurnOff]=\"ISTURNOFF\"\n      [caseType]=\"CASETYPE\"\n      [isOldPcipalOff]=\"ISOLDPCIPALOFF\"\n      [isNewPcipalOff]=\"ISNEWPCIPALOFF\"\n      ></ccpay-fee-summary>\n    <ccpay-reports *ngIf=\"viewName === 'reports'\"></ccpay-reports>\n    "
                 }] }
     ];
     /** @nocollapse */
@@ -618,6 +618,7 @@ var PaymentLibComponent = /** @class */ (function () {
         CASETYPE: [{ type: Input, args: ['CASETYPE',] }],
         ISOLDPCIPALOFF: [{ type: Input, args: ['ISOLDPCIPALOFF',] }],
         ISNEWPCIPALOFF: [{ type: Input, args: ['ISNEWPCIPALOFF',] }],
+        ISPAYMENTSTATUSENABLED: [{ type: Input, args: ['ISPAYMENTSTATUSENABLED',] }],
         rootUrl: [{ type: Input, args: ['rootUrl',] }],
         REFUNDLIST: [{ type: Input, args: ['REFUNDLIST',] }],
         USERID: [{ type: Input, args: ['USERID',] }],
@@ -1249,6 +1250,21 @@ var PaymentViewService = /** @class */ (function () {
         var url = this.paymentLibService.API_ROOT + "/report/data?date_from=" + startDate + "&date_to=" + endDate + "&report_type=" + reportName;
         return this.https.get(url, { withCredentials: true }).pipe(catchError(this.errorHandlerService.handleError));
     };
+    /**
+     * @param {?} startDate
+     * @param {?} endDate
+     * @return {?}
+     */
+    PaymentViewService.prototype.downloadFailureReport = /**
+     * @param {?} startDate
+     * @param {?} endDate
+     * @return {?}
+     */
+    function (startDate, endDate) {
+        /** @type {?} */
+        var url = this.paymentLibService.API_ROOT + "/payment-failures/failure-report?date_from=" + startDate + "&date_to=" + endDate;
+        return this.https.get(url, { withCredentials: true }).pipe(catchError(this.errorHandlerService.handleError));
+    };
     /**
      * @return {?}
      */
@@ -1345,6 +1361,19 @@ var PaymentViewService = /** @class */ (function () {
     function (body) {
         return this.https.post(this.paymentLibService.API_ROOT + "/refund-retro-remission", body).pipe(catchError(this.errorHandlerService.handleError));
     };
+    /**
+     * @param {?} paymentReference
+     * @return {?}
+     */
+    PaymentViewService.prototype.getPaymentFailure = /**
+     * @param {?} paymentReference
+     * @return {?}
+     */
+    function (paymentReference) {
+        return this.https.get(this.paymentLibService.API_ROOT + "/payment-failures/" + paymentReference, {
+            withCredentials: true
+        }).pipe(catchError(this.errorHandlerService.handleError));
+    };
     PaymentViewService.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
@@ -1378,6 +1407,7 @@ var PaymentViewComponent = /** @class */ (function () {
         this.isIssueRefunfBtnEnable = false;
         this.allowedRolesToAccessRefund = ['payments-refund-approver', 'payments-refund'];
         this.remissions = [];
+        this.allPaymentsFailure = [];
         this.check4AllowedRoles2AccessRefund = (/**
          * @return {?}
          */
@@ -1469,6 +1499,33 @@ var PaymentViewComponent = /** @class */ (function () {
          * @return {?}
          */
         function (error) { return _this.errorMessage = error; }));
+        this.paymentViewService.getPaymentFailure(this.paymentLibComponent.paymentReference).subscribe({
+            next: (/**
+             * @param {?} res
+             * @return {?}
+             */
+            function (res) {
+                JSON.parse(res).payment_failure_list.reverse().forEach((/**
+                 * @param {?} payments
+                 * @return {?}
+                 */
+                function (payments) {
+                    _this.allPaymentsFailure.push(payments.payment_failure_initiated);
+                    if (payments.payment_failure_closed) {
+                        _this.allPaymentsFailure.push(payments.payment_failure_closed);
+                    }
+                }));
+                _this.allPaymentsFailure = _this.allPaymentsFailure.reverse();
+            }),
+            error: (/**
+             * @param {?} e
+             * @return {?}
+             */
+            function (e) {
+                _this.allPaymentsFailure = [];
+                _this.errorMsg = "Server error";
+            })
+        });
     };
     Object.defineProperty(PaymentViewComponent.prototype, "isCardPayment", {
         get: /**
@@ -1833,11 +1890,35 @@ var PaymentViewComponent = /** @class */ (function () {
         this.OrderslistService.setorderRemissionTotal(null);
         this.OrderslistService.setorderFeesTotal(null);
     };
+    /**
+     * @param {?} payment
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.goToPaymentFailuePage = /**
+     * @param {?} payment
+     * @return {?}
+     */
+    function (payment) {
+        this.viewStatus = 'payment-failure';
+        this.selectedPaymentsStatus = payment;
+    };
+    /**
+     * @param {?} event
+     * @return {?}
+     */
+    PaymentViewComponent.prototype.goBackToPaymentView = /**
+     * @param {?} event
+     * @return {?}
+     */
+    function (event) {
+        event.preventDefault();
+        this.viewStatus = 'paymentview';
+    };
     PaymentViewComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-payment-view',
-                    template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Payment details could not be retrieved\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n     \n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Service request reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td> \n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td class=\"tb-col-w\">{{  paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Banked date</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">Allocaton status</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n          \n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA number</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">Customer internal reference</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n      \n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n          <br/>\n          <br/>\n          <h2 class=\"heading-large\">Fee and remission details</h2>\n        \n        </div>\n      </div>\n    \n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Description</td>\n            <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n        \n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n\n\n           \n        <!-- <button  *ngIf=\"paymentGroup.payments[0].method === 'payment by account'\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n             -->\n\n      </div>\n\n                <!-- remissions -->\n                <div class=\"order-class\">\n                  <div class=\"column\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n            <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\"  *ngFor=\"let remission of paymentGroup.remissions\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n            <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n               <button  [disabled]=\"!chkIsRefundRemissionBtnEnable()\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n            <!-- <td *ngIf=\"!chkIsRefundRemissionBtnEnable()\" class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n             \n          </td> -->\n          </tr>\n      </tbody>\n      \n\n    </table>\n                  </div></div>\n    \n   <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n      <span class=\"mar-17\" >No help with fees or remissions.</span>\n   </div>\n   \n  </div>\n\n\n\n      <!-- card details -->\n      <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details> -->\n\n      <!-- pba details -->\n      <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n\n  \n\n    </div>\n\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [isOldPcipalOff]=\"isOldPcipalOff\" \n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [isNewPcipalOff]=\"isNewPcipalOff\" \n    [orderStatus] =\"paymentGroup.payments[0].status\"\n    [paidAmount]= \"paymentGroup.payments[0].amount\"\n    [isRefundRemission]=\"isRefundRemission\"\n    [caseType]=\"caseType\" \n    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n\n\n\n</ng-container>\n<!-- <ng-container *ngIf=\"isTakePayment\">\n    <div class=\"govuk-width-container\">\n        <div class=\"govuk-breadcrumbs\">\n          <ol class=\"govuk-breadcrumbs__list\">\n            <li class=\"govuk-breadcrumbs__list-item\">\n              <a href=\"#\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n            </li>\n          </ol>\n        </div>\n      \n        <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n      \n          <div *ngIf=\"errorMessage\">\n            <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n              <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n                Payment details could not be retrieved\n              </h2>\n              <div class=\"govuk-error-summary__body\">\n                {{ errorMessage }}\n              </div>\n            </div>\n          </div>\n      \n          <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup\">\n      \n            <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n            <div class=\"govuk-grid-row\">\n              <div class=\"column\">\n                <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n              </div>\n            </div>\n            <table>\n              <tbody>\n            <tr class=\"section\" *ngIf=\"isTurnOff\">\n                <td class=\"bold tb-col-w\">Payment group reference</td>\n                <td>{{ paymentGroup.payment_group_reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment reference</td>\n                <td>{{ paymentGroup.payments[0].reference }}</td>\n              </tr>\n              <tr class=\"section\">\n                <td class=\"bold tb-col-w\">Payment amount</td>\n                <td>\u00A3{{ paymentGroup.payments[0].amount | number:'.2' }}</td>\n              </tr>\n              <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].external_reference\">\n                <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n                <td>{{ paymentGroup.payments[0].external_reference }}</td>\n              </tr>\n              <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n                <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n                <td>{{ paymentGroup.payments[0].document_control_number }}</td>\n              </tr>\n              <tr class=\"section\" *ngIf=\"paymentGroup.payments[0] && paymentGroup.payments[0].document_control_number && !paymentGroup.payments[0].external_reference\">\n                <td class=\"bold tb-col-w\">Banked date</td>\n                <td>{{ paymentGroup.payments[0].banked_date | date:'dd MMM yyyy' }}</td>\n              </tr>\n              </tbody>\n            </table>\n      \n            <div class=\"govuk-grid-row\" *ngIf=\"paymentGroup.fees.length > 0\">\n              <div class=\"column\">\n                <h2 class=\"heading-large\">Fee and remission details</h2>\n              </div>\n            </div>\n      \n            <div *ngFor=\"let fee of paymentGroup.fees\">\n              <table class=\"table\">\n                <tbody>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\">Description</td>\n                  <td>Application for {{ fee.description }}</td>\n                </tr>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\">Fee code</td>\n                  <td>{{ fee.code }}</td>\n                </tr>\n                <tr class=\"section\">\n                  <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">\u00A3{{ fee.calculated_amount | number:'.2' }}</td>\n                </tr>\n                <tr *ngIf=\"fee.net_amount && isTurnOff\">\n                  <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\" >Net amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions}\">\u00A3{{ fee.net_amount | number:'.2' }}</td>\n                </tr>\n                <tr *ngIf=\"fee.apportion_amount\">\n                  <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n                  <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee.apportion_amount | number:'.2' }}</td>\n                </tr>\n      \n                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w\">Remission code</td>\n                  <td>{{fee.remissions.hwf_reference}}</td>\n                </tr>\n                <tr *ngIf=\"fee.remissions\">\n                  <td class=\"bold tb-col-w tr-border\">Remission amount</td>\n                  <td class=\"tr-border\">\u00A3{{ fee.remissions.hwf_amount | number:'.2'}}</td>\n                </tr>\n                </tbody>\n              </table>\n      \n            </div>\n      \n            <!-- card details -->\n            <!-- <ccpay-card-details *ngIf=\"isCardPayment && !isTelephonyPayment\"></ccpay-card-details>\n       -->\n            <!-- pba details -->\n            <!-- <ccpay-pba-details *ngIf=\"!isCardPayment\" [payment]=\"paymentGroup.payments[0]\"></ccpay-pba-details> -->\n            <!-- Status histories -->\n            <!-- <ccpay-payment-statuses *ngIf=\"isStatusAllocated\"[isTakePayment]=\"isTakePayment\" ></ccpay-payment-statuses>\n      \n          </div>\n      \n        </main>\n      </div> -->\n<!-- </ng-container> --> \n",
-                    styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:19px;float:left;margin-top:2em}.remission{margin-bottom:7em}.govuk-error-summary__title{font-size:24px!important}.govuk-table__cell,.govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}.text-transform::first-letter{text-transform:capitalize}.govuk-link{cursor:pointer}.mar-17{font-size:19px!important}"]
+                    template: "\n<ng-container *ngIf=\"viewStatus === 'paymentview'\">\n<div class=\"govuk-width-container\">\n\n  <div  class=\"govuk-breadcrumbs\">\n    <ol class=\"govuk-breadcrumbs__list\">\n      <li class=\"govuk-breadcrumbs__list-item\">\n        <a href=\"javascript:void(0)\" (click)=\"goToCaseTransationPage($event)\" class=\"govuk-back-link\">Back</a>\n      </li>\n    </ol>\n  </div>\n\n  <main class=\"govuk-main-wrapper govuk-!-padding-top-0\" id=\"main-content\" role=\"main\">\n\n    <div *ngIf=\"errorMessage\">\n      <div class=\"error-summary\" role=\"group\" aria-labelledby=\"failure-error-summary-heading\" tabindex=\"-1\">\n        <h2 class=\"heading-medium error-summary-heading\" id=\"failure-error-summary-heading\">\n          Payment details could not be retrieved\n        </h2>\n        <div class=\"govuk-error-summary__body\">\n          {{ errorMessage }}\n        </div>\n      </div>\n    </div>\n\n    <div class=\"payment-view-alignment\" *ngIf=\"!errorMessage && paymentGroup?.payments[0]\">\n\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='PAYMENTDETAILS'>\n      <div class=\"govuk-grid-row\">\n        <div class=\"column\">\n          <h1 class=\"heading-large govuk-!-margin-top-0\">Payment details</h1>\n        </div>\n      </div>\n      <table>\n        <tbody>\n     \n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Service request reference</td>\n          <td class=\"tb-col-w\">{{ serviceReference  }}</td> \n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment reference</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.reference }}</td>\n        </tr>\n        <tr class=\"section\">\n          <td class=\"bold tb-col-w\">Payment amount</td>\n          <td class=\"tb-col-w\">\u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Payment asset number(DCN)</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.document_control_number }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.document_control_number && !paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">Banked date</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.banked_date | date:'dd MMM yyyy' }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0] && paymentGroup?.payments[0]?.external_reference\">\n          <td class=\"bold tb-col-w\">GovPay Transaction ID</td>\n          <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.external_reference }}</td>\n        </tr>\n        <tr class=\"section\" >\n            <td class=\"bold tb-col-w\">Payment method</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.method  }}</td>\n        </tr>\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.method === 'payment by account'\" >\n            <td class=\"bold tb-col-w\">Type</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">Credit</td>\n            <td class=\"tb-col-w\" *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">Card</td>\n        </tr>\n        <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Channel</td>\n            <td class=\"tb-col-w text-transform\">{{ paymentGroup?.payments[0]?.channel  }}</td>\n        </tr>\n        <!-- <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Method</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method !== 'card'\">{{ paymentGroup?.payments[0]?.method }}</td>\n            <td *ngIf=\"paymentGroup?.payments[0]?.method === 'card'\">CARD</td>\n        </tr> -->\n        <!-- <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.channel !== 'telephony'\">\n            <td class=\"bold tb-col-w\">Status</td>\n            <td>{{ paymentGroup?.payments[0]?.status }}</td>\n         </tr> -->\n        <tr class=\"section\" *ngIf=\"paymentGroup?.payments[0]?.payment_allocation[0] !== undefined\">\n            <td class=\"bold tb-col-w\">Allocaton status</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.payment_allocation[0]?.allocation_status }}</td>\n          </tr>\n          \n          <tr *ngIf=\"paymentGroup?.payments[0].organisation_name\">\n            <td class=\"bold tb-col-w\">PBA account name</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.organisation_name }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].account_number\">\n            <td class=\"bold tb-col-w\">PBA number</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.account_number }}</td>\n          </tr>\n\n          <tr *ngIf=\"paymentGroup?.payments[0].customer_reference\">\n            <td class=\"bold tb-col-w\">Customer internal reference</td>\n            <td class=\"tb-col-w\">{{ paymentGroup?.payments[0]?.customer_reference }}</td>\n          </tr>\n      \n        </tbody>\n      </table>\n\n      <div>\n            <!-- Status histories -->\n      <ccpay-payment-statuses *ngIf=\"isStatusAllocated\" [isTakePayment]=\"isTakePayment\"></ccpay-payment-statuses>\n      </div>\n     <div class=\"remission\">\n        <button  [disabled]=\"!chkIssueRefundBtnEnable(paymentGroup?.payments[0])\"  (click)=\"issueRefund(paymentGroup)\" class=\"govuk-button govuk-button--secondary\">Issue refund</button>\n     </div>\n<div *ngIf=\"ISPAYMENTSTATUSENABLED === 'Enable'\">\n     <div class=\"column\">\n      <h2 class=\"heading-medium\">Disputed payment history</h2>\n    </div>\n    \n    <div>\n      <table>\n          <thead>\n            <tr>\n              <th>Status</th>\n              <th>Amount</th>\n              <th>Date</th>\n              <th>Payment reference</th>\n              <th>Event</th>\n              <th></th>\n            </tr>\n          </thead> \n          <tbody *ngIf=\"!errorMsg && allPaymentsFailure.length > 0\">\n            <tr *ngFor=\"let payment of allPaymentsFailure\">\n              <td>{{ payment.status }}</td>\n              <td>\u00A3{{ payment.disputed_amount | number:'.2' }}</td>\n              <td>{{(payment.representment_date ? payment.representment_date : payment.failure_event_date_time) | date:'dd MMM yyyy'}}</td>\n              <td>{{ payment.payment_reference }}</td>\n              <td >{{ payment.failure_type }}</td>\n              <td>\n                \n                <a href=\"javascript:void(0)\" (click)=\"goToPaymentFailuePage(payment)\">Show detail</a>\n\n              </td>\n            </tr>\n          </tbody>\n          <tbody  *ngIf=\"errorMsg || allPaymentsFailure.length === 0\">\n            <tr>\n              <td colspan=\"6\"> No disputed payment history available. </td>\n            </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n      \n     <div  *ngIf=\"checkForFees(paymentGroup)\">\n      <div  *ngIf=\"paymentGroup.fees.length > 0\">\n        <div class=\"column\">\n          <br/>\n          <br/>\n          <h2 class=\"heading-large\">Fee and remission details</h2>\n        \n        </div>\n      </div>\n    \n      <div *ngFor=\"let fee of paymentGroup.fees\">\n        <table class=\"table\">\n          <tbody>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Description</td>\n            <td class=\"tb-col-w\">Application for {{ fee.description }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\">Fee code</td>\n            <td class=\"tb-col-w\">{{ fee?.code }}</td>\n          </tr>\n          <tr class=\"section\">\n            <td class=\"bold tb-col-w\" [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff }\">Fee amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.apportion_amount && !fee.remissions && !isTurnOff}\">\u00A3{{ fee?.calculated_amount | number:'.2' }}</td>\n          </tr>\n        \n          <tr *ngIf=\"fee.apportion_amount\">\n            <td class=\"bold tb-col-w tr-border\" [ngClass]=\"{'tr-border': !fee.remissions}\">Allocated amount</td>\n            <td [ngClass]=\"{'tr-border': !fee.remissions}\">\u00A3{{ fee?.apportion_amount | number:'.2' }}</td>\n          </tr>\n\n          </tbody>\n        </table>\n        <button [disabled]=\"!chkForAddRemission(fee.code)\" (click)=\"addRemission(fee)\" class=\"govuk-button govuk-button--secondary\"> Add remission</button>\n      </div>\n\n                <!-- remissions -->\n                <div class=\"order-class\">\n                  <div class=\"column\">\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__header col-24 whitespace-inherit\" scope=\"col\">Help with fees or remission code</td>\n            <td class=\"govuk-table__header col-27 whitespace-inherit\" scope=\"col\">Reference</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Fee</td>\n            <td class=\"govuk-table__header whitespace-inherit\" scope=\"col\">Amount</td>\n            <td  class=\"govuk-table__header whitespace-inherit refundBtn\" scope=\"col\"></td>\n          </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\"  *ngFor=\"let remission of paymentGroup.remissions\">\n        <tr class=\"govuk-table__row\">\n           <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.remission_reference }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.fee_code }}</td>\n            <td class=\"govuk-table__cell whitespace-inherit\">{{ remission?.hwf_amount | currency:'GBP':'symbol-narrow':'1.2-2'}}</td>\n            <td class=\"govuk-table__cell refundBtn whitespace-inherit\"  >\n               <button  [disabled]=\"!chkIsRefundRemissionBtnEnable()\" (click)=\"addRefundForRemission(paymentGroup.payments[0],remission,paymentGroup.fees)\" class=\"govuk-button govuk-button--secondary\"> Add refund</button>\n            </td>\n          </tr>\n      </tbody>\n      \n\n    </table>\n                  </div></div>\n    \n   <div *ngIf=\"paymentGroup.remissions?.length === 0\">\n      <span class=\"mar-17\" >No help with fees or remissions.</span>\n   </div>\n   \n  </div>\n    </div>\n  </main>\n</div>\n\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'addremission' && feeId\">\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[fee]=\"feeId\" \n[payment] = \"payment\"\n[orderStatus] =\"paymentGroup.payments[0].status\"\n[paidAmount]= \"paymentGroup.payments[0].amount\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n[isFromPaymentDetailPage] = \"true\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'addrefundforremission' && payment\">\n\n<ccpay-add-remission \n[isTurnOff]=\"isTurnOff\"\n[isStrategicFixEnable]=\"isStrategicFixEnable\" \n[isOldPcipalOff]=\"isOldPcipalOff\" \n[viewCompStatus]= \"viewStatus\"\n[isNewPcipalOff]=\"isNewPcipalOff\" \n[payment]=\"payment\" \n[orderStatus] =\"orderStatus\"\n[paidAmount]= \"orderTotalPayments\"\n[isRefundRemission]=\"isRefundRemission\"\n[caseType]=\"caseType\" \n[feeamount]=\"remissionFeeAmt\"\n[remission] = \"remissions\"\n[isFromServiceRequestPage]=\"false\" \n[paymentGroupRef]=\"paymentGroup.payment_group_reference\"\n[ccdCaseNumber]=\"ccdCaseNumber\"\n[orderFeesTotal] = \"orderFeesTotal\"\n[orderTotalPayments] = \"orderTotalPayments\"\n[orderRemissionTotal] = \"orderRemissionTotal\"\n[orderRef] = \"orderRef\"\n[orderCreated] = \"orderCreated\"\n[orderParty] = \"orderParty\"\n[orderCCDEvent] = \"orderCCDEvent\"\n[orderDetail] = \"orderDetail\"\n[LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"></ccpay-add-remission>\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'issuerefund'\">\n    <ccpay-add-remission \n    [isTurnOff]=\"isTurnOff\"\n    [isStrategicFixEnable]=\"isStrategicFixEnable\" \n    [isOldPcipalOff]=\"isOldPcipalOff\" \n    [payment] = 'paymentGroup.payments[0]'\n    [viewCompStatus]= \"viewStatus\"\n    [isNewPcipalOff]=\"isNewPcipalOff\" \n    [orderStatus] =\"paymentGroup.payments[0].status\"\n    [paidAmount]= \"paymentGroup.payments[0].amount\"\n    [isRefundRemission]=\"isRefundRemission\"\n    [caseType]=\"caseType\" \n    [isFromServiceRequestPage]=\"isFromServiceRequestPage\"\n    [isFromPaymentDetailPage] = \"isFromPaymentDetailPage\"\n    [paymentGroupRef]=\"paymentGroup.payment_group_reference\" \n    [ccdCaseNumber]=\"ccdCaseNumber\"\n    [orderFeesTotal] = \"orderFeesTotal\"\n    [orderTotalPayments] = \"orderTotalPayments\"\n    [orderRemissionTotal] = \"orderRemissionTotal\"\n    [orderRef] = \"orderRef\"\n    [orderCreated] = \"orderCreated\"\n    [orderParty] = \"orderParty\"\n    [orderCCDEvent] = \"orderCCDEvent\"\n    [orderDetail] = \"orderDetail\"\n    [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\">\n  ></ccpay-add-remission>\n</ng-container>\n<ng-container *ngIf=\"viewStatus === 'order-full-view'\">\n  <ccpay-service-request\n  [viewStatus] = \"viewStatus\"\n  [orderRef] = \"orderRef\"\n  [orderStatus] = \"orderStatus\"\n  [orderCreated] = \"orderCreated\"\n  [orderParty] = \"orderParty\"\n  [orderCCDEvent] = \"orderCCDEvent\"\n  [orderDetail] = \"orderDetail\"\n  [LOGGEDINUSERROLES] = \"LOGGEDINUSERROLES\"\n  [takePayment] = \"isTakePayment\"\n  [ccdCaseNumber] = \"ccdCaseNumber\"\n  [orderFeesTotal] = \"orderFeesTotal\"\n  [orderTotalPayments] = \"orderTotalPayments\"\n  [orderRemissionTotal] = \"orderRemissionTotal\"\n  [isServiceRequest] = \"isServiceRequest\"\n  (goToServiceRquestComponent) = \"goToServiceRequestPage()\"\n>\n</ccpay-service-request>\n\n</ng-container>\n\n<ng-container *ngIf=\"viewStatus === 'payment-failure'\">\n  <div class=\"payment-failure-alignment\">\n    <div  class=\"govuk-breadcrumbs\">\n      <ol class=\"govuk-breadcrumbs__list\">\n        <li class=\"govuk-breadcrumbs__list-item\">\n          <a href=\"javascript:void(0)\" (click)=\"goBackToPaymentView($event)\" class=\"govuk-back-link\">Back</a>\n        </li>\n      </ol>\n    </div>\n    <div class=\"govuk-grid-row\">\n      <div class=\"column\">\n        <h1 class=\"heading-large govuk-!-margin-top-0\">Failure event details</h1>\n      </div>\n    </div>\n    <table>\n      <tbody>\n\n      <tr class=\"section\">\n        <td class=\"bold\">Failure reference</td>\n        <td>\t{{selectedPaymentsStatus.failure_reference}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure reason</td>\n        <td>\t{{selectedPaymentsStatus.failure_reason}}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Payment reference</td>\n          <td>{{ selectedPaymentsStatus.payment_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Payment amount</td>\n          <td> \u00A3{{ paymentGroup?.payments[0]?.amount | number:'.2' }}</td>\n\n      </tr>\n      <tr class=\"section\">\n          <td class=\"bold\">Disputed amount</td>\n          <td>\t{{selectedPaymentsStatus.disputed_amount  | number:'.2'}}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Additional information</td>\n        <td>\t{{selectedPaymentsStatus.additional_reference }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure type</td>\n        <td>\t{{ selectedPaymentsStatus.failure_type }}</td>\n      </tr>\n      <tr class=\"section\">\n        <td class=\"bold\">Failure event date and time</td>\n        <td> {{ selectedPaymentsStatus.failure_event_date_time | date:'dd MMM yyyy HH:mm:ss' }}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.has_amount_debited\">\n        <td class=\"bold\">Has disputed amount debited</td>\n        <td>\t{{selectedPaymentsStatus.has_amount_debited}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_status\">\n        <td class=\"bold\">Status following representation of payment</td>\n        <td>\t{{selectedPaymentsStatus.representment_status === 'yes'? 'Success' : 'Failure'}}</td>\n      </tr>\n      <tr class=\"section\" *ngIf=\"selectedPaymentsStatus.representment_date\">\n        <td class=\"bold\">Date payment represented</td>\n        <td>\t{{selectedPaymentsStatus.representment_date  | date:'dd MMM yyyy HH:mm:ss'}}</td>\n      </tr>\n      </tbody>\n    </table>\n\n    <div>\n    </div>\n  </div>\n</ng-container>",
+                    styles: [".tb-col-w{width:330px}.tr-border{border-bottom:2px solid}.payment-view-alignment{margin-left:30px}.govuk-button{font-size:19px;float:left;margin-top:2em}.remission{margin-bottom:7em}.govuk-error-summary__title{font-size:24px!important}.govuk-table__cell,.govuk-table__header{padding:0;line-height:1.3;vertical-align:middle}.govuk-table__row{line-height:1.3}.govuk-table__cell:last-child{text-align:right}.text-transform::first-letter{text-transform:capitalize}.govuk-link{cursor:pointer}.mar-17{font-size:19px!important}.payment-failure-alignment{margin-bottom:50px}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1858,6 +1939,7 @@ var PaymentViewComponent = /** @class */ (function () {
         orderTotalPayments: [{ type: Input }],
         payment: [{ type: Input }],
         LOGGEDINUSERROLES: [{ type: Input }],
+        ISPAYMENTSTATUSENABLED: [{ type: Input }],
         orderParty: [{ type: Input }],
         orderCreated: [{ type: Input }],
         orderCCDEvent: [{ type: Input }],
@@ -7866,6 +7948,7 @@ var XlFileService = /** @class */ (function () {
         var worksheet;
         /** @type {?} */
         var workbook;
+        console.log(excelFileName);
         if (excelFileName.match('Data_Loss') !== null) {
             worksheet = utils.json_to_sheet(json, { header: ['loss_resp', 'payment_asset_dcn', 'env_ref', 'env_item', 'resp_service_id', 'resp_service_name', 'date_banked', 'bgc_batch', 'payment_method', 'amount'] });
             worksheet = this.setDataLossReportHeaders(worksheet);
@@ -7881,6 +7964,11 @@ var XlFileService = /** @class */ (function () {
             worksheet = this.setProcessedUnallocatedReportHeaders(worksheet);
             worksheet = this.autoFitColumns(worksheet, json);
         }
+        else if (excelFileName.match('Payment failure') !== null) {
+            worksheet = utils.json_to_sheet(json, { header: ['payment_reference', 'ccd_reference', 'org_id', 'service_name', 'failure_reference', 'failure_reason', 'disputed_amount', 'event_name', 'event_date', 'representment_status', 'representment_date', 'refund_references', 'refund_amount', 'refund_date'] });
+            worksheet = this.setPaymentFailureReportHeaders(worksheet);
+            worksheet = this.autoFitColumns(worksheet, json);
+        }
         else {
             worksheet = utils.json_to_sheet(json, { header: ['resp_service_id', 'resp_service_name', 'surplus_shortfall', 'balance', 'payment_amount', 'ccd_case_reference', 'ccd_exception_reference', 'processed_date', 'reason', 'explanation', 'user_name'] });
             worksheet = this.setShortFallReportHeaders(worksheet);
@@ -8006,6 +8094,33 @@ var XlFileService = /** @class */ (function () {
         worksheet.N1.v = "Amount";
         return worksheet;
     };
+    /**
+     * @private
+     * @param {?} worksheet
+     * @return {?}
+     */
+    XlFileService.prototype.setPaymentFailureReportHeaders = /**
+     * @private
+     * @param {?} worksheet
+     * @return {?}
+     */
+    function (worksheet) {
+        worksheet.A1.v = "Payment reference";
+        worksheet.B1.v = "CCD reference";
+        worksheet.C1.v = "OrgID";
+        worksheet.D1.v = "Service name";
+        worksheet.E1.v = "Failure reference";
+        worksheet.F1.v = "Failure reason";
+        worksheet.G1.v = "Disputed amount";
+        worksheet.H1.v = "Event name";
+        worksheet.I1.v = "Event date";
+        worksheet.J1.v = "Representment status";
+        worksheet.K1.v = "Representment date";
+        worksheet.L1.v = "Refund reference";
+        worksheet.M1.v = "Refund amount";
+        worksheet.N1.v = "Refund date";
+        return worksheet;
+    };
     /**
      * @private
      * @param {?} worksheet
@@ -8068,6 +8183,8 @@ var ReportsComponent = /** @class */ (function () {
         this.formBuilder = formBuilder;
         this.bulkScaningPaymentService = bulkScaningPaymentService;
         this.paymentViewService = paymentViewService;
+        this.fmt = 'dd/MM/yyyy';
+        this.loc = 'en-US';
         this.isDownLoadButtondisabled = false;
         this.isStartDateLesthanEndDate = false;
         this.isDateRangeBetnWeek = false;
@@ -8216,6 +8333,35 @@ var ReportsComponent = /** @class */ (function () {
                 _this.errorMessage = _this.errorHandlerService.getServerErrorMessage(true);
             }));
         }
+        else if (selectedReportName === 'PAYMENT_FAILURE_EVENT') {
+            this.paymentViewService.downloadFailureReport(selectedStartDate, selectedEndDate).subscribe((/**
+             * @param {?} response
+             * @return {?}
+             */
+            function (response) {
+                _this.errorMessage = _this.errorHandlerService.getServerErrorMessage(false);
+                /** @type {?} */
+                var result = { data: JSON.parse(response)['payment_failure_report_list'] };
+                /** @type {?} */
+                var res = { data: _this.applyDateFormat(result) };
+                if (result['data'].length > 0) {
+                    for (var i = 0; i < res['data'].length; i++) {
+                        if (res['data'][i]["disputed_amount"] !== undefined) {
+                            res['data'][i]['disputed_amount'] = _this.convertToFloatValue(res['data'][i]["disputed_amount"]);
+                        }
+                    }
+                }
+                _this.isDownLoadButtondisabled = false;
+                _this.xlFileService.exportAsExcelFile(res['data'], _this.getFileName(_this.reportsForm.get('selectedreport').value, selectedStartDate, selectedEndDate));
+            }), (/**
+             * @param {?} error
+             * @return {?}
+             */
+            function (error) {
+                _this.isDownLoadButtondisabled = false;
+                _this.errorMessage = _this.errorHandlerService.getServerErrorMessage(true);
+            }));
+        }
         else {
             this.bulkScaningPaymentService.downloadSelectedReport(selectedReportName, selectedStartDate, selectedEndDate).subscribe((/**
              * @param {?} response
@@ -8342,6 +8488,10 @@ var ReportsComponent = /** @class */ (function () {
                 result = 'Over Payment_Under Payment';
                 break;
             }
+            case 'PAYMENT_FAILURE_EVENT': {
+                result = 'Payment failure event';
+                break;
+            }
             default: {
                 result = selectedOption;
                 break;
@@ -8358,21 +8508,52 @@ var ReportsComponent = /** @class */ (function () {
      * @return {?}
      */
     function (res) {
-        /** @type {?} */
-        var fmt = 'dd/MM/yyyy';
-        /** @type {?} */
-        var loc = 'en-US';
+        var _this = this;
         return res['data'].map((/**
          * @param {?} value
          * @return {?}
          */
         function (value) {
             if (value['date_banked']) {
-                value['date_banked'] = formatDate(value['date_banked'], fmt, loc);
+                value['date_banked'] = formatDate(value['date_banked'], _this.fmt, _this.loc);
+            }
+            if (value['event_date'] && value['event_date'].indexOf(',') === -1) {
+                value['event_date'] = formatDate(value['event_date'], _this.fmt, _this.loc);
+            }
+            else if (value['event_date'] && value['event_date'].indexOf(',') !== -1) {
+                value['event_date'] = _this.multiDateFormater(value['event_date']);
+            }
+            if (value['representment_date'] && value['representment_date'].indexOf(',') === -1) {
+                value['representment_date'] = formatDate(value['representment_date'], _this.fmt, _this.loc);
+            }
+            else if (value['representment_date'] && value['representment_date'].indexOf(',') !== -1) {
+                value['representment_date'] = _this.multiDateFormater(value['representment_date']);
+            }
+            if (value['refund_date'] && value['refund_date'].indexOf(',') === -1) {
+                value['refund_date'] = formatDate(value['refund_date'], _this.fmt, _this.loc);
+            }
+            else if (value['refund_date'] && value['refund_date'].indexOf(',') !== -1) {
+                value['refund_date'] = _this.multiDateFormater(value['refund_date']);
             }
             return value;
         }));
     };
+    /**
+     * @param {?} dateStr
+     * @return {?}
+     */
+    ReportsComponent.prototype.multiDateFormater = /**
+     * @param {?} dateStr
+     * @return {?}
+     */
+    function (dateStr) {
+        var _this = this;
+        return dateStr.split(',').map((/**
+         * @param {?} date
+         * @return {?}
+         */
+        function (date) { return formatDate(date, _this.fmt, _this.loc); })).join(',');
+    };
     /**
      * @param {?} amt
      * @return {?}
@@ -8387,7 +8568,7 @@ var ReportsComponent = /** @class */ (function () {
     ReportsComponent.decorators = [
         { type: Component, args: [{
                     selector: 'ccpay-reports',
-                    template: "<div class=\"header\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='REPORTS'>\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <legend class=\"govuk-fieldset__legend--xl\">\n         <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n      </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n     <div  class=\"govuk-form-group\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div  class=\"govuk-radios__item\">\n              <input \n              required\n              id=\"DataLoss\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('DATA_LOSS')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"DATA_LOSS\" \n               data-aria-controls=\"DataLoss\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n              <span class=\"form-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n          </div>\n\n         <div class=\"govuk-radios__item\">\n              <input \n              id=\"UnprocessedTransactions\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('UNPROCESSED')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"UNPROCESSED\" \n              data-aria-controls=\"UnprocessedTransactions\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n              <span class=\"form-hint\">Transaction records that are still unprocessed by staff.</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input \n            id=\"ProcessedUnallocated\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n            type=\"radio\"\n            value=\"PROCESSED_UNALLOCATED\" \n            data-aria-controls=\"ProcessedUnallocated\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n            <span class=\"form-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input \n            id=\"ShortfallsandSurplus\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n            type=\"radio\"\n            value=\"SURPLUS_AND_SHORTFALL\" \n            data-aria-controls=\"ShortfallsandSurplus\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n            <span class=\"form-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n               E.g: Refund approval, Customer contact</span>\n         </div>\n       \n       </div>\n     </div>\n     <div  class=\"govuk-form-group\">\n      <div class=\"datefrom\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-from\" name=\"date-from\" type=\"date\"  formControlName=\"startDate\" required/>\n      </div>\n\n      <div class=\"dateto\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n      </div>\n     </div>\n   <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek\">\n      <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n      <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n   </p>\n    <div class=\"btnsubmit\">\n     <button type=\"submit\" (click)=\"downloadReport()\" class=\"button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek\">Download report</button>\n   </div>\n </form>\n    \n",
+                    template: "<div class=\"header\">\n      <input #myInput type='hidden' id='iFrameDrivenImageValue' value='REPORTS'>\n      <ccpay-error-banner *ngIf=\"errorMessage.showError\" [errorMessage]=\"errorMessage\"></ccpay-error-banner>\n      <legend class=\"govuk-fieldset__legend--xl\">\n         <h1 class=\"govuk-fieldset__heading\"> Choose the report type and date range</h1>\n      </legend>\n</div>\n<form [formGroup]=\"reportsForm\">\n     <div  class=\"govuk-form-group\">\n        <div class=\"govuk-radios govuk-radios--conditional\" data-module=\"govuk-radios\">\n          <div  class=\"govuk-radios__item\">\n              <input \n              required\n              id=\"DataLoss\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('DATA_LOSS')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"DATA_LOSS\" \n               data-aria-controls=\"DataLoss\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"DataLoss\">Data loss</label>\n              <span class=\"form-hint\">Missing transactions where data has been received from only either of Exela or Bulk scan</span>\n          </div>\n\n         <div class=\"govuk-radios__item\">\n              <input \n              id=\"UnprocessedTransactions\"\n              class=\"govuk-radios__input\"\n              formControlName=\"selectedreport\"\n              (click)=\"validateDates('UNPROCESSED')\"\n              name=\"selectedreport\"\n              type=\"radio\"\n              value=\"UNPROCESSED\" \n              data-aria-controls=\"UnprocessedTransactions\"/>\n              <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"UnprocessedTransactions\">Unprocessed transactions</label>\n              <span class=\"form-hint\">Transaction records that are still unprocessed by staff.</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input \n            id=\"ProcessedUnallocated\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PROCESSED_UNALLOCATED')\"\n            type=\"radio\"\n            value=\"PROCESSED_UNALLOCATED\" \n            data-aria-controls=\"ProcessedUnallocated\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ProcessedUnallocated\">Processed unallocated</label>\n            <span class=\"form-hint\">Payments that are marked as \u2018Unidentified\u2019 or \u2018Transferred\u2019 (Unsolicited requests)</span>\n         </div>\n\n         <div class=\"govuk-radios__item\">\n            <input \n            id=\"ShortfallsandSurplus\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('SURPLUS_AND_SHORTFALL')\"\n            type=\"radio\"\n            value=\"SURPLUS_AND_SHORTFALL\" \n            data-aria-controls=\"ShortfallsandSurplus\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"ShortfallsandSurplus\">Under payment and Over payment</label>\n            <span class=\"form-hint\">Requests where balances are marked as Under payment/Over payment further case management.\n               E.g: Refund approval, Customer contact</span>\n         </div>\n         <div class=\"govuk-radios__item\">\n            <input \n            id=\"PaymentFailureEvent\"\n            class=\"govuk-radios__input\"\n            formControlName=\"selectedreport\"\n            name=\"selectedreport\"\n            (click)=\"validateDates('PAYMENT_FAILURE_EVENT')\"\n            type=\"radio\"\n            value=\"PAYMENT_FAILURE_EVENT\" \n            data-aria-controls=\"PaymentFailureEvent\"/>\n            <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"PaymentFailureEvent\">Payment failure event</label>\n            <span class=\"form-hint\">Failed payment transaction details</span>\n         </div>\n       </div>\n     </div>\n     <div  class=\"govuk-form-group\">\n      <div class=\"datefrom\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-from\">Date from</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-from\" name=\"date-from\" type=\"date\"  formControlName=\"startDate\" required/>\n      </div>\n\n      <div class=\"dateto\">\n      <label class=\"govuk-label govuk-radios__label govuk-label--m\" for=\"date-to\">Date to</label>\n      <input (change)=\"getSelectedFromDate()\" [max]=\"getToday()\" class=\"form-control\" id=\"date-to\" name=\"search\" type=\"date\" formControlName=\"endDate\" required/>\n      </div>\n     </div>\n   <p class=\"inline-error-message\" *ngIf=\"isStartDateLesthanEndDate || isDateRangeBetnWeek\">\n      <span *ngIf=\"isStartDateLesthanEndDate\">Please select 'Date From' less than or equal to 'Date To'</span>\n      <span *ngIf=\"isDateRangeBetnWeek\"> Please select the date range between 7 days</span>\n   </p>\n    <div class=\"btnsubmit\">\n     <button type=\"submit\" (click)=\"downloadReport()\" class=\"button\" [disabled]=\"!reportsForm.valid || isDownLoadButtondisabled || isStartDateLesthanEndDate || isDateRangeBetnWeek\">Download report</button>\n   </div>\n </form>\n    \n",
                     styles: [".govuk-radios__input:focus+.govuk-radios__label::before{border-width:4px;box-shadow:0 0 0 4px #ffaf00}.datefrom{width:50%;float:left}.dateto{width:50%;float:right}.govuk-label--m{font-size:large}.form-hint{padding-left:.7em}.header{margin-top:10px;margin-bottom:15px}.btnsubmit{margin-bottom:30px}.inline-error-message{color:#a71414;font-weight:700;margin-top:10px}"]
                 }] }
     ];