Merge pull request #2601 from IDEMSInternational/feature-kw-completio…

…n-modal

Kuwait Theme: Completion modal

packages/components/plh/index.ts

@@ -1,19 +1,27 @@
 import { PlhParentPointCounterComponent } from "./parent-point-counter/parent-point-counter.component";
 import { PlhParentPointBoxComponent } from "./parent-point-box/parent-point-box.component";
 import { PlhModuleListItemComponent } from "./plh-kids-kw/components/module-list-item/module-list-item.component";
+import { PlhCompletionModalComponent } from "./plh-kids-kw/components/completion-modal/completion-modal.component";
 
-export { PlhParentPointCounterComponent, PlhParentPointBoxComponent, PlhModuleListItemComponent };
+export {
+  PlhParentPointCounterComponent,
+  PlhParentPointBoxComponent,
+  PlhModuleListItemComponent,
+  PlhCompletionModalComponent,
+};
 
 export const PLH_COMPONENTS = [
   PlhParentPointCounterComponent,
   PlhParentPointBoxComponent,
   PlhModuleListItemComponent,
+  PlhCompletionModalComponent,
 ];
 
 export const PLH_COMPONENT_MAPPING = {
   parent_point_counter: PlhParentPointCounterComponent,
   parent_point_box: PlhParentPointBoxComponent,
   plh_module_list_item: PlhModuleListItemComponent,
+  plh_completion_modal: PlhCompletionModalComponent,
 };
 
 export type PLHComponentName = keyof typeof PLH_COMPONENT_MAPPING;

packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html

@@ -0,0 +1,16 @@
+<div class="completion-modal">
+  <div class="wrapper">
+    <div class="confetti-image">
+      <img [src]="params.backgroundImageAsset | plhAsset" />
+    </div>
+    <span *ngIf="_row.rows" class="children">
+      <plh-template-component
+        *ngFor="let childRow of _row.rows | filterDisplayComponent; trackBy: trackByRow"
+        class="child"
+        [row]="childRow"
+        [parent]="parent"
+        [attr.data-rowname]="_row.name"
+      ></plh-template-component>
+    </span>
+  </div>
+</div>

packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
+import { IonicModule } from "@ionic/angular";
+
+import { PlhCompletionModalComponent } from "./completion-modal.component";
+
+describe("CompletionModalComponent", () => {
+  let component: PlhCompletionModalComponent;
+  let fixture: ComponentFixture<PlhCompletionModalComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PlhCompletionModalComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlhCompletionModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from "@angular/core";
+import { TemplateBaseComponent } from "src/app/shared/components/template/components/base";
+import { getStringParamFromTemplateRow } from "src/app/shared/utils";
+
+interface IModalParams {
+  /* TEMPLATE PARAMETER: "background_image_asset". The background image of the modal */
+  backgroundImageAsset: string;
+}
+
+@Component({
+  selector: "plh-completion-modal",
+  templateUrl: "./completion-modal.component.html",
+  styleUrls: ["./completion-modal.component.scss"],
+})
+export class PlhCompletionModalComponent extends TemplateBaseComponent implements OnInit {
+  params: Partial<IModalParams> = {};
+
+  ngOnInit() {
+    this.getParams();
+  }
+
+  private getParams() {
+    this.params.backgroundImageAsset = getStringParamFromTemplateRow(
+      this._row,
+      "background_image_asset",
+      ""
+    );
+  }
+}

src/app/shared/components/template/components/round-icon-button/round-icon-button.component.ts

@@ -19,7 +19,19 @@ interface IRoundButtonParams {
   /** TEMPLATE_PARAMETER: 'style'. Legacy, use 'variant' instead */
   textAlign: string;
   /** TEMPLATE_PARAMETER: 'variant' */
-  variant: "no-background" | "module" | "category" | "navigation" | "information" | "module" | "home_screen" | "orange" | "dark_orange" | "yellow" | "standard" | "alternative";
+  variant:
+    | "no-background"
+    | "module"
+    | "category"
+    | "navigation"
+    | "information"
+    | "module"
+    | "home_screen"
+    | "orange"
+    | "dark_orange"
+    | "yellow"
+    | "standard"
+    | "alternative";
 }
 
 @Component({

src/theme/themes/plh_kids_kw/_overrides.scss

@@ -689,4 +689,38 @@ body[data-theme="plh_kids_kw"] {
       background: var(--color-secondary-blue-40);
     }
   }
+
+  // Completion Modal
+  plh-completion-modal {
+    .completion-modal {
+      margin: 20px -20px;
+      background: linear-gradient(
+        310deg,
+        var(--color-secondary-blue-50),
+        var(--color-secondary-blue-80)
+      );
+      min-height: 80vh;
+      max-width: 480px;
+      border-radius: 40px;
+    }
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      min-height: inherit;
+      height: 100%;
+
+      position: relative;
+      .children {
+        position: relative;
+        width: 100%;
+        padding: 0px 16px;
+      }
+      .confetti-image {
+        position: absolute;
+        top: -30px;
+      }
+    }
+  }
 }