Feature/292 submission status page

front-end/src/app/reports/f3x/create-workflow/create-f3x-step1.component.html

@@ -69,7 +69,7 @@ <h3>Report type</h3>
               [inputId]="reportCode"
               name="report_code"
               [value]="reportCode"
-              label="{{ reportCode | label: f3xReportCodeCreationLabels }}"
+              label="{{ reportCode | label: f3xReportCodeDetailedLabels }}"
               formControlName="report_code"
             ></p-radioButton>
           </div>
@@ -121,7 +121,11 @@ <h3>Covering period</h3>
             name="coverage_from_date"
             formControlName="coverage_from_date"
           ></p-calendar>
-          <app-error-messages [form]="form" fieldName="coverage_from_date" [formSubmitted]="formSubmitted"></app-error-messages>
+          <app-error-messages
+            [form]="form"
+            fieldName="coverage_from_date"
+            [formSubmitted]="formSubmitted"
+          ></app-error-messages>
         </div>
       </div>
       <div class="col-6">
@@ -132,7 +136,11 @@ <h3>Covering period</h3>
             name="coverage_through_date"
             formControlName="coverage_through_date"
           ></p-calendar>
-          <app-error-messages [form]="form" fieldName="coverage_through_date" [formSubmitted]="formSubmitted"></app-error-messages>
+          <app-error-messages
+            [form]="form"
+            fieldName="coverage_through_date"
+            [formSubmitted]="formSubmitted"
+          ></app-error-messages>
         </div>
       </div>
     </div>

front-end/src/app/reports/f3x/create-workflow/create-f3x-step1.component.ts

@@ -12,21 +12,21 @@ import {
   monthlyElectionYearReportCodes,
   monthlyNonElectionYearReportCodes,
   quarterlyElectionYearReportCodes,
-  quarterlyNonElectionYearReportCodes
+  quarterlyNonElectionYearReportCodes,
 } from 'app/shared/models/f3x-summary.model';
 import { FecDatePipe } from 'app/shared/pipes/fec-date.pipe';
 import { F3xSummaryService } from 'app/shared/services/f3x-summary.service';
 import { ValidateService } from 'app/shared/services/validate.service';
-import { LabelList, LabelUtils, PrimeOptions, StatesCodeLabels } from 'app/shared/utils/label.utils';
+import { f3xReportCodeDetailedLabels, LabelUtils, PrimeOptions, StatesCodeLabels } from 'app/shared/utils/label.utils';
 import { selectCommitteeAccount } from 'app/store/committee-account.selectors';
 import { environment } from 'environments/environment';
 import { schema as f3xSchema } from 'fecfile-validate/fecfile_validate_js/dist/F3X';
 import { MessageService } from 'primeng/api';
 import { Subject, takeUntil } from 'rxjs';
