DRAFT: Mes radio refactor

src/app/pages/communication/communication.page.html

@@ -14,8 +14,7 @@
       (exitSamUsed)="onUsedExitSam()"
       (setupLeaveSubscription)="setupEscapeSAMLeaveSubscription()"
       (setupResumeSubscription)="setupEscapeSAMResumeSubscription()"
-      (onExitSAMActivatedChanged)="isSamActivatedChanged($event)">
-      {{ 'communication.title' | translate }} - {{pageState.candidateUntitledName$ | async}}
+      (onExitSAMActivatedChanged)="isSamActivatedChanged($event)">{{ 'communication.title' | translate }} - {{ pageState.candidateUntitledName$ | async }}
     </test-flow-header>
   </ion-toolbar>
 </ion-header>
@@ -53,35 +52,41 @@
           <ion-col>
             <div class="communication-text-container">
               <ion-text addOrRemoveLangCy class="des-header-style-4" id="comms-instruction-header"
-                >{{ 'communication.instructionHeader' | translate }}</ion-text
-              >
+              >{{ 'communication.instructionHeader' | translate }}
+              </ion-text>
             </div>
             <div class="validation-bar"></div>
             <ion-col>
-              <provided-email
-                (providedEmailRadioSelect)="dispatchCandidateChoseProvidedEmail()"
-                [formGroup]="form"
-                [isProvidedEmailAddressChosen]="isProvidedEmailSelected()"
-                [providedEmailAddress]="pageState.candidateProvidedEmail$ | async"
-                [shouldRender]="!!(pageState.candidateProvidedEmail$ | async)"
-              >
-              </provided-email>
+              <ion-radio-group
+                class="radio-group-wrapper-column"
+                (ionChange)="communicationMethodChanged($event.target.value)"
+                [value]="defaultRadioValue">
+                <provided-email
+                  (providedEmailRadioSelect)="dispatchCandidateChoseProvidedEmail()"
+                  [formGroup]="form"
+                  [isProvidedEmailAddressChosen]="isProvidedEmailSelected()"
+                  [providedEmailAddress]="pageState.candidateProvidedEmail$ | async"
+                  [shouldRender]="!!(pageState.candidateProvidedEmail$ | async)"
+                >
+                </provided-email>
 
-              <new-email
-                (newEmailRadioSelect)="conditionalDispatchCandidateChoseNewEmail()"
-                (newEmailTextChange)="dispatchCandidateChoseNewEmail($event)"
-                [formGroup]="form"
-                [isNewEmailAddressChosen]="isNewEmailSelected()"
-              >
-              </new-email>
+                <new-email
+                  (newEmailRadioSelect)="conditionalDispatchCandidateChoseNewEmail()"
+                  (newEmailTextChange)="dispatchCandidateChoseNewEmail($event)"
+                  [formGroup]="form"
+                  [isNewEmailAddressChosen]="isNewEmailSelected()"
+                >
+                </new-email>
+
+                <postal-address
+                  (postalRadioSelect)="dispatchCandidateChosePost()"
+                  [formGroup]="form"
+                  [isPostalAddressChosen]="isPostSelected()"
+                  [postalAddress]="pageState.candidateAddress$ | async"
+                >
+                </postal-address>
+              </ion-radio-group>
 
-              <postal-address
-                (postalRadioSelect)="dispatchCandidateChosePost()"
-                [formGroup]="form"
-                [isPostalAddressChosen]="isPostSelected()"
-                [postalAddress]="pageState.candidateAddress$ | async"
-              >
-              </postal-address>
 
               <ion-row class="validation-message-row">
                 <div class="validation-text"></div>

src/app/pages/communication/communication.page.ts

@@ -75,6 +75,7 @@ export class CommunicationPage extends PracticeableBasePageComponent implements
   static readonly post: CommunicationMethod = 'Post';
   static readonly notProvided: CommunicationMethod = 'Not provided';
 
+  defaultRadioValue: string = CommunicationPage.notProvided;
   form: UntypedFormGroup;
   subscription: Subscription;
   emailType: string;
@@ -263,6 +264,9 @@ export class CommunicationPage extends PracticeableBasePageComponent implements
   restoreRadiosFromState() {
     if (this.communicationType === CommunicationPage.email) {
       this.assertEmailType();
+      this.defaultRadioValue = this.emailType;
+    } else {
+      this.defaultRadioValue = CommunicationPage.post;
     }
   }
 
@@ -286,11 +290,13 @@ export class CommunicationPage extends PracticeableBasePageComponent implements
       this.emailType = CommunicationPage.providedEmail;
       this.form.controls.radioCtrl.setValue(true);
       this.dispatchCandidateChoseProvidedEmail();
