wip checkout

src/app/pages/shop/components/shop-articles/shop-article-basket/shop-article-basket.component.html

@@ -13,9 +13,9 @@
 
 <div class="row justify-content-between">
     <div class="col-6">
-        <button class="btn btn-success">
+        <a [routerLink]="'checkout'" class="btn btn-success">
             <i class="bi bi-cart-check-fill"></i> Payer
-        </button>
+        </a>
     </div>
     <div class="col-6">
         <p>Total panier : <span class="fw-bold price-container">{{ shopService.formatPrice(shopService.countTotalPrice()) }} €</span></p>

src/app/pages/shop/components/shop-articles/shop-article-basket/shop-basket-list/shop-basket-list.component.html

@@ -1,4 +1,4 @@
-<div class="basket-tab">
+<div class="basket-tab text-white">
     <div class="basket-header">
         <h2 class="text-center">Panier</h2>
         <div class="row align-items-center">

src/app/pages/shop/shop-checkout/shop-checkout.component.html

@@ -1,60 +1,31 @@
-<div class="shop-container">
-  <div class="container">
-    <h1>Boutique - Payer</h1>
-    <p>Vos articles en cours et page de paiement.</p>
-  </div>
+<div class="container">
+    <h1>Boutique - Paiement</h1>
+    <p>Voici la liste de vos articles, vous pouvez payer sur cette page.</p>
 
-  <div class="container mb-5">
-    <div class="row">
-      <div class="col-md-7 mb-2">
-        <div class="bg-dark rounded-4 p-3">
-          <h2>Votre panier</h2>
-
-          <div class="row align-items-center">
-            <div class="col col-md-3">
-              <img class="img-fluid" src="https://pacifista.fr/app/webroot/img/shop/grades/Badge-Elite.png" alt="Logo shop">
-            </div>
-            <div class="col col-md-4">
-              <h3>Grade élite</h3>
-            </div>
-            <div class="col col-md-2">
-            </div>
-            <div class="col col-md-3">
-              <p>14.99€</p>
-            </div>
-          </div>
+    <h2>Total à payer</h2>
+    <h3 class="price-container">{{ shopService.formatPrice(shopService.countTotalPrice()) }} €</h3>
 
-          <div class="row align-items-center">
-            <div class="col col-md-3">
-              <img class="img-fluid" src="https://pacifista.fr/app/webroot/img/shop/grades/Badge-Legendaire.png" alt="Logo shop">
-            </div>
-            <div class="col col-md-4">
-              <h3>Grade légendaire</h3>
-            </div>
-            <div class="col col-md-2">
-            </div>
-            <div class="col col-md-3">
-              <p>19.99€</p>
+    <div class="row">
+        <div class="col-md-7 mb-2">
+            <div class="bg-dark rounded-4 p-3">
+                <app-shop-basket-list></app-shop-basket-list>
             </div>
-          </div>
         </div>
-      </div>
 
-      <div class="col-md">
-        <div class="bg-dark rounded-4 p-3">
-          <h2>Moyens de paiement</h2>
+        <div class="col-md">
+            <div class="bg-dark rounded-4 p-3">
+                <h2>Moyens de paiement</h2>
 
-          <div class="row align-items-center justify-content-between w-50">
-            <button class="btn btn-success mb-2">
-              Paypal
-            </button>
+                <div class="row align-items-center justify-content-between w-50">
+                    <button class="btn btn-success mb-2">
+                        Paypal
+                    </button>
 
-            <button class="btn btn-success">
-              PaysafeCard
-            </button>
-          </div>
+                    <button class="btn btn-success">
+                        PaysafeCard
+                    </button>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
-</div>
+</div>

src/app/pages/shop/shop-checkout/shop-checkout.component.scss

@@ -0,0 +1,3 @@
+.price-container {
+  color: rgb(246 184 62);
+}

src/app/pages/shop/shop-checkout/shop-checkout.component.ts

@@ -2,6 +2,7 @@ import {Component, Inject} from '@angular/core';
 import {PacifistaPage} from "../../../components/pacifista-page/pacifista-page";
 import {Title} from "@angular/platform-browser";
 import {DOCUMENT} from "@angular/common";
+import ShopService from "../shop-service";
 
 @Component({
   selector: 'app-shop-checkout',
@@ -15,7 +16,8 @@ export class ShopCheckoutComponent extends PacifistaPage {
   protected override readonly pageDescription: string = "Boutique de Pacifista. Soutenez le serveur minecraft avec des avantages uniques !";
 
   constructor(title: Title,
-              @Inject(DOCUMENT) doc: Document) {
+              @Inject(DOCUMENT) doc: Document,
+              protected shopService: ShopService) {
     super(title, doc);
   }