Merge pull request #21 from RealEskalate/sami.eligiblity

sami.fix: fixing the question before selecting type registration type

src/app/pages/eligibility/eligibility.component.css

@@ -21,3 +21,28 @@ stack {
   z-index: 3;
   opacity: 1;
 }
+
+
+/* Gradient text */
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(45deg, #ffdf00, #ff7f50, #00fa9a, #00bfff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+  animation: gradientAnimation 8s ease infinite;
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+

src/app/pages/eligibility/eligibility.component.html

@@ -7,12 +7,148 @@
   </p>
   <div class="p-2 flex flex-col justify-center items-center">
     <div class="flex-none max-lg:my-6 sm:pb-8 md:mx-8 sm:mt-0 sm:text-left">
-      <p class="text-gray-300 leading-relaxed max-sm:text-start">
+      <p class="text-gray-300 leading-relaxed  text-center">
         The hackathon is open to all students located in Africa who are
         passionate about AI and eager to showcase their skills and creativity.
         To participate, you must meet the following eligibility requirements:
       </p>
 
+
+      <div *ngIf="!registrationTypeSelected" class="text-center mt-4">
+        <p class="text-gray-400 gradient-text text-lg">
+          <!-- <strong class="font-bold text-transparent bg-gradient-to-r from-indigo-600 to to-pink-500 bg-clip-text">Are you registering as an individual or as a team?</strong> -->
+          Are you registering as an individual or as a team?
+        </p>
+        <div class="flex justify-center mt-4">
+          <button
+            (click)="selectRegistrationType('individual')"
+            class="inline-flex text-white border-0 bg-purple-700 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl text-sm mr-4"
+          >
+            Individual
+          </button>
+          <button
+            (click)="selectRegistrationType('team')"
+            class="inline-flex text-white border-0 bg-green-700 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl text-sm"
+          >
+            Team
+          </button>
+        </div>
+      </div>
+
+      <div *ngIf="registrationTypeSelected">
+        <div class="flex justify-center mt-6 mb-5">
+          <button
+            (click)="switchRegistrationType()"
+            [ngClass]="{
+              'bg-purple-700': isIndividual,
+              'bg-green-700': !isIndividual
+            }"
+            class="inline-flex text-white border-0 max-sm:px-4 py-2 px-6 focus:outline-none hover:drop-shadow-xl rounded-full text-sm"
+          >
+            {{ isIndividual ? 'Switch to Team' : 'Switch to Individual' }}
+          </button>
+        </div>
+
+        <div>
+          <ul>
+            <li *ngFor="let criterion of criteria; let i = index">
+              <div class="flex items-start py-2">
+                <div class="flex-none w-8 h-8 mr-5">
+                  <svg
+                    *ngIf="criterion.answered === null && i <= currentQuestionIndex"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    class="w-full h-full text-gray-400"
+                  >
+                    <path d="M5 12h14M12 5l7 7-7 7" />
+                  </svg>
+
+                  <svg
+                    *ngIf="criterion.answered === true"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="w-full h-full text-[#AC6AFF]"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                  <svg
+                    *ngIf="criterion.answered === false"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="w-full h-full text-red-500"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M12 2.25a9.75 9.75 0 100 19.5 9.75 9.75 0 000-19.5zM9.47 9.47a.75.75 0 011.06-1.06l1.47 1.47 1.47-1.47a.75.75 0 011.06 1.06L12.53 12l1.47 1.47a.75.75 0 01-1.06 1.06l-1.47-1.47-1.47 1.47a.75.75 0 01-1.06-1.06L11.47 12 9.47 10.53z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div *ngIf="i <= currentQuestionIndex" class="flex-grow">
+                  <p class="text-gray-300 leading-relaxed text-start" [@fadeInOut]>
+                    {{ criterion.text }}
+                  </p>
+                </div>
+              </div>
+              <hr
+                *ngIf="criterion.answered !== null"
+                class="border-t border-white border-opacity-30 mb-2"
+              />
+            </li>
+          </ul>
+
+          <div
+            *ngIf="
+              !eligibilityConfirmed &&
+              !ineligible &&
+              currentQuestionIndex < criteria.length
+            "
+            class="flex justify-center mt-4"
+          >
+            <button
+              (click)="answerYes()"
+              class="inline-flex text-white border-0 bg-green-500 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl text-sm mr-4"
+            >
+              Yes
+            </button>
+            <button
+              (click)="answerNo()"
+              class="inline-flex text-white border-0 bg-red-500 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl text-sm"
+            >
+              No
+            </button>
+          </div>
+
+          <div *ngIf="eligibilityConfirmed" class="text-center mt-4">
+            <p class="text-green-500 font-bold">
+              Congratulations! You are eligible to register.
+            </p>
+            <p class="text-gray-400">
+              Proceed to register individually or as a team and join the A2SV AI for
+              Africa Hackathon.
+            </p>
+          </div>
+
+          <div *ngIf="ineligible" class="text-center mt-4">
+            <p class="text-red-500 font-bold">
+              Unfortunately, you are not eligible to register for the hackathon at
+              this time.
+            </p>
+          </div>
+        </div>
+      </div>
+
+
+<!-- 
       <div class="flex justify-start mt-6 mb-5">
         <button
           (click)="showIndividualCriteria()"
