Feature/add feature toggle for new calculation engine (#649)

* Add feature toggle for new calculation engine

* Update changelog

apps/client/src/app/pages/account/account-page.component.ts

@@ -192,6 +192,24 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onNewCalculationChange(aEvent: MatSlideToggleChange) {
+    this.dataService
+      .putUserSetting({ isNewCalculationEngine: aEvent.checked })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
+  }
+
   public onRedeemCoupon() {
     let couponCode = prompt('Please enter your coupon code:');
     couponCode = couponCode?.trim();

apps/client/src/app/pages/account/account-page.html

@@ -135,6 +135,23 @@
               ></mat-slide-toggle>
             </div>
           </div>
+          <div
+            *ngIf="user?.subscription"
+            class="align-items-center d-flex mt-4 py-1"
+          >
+            <div class="pr-1 w-50">
+              <div i18n>New Calculation Engine</div>
+              <div class="hint-text text-muted" i18n>Experimental</div>
+            </div>
+            <div class="pl-1 w-50">
+              <mat-slide-toggle
+                color="primary"
+                [checked]="user.settings.isNewCalculationEngine"
+                [disabled]="!hasPermissionToUpdateUserSettings"
+                (change)="onNewCalculationChange($event)"
+              ></mat-slide-toggle>
+            </div>
+          </div>
         </mat-card-content>
       </mat-card>
     </div>