New tooltips

projects/social_platform/src/app/auth/login/login.component.html

@@ -2,7 +2,6 @@
 
 <div class="login">
   <div class="login__left">
-    <!-- Центр -->
     <div class="login__left-content">
       <form class="auth" [formGroup]="loginForm" (ngSubmit)="onSubmit()" (keyup.enter)="onSubmit()">
         <div class="auth__wrapper">
@@ -107,7 +106,6 @@
       </form>
     </div>
 
-    <!-- Низ -->
     <div class="login__left-footer">
       <div class="tooltip">
         <app-tooltip
@@ -119,16 +117,25 @@
         @if (isHintLoginVisible()) {
         <div class="tooltip__wrapper" (clickOutside)="toggleTooltip()">
           <p class="tooltip__text text-body-10">
-            Если у тебя есть вопросы, напиши в наш телеграм-бот поддержки
+            Возникли технические сложности или остались вопросы?
+          </p>
+          <p class="tooltip__text text-body-10">
+            Все ответы в нашем боте поддержки
             <a href="https://t.me/procollab_bot">{{ "@procollab_bot" }}</a>
           </p>
 
           <br />
 
           <p class="tooltip__text text-body-10">
-            Если не нашел ответ в боте, напиши в техподдержку —
+            Для уникальных кейсов или нерешаемых сложностей на связи наша техническая поддержка –
             <a href="https://t.me/procollab_support">{{ "@procollab_support" }}</a>
           </p>
+
+          <br />
+
+          <p class="tooltip__text text-body-10">
+            Время работы оператора:  пн-пт, 10:00-19:00 по московскому времени
+          </p>
         </div>
         }
       </div>

projects/social_platform/src/app/auth/login/login.component.scss

@@ -97,7 +97,7 @@
     position: absolute;
     bottom: 22px;
     left: 38px;
-    width: 260px;
+    width: 310px;
     padding: 18px 10px 10px 16px;
     background-color: var(--white);
     border: 0.5px solid var(--grey-for-text);

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}` },

projects/social_platform/src/app/office/program/detail/list/list.component.html

@@ -108,5 +108,59 @@
       }
     </div>
   </div>
+  } @if (listType !== 'members' && listType !== 'projects') {
+  <div class="page__tooltip">
+    <div class="tooltip">
+      <app-tooltip color="grey" iconSize="40" (show)="isHintExpertsVisible.set(true)"></app-tooltip>
+
+      @if (isHintExpertsVisible()) {
+      <div class="tooltip__wrapper" (mouseleave)="isHintExpertsVisible.set(false)">
+        <p class="tooltip__text text-body-10">
+          Нажмите, чтобы открыть подсказку и узнать больше о процессе оценивания проектов
+        </p>
+        <p class="tooltip__text text-body-10" (click)="openHintModal($event)">подробнее</p>
+      </div>
+      }
+    </div>
+  </div>
+
+  <app-modal [open]="isHintExpertsModal()" (openChange)="isHintExpertsModal.set(false)">
+    <div class="cancel">
+      <div class="cancel__top">
+        <p class="cancel__title text-body-14">Как выставить оценки проекту</p>
+      </div>
+
+      <div class="cancel__text-block">
+        <p class="text-body-12">
+          Перед стартом оценки, <br />
+          настройте фильтрацию справа – выберите регион или конкретный кейс, а также работы, которые
+          ранее не были оценены другими экспертами
+        </p>
+
+        <p class="text-body-12">
+          После изучения материалов участников (описания и презентации проекта), проставьте оценки
+          по критериям. При необходимости оставьте небольшой комментарий
+        </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)="isHintExpertsModal.set(false)"
+        >спасибо, понятно</app-button
+      >
+    </div>
+  </app-modal>
   }
 </div>