From 8e5df55c7246806d84ba5aca103e6fba32f16074 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Thu, 5 Dec 2024 07:03:17 +0300 Subject: [PATCH 1/8] feat: completion modal --- packages/components/plh/index.ts | 10 +++++- .../completion-modal.component.html | 19 +++++++++++ .../completion-modal.component.scss | 0 .../completion-modal.component.spec.ts | 24 ++++++++++++++ .../completion-modal.component.ts | 32 +++++++++++++++++++ 5 files changed, 84 insertions(+), 1 deletion(-) create mode 100644 packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html create mode 100644 packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.scss create mode 100644 packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.spec.ts create mode 100644 packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.ts diff --git a/packages/components/plh/index.ts b/packages/components/plh/index.ts index 22ff38bdc5..4a6342db41 100644 --- a/packages/components/plh/index.ts +++ b/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; diff --git a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html new file mode 100644 index 0000000000..f257843715 --- /dev/null +++ b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html @@ -0,0 +1,19 @@ +
+
+
+ +
+ + + +
+
diff --git a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.scss b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.spec.ts b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.spec.ts new file mode 100644 index 0000000000..92cae483bb --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.ts b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.ts new file mode 100644 index 0000000000..a2a570585d --- /dev/null +++ b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.ts @@ -0,0 +1,32 @@ +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: "gift_image_asset". The image of the gift */ + giftImageAsset: string; + /* 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 = {}; + + ngOnInit() { + this.getParams(); + } + + private getParams() { + this.params.giftImageAsset = getStringParamFromTemplateRow(this._row, "gift_image_asset", ""); + this.params.backgroundImageAsset = getStringParamFromTemplateRow( + this._row, + "background_image_asset", + "" + ); + } +} From 718c59437103cbfb825167c08dce165f586be758 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Thu, 5 Dec 2024 07:03:42 +0300 Subject: [PATCH 2/8] styling --- src/theme/themes/plh_kids_kw/_overrides.scss | 27 ++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index bb82e6357a..6b093706e0 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -666,4 +666,31 @@ body[data-theme="plh_kids_kw"] { padding: 8px; } } + + // Completion Modal + plh-completion-modal { + .completion-modal { + background: linear-gradient( + 310deg, + var(--color-secondary-blue-50), + var(--color-secondary-blue-80) + ); + height: 640px; + border-radius: 40px; + overflow-y: visible; + } + .wrapper { + // background-position: center; + background-size: 100%; + background-repeat: no-repeat; + background-position-y: -36px; + background-position-x: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + overflow-y: visible; + } + } } From 2ee375a1614ccfc231cd6bdc5f9eb62dfc87c8ee Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Thu, 5 Dec 2024 08:06:16 +0300 Subject: [PATCH 3/8] set background image as div --- .../completion-modal.component.html | 8 +++---- src/theme/themes/plh_kids_kw/_overrides.scss | 23 +++++++++++++------ 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html index f257843715..ae1df59731 100644 --- a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html +++ b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html @@ -1,8 +1,8 @@
-
+
+
+ +
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 271874fd00..b20edcdb94 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -700,20 +700,29 @@ body[data-theme="plh_kids_kw"] { ); height: 640px; border-radius: 40px; - overflow-y: visible; } .wrapper { - // background-position: center; - background-size: 100%; - background-repeat: no-repeat; - background-position-y: -36px; - background-position-x: center; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; - overflow-y: visible; + position: relative; + .children { + width: 100%; + padding: 0px 16px; + } + } + .confetti-image { + position: absolute; + top: -30px; + width: 100%; + } + .gift-image { + img { + max-width: 260px; + min-width: 200px; + } } } } From 2bf405f8dc08d87eacb38aed17a0cc7f935ae1a8 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Thu, 5 Dec 2024 15:52:43 +0300 Subject: [PATCH 4/8] refactor: set image as `background-image` --- .../completion-modal/completion-modal.component.html | 11 ++++------- .../completion-modal/completion-modal.component.ts | 3 --- 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html index ae1df59731..245aa4a726 100644 --- a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html +++ b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html @@ -1,11 +1,8 @@
-
-
- -
-
- -
+
Date: Thu, 5 Dec 2024 15:53:37 +0300 Subject: [PATCH 5/8] remove defined height --- src/theme/themes/plh_kids_kw/_overrides.scss | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index b20edcdb94..4cf9c12b65 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -698,7 +698,7 @@ body[data-theme="plh_kids_kw"] { var(--color-secondary-blue-50), var(--color-secondary-blue-80) ); - height: 640px; + min-height: 600px; border-radius: 40px; } .wrapper { @@ -706,23 +706,17 @@ body[data-theme="plh_kids_kw"] { flex-direction: column; justify-content: center; align-items: center; + min-height: inherit; height: 100%; - position: relative; + + background-size: 100%; + background-repeat: no-repeat; + background-position-y: -36px; + background-position-x: center; .children { width: 100%; padding: 0px 16px; } } - .confetti-image { - position: absolute; - top: -30px; - width: 100%; - } - .gift-image { - img { - max-width: 260px; - min-width: 200px; - } - } } } From fa04fa8fb2b891c7fa263ad6ff1e302c42985b0b Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Fri, 6 Dec 2024 08:15:53 +0300 Subject: [PATCH 6/8] refactor: use img for background-image --- .../completion-modal/completion-modal.component.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html index 245aa4a726..2e35e10e9e 100644 --- a/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html +++ b/packages/components/plh/plh-kids-kw/components/completion-modal/completion-modal.component.html @@ -1,8 +1,8 @@
-
+
+
+ +
Date: Fri, 6 Dec 2024 08:16:13 +0300 Subject: [PATCH 7/8] refactor styling --- src/theme/themes/plh_kids_kw/_overrides.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 4cf9c12b65..bdadf97de7 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -698,7 +698,7 @@ body[data-theme="plh_kids_kw"] { var(--color-secondary-blue-50), var(--color-secondary-blue-80) ); - min-height: 600px; + min-height: 68vh; border-radius: 40px; } .wrapper { @@ -709,14 +709,16 @@ body[data-theme="plh_kids_kw"] { min-height: inherit; height: 100%; - background-size: 100%; - background-repeat: no-repeat; - background-position-y: -36px; - background-position-x: center; + position: relative; .children { + position: relative; width: 100%; padding: 0px 16px; } + .confetti-image { + position: absolute; + top: -30px; + } } } } From 1747e2a3995853510f6a08f80edadd87ebe3e190 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Fri, 6 Dec 2024 13:09:28 +0000 Subject: [PATCH 8/8] style: adapt plh-completion-modal styling for use in fullscreen pop-up --- src/theme/themes/plh_kids_kw/_overrides.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index bdadf97de7..330df60667 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -693,12 +693,14 @@ body[data-theme="plh_kids_kw"] { // 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: 68vh; + min-height: 80vh; + max-width: 480px; border-radius: 40px; } .wrapper {