Merge pull request #106 from swoocn/feature/loyalty-program-screen

Looks good to me!  GJ!

frontend/src/app/business/business-settings/business-settings.component.html

@@ -91,8 +91,8 @@
             translate }}<i class="fa-solid fa-arrow-right"></i></a>
         </li>
         <li class="business-registration__item">
-          <a (click)="displayPopup()" class="business-registration__link">{{
-            'BUSINESS.REGISTRATION.BUTTONS.LOYALTY_STAMPS' | translate }}<i class="fa-solid fa-arrow-right"></i></a>
+          <a [routerLink]="['/business/loyalty-program']" class="business-registration__link">{{ 'BUSINESS.REGISTRATION.BUTTONS.LOYALTY_STAMPS' | 
+            translate }}<i class="fa-solid fa-arrow-right"></i></a>
         </li>
         <li class="business-registration__item">
           <a (click)="displayPopup()" class="business-registration__link">{{

frontend/src/app/business/business-settings/loyalty-program/loyalty-program.component.html

@@ -1 +1,46 @@
-<p>loyalty-program works!</p>
+<!-- Main loyalty card component container -->
+<div class="loyalty-card">
+
+  <!-- Header -->
+  <header class="loyalty-card__header">
+    <a href="#" class="loyalty-card__header-back-button" aria-label="Go back">&#x3c;</a>
+    <h1 class="loyalty-card__header-title">Loyalty card</h1>
+  </header>
+
+  <!-- Loyalty Card Form -->
+  <main>
+    <form [formGroup]="loyaltyForm" (ngSubmit)="saveSettings()" class="loyalty-card__form">
+
+      <!-- Toggle Section -->
+      <fieldset class="loyalty-card__toggle-container">
+        <legend class="visually-hidden">Loyalty Card Activation</legend>
+        <input type="checkbox" formControlName="isActive" id="toggle-loyalty" class="loyalty-card__toggle-checkbox" aria-describedby="toggle-description"/>
+        <label for="toggle-loyalty" class="loyalty-card__toggle-label"></label>
+        <span id="toggle-description" class="loyalty-card__toggle-text">
+          <ng-container *ngIf="loyaltyForm.get('isActive')?.value; else offText">The loyalty card is on</ng-container>
+          <ng-template #offText>Turn on the Loyalty card</ng-template>
+        </span>
+      </fieldset>
+
+      <!-- Form Content Section -->
+      <section *ngIf="loyaltyForm.get('isActive')?.value">
+        <div class="loyalty-card__form-control">
+          <label for="stamps-needed" class="loyalty-card__form-label">Stamps needed for free item</label>
+          <input type="number" formControlName="stampsNeeded" id="stamps-needed" class="loyalty-card__form-input"/>
+        </div>
+
+        <div class="loyalty-card__form-control">
+          <label for="free-item-name" class="loyalty-card__form-label">Name of free item</label>
+          <input type="text" formControlName="freeItemName" id="free-item-name" class="loyalty-card__form-input"/>
+        </div>
+
+        <div class="loyalty-card__form-control">
+          <label for="number-of-items" class="loyalty-card__form-label">Number of free items</label>
+          <input type="number" formControlName="numberOfFreeItems" id="number-of-items" class="loyalty-card__form-input"/>
+        </div>
+
+        <button type="submit" class="loyalty-card__form-submit-button">Save Settings</button>
+      </section>
+    </form>
+  </main>
+</div>

frontend/src/app/business/business-settings/loyalty-program/loyalty-program.component.scss

@@ -0,0 +1,151 @@
+/* Loyalty Card Styling */
+.loyalty-card {
+    width: 100%;
+    padding: 40px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin: auto;
+    max-width: 300px;
+    background-color: #F1F7FF;
+    margin-top: 4rem;
+    border-radius: 10px;
+    letter-spacing: .7px;
+}
+
+/* Header Styling */
+.loyalty-card__header {
+    position: relative;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.loyalty-card__header-back-button {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.loyalty-card__header-title {
+    flex-grow: 1;
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+/* Toggle Section */
+.loyalty-card__toggle-container {
+    display: flex;
+    align-items: center;
+}
+
+.loyalty-card__toggle-checkbox {
+    opacity: 0;
+    position: absolute;
+    z-index: 3;
+    width: 60px;
+    height: 34px;
+    margin: 0;
+}
+
+.loyalty-card__toggle-label {
+    position: relative;
+    display: block;
+    width: 46px;
+    height: 22px;
+    background-color: #ccc;
+    border-radius: 34px;
+    cursor: pointer;
+    transition: background-color .4s;
+}
+
+
+.loyalty-card__toggle-label::before {
+    content: "";
+    position: absolute;
+    top: -2px;
+    width: 24px;
+    height: 24px;
+    background-color: #9e9e9e;
+    border-radius: 50%;
+    transition: transform .4s;
+}
+
+.loyalty-card__toggle-text {
+    margin-left: 1rem;
+}
+
+.loyalty-card__toggle-checkbox:checked + .loyalty-card__toggle-label {
+    background-color: #FFFFFF;
+    border: 1px solid #1d724b;
+}
+
+.loyalty-card__toggle-checkbox:checked + .loyalty-card__toggle-label::before {
+    transform: translateX(26px);
+    background-color: #1d724b;
+}
+
+.loyalty-card__toggle-checkbox + .loyalty-card__toggle-label {
+    border: 1px solid #9e9e9e;
+}
+
+/* Form Styling */
+.loyalty-card__form-control {
+    margin-top: 1.5rem;
+    display: grid;
+}
+
+.loyalty-card__form-input {
+    margin-top: 0.2rem;
+    height: 2rem;
+    border-radius: 10px;
+    border: 2px solid #1d724b;
+    padding: 0.6rem;
+}
+
+.loyalty-card__form-submit-button {
+    width: 100%;
+    height: auto;
+    margin-top: 1.2rem;
+    padding: 0.7rem;
+    background-color: #1d724b;
+    color: #ffffff;
+    font-size: 0.9rem;
+    border-radius: 10px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s, transform 0.2s;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+    letter-spacing: .7px;
+}
+
+.loyalty-card__form-submit-button:active {
+    background-color: #f00909;
+    transform: translateY(-2px);
+}
+
+.loyalty-card__form-submit-button:hover {
+    background-color: #1A8855;
+}
+
+.visually-hidden {
+    display: none;
+}
+
+/* Responsive Design For Larger Screens */
+@media (min-width: 768px) {
+    .loyalty-card {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 400px;
+    }
+
+    .loyalty-card__form {
+        width: 100%;
+        max-width: 300px;
+    }
+
+    .loyalty-card__toggle-text {
+        margin-left: 2rem;
+    }
+}

frontend/src/app/business/business-settings/loyalty-program/loyalty-program.component.ts

@@ -1,11 +1,34 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-loyalty-program',
   standalone: true,
-  imports: [],
+  imports: [ReactiveFormsModule, CommonModule],
   templateUrl: './loyalty-program.component.html',
-  styleUrl: './loyalty-program.component.scss',
+  styleUrls: ['./loyalty-program.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class LoyaltyProgramComponent {}
+export class LoyaltyProgramComponent {
+  // Create a form group for the loyalty program form
+  loyaltyForm = new FormGroup({
+    isActive: new FormControl(false), // For toggle switch
+    stampsNeeded: new FormControl('', Validators.required), // Input for stamps needed
+    freeItemName: new FormControl('', Validators.required), // Input for the name of the free item
+    numberOfFreeItems: new FormControl(1, Validators.required) // Input for the number of free items
+  });
+
+  constructor() {}
+
+  // Method to call when the form is submitted
+  saveSettings() {
+    if (this.loyaltyForm.valid) {
+      // Handle the form submission
+      console.log(this.loyaltyForm.value);
+    } else {
+      // Handle the case when the form is invalid
+      console.log('Form is not valid.');
+    }
+  }
+}