New version

config.xml

@@ -2,7 +2,7 @@
 <widget android-versionCode="11500" id="com.allotesteurs.app" version="1.1.5.0" xmlns="http://www.w3.org/ns/widgets" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>Allo Testeurs</name>
     <description>Découvrir les bon plans à Kénitra et ailleurs!</description>
-    <author email="contact@allo-testeurs.com" href="https://www.allo-testeurs.com">Allo Testeurs Agency</author>
+    <author email="nabil.sadki@gmail.com" href="https://www.allo-testeurs.com">Nabil Sadki</author>
     <content src="index.html" />
     <access origin="*" />
     <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
@@ -92,20 +92,22 @@
     <preference name="DisallowOverscroll" value="true" />
     <preference name="android-minSdkVersion" value="19" />
     <preference name="BackupWebStorage" value="none" />
-    <preference name="fullscreen" value="true" />
-    <preference name="SplashScreenDelay" value="0" />
+    <preference name="fullscreen" value="false" />
+    <preference name="SplashScreenDelay" value="6000" />
     <preference name="FadeSplashScreen" value="true" />
-    <preference name="ShowSplashScreen" value="false" />
-    <preference name="ShowSplashScreenSpinner" value="false" />
+    <preference name="ShowSplashScreen" value="true" />
+    <preference name="ShowSplashScreenSpinner" value="true" />
     <preference name="FadeSplashScreenDuration" value="600" />
     <preference name="SplashScreenBackgroundColor" value="0xFFFFFFFF" />
     <preference name="SplashScreen" value="screen" />
     <preference name="SplashMaintainAspectRatio" value="true" />
     <preference name="SplashShowOnlyFirstTime" value="false" />
+    <preference name="StatusBarBackgroundColor" value="#f93129" />
+    <preference name="StatusBarStyle" value="lightcontent" />
+    <preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="AIzaSyBqWOnztK-6EKX3FeURqrLK5af_bV3Pz5k" />
     <feature name="StatusBar">
         <param name="ios-package" onload="true" value="CDVStatusBar" />
     </feature>
-    <engine name="android" spec="^8.1.0" />
     <allow-navigation href="http://localhost:8101" sessionid="600eac0d" />
     <plugin name="cordova-sqlite-storage" spec="^3.2.0" />
     <plugin name="cordova-plugin-advanced-http" spec="^2.1.1">
@@ -135,4 +137,5 @@
     </plugin>
     <plugin name="cordova-plugin-network-information" spec="~2.0.2" />
     <plugin name="cordova-plugin-qrscanner" spec="~3.0.1" />
+    <allow-navigation href="http://localhost:8100" sessionid="4d54dadf" />
 </widget>

package.json

@@ -21,14 +21,16 @@
     "@angular/platform-browser": "^7.2.2",
     "@angular/platform-browser-dynamic": "^7.2.2",
     "@angular/router": "^7.2.2",
+    "@ionic-native/admob-pro": "^5.22.0",
     "@ionic-native/app-version": "^5.11.0",
-    "@ionic-native/background-geolocation": "^5.8.0",
+    "@ionic-native/background-geolocation": "^5.24.0",
     "@ionic-native/background-mode": "^5.11.0",
     "@ionic-native/camera": "^5.19.0",
-    "@ionic-native/core": "^5.0.0",
+    "@ionic-native/core": "^5.22.0-beta-1",
     "@ionic-native/diagnostic": "^5.8.0",
     "@ionic-native/file": "^5.14.0",
     "@ionic-native/file-path": "^5.14.0",
+    "@ionic-native/google-maps": "^5.0.0-beta.27",
     "@ionic-native/google-plus": "^5.0.0",
     "@ionic-native/http": "^5.8.0",
     "@ionic-native/ionic-webview": "^5.14.0",
@@ -40,30 +42,42 @@
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic/angular": "^4.1.0",
     "@ionic/storage": "^2.2.0",
+    "@mauron85/cordova-plugin-background-geolocation": "^3.1.0",
     "cordova-android": "^8.1.0",
+    "cordova-browser": "6.0.0",
+    "cordova-plugin-admobpro": "^2.49.0",
     "cordova-plugin-advanced-http": "^2.1.1",
+    "cordova-plugin-androidx": "^1.0.2",
+    "cordova-plugin-androidx-adapter": "^1.1.0",
     "cordova-plugin-app-version": "^0.1.9",
     "cordova-plugin-background-mode": "git+https://github.com/sercatven/cordova-plugin-background-mode.git",
     "cordova-plugin-badge": "^0.8.8",
     "cordova-plugin-camera": "^4.1.0",
+    "cordova-plugin-extension": "^1.5.4",
     "cordova-plugin-file": "^6.0.1",
     "cordova-plugin-google-analytics": "^1.8.6",
+    "cordova-plugin-googlemaps": "git+https://github.com/mapsplugin/cordova-plugin-googlemaps.git#multiple_maps",
     "cordova-plugin-googleplus": "^8.0.0",
     "cordova-plugin-local-notification": "^0.9.0-beta.2",
     "cordova-plugin-play-games-services": "^1.1.2",
     "cordova-plugin-qrscanner": "^3.0.1",
     "cordova-plugin-request-location-accuracy": "^2.3.0",
+    "cordova-res": "^0.14.0",
     "cordova-sqlite-storage": "^3.2.0",
     "cordova.plugins.diagnostic": "^5.0.0",
     "core-js": "^2.6.11",
     "firebase": "^6.6.1",
     "g": "^2.0.1",
+    "hammerjs": "^2.0.8",
+    "ionic-admob": "^0.19.8",
     "ionic-image-loader": "^6.3.3",
     "leaflet": "^1.5.1",
     "leaflet.markercluster": "^1.4.1",
     "path": "^0.12.7",
     "rxjs": "~6.5.1",
+    "rxjs-compat": "^6.5.4",
     "sweetalert": "^2.1.2",
+    "swiper": "^5.3.8",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.29"
   },
