feat: add modal starter designs

libs/features/convs-mgr/fallbacks/src/lib/modals/fallback-modal/fallback-modal.component.html

@@ -1 +1,30 @@
-<p>fallback-modal works!</p>
+<div class="main">
+  <div class="title-section">
+    <span class="title">Configure fallback - Global - “Hi”</span>
+    <div class="text">Fallbacks are configured using a concept called “Intent analysis”. Our AI will classify what a user is trying
+      to do and react accordingly. In this section, you can define one of these intents and how the system should react.
+    </div>
+  </div>
+
+  <div class="input-analysis">
+    <span class="title">Input analysis</span>
+    <div class="text">List the keywords you wish to group together under one “intent”. Don’t worry, our AI will expand
+      your list to include all similar words in different languages.
+    </div>
+  </div>
+
+  <div class="action">
+    <div>What should the bot do when a user expresses this intent?</div>
+  </div>
+
+  <div class="action-details">
+    <div>
+      <span>Story</span>
+      <span>Block</span>
+    </div>
+  </div>
+
+  <div>
+    <button class="btn">Update</button>
+  </div>
+</div>

libs/features/convs-mgr/fallbacks/src/lib/modals/fallback-modal/fallback-modal.component.scss

@@ -0,0 +1,21 @@
+.main {
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  .title-section,
+  .input-analysis {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+
+    .title {
+      font-weight: 500;
+    }
+
+    .text {
+      font-size: 0.9rem;
+    }
+  }
+}

libs/features/convs-mgr/fallbacks/src/lib/modals/fallback-modal/fallback-modal.component.ts

@@ -1,8 +1,11 @@
 import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-fallback-modal',
   templateUrl: './fallback-modal.component.html',
   styleUrls: ['./fallback-modal.component.scss'],
 })
-export class FallbackModalComponent {}
+export class FallbackModalComponent {
+  constructor(public dialogRef: MatDialogRef<FallbackModalComponent>) {}
+}

libs/features/convs-mgr/fallbacks/src/lib/pages/fallback-main-page/fallback-main-page.component.html

@@ -6,5 +6,7 @@
       Sometimes, your users might get stuck or ask something you didn’t foresee. Through this feature you can use the
       power of AI to control where to route them for optima learner satisfaction!
     </div>
+
+    <button class="btn" (click)="openModal()">OpenModal</button>
   </section>
 </convl-page>

libs/features/convs-mgr/fallbacks/src/lib/pages/fallback-main-page/fallback-main-page.component.scss

@@ -11,4 +11,9 @@
   color: #101010;
   font-size: 2rem;
   font-weight: 400;
-}
+}
+
+.btn {
+  max-width: 100px;
+  max-height: 30px;
+}

libs/features/convs-mgr/fallbacks/src/lib/pages/fallback-main-page/fallback-main-page.component.ts

@@ -1,8 +1,20 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+
+import { FallbackModalComponent } from '../../modals/fallback-modal/fallback-modal.component';
 
 @Component({
   selector: 'app-fallback-main-page',
   templateUrl: './fallback-main-page.component.html',
   styleUrls: ['./fallback-main-page.component.scss'],
 })
-export class FallbackMainPageComponent {}
+export class FallbackMainPageComponent {
+  constructor(public dialog: MatDialog) {}
+
+  openModal() {
+    this.dialog.open(FallbackModalComponent, {
+      height: '600px',
+      width: '600px',
+    });
+  }
+}

libs/features/convs-mgr/fallbacks/src/lib/utils/fallback-forms.models.ts

@@ -0,0 +1,10 @@
+import { FormBuilder } from '@angular/forms';
+
+export function initFallBackFormGroup(_fb: FormBuilder, fallbackForm: any) {
+  return _fb.group({
+    id: ['' ?? fallbackForm.id],
+    userSays: ['' ?? fallbackForm.userSays],
+    actions: ['' ?? fallbackForm.actions],
+    actionDelays: ['' ?? fallbackForm.actionDelays],
+  });
+}