From 643810e3e8e824ddd814ee8589ff6d3ae60ca284 Mon Sep 17 00:00:00 2001
From: Sylvain Jermini <sylvain.jermini@syjer.com>
Date: Sun, 16 Jun 2019 13:46:07 +0200
Subject: [PATCH] #2 remove use of NgbButtonsModule

---
 src/app/app.module.ts                          |  5 ++---
 .../overview/overview.component.html           | 18 +++++++++---------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 31b53cf9..a8c2d7b9 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,7 +15,7 @@ import { faCalendarAlt, faCalendarPlus, faCalendarCheck, faCompass, faClock, faE
 import { faGoogle, faPaypal, faStripe } from '@fortawesome/free-brands-svg-icons'
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-import { NgbTooltipModule, NgbButtonsModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { BookingComponent } from './reservation/booking/booking.component';
 import { OverviewComponent } from './reservation/overview/overview.component';
@@ -97,8 +97,7 @@ export function HttpLoaderFactory(http: HttpClient) {
           deps: [HttpClient]
       }
     }),
-    NgbTooltipModule,
-    NgbButtonsModule
+    NgbTooltipModule
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/reservation/overview/overview.component.html b/src/app/reservation/overview/overview.component.html
index 86142ea3..7ae21850 100644
--- a/src/app/reservation/overview/overview.component.html
+++ b/src/app/reservation/overview/overview.component.html
@@ -17,18 +17,18 @@ <h2 translate="reservation-page.title"></h2>
       <div class="page-header wMarginTop"><h2 translate="reservation-page.payment"></h2></div>
 
       <div *ngIf="paymentMethodsCount(event) > 1">
-          <div class="btn-group btn-group-toggle payment-method-selector wMarginBottom" ngbRadioGroup formControlName="selectedPaymentMethod">
-            <label ngbButtonLabel class="btn btn-outline-dark" *ngIf="event.activePaymentMethods['CREDIT_CARD']">
-              <input ngbButton type="radio" [value]="'CREDIT_CARD'"><fa-icon [icon]="['fas', 'credit-card']"></fa-icon> {{'reservation-page.credit-card'|translate}}
+          <div class="btn-group btn-group-toggle payment-method-selector wMarginBottom">
+            <label  class="btn btn-outline-dark" [ngClass]="{'active': overviewForm.value.selectedPaymentMethod === 'CREDIT_CARD'}" *ngIf="event.activePaymentMethods['CREDIT_CARD']">
+              <input type="radio" formControlName="selectedPaymentMethod" [value]="'CREDIT_CARD'"><fa-icon [icon]="['fas', 'credit-card']"></fa-icon> {{'reservation-page.credit-card'|translate}}
             </label>
-            <label ngbButtonLabel class="btn btn-outline-dark" *ngIf="event.activePaymentMethods['PAYPAL']">
-              <input ngbButton type="radio" [value]="'PAYPAL'"><fa-icon [icon]="['fab', 'paypal']"></fa-icon> {{'reservation-page.paypal'|translate}}
+            <label class="btn btn-outline-dark" [ngClass]="{'active': overviewForm.value.selectedPaymentMethod === 'PAYPAL'}" *ngIf="event.activePaymentMethods['PAYPAL']">
+              <input type="radio" formControlName="selectedPaymentMethod" [value]="'PAYPAL'"><fa-icon [icon]="['fab', 'paypal']"></fa-icon> {{'reservation-page.paypal'|translate}}
             </label>
-            <label ngbButtonLabel class="btn btn-outline-dark" *ngIf="event.activePaymentMethods['BANK_TRANSFER']">
-              <input ngbButton type="radio" [value]="'BANK_TRANSFER'"><fa-icon [icon]="['fas', 'exchange-alt']"></fa-icon> {{'reservation-page.offline'|translate}}
+            <label  class="btn btn-outline-dark" [ngClass]="{'active': overviewForm.value.selectedPaymentMethod === 'BANK_TRANSFER'}" *ngIf="event.activePaymentMethods['BANK_TRANSFER']">
+              <input type="radio" formControlName="selectedPaymentMethod" [value]="'BANK_TRANSFER'"><fa-icon [icon]="['fas', 'exchange-alt']"></fa-icon> {{'reservation-page.offline'|translate}}
             </label>
-            <label ngbButtonLabel class="btn btn-outline-dark" *ngIf="event.activePaymentMethods['ON_SITE']">
-              <input ngbButton type="radio" [value]="'ON_SITE'"><fa-icon [icon]="['fas', 'money-bill']"  size="sm"></fa-icon> {{'reservation-page.on-site'|translate}}
+            <label  class="btn btn-outline-dark" [ngClass]="{'active': overviewForm.value.selectedPaymentMethod === 'ON_SITE'}" *ngIf="event.activePaymentMethods['ON_SITE']">
+              <input type="radio" formControlName="selectedPaymentMethod" [value]="'ON_SITE'"><fa-icon [icon]="['fas', 'money-bill']"  size="sm"></fa-icon> {{'reservation-page.on-site'|translate}}
             </label>
           </div>
       </div>