add modal for first time member of program login

Author: Awakich

projects/social_platform/src/app/office/office.component.html

@@ -69,6 +69,46 @@ <h3 class="message-modal__title text-body-14">Ваш аккаунт проход
     </div>
   </app-modal>
 
+  <app-modal
+    [open]="showRegisteredProgramModal()"
+    (openChange)="showRegisteredProgramModal.set(!showRegisteredProgramModal())"
+  >
+    <div class="cancel" style="width: 605px; padding: 0px 24px">
+      <div class="cancel__top">
+        <p class="cancel__title text-body-14">Привет!</p>
+      </div>
+
+      <div class="cancel__text-block">
+        <p class="text-body-12">
+          Рады знакомству 🙌 <br />
+          Вы находитесь на платформе procollab – здесь проходит программа, на которую вы ранее
+          регистрировались через форму заявки
+        </p>
+
+        <p class="text-body-12">
+          Ваша программа и её закрытая группа (к которой у вас автоматически есть доступ) находится
+          в одноименной вкладке «программы»
+        </p>
+
+        <p class="text-body-12">
+          На платформе есть еще много интересного: цифровой профиль, проекты, новостная лента, чаты
+          и другое – рекомендуем изучить
+        </p>
+
+        <p class="text-body-12">
+          Поздравляем с регистрацией! Желаем удачи в прохождении программы :)
+        </p>
+      </div>
+
+      <app-button
+        customTypographyClass="text-body-12"
+        size="medium"
+        (click)="showRegisteredProgramModal.set(false)"
+        >спасибо, понятно</app-button
+      >
+    </div>
+  </app-modal>
+
   <app-modal [open]="inviteErrorModal">
     <div class="message-modal">
       <h3 class="message-modal__title text-body-14">Приглашение на текущий проект было удалено</h3>

projects/social_platform/src/app/office/office.component.scss

@@ -134,6 +134,59 @@
   }
 }
 
+.cancel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-height: calc(100vh - 40px);
+
+  i {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+  }
+
+  &__top {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  &__title {
+    text-align: center;
+  }
+
+  &__text {
+    width: 40%;
+    color: var(--dark-grey);
+    text-align: center;
+
+    &-block {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin: 30px 0;
+    }
+
+    &-list {
+      margin-left: 20px;
+
+      li {
+        list-style-type: disc;
+      }
+    }
+  }
+
+  &__button {
+    margin-top: 20px;
+  }
+}
+
 .container {
   width: 100%;
   max-width: 1040px;

projects/social_platform/src/app/office/office.component.ts

@@ -75,7 +75,13 @@ export class OfficeComponent implements OnInit, OnDestroy {
   waitVerificationModal = false;
   waitVerificationAccepted = false;
 
+  showRegisteredProgramModal = signal<boolean>(false);
+
+  registeredProgramToShow?: Program | null = null;
+  private pendingRegisteredModalCheck = false;
+
   inviteErrorModal = false;
+
   protected readonly programs = signal<Program[]>([]);
 
   navItems: {
@@ -107,7 +113,6 @@ export class OfficeComponent implements OnInit, OnDestroy {
     this.subscriptions$.push(profileSub$);
 
     this.chatService.connect().subscribe(() => {
-      // Change users online status
       this.chatService.onSetOffline().subscribe(evt => {
         this.chatService.setOnlineStatus(evt.userId, false);
       });
@@ -133,6 +138,9 @@ export class OfficeComponent implements OnInit, OnDestroy {
           (program: Program) => Date.now() < Date.parse(program.datetimeRegistrationEnds)
         );
         this.programs.set(resultPrograms.slice(0, 3));
+
+        console.log(this.programs().find(prog => prog.isUserMember));
+        this.tryShowRegisteredProgramModal();
       },
     });
 
@@ -146,6 +154,8 @@ export class OfficeComponent implements OnInit, OnDestroy {
   onAcceptWaitVerification() {
     this.waitVerificationAccepted = true;
     localStorage.setItem("waitVerificationAccepted", "true");
+    this.pendingRegisteredModalCheck = true;
+    this.tryShowRegisteredProgramModal();
   }
 
   onRejectInvite(inviteId: number): void {
@@ -187,6 +197,47 @@ export class OfficeComponent implements OnInit, OnDestroy {
       );
   }
 
+  private tryShowRegisteredProgramModal(): void {
+    if (!this.pendingRegisteredModalCheck) return;
+
+    const programs = this.programs();
+    if (!programs || programs.length === 0) return;
+
+    const memberProgram = programs.find(p => p.isUserMember);
+    if (!memberProgram) {
+      this.pendingRegisteredModalCheck = false;
+      return;
+    }
+
+    if (!this.hasSeenRegisteredProgramModal(memberProgram.id)) {
+      this.registeredProgramToShow = memberProgram;
+      this.showRegisteredProgramModal.set(true);
+      this.markSeenRegisteredProgramModal(memberProgram.id);
+    }
+
+    this.pendingRegisteredModalCheck = false;
+  }
+
+  private getRegisteredProgramSeenKey(programId: number): string {
+    return `program_registered_modal_seen_${programId}`;
+  }
+
+  private hasSeenRegisteredProgramModal(programId: number): boolean {
+    try {
+      return !!localStorage.getItem(this.getRegisteredProgramSeenKey(programId));
+    } catch (e) {
+      return false;
+    }
+  }
+
+  private markSeenRegisteredProgramModal(programId: number): void {
+    try {
+      localStorage.setItem(this.getRegisteredProgramSeenKey(programId), "1");
+    } catch (e) {
+      // ignore storage errors
+    }
+  }
+
   private buildNavItems(profile: User) {
     this.navItems = [
       { name: "мой профиль", icon: "person", link: `profile/${profile.id}` },