payment paypal done

src/app/components/buttons/send-button/send-button.component.html

@@ -3,5 +3,5 @@
     <span role="status"> {{ labelLoading }}</span>
 </button>
 <ng-template #ready>
-    <button type="button" class="btn btn-primary" (click)="click()">{{ label }}</button>
+    <button type="button" class="btn {{ classBtn }}" (click)="click()">{{ label }}</button>
 </ng-template>

src/app/components/buttons/send-button/send-button.component.ts

@@ -1,11 +1,13 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {NgIf} from "@angular/common";
+import {NgbModule} from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
   selector: 'app-send-button',
   standalone: true,
   imports: [
-    NgIf
+    NgIf,
+    NgbModule
   ],
   templateUrl: './send-button.component.html',
   styleUrl: './send-button.component.scss'
@@ -14,7 +16,8 @@ export class SendButtonComponent {
   @Input() label: string = 'Envoyer';
   @Input() labelLoading: string = 'Chargement...';
   @Input() loading: boolean = false;
-  @Input() classBtn: string = 'btn-primary'
+  @Input() classBtn: string = 'btn-primary';
+  @Input() labelIcon: string = '';
   @Output() onClick = new EventEmitter<void>();
 
   click() {

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

@@ -13,7 +13,7 @@
 
 <div class="row justify-content-between">
     <div class="col-6">
-        <a [routerLink]="'checkout'" class="btn btn-success">
+        <a [routerLink]="'basket'" class="btn btn-success">
             <i class="bi bi-cart-check-fill"></i> Payer
         </a>
     </div>

src/app/pages/shop/shop-error-after-payment/shop-error-after-payment.component.spec.ts → src/app/pages/shop/shop-cancel-after-payment/shop-cancel-after-payment.component.spec.ts

@@ -1,18 +1,18 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import {ShopErrorAfterPaymentComponent} from './shop-error-after-payment.component';
+import {ShopCancelAfterPaymentComponent} from './shop-cancel-after-payment.component';
 
 describe('ShopErrorAfterPaymentComponent', () => {
-  let component: ShopErrorAfterPaymentComponent;
-  let fixture: ComponentFixture<ShopErrorAfterPaymentComponent>;
+  let component: ShopCancelAfterPaymentComponent;
+  let fixture: ComponentFixture<ShopCancelAfterPaymentComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ShopErrorAfterPaymentComponent]
+      imports: [ShopCancelAfterPaymentComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(ShopErrorAfterPaymentComponent);
+    fixture = TestBed.createComponent(ShopCancelAfterPaymentComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/pages/shop/shop-cancel-after-payment/shop-cancel-after-payment.component.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-shop-cancel-after-payment',
+  templateUrl: './shop-cancel-after-payment.component.html',
+  styleUrl: './shop-cancel-after-payment.component.scss'
+})
+export class ShopCancelAfterPaymentComponent {
+
+}

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

@@ -1 +1,7 @@
-<p>shop-payment-paypal works!</p>
+<div class="row justify-content-center m-2">
+    <button class="btn btn-outline-warning" [disabled]="loading" (click)="createOrder()">
+        <span *ngIf="loading" class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+        <i class="bi bi-paypal"></i> PayPal<br>
+        <span>Payez avec votre compte PayPal</span>
+    </button>
+</div>

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

@@ -14,16 +14,24 @@ export class ShopPaymentPaypalComponent {
 
   private readonly paymentService: PacifistaPaymentService;
 
+  loading = false;
+
   constructor(protected shopService: ShopService,
               protected notificationService: NotificationService,
               httpClient: HttpClient) {
     this.paymentService = new PacifistaPaymentService(httpClient, environment.production);
   }
 
   createOrder(): void {
+    if (this.shopService.totalArticlesInBasket() === 0) {
+        this.notificationService.info("Votre panier est vide. Veuillez ajouter des articles avant de procéder au paiement.", "Paiement");
+        return;
+    }
+
     const request = new PacifistaPaymentRequestDTO();
     request.articles = this.shopService.createArticlesRequestList();
 
+    this.loading = true;
     this.paymentService.createOrder(request).subscribe({
       next: (response) => {
         const redirectUrl: string | undefined = response.urlClientRedirection;
@@ -33,8 +41,10 @@ export class ShopPaymentPaypalComponent {
         } else {
           this.notificationService.error("Erreur lors de la création de la commande. Veuillez envoyer un mail à [email protected]", "Paiement");
         }
+        this.loading = false;
       },
       error: (error) => {
+        this.loading = false;
         this.notificationService.onErrorRequest(error);
       }
     });

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

@@ -0,0 +1,7 @@
+<div class="row justify-content-center m-2">
+    <button class="btn btn-outline-info" disabled (click)="createOrder()">
+        <span *ngIf="loading" class="spinner-border spinner-border-sm" aria-hidden="true"></span>
+        <i class="bi bi-lock-fill"></i> Paysafe Card<br>
+        <span>Payez avec votre solde Paysafe Card (carte prépyayée en bureau de tabac)</span>
+    </button>
+</div>

src/app/pages/shop/shop-checkout/shop-payment-paysafecard/shop-payment-paysafecard.component.spec.ts

@@ -0,0 +1,23 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ShopPaymentPaysafecardComponent} from './shop-payment-paysafecard.component';
+
+describe('ShopPaymentPaysafecardComponent', () => {
+  let component: ShopPaymentPaysafecardComponent;
+  let fixture: ComponentFixture<ShopPaymentPaysafecardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ShopPaymentPaysafecardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ShopPaymentPaysafecardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-shop-payment-paysafecard',
+  templateUrl: './shop-payment-paysafecard.component.html',
+  styleUrl: './shop-payment-paysafecard.component.scss'
+})
+export class ShopPaymentPaysafecardComponent {
+
+  loading: boolean = false;
+
+  createOrder() {
+
+  }
+
+}

src/app/pages/shop/shop-redirect-after-payment/shop-redirect-after-payment.component.html

@@ -1 +1,13 @@
-<p>shop-success-page works!</p>
+<div *ngIf="loading; else doneLoading">
+    <h1>Chargement...</h1>
+</div>
+
+<ng-template #doneLoading>
+    <div *ngIf="errorMessage.length === 0; else errorDiv">
+        Cool !
+    </div>
+    <ng-template #errorDiv>
+        <h1>Erreur </h1>
+        {{errorMessage}}
+    </ng-template>
+</ng-template>

src/app/pages/shop/shop-redirect-after-payment/shop-redirect-after-payment.component.ts

@@ -1,10 +1,85 @@
-import {Component} from '@angular/core';
+import {AfterViewInit, Component} from '@angular/core';
+import {ActivatedRoute} from "@angular/router";
+import ShopService from "../shop-service";
+import {
+  ErrorDto,
+  PacifistaPaymentResponseDTO,
+  PacifistaPaymentService
+} from "@funixproductions/funixproductions-requests";
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../../../environments/environment";
+import NotificationService from "../../../services/notifications/services/NotificationService";
 
 @Component({
   selector: 'app-shop-redirect-after-payment',
   templateUrl: './shop-redirect-after-payment.component.html',
   styleUrl: './shop-redirect-after-payment.component.scss'
 })
-export class ShopRedirectAfterPaymentComponent {
+export class ShopRedirectAfterPaymentComponent implements AfterViewInit {
+
+  loading = true;
+  errorMessage = '';
+
+  constructor(private route: ActivatedRoute,
+              private shopService: ShopService,
+              private notificationService: NotificationService,
+              private httpClient: HttpClient) {
+  }
+
+  ngAfterViewInit(): void {
+    this.route.queryParams.subscribe(params => {
+      const orderId = params['token'];
+
+      if (!orderId) {
+        this.loading = false;
+        this.errorMessage = "Votre achat n'a pas été validé. Veuillez recommencer. Vous n'avez pas été débité.";
+        return;
+      }
+
+      const paymentService = new PacifistaPaymentService(this.httpClient, environment.production);
+
+      paymentService.getStatus(orderId).subscribe({
+        next: (response) => {
+          if (response.orderPaid) {
+            this.onSuccess(response);
+          } else {
+            this.capturePayment(orderId, paymentService);
+          }
+        },
+        error: (error: ErrorDto) => {
+          this.onError(error);
+        }
+      });
+    });
+  }
+
+  private onSuccess(response: PacifistaPaymentResponseDTO) {
+    this.loading = false;
+
+    if (response.orderPaid) {
+      this.errorMessage = '';
+      this.shopService.clearBasket();
+    } else {
+      this.errorMessage = "Votre achat n'a pas été validé. Veuillez recommencer. Vous n'avez pas été débité.";
+    }
+  }
+
+  private onError(error: ErrorDto) {
+    this.loading = false;
+    this.errorMessage = "Une erreur est survenue. Veuillez recommencer. Vous n'avez pas été débité." +
+        " (Erreur: " + error.error + ", code: " + error.status + ")";
+    this.notificationService.onErrorRequest(error);
+  }
+
+  private capturePayment(orderId: string, paymentService: PacifistaPaymentService) {
+    paymentService.captureOrder(orderId).subscribe({
+      next: (response) => {
+        this.onSuccess(response);
+      },
+      error: (error: ErrorDto) => {
+        this.onError(error);
+      }
+    });
+  }
 
 }

src/app/pages/shop/shop-routing.module.ts

@@ -3,19 +3,22 @@ import {RouterModule, Routes} from '@angular/router';
 import {ShopComponent} from './shop.component';
 import {ShopCheckoutComponent} from "./shop-checkout/shop-checkout.component";
 import {ShopRedirectAfterPaymentComponent} from "./shop-redirect-after-payment/shop-redirect-after-payment.component";
-import {ShopErrorAfterPaymentComponent} from "./shop-error-after-payment/shop-error-after-payment.component";
+import {ShopCancelAfterPaymentComponent} from "./shop-cancel-after-payment/shop-cancel-after-payment.component";
 
 const routes: Routes = [
   {
     path: '', component: ShopComponent
   },
   {
-    path: 'checkout', component: ShopCheckoutComponent, children: [
+    path: 'basket', component: ShopCheckoutComponent
+  },
+  {
+    path: 'checkout', children: [
       {
         path: 'check', component: ShopRedirectAfterPaymentComponent
       },
       {
-        path: 'cancel', component: ShopErrorAfterPaymentComponent
+        path: 'cancel', component: ShopCancelAfterPaymentComponent
       }
     ]
   }

src/app/pages/shop/shop.module.ts

@@ -23,7 +23,11 @@ import {
     ShopPaymentCreditCardComponent
 } from "./shop-checkout/shop-payment-credit-card/shop-payment-credit-card.component";
 import {ShopRedirectAfterPaymentComponent} from "./shop-redirect-after-payment/shop-redirect-after-payment.component";
-import {ShopErrorAfterPaymentComponent} from "./shop-error-after-payment/shop-error-after-payment.component";
+import {ShopCancelAfterPaymentComponent} from "./shop-cancel-after-payment/shop-cancel-after-payment.component";
+import {SendButtonComponent} from "../../components/buttons/send-button/send-button.component";
+import {
+    ShopPaymentPaysafecardComponent
+} from "./shop-checkout/shop-payment-paysafecard/shop-payment-paysafecard.component";
 
 @NgModule({
     declarations: [
@@ -39,13 +43,15 @@ import {ShopErrorAfterPaymentComponent} from "./shop-error-after-payment/shop-er
         ShopPaymentPaypalComponent,
         ShopPaymentCreditCardComponent,
         ShopRedirectAfterPaymentComponent,
-        ShopErrorAfterPaymentComponent
+        ShopCancelAfterPaymentComponent,
+        ShopPaymentPaysafecardComponent
     ],
     imports: [
         CommonModule,
         HttpClientModule,
         ShopRoutingModule,
-        FormsModule
+        FormsModule,
+        SendButtonComponent
     ],
     providers: [
         ShopService