+      this.defaultRadioValue = CommunicationPage.providedEmail;
     }
 
     if (!this.candidateProvidedEmail) {
       this.emailType = CommunicationPage.updatedEmail;
       this.form.controls.radioCtrl.setValue(true);
+      this.defaultRadioValue = CommunicationPage.updatedEmail;
     }
   }
 
@@ -330,4 +336,18 @@ export class CommunicationPage extends PracticeableBasePageComponent implements
       return false;
     }
   }
+
+  communicationMethodChanged(value: string): void {
+    switch (value) {
+      case CommunicationPage.providedEmail:
+        this.dispatchCandidateChoseProvidedEmail();
+        break;
+      case CommunicationPage.updatedEmail:
+        this.conditionalDispatchCandidateChoseNewEmail();
+        break;
+      case CommunicationPage.post:
+        this.dispatchCandidateChosePost();
+        break;
+    }
+  }
 }

src/app/pages/communication/components/new-email/new-email.html

@@ -1,18 +1,16 @@
 <ion-row class="communication-option" [formGroup]="formGroup">
   <div class="validation-bar communication-validation-bar" [class.ng-invalid]="invalid"></div>
-  <input
+  <ion-radio
+    class="gds-refactor-radio"
     type="radio"
     id="newEmail"
-    class="gds-radio-button"
-    formControlName="radioCtrl"
-    name="radioCtrl"
-    (click)="newEmailRadioSelected()"
-    [checked]="isNewEmailAddressChosen"
-    [value]="isNewEmailAddressChosen"
-  />
-  <label addOrRemoveLangCy for="newEmail" class="radio-label" id="new-email-label">
-    {{ 'communication.newEmailLabel' | translate }}
-  </label>
+    labelPlacement="end"
+    [value]=CommunicationPage.updatedEmail
+  >
+    <label addOrRemoveLangCy class="radio-label" id="new-email-label">
+      {{ 'communication.newEmailLabel' | translate }}
+    </label>
+  </ion-radio>
 </ion-row>
 
 <div class="ion-no-padding" [hidden]="!isNewEmailAddressChosen">