+import { LabelList } from '../../../shared/utils/label.utils';
 
 @Component({
   selector: 'app-create-f3x-step1',
-  styleUrls: ['./create-f3x-step1.component.scss'],
   templateUrl: './create-f3x-step1.component.html',
 })
 export class CreateF3XStep1Component implements OnInit, OnDestroy {
@@ -47,40 +47,11 @@ export class CreateF3XStep1Component implements OnInit, OnDestroy {
 
   form: FormGroup = this.fb.group(this.validateService.getFormGroupFields(this.formProperties));
 
-  /**  This different label list is 'necessarry' because the labels in the wireframe are
-   * different between the list and the creation steps
-   * */
-  f3xReportCodeCreationLabels: LabelList = [
-    [F3xReportCodes.Q1, 'APRIL 15 QUARTERLY REPORT (Q1)'],
-    [F3xReportCodes.Q2, 'JULY 15 QUARTERLY REPORT (Q2)'],
-    [F3xReportCodes.Q3, 'OCTOBER 15 QUARTERLY REPORT(Q3)'],
-    [F3xReportCodes.YE, 'JANUARY 31 YEAR-END (YE)'],
-    [F3xReportCodes.TER, 'TERMINATION REPORT (TER)'],
-    [F3xReportCodes.MY, 'JULY 31 MID-YEAR REPORT (MY)'],
-    [F3xReportCodes.TwelveG, '12-DAY PRE-GENERAL (12G)'],
-    [F3xReportCodes.TwelveP, '12-DAY PRE-PRIMARY (12P)'],
-    [F3xReportCodes.TwelveR, '12-DAY PRE-RUNOFF (12R)'],
-    [F3xReportCodes.TwelveS, '12-DAY PRE-SPECIAL (12S)'],
-    [F3xReportCodes.TwelveC, '12-DAY PRE-CONVENTION (12C)'],
-    [F3xReportCodes.ThirtyG, '30-DAY POST-GENERAL (30G)'],
-    [F3xReportCodes.ThirtyR, '30-DAY POST-RUNOFF (30R)'],
-    [F3xReportCodes.ThirtyS, '30-DAY POST-SPECIAL (30S)'],
-    [F3xReportCodes.M2, 'FEBRUARY 20 MONTHLY REPORT (M2)'],
-    [F3xReportCodes.M3, 'MARCH 20 MONTHLY REPORT (M3)'],
-    [F3xReportCodes.M4, 'APRIL 20 MONTHLY REPORT (M4)'],
-    [F3xReportCodes.M5, 'MAY 20 MONTHLY REPORT (M5))'],
-    [F3xReportCodes.M6, 'JUNE 20 MONTHLY REPORT (M6)'],
-    [F3xReportCodes.M7, 'JULY 20 MONTHLY REPORT (M7)'],
-    [F3xReportCodes.M8, 'AUGUST 20 MONTHLY REPORT (M8)'],
-    [F3xReportCodes.M9, 'SEPTEMBER 20 MONTHLY REPORT (M9)'],
-    [F3xReportCodes.M10, 'OCTOBER 20 MONTHLY REPORT (M10)'],
-    [F3xReportCodes.M11, 'NOVEMBER 20 MONTHLY REPORT (M11)'],
-    [F3xReportCodes.M12, 'DECEMBER 20 MONTHLY REPORT (M12)'],
-  ];
-
   readonly F3xReportTypeCategories = F3xReportTypeCategories;
   private f3xCoverageDatesList: F3xCoverageDates[] | undefined;
 
+  public f3xReportCodeDetailedLabels: LabelList = f3xReportCodeDetailedLabels;
+
   constructor(
     private store: Store,
     private validateService: ValidateService,
@@ -90,7 +61,7 @@ export class CreateF3XStep1Component implements OnInit, OnDestroy {
     private messageService: MessageService,
     private activatedRoute: ActivatedRoute,
     protected router: Router
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     const report: F3xSummary = this.activatedRoute.snapshot.data['report'];
@@ -130,28 +101,29 @@ export class CreateF3XStep1Component implements OnInit, OnDestroy {
     this.f3xSummaryService.getF3xCoverageDates().subscribe((dates) => {
       this.f3xCoverageDatesList = dates;
     });
-    this.form.controls['coverage_from_date'].addValidators(
-      this.buildCoverageDatesValidator('coverage_from_date'));
+    this.form.controls['coverage_from_date'].addValidators(this.buildCoverageDatesValidator('coverage_from_date'));
     this.form.controls['coverage_through_date'].addValidators(
-      this.buildCoverageDatesValidator('coverage_through_date'));
+      this.buildCoverageDatesValidator('coverage_through_date')
+    );
 
     // Initialize validation tracking of current JSON schema and form data
     this.validateService.formValidatorSchema = f3xSchema;
     this.validateService.formValidatorForm = this.form;
   }
 
-  buildCoverageDatesValidator(valueFormControlName: string,): ValidatorFn {
+  buildCoverageDatesValidator(valueFormControlName: string): ValidatorFn {
     return (): ValidationErrors | null => {
       let result: ValidationErrors | null = null;
-      const formValue: Date = this.form?.get(valueFormControlName)?.value
+      const formValue: Date = this.form?.get(valueFormControlName)?.value;
       if (this.f3xCoverageDatesList && formValue) {
         const retval = this.f3xCoverageDatesList.find((f3xCoverageDate) => {
-          return (f3xCoverageDate &&
+          return (
+            f3xCoverageDate &&
             f3xCoverageDate.coverage_from_date &&
             f3xCoverageDate.coverage_through_date &&
-            (formValue >= f3xCoverageDate.coverage_from_date &&
-              formValue <= f3xCoverageDate.coverage_through_date)
-          )
+            formValue >= f3xCoverageDate.coverage_from_date &&
+            formValue <= f3xCoverageDate.coverage_through_date
+          );
         });
         result = this.getCoverageDatesValidator(retval);
       }
@@ -162,19 +134,18 @@ export class CreateF3XStep1Component implements OnInit, OnDestroy {
   getCoverageDatesValidator(f3xCoverageDates?: F3xCoverageDates) {
     let retval: ValidationErrors | null = null;
     if (f3xCoverageDates) {
-      const f3xReportCodeLabel = this.f3xReportCodeCreationLabels.find(
-        label => label[0] === f3xCoverageDates.report_code);
-      const reportCodeLabel = f3xReportCodeLabel ? f3xReportCodeLabel[1] ||
-        f3xCoverageDates.report_code?.valueOf : 'invalid name';
-      const coverageFromDate = this.fecDatePipe.transform(
-        f3xCoverageDates.coverage_from_date);
-      const coverageThroughDate = this.fecDatePipe.transform(
-        f3xCoverageDates.coverage_through_date);
+      const f3xReportCodeLabel = f3xReportCodeDetailedLabels.find((label) => label[0] === f3xCoverageDates.report_code);
+      const reportCodeLabel = f3xReportCodeLabel
+        ? f3xReportCodeLabel[1] || f3xCoverageDates.report_code?.valueOf
+        : 'invalid name';
+      const coverageFromDate = this.fecDatePipe.transform(f3xCoverageDates.coverage_from_date);
+      const coverageThroughDate = this.fecDatePipe.transform(f3xCoverageDates.coverage_through_date);
       retval = {};
       retval['invaliddate'] = {
-        msg: `You have entered coverage dates that overlap ` +
+        msg:
+          `You have entered coverage dates that overlap ` +
           `the coverage dates of the following report: ${reportCodeLabel} ` +
-          ` ${coverageFromDate} - ${coverageThroughDate}`
+          ` ${coverageFromDate} - ${coverageThroughDate}`,
       };
     }
     return retval;

front-end/src/app/reports/f3x/create-workflow/create-f3x-step2.component.ts

@@ -16,7 +16,6 @@ import { CommitteeAccount } from 'app/shared/models/committee-account.model';
 @Component({
   selector: 'app-create-f3x-step2',
   templateUrl: './create-f3x-step2.component.html',
-  styleUrls: ['./create-f3x-step2.component.scss'],
 })
 export class CreateF3xStep2Component implements OnInit, OnDestroy {
   formProperties: string[] = [

front-end/src/app/reports/f3x/submission-workflow/submit-f3x-status.component.html

@@ -0,0 +1,72 @@
+<div class="grid">
+  <div class="col-12">
+    <h1 class="super-header">Thank you for submitting your report. It is currently being processed.</h1>
+  </div>
+</div>
+<div class="grid">
+  <div class="col-4">
+    <div class="grid">
+      <div class="col-12">
+        <h5 class="no-vert-margins">YOUR FORM TYPE:</h5>
+        <h3 class="no-vert-margins">
+          {{ report.form_type | label: f3xFormTypeLabels }}
+        </h3>
+        <br />
+      </div>
+      <div class="col-12">
+        <h5 class="no-vert-margins">YOUR REPORT TYPE:</h5>
+        <h3 class="no-vert-margins">
+          {{ report.report_code | label: f3xReportCodeDetailedLabels }}
+        </h3>
+        <br />
+      </div>
+      <div class="col-12">
+        <h5 class="no-vert-margins">YOUR COVERAGE DATES:</h5>
+        <h3 class="no-vert-margins no-wrap">
+          {{ report.coverage_from_date | longDate }} — <wbr />
+          {{ report.coverage_through_date | longDate }}
+        </h3>
+        <br />
+      </div>
+      <div class="col-12">
+        <h5 class="no-vert-margins">CONFIRMATION EMAILS:</h5>
+        <h3 class="no-vert-margins">
+          {{ report.confirmation_email_1 }} <br />
+          {{ report.confirmation_email_2 }}
+        </h3>
+        <br />
+      </div>
+    </div>
+  </div>
+  <div class="col-8">
+    <img
+      _ngcontent-kve-c61=""
+      src="assets/img/image-f3x-pages-spread.png"
+      draggable="false"
+      alt="Form 3X pages spread out aesthetically"
+    />
+  </div>
+</div>
+<div class="grid">
+  <div class="col-12">
+    <p>
+      The FEC will send a report status message to the confirmation emails you provided during the submission process.
+      If any problems are encountered during the process, Web Upload will terminate the upload session and relay the
+      specifics of the error.
+    </p>
+  </div>
+</div>
+
+<p-divider></p-divider>
+<div class="grid">
+  <div class="col-4"></div>
+  <div class="col-4">
+    <button
+      pButton
+      pRipple
+      label="Close & return to manage reports"
+      class="p-button-secondary button-max-width"
+      (click)="backToReports()"
+    ></button>
+  </div>
+</div>

front-end/src/app/reports/f3x/submission-workflow/submit-f3x-status.component.spec.ts

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { selectReportCodeLabelList } from 'app/store/label-lookup.selectors';
+import { ActivatedRoute } from '@angular/router';
+import { provideMockStore } from '@ngrx/store/testing';
+import { F3xSummary } from 'app/shared/models/f3x-summary.model';
+import { SharedModule } from 'app/shared/shared.module';
+import { CardModule } from 'primeng/card';
+import { DividerModule } from 'primeng/divider';
+import { ReportSubmissionStatusComponent } from './submit-f3x-status.component';
+
+describe('ReportSummaryComponent', () => {
+  let component: ReportSubmissionStatusComponent;
+  let fixture: ComponentFixture<ReportSubmissionStatusComponent>;
+  const f3x: F3xSummary = F3xSummary.fromJSON({
+    id: 999,
+    coverage_from_date: '2022-05-25',
+    form_type: 'F3XN',
+    report_code: 'Q1',
+  });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SharedModule, DividerModule, CardModule, RouterTestingModule.withRoutes([])],
+      declarations: [ReportSubmissionStatusComponent],
+      providers: [
+        provideMockStore({
+          selectors: [{ selector: selectReportCodeLabelList, value: {} }],
+        }),
+        {
+          provide: ActivatedRoute,
+          useValue: {
+            snapshot: {
+              data: {
+                report: f3x,
+              },
+            },
+          },
+        },
+      ],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportSubmissionStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

front-end/src/app/reports/f3x/submission-workflow/submit-f3x-status.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { selectReportCodeLabelList } from 'app/store/label-lookup.selectors';
+import { F3xSummary } from 'app/shared/models/f3x-summary.model';
+import { ReportCodeLabelList } from '../../../shared/utils/reportCodeLabels.utils';
+import { f3xReportCodeDetailedLabels, LabelList } from '../../../shared/utils/label.utils';
+import { F3xFormTypeLabels } from '../../../shared/models/f3x-summary.model';
+
+@Component({
+  selector: 'app-report-summary',
+  templateUrl: './submit-f3x-status.component.html',
+})
+export class ReportSubmissionStatusComponent implements OnInit {
+  report: F3xSummary = new F3xSummary();
+  reportCodeLabelList$: Observable<ReportCodeLabelList> = new Observable<ReportCodeLabelList>();
+  f3xFormTypeLabels: LabelList = F3xFormTypeLabels;
+  f3xReportCodeDetailedLabels: LabelList = f3xReportCodeDetailedLabels;
+
+  constructor(private store: Store, private activatedRoute: ActivatedRoute, public router: Router) {}
+
+  ngOnInit(): void {
+    this.reportCodeLabelList$ = this.store.select<ReportCodeLabelList>(selectReportCodeLabelList);
+    this.report = this.activatedRoute.snapshot.data['report'];
+  }
+
+  public backToReports() {
+    this.router.navigateByUrl('/reports');
+  }
+}