Merge pull request #251 from PROCOLLAB-github/new-tooltips

New tooltips

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/features/news-form/news-form.component.html

@@ -11,6 +11,7 @@
       placeholder="сегодня был хороший день"
       (paste)="onPaste($event)"
       (keydown.meta.enter)="onSubmit()"
+      [maxLength]="15940"
     ></app-input>
     <i appIcon icon="send" appSquare="12" class="form__send" (click)="onSubmit()"></i>
   </div>

projects/social_platform/src/app/office/features/project-rating/project-rating.component.html

@@ -29,6 +29,7 @@
         size="big"
         [formControlName]="criterion.id"
         placeholder="Небольшой комментарий, если необходимо"
+        [maxLength]="50"
       ></app-textarea>
 
       @if (form.get(criterion.id.toString())?.errors?.['maxlength']) {

projects/social_platform/src/app/office/features/project-rating/project-rating.component.ts

@@ -49,7 +49,6 @@ import { ControlErrorPipe } from "@corelib";
     RangeCriterionInputComponent,
     BooleanCriterionComponent,
     ReactiveFormsModule,
-    ControlErrorPipe,
   ],
   templateUrl: "./project-rating.component.html",
   styleUrl: "./project-rating.component.scss",

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,7 @@ export class OfficeComponent implements OnInit, OnDestroy {
           (program: Program) => Date.now() < Date.parse(program.datetimeRegistrationEnds)
         );
         this.programs.set(resultPrograms.slice(0, 3));
+        this.tryShowRegisteredProgramModal();
       },
     });
 
@@ -146,6 +152,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 +195,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/onboarding/stage-one/stage-one.component.scss

@@ -5,8 +5,15 @@
   &__greeting {
     position: relative;
     display: flex;
+    flex-direction: column;
     gap: 10px;
-    align-items: center;
+    max-width: 100%;
+
+    @include responsive.apply-desktop {
+      flex-direction: row;
+      align-items: center;
+      max-width: 60%;
+    }
   }
 }
 

projects/social_platform/src/app/office/onboarding/stage-two/stage-two.component.scss

@@ -5,8 +5,15 @@
   &__greeting {
     position: relative;
     display: flex;
+    flex-direction: column;
     gap: 10px;
-    align-items: center;
+    max-width: 100%;
+
+    @include responsive.apply-desktop {
+      flex-direction: row;
+      align-items: center;
+      max-width: 60%;
+    }
   }
 }
 
@@ -15,6 +22,14 @@
   display: inline-flex;
   gap: 10px;
   align-items: center;
+
+  ::ng-deep {
+    app-tooltip {
+      .tooltip__content--right {
+        top: 110%;
+      }
+    }
+  }
 }
 
 .content {