@@ -126,6 +140,8 @@
       "cordova-plugin-app-version": {},
       "cordova-plugin-file": {},
       "cordova-plugin-googleplus": {
+        "REVERSED_CLIENT_ID": "com.googleusercontent.apps.RaNdOmVaLuEs",
+        "WEB_APPLICATION_CLIENT_ID": "RaNdoMvAlUeS.apps.googleusercontent.com",
         "PLAY_SERVICES_VERSION": "11.8.0"
       },
       "cordova-plugin-google-analytics": {
@@ -135,7 +151,25 @@
       "cordova-plugin-qrscanner": {},
       "cordova-plugin-camera": {
         "ANDROID_SUPPORT_V4_VERSION": "27.+"
-      }
+      },
+      "cordova-plugin-androidx": {},
+      "cordova-plugin-androidx-adapter": {},
+      "cordova-plugin-admobpro": {
+        "PLAY_SERVICES_VERSION": "16.0.0",
+        "ADMOB_ANDROID_APP_ID": "ca-app-pub-8578682421434111~1583133422",
+        "ADMOB_APP_ID": "ca-app-pub-8578682421434111~1583133422"
+      },
+      "cordova-plugin-background-geolocation": {
+        "GOOGLE_PLAY_SERVICES_VERSION": "11+",
+        "ANDROID_SUPPORT_LIBRARY_VERSION": "26+",
+        "ICON": "@mipmap/icon",
+        "SMALL_ICON": "@mipmap/icon",
+        "ACCOUNT_NAME": "@string/app_name",
+        "ACCOUNT_LABEL": "@string/app_name",
+        "ACCOUNT_TYPE": "$PACKAGE_NAME.account",
+        "CONTENT_AUTHORITY": "$PACKAGE_NAME"
+      },
+      "cordova-plugin-googlemaps": {}
     },
     "platforms": [
       "android"

src/app/app-routing.module.ts

@@ -10,17 +10,20 @@ const routes: Routes = [
   {
     path: 'app',
     loadChildren: './pages/menu/menu.module#MenuPageModule',
-    canActivate: [AuthGuardService]
+    // canActivate: [AuthGuardService]
   },
   {
     path: 'offre-details',
     loadChildren: './pages/offres/offre-details/offre-details.module#OffreDetailsPageModule',
-    canActivate: [AuthGuardService]
+    // canActivate: [AuthGuardService]
   },
   { path: 'login-help', loadChildren: './modals/login-help/login-help.module#LoginHelpPageModule' },
   { path: 'offres-carte-filters', loadChildren: './modals/offres-carte-filters/offres-carte-filters.module#OffresCarteFiltersPageModule' },
-  { path: 'create-account', loadChildren: './pages/compte/create/create.module#CreatePageModule' },
  { path: 'success', loadChildren: './modals/alerts/success/success.module#SuccessPageModule' },
+  { path: 'create-account', loadChildren: './pages/compte/create/create.module#CreatePageModule' },
+  { path: 'success', loadChildren: './modals/alerts/success/success.module#SuccessPageModule' },
   { path: 'error', loadChildren: './modals/alerts/error/error.module#ErrorPageModule' },
+  // { path: 'scroller', loadChildren: './pages/offres/scroller/scroller.module#ScrollerPageModule' },
+  // { path: 'mode-carte', loadChildren: './pages/offres/mode-carte/mode-carte.module#ModeCartePageModule' },
 
 
 

src/app/app.component.ts

@@ -40,7 +40,8 @@ export class AppComponent {
     initializeApp() {
         this.platform.ready().then(() => {
             setTimeout(() => this.appStarted = true, 3000);
-            this.statusBar.styleDefault();
+            // this.statusBar.styleDefault();
+            // this.statusBar.backgroundColorByHexString('#f93129');
             this.splashScreen.hide();
 
             // Start GA tracking
@@ -59,24 +60,49 @@ export class AppComponent {
                 });
 
             // Set params
-            this.setDefaultParams();
-
-            // Set locator
-            // this.setLocator();
+            this.setDefaultParams().then(() => {
+                this._AUTH.doRefreshToken().then(
+                    () => {
+                        console.log('hnaaa');
                         
+                        this._AUTH.authState.next(true);
                         this._AUTH.authState.subscribe(state => {
                             if (state) {
-                    this.storage.get('APP_PARAMS').then(appParams => {
-                        if (appParams.PARAM_mainslider) {
                                 this.router.navigate(['app/dashboard']);
                             } else {
-                            this.router.navigate(['mainslider']);
+                                this.router.navigate(['login']);
                             }
                         });
-                } else {
+                    },
+                    err => {
+                        this.storage.get('APP_PARAMS').then(appParams => {
+                            if (appParams.PARAM_mainslider) {
                                 this.router.navigate(['login']);
+                            } else {
+                                this.router.navigate(['mainslider']);
                             }
                         });
+                    });
+                // this._AUTH.authState.subscribe(state => {
+                //     console.log(state);
+
+                //     if (state) {
+                //         this.router.navigate(['app/dashboard']);
+                //     } else {
+                //         this.storage.get('APP_PARAMS').then(appParams => {
+                //             if (appParams.PARAM_mainslider) {
+                //                 this.router.navigate(['login']);
+                //             } else {
+                //                 this.router.navigate(['mainslider']);
+                //             }
+                //         });
+                //     }
+                // });
+            });
+
+            // Set locator
+            // this.setLocator();
+
             // this.storage.get('wpUser').then((wpUser) => {
             //     if (wpUser) {
             //         this.router.navigateByUrl('/app/dashboard', { replaceUrl: true });
@@ -103,6 +129,7 @@ export class AppComponent {
     }
 
     setDefaultParams() {
+        return new Promise<any>((resolve, reject) => {
             this.storage.get('APP_PARAMS').then((val) => {
                 if (val === null) {
                     this.storage.set('APP_PARAMS', {
@@ -116,11 +143,13 @@ export class AppComponent {
                     });
                     this.storage.set('APP_QUESTS', {});
                 }
-        });
                 this.storage.get('WISHLIST').then((val) => {
                     if (val === null) {
                         this.storage.set('WISHLIST', []);
                     }
+                    resolve();
+                }, err => reject(err));
+            });
         });
     }
 

src/app/app.module.ts

@@ -26,6 +26,8 @@ import { File } from '@ionic-native/File/ngx';
 import { WebView } from '@ionic-native/ionic-webview/ngx';
 import { FilePath } from '@ionic-native/file-path/ngx';
 import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';
+// import { AdMob } from "ionic-admob";
+import { AdMobPro } from '@ionic-native/admob-pro/ngx';
 import { Network } from '@ionic-native/network/ngx';
 import { environment } from 'src/environments/environment';
 import { AuthService } from './services/auth.service';
@@ -80,8 +82,9 @@ import { PipesModule } from './pipes/pipes.module';
     AuthService,
     AuthGuardService,
     GoogleAnalytics,
-    Network
-
+    Network,
+    // AdMob
+    AdMobPro
   ],
   bootstrap: [AppComponent]
 })

src/app/app.scss

@@ -5,6 +5,19 @@
 // file can hold Sass mixins, functions, and placeholder classes to be imported
 // and used throughout the application.
 
+//Fonts definition
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
+
+$white: #fcfcfc;
+$gray: #cbcdd3;
+$dark: #777777;
+$error: #ef8d9c;
+$orange: #ffc39e;
+$success: #b0db7d;
+$secondary: #99dbb4;
+
+$font: "Lato", sans-serif;
+
 .map-popup {
   .leaflet-popup-content {
     width: 80vw !important;
@@ -31,7 +44,7 @@
 }
 
 div.start {
-  background: #f93129;
+  // background: #f93129;
   width: 100vw;
   height: 100vh;
   display: flex;
@@ -54,41 +67,15 @@ ion-alert {
 div.hide {
   display: none !important;
 }
-ion-modal.modal-filters .modal-wrapper {
+ion-modal {
+  &.modal-filters {
+    .modal-wrapper {
       width: 90vw !important;
       height: 50vh !important;
       border-radius: 10px;
-}
-ion-select.wide-select {
-  max-width: 65% !important;
-}
-.swiper-pagination {
-  .swiper-pagination-bullet {
-    opacity: 1 !important;
     }
-}
-ion-modal .modal-wrapper {
-  width: 90vw !important;
-  max-height: 90vh !important;
-  border-radius: 10px !important;
-}
-
-ion-alert.alert-pulse .alert-wrapper {
-  box-shadow: 0 0 0 rgba(249, 49, 41, 0.8);
-  animation: pulse 2s infinite;
-}
-$white: #fcfcfc;
-$gray: #cbcdd3;
-$dark: #777777;
-$error: #ef8d9c;
-$orange: #ffc39e;
-$success: #b0db7d;
-$secondary: #99dbb4;
-
-@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
-
-$font: "Lato", sans-serif;
-ion-modal.alert-success {
+  }
+  &.alert-success {
     .modal-wrapper {
       max-height: 50vh !important;
       position: absolute;
@@ -225,7 +212,7 @@ ion-modal.alert-success {
         padding: 1rem;
       }
 
-    ion-button button{
+      ion-button button {
         // position: absolute;
         background: $white;
         // width: 50%;
@@ -244,6 +231,25 @@ ion-modal.alert-success {
         }
       }
     }
+  }
+  .modal-wrapper {
+    width: 90vw !important;
+    max-height: 90vh !important;
+    border-radius: 10px !important;
+  }
+}
+ion-select.wide-select {
+  max-width: 65% !important;
+}
+.swiper-pagination {
+  .swiper-pagination-bullet {
+    opacity: 1 !important;
+  }
+}
+
+ion-alert.alert-pulse .alert-wrapper {
+  box-shadow: 0 0 0 rgba(249, 49, 41, 0.8);
+  animation: pulse 2s infinite;
 }
 
 @keyframes bounce {

src/app/components/tinderui/tinderui.component.html

+<div class="tinder" [hidden]="!_TRIP.offersCardList.length">
+
+  <div class="tinder--status">
+
+    <div *ngIf="crossVisible">
+      <ion-icon name="close" color="medium"></ion-icon>
+    </div>
+
+    <div *ngIf="heartVisible">
+      <ion-icon name="heart" color="primary"></ion-icon>
+    </div>
+
+  </div>
+
+  <div class="tinder--cards" (pan)="handlePan($event)" (panend)="handlePanEnd($event)">
+
+    <div #tinderCard class="tinder--card" (transitionend)="handleShift()">
+      <!-- <ion-badge class="percent" fill="outline" *ngIf="_TRIP.offersScrollerList[0].price_adult" color="warning">
+        -{{ ((_TRIP.offersScrollerList[0].price_adult_before - _TRIP.offersScrollerList[0].price_adult) * 100) / _TRIP.offersScrollerList[0].price_adult_before | number:'1.0-0' }}%
+      </ion-badge> -->
+      <div class="merites">
+        <ion-icon name="ribbon" color="secondary"></ion-icon>
+        <p>+500 Mrt</p>
+      </div>
+      <div class="merites right" *ngIf="_TRIP.offersScrollerList[0].price_adult">
+        <p class="reduced-price">{{ _TRIP.offersScrollerList[0].price_adult }} <span class="currency">DH</span></p>
+        <p class="real-price">Au lieu de : <br><span class="barre">{{ _TRIP.offersScrollerList[0].price_adult_before }} <span class="currency">DH</span></span> (-{{ ((_TRIP.offersScrollerList[0].price_adult_before - _TRIP.offersScrollerList[0].price_adult) * 100) / _TRIP.offersScrollerList[0].price_adult_before | number:'1.0-0' }}%)</p>
+      </div>
+      <img #tinderCardImage [src]="_TRIP.offersScrollerList[0].thumb" (load)="tinderCardImage.style.opacity = 1">
+      <div class="tinder--grad-bg">
+        <h3>{{ _TRIP.offersScrollerList[0].name }}</h3>
+        <ion-chip class="info locate" routerLink="/app/partenaire/{{_TRIP.offersScrollerList[0].brand_id}}" routerDirection="forward" routerLinkActive="active">
+          <ion-icon name="locate"></ion-icon> {{ _TRIP.offersScrollerList[0].location }} - Kénitra
+        </ion-chip>
+        <span class="info">
+          <ion-chip class="info" (click)="toggleMoreInfos()">
+            <ion-icon name="information"></ion-icon>
+          </ion-chip>
+        </span>
+        <div class="more-infos" [hidden]="showMoreInfos">
+          <p>{{ _TRIP.offersScrollerList[0].description }}...</p>
+          <p *ngIf="_TRIP.offersScrollerList[0].price_adult">
+            <br><br>
+            Prix proposé : {{ _TRIP.offersScrollerList[0].price_adult }} DH
+          </p>
+          <p *ngIf="_TRIP.offersScrollerList[0].price_adult_before">
+            Prix d'avant : <span class="barre">{{ _TRIP.offersScrollerList[0].price_adult_before }} DH</span>
+          </p>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+
+  <div class="tinder--buttons">
+    <!-- <ion-fab vertical="bottom" horizontal="center" slot="fixed">
+      <ion-fab-button color="warning" (click)="userClickedButton($event, false)">
+        <ion-icon name="close-outline"></ion-icon>
+      </ion-fab-button>
+      <ion-fab-button color="primary" (click)="userClickedButton($event, true)">
+        <ion-icon name="heart-outline"></ion-icon>
+      </ion-fab-button>
+    </ion-fab> -->
+    <ion-toolbar>
+      <ion-button size="large" color="warning" fill="solid" (click)="userClickedButton($event, false)">
+        <ion-icon name="close"></ion-icon>
+      </ion-button>
+      <ion-button size="large" color="primary" fill="solid" (click)="userClickedButton($event, true)">
+        <ion-icon name="heart"></ion-icon>
+      </ion-button>
+    </ion-toolbar>
+    <!-- <ion-footer>
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-button (click)="userClickedButton($event, false)" color="warning">
+            <ion-icon name="close-outline"></ion-icon>
+          </ion-button>
+
+          <ion-button (click)="userClickedButton($event, true)" color="primary">
+            <ion-icon name="heart-outline"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-footer> -->
+  </div>
+
+</div>
\ No newline at end of file

src/app/components/tinderui/tinderui.component.scss

+.tinder {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.4);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.tinder--status {
+  position: absolute;
+  top: 50%;
+  margin-top: -30px;
+  z-index: 2;
+  width: 100%;
+  text-align: center;
+  pointer-events: none;
+  ion-icon {
+    font-size: 30vw;
+  }
+}
+
+.tinder--cards {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgb(249, 49, 41);
+  background: linear-gradient(180deg, rgba(249, 49, 41, 1) 0%, rgba(255, 255, 255, 1) 100%);
+  // padding-top: 7vh;
+}
+
+.barre {
+  text-decoration: line-through;
+}
+
+.merites {
+  position: absolute;
+  top: 4.7vw;
+  left: 4vw;
+  padding: 5px;
+  background: rgb(255, 255, 255);
+  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+  border-radius: 10px;
+  &.right {
+    background: var(--ion-color-success, #10dc60);
+    // background: linear-gradient(180deg, rgba(255, 206, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    left: auto;
+    right: 4vw;
+    top: 3vw;
+    color: #fff;
+    .reduced-price, .real-price {
+        font-family: "Open Sans";
+        font-weight: 500;
+        .currency {
+            font-weight: 100;
+        }
+    }
+    .reduced-price {
+      color: #fff !important;
+      font-size: 2rem;
+    }
+    .real-price {
+      font-size: 0.8rem;
+    }
+  }
+  ion-icon {
+    font-size: 15vw;
+    // background: #fff;
+    // border-top-left-radius: 15px;
+    // border-top-right-radius: 15px;
+  }
+  p {
+    color: #000 !important;
+    margin: 0;
+    padding: 3px;
+    // background: #fff;
+    border-radius: 15px;
+    // border: 1px dotted grey;
+    margin-top: -7px;
+    // min-width: 20vw;
+    text-align: center !important;
+  }
+}
+
+.tinder--card {
+  display: inline-block;
+  width: 100vw;
+  height: 100%;
+  padding-bottom: 40px;
+  position: relative;
+  // border-radius: 8px;
+  overflow: hidden;
+  position: absolute;
+  will-change: transform;
+  transition: all 0.3s ease-in-out;
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+  ion-badge.percent {
+    position: absolute;
+    right: 3vw;
+    top: 4vw;
+    min-width: 20vw;
+    height: 8vw;
+    font-size: 7vw;
+    border-radius: 5vw;
+    border-top-right-radius: 10px;
+  }
+  img {
+    width: 96%;
+    height: 82%;
+    object-fit: cover;
+    margin-top: 3vw;
+    border-radius: 10px;
+  }
+  h3,
+  p {
+    font-family: "Lato", sans-serif;
+    // position: absolute;
+    // top: 69%;
+    // left: 4vw;
+    color: #ffffff;
+    text-align: left;
+  }
+  h3 {
+    // top: 65%;
+    // font-weight: bold;
+    margin-bottom: 0;
+    width: 90%;
+  }
+  p {
+    // top: 69%;
+    font-size: 0.9rem;
+  }
+  .tinder--grad-bg {
+    background: rgb(0, 0, 0);
+    background: linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.8099614845938375) 0%,
+      rgba(0, 0, 0, 0.5718662464985995) 60%,
+      rgba(255, 255, 255, 0) 100%
+    );
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    font-family: "Lato", sans-serif;
+    bottom: 20.8%;
+    position: absolute;
+    left: 2vw;
+    width: 96vw;
+    color: #ffffff;
+    text-align: left;
+    padding: 6vw 4vw 4vw 4vw;
+    span.info {
+      position: absolute;
+      top: 9vw;
+      right: 5px;
+    }
+    ion-chip.info {
+      --background: #fff !important;
+      padding-left: 6px;
+      padding-right: 6px;
+      ion-icon {
+        margin: 0;
+      }
+    }
+    ion-chip.locate {
+      padding: 1px 5px;
+      height: 20px;
+    }
+    .more-infos {
+      border: 1px dotted #fff;
+      margin-top: 10px;
+      padding: 2vw;
+      border-radius: 10px;
+      p {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+.tinder--buttons {
+  position: absolute;
+  flex: 0 0 100px;
+  text-align: center;
+  bottom: 20px;
+  left: 0;
+  right: 0;
+  ion-button {
+    --border-radius: 30px;
+  }
+}
+
+.tinder--buttons button {
+  border-radius: 50%;
+  line-height: 50px;
+  width: 50px;
+  height: 50px;
+  border: 0;
+  background: #ffffff;
+  display: inline-block;
+  padding-top: 10px;
+  margin: 0 12px;
+  border: 1px solid #000000;
+}
+
+.tinder--buttons button:focus {
+  outline: 0;
+}

src/app/components/tinderui/tinderui.component.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TinderuiComponent } from './tinderui.component';
+
+describe('TinderuiComponent', () => {
+  let component: TinderuiComponent;
+  let fixture: ComponentFixture<TinderuiComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TinderuiComponent ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TinderuiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/tinderui/tinderui.component.ts

+import { Component, Input, ViewChildren, QueryList, ElementRef, EventEmitter, Output, Renderer2, OnInit } from '@angular/core';
+import { TripService } from '../../services/trip-service';
+import { AlloService } from '../../services/allo-service';
+
+@Component({
+  selector: 'app-tinderui',
+  templateUrl: './tinderui.component.html',
+  styleUrls: ['./tinderui.component.scss'],
+})
+export class TinderuiComponent implements OnInit {
+
+  @Input('cards') cards: Array<{
+    img: string,
+    title: string,
+    description: string
+  }>;
+  @Output() choiceMade = new EventEmitter();
+
+  @ViewChildren('tinderCard') tinderCards: QueryList<ElementRef>;
+
+  tinderCardsArray: Array<ElementRef>;
+
+  moveOutWidth: number; // value in pixels that a card needs to travel to dissapear from screen
+  shiftRequired: boolean; // state variable that indicates we need to remove the top card of the stack
+  transitionInProgress: boolean; // state variable that indicates currently there is transition on-going
+  heartVisible: boolean;
+  crossVisible: boolean;
+  showMoreInfos = true;
+
+  constructor(
+    public _TRIP: TripService,
+    public _ALLO: AlloService,
+    private renderer: Renderer2
+  ) {
+    this.loadData();
+  }
+
+  ngOnInit() { }
+
+  toggleMoreInfos() {
+    this.showMoreInfos = !this.showMoreInfos;
+  }
+
+  loadData() {
+    let products = this._TRIP.products;
+    products = this._ALLO.shuffleArray(products);
+
+    let product = products.slice(0, 1);
+    this._TRIP.offersScrollerList = [].concat(product);
+    
+  }
+
+  userClickedButton(event, heart) {
+    event.preventDefault();
+    if (!this._TRIP.offersScrollerList.length) return false;
+    if (heart) {
+      // this.tinderCardsArray[0].nativeElement.style.transform = 'translate(' + this.moveOutWidth + 'px, -100px) rotate(-30deg)';
+      this.toggleChoiceIndicator(false, true);
+      this._TRIP.wishList(this._TRIP.offersScrollerList[0], 'add');
+    } else {
+      // this.tinderCardsArray[0].nativeElement.style.transform = 'translate(-' + this.moveOutWidth + 'px, -100px) rotate(30deg)';
+      this.toggleChoiceIndicator(true, false);
+      this._TRIP.wishList(this._TRIP.offersScrollerList[0], 'remove');
+    };
+    this.shiftRequired = true;
+    this.transitionInProgress = true;
+    this.emitChoice(heart, this._TRIP.offersScrollerList[0]);
+    this.handleShift();
+    // this.handlePan(event, true);
+    // this.handlePanEnd(event);
+  };
+
+  toggleChoiceIndicator(cross, heart) {
+    this.crossVisible = cross;
+    this.heartVisible = heart;
+  };
+
+  handleShift() {
+    this.transitionInProgress = false;
+    setTimeout(()=>{
+      this.toggleChoiceIndicator(false, false);
+    }, 300);
+    
+    if (this.shiftRequired) {
+      this.shiftRequired = false;
+      // this._TRIP.offersScrollerList.shift();
+      this.loadData();
+    };
+  };
+
+  handlePan(event, click) {
+
+    if (!click) {
+      if (event.deltaX === 0 || (event.center.x === 0 && event.center.y === 0) || !this._TRIP.offersScrollerList.length) return;
+    }
+
+    if (this.transitionInProgress) {
+      this.handleShift();
+    }
+
+    this.renderer.addClass(this.tinderCardsArray[0].nativeElement, 'moving');
+
+    if (event.deltaX > 0) { this.toggleChoiceIndicator(false, true) }
+    if (event.deltaX < 0) { this.toggleChoiceIndicator(true, false) }
+
+    let xMulti = event.deltaX * 0.03;
+    let yMulti = event.deltaY / 80;
+    let rotate = xMulti * yMulti;
+
+    // this.renderer.setStyle(this.tinderCardsArray[0].nativeElement, 'transform', 'translate(' + event.deltaX + 'px, ' + event.deltaY + 'px) rotate(' + rotate + 'deg)');
+
+    this.shiftRequired = true;
+  };
+
+  handlePanEnd(event) {
+
+    setTimeout(()=>{
+      this.toggleChoiceIndicator(false, false);
+    }, 300);
+
+    if (!this._TRIP.offersScrollerList.length) return;
+
+    this.renderer.removeClass(this.tinderCardsArray[0].nativeElement, 'moving');
+
+    console.log(event);
+    // let keep = Math.abs(event.deltaX) < 80 || Math.abs(event.velocityX) < 0.5;
+    // if (keep) {
+
+    //   this.renderer.setStyle(this.tinderCardsArray[0].nativeElement, 'transform', '');
+    //   this.shiftRequired = false;
+
+    // } else {
+
+      let endX = Math.max(Math.abs(event.velocityX) * this.moveOutWidth, this.moveOutWidth);
+      let toX = event.deltaX > 0 ? endX : -endX;
+      let endY = Math.abs(event.velocityY) * this.moveOutWidth;
+      let toY = event.deltaY > 0 ? endY : -endY;
+      let xMulti = event.deltaX * 0.03;
+      let yMulti = event.deltaY / 80;
+      let rotate = xMulti * yMulti;
+
+      // this.renderer.setStyle(this.tinderCardsArray[0].nativeElement, 'transform', 'translate(' + toX + 'px, ' + (toY + event.deltaY) + 'px) rotate(' + rotate + 'deg)');
+
+      this.shiftRequired = true;
+
+      this.emitChoice(!!(event.deltaX > 0), this._TRIP.offersScrollerList[0]);
+    // }
+    this.transitionInProgress = true;
+  };
+
+  emitChoice(heart, card) {
+    this.choiceMade.emit({
+      choice: heart,
+      card: card
+    })
+  };
+
+  ngAfterViewInit() {
+    this.moveOutWidth = document.documentElement.clientWidth * 1.5;
+    this.tinderCardsArray = this.tinderCards.toArray();
+    this.tinderCards.changes.subscribe(() => {
+      this.tinderCardsArray = this.tinderCards.toArray();
+    })
+  };
+
+}

src/app/constants.ts

@@ -4,5 +4,6 @@ export const WORDPRESS_REST_API_URL = WORDPRESS_URL + 'wp-json/wp/v2/';
 export const GA_TRACKID = 'UA-129706772-2';
 export const WORDPRESS_REST_API_ACF_USER_URL = WORDPRESS_URL + 'wp-json/acf/v3/users/';
 
-export const DRUPAL_URL = 'http://partners.allo-testeurs.com/';
+export const DRUPAL_URL = 'http://bce1d98d.ngrok.io/';
+// export const DRUPAL_URL = 'http://partners.allo-testeurs.com/';
 export const DRUPAL_OAUTH_CLIENT_ID = 'be89e1d8-a10c-4448-90e3-8a97a1f305f9';

src/app/modals/offres-carte-filters/offres-carte-filters.page.html

@@ -25,14 +25,14 @@
       </ion-select>
     </ion-item>
     <ion-item>
-      <ion-grid no-padding>
+      <ion-grid class="ion-no-padding">
         <ion-row>
-          <ion-col no-padding>
+          <ion-col class="ion-no-padding">
             <ion-label margin-vertical>Type</ion-label>
           </ion-col>
         </ion-row>
         <ion-row>
-          <ion-col no-padding>
+          <ion-col class="ion-no-padding">
             <ion-segment [(ngModel)]="_TRIP.filters.type" (ionChange)="_TRIP.filterOffers()" mode="ios" margin-bottom>
               <ion-segment-button mode="ios" value="all">
                 <ion-label>Tout</ion-label>

src/app/pages/compte/favoris/favoris.page.html

-<ion-header>
+<!-- <ion-header>
   <ion-toolbar color="primary">
     <ion-buttons slot="start">
       <ion-menu-button> </ion-menu-button>
     </ion-buttons>
     <ion-title>Favoris </ion-title>
   </ion-toolbar>
-</ion-header>
+</ion-header> -->
 
 <ion-content>
   <ion-card [hidden]="_TRIP.wishedProducts.length" padding>

src/app/pages/compte/login/login.page.html

@@ -72,14 +72,26 @@
         </ion-button>
       </ion-col>
     </ion-row>
-    <ion-row>
+    <!-- <ion-row>
       <ion-col class="ion-no-padding ion-text-start">
         <ion-button color="dark" class="btn-g ion-no-margin" (click)="presentSuccessModal()">
           <ion-icon name="walk"></ion-icon>
           Anonyme
         </ion-button>
       </ion-col>
-    </ion-row>
+    </ion-row> -->
+    <!-- <ion-row>
+      <ion-col class="ion-no-padding ion-text-start">
+        <ion-button color="dark" class="btn-g ion-no-margin" (click)="_ADS.showInterstitial()">
+          <ion-icon name="walk"></ion-icon>
+          Show Interstitial
+        </ion-button>
+        <ion-button color="dark" class="btn-g ion-no-margin" (click)="_ADS.showBanner()">
+          <ion-icon name="walk"></ion-icon>
+          Show Banner
+        </ion-button>
+      </ion-col>
+    </ion-row> -->
   </ion-grid>
-  <app-alert-success></app-alert-success>
+  <!-- <app-alert-success></app-alert-success> -->
 </ion-content>
\ No newline at end of file

src/app/pages/compte/login/login.page.ts

@@ -5,8 +5,10 @@ import { Storage } from '@ionic/storage';
 import { Router } from '@angular/router';
 import { GooglePlus } from '@ionic-native/google-plus/ngx';
 import { GoogleAnalytics } from '@ionic-native/google-analytics/ngx';
+// import { AdMob } from "ionic-admob";
 import { AlloService } from '../../../services/allo-service';
 import { AuthService } from '../../../services/auth.service';
+import { AdsService } from '../../../services/ads.service';
 import { LoginHelpPage } from '../../../modals/login-help/login-help.page';
 // import swal from 'sweetalert';
 
@@ -39,9 +41,24 @@ export class LoginPage implements OnInit {
         public modalController: ModalController,
         private googlePlus: GooglePlus,
         private ga: GoogleAnalytics,
+        // private admob: AdMob,
         public _ALLO: AlloService,
-        public _AUTH: AuthService
-    ) { }
+        public _AUTH: AuthService,
+        public _ADS: AdsService,
+    ) {
+
+        // this.admob.banner.show({
+        //     // id: 'ca-app-pub-8578682421434111/7420292773', // Allo banner
+        //     // id: 'ca-app-pub-8578682421434111/9385601826', // Allo interstitial
+        //     id: 'ca-app-pub-3940256099942544/6300978111', // Google demo banner
+        //     id: 'ca-app-pub-3940256099942544/1033173712', // Google demo interstitial
+        // });
+        // let adId;
+        // adId = 'ca-app-pub-3940256099942544/1033173712';
+        // this.admob.prepareInterstitial({ adId: adId })
+        //     .then(() => { this.admob.showInterstitial(); });
+
+    }
 
     ngOnInit() {
         this.ga.trackView('Page : Login');
@@ -60,6 +77,10 @@ export class LoginPage implements OnInit {
         });
     }
 
+    ionViewDidEnter() {
+        this._ADS.createBanner(false);
+    }
+
     async presentHelpModal() {
         const modal = await this.modalController.create({
             component: LoginHelpPage
@@ -75,7 +96,7 @@ export class LoginPage implements OnInit {
         this.ga.trackEvent('Login', 'Tapped button', 'Anonymous login');
         this._AUTH.isAnonymous = true;
         const alloUser = {
-            user_infos : {
+            user_infos: {
                 "uid": 0,
                 "mail": "nomail",
                 "nom": "anonymous",
@@ -90,11 +111,9 @@ export class LoginPage implements OnInit {
         this.storage.set('alloUser', alloUser).then(() => {
             this._AUTH.setUser(alloUser);
             this.storage.get('APP_PARAMS').then(appParams => {
-                if (appParams.PARAM_mainslider) {
+                this._ADS.hideBanner();
+                this._AUTH.authState.next(true);
                 this.router.navigate(['app/dashboard']);
-                } else {
-                    this.router.navigate(['mainslider']);
-                }
             });
         });
     }
@@ -105,25 +124,29 @@ export class LoginPage implements OnInit {
         // this._AUTH.doLogin(values)
         this._AUTH.doDrupLogin(values)
             .then(
-                res => {console.log(res);
+                res => {
+                    console.log(res);
                     this.ga.trackEvent('Login', 'Result', 'Successfull connection');
                     this._ALLO.dismissLoading();
                     this._AUTH.isAnonymous = false;
                     this.storage.get('APP_PARAMS').then(appParams => {
-                        if (appParams.PARAM_mainslider) {
-                            this.router.navigate(['app/dashboard']);
-                        } else {
-                            this.router.navigate(['mainslider']);
-                        }
+                        this._ADS.hideBanner();
+                        this.router.navigate(['/app/dashboard']);
+                        // if (appParams.PARAM_mainslider) {
+                        //     this.router.navigate(['app/dashboard']);
+                        // } else {
+                        //     this.router.navigate(['mainslider']);
+                        // }
                     });
                 },
-                err => {console.log(err);
+                err => {
+                    console.log(err);
 
                     this.ga.trackEvent('Login', 'Result', 'Connection error : ' + err);
-                    this._ALLO.dismissLoading();
                     // swal('Connexion', 'Email ou Mot de passe incorrects. Veuillez réessayer.', 'error');
                     // this._ALLO.presentAlert('Connexion', 'Email ou Mot de passe incorrects.<br>Veuillez réessayer.');
                     this._ALLO.presentToast('', this._AUTH.getErrorMessage(err), 'top');
+                    setTimeout(() => {this._ALLO.dismissLoading();}, 1000);
                     console.log('Auth error', err);
                 });
         // this._ALLO.presentLoading();

src/app/pages/compte/profil/profil.page.html

-<ion-header>
+<!-- <ion-header>
     <ion-toolbar color="primary">
         <ion-buttons slot="start">
             <ion-menu-button></ion-menu-button>
@@ -11,7 +11,7 @@
             <ion-spinner name="dots" color="light" *ngIf="syncing"></ion-spinner>
         </ion-buttons>
     </ion-toolbar>
-</ion-header>
+</ion-header> -->
 
 <ion-content>
     <form [formGroup]="validationsForm">
@@ -56,7 +56,7 @@
                 </ion-col>
             </ion-row>
             <!-- <ion-row no-padding padding-horizontal padding-top>
-                    <ion-col no-padding>
+                    <ion-col class="ion-no-padding">
                         <ion-progress-bar color="primary" value="0.75"></ion-progress-bar>
                     </ion-col>
                 </ion-row>
@@ -65,7 +65,7 @@
                     <ion-col no-padding size="6" class="ion-text-end"> 1000 </ion-col>
                 </ion-row> -->
         </ion-grid>
-        <ion-card *ngIf="_AUTH?.userInfos?.card_number">
+        <!-- <ion-card *ngIf="_AUTH?.userInfos?.card_number">
             <ion-item [color]="editMode ? 'dark' : 'primary'">
                 Ma carte testeur :
             </ion-item>
@@ -78,8 +78,8 @@
             <ion-item lines="none" [color]="editMode ? 'medium' : ''">
                 <ion-icon name="person" slot="start"></ion-icon> {{ _AUTH.userInfos.cnie }}
             </ion-item>
-        </ion-card>
-        <ion-card color="primary" *ngIf="!_AUTH?.userInfos?.card_number && !editMode">
+        </ion-card> -->
+        <!-- <ion-card color="primary" *ngIf="!_AUTH?.userInfos?.card_number && !editMode">
             <ion-text>
                 <h5 class="ion-text-center">Vous n'avez pas encore</h5>
                 <h3 class="ion-text-center">la Carte Testeur.</h3>
@@ -91,7 +91,7 @@
                         routerLinkActive="active">Contactez-nous maintenant!</ion-button>
                 </p>
             </ion-text>
-        </ion-card>
+        </ion-card> -->
         <ion-card>
             <ion-item color="primary">
                 Infos :
@@ -124,9 +124,9 @@
     </form>
 </ion-content>
 
-<ion-footer *ngIf="editMode">
+<ion-footer>
     <ion-toolbar color="primary">
-        <ion-buttons slot="end" *ngIf="!syncing">
+        <ion-buttons slot="end" *ngIf="!syncing && editMode">
             <ion-button fill="outline" color="light" (click)="cancelEdit()">
                 <ion-icon name="close"></ion-icon> Annuler
             </ion-button>
@@ -135,5 +135,9 @@
                 <ion-icon name="checkmark"></ion-icon> Valider
             </ion-button>
         </ion-buttons>
+        <ion-buttons slot="end">
+            <ion-button fill="outline" color="light" *ngIf="!editMode" (click)="startEdit()">Modifier</ion-button>
+            <ion-spinner name="dots" color="light" *ngIf="syncing"></ion-spinner>
+        </ion-buttons>
     </ion-toolbar>
 </ion-footer>
\ No newline at end of file

src/app/pages/contact/contact.page.html

@@ -12,7 +12,7 @@
 <ion-content padding>
   <p class="text-dark">Vous pouvez nous contacter via les réseaux sociaux, ou bien notre site web sur ces liens :</p>
   <ion-card no-margin>
-    <ion-card-content no-padding>
+    <ion-card-content class="ion-no-padding">
       <ion-list>
         <ion-item href="https://www.facebook.com/AlloTesteurs">
           <ion-icon name="logo-facebook" slot="start" color="secondary"></ion-icon>
@@ -36,7 +36,7 @@
 
   <p class="text-dark">Mais aussi, par téléphone/WhatsApp sur ces numéro :</p>
   <ion-card no-margin>
-    <ion-card-content no-padding>
+    <ion-card-content class="ion-no-padding">
       <ion-list>
         <ion-item href="tel://0661934878">
           <ion-icon name="logo-whatsapp" slot="start" color="secondary"></ion-icon><ion-icon name="phone-portrait" slot="start" color="secondary"></ion-icon>

src/app/pages/etablissement/etablissement.page.html

 <ion-header>
   <ion-toolbar color="primary">
     <ion-buttons slot="start">
-      <ion-menu-button>
-        <!-- <ion-icon name="menu" size="large"></ion-icon> -->
-      </ion-menu-button>
+      <!-- <ion-menu-button></ion-menu-button> -->
+      <ion-back-button text="Retour"></ion-back-button>
     </ion-buttons>
     <ion-title>Etablissement</ion-title>
   </ion-toolbar>
@@ -39,44 +38,44 @@
     </ion-label>
   </ion-item>
   <ion-slides pager="false" scrollbar="true">
-    <ion-slide no-padding>
+    <ion-slide class="ion-no-padding">
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/04.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>40 DH</ion-badge>
         </ion-card-content>
       </ion-card>
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/03.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>35 DH</ion-badge>
         </ion-card-content>
       </ion-card>
     </ion-slide>
-    <ion-slide no-padding>
+    <ion-slide class="ion-no-padding">
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/02.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>55 DH</ion-badge>
         </ion-card-content>
       </ion-card>
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/01.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>65 DH</ion-badge>
         </ion-card-content>
       </ion-card>
     </ion-slide>
-    <ion-slide no-padding>
+    <ion-slide class="ion-no-padding">
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/04.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>60 DH</ion-badge>
         </ion-card-content>
       </ion-card>
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/03.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>73 DH</ion-badge>
         </ion-card-content>
       </ion-card>
@@ -88,44 +87,44 @@
     </ion-label>
   </ion-item>
   <ion-slides pager="false" scrollbar="true">
-    <ion-slide no-padding>
+    <ion-slide class="ion-no-padding">
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/02.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>55 DH</ion-badge>
         </ion-card-content>
       </ion-card>
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/01.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>45 DH</ion-badge>
         </ion-card-content>
       </ion-card>
     </ion-slide>
-    <ion-slide no-padding>
+    <ion-slide class="ion-no-padding">
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/04.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>66 DH</ion-badge>
         </ion-card-content>
       </ion-card>
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/03.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>49 DH</ion-badge>
         </ion-card-content>
       </ion-card>
     </ion-slide>
-    <ion-slide no-padding>
+    <ion-slide class="ion-no-padding">
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/02.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>65 DH</ion-badge>
         </ion-card-content>
       </ion-card>
       <ion-card class="menu-card">
         <img src="../../../assets/img/demo/dishes/01.jpg">
-        <ion-card-content no-padding>
+        <ion-card-content class="ion-no-padding">
           <ion-badge>55 DH</ion-badge>
         </ion-card-content>
       </ion-card>

src/app/pages/etablissement/etablissement.page.ts

 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TripService } from "../../services/trip-service";
 
 @Component({
   selector: 'app-etablissement',
@@ -6,6 +8,7 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./etablissement.page.scss'],
 })
 export class EtablissementPage implements OnInit {
+  private pid = null;
   slidesOpts = {
     on: {
       beforeInit() {
@@ -67,9 +70,16 @@ export class EtablissementPage implements OnInit {
   }
 
 
-  constructor() { }
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private _TRIP: TripService
+    ) { }
 
   ngOnInit() {
+    this.pid = this.activatedRoute.snapshot.paramMap.get('pid');
+    let brand = this._TRIP.getItemById('brands', this.pid);
+    console.log(brand);
+    
   }
 
 }

src/app/pages/mainslider/mainslider.page.html

@@ -34,8 +34,7 @@
 						<ion-text color="light">
 							<p class="text-1x">
 								Vous y trouverez toute l'actualité sur les bons plans à Kenitra et ailleurs, destinés
-								exclusivement à
-								nos cher(e)s détenteur(se)s de la Carte Testeurs.
+								exclusivement à nos cher(e)s adhérent(e)s à l'application.
 							</p>
 						</ion-text>
 					</ion-col>
@@ -58,7 +57,7 @@
 			<!--			<button ion-button class="round" color="light" margin-top full tappable (click)="getGps()">GPS!</button>
 						<button ion-button class="round" color="light" margin-top full tappable (click)="getNotifs()">Notifs!</button>-->
 		</ion-slide>
-		<ion-slide padding>
+		<!-- <ion-slide padding>
 			<ion-item lines="none" color="primary" class="skip">
 				<ion-button fill="outline" color="light" (click)="skipPresentation($event)">
 					Passer <ion-icon name="arrow-dropright-circle" slot="end"></ion-icon>
@@ -123,7 +122,7 @@
 					</ion-col>
 				</ion-row>
 			</ion-grid>
-		</ion-slide>
+		</ion-slide> -->
 		<ion-slide padding>
 			<ion-item lines="none" color="primary" class="skip">
 				<ion-button fill="outline" color="light" (click)="skipPresentation($event)">
@@ -147,9 +146,8 @@
 					<ion-col>
 						<ion-text color="light">
 							<p class="text-1x">
-								La liste de nos partenaires, ainsi que leurs offres est disponible ici même, mais aussi
-								sur
-								:
+								La liste de nos partenaires, ainsi que leurs offres sont disponibles ici même, mais aussi
+								sur :
 							</p>
 						</ion-text>
 					</ion-col>
@@ -157,7 +155,7 @@
 				<ion-row>
 					<ion-col>
 						<ion-card no-margin>
-							<ion-card-content no-padding>
+							<ion-card-content class="ion-no-padding">
 								<ion-list>
 									<ion-item href="https://www.facebook.com/AlloTesteurs">
 										<ion-icon slot="start" name="logo-facebook" color="tertiary"></ion-icon>
@@ -205,11 +203,11 @@
 				</ion-row>
 				<ion-row>
 					<ion-col>
-						<ion-grid no-margin no-padding>
+						<ion-grid no-margin class="ion-no-padding">
 							<ion-row>
 								<ion-col>
 									<ion-button class="round" size="small" color="light" margin-top full tappable
-										(click)="goToDashboard()" routerDirection="forward" routerLinkActive="active">
+										(click)="goToLogin()" routerDirection="forward" routerLinkActive="active">
 										Continuer sans &nbsp;<ion-icon name="arrow-dropright-circle"></ion-icon>
 									</ion-button>
 								</ion-col>

src/app/pages/mainslider/mainslider.page.ts

@@ -6,6 +6,7 @@ import { GoogleAnalytics } from '@ionic-native/google-analytics/ngx';
 // import { DashboardPage } from "../dashboard/dashboard";
 import { PermService } from '../../services/perm-service';
 import { LocationService } from '../../services/location-service';
+import { AuthService } from '../../services/auth.service';
 // import { AlloService } from "../../services/allo-service";
 // import { LocalNotifications } from '@ionic-native/local-notifications/ngx';
 
@@ -34,6 +35,7 @@ export class MainsliderPage implements OnInit {
         //   public LN: LocalNotifications,
         private _PERM: PermService,
         private _LOCATE: LocationService,
+        private _AUTH: AuthService,
         //   private _ALLO: AlloService,
         private storage: Storage,
         private router: Router,
@@ -55,7 +57,7 @@ export class MainsliderPage implements OnInit {
         }
         this.mainSlider.getActiveIndex().then(index => {
             this.hideSlider = true;
-            this.mainSlider.slideTo(4, 1000);
+            this.mainSlider.slideTo(2, 1000);
             this.hideSlider = false;
         });
     }
@@ -70,7 +72,7 @@ export class MainsliderPage implements OnInit {
             appParams.PARAM_mainslider = true;
             appParams.PARAM_geolocate = true;
             this.storage.set('APP_PARAMS', appParams);
-            this.goToDashboard();
+            this.goToLogin();
         });
     }
 
@@ -86,4 +88,21 @@ export class MainsliderPage implements OnInit {
         });
         this.router.navigate(['app/dashboard']);
     }
+
+    goToLogin() {
+        this.storage.get('APP_PARAMS')
+        .then(appParams => {
+            appParams.PARAM_mainslider = true;
+            this.storage.set('APP_PARAMS', appParams);
+        })
+        .then(() => {
+            this._AUTH.authState.subscribe(state => {
+                if (state) {
+                    this.router.navigate(['app/dashboard']);
+                } else {
+                    this.router.navigate(['login']);
+                }
+            });
+        });
+    }
 }

src/app/pages/menu/menu.module.ts

@@ -22,6 +22,14 @@ const routes: Routes = [
         loadChildren: '../offres/dashboard/dashboard.module#DashboardPageModule'
       },
       {
+        path: 'scroller',
+        loadChildren: '../offres/scroller/scroller.module#ScrollerPageModule'
+      },
+      {
+        path: 'mode-carte',
+        loadChildren: '../offres/mode-carte/mode-carte.module#ModeCartePageModule'
+      },
+      {
         path: 'details-offre/:oid',
         loadChildren: '../offres/offre-details/offre-details.module#OffreDetailsPageModule'
       },
@@ -85,6 +93,10 @@ const routes: Routes = [
         path: 'favoris',
         loadChildren: '../compte/favoris/favoris.module#FavorisPageModule'
       },
+      {
+        path: 'partenaire/:pid',
+        loadChildren: '../etablissement/etablissement.module#EtablissementPageModule'
+      },
     ]
   }
 ];

src/app/pages/menu/menu.page.html

-<ion-menu contentId="content">
+<ion-menu contentId="content" swipeGesture="false">
     <ion-header>
         <ion-toolbar color="primary">
             <div class="anonymous ion-text-center" *ngIf="_AUTH.infoNicename === 'anonymous'" padding>
@@ -27,41 +27,45 @@
                             <ion-text>
                                 <h4>{{ _AUTH?.infoFullname }}</h4>
                             </ion-text>
-                            <ion-chip color="light">
+                            <!-- <ion-chip color="light">
                                 <ion-icon name="star"></ion-icon>
                                 <ion-label>Testeur</ion-label>
-                            </ion-chip>
-                            <ion-menu-toggle>
-                                <ion-chip routerLink="/app/hauts-faits" routerDirection="root"
+                            </ion-chip> -->
+                            <ion-badge color="secondary">
+                                Testeur
+                            </ion-badge>
+                            <!-- <ion-menu-toggle>
+                                <ion-chip routerLink="/app/dashboard/merites" routerDirection="root"
                                     routerLinkActive="active">
                                     <ion-icon name="ribbon" color="secondary"></ion-icon>
                                     <ion-label color="light">{{ _QST.pointsMerites }}</ion-label>
                                 </ion-chip>
-                            </ion-menu-toggle>
+                            </ion-menu-toggle> -->
                         </ion-col>
                     </ion-row>
                 </ion-grid>
                 <ion-card color="light">
                     <ion-grid>
-                        <!-- <ion-row no-padding padding-horizontal>
-                        <ion-col no-padding>
+                        <!-- <ion-row class="ion-no-padding">
+                            <ion-col class="ion-no-padding">
                                 <ion-label>Mes points :</ion-label>
                             </ion-col>
                         </ion-row>
-                    <ion-row no-padding padding-horizontal padding-top>
-                        <ion-col no-padding>
+                        <ion-row class="ion-no-padding">
+                            <ion-col class="ion-no-padding">
                                 <ion-progress-bar color="primary" value="0.75"></ion-progress-bar>
                             </ion-col>
                         </ion-row>
-                    <ion-row no-padding padding-horizontal>
-                        <ion-col no-padding size="6" class="ion-text-start"> 0 </ion-col>
-                        <ion-col no-padding size="6" class="ion-text-end"> 1000 </ion-col>
+                        <ion-row class="ion-no-padding">
+                            <ion-col size="6" class="ion-no-padding ion-text-start"> 0 </ion-col>
+                            <ion-col size="6" class="ion-no-padding ion-text-end"> 1000 </ion-col>
                         </ion-row> -->
                         <ion-row>
-                            <ion-col no-padding class="ion-text-start">
+                            <ion-col class="ion-no-padding ion-text-start">
                                 <ion-menu-toggle>
-                                    <ion-button fill="outline" size="small" color="dark" routerLink="/app/profil"
-                                        routerDirection="root" routerLinkActive="active">
+                                    <ion-button fill="outline" size="small" color="dark"
+                                        routerLink="/app/dashboard/compte" routerDirection="root"
+                                        routerLinkActive="active">
                                         <ion-icon name="contact"></ion-icon>
                                         Profil
                                     </ion-button>

src/app/pages/menu/menu.page.ts

@@ -12,29 +12,29 @@ export class MenuPage implements OnInit {
 
   pages = [
     {
-      title: 'Les promos',
+      title: 'Accueil',
       url: '/app/dashboard',
       icon: 'home',
       anonymous: true
     },
-    {
-      title: 'Partenaires',
-      url: '/app/partenaires',
-      icon: 'contacts',
-      anonymous: true
-    },
-    {
-      title: 'Favoris',
-      url: '/app/favoris',
-      icon: 'bookmark',
-      anonymous: false
-    },
-    {
-      title: 'Mes mérites',
-      url: '/app/mes-merites',
-      icon: 'ribbon',
-      anonymous: false
-    },
+    // {
+    //   title: 'Partenaires',
+    //   url: '/app/partenaires',
+    //   icon: 'contacts',
+    //   anonymous: true
+    // },
+    // {
+    //   title: 'Favoris',
+    //   url: '/app/favoris',
+    //   icon: 'bookmark',
+    //   anonymous: false
+    // },
+    // {
+    //   title: 'Mes mérites',
+    //   url: '/app/mes-merites',
+    //   icon: 'ribbon',
+    //   anonymous: false
+    // },
     {
       title: 'Paramètres',
       url: '/app/params',

src/app/pages/merites/mes-merites/mes-merites.page.html

-<ion-header>
+<!-- <ion-header>
   <ion-toolbar color="primary">
     <ion-buttons slot="start">
       <ion-menu-button>
@@ -10,11 +10,11 @@
       <ion-label color="light">{{ _QST.pointsMerites }}</ion-label>
     </ion-chip>
   </ion-toolbar>
-</ion-header>
+</ion-header> -->
 
 <ion-content padding>
   <div [ngSwitch]="viewList">
-    <ion-grid no-padding>
+    <ion-grid class="ion-no-padding">
       <ion-row>
         <ion-col size="8">
           <ion-button expand="block" color="success" routerLink="/app/reclamer-merites" routerDirection="forward"

src/app/pages/merites/reclamer-merites-code/reclamer-merites-code.page.ts

@@ -39,7 +39,7 @@ export class ReclamerMeritesCodePage implements OnInit {
   validateCode(values) {
     this._ALLO.presentLoading();
     const header = {
-      'Authorization': 'Bearer ' + this._AUTH.userToken,
+      'Authorization': 'Bearer ' + this._AUTH.userToken.getValue(),
     };
     this.httpAdv.sendRequest(Config.DRUPAL_URL + 'partenaire/validate-merits-code/' + values.code,
       {

src/app/pages/merites/reclamer-merites-form/reclamer-merites-form.page.html

@@ -59,7 +59,7 @@
         <ion-text class="ion-padding-horizontal">
           <small>La preuve d'achat doit avoir la date d'achat affichée en claire.</small>
         </ion-text>
-        <ion-item no-padding>
+        <ion-item class="ion-no-padding">
           <ion-button fill="solid" expand="full" color="success" (click)="selectImage()" class="ion-margin-horizontal">
             <ion-icon slot="start" name="camera"></ion-icon>
             Preuves d'achat (ticket de caisse, bons, ...)

src/app/pages/merites/reclamer-merites-qrcode/reclamer-merites-qrcode.page.ts

@@ -36,7 +36,7 @@ export class ReclamerMeritesQrcodePage implements OnInit {
             if (token.startsWith('token:')) {
               console.log('Scanned something', token, this.isOn);
               const header = {
-                'Authorization': 'Bearer ' + this._AUTH.userToken,
+                'Authorization': 'Bearer ' + this._AUTH.userToken.getValue(),
               };
               this.httpAdv.sendRequest(Config.DRUPAL_URL + 'partenaire/validate-qrcode' + token.replace('token:', ''),
                 {

src/app/pages/offres/dashboard/dashboard.module.ts

@@ -31,6 +31,42 @@ const routes: Routes = [
         ]
       },
       {
+        path: 'favoris',
+        children: [
+          {
+            path: '',
+            loadChildren: '../../compte/favoris/favoris.module#FavorisPageModule'
+          }
+        ]
+      },
+      {
+        path: 'merites',
+        children: [
+          {
+            path: '',
+            loadChildren: '../../merites/mes-merites/mes-merites.module#MesMeritesPageModule'
+          }
+        ]
+      },
+      {
+        path: 'compte',
+        children: [
+          {
+            path: '',
+            loadChildren: '../../compte/profil/profil.module#ProfilPageModule'
+          }
+        ]
+      },
+      {
+        path: 'partenaires',
+        children: [
+          {
+            path: '',
+            loadChildren: '../../partenaires/partenaires-list/partenaires-list.module#PartenairesListPageModule'
+          }
+        ]
+      },
+      {
         path: '',
         redirectTo: '/app/dashboard/offres-carte',
         pathMatch: 'full'

src/app/pages/offres/dashboard/dashboard.page.html

@@ -8,21 +8,33 @@
                 <!-- <ion-icon name="menu" size="large" color="light"></ion-icon> -->
             </ion-menu-button>
         </ion-buttons>
-        <!-- <ion-grid no-padding>
+        <!-- <ion-grid class="ion-no-padding">
             <ion-row>
-                <ion-col no-padding>
+                <ion-col class="ion-no-padding">
                     <ion-icon name="ribbon" color="secondary"></ion-icon>
                     <ion-label color="light">10 542</ion-label>
                 </ion-col>
             </ion-row>
             <ion-row>
-                <ion-col no-padding>
+                <ion-col class="ion-no-padding">
                     <ion-icon name="ribbon" color="secondary"></ion-icon>
                     <ion-label color="light">10 542</ion-label>
                 </ion-col>
             </ion-row>
         </ion-grid> -->
-        <ion-chip slot="end">
+        <!-- <ion-chip slot="end" (click)="token()">
+            <ion-icon name="refresh" color="dark" class="ion-no-margin"></ion-icon>
+        </ion-chip> -->
+        <ion-chip slot="end" routerLink="/app/mode-carte" routerDirection="forward" routerLinkActive="active" *ngIf="show_header === 'main'">
+            <ion-icon name="locate" color="dark" class="ion-no-margin"></ion-icon>
+        </ion-chip>
+        <ion-chip slot="end" routerLink="/app/scroller" routerDirection="forward" routerLinkActive="active" *ngIf="show_header === 'main'">
+            <!-- <ion-icon name="trending-up" color="blue"></ion-icon>
+            <ion-label color="dark" class="ion-padding-end">{{ _QST.pointsExp }}</ion-label> -->
+            <!-- <ion-icon name="search-outline" color="secondary"></ion-icon> -->
+            <ion-icon name="heart-half" color="dark" class="ion-no-margin"></ion-icon>
+        </ion-chip>
+        <ion-chip slot="end" routerLink="/app/dashboard/merites" routerDirection="forward" routerLinkActive="active" *ngIf="show_header === 'main' && !_AUTH.isAnonymous">
             <!-- <ion-icon name="trending-up" color="blue"></ion-icon>
             <ion-label color="dark" class="ion-padding-end">{{ _QST.pointsExp }}</ion-label> -->
             <ion-icon name="ribbon" color="secondary"></ion-icon>
@@ -38,11 +50,11 @@
         <!--<ion-searchbar hidden [(ngModel)]="terms" placeholder="Rechercher"></ion-searchbar>-->
         <!--</ion-title>-->
     </ion-toolbar>
-    <ion-grid color="primary" *ngIf="show_more_filters" no-padding>
+    <ion-grid color="primary" *ngIf="show_more_filters" class="ion-no-padding">
         <!--			<ion-row>
               <ion-col col-12>
                 <ion-card class="top-card" no-margin>
-                  <ion-card-content no-padding>
+                  <ion-card-content class="ion-no-padding">
                     <ion-item>
                       <ion-label class="text-1x bold text-primary">Etablissement</ion-label>
                       <ion-select cancelText="Fermer" class="text-primary" [(ngModel)]="terms" (ionChange)="onContextChange($event.id)">
@@ -54,8 +66,8 @@
                 </ion-card>
               </ion-col>
             </ion-row>-->
-        <ion-row no-padding>
-            <ion-col col-12 no-padding>
+        <ion-row class="ion-no-padding">
+            <ion-col col-12 class="ion-no-padding">
                 <ion-item color="primary">
                     <ion-label color="light" class="text-1x">Offres Carte Testeur seulement</ion-label>
                     <ion-toggle checked color="secondary" [(ngModel)]="prm_ctonly" [ngModelOptions]="{standalone: true}"
@@ -63,8 +75,8 @@
                 </ion-item>
             </ion-col>
         </ion-row>
-        <ion-row no-padding>
-            <ion-col col-12 no-padding>
+        <ion-row class="ion-no-padding">
+            <ion-col col-12 class="ion-no-padding">
                 <ion-item color="primary" lines="none">
                     <ion-label color="light" class="text-1x">Offres populaires</ion-label>
                     <ion-toggle checked color="secondary" [(ngModel)]="prm_hotdeals"
@@ -81,15 +93,26 @@
 <ion-content>
     <ion-tabs>
         <ion-tab-bar slot="bottom">
-            <ion-tab-button tab="offres-carte">
-                <ion-icon name="card"></ion-icon>
-                <ion-label>Offres Carte Testeur</ion-label>
+            <ion-tab-button tab="compte" (click)="setHeader('compte')" *ngIf="!_AUTH.isAnonymous">
+                <ion-icon name="person"></ion-icon>
+                <ion-label>Compte</ion-label>
+            </ion-tab-button>
+            <ion-tab-button tab="favoris" (click)="setHeader('main')" *ngIf="!_AUTH.isAnonymous">
+                <ion-icon name="heart"></ion-icon>
+                <ion-label>Favoris</ion-label>
+            </ion-tab-button>
+            <ion-tab-button tab="offres-carte" (click)="setHeader('main')">
+                <ion-icon name="home"></ion-icon>
+                <ion-label>Offres</ion-label>
                 <ion-badge color="dark">{{_TRIP.filtredProducts.length}}</ion-badge>
             </ion-tab-button>
-
-            <ion-tab-button tab="offres-tlm">
-                <ion-icon name="people"></ion-icon>
-                <ion-label>Pour tout le monde</ion-label>
+            <ion-tab-button tab="partenaires" (click)="setHeader('main')">
+                <ion-icon name="cart"></ion-icon>
+                <ion-label>Boutiques</ion-label>
+            </ion-tab-button>
+            <ion-tab-button tab="merites" (click)="setHeader('main')" *ngIf="!_AUTH.isAnonymous">
+                <ion-icon name="ribbon"></ion-icon>
+                <ion-label>Mérites</ion-label>
             </ion-tab-button>
         </ion-tab-bar>
     </ion-tabs>

src/app/pages/offres/dashboard/dashboard.page.scss

@@ -66,3 +66,8 @@ ion-fab {
   min-height: 10rem;
   padding-top: 4.5rem;
 }
+ion-tab-button {
+  &.tab-selected {
+    border-top: 4px solid;
+  }
+}
\ No newline at end of file

src/app/pages/offres/dashboard/dashboard.page.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IonTabs } from "@ionic/angular";
 import { TripService } from '../../../services/trip-service';
 import { QuestsService } from '../../../services/quests.service';
+import { AppService } from "../../../services/app.service";
+import { AuthService } from "../../../services/auth.service";
 
 @Component({
   selector: 'app-dashboard',
@@ -13,16 +16,34 @@ export class DashboardPage implements OnInit {
   public products: any;
   public terms: any;
   public show_more_filters = false;
+  public show_header = 'main';
+
+  @ViewChild('dashTabs') dashTabs: IonTabs;
 
   constructor(
     public _TRIP: TripService,
-    public _QST: QuestsService
+    public _QST: QuestsService,
+    public _APP: AppService,
+    public _AUTH: AuthService
   ) {
   }
 
+  token() {
+    this._AUTH.doRefreshToken().then(res => {
+      console.log('res', res);
+    },
+    err => {
+      console.log('err', err);
+    });
+  }
+
   ngOnInit() {
     // console.log('ngOnInit Dashboard');
     // this._ALLO.presentLoading();
+    this._APP.$dashboard_header_buttons.subscribe(v => {
+      this.show_header = v;
+    });
+    // this._TRIP.getData('partners').then(r => console.log(r)).catch(e => console.log(e));
   }
 
   showHideMoreFilters() {
@@ -32,4 +53,8 @@ export class DashboardPage implements OnInit {
       this.show_more_filters = false;
     }
   }
+
+  setHeader(name) {
+    this._APP.$dashboard_header_buttons.next(name);
+  }
 }

src/app/pages/offres/mode-carte/mode-carte.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Routes, RouterModule } from '@angular/router';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ModeCartePage } from './mode-carte.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ModeCartePage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RouterModule.forChild(routes)
+  ],
+  declarations: [ModeCartePage]
+})
+export class ModeCartePageModule {}

src/app/pages/offres/mode-carte/mode-carte.page.html

+<!-- <ion-header>
+  <ion-toolbar color="primary">
+  </ion-toolbar>
+</ion-header> -->
+<ion-content>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button>
+      </ion-menu-button>
+    </ion-buttons>
+    <ion-chip slot="end" (click)="searchHere()">
+      Rechercher ici
+    </ion-chip>
+    <ion-chip slot="end" routerLink="/app/dashboard" routerDirection="root" routerLinkActive="active">
+      <ion-icon name="albums" color="dark" class="ion-no-margin"></ion-icon>
+    </ion-chip>
+    <ion-chip slot="end" routerLink="/app/scroller" routerDirection="root" routerLinkActive="active">
+      <ion-icon name="heart-half" color="dark" class="ion-no-margin"></ion-icon>
+    </ion-chip>
+    <ion-buttons slot="end">
+      <ion-chip>
+        <ion-icon name="options" color="primary" class="ion-no-margin"></ion-icon>
+      </ion-chip>
+    </ion-buttons>
+  </ion-toolbar>
+  <!-- <ion-slides pager="true">
+
+    <ion-slide padding>
+      <ion-card>
+        <img src="../../assets/img/DSC09608.JPG">
+        <ion-item>
+          <ion-avatar slot="end">
+            <img src="../../assets/img/avatar.jpeg">
+          </ion-avatar>
+          <ion-label>
+            <h2>The green place</h2>
+            <p>Café / Restaurant</p>
+          </ion-label>
+        </ion-item>
+      </ion-card>
+    </ion-slide>
+
+    <ion-slide padding>
+      <ion-card>
+        <img src="../../assets/img/DSC09608.JPG">
+        <ion-item>
+          <ion-avatar slot="end">
+            <img src="../../assets/img/avatar.jpeg">
+          </ion-avatar>
+          <ion-label>
+            <h2>The green place</h2>
+            <p>Café / Restaurant</p>
+          </ion-label>
+        </ion-item>
+      </ion-card>
+    </ion-slide>
+
+    <ion-slide padding>
+      <ion-card>
+        <img src="../../assets/img/DSC09608.JPG">
+        <ion-item>
+          <ion-avatar slot="end">
+            <img src="../../assets/img/avatar.jpeg">
+          </ion-avatar>
+          <ion-label>
+            <h2>The green place</h2>
+            <p>Café / Restaurant</p>
+          </ion-label>
+        </ion-item>
+      </ion-card>
+    </ion-slide>
+
+  </ion-slides> -->
+  <div style="position: fixed; bottom: 0; width: 100vw; z-index: 9999999;">
+    <div class="swiper-container">
+      <!-- Additional required wrapper -->
+      <div class="swiper-wrapper">
+        <!-- Slides -->
+        <div class="swiper-slide" *ngFor="let brand of _TRIP.brands">
+          <ion-card color="light">
+            <img class="big" [src]="brand.thumb" />
+            <ion-item>
+              <ion-avatar slot="end">
+                <img [src]="brand.thumb" />
+              </ion-avatar>
+              <ion-label>
+                <p>Restaurant</p>
+                <h3>{{ brand.label }}</h3>
+                <p>{{ brand.adresse }}</p>
+                <p>
+                  <ion-icon name="star" color="secondary"></ion-icon> 5 étoiles &nbsp; &nbsp;
+                  <ion-icon name="chatbubbles" color="medium"></ion-icon> 5 avis &nbsp; &nbsp;
+                  <ion-icon name="gift" color="medium"></ion-icon> 45 offres
+                </p>
+              </ion-label>
+            </ion-item>
+            <!-- <ion-card-header>
+              <ion-card-subtitle>Restaurant</ion-card-subtitle>
+              <ion-card-title>{{ brand.label }}</ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <ion-icon name="star" color="secondary"></ion-icon> 5 étoiles &nbsp; &nbsp;
+              <ion-icon name="chatbubbles" color="medium"></ion-icon> 5 avis &nbsp; &nbsp;
+              <ion-icon name="gift" color="medium"></ion-icon> 45 offres
+            </ion-card-content> -->
+          </ion-card>
+        </div>
+      </div>
+      <!-- If we need pagination -->
+      <div class="swiper-pagination"></div>
+
+      <!-- If we need scrollbar -->
+      <div class="swiper-scrollbar"></div>
+    </div>
+  </div>
+  <div id="map" style="width:100%; height:100%;"></div>
+</ion-content>
\ No newline at end of file

src/app/pages/offres/mode-carte/mode-carte.page.scss

+ion-toolbar {
+    --background: none !important;
+    position: absolute !important;
+    z-index: 9999 !important;
+    // width: 60vw !important;
+    right: 0 !important;
+}
+ion-slides {
+    height: 60vh;
+    width: 100vw;
+    position: absolute;
+    bottom: 0;
+    z-index: 99999;
+    //   ion-slide {
+    //     height: 50vh;
+    //     width: 100vw;
+    //   }
+}
+
+ion-card {
+    width: calc(100vw - 20px);
+    transition: 0.5s;
+    h3 {
+        font-family: "Open Sans";
+        text-transform: uppercase;
+        color: var(--ion-color-primary);
+    }
+    ion-card-header {
+        ion-card-subtitle {
+            font-family: "Open Sans";
+            text-transform: uppercase;
+            color: var(--ion-color-primary);
+        }
+        ion-card-title {
+            font-family: "Open Sans Light";
+            text-transform: uppercase;
+            margin: 0 !important;
+        }
+    }
+    img.big {
+        background-color: var(--ion-color-medium);
+        height: 20vh;
+        object-fit: cover;
+    }
+}

src/app/pages/offres/mode-carte/mode-carte.page.spec.ts

+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ModeCartePage } from './mode-carte.page';
+
+describe('ModeCartePage', () => {
+  let component: ModeCartePage;
+  let fixture: ComponentFixture<ModeCartePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ModeCartePage ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModeCartePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/offres/mode-carte/mode-carte.page.ts

+import { Component, OnInit } from '@angular/core';
+import { TripService } from '../../../services/trip-service';
+import { LocationService } from '../../../services/location-service';
+import { MapsService } from '../../../services/maps.service';
+import L from 'leaflet';
+import 'leaflet.markercluster';
+
+@Component({
+  selector: 'app-mode-carte',
+  templateUrl: './mode-carte.page.html',
+  styleUrls: ['./mode-carte.page.scss'],
+})
+export class ModeCartePage implements OnInit {
+
+  private map: any;
+
+  constructor(
+    public _TRIP: TripService,
+    public _LOCL: LocationService,
+    public _MAPS: MapsService
+  ) { }
+
+  ionViewDidEnter() {
+    // this.loader = this.loadingCtrl.create({
+    //   message: 'Chargement...'
+    // });
+
+    // this.loader.present();
+    // this.loadmap();
+    this._MAPS.loadMapGoogle();
+    this._TRIP.getData(true).then(services => {
+      this._MAPS.loadMarkersGoogle(services.brands);
+      this._MAPS.setSwiper();
+    });
+  }
+
+  ionViewDidLeave() {
+    this._MAPS.removeMapGoogle();
+  }
+
+  searchHere() {
+    this.map.flyTo([34.255670, -6.578737], 16);
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/offres/offre-details/offre-details.page.html

 <ion-header>
-    <ion-toolbar color="primary">
+    <ion-toolbar [class.show-tb]="showToolbar">
         <ion-buttons slot="start">
-            <ion-back-button defaultHref="/app/dashboard" text="Retour"></ion-back-button>
+            <ion-back-button defaultHref="/app/dashboard" text=""></ion-back-button>
         </ion-buttons>
         <ion-title>
-            <span ion-text>{{ trip.location }}</span>
+            <!-- <span ion-text>{{ trip?.titre_partenaire }}</span> -->
         </ion-title>
+        <ion-badge color="success" slot="end" class="ion-margin-end">-20% de réduction</ion-badge>
     </ion-toolbar>
 </ion-header>
-<ion-content class="common-bg">
-    <ion-card *ngIf="trip?.description">
-        <ion-img src="assets/img/ressources/ribbon.png"></ion-img>
-        <ion-slides *ngIf="trip?.images" class="to-top" pager>
+<ion-content class="common-bg" [scrollEvents]="true" (ionScroll)="onScroll($event)">
+    <!-- <div [hidden]="trip">
+        <ion-card class="skeleton ion-no-margin ion-margin-bottom">
+            <ion-skeleton-text class="img" animated></ion-skeleton-text>
+            <ion-card-header>
+                <ion-card-subtitle color="primary">
+                    <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+                </ion-card-subtitle>
+                <ion-card-title>
+                    <ion-skeleton-text style="height: 20px" animated></ion-skeleton-text>
+                </ion-card-title>
+            </ion-card-header>
+
+            <ion-card-content no-padding padding-horizontal padding-bottom>
+                <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+                <ion-skeleton-text animated></ion-skeleton-text>
+                <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
+                <ion-skeleton-text style="width: 50%" animated></ion-skeleton-text>
+            </ion-card-content>
+        </ion-card>
+    </div> -->
+
+    <!-- <div *ngIf="trip?.description"> -->
+    <div>
+        <div class="main-image">
+            <ion-img [src]="cfg.DRUPAL_URL + trip?.photo_carte_app_mob"></ion-img>
+            <div class="mask">
+                {{ trip?.titre }}
+            </div>
+        </div>
+        <ion-item class="infos-partner" lines="none">
+            <div *ngIf="!_AUTH.isAnonymous">
+                <ion-button color="medium" fill="outline" class="bookmark ion-no-padding"
+                    (click)="_TRIP.wishList(trip, 'add', $event)" *ngIf="!trip?.bookmarked">
+                    <ion-icon name="heart-empty" color="medium"></ion-icon>
+                </ion-button>
+                <ion-button color="medium" fill="outline" class="bookmark ion-no-padding"
+                    (click)="_TRIP.wishList(trip, 'remove', $event)" *ngIf="trip?.bookmarked">
+                    <ion-icon name="heart" color="danger"></ion-icon>
+                </ion-button>
+            </div>
+            <ion-avatar slot="start">
+                <ion-img [src]="cfg.DRUPAL_URL + trip?.logo_partenaire">
+                </ion-img>
+            </ion-avatar>
+            <ion-label>
+                <h3>{{ trip?.titre_categorie }}</h3>
+                <p>{{ trip?.nom_categorie }}</p>
+                <p *ngIf="trip?.adresse_partenire">
+                    <ion-icon name="pin" color="primary" slot="start"></ion-icon> {{ trip?.adresse_partenire }}
+                </p>
+                <p lines="none" *ngIf="trip?.telephone_partenire">
+                    <ion-icon name="phone-portrait" color="primary" slot="start"></ion-icon>
+                    {{ trip?.telephone_partenire }}
+                </p>
+            </ion-label>
+        </ion-item>
+        <ion-card mode="ios">
+            <ion-card-content>
+                {{ trip?.description }}
+            </ion-card-content>
+        </ion-card>
+        <!-- <ion-slides *ngIf="trip?.images" class="to-top" pager>
             <ion-slide *ngFor="let image of trip.images">
                 <img [src]="image" alt="">
             </ion-slide>
-        </ion-slides>
-        <ion-slides *ngIf="trip?.images?.length < 1" class="to-top" pager>
-            <img [src]="trip.thumb" alt="">
-        </ion-slides>
+        </ion-slides> -->
+        <!-- <ion-slides *ngIf="trip?.images?.length < 1" class="to-top" pager> -->
+        <img [src]="cfg.DRUPAL_URL + trip?.photo_carte_app_mob" alt="">
+        <!-- </ion-slides> -->
         <ion-card-header color="primary">
-            <ion-card-title>{{ trip.sub_name }}</ion-card-title>
+            <ion-card-title>{{ trip?.titre }}</ion-card-title>
         </ion-card-header>
         <ion-card-content>
-            {{ trip.description }}
+            {{ trip?.description }}
         </ion-card-content>
         <ion-list>
-            <ion-item *ngIf="trip?.brand_adresse">
+            <ion-item *ngIf="trip?.nom_categorie">
+                <!-- <ion-icon name="pin" color="primary" slot="start"></ion-icon> -->
+                <ion-badge>{{ trip?.nom_categorie }}</ion-badge>
+            </ion-item>
+            <ion-item *ngIf="trip?.adresse_partenire">
                 <ion-icon name="pin" color="primary" slot="start"></ion-icon>
-                <ion-label>Adresse : {{ trip.brand_adresse }}</ion-label>
+                <ion-label>Adresse : {{ trip?.adresse_partenire }}</ion-label>
             </ion-item>
-            <ion-item href="tel://{{ trip.brand_tel }}" lines="none" *ngIf="trip?.brand_tel">
+            <ion-item href="tel://{{ trip?.telephone_partenire }}" lines="none" *ngIf="trip?.telephone_partenire">
                 <ion-icon name="phone-portrait" color="primary" slot="start"></ion-icon>
-                <ion-label>Tél : {{ trip.brand_tel }}</ion-label>
+                <ion-label>Tél : {{ trip?.telephone_partenire }}</ion-label>
             </ion-item>
         </ion-list>
-    </ion-card>
+    </div>
 </ion-content>
\ No newline at end of file

src/app/pages/offres/offre-details/offre-details.page.scss

@@ -34,3 +34,87 @@ ul.highlight {
     text-align: justify;
   }
 }
+ion-header {
+  position: absolute;
+  &::after {
+    background: none;
+  }
+  ion-toolbar {
+    --background: transparent;
+    transition: 1s linear;
+    &.show-tb {
+      --background: #ffffff;
+      transition: 1s linear;
+    }
+    ion-back-button {
+      background: #ffffff;
+      border-radius: 24px;
+    }
+  }
+}
+ion-content {
+  .main-image {
+    position: relative;
+  }
+  .mask {
+    width: 100%;
+    height: 100%;
+    background: rgb(252, 252, 252);
+    background: linear-gradient(180deg, rgba(252, 252, 252, 0) 72%, rgba(106, 106, 106, 0.451418) 84%, #545454 100%);
+    // border-radius: 8px;
+    color: #fff;
+    display: flex;
+    align-items: flex-end;
+    padding: 15px 15px 45px;
+    position: absolute;
+    top: 0;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
+    font-weight: 200;
+    font-family: Montserrat;
+    font-size: 5vw;
+  }
+  ion-item {
+    // box-shadow: 0px 23px 25px -8px rgba(0, 0, 0, 0.37);
+    // -webkit-box-shadow: 0px 23px 25px -8px rgba(0, 0, 0, 0.37);
+    // -moz-box-shadow: 0px 23px 25px -8px rgba(0, 0, 0, 0.37);
+    &.infos-partner {
+      border-top-left-radius: 30px;
+      margin-top: -30px;
+      border-top-right-radius: 30px;
+      p {
+        font-size: 3vw;
+        font-family: Montserrat;
+        font-weight: 300;
+      }
+      .bookmark {
+        // background: var(--ion-color-light, #fff);
+        // border: 1px dotted var(--ion-color-dark, #000);
+        position: absolute;
+        right: 1rem;
+        top: 1rem;
+        z-index: 9;
+        margin: 0;
+        height: 2.9em;
+        --border-radius: 30px;
+        --background: #fff;
+        --box-shadow: none;
+        --border-width: 1px;
+        // width: 46px;
+        // height: 44px;
+        // padding: 10px;
+        ion-icon {
+          font-size: 24px;
+          margin: 6px;
+          &.ios {
+            margin: 6px 11px !important;
+          }
+        }
+      }
+    }
+  }
+  ion-card {
+    font-family: Montserrat;
+    background: white;
+    margin-top: 40px;
+  }
+}

src/app/pages/offres/offre-details/offre-details.page.ts

 import { Component, OnInit } from '@angular/core';
 import { AlloService } from '../../../services/allo-service';
 import { TripService } from '../../../services/trip-service';
+import { AuthService } from '../../../services/auth.service';
 import { Storage } from '@ionic/storage';
 import { ActivatedRoute } from '@angular/router';
 
+import * as Config from '../../../constants';
+
 @Component({
     selector: 'app-offre-details',
     templateUrl: './offre-details.page.html',
@@ -11,6 +14,7 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class OffreDetailsPage implements OnInit {
 
+    public cfg;
     // trip info
     public trip: any;
     // number of adult
@@ -18,29 +22,45 @@ export class OffreDetailsPage implements OnInit {
     // number of children
     public children = 0;
     private oid = null;
+    showToolbar = false;
 
     constructor(
         private activatedRoute: ActivatedRoute,
         public _TRIP: TripService,
         private _ALLO: AlloService,
+        private _AUTH: AuthService,
         private _STOR: Storage) {
-        this.trip = {};
-        this._STOR.get('REST_services').then((data) => {
-            if (data) {
-                if (null !== data && 'object' === typeof data && data.hasOwnProperty('products')) {
-                    var products = this._ALLO.jsonToArray(data.products);
-                    for (var i = 0; i < products.length; i++) {
-                        if (products[i].id === parseInt(this.oid)) {
-                            this.trip = products[i];
-                        }
-                    }
+        // this._STOR.get('REST_services').then((data) => {
+        //     if (data) {
+        //         if (null !== data && 'object' === typeof data && data.hasOwnProperty('products')) {
+        //             var products = this._ALLO.jsonToArray(data.products);
+        //             for (var i = 0; i < products.length; i++) {
+        //                 if (products[i].id === parseInt(this.oid)) {
+        //                     this.trip = products[i];
+        //                 }
+        //             }
+        //         }
+        //     }
+        // });
     }
+
+    ngOnInit() {
+        this.cfg = Config;
+        this.oid = this.activatedRoute.snapshot.paramMap.get('oid');
+        this._TRIP.getOffer(this.oid).then(r => {
+            console.log(this.oid, r);
+
+            if (r) {
+                this.trip = r[0];
             }
         });
     }
 
-    ngOnInit() {
-        this.oid = this.activatedRoute.snapshot.paramMap.get('oid');
+    onScroll($event) {
+        if ($event && $event.detail && $event.detail.scrollTop) {
+            const scrollTop = $event.detail.scrollTop;
+            this.showToolbar = scrollTop >= 225;
+        }
     }
 
 }

src/app/pages/offres/offres-carte/offres-carte.page.html

 <!-- <ion-list-header>Catégories :</ion-list-header> -->
-<div class="app">
+<!-- <div class="app">
   <ul class="hs">
     <li class="item">
       <ion-chip (click)="_TRIP.filterList('all')">
@@ -12,14 +12,72 @@
       </ion-chip>
     </li>
   </ul>
-</div>
-<ion-content padding-horizontal padding-bottom class="dashboard">
-
-  <ion-refresher (ionRefresh)="doRefresh($event)">
-    <ion-refresher-content></ion-refresher-content>
+</div> -->
+<ion-content color="light" class="dashboard">
+  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content pullingText="Swipez en bas pour rafraîchir" refreshingSpinner="dots"
+      refreshingText="En cours...">
+    </ion-refresher-content>
   </ion-refresher>
-  <div *ngIf="_TRIP.filtredProducts.length <= 0">
-    <ion-card class="skeleton" tappable no-margin margin-bottom>
+  <!-- <ion-refresher (ionRefresh)="doRefresh($event)" slot="fixed" >
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher> -->
+  <div class="header-slider">
+    <ion-list-header>Hot deals! <ion-badge color="tertiary" class="ion-margin-end">Sponsorisé</ion-badge>
+    </ion-list-header>
+    <ion-item class="ion-no-padding">
+      <div class="app" *ngIf="_TRIP.products.length > 0">
+        <ul class="hs">
+          <li class="item" *ngFor="let trip of _TRIP.products">
+            <div class="badges ion-text-right">
+              <div class="bookmark" *ngIf="!_AUTH.isAnonymous">
+                <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'add', true)"
+                  *ngIf="!trip.bookmarked" class="ion-no-padding">
+                  <ion-icon name="heart-empty"></ion-icon>
+                </ion-button>
+                <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'remove', true)"
+                  *ngIf="trip.bookmarked" class="ion-no-padding">
+                  <ion-icon name="heart" color="danger"></ion-icon>
+                </ion-button>
+              </div>
+              <!-- <ion-badge color="blue">
+              <ion-icon name="trending-up"></ion-icon> 400
+            </ion-badge> -->
+              <ion-badge color="secondary" margin-left>
+                <ion-text color="light">
+                  <ion-icon name="ribbon"></ion-icon> 200
+                </ion-text>
+              </ion-badge>
+            </div>
+            <div (click)="viewDetail(trip.id)"
+              [ngStyle]="{'background-image': 'url(' + trip.thumb + ')', 'background-color': '#fff', 'background-repeat': 'no-repeat', 'background-size': 'cover', 'width': '100%', 'height': '100%', 'border-radius': '8px', 'display': 'flex'}">
+              <div class="mask">
+                <ion-grid class="ion-no-padding">
+                  <ion-row>
+                    <ion-col class="ion-no-padding"> {{trip.name}} </ion-col>
+                  </ion-row>
+                  <ion-row>
+                    <ion-col class="ion-no-padding">
+                      <ion-badge color="light">
+                        <ion-text color="primary">
+                          <ion-label>
+                            <ion-icon name="pin"></ion-icon> {{ trip.location }}
+                          </ion-label>
+                        </ion-text>
+                      </ion-badge>
+                    </ion-col>
+                  </ion-row>
+                </ion-grid>
+              </div>
+            </div>
+            <!-- <ion-img src="../../../../assets/img/avatar.jpeg"></ion-img> -->
+          </li>
+        </ul>
+      </div>
+    </ion-item>
+  </div>
+  <div class="ion-padding" *ngIf="offres.length <= 0">
+    <ion-card class="skeleton ion-no-margin ion-margin-bottom">
       <ion-skeleton-text class="img" animated></ion-skeleton-text>
       <ion-card-header>
         <ion-card-subtitle color="primary">
@@ -37,7 +95,7 @@
         <ion-skeleton-text style="width: 50%" animated></ion-skeleton-text>
       </ion-card-content>
     </ion-card>
-    <ion-card class="skeleton" tappable no-margin margin-bottom>
+    <ion-card class="skeleton ion-no-margin ion-margin-bottom">
       <ion-skeleton-text class="img" animated></ion-skeleton-text>
       <ion-card-header>
         <ion-card-subtitle color="primary">
@@ -56,32 +114,47 @@
       </ion-card-content>
     </ion-card>
   </div>
-  <div class="card-wrapper" *ngFor="let trip of _TRIP.offersCardList">
+  <div class="card-wrapper ion-padding" *ngFor="let trip of offres">
     <div *ngIf="!_AUTH.isAnonymous">
-      <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'add')"
-        *ngIf="!trip.bookmarked" no-padding>
-        <ion-icon name="heart-empty"></ion-icon>
+      <ion-button color="light" fill="solid" class="bookmark ion-no-padding"
+        (click)="_TRIP.wishList(trip, 'add', $event)" *ngIf="!trip.bookmarked">
+        <ion-icon name="heart-empty" color="medium"></ion-icon>
       </ion-button>
-      <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'remove')"
-        *ngIf="trip.bookmarked" no-padding>
+      <ion-button color="light" fill="solid" class="bookmark ion-no-padding"
+        (click)="_TRIP.wishList(trip, 'remove', $event)" *ngIf="trip.bookmarked">
         <ion-icon name="heart" color="danger"></ion-icon>
       </ion-button>
     </div>
-    <ion-card (click)="viewDetail(trip.id)" tappable no-margin margin-bottom>
+    <ion-card class="ion-no-margin ion-margin-bottom" routerLink="/app/details-offre/{{trip.id}}"
+      routerDirection="forward" routerLinkActive="active">
+      <ion-item lines="none">
+        <ion-avatar slot="start">
+          <ion-img [src]="cfg.DRUPAL_URL + trip.logo_partenaire_thumb">
+          </ion-img>
+        </ion-avatar>
+        <ion-label>
+          <h3>{{ trip.titre_partenaire }}</h3>
+          <p class="text-sm">{{ trip.nom_categorie }}</p>
+        </ion-label>
+      </ion-item>
       <div class="img-spinner-wrap ion-text-center">
         <ion-spinner name="dots" *ngIf="trip.hidden"></ion-spinner>
       </div>
-      <ion-img [src]="trip.thumb" [class.no-visibility]="trip.hidden" (ionImgDidLoad)="setImgVisible(trip)"></ion-img>
+      <ion-img class="main" [src]="cfg.DRUPAL_URL + trip.photo_carte_app_mob" [class.no-visibility]="trip.hidden"
+        (ionImgDidLoad)="setImgVisible(trip)"></ion-img>
       <ion-card-header>
         <ion-card-subtitle color="primary">
-          <ion-icon name="pin"></ion-icon>
-          <ion-label>{{ trip.location }}</ion-label>
-          <ion-badge fill="outline" *ngIf="trip.price_adult" color="warning">
+          <!-- <ion-icon name="pin"></ion-icon>
+          <ion-label>{{ trip.location }}</ion-label> -->
+          <!-- <ion-avatar class="ion-no-margin ion-no-padding">
+            <ion-img src="https://allo-testeurs.com/wp-content/uploads/2019/04/C-la-vue-150x150.png"></ion-img>
+          </ion-avatar> -->
+          <!-- <ion-badge fill="outline" *ngIf="trip.price_adult" color="warning">
             -{{ ((trip.price_adult_before - trip.price_adult) * 100) / trip.price_adult_before | number:'1.0-0' }}%
-          </ion-badge>
+          </ion-badge> -->
         </ion-card-subtitle>
         <ion-card-title>
-          {{ trip.name | slice:0:100 }}
+          {{ trip.titre | slice:0:30 }}
         </ion-card-title>
       </ion-card-header>
 
@@ -90,10 +163,18 @@
     <ion-label>{{ trip.location }}</ion-label>
     <ion-button fill="outline" slot="end">View</ion-button>
   </ion-item> -->
-      <ion-card-content no-padding padding-horizontal padding-bottom>
-        {{ trip.description | slice:0:130 }}...
+      <ion-card-content class="ion-no-padding ion-padding-horizontal ion-padding-bottom">
+        <p>
+          {{ trip.description | slice:0:100 }}...
+        </p>
+        <p class="bottom-card ion-padding-top">
+          <ion-icon name="heart" color="primary"></ion-icon>&nbsp;<strong>34 wishes</strong>
+          &nbsp;<span>.</span>&nbsp;
+          <!-- <ion-icon name="chatbubbles" color="medium"></ion-icon> --> <strong>5 avis</strong>
+          <!-- <ion-icon name="gift" color="medium"></ion-icon> 45 offres -->
+        </p>
       </ion-card-content>
-      <ion-item *ngIf="trip.price_adult" color="primary" lines="none">
+      <!-- <ion-item *ngIf="trip.price_adult" color="primary" lines="none">
         <ion-icon name="cash" slot="start"></ion-icon>
         <ion-button slot="end" class="before">
           <ion-text color="light">
@@ -105,7 +186,7 @@
             {{ trip.price_adult }} Dh
           </ion-text>
         </ion-button>
-      </ion-item>
+      </ion-item> -->
     </ion-card>
   </div>
   <ion-fab vertical="bottom" horizontal="end" slot="fixed">

src/app/pages/offres/offres-carte/offres-carte.page.scss

 .dashboard {
+  .header-slider {
+    background: #fff1d0;
+    // background: linear-gradient(to bottom, #ffffff, #fbfbfb, #f6f6f6, #f2f2f2, #eeeeee);
+    ion-item {
+      --background: #fff1d0;
+    }
+  }
+  .bottom-card {
+    font-size: 0.8rem;
+  }
   ion-card {
     ion-skeleton-text.img {
       margin: 0 !important;
       min-height: 160px;
     }
+    ion-label {
+      h3 {
+        margin: 0;
+      }
+      .text-sm {
+        font-size: 0.8rem;
+        color: #888;
+      }
+    }
     ion-badge {
       float: right;
       margin-top: -36px;
@@ -14,11 +33,43 @@
       align-items: center;
       justify-content: center;
     }
-    ion-img {
-      height: 15rem;
+    ion-img.main {
+      height: 11rem;
       background: var(--ion-color-tertiary, #989aa2);
       object-fit: cover;
     }
+    ion-card-header {
+      border-top: 1px solid #eee;
+    }
+    ion-card-content {
+      span {
+        color: #ddd;
+        font-size: 40px;
+        line-height: 0;
+      }
+    }
+    ion-card-header,
+    ion-card-content {
+      --background: #ffffff;
+      background: #ffffff;
+    }
+    ion-card-title {
+      font-weight: bold;
+    }
+    ion-card-subtitle {
+      --background: #ffffff;
+      ion-avatar {
+        position: absolute;
+        top: -14vw;
+        right: 0;
+        border: 1.5vw solid #ffffff;
+        width: 20vw;
+        height: 20vw;
+        ion-img {
+          border: none;
+        }
+      }
+    }
     ion-item {
       ion-button {
         font-size: large;
@@ -58,12 +109,15 @@ div[scrollx="true"] {
 div[scrolly="true"] {
   overflow-y: auto;
 }
-
+////////////////////////////////////////////////////////////////////////////////////////////////////
+ion-list-header{
+  font-weight: 700;
+}
 .app {
-  padding: 0;
+  //   padding: 20px 0;
   display: grid;
   grid-gap: 20px 0;
-  // grid-template-columns: 20px 1fr 20px;
+  grid-template-columns: 10px 1fr 0;
   align-content: start;
 }
 
@@ -77,14 +131,15 @@ div[scrolly="true"] {
 
 .hs {
   display: grid;
-  // grid-gap: calc(20px / 2);
-  grid-template-columns: repeat(9999999, auto);
-  // grid-template-rows: minmax(150px, 1fr);
+  grid-gap: calc(20px / 2);
+  grid-template-columns: repeat(999999999, calc(80% - 20px * 2));
+  grid-template-rows: minmax(150px, 1fr);
 
   overflow-x: scroll;
   scroll-snap-type: x proximity;
-  // padding-bottom: calc(.75 * 20px);
-  // margin-bottom: calc(-.25 * 20px);
+  padding-bottom: calc(0.75 * 20px);
+  margin-bottom: calc(-0.25 * 20px);
+  margin-top: 0;
 }
 
 /* Demo styles */
@@ -108,31 +163,74 @@ ul {
 .hs > li,
 .item {
   scroll-snap-align: center;
-  // padding: calc(20px / 2 * 1.5);
+  padding: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background: #fff;
+  background: #fff1d0;
   border-radius: 8px;
+  position: relative;
+  .mask {
+    width: 100%;
+    height: 100%;
+    background: rgb(252, 252, 252);
+    background: linear-gradient(
+      180deg,
+      rgba(252, 252, 252, 0) 32%,
+      rgba(106, 106, 106, 0.4514180672268907) 70%,
+      rgba(84, 84, 84, 1) 100%
+    );
+    border-radius: 8px;
+    color: #fff;
+    display: flex;
+    align-items: flex-end;
+    padding: 0 6px;
+  }
+  .badges {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    padding: 5px;
+    .bookmark {
+      position: absolute;
+      ion-button {
+        margin: 0 !important;
+        padding: 0 !important;
+        height: auto !important;
+        --border-radius: 16px;
+        ion-icon {
+          font-size: 16px;
+          margin: 6px;
+          &.ios {
+            margin: 6px !important;
+          }
+        }
+      }
+    }
+  }
 }
+
 .card-wrapper {
   position: relative;
   .bookmark {
     // background: var(--ion-color-light, #fff);
     // border: 1px dotted var(--ion-color-dark, #000);
     position: absolute;
-    right: 10px;
-    top: 10px;
-    --border-radius: 30px;
+    right: 1.5rem;
+    top: 17rem;
     z-index: 9;
+    margin: 0;
+    --border-radius: 30px;
+    --background: #fff;
+    --box-shadow: none;
     // width: 46px;
     // height: 44px;
     // padding: 10px;
     ion-icon {
       font-size: 24px;
       margin: 6px;
-      &.ios{
+      &.ios {
         margin: 6px 11px !important;
       }
     }

src/app/pages/offres/offres-carte/offres-carte.page.ts

@@ -8,6 +8,8 @@ import { AuthService } from '../../../services/auth.service';
 import { TripService } from '../../../services/trip-service';
 import { OffresCarteFiltersPage } from '../../../modals/offres-carte-filters/offres-carte-filters.page';
 
+import * as Config from '../../../constants';
+
 @Component({
   selector: 'app-offres-carte',
   templateUrl: './offres-carte.page.html',
@@ -16,7 +18,16 @@ import { OffresCarteFiltersPage } from '../../../modals/offres-carte-filters/off
 export class OffresCartePage implements OnInit {
   @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
 
+  public cfg;
   public toast: any;
+  public offres = [];
+  public pager = {
+    "count": 0,
+    "pages": 0,
+    "items_per_page": 2,
+    "current_page": 0,
+    "next_page": 1
+  };
 
   constructor(
     public _ALLO: AlloService,
@@ -29,21 +40,39 @@ export class OffresCartePage implements OnInit {
     private storage: Storage) { }
 
   ngOnInit() {
+    this.cfg = Config;
     this.ga.trackView('Page : Offres Carte Testeur');
+    this._TRIP.getData('offers').then(r => {
+      this.offres = r.results;
+      this.pager = r.pager;
+    });
   }
 
   loadData(event) {
+    if (this.pager.next_page > 0) {
       setTimeout(() => {
-      ++this._TRIP.offersCardListPointer;
-      let loadedData = this._TRIP.filtredProducts.slice(this._TRIP.offersCardListPointer, this._TRIP.offersCardListPointer + 2);
-      if (loadedData) {
-        this._TRIP.offersCardListPointer = this._TRIP.offersCardListPointer + 1;
-        this._TRIP.offersCardList = this._TRIP.offersCardList.concat(loadedData);
+        this._TRIP.getData('offers', this.pager).then(r => {
+          if (r) {
+            this.offres = this.offres.concat(r.results);
+            this.pager = r.pager;
             event.target.complete();
           } else {
             event.target.disabled = true;
           }
+        });
       }, 300);
+      // ++this._TRIP.offersCardListPointer;
+      // let loadedData = this._TRIP.filtredProducts.slice(this._TRIP.offersCardListPointer, this._TRIP.offersCardListPointer + 2);
+      // if (loadedData) {
+      //   this._TRIP.offersCardListPointer = this._TRIP.offersCardListPointer + 1;
+      //   this._TRIP.offersCardList = this._TRIP.offersCardList.concat(loadedData);
+      //   event.target.complete();
+      // } else {
+      //   event.target.disabled = true;
+      // }
+    } else {
+      event.target.disabled = true;
+    }
   }
 
   setImgVisible(trip) {
@@ -69,7 +98,7 @@ export class OffresCartePage implements OnInit {
     return await modal.present();
   }
 
-  async doRefresh(refresher) {
+  doRefresh(refresher) {
     try {
       this.toast.dismiss();
     } catch (e) { }
@@ -87,7 +116,8 @@ export class OffresCartePage implements OnInit {
     this.router.navigateByUrl('/app/details-offre/' + id);
   }
 
-  wishList(offer, action) {
+  wishList(ev, offer, action) {
+    // ev.preventDefault();
     this._TRIP.wishList(offer, action).then(result => {
       offer = result;
     });

src/app/pages/offres/offres-tlm/offres-tlm.page.html

@@ -25,11 +25,11 @@
         <div class="badges ion-text-right">
           <div class="bookmark" *ngIf="!_AUTH.isAnonymous">
             <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'add')"
-              *ngIf="!trip.bookmarked" no-padding>
+              *ngIf="!trip.bookmarked" class="ion-no-padding">
               <ion-icon name="heart-empty"></ion-icon>
             </ion-button>
             <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'remove')"
-              *ngIf="trip.bookmarked" no-padding>
+              *ngIf="trip.bookmarked" class="ion-no-padding">
               <ion-icon name="heart" color="danger"></ion-icon>
             </ion-button>
           </div>
@@ -45,12 +45,12 @@
         <div (click)="viewDetail(trip.id)"
           [ngStyle]="{'background-image': 'url(' + trip.thumb + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover', 'width': '100%', 'height': '100%', 'border-radius': '8px'}">
           <div class="mask">
-            <ion-grid no-padding>
+            <ion-grid class="ion-no-padding">
               <ion-row>
-                <ion-col no-padding> {{trip.name}} </ion-col>
+                <ion-col class="ion-no-padding"> {{trip.name}} </ion-col>
               </ion-row>
               <ion-row>
-                <ion-col no-padding>
+                <ion-col class="ion-no-padding">
                   <ion-badge color="light">
                     <ion-text color="primary">
                       <ion-label>
@@ -74,11 +74,11 @@
         <div class="badges ion-text-right">
           <div class="bookmark" *ngIf="!_AUTH.isAnonymous">
             <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'add')"
-              *ngIf="!trip.bookmarked" no-padding>
+              *ngIf="!trip.bookmarked" class="ion-no-padding">
               <ion-icon name="heart-empty"></ion-icon>
             </ion-button>
             <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'remove')"
-              *ngIf="trip.bookmarked" no-padding>
+              *ngIf="trip.bookmarked" class="ion-no-padding">
               <ion-icon name="heart" color="danger"></ion-icon>
             </ion-button>
           </div>
@@ -94,12 +94,12 @@
         <div (click)="viewDetail(trip.id)"
           [ngStyle]="{'background-image': 'url(' + trip.thumb + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover', 'width': '100%', 'height': '100%', 'border-radius': '8px'}">
           <div class="mask">
-            <ion-grid no-padding>
+            <ion-grid class="ion-no-padding">
               <ion-row>
-                <ion-col no-padding> {{trip.name}} </ion-col>
+                <ion-col class="ion-no-padding"> {{trip.name}} </ion-col>
               </ion-row>
               <ion-row>
-                <ion-col no-padding>
+                <ion-col class="ion-no-padding">
                   <ion-badge color="light">
                     <ion-text color="primary">
                       <ion-label>
@@ -158,11 +158,11 @@
     <div class="card-wrapper" *ngFor="let trip of _TRIP.offersCardList">
       <div *ngIf="!_AUTH.isAnonymous">
         <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'add')"
-          *ngIf="!trip.bookmarked" no-padding>
+          *ngIf="!trip.bookmarked" class="ion-no-padding">
           <ion-icon name="heart-empty"></ion-icon>
         </ion-button>
         <ion-button color="light" fill="solid" class="bookmark" (click)="_TRIP.wishList(trip, 'remove')"
-          *ngIf="trip.bookmarked" no-padding>
+          *ngIf="trip.bookmarked" class="ion-no-padding">
           <ion-icon name="heart" color="danger"></ion-icon>
         </ion-button>
       </div>

src/app/pages/offres/offres-tlm/offres-tlm.page.scss

@@ -4,6 +4,9 @@
   grid-gap: 20px 0;
   grid-template-columns: 10px 1fr 0;
   align-content: start;
+  overflow-y: scroll;
+  //   width: 375px;
+  //   height: 667px;
 }
 
 .app > * {
@@ -40,12 +43,6 @@ ul {
   padding: 0;
 }
 
-.app {
-  //   width: 375px;
-  //   height: 667px;
-  overflow-y: scroll;
-}
-
 .hs > li,
 .item {
   scroll-snap-align: center;

src/app/pages/offres/scroller/scroller.module.ts

@@ -6,6 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 
 import { ScrollerPage } from './scroller.page';
+import { TinderuiComponent } from "../../../components/tinderui/tinderui.component";
 
 const routes: Routes = [
   {
@@ -21,6 +22,6 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes)
   ],
-  declarations: [ScrollerPage]
+  declarations: [ScrollerPage, TinderuiComponent]
 })
 export class ScrollerPageModule {}

src/app/pages/offres/scroller/scroller.page.html

@@ -8,78 +8,22 @@
         <!-- <ion-icon name="menu" size="large" color="light"></ion-icon> -->
       </ion-menu-button>
     </ion-buttons>
-    <ion-title>Swipez à droite</ion-title>
+    <ion-title>Swipez !!</ion-title>
+    <ion-chip slot="end" routerLink="/app/mode-carte" routerDirection="forward" routerLinkActive="active">
+        <ion-icon name="locate" color="dark" class="ion-no-margin"></ion-icon>
+    </ion-chip>
+    <ion-chip slot="end" routerLink="/app/dashboard" routerDirection="root" routerLinkActive="active">
+      <ion-icon name="albums" color="dark" class="ion-no-margin"></ion-icon>
+    </ion-chip>
+    <ion-chip slot="end" routerLink="/app/mes-merites" routerDirection="forward" routerLinkActive="active" *ngIf="!_AUTH.isAnonymous">
+      <!-- <ion-icon name="trending-up" color="blue"></ion-icon>
+            <ion-label color="dark" class="ion-padding-end">{{ _QST.pointsExp }}</ion-label> -->
+      <ion-icon name="ribbon" color="secondary"></ion-icon>
+      <ion-label color="dark">{{ _QST.pointsMerites }}</ion-label>
+    </ion-chip>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-  <ion-slides>
-    <ion-slide>
-      <div class="skeleton ion-padding">
-        <ion-card>
-          <img src="https://ae01.alicdn.com/kf/HTB1ETgBe8Gw3KVjSZFDq6xWEpXaF/JBL-couteurs-filaires-3-5mm-oreillettes-basse-casque-d-coute-sportif-contr-le-mains-libres-en.jpg" />
-          <ion-card-header color="primary">
-            <ion-card-title>Lorem ipsum</ion-card-title>
-          </ion-card-header>
-          <ion-card-content>
-            Lorem ipsum sit dolor amet
-          </ion-card-content>
-          <!-- <ion-list>
-              <ion-item *ngIf="trip?.brand_adresse">
-                  <ion-icon name="pin" color="primary" slot="start"></ion-icon>
-                  <ion-label>Adresse : {{ trip.brand_adresse }}</ion-label>
-              </ion-item>
-              <ion-item href="tel://{{ trip.brand_tel }}" lines="none" *ngIf="trip?.brand_tel">
-                  <ion-icon name="phone-portrait" color="primary" slot="start"></ion-icon>
-                  <ion-label>Tél : {{ trip.brand_tel }}</ion-label>
-              </ion-item>
-          </ion-list> -->
-        </ion-card>
-      </div>
-    </ion-slide>
-
-    <ion-slide>
-
-      <div class="skeleton">
-        <ion-skeleton-text class="img" animated></ion-skeleton-text>
-        <ion-card-header>
-          <ion-card-subtitle color="primary">
-            <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
-          </ion-card-subtitle>
-          <ion-card-title>
-            <ion-skeleton-text style="height: 20px" animated></ion-skeleton-text>
-          </ion-card-title>
-        </ion-card-header>
-
-        <ion-card-content no-padding padding-horizontal padding-bottom>
-          <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
-          <ion-skeleton-text animated></ion-skeleton-text>
-          <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
-          <ion-skeleton-text style="width: 50%" animated></ion-skeleton-text>
-        </ion-card-content>
-      </div>
-    </ion-slide>
-
-    <ion-slide>
-
-      <div class="skeleton">
-        <ion-skeleton-text class="img" animated></ion-skeleton-text>
-        <ion-card-header>
-          <ion-card-subtitle color="primary">
-            <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
-          </ion-card-subtitle>
-          <ion-card-title>
-            <ion-skeleton-text style="height: 20px" animated></ion-skeleton-text>
-          </ion-card-title>
-        </ion-card-header>
-
-        <ion-card-content no-padding padding-horizontal padding-bottom>
-          <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
-          <ion-skeleton-text animated></ion-skeleton-text>
-          <ion-skeleton-text style="width: 80%" animated></ion-skeleton-text>
-          <ion-skeleton-text style="width: 50%" animated></ion-skeleton-text>
-        </ion-card-content>
-      </div>
-    </ion-slide>
-  </ion-slides>
+  <app-tinderui [cards]="_TRIP.offersCardList" (choiceMade)="logChoice($event)"></app-tinderui>
 </ion-content>
\ No newline at end of file

src/app/pages/offres/scroller/scroller.page.scss

@@ -12,3 +12,8 @@ ion-slide {
     height: 100% !important;
   }
 }
+ion-header {
+  ion-chip {
+    --background: #fff !important;
+  }
+}
\ No newline at end of file