feat: changed switch component to be a FormsModule independen switchi…

…ng component

src/app/core/store/customer/recurring-orders/recurring-orders.effects.ts

@@ -6,7 +6,6 @@ import { concatMap, map, mergeMap, switchMap } from 'rxjs/operators';
 import { RecurringOrdersService } from 'ish-core/services/recurring-orders/recurring-orders.service';
 import { displaySuccessMessage } from 'ish-core/store/core/messages';
 import { selectQueryParam, selectRouteParam } from 'ish-core/store/core/router';
-import { log } from 'ish-core/utils/dev/operators';
 import { mapErrorToAction, mapToPayload, mapToPayloadProperty, whenTruthy } from 'ish-core/utils/operators';
 
 import { recurringOrdersActions, recurringOrdersApiActions } from './recurring-orders.actions';
@@ -62,7 +61,6 @@ export class RecurringOrdersEffects {
       whenTruthy(),
       concatLatestFrom(payload => this.store.pipe(select(getRecurringOrder(payload.recurringOrderId)))),
       concatLatestFrom(() => this.store.pipe(select(selectQueryParam('context')))),
-      log('THE SWITCH COMPONENT NEEDS FIXING'),
       mergeMap(([[payload, recurringOrder], context]) => {
         if (payload.active !== recurringOrder.active) {
           return this.recurringOrdersService

src/app/pages/account-recurring-order/account-recurring-order-page.component.html

@@ -86,12 +86,9 @@ <h1>{{ 'account.recurring_order.heading' | translate }}</h1>
             <ish-switch
               [id]="recurringOrder.id"
               [active]="recurringOrder.active"
-              (switchActiveStatus)="switchActiveStatus($event)"
-              [label]="
-                recurringOrder.active
-                  ? ('account.recurring_order.details.active.text' | translate)
-                  : ('account.recurring_order.details.inactive.text' | translate)
-              "
+              [labelActive]="'account.recurring_order.details.active.text' | translate"
+              [labelInactive]="'account.recurring_order.details.inactive.text' | translate"
+              (toggleSwitch)="switchActiveStatus($event)"
             />
           </ng-template>
         </dd>

src/app/pages/account-recurring-order/account-recurring-order-page.component.ts

@@ -30,7 +30,7 @@ export class AccountRecurringOrderPageComponent implements OnInit {
     });
   }
 
-  switchActiveStatus(recurringOrder: { id: string; active: boolean }) {
+  switchActiveStatus(recurringOrder: { active: boolean; id: string }) {
     this.accountFacade.setActiveRecurringOrder(recurringOrder.id, recurringOrder.active);
   }
 }

src/app/pages/account-recurring-orders/recurring-order-list/recurring-order-list.component.html

@@ -122,7 +122,7 @@
           *ngIf="!recurringOrder.expired"
           [id]="recurringOrder.id"
           [active]="recurringOrder.active"
-          (switchActiveStatus)="switchActiveStatus($event)"
+          (toggleSwitch)="switchActiveStatus($event)"
         />
         <button
           type="button"

src/app/pages/account-recurring-orders/recurring-order-list/recurring-order-list.component.ts

@@ -33,7 +33,7 @@ export class RecurringOrderListComponent {
   }
 
   /** Emits id and active state to update the active state for the recurring order */
-  switchActiveStatus(recurringOrder: { id: string; active: boolean }) {
+  switchActiveStatus(recurringOrder: { active: boolean; id: string }) {
     this.accountFacade.setActiveRecurringOrder(recurringOrder.id, recurringOrder.active);
   }
 

src/app/shared/components/common/switch/switch.component.html

@@ -1,12 +1,13 @@
 <span class="custom-control custom-switch d-inline">
   <input
-    [formControl]="activeSwitch"
     type="checkbox"
     role="switch"
     class="custom-control-input"
+    autocomplete="off"
     [id]="id"
-    [ngModel]="active"
-    (ngModelChange)="switchActive(id, $event)"
+    [checked]="active"
+    [disabled]="disabled"
+    (click)="toggleState()"
   />
-  <label class="custom-control-label" [for]="id">{{ label }}</label>
+  <label class="custom-control-label" [for]="id">{{ activeState ? labelActive : labelInactive }}</label>
 </span>

src/app/shared/components/common/switch/switch.component.scss

@@ -1,15 +1,23 @@
 @import 'variables';
 
 .custom-control-input ~ .custom-control-label::before {
-  background-color: #999;
-  border-color: #999;
+  background-color: $text-color-quaternary;
+  border-color: $text-color-quaternary;
+}
+
+.custom-control-input:disabled ~ .custom-control-label::before {
+  background-color: $text-color-quinary;
 }
 
 .custom-control-input:checked ~ .custom-control-label::before {
-  background-color: $color-corporate;
-  border-color: $color-corporate;
+  background-color: $CORPORATE-PRIMARY;
+  border-color: $CORPORATE-PRIMARY;
+}
+
+.custom-control-input:checked:disabled ~ .custom-control-label::before {
+  background-color: $CORPORATE-LIGHT;
 }
 
 .custom-switch .custom-control-label::after {
-  background-color: #fff;
+  background-color: $white;
 }

src/app/shared/components/common/switch/switch.component.ts

@@ -1,5 +1,5 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { v4 as uuid } from 'uuid';
 
 @Component({
   selector: 'ish-switch',
@@ -13,21 +13,29 @@ import { FormControl } from '@angular/forms';
  *
  * @example
  * <ish-switch
- *   id="{{ recurringOrder.id }}"
+ *   [id]="recurringOrder.id"
  *   [active]="recurringOrder.active"
- *   (switchActiveStatus)="switchActiveStatus($event)"
+ *   (toggleSwitch)="switchActiveStatus($event)"
  * />
  */
-export class SwitchComponent {
-  @Input({ required: true }) id: string;
+export class SwitchComponent implements OnInit {
+  // id is not required but can be used to identify the switch context
+  @Input() id: string = uuid();
   @Input() active = false;
-  @Input() label = '';
+  @Input() labelActive = '';
+  @Input() labelInactive = '';
+  @Input() disabled = false;
 
-  @Output() switchActiveStatus = new EventEmitter<{ id: string; active: boolean }>();
+  @Output() toggleSwitch = new EventEmitter<{ active: boolean; id: string }>();
 
-  activeSwitch: FormControl = new FormControl();
+  activeState: boolean;
 
-  switchActive(id: string, active: boolean) {
-    this.switchActiveStatus.emit({ id, active });
+  ngOnInit() {
+    this.activeState = this.active;
+  }
+
+  toggleState() {
+    this.activeState = !this.activeState;
+    this.toggleSwitch.emit({ active: this.activeState, id: this.id });
   }
 }