src/app/pages/communication/components/new-email/new-email.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { CommunicationPage } from '@pages/communication/communication.page';
 
 @Component({
   selector: 'new-email',
@@ -59,4 +60,6 @@ export class NewEmailComponent implements OnChanges {
   get invalid(): boolean {
     return !this.formControl.valid && this.formControl.dirty;
   }
+
+  protected readonly CommunicationPage = CommunicationPage;
 }

src/app/pages/communication/components/postal-address/postal-address.html

@@ -1,18 +1,15 @@
-<ion-row class="communication-option">
+¬<ion-row class="communication-option">
   <div class="validation-bar communication-validation-bar"></div>
-  <input
-    type="radio"
+  <ion-radio
+    class="gds-refactor-radio"
     id="postalAddress"
-    class="gds-radio-button"
-    name="radioCtrl"
-    (click)="postalRadioSelected()"
-    [checked]="isPostalAddressChosen"
-  />
-  <label addOrRemoveLangCy for="postalAddress" class="radio-label" id="by-post-label">
-    {{ 'communication.byPostLabel' | translate }}
-  </label>
+    labelPlacement="end"
+    [value]=CommunicationPage.post>
+    <label addOrRemoveLangCy class="radio-label" id="by-post-label">
+      {{ 'communication.byPostLabel' | translate }}
+    </label>
+  </ion-radio>
 </ion-row>
-
 <ion-row *ngIf="isPostalAddressChosen" class="communication-box">
   <ion-col size="6"> </ion-col>
   <ion-col>

src/app/pages/communication/components/postal-address/postal-address.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { Address } from '@dvsa/mes-test-schema/categories/common';
+import { CommunicationPage } from '@pages/communication/communication.page';
 
 @Component({
   selector: 'postal-address',
@@ -20,10 +21,6 @@ export class PostalAddressComponent {
   @Output()
   postalRadioSelect = new EventEmitter<void>();
 
-  postalRadioSelected() {
-    this.postalRadioSelect.emit();
-  }
-
   ngOnInit() {
     this.postalAddress = this.formatAddress(this.postalAddress);
   }
@@ -34,4 +31,6 @@ export class PostalAddressComponent {
     Object.keys(formattedAddress).forEach((res) => (formattedAddress[res] = formattedAddress[res].replace(regex, 'x')));
     return formattedAddress;
   }
+
+  protected readonly CommunicationPage = CommunicationPage;
 }

src/app/pages/communication/components/provided-email/provided-email.html

@@ -1,19 +1,17 @@
 <div *ngIf="shouldRender" [formGroup]="formGroup">
   <ion-row class="communication-option">
     <div class="validation-bar communication-validation-bar"></div>
-    <input
+    <ion-radio
       type="radio"
       id="providedEmail"
-      formControlName="radioCtrl"
-      name="radioCtrl"
-      class="gds-radio-button communication-radio"
-      (click)="providedEmailRadioSelected()"
-      [checked]="isProvidedEmailAddressChosen"
-      [value]="isProvidedEmailAddressChosen"
-    />
-    <label addOrRemoveLangCy for="providedEmail" class="radio-label" id="by-email-label">
-      {{ 'communication.byEmailLabel' | translate }}
-    </label>
+      class="communication-radio gds-refactor-radio"
+      labelPlacement="end"
+      [value]=CommunicationPage.providedEmail
+    >
+      <label addOrRemoveLangCy class="radio-label" id="by-email-label">
+        {{ 'communication.byEmailLabel' | translate }}
+      </label>
+    </ion-radio>
   </ion-row>
   <ion-row *ngIf="isProvidedEmailAddressChosen" class="communication-box">
     <ion-col size="6"></ion-col>

src/app/pages/communication/components/provided-email/provided-email.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup, Validators } from '@angular/forms';
+import { CommunicationPage } from '@pages/communication/communication.page';
 
 @Component({
   selector: 'provided-email',
@@ -38,4 +39,6 @@ export class ProvidedEmailComponent {
   providedEmailRadioSelected() {
     this.providedEmailRadioSelect.emit(ProvidedEmailComponent.providedEmail);
   }
+
+  protected readonly CommunicationPage = CommunicationPage;
 }

src/app/pages/communication/components/valid-certificate/valid-certificate.html

@@ -10,32 +10,36 @@
   <ion-col class="ion-align-self-center ion-padding-start">
     <ion-row class="spacing-row"></ion-row>
     <ion-row>
-      <ion-col class="ion-align-self-center" size="48">
-        <input
-          type="radio"
-          id="valid-certificate-yes"
-          class="gds-radio-button"
-          name="validCertificate"
-          formControlName="validCertificate"
-          [value]="true"
-          [checked]="validCertificate === true"
-          (change)="validCertificateChanged($event.target.id)"
-        />
-        <label for="valid-certificate-yes" class="radio-label" id="valid-certificate-yes-label">Yes</label>
-      </ion-col>
-      <ion-col class="ion-align-self-center">
-        <input
-          type="radio"
-          id="valid-certificate-no"
-          class="gds-radio-button"
-          name="validCertificate"
-          formControlName="validCertificate"
-          [value]="false"
-          [checked]="validCertificate === false"
-          (change)="validCertificateChanged($event.target.id)"
-        />
-        <label for="valid-certificate-no" class="radio-label" id="valid-certificate-no-label">No</label>
-      </ion-col>
+      <ion-radio-group
+        class="display-flex radio-group-width"
+        formControlName="validCertificate"
+        (ionChange)="validCertificateChanged($event.detail.value)">
+        <ion-col size="40">
+          <ion-radio
+            class="gds-refactor-radio"
+            [class.ng-invalid]="invalid"
+            id="valid-certificate-yes"
+            labelPlacement="end"
+            [value]="true">
+            <label class="radio-label" id="valid-certificate-yes-label">
+              Yes
+            </label>
+          </ion-radio>
+        </ion-col>
+        <ion-col size="16"></ion-col>
+        <ion-col>
+          <ion-radio
+            class="gds-refactor-radio"
+            [class.ng-invalid]="invalid"
+            id="valid-certificate-no"
+            [value]="false"
+            labelPlacement="end">
+            <label class="radio-label" id="valid-certificate-no-label">
+              No
+            </label>
+          </ion-radio>
+        </ion-col>
+      </ion-radio-group>
     </ion-row>
     <ion-row class="validation-message-row ion-align-items-center">
       <div class="validation-text" id="valid-certificate-validation-text" [class.ng-invalid]="invalid">

src/app/pages/communication/components/valid-certificate/valid-certificate.ts

@@ -15,7 +15,7 @@ export class ValidCertificateComponent implements OnChanges {
   @Output()
   validCertificateChange = new EventEmitter<boolean>();
 
-  private formControl: UntypedFormControl;
+  protected formControl: UntypedFormControl;
   private formField = 'validCertificate';
 
   ngOnChanges(): void {
@@ -29,8 +29,8 @@ export class ValidCertificateComponent implements OnChanges {
     }
   }
 
-  validCertificateChanged(validCertificate: string): void {
-    this.validCertificateChange.emit(validCertificate === 'valid-certificate-yes');
+  validCertificateChanged(validCertificate: boolean): void {
+    this.validCertificateChange.emit(validCertificate);
   }
 
   get invalid(): boolean {