add new tooltips & modals for project team, programs, rating, login

Author: Awakich

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/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>

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

@@ -75,6 +75,12 @@
       }
     }
   }
+
+  &__tooltip {
+    position: fixed;
+    right: 20%;
+    bottom: 2%;
+  }
 }
 
 .filter {
@@ -161,3 +167,85 @@
     display: none;
   }
 }
+
+.tooltip {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  &__wrapper {
+    position: absolute;
+    bottom: 22px;
+    right: 100%;
+    left: auto;
+    width: 310px;
+    padding: 18px 10px 10px 16px;
+    background-color: var(--white);
+    border: 0.5px solid var(--grey-for-text);
+    border-radius: var(--rounded-lg) var(--rounded-lg) 0 var(--rounded-lg);
+
+    :last-child {
+      color: var(--black);
+      cursor: pointer;
+    }
+  }
+
+  &__text {
+    color: var(--grey-for-text);
+
+    a {
+      color: var(--accent);
+    }
+  }
+}
+
+.cancel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 80%;
+  max-height: calc(100vh - 40px);
+  padding: 0px 24px;
+  overflow-y: auto;
+
+  @include responsive.apply-desktop {
+    width: 605px;
+    max-width: 100%;
+  }
+
+  &__cross {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 32px;
+    height: 32px;
+    cursor: pointer;
+
+    @include responsive.apply-desktop {
+      top: 8px;
+      right: 8px;
+    }
+  }
+
+  &__top {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+  }
+
+  &__title {
+    text-align: center;
+  }
+
+  &__text {
+    text-align: center;
+
+    &-block {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin: 30px 0px;
+    }
+  }
+}

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

@@ -47,6 +47,8 @@ import { tagsFilter } from "projects/core/src/consts/filters/tags-filter.const";
 import { ExportFileService } from "@office/services/export-file.service";
 import { saveFile } from "@utils/helpers/export-file";
 import { ProgramDataService } from "@office/program/services/program-data.service";
+import { TooltipComponent } from "@ui/components/tooltip/tooltip.component";
+import { ModalComponent } from "@ui/components/modal/modal.component";
 
 @Component({
   selector: "app-list",
@@ -62,6 +64,8 @@ import { ProgramDataService } from "@office/program/services/program-data.servic
     InfoCardComponent,
     ButtonComponent,
     IconComponent,
+    TooltipComponent,
+    ModalComponent,
   ],
   standalone: true,
 })
@@ -114,6 +118,9 @@ export class ProgramListComponent implements OnInit, OnDestroy, AfterViewInit {
   readonly ratingOptionsList = tagsFilter;
   isFilterOpen = false;
 
+  readonly isHintExpertsVisible = signal<boolean>(false);
+  readonly isHintExpertsModal = signal<boolean>(false);
+
   protected readonly loadingExportProjects = signal<boolean>(false);
   protected readonly loadingExportSubmittedProjects = signal<boolean>(false);
   protected readonly loadingExportRates = signal<boolean>(false);
@@ -609,6 +616,12 @@ export class ProgramListComponent implements OnInit, OnDestroy, AfterViewInit {
       .then(() => console.log("Query change from ProjectsComponent"));
   }
 
+  openHintModal(event: Event): void {
+    event.preventDefault();
+    this.isHintExpertsVisible.set(false);
+    this.isHintExpertsModal.set(true);
+  }
+
   private get itemsPerPage(): number {
     return this.listType === "rating"
       ? 10

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

@@ -165,4 +165,45 @@ <h3 class="links__title text-body-12">материалы</h3>
     >
   </div>
 </app-modal>
+
+<app-modal [open]="registeredProgramModal()" (openChange)="registeredProgramModal.set(false)">
+  <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">
+        Это закрытая группа программы – доступ к ней есть только у зарегистрированных участников
+      </p>
+
+      <p class="text-body-12">Здесь вы найдете:</p>
+
+      <ul class="cancel__text-list">
+        <li class="text-body-12">
+          самые актуальные и важные файлы программы (например, Положение)
+        </li>
+        <li class="text-body-12">контакты организаторов для связи</li>
+        <li class="text-body-12">новости программы</li>
+      </ul>
+
+      <p class="text-body-12">
+        Важно: именно через закрытую группу и кнопку «подать проект» вы отправляете результаты
+        работы своей команды, когда будете готовы
+      </p>
+
+      <p class="text-body-12">
+        Будьте внимательны: по истечению дедлайна, определенного организаторами, кнопка становится
+        не кликабельной 👻
+      </p>
+    </div>
+
+    <app-button
+      customTypographyClass="text-body-12"
+      size="medium"
+      (click)="registeredProgramModal.set(false)"
+      >спасибо, понятно</app-button
+    >
+  </div>
+</app-modal>
 }

projects/social_platform/src/app/office/program/detail/main/main.component.scss

@@ -220,6 +220,21 @@
     width: 40%;
     color: var(--dark-grey);
     text-align: center;
+
+    &-block {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin: 30px 0px;
+    }
+
+    &-list {
+      margin-left: 20px;
+
+      li {
+        list-style-type: disc;
+      }
+    }
   }
 
   &__button {

projects/social_platform/src/app/office/program/detail/main/main.component.ts

@@ -98,6 +98,8 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy {
   showProgramModal = signal(false);
   showProgramModalErrorMessage = signal<string | null>(null);
 
+  registeredProgramModal = signal<boolean>(false);
+
   programId?: number;
 
   subscriptions$ = signal<Subscription[]>([]);
@@ -135,6 +137,13 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy {
         tap(program => {
           this.program = program;
           this.registerDateExpired = Date.now() > Date.parse(program.datetimeRegistrationEnds);
+          if (program.isUserMember) {
+            const seen = this.hasSeenRegisteredProgramModal(program.id);
+            if (!seen) {
+              this.registeredProgramModal.set(true);
+              this.markSeenRegisteredProgramModal(program.id);
+            }
+          }
         }),
         concatMap(program => {
           if (program.isUserMember) {
@@ -318,6 +327,24 @@ export class ProgramDetailMainComponent implements OnInit, OnDestroy {
     this.descriptionExpandable = descElement.scrollHeight > descElement.clientHeight;
   }
 
+  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) {}
+  }
+
   private setupNewsObserver(): void {
     const observer = new IntersectionObserver(this.onNewsInVew.bind(this), {
       root: document.querySelector(".office__body"),