Shop UI (#47)

* wip new shop

* wip new shop

* wip new shop

* bootstrap icons

* category ui

* shop ui

* pacifistaplus container composant

* upgraded shop ui

* text p+

* category responsive

* basket handle css

* wip cart

* wip cart

* cart done

* done shop page

* wip checkout

* wip checkout paypal and credit card

* payment paypal done

* payment paypal cb done

* payment paypal cb done

package.json

@@ -27,15 +27,11 @@
     "@angular/platform-server": "^17.1.0",
     "@angular/router": "^17.1.0",
     "@angular/ssr": "^17.1.0",
-    "@fortawesome/angular-fontawesome": "^0.14.1",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@funixproductions/funixproductions-requests": "^0.0.6",
+    "@funixproductions/funixproductions-requests": "^0.1.6",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.0",
+    "bootstrap-icons": "^1.11.3",
     "express": "^4.18.2",
     "jquery": "^3.7.0",
     "ng-recaptcha": "^13.2.1",
@@ -61,4 +57,4 @@
     "karma-jasmine-html-reporter": "~2.0.0",
     "typescript": "~5.3.3"
   }
-}
+}

src/app/app.module.ts

@@ -5,7 +5,6 @@ import {AppRoutingModule} from './app-routing.module';
 import {AppComponent} from './app.component';
 import {NavbarComponent} from './components/navbar/navbar.component';
 import {FooterComponent} from './components/footer/footer.component';
-import {FontAwesomeModule} from "@fortawesome/angular-fontawesome";
 import {HttpClientModule} from "@angular/common/http";
 import {NgOptimizedImage} from "@angular/common";
 import {NewsModule} from "./pages/news/news.module";
@@ -38,8 +37,7 @@ import {provideAnimationsAsync} from '@angular/platform-browser/animations/async
     AboutAccueilSectionComponent
   ],
   imports: [
-    BrowserModule.withServerTransition({appId: 'pacifista-website'}),
-    FontAwesomeModule,
+    BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     NgbModule,

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/components/footer/footer.component.html

@@ -8,7 +8,7 @@
                 </div>
 
                 <div class="col-lg">
-                    <h3>A propos</h3>
+                    <h3>À propos</h3>
                     <p>
                         Depuis 2018 Pacifista est un serveur Minecraft Français survie avec un développement fait maison pour ses plugins.
                         Nous sommes très à l’écoute de la communauté et notre staff est très réactif.

src/app/components/inputs/input-number/input-number.component.html

@@ -0,0 +1,19 @@
+<label [for]="id" class="form-label">{{ label }}</label>
+<input
+        type="number"
+        class="form-control"
+        inputmode="numeric"
+        [placeholder]="placeholder"
+        [(ngModel)]="number"
+        [id]="id"
+        [value]="number ?? ''"
+        [required]="required"
+        (input)="onInput()"
+        [ngClass]="{
+                'is-invalid': formSent && inputErrors.length > 0,
+                'is-valid': formSent && inputErrors.length === 0
+             }"
+>
+<div *ngFor="let error of inputErrors" class="invalid-feedback">
+    {{ error }}
+</div>

src/app/components/inputs/input-number/input-number.component.spec.ts

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

src/app/components/inputs/input-number/input-number.component.ts

@@ -0,0 +1,30 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {NgClass, NgForOf} from "@angular/common";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+
+@Component({
+  selector: 'app-input-number',
+  standalone: true,
+  imports: [
+    NgForOf,
+    ReactiveFormsModule,
+    FormsModule,
+    NgClass
+  ],
+  templateUrl: './input-number.component.html',
+  styleUrl: './input-number.component.scss'
+})
+export class InputNumberComponent {
+  @Input() label: string = 'Number';
+  @Input() placeholder: string = 'Hint';
+  @Input() id: string = 'validationNumber';
+  @Input() number?: number;
+  @Input() required: boolean = true;
+  @Input() formSent: boolean = false;
+  @Input() inputErrors: string[] = [];
+  @Output() numberChange = new EventEmitter<number>();
+
+  onInput() {
+    this.numberChange.emit(this.number);
+  }
+}

src/app/components/notification/notification.component.html

@@ -4,7 +4,7 @@
   [autohide]="true" [delay]="notification.delay">
   <ng-template ngbToastHeader>
     <div class="me-auto">
-      <fa-icon [icon]="getIconFromType(notification.type)"></fa-icon>
+      <i [class]="getIconFromType(notification.type)"></i>
       <strong class="mx-1">{{notification.header}}</strong>
     </div>
   </ng-template>

src/app/components/notification/notification.component.ts

@@ -1,8 +1,6 @@
 import {Component} from '@angular/core';
 import NotificationService from "../../services/notifications/services/NotificationService";
 import {NotificationType} from "../../services/notifications/enums/NotificationType";
-import {IconDefinition} from "@fortawesome/free-regular-svg-icons";
-import {faCheckCircle, faExclamationTriangle, faInfoCircle} from "@fortawesome/free-solid-svg-icons";
 
 @Component({
   selector: 'app-notification',
@@ -27,16 +25,15 @@ export class NotificationComponent {
     }
   }
 
-  getIconFromType(type: NotificationType): IconDefinition {
+  getIconFromType(type: NotificationType): string {
     switch (type) {
       case NotificationType.DANGER:
-        return faExclamationTriangle;
       case NotificationType.WARNING:
-        return faExclamationTriangle;
+        return "bi bi-exclamation-triangle-fill";
       case NotificationType.STANDARD:
-        return faInfoCircle;
+        return "bi bi-info-circle-fill";
       case NotificationType.SUCCESS:
-        return faCheckCircle;
+        return "bi bi-check-circle-fill";
     }
   }