Merge pull request #114 from Sohith-code/self-registration-flow

Custom self registration changes for start date and end date

project/ws/app/src/lib/routes/home/routes/onboarding/custom-self-registration/custom-self-registration.component.html

@@ -1,7 +1,7 @@
 <div class="self-registration-wrapper">
   <div class="flex">
 
-    <ng-container *ngIf="!customRegistrationLinks">
+    <ng-container>
       <div class="w-1/2 p-6 relative form-wrapper">
         <ng-container *ngIf="!framewordId">
           <img src="/assets/icons/bg-blur-self-registration.png" alt="icon" class="w-full">
@@ -15,41 +15,40 @@
           </div>
         </ng-container>
         <ng-container *ngIf="framewordId">
-          <form [formGroup]="selfRegistrationForm"
-            [ngClass]="{'h-full flex justify-center items-center': !customRegistrationLinks?.registrationLink}">
+          <form [formGroup]="selfRegistrationForm">
             <div class="create-registration-link">
               <div class="flex gap-2 mb-8">
                 <ng-container *ngIf="customRegistrationLinks?.registrationLink">
                   <span class="font-semibold fw-montserrat text-lg">Link Status -</span>
                   <div class="badge flex items-center"
-                    [ngClass]="checkRegistrationStatus(configSvc.orgReadData.enddateregistration) ? 'active':'in-active'">
-                    {{checkRegistrationStatus(configSvc.orgReadData.enddateregistration) ?
+                    [ngClass]="latestRegisteredData.status && latestRegisteredData.status === 'active' ? 'active':'in-active'">
+                    {{latestRegisteredData.status && latestRegisteredData.status === 'active' ?
                     'Active': 'None'}}</div>
                 </ng-container>
               </div>
 
-              <!-- <div class="flex flex-column gap-1 w-full mat-field-rounded">
-              <div class="flex items-center gap-1 required">
-                <span class="lable">Start Date</span>
+              <div class="flex flex-column gap-1 w-full mat-field-rounded">
+                <div class="flex items-center gap-1 required">
+                  <span class="lable">Start Date</span>
+                </div>
+                <mat-form-field appearance="outline">
+                  <input matInput [matDatepicker]="startDate" [min]="todayDate" placeholder="Enter Start Date"
+                    formControlName="startDate">
+                  <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
+                  <mat-datepicker #startDate></mat-datepicker>
+                </mat-form-field>
               </div>
-              <mat-form-field appearance="outline">
-                <input matInput [matDatepicker]="startDate" [min]="todayDate" placeholder="Enter Start Date"
-                  formControlName="startDate">
-                <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
-                <mat-datepicker #startDate></mat-datepicker>
-              </mat-form-field>
-            </div> -->
-              <!-- <div class="flex flex-column gap-1 w-full mat-field-rounded">
-              <div class="flex items-center gap-1 required">
-                <span class="lable">End Date</span>
+              <div class="flex flex-column gap-1 w-full mat-field-rounded">
+                <div class="flex items-center gap-1 required">
+                  <span class="lable">End Date</span>
+                </div>
+                <mat-form-field appearance="outline">
+                  <input matInput [matDatepicker]="endDate" placeholder="Enter End Date" formControlName="endDate"
+                    [min]="selfRegistrationForm.get('startDate')?.value">
+                  <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
+                  <mat-datepicker #endDate></mat-datepicker>
+                </mat-form-field>
               </div>
-              <mat-form-field appearance="outline">
-                <input matInput [matDatepicker]="endDate" placeholder="Enter End Date" formControlName="endDate"
-                  [min]="selfRegistrationForm.get('startDate')?.value">
-                <mat-datepicker-toggle matSuffix [for]="endDate"></mat-datepicker-toggle>
-                <mat-datepicker #endDate></mat-datepicker>
-              </mat-form-field>
-            </div> -->
             </div>
             <div class="flex items-center justify-center mt-4">
               <ng-container *ngIf="!customRegistrationLinks">
@@ -86,20 +85,17 @@
 
             <div class="actions-buttons flex gap-4 items-center justify-center mt-4">
               <button mat-flat-button class="mat-btn-outline"
-                (click)="copyLinkToClipboard(customRegistrationLinks?.registrationLink);selectedButtonCode('copyLink')"
-                [ngClass]=" {'button-active': selectedButton==='copyLink' }">Copy Link</button>
-              <button mat-stroked-button class="mat-btn-outline"
-                (click)="sendViaEmail(customRegistrationLinks?.registrationLink);selectedButtonCode('shareViaMail')"
-                [ngClass]="{'button-active': selectedButton === 'shareViaMail'}">
+                (click)="copyLinkToClipboard(customRegistrationLinks?.registrationLink)">Copy Link</button>
+              <button mat-flat-button class="mat-btn-outline"
+                (click)="sendViaEmail(customRegistrationLinks?.registrationLink)">
                 <mat-icon class="mr-2"> email</mat-icon>
                 <span>Share on Mail</span>
               </button>
 
-              <button mat-stroked-button class="mat-btn-outline"
-                (click)="sendViaWhatsApp(customRegistrationLinks?.registrationLink);selectedButtonCode('shareViaWhatsapp')"
-                [ngClass]="{'button-active': selectedButton === 'shareViaWhatsapp'}">
+              <button mat-flat-button class="mat-btn-outline"
+                (click)="sendViaWhatsApp(customRegistrationLinks?.registrationLink)">
                 <img src="/assets/icons/whatsapp.svg" alt="icon" class="mr-2" width="24" height="24">
-                <span>Share on Whats app</span>
+                <span>Share on Whatsapp</span>
               </button>
             </div>
           </div>
@@ -111,30 +107,28 @@
               </div>
               <div class="flex flex-column items-center justify-center gap-2">
                 <button mat-flat-button class="mat-btn-outline"
-                  (click)="downloadQRCode(customRegistrationLinks?.qrRegistrationLink);selectedButtonCode('downloadQR')"
-                  [ngClass]="{'button-active': selectedButton === 'downloadQR'}">Download
+                  (click)="downloadQRCode(customRegistrationLinks?.qrRegistrationLink)">Download
                   QR</button>
-                <button mat-stroked-button class="mat-btn-outline"
-                  (click)="sendViaEmail(customRegistrationLinks?.qrRegistrationLink);selectedButtonCode('shareViaMailQR')"
-                  [ngClass]=" {'button-active': selectedButton==='shareViaMailQR' }">
+                <button mat-flat-button class="mat-btn-outline"
+                  (click)="sendViaEmail(customRegistrationLinks?.qrRegistrationLink);">
                   <mat-icon class="mr-2"> email</mat-icon>
                   <span>Share on Mail</span>
                 </button>
 
-                <button mat-stroked-button class="mat-btn-outline"
-                  (click)="sendViaWhatsApp(customRegistrationLinks?.qrRegistrationLink);selectedButtonCode('shareViaWhatsappQR')"
-                  [ngClass]=" {'button-active': selectedButton==='shareViaWhatsappQR' }">
+                <button mat-flat-button class="mat-btn-outline"
+                  (click)="sendViaWhatsApp(customRegistrationLinks?.qrRegistrationLink)">
                   <img src="/assets/icons/whatsapp.svg" alt="icon" class="mr-2" width="24" height="24">
-                  <span>Share on Whats app</span>
+                  <span>Share on Whatsapp</span>
                 </button>
               </div>
             </div>
           </div>
 
           <div class="wrapper-card p-4 rounded-lg mt-4">
-            <div class="flex gap-4">
+            <div class="flex gap-4 items-center">
               <img src="/assets/icons/users.svg" alt="users" width="32" height="32">
-              <span class="text-sm">Number of Users Onboarded: <strong class="ml-1">2,231</strong></span>
+              <span class="text-sm">Number of Users Onboarded: <strong
+                  class="ml-1">{{numberOfUsersOnboarded}}</strong></span>
             </div>
           </div>
         </div>

project/ws/app/src/lib/routes/home/routes/onboarding/custom-self-registration/custom-self-registration.component.scss

@@ -33,3 +33,22 @@
 .bg-inherit {
   background: inherit !important;
 }
+
+:host ::ng-deep .mat-btn-outline:hover {
+  background-color: #1b4ca1 !important;
+  color: #fff !important;
+
+  mat-icon,
+  span {
+    color: #fff !important;
+  }
+
+  img {
+    filter: brightness(0) invert(1);
+  }
+}
+
+:host ::ng-deep .mdc-button__label {
+  display: flex;
+  align-items: center;
+}

project/ws/app/src/lib/routes/home/routes/onboarding/custom-self-registration/custom-self-registration.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core'
 import { MatDialog } from '@angular/material/dialog'
 import { ActivatedRoute, Router } from '@angular/router'
-import { ICustomRegistrationQRCodeResponse, IOnBoardingConfig } from '../interface/onboarding.interface'
-import { FormBuilder, FormGroup } from '@angular/forms'
+import { ICustomRegistrationQRCodeResponse, IOnBoardingConfig, IRegisteredLinksList } from '../interface/onboarding.interface'
+import { FormBuilder, FormGroup, Validators } from '@angular/forms'
 import { MatSnackBar } from '@angular/material/snack-bar'
 import { Clipboard } from '@angular/cdk/clipboard'
 import { LoadingPopupComponent } from '../loading-popup/loading-popup.component'
@@ -21,8 +21,9 @@ export class CustomSelfRegistrationComponent implements OnInit {
   rootOrdId = ''
   framewordId = ''
   todayDate = new Date()
-  selectedButton = ''
-
+  registeredLinksList: IRegisteredLinksList[] = []
+  numberOfUsersOnboarded = 0
+  latestRegisteredData: IRegisteredLinksList | any = {}
   constructor(
     public dialog: MatDialog,
     private activatedRoute: ActivatedRoute,
@@ -40,37 +41,48 @@ export class CustomSelfRegistrationComponent implements OnInit {
     this.framewordId = this.configSvc.orgReadData.frameworkid
     this.initializeForm()
 
-    if (
-      this.framewordId &&
-      this.configSvc.orgReadData &&
-      this.configSvc?.orgReadData?.registrationlink
-    ) {
-      // this.selfRegistrationForm.get('startDate')?.setValue(new Date(this.configSvc.orgReadData.startdateregistration))
-      // this.selfRegistrationForm.get('endDate')?.setValue(new Date(this.configSvc.orgReadData.enddateregistration))
-      const links = {
-        registrationLink: this.configSvc.orgReadData.registrationlink,
-        qrRegistrationLink: this.configSvc.orgReadData.qrregistrationlink,
-      }
-      this.customRegistrationLinks = links
-    } else {
-      this.customRegistrationLinks = undefined
+    if (this.framewordId && this.configSvc.orgReadData) {
+      this.getlistOfRegisterationLinks()
     }
   }
 
+  getlistOfRegisterationLinks() {
+    this.onboardingService.getListOfRegisteedLinks({ orgId: this.rootOrdId }).subscribe({
+      next: (response: any) => {
+        if (response.result && response.result.qrCodeDataForOrg.length) {
+          this.registeredLinksList = response.result.qrCodeDataForOrg
+          this.latestRegisteredData = this.registeredLinksList[this.registeredLinksList.length - 1]
+          this.selfRegistrationForm.get('startDate')?.setValue(new Date(this.latestRegisteredData.startDate))
+          this.selfRegistrationForm.get('endDate')?.setValue(new Date(this.latestRegisteredData.endDate))
+          this.customRegistrationLinks = {
+            registrationLink: this.latestRegisteredData.url,
+            qrRegistrationLink: this.latestRegisteredData.qrCodeImagePath,
+          }
+          this.numberOfUsersOnboarded = this.latestRegisteredData.numberOfUsersOnboarded
+        } else {
+          this.customRegistrationLinks = undefined
+        }
+      },
+      error: () => {
+
+      },
+    })
+  }
+
   navigateTo(route: string): void {
     this.router.navigate([route])
   }
 
   initializeForm(): void {
     this.selfRegistrationForm = this.formBuilder.group({
-      startDate: [''],
-      endDate: [''],
+      startDate: ['', [Validators.required]],
+      endDate: ['', [Validators.required]],
     })
   }
 
   copyLinkToClipboard(link: string): void {
     this.clipboard.copy(link)
-    this.snackbar.open('Copied!')
+    this.snackbar.open('Copied!', '', { panelClass: ['success'] })
   }
 
   downloadQRCode(qrLink: string) {
@@ -96,18 +108,18 @@ export class CustomSelfRegistrationComponent implements OnInit {
 
   sendViaEmail(link: string): void {
     if (!link) { return }
-    const message = `Register for ${this.configSvc.orgReadData.orgName} by clicking below ${link} `
+    const message = `Register for ${this.configSvc.orgReadData.orgName} by clicking the link below:\n\n${link + ' '}`
     const subject = encodeURIComponent('Self Registration Link')
-    const body = encodeURIComponent(`Self Registration Link: ${message}`)
+    const body = encodeURIComponent(message)
     const mailtoLink = `mailto:?subject=${subject}&body=${body}`
     window.open(mailtoLink, '_self')
   }
 
   sendViaWhatsApp(link: string): void {
-    if (!link) { return }
-    const message = `Register for ${this.configSvc.orgReadData.orgName} by clicking below ${link} `
+    const message = `Register for ${this.configSvc.orgReadData.orgName} by clicking the link below:\n\n${link + ' '}`
+
     const encodedLink = encodeURIComponent(message)
-    const whatsappUrl = `https://api.whatsapp.com/send?text=${encodedLink}`
+    const whatsappUrl = `https://api.whatsapp.com/send?text=${encodedLink} `
     window.open(whatsappUrl, '_blank')
   }
 
@@ -122,24 +134,25 @@ export class CustomSelfRegistrationComponent implements OnInit {
     })
 
     const payload = {
-      // registrationStartDate: (Math.floor(this.selfRegistrationForm.controls['startDate'].value.getTime())),
-      // registrationEndDate: (Math.floor(this.selfRegistrationForm.controls['endDate'].value.getTime())),
+      registrationStartDate: (Math.floor(this.selfRegistrationForm.controls['startDate'].value.getTime())),
+      registrationEndDate: (Math.floor(this.selfRegistrationForm.controls['endDate'].value.getTime())),
       orgId: this.rootOrdId,
     }
     this.onboardingService.generateSelfRegistrationQRCode(payload).subscribe({
       next: (response: any) => {
         if (response.result && Object.keys(response.result).length > 0 && response.responseCode === 'OK') {
           this.customRegistrationLinks = response.result
-          // this.configSvc.orgReadData.enddateregistration = new Date(this.selfRegistrationForm.controls['endDate'].value)
-          // this.configSvc.orgReadData.startdateregistration = new Date(this.selfRegistrationForm.controls['startDate'].value)
+          this.latestRegisteredData.endDate = new Date(this.selfRegistrationForm.controls['endDate'].value)
+          this.latestRegisteredData.startDate = new Date(this.selfRegistrationForm.controls['startDate'].value)
+          this.latestRegisteredData.status = 'active'
           dialogRef.close()
 
         } else if (response?.params?.errmsg) {
-          this.snackbar.open(response?.params?.errmsg, '', { duration: 3000 })
+          this.snackbar.open(response?.params?.errmsg, 'X', { duration: 3000, panelClass: ['error'] })
           dialogRef.close()
 
         } else {
-          this.snackbar.open('Oops! We couldn\'t generate the link or QR code.Please try again', '', { duration: 3000 })
+          this.snackbar.open('Oops! We couldn\'t generate the link or QR code.Please try again', 'X', { duration: 3000, panelClass: ['error'] })
           dialogRef.close()
         }
       },
@@ -149,17 +162,12 @@ export class CustomSelfRegistrationComponent implements OnInit {
     })
   }
 
-  checkRegistrationStatus(_endDateRegistration: string): boolean {
-    // if (!endDateRegistration) { return false }
-
-    // const endDate = new Date(endDateRegistration)
-    // const today = new Date()
-    // return today <= endDate
-    return true
-  }
+  checkRegistrationStatus(endDateRegistration: string): boolean {
+    if (!endDateRegistration) { return false }
 
-  selectedButtonCode(type: string) {
-    this.selectedButton = type
+    const endDate = new Date(endDateRegistration)
+    const today = new Date()
+    return today <= endDate
   }
 
 }

project/ws/app/src/lib/routes/home/routes/onboarding/interface/onboarding.interface.ts

@@ -9,3 +9,16 @@ export interface ICustomRegistrationQRCodeResponse {
   registrationLink: string,
   qrRegistrationLink: string
 }
+
+export interface IRegisteredLinksList {
+  orgId: string
+  id: string
+  status: string
+  url: string
+  startDate: string
+  endDate: string
+  createdBy: string
+  createdDateTime: string
+  numberOfUsersOnboarded: number
+  qrCodeImagePath: string
+}

project/ws/app/src/lib/routes/home/routes/onboarding/loading-popup/loading-popup.component.html

@@ -1,4 +1,4 @@
-<div class="flex items-center justify-center">
+<div class="flex items-center justify-center h-full">
   <div class="flex flex-col w-48 gap-4 items-center justify-center">
     <div class="flex flex-col gap-2 w-full items-center">
       <div class="font-semibold">Generating Link</div>

project/ws/app/src/lib/routes/home/services/onboarding.service.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs'
 
 const API_END_POINTS = {
   CUSTOM_SELF_REGISTRATION_QR: '/apis/proxies/v8/customselfregistration',
+  REGISTERED_LINKS_LIST: '/apis/proxies/v8/customselfregistration/listallqrs',
 }
 
 @Injectable({
@@ -16,4 +17,8 @@ export class OnboardingService {
   generateSelfRegistrationQRCode(request: any): Observable<any> {
     return this.http.post<any>(`${API_END_POINTS.CUSTOM_SELF_REGISTRATION_QR}`, request)
   }
+
+  getListOfRegisteedLinks(request: any) {
+    return this.http.post<any>(`${API_END_POINTS.REGISTERED_LINKS_LIST}`, request)
+  }
 }

src/styles/styles.scss

@@ -841,3 +841,7 @@ h3.shepherd-title {
 .active-radio-button .mat-radio-button .mat-radio-container .mat-radio-outer-circle {
   border-color: #1b4ca1 !important;
 }
+
+.mat-mdc-dialog-container {
+  --mdc-dialog-container-shape: 8px
+}