@@ -138,7 +274,7 @@
             this time.
           </p>
         </div>
-      </div>
+      </div> -->
 
       <!-- <div *ngIf="eligibilityConfirmed" [@fadeInOut]>
         <p

src/app/pages/eligibility/eligibility.component.ts

@@ -27,6 +27,12 @@ export class EligibilityComponent {
   registrationButtonVisible = true;
 
   ngOnInit(): void {
+    this.registerService.registrationType$.subscribe(type => {
+      if (type) {
+        this.isIndividual = type === 'individual';
+        this.criteria = this.isIndividual ? this.individualCriteria : this.teamCriteria;
+      }
+    });
     setInterval(() => {
       this.updateRegistrationButtonVisibility();
     }, 1000);
@@ -66,26 +72,31 @@ export class EligibilityComponent {
 
 
   criteria: any[] = this.individualCriteria;
-
   currentQuestionIndex: number = 0;
   eligibilityConfirmed: boolean = false;
   ineligible: boolean = false;
+  registrationTypeSelected: boolean = false;
 
 
-
-
-  showIndividualCriteria() {
-    this.isIndividual = true;
+  selectRegistrationType(type: string) {
+    this.registrationTypeSelected = true;
+    this.isIndividual = type === 'individual';
+    this.criteria = this.isIndividual ? this.individualCriteria : this.teamCriteria;
     this.resetEligibility();
-    this.criteria = this.individualCriteria;
+    this.registerService.setRegistrationType(type);
   }
 
-  showTeamCriteria() {
-    this.isIndividual = false;
+
+  switchRegistrationType() {
+    this.isIndividual = !this.isIndividual;
+    this.criteria = this.isIndividual ? this.individualCriteria : this.teamCriteria;
     this.resetEligibility();
-    this.criteria = this.teamCriteria;
+    const type = this.isIndividual ? 'individual' : 'team';
+    this.registerService.setRegistrationType(type);
   }
 
+
+
   resetEligibility() {
     this.currentQuestionIndex = 0;
     this.eligibilityConfirmed = false;

src/app/pages/fixed-eligiblity/fixed-eligiblity.component.html

@@ -17,9 +17,9 @@
         <button
           (click)="showIndividualCriteria()"
           [ngClass]="{
-            ' border-[1.5px] border-gray-300 text-gray-500 cursor-not-allowed disabled':
-              isIndividual,
-            'bg-purple-700': !isIndividual
+            ' border-[1.5px] border-gray-300 text-gray-500 ':
+              !isIndividual,
+            'bg-purple-700 cursor-not-allowed disabled': isIndividual
           }"
           class="inline-flex text-white border-0 max-sm:px-4 py-2 px-4 rounded-full focus:outline-none hover:drop-shadow-xl text-sm mr-4"
         >
@@ -29,8 +29,8 @@
           (click)="showTeamCriteria()"
           [ngClass]="{
             'border-[1.5px] border-gray-300 text-gray-500 cursor-not-allowed disabled':
-              !isIndividual,
-            'bg-purple-700': isIndividual
+              isIndividual,
+            'bg-purple-700 cursor-not-allowed disabled': !isIndividual
           }"
           class="inline-flex text-white border-0 max-sm:px-4 py-2 px-6 focus:outline-none hover:drop-shadow-xl rounded-full text-sm"
         >

src/app/services/register.service.ts

@@ -14,13 +14,19 @@ export class RegisterService {
   private showEligibilitySource = new BehaviorSubject<boolean>(false);
   showEligibility$ = this.showEligibilitySource.asObservable();
 
+  private registrationTypeSource = new BehaviorSubject<string | null>(null);
+  registrationType$ = this.registrationTypeSource.asObservable();
+
   openModal() {
     this.modalOpenSource.next(true);
   }
 
   closeModal() {
+    // console.log("Yes close modal");
+
     this.modalOpenSource.next(false);
     this.showEligibilitySource.next(false);
+    // this.registrationTypeSource.next(null);
   }
 
   checkEligibility() {
@@ -31,4 +37,14 @@ export class RegisterService {
   showEligibility() {
     this.showEligibilitySource.next(true);
   }
+  setRegistrationType(type: string) {
+    this.registrationTypeSource.next(type);
+  }
+
+  // This is used incase if I want to change it in globally 
+  switchRegistrationType() {
+    const currentType = this.registrationTypeSource.value;
+    const newType = currentType === 'individual' ? 'team' : 'individual';
+    this.registrationTypeSource.next(newType);
+  }
 }

src/app/shared/register-modal/register-modal.component.html

@@ -41,7 +41,7 @@
               <app-eligibility ></app-eligibility>
             </div>
 
-            <div class="p-4 lg:w-1/3" *ngIf="isEligibilityChecked">
+            <div class="p-4 lg:w-1/3" *ngIf="isEligibilityChecked && registrationType === 'individual'">
               <div
                 class="h-full flex flex-col justify-between bg-gray-800 bg-opacity-40 px-8 py-8 rounded-lg overflow-hidden relative"
               >
@@ -68,7 +68,7 @@
                 </div>
               </div>
             </div>
-            <div class="p-4 lg:w-1/3" *ngIf="isEligibilityChecked">
+            <div class="p-4 lg:w-1/3" *ngIf="isEligibilityChecked && registrationType === 'team'">
               <div
                 class="h-full flex flex-col justify-between bg-gray-800 bg-opacity-40 px-8 py-8 rounded-lg overflow-hidden relative"
               >

src/app/shared/register-modal/register-modal.component.ts

@@ -13,9 +13,11 @@ import { SharedModule } from '../shared.module';
 export class RegisterModalComponent implements OnInit, OnDestroy {
   isModalOpen: boolean = false;
   isEligibilityChecked: boolean = false;
+  registrationType: string | null = null;
   private modalSubscription!: Subscription;
   private eligibilitySubscription!: Subscription;
   private showEligibilitySubscription!: Subscription;
+  private registrationTypeSubscription!: Subscription;
 
   @Input() currentSection: string = "home";
   constructor(private registerService: RegisterService) {}
@@ -50,12 +52,17 @@ export class RegisterModalComponent implements OnInit, OnDestroy {
     this.showEligibilitySubscription = this.registerService.showEligibility$.subscribe(show => {
       this.showEligibilitySection = show;
     });
+
+    this.registrationTypeSubscription = this.registerService.registrationType$.subscribe(type => {
+      this.registrationType = type;
+    }); 
   }
 
   ngOnDestroy() {
     this.modalSubscription.unsubscribe();
     this.eligibilitySubscription.unsubscribe();
     this.showEligibilitySubscription.unsubscribe();
+    this.registrationTypeSubscription.unsubscribe();
   }
 
   closeModal() {