From 159645ca1b964f20113f3271c63da136b7c20959 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 26 Nov 2024 15:01:03 +0300 Subject: [PATCH 01/22] init: check-in component --- packages/components/plh/index.ts | 10 +++++++- .../activity-check-in.component.html | 1 + .../activity-check-in.component.scss | 0 .../activity-check-in.component.spec.ts | 24 +++++++++++++++++++ .../activity-check-in.component.ts | 12 ++++++++++ 5 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html create mode 100644 packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss create mode 100644 packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.spec.ts create mode 100644 packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts diff --git a/packages/components/plh/index.ts b/packages/components/plh/index.ts index 22ff38bdc5..a869e38445 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 { PlhActivityCheckInComponent } from "./plh-kids-kw/components/activity-check-in/activity-check-in.component"; -export { PlhParentPointCounterComponent, PlhParentPointBoxComponent, PlhModuleListItemComponent }; +export { + PlhParentPointCounterComponent, + PlhParentPointBoxComponent, + PlhModuleListItemComponent, + PlhActivityCheckInComponent, +}; export const PLH_COMPONENTS = [ PlhParentPointCounterComponent, PlhParentPointBoxComponent, PlhModuleListItemComponent, + PlhActivityCheckInComponent, ]; export const PLH_COMPONENT_MAPPING = { parent_point_counter: PlhParentPointCounterComponent, parent_point_box: PlhParentPointBoxComponent, plh_module_list_item: PlhModuleListItemComponent, + plh_activity_check_in: PlhActivityCheckInComponent, }; export type PLHComponentName = keyof typeof PLH_COMPONENT_MAPPING; diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html new file mode 100644 index 0000000000..f4c9c00e10 --- /dev/null +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -0,0 +1 @@ +

activity-check-in works!

diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.spec.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.spec.ts new file mode 100644 index 0000000000..36f89a12df --- /dev/null +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.spec.ts @@ -0,0 +1,24 @@ +import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; +import { IonicModule } from "@ionic/angular"; + +import { PlhActivityCheckInComponent } from "./activity-check-in.component"; + +describe("ActivityCheckInComponent", () => { + let component: PlhActivityCheckInComponent; + let fixture: ComponentFixture; + + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [PlhActivityCheckInComponent], + imports: [IonicModule.forRoot()], + }).compileComponents(); + + fixture = TestBed.createComponent(PlhActivityCheckInComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts new file mode 100644 index 0000000000..08656cc062 --- /dev/null +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -0,0 +1,12 @@ +import { Component, OnInit } from "@angular/core"; +import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; + +@Component({ + selector: "plh-activity-check-in", + templateUrl: "./activity-check-in.component.html", + styleUrls: ["./activity-check-in.component.scss"], +}) +export class PlhActivityCheckInComponent extends TemplateBaseComponent implements OnInit { + // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method + ngOnInit() {} +} From 07bcafb97c39fefb37d9343074e76053eb3e7460 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 26 Nov 2024 19:36:33 +0300 Subject: [PATCH 02/22] feat: functionality --- .../activity-check-in.component.html | 47 ++++++++- .../activity-check-in.component.ts | 97 ++++++++++++++++++- 2 files changed, 141 insertions(+), 3 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index f4c9c00e10..8ba8e3388c 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -1 +1,46 @@ -

activity-check-in works!

+@if (daysLeft >= 1) { +
+
+
+
+
+
+
{{ daysLeft }} day{{ daysLeft > 1 ? "s" : "" }} left
+
+ +
+ +
+
+
+

{{ params.title }}

+
+
+ +
+
+
+
+} @else { +
+
+
+ +
+
+
+

{{ params.title }}

+
+
+ +
+
+
+
+} diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index 08656cc062..0af7346dd0 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -1,5 +1,20 @@ import { Component, OnInit } from "@angular/core"; import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; +import { getStringParamFromTemplateRow } from "src/app/shared/utils"; + +interface IActivityCheckInParams { + id: string; + /* TEMPLATE PARAMETER: "title". The title attached at the bottom of the component */ + title?: string; + /* TEMPLATE PARAMETER: "locked_icon_asset". The icon that shows when the activity is locked */ + lockedIconAsset?: string; + /* TEMPLATE PARAMETER: "locked_image_asset". The illustration that shows when the activity is locked */ + lockedImageAsset?: string; + /* TEMPLATE PARAMETER: "unlocked_icon_asset". The icon that shows when the activity is unlocked */ + unlockedIconAsset?: string; + /* TEMPLATE PARAMETER: "unlocked_image_asset". The illustration that shows when the activity is locked */ + unlockedImageAsset?: string; +} @Component({ selector: "plh-activity-check-in", @@ -7,6 +22,84 @@ import { TemplateBaseComponent } from "src/app/shared/components/template/compon styleUrls: ["./activity-check-in.component.scss"], }) export class PlhActivityCheckInComponent extends TemplateBaseComponent implements OnInit { - // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method - ngOnInit() {} + params: Partial = {}; + + countDownDays: number = 6; // Number of days being counted down + daysLeft: number = 6; // Days until unlock + progressPercentage: number = 100; // Initial progress + + private unlockDate: Date; + + ngOnInit() { + this.getParams(); + if (this._row.value) { + this.checkInTimer(); + } + } + + private getParams() { + this.params.id = getStringParamFromTemplateRow(this._row, "id", null); + this.params.title = getStringParamFromTemplateRow(this._row, "title", null); + this.params.lockedIconAsset = getStringParamFromTemplateRow( + this._row, + "locked_icon_asset", + null + ); + this.params.lockedImageAsset = getStringParamFromTemplateRow( + this._row, + "locked_image_asset", + null + ); + this.params.unlockedIconAsset = getStringParamFromTemplateRow( + this._row, + "unlocked_icon_asset", + null + ); + this.params.unlockedImageAsset = getStringParamFromTemplateRow( + this._row, + "unlocked_image_asset", + null + ); + } + + private getLocalStorageKey(): string { + return `activity_${this.params.id}`; + } + + // Calculates the days until check in + private checkInTimer() { + const localStorageKey = this.getLocalStorageKey(); + const storedDate = localStorage.getItem(localStorageKey); + if (storedDate) { + this.unlockDate = new Date(storedDate); + } else { + this.unlockDate = new Date(); + this.unlockDate.setDate(this.unlockDate.getDate() + this.countDownDays); + localStorage.setItem(localStorageKey, this.unlockDate.toISOString()); + } + const dailyInterval = 24 * 60 * 60 * 1000; // 1 day + setInterval(() => this.updateProgress(), dailyInterval); + this.calculateUnlockDate(); + } + + // Calculates the exact unlock date + private calculateUnlockDate(): void { + const now = new Date(); + this.unlockDate = new Date(now.getTime() + this.countDownDays * 24 * 60 * 60 * 1000); + console.log("Unlock Date->", this.unlockDate); + } + + // Update the progress bar and unlock state + private updateProgress(): void { + const now = new Date(); + this.daysLeft = this.unlockDate.getTime() - now.getTime(); + + if (this.daysLeft > 0) { + this.daysLeft = Math.ceil(this.daysLeft / (24 * 60 * 60 * 1000)); + this.progressPercentage = ((7 - this.countDownDays) / 7) * 100; + } else { + this.progressPercentage = 0; + localStorage.removeItem(this.getLocalStorageKey()); + } + } } From ee4368ca2bfadb8d84660e6a89b3687dcaf0a2b0 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 26 Nov 2024 20:52:44 +0300 Subject: [PATCH 03/22] feat: progress tracking --- .../activity-check-in.component.html | 17 +++++++++-------- .../activity-check-in.component.ts | 5 ++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index 8ba8e3388c..9f56ba7356 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -2,14 +2,15 @@
-
-
+
+
+
+
{{ daysLeft }} day{{ daysLeft > 1 ? "s" : "" }} left
diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index 0af7346dd0..f90a0edafe 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -26,7 +26,7 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement countDownDays: number = 6; // Number of days being counted down daysLeft: number = 6; // Days until unlock - progressPercentage: number = 100; // Initial progress + progressPercentage: number = 16; // Initial progress private unlockDate: Date; @@ -86,7 +86,6 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement private calculateUnlockDate(): void { const now = new Date(); this.unlockDate = new Date(now.getTime() + this.countDownDays * 24 * 60 * 60 * 1000); - console.log("Unlock Date->", this.unlockDate); } // Update the progress bar and unlock state @@ -96,7 +95,7 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement if (this.daysLeft > 0) { this.daysLeft = Math.ceil(this.daysLeft / (24 * 60 * 60 * 1000)); - this.progressPercentage = ((7 - this.countDownDays) / 7) * 100; + this.progressPercentage = ((this.countDownDays - this.daysLeft) / this.countDownDays) * 100; } else { this.progressPercentage = 0; localStorage.removeItem(this.getLocalStorageKey()); From 9e14a609b266274ede6ca0024ac01470cd1276a0 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 26 Nov 2024 20:53:04 +0300 Subject: [PATCH 04/22] component styling --- src/theme/themes/plh_kids_kw/_overrides.scss | 65 ++++++++++++++++++++ 1 file changed, 65 insertions(+) diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index bc43f62bbb..c8fd309151 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -326,4 +326,69 @@ body[data-theme="plh_kids_kw"] { } } } + + // activity-check-in + plh-activity-check-in { + .activity-container { + width: 45%; + .wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + .progress-tracker { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + .wrapper { + width: 46%; + } + .progress-bar-container { + background-color: var(--ion-color-gray-200); + height: 14px; + border-radius: var(--ion-border-radius-rounded); + margin-right: 8px; + overflow: hidden; + width: 100%; + } + .progress-bar { + border-radius: var(--ion-border-radius-rounded); + height: 100%; + background-color: #e0b160; + transition: + width 0.5s ease, + background-color 0.5s ease; + } + .countdown-text { + color: var(--ion-color-gray-600); + font-weight: var(--font-weight-medium); + } + } + .image { + img { + width: 140px; + } + } + .details { + display: flex; + flex-direction: row; + align-items: center; + margin-top: -5px; + .title h4 { + color: var(--ion-color-gray-600); + font-weight: var(--font-weight-bold); + } + .icon { + display: flex; + align-items: center; + img { + width: 28px; + } + } + } + } + } } From 9dd342b01cd87ca72b5e90dc8ab249a257aa68da Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 26 Nov 2024 21:00:02 +0300 Subject: [PATCH 05/22] rtl config --- .../activity-check-in/activity-check-in.component.html | 5 ++++- .../activity-check-in/activity-check-in.component.ts | 5 +++++ src/theme/themes/plh_kids_kw/_overrides.scss | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index 9f56ba7356..fab8db1300 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -1,5 +1,8 @@ @if (daysLeft >= 1) { -
+
diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index f90a0edafe..7e5b2a2047 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from "@angular/core"; import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; +import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service"; import { getStringParamFromTemplateRow } from "src/app/shared/utils"; interface IActivityCheckInParams { @@ -30,6 +31,10 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement private unlockDate: Date; + constructor(public templateTranslateService: TemplateTranslateService) { + super(); + } + ngOnInit() { this.getParams(); if (this._row.value) { diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index c8fd309151..69721a9032 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -390,5 +390,13 @@ body[data-theme="plh_kids_kw"] { } } } + .activity-container[data-language-direction~="rtl"] { + .progress-tracker { + .progress-bar-container { + margin-right: 0; + margin-left: 6px; + } + } + } } } From f28ac57cdcc7aa0646e53e34dc2d41c1fcb8a096 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 26 Nov 2024 21:13:56 +0300 Subject: [PATCH 06/22] language --- .../activity-check-in/activity-check-in.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index fab8db1300..489ab9a115 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -15,7 +15,7 @@ >
-
{{ daysLeft }} day{{ daysLeft > 1 ? "s" : "" }} left
+
In {{ daysLeft }} day{{ daysLeft > 1 ? "s" : "" }}
From 3270e63a3d6ba822daf0e0fe2c2d19b5d73ff528 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Wed, 27 Nov 2024 18:54:31 +0300 Subject: [PATCH 07/22] feat: use sheets param for countdown --- .../activity-check-in.component.ts | 56 ++++++++++++------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index 7e5b2a2047..6c2fa727d0 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -1,9 +1,10 @@ import { Component, OnInit } from "@angular/core"; import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service"; -import { getStringParamFromTemplateRow } from "src/app/shared/utils"; +import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils"; interface IActivityCheckInParams { + /* TEMPLATE PARAMETER: "activity_id". The activity identifier attached at the bottom of the component */ id: string; /* TEMPLATE PARAMETER: "title". The title attached at the bottom of the component */ title?: string; @@ -15,6 +16,8 @@ interface IActivityCheckInParams { unlockedIconAsset?: string; /* TEMPLATE PARAMETER: "unlocked_image_asset". The illustration that shows when the activity is locked */ unlockedImageAsset?: string; + /* TEMPLATE PARAMETER: "days_to_count_down". The illustration that shows when the activity is locked */ + countDownDays?: number; } @Component({ @@ -25,8 +28,7 @@ interface IActivityCheckInParams { export class PlhActivityCheckInComponent extends TemplateBaseComponent implements OnInit { params: Partial = {}; - countDownDays: number = 6; // Number of days being counted down - daysLeft: number = 6; // Days until unlock + daysLeft: number; // Progress of days left progressPercentage: number = 16; // Initial progress private unlockDate: Date; @@ -37,13 +39,14 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement ngOnInit() { this.getParams(); + this.daysLeft = this.params.countDownDays; if (this._row.value) { this.checkInTimer(); } } private getParams() { - this.params.id = getStringParamFromTemplateRow(this._row, "id", null); + this.params.id = getStringParamFromTemplateRow(this._row, "activity_id", null); this.params.title = getStringParamFromTemplateRow(this._row, "title", null); this.params.lockedIconAsset = getStringParamFromTemplateRow( this._row, @@ -65,6 +68,7 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement "unlocked_image_asset", null ); + this.params.countDownDays = getNumberParamFromTemplateRow(this._row, "days_to_count_down", 6); } private getLocalStorageKey(): string { @@ -78,32 +82,46 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement if (storedDate) { this.unlockDate = new Date(storedDate); } else { - this.unlockDate = new Date(); - this.unlockDate.setDate(this.unlockDate.getDate() + this.countDownDays); + this.unlockDate = this.getMidnightOfDate(new Date()); + this.unlockDate.setDate(this.unlockDate.getDate() + this.params.countDownDays); localStorage.setItem(localStorageKey, this.unlockDate.toISOString()); } - const dailyInterval = 24 * 60 * 60 * 1000; // 1 day - setInterval(() => this.updateProgress(), dailyInterval); - this.calculateUnlockDate(); - } - - // Calculates the exact unlock date - private calculateUnlockDate(): void { - const now = new Date(); - this.unlockDate = new Date(now.getTime() + this.countDownDays * 24 * 60 * 60 * 1000); + const dailyInterval = this.getMillisecondsUntilMidnight(); // Count until midnight + setTimeout(() => { + this.updateProgress(); + setInterval(() => this.updateProgress(), 24 * 60 * 60 * 1000); + }, dailyInterval); } // Update the progress bar and unlock state private updateProgress(): void { - const now = new Date(); + const now = this.getMidnightOfDate(new Date()); this.daysLeft = this.unlockDate.getTime() - now.getTime(); - if (this.daysLeft > 0) { - this.daysLeft = Math.ceil(this.daysLeft / (24 * 60 * 60 * 1000)); - this.progressPercentage = ((this.countDownDays - this.daysLeft) / this.countDownDays) * 100; + if (now < this.unlockDate) { + this.daysLeft = Math.ceil( + (this.unlockDate.getTime() - now.getTime()) / (24 * 60 * 60 * 1000) + ); + this.progressPercentage = + ((this.params.countDownDays - this.daysLeft) / this.params.countDownDays) * 100; } else { this.progressPercentage = 0; localStorage.removeItem(this.getLocalStorageKey()); } } + + // Get the number of milliseconds until midnight. + private getMillisecondsUntilMidnight(): number { + const now = new Date(); + const midnight = this.getMidnightOfDate(now); + midnight.setDate(midnight.getDate() + 1); + return midnight.getTime() - now.getTime(); + } + + // Get the midnight of a given date. + private getMidnightOfDate(date: Date): Date { + const midnight = new Date(date); + midnight.setHours(0, 0, 0, 0); + return midnight; + } } From 5bf218712952c25a6c0de5602347954d3d3e16bb Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Wed, 27 Nov 2024 18:54:51 +0300 Subject: [PATCH 08/22] style: unlocked image asset --- .../activity-check-in/activity-check-in.component.html | 2 +- src/theme/themes/plh_kids_kw/_overrides.scss | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index 489ab9a115..a97ed844cd 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -33,7 +33,7 @@

{{ params.title }}

} @else {
-
+
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 69721a9032..f695203494 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -372,6 +372,11 @@ body[data-theme="plh_kids_kw"] { width: 140px; } } + .unlocked .image { + img { + width: 170px; + } + } .details { display: flex; flex-direction: row; From 2ddffcdc9568a1f191ff8160a827c29d1fb3ca2e Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Wed, 27 Nov 2024 19:06:56 +0300 Subject: [PATCH 09/22] set progress percentage to 16 as the default --- .../components/activity-check-in/activity-check-in.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index 6c2fa727d0..b2d3cd1f0b 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -105,7 +105,7 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement this.progressPercentage = ((this.params.countDownDays - this.daysLeft) / this.params.countDownDays) * 100; } else { - this.progressPercentage = 0; + this.progressPercentage = 16; localStorage.removeItem(this.getLocalStorageKey()); } } From 88254d307c24702924d513d368b563d388f81f12 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Wed, 4 Dec 2024 08:01:03 +0300 Subject: [PATCH 10/22] add click event --- .../activity-check-in/activity-check-in.component.html | 2 +- .../components/activity-check-in/activity-check-in.component.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index a97ed844cd..98b084857b 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -32,7 +32,7 @@

{{ params.title }}

} @else { -
+
diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index b2d3cd1f0b..aae901e1c3 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -81,6 +81,7 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement const storedDate = localStorage.getItem(localStorageKey); if (storedDate) { this.unlockDate = new Date(storedDate); + this.updateProgress(); } else { this.unlockDate = this.getMidnightOfDate(new Date()); this.unlockDate.setDate(this.unlockDate.getDate() + this.params.countDownDays); @@ -88,7 +89,6 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement } const dailyInterval = this.getMillisecondsUntilMidnight(); // Count until midnight setTimeout(() => { - this.updateProgress(); setInterval(() => this.updateProgress(), 24 * 60 * 60 * 1000); }, dailyInterval); } From 53702cc30b939271ee905e0b19f7ab537c3315c9 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Wed, 11 Dec 2024 17:22:59 +0000 Subject: [PATCH 11/22] feat: add countdown logic to plh-activity-check-in component --- .../activity-check-in.component.html | 6 +- .../activity-check-in.component.ts | 104 ++++++++---------- 2 files changed, 50 insertions(+), 60 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index 98b084857b..9b4f774fee 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -1,4 +1,4 @@ -@if (daysLeft >= 1) { +@if (locked) {
-
In {{ daysLeft }} day{{ daysLeft > 1 ? "s" : "" }}
+
{{ getCountdownText() }}
diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index aae901e1c3..c109058182 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -1,7 +1,12 @@ import { Component, OnInit } from "@angular/core"; +import { addDays, differenceInCalendarDays, parseISO, startOfDay, toDate } from "date-fns"; import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service"; -import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "src/app/shared/utils"; +import { + getNumberParamFromTemplateRow, + getParamFromTemplateRow, + getStringParamFromTemplateRow, +} from "src/app/shared/utils"; interface IActivityCheckInParams { /* TEMPLATE PARAMETER: "activity_id". The activity identifier attached at the bottom of the component */ @@ -16,8 +21,12 @@ interface IActivityCheckInParams { unlockedIconAsset?: string; /* TEMPLATE PARAMETER: "unlocked_image_asset". The illustration that shows when the activity is locked */ unlockedImageAsset?: string; - /* TEMPLATE PARAMETER: "days_to_count_down". The illustration that shows when the activity is locked */ + /* TEMPLATE PARAMETER: "countdown_start_date". The date when the countdown is initially started */ + countdownStartDate?: Date; + /* TEMPLATE PARAMETER: "countdown_days". The number of days after the start date that the activity is unlocked */ countDownDays?: number; + /* TEMPLATE PARAMETER: "countdown_text_list". A list of text strings relating to the number of days left to countdown, in order from fewest to most */ + countdownTextList?: string[]; } @Component({ @@ -28,10 +37,12 @@ interface IActivityCheckInParams { export class PlhActivityCheckInComponent extends TemplateBaseComponent implements OnInit { params: Partial = {}; - daysLeft: number; // Progress of days left progressPercentage: number = 16; // Initial progress + daysUntilUnlock: number; - private unlockDate: Date; + get locked() { + return this.daysUntilUnlock && this.daysUntilUnlock > 0; + } constructor(public templateTranslateService: TemplateTranslateService) { super(); @@ -39,10 +50,17 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement ngOnInit() { this.getParams(); - this.daysLeft = this.params.countDownDays; - if (this._row.value) { - this.checkInTimer(); - } + this.calculateDaysUntilUnlock(); + } + + public getCountdownText() { + return this.params.countdownTextList[ + Math.min(this.daysUntilUnlock - 1, this.params.countdownTextList.length - 1) + ]; + } + + public getProgressPercentage() { + return ((this.params.countDownDays - this.daysUntilUnlock) / this.params.countDownDays) * 100; } private getParams() { @@ -68,60 +86,32 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement "unlocked_image_asset", null ); - this.params.countDownDays = getNumberParamFromTemplateRow(this._row, "days_to_count_down", 6); - } - - private getLocalStorageKey(): string { - return `activity_${this.params.id}`; - } + this.params.countDownDays = getNumberParamFromTemplateRow(this._row, "countdown_days", 6); + const countdownStartDate = getParamFromTemplateRow(this._row, "countdown_start_date", null); + try { + const parsedDate = parseISO(countdownStartDate); + this.params.countdownStartDate = parsedDate; + } catch { + console.error( + `[ACTIVITY CHECK-IN] Invalid date for countdown_start_date: ${countdownStartDate}` + ); + } - // Calculates the days until check in - private checkInTimer() { - const localStorageKey = this.getLocalStorageKey(); - const storedDate = localStorage.getItem(localStorageKey); - if (storedDate) { - this.unlockDate = new Date(storedDate); - this.updateProgress(); - } else { - this.unlockDate = this.getMidnightOfDate(new Date()); - this.unlockDate.setDate(this.unlockDate.getDate() + this.params.countDownDays); - localStorage.setItem(localStorageKey, this.unlockDate.toISOString()); + let countdownTextList = getParamFromTemplateRow(this._row, "countdown_text_list", []); + if (typeof countdownTextList === "string") { + countdownTextList = countdownTextList.split(",").map((text) => text.trim()); } - const dailyInterval = this.getMillisecondsUntilMidnight(); // Count until midnight - setTimeout(() => { - setInterval(() => this.updateProgress(), 24 * 60 * 60 * 1000); - }, dailyInterval); + this.params.countdownTextList = countdownTextList; } - // Update the progress bar and unlock state - private updateProgress(): void { - const now = this.getMidnightOfDate(new Date()); - this.daysLeft = this.unlockDate.getTime() - now.getTime(); - - if (now < this.unlockDate) { - this.daysLeft = Math.ceil( - (this.unlockDate.getTime() - now.getTime()) / (24 * 60 * 60 * 1000) + private calculateDaysUntilUnlock() { + if (this.params.countdownStartDate && this.params.countDownDays) { + const unlockDate = addDays(this.params.countdownStartDate, this.params.countDownDays); + const daysRemaining = differenceInCalendarDays( + startOfDay(unlockDate), + startOfDay(new Date()) ); - this.progressPercentage = - ((this.params.countDownDays - this.daysLeft) / this.params.countDownDays) * 100; - } else { - this.progressPercentage = 16; - localStorage.removeItem(this.getLocalStorageKey()); + this.daysUntilUnlock = Math.max(daysRemaining, 0); } } - - // Get the number of milliseconds until midnight. - private getMillisecondsUntilMidnight(): number { - const now = new Date(); - const midnight = this.getMidnightOfDate(now); - midnight.setDate(midnight.getDate() + 1); - return midnight.getTime() - now.getTime(); - } - - // Get the midnight of a given date. - private getMidnightOfDate(date: Date): Date { - const midnight = new Date(date); - midnight.setHours(0, 0, 0, 0); - return midnight; - } } From 975b09149b14b82a8d91d1afcaf8f3a143e98720 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Wed, 11 Dec 2024 17:31:10 +0000 Subject: [PATCH 12/22] refactor: use signals --- .../activity-check-in.component.html | 4 +-- .../activity-check-in.component.ts | 34 +++++++++---------- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index 9b4f774fee..ba9a47359d 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -10,12 +10,12 @@
-
{{ getCountdownText() }}
+
{{ countdownText() }}
diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index c109058182..3c8eb3951e 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from "@angular/core"; +import { Component, computed, OnInit, signal } from "@angular/core"; import { addDays, differenceInCalendarDays, parseISO, startOfDay, toDate } from "date-fns"; import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service"; @@ -37,12 +37,20 @@ interface IActivityCheckInParams { export class PlhActivityCheckInComponent extends TemplateBaseComponent implements OnInit { params: Partial = {}; - progressPercentage: number = 16; // Initial progress - daysUntilUnlock: number; - - get locked() { - return this.daysUntilUnlock && this.daysUntilUnlock > 0; - } + daysUntilUnlock = signal(Infinity); + locked = computed(() => { + return this.daysUntilUnlock() && this.daysUntilUnlock() > 0; + }); + countdownText = computed(() => { + const targetIndex = Math.min( + this.daysUntilUnlock() - 1, + this.params.countdownTextList.length - 1 + ); + return this.params.countdownTextList[targetIndex]; + }); + progressPercentage = computed(() => { + return ((this.params.countDownDays - this.daysUntilUnlock()) / this.params.countDownDays) * 100; + }); constructor(public templateTranslateService: TemplateTranslateService) { super(); @@ -53,16 +61,6 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement this.calculateDaysUntilUnlock(); } - public getCountdownText() { - return this.params.countdownTextList[ - Math.min(this.daysUntilUnlock - 1, this.params.countdownTextList.length - 1) - ]; - } - - public getProgressPercentage() { - return ((this.params.countDownDays - this.daysUntilUnlock) / this.params.countDownDays) * 100; - } - private getParams() { this.params.id = getStringParamFromTemplateRow(this._row, "activity_id", null); this.params.title = getStringParamFromTemplateRow(this._row, "title", null); @@ -111,7 +109,7 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement startOfDay(unlockDate), startOfDay(new Date()) ); - this.daysUntilUnlock = Math.max(daysRemaining, 0); + this.daysUntilUnlock.set(Math.max(daysRemaining, 0)); } } } From f9d57e15d86bce084861520fc42db86565dbc8f5 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Thu, 12 Dec 2024 11:03:09 +0000 Subject: [PATCH 13/22] chore: finish signals integration --- .../activity-check-in/activity-check-in.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index ba9a47359d..10431c6c87 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -1,4 +1,4 @@ -@if (locked) { +@if (locked()) {
Date: Thu, 12 Dec 2024 11:04:02 +0000 Subject: [PATCH 14/22] chore: tidy html and css --- .../activity-check-in.component.html | 40 +++++++++---------- src/theme/themes/plh_kids_kw/_overrides.scss | 36 ++++++++--------- 2 files changed, 34 insertions(+), 42 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index 10431c6c87..452750540f 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -3,31 +3,27 @@ class="activity-container" [attr.data-language-direction]="templateTranslateService.languageDirection()" > -
-
-
-
-
-
-
-
{{ countdownText() }}
+
+
+
+
{{ countdownText() }}
+
-
- +
+ +
+
+
+

{{ params.title }}

-
-
-

{{ params.title }}

-
-
- -
+
+
diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index 73618f7595..ed2bc707c8 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -607,39 +607,35 @@ body[data-theme="plh_kids_kw"] { // activity-check-in plh-activity-check-in { .activity-container { - width: 45%; - .wrapper { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } + max-width: 180px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; .progress-tracker { width: 100%; + padding: 0 12px; display: flex; flex-direction: row; align-items: center; justify-content: center; - .wrapper { - width: 46%; - } .progress-bar-container { + width: 40%; background-color: var(--ion-color-gray-200); height: 14px; border-radius: var(--ion-border-radius-rounded); - margin-right: 8px; overflow: hidden; - width: 100%; - } - .progress-bar { - border-radius: var(--ion-border-radius-rounded); - height: 100%; - background-color: #e0b160; - transition: - width 0.5s ease, - background-color 0.5s ease; + .progress-bar { + border-radius: var(--ion-border-radius-rounded); + height: 100%; + background-color: #e0b160; + transition: + width 0.5s ease, + background-color 0.5s ease; + } } .countdown-text { + margin-left: 8px; color: var(--ion-color-gray-600); font-weight: var(--font-weight-medium); } From 1c9e805da99d64cb60f9de7448499b04cfbc20d9 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Thu, 12 Dec 2024 11:06:49 +0000 Subject: [PATCH 15/22] chore: move styling to component stylesheet --- .../activity-check-in.component.scss | 70 ++++++++++++++++++ src/theme/themes/plh_kids_kw/_overrides.scss | 74 ------------------- 2 files changed, 70 insertions(+), 74 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss index e69de29bb2..adcf347638 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss @@ -0,0 +1,70 @@ +.activity-container { + max-width: 180px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + .progress-tracker { + width: 100%; + padding: 0 12px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + .progress-bar-container { + width: 40%; + background-color: var(--ion-color-gray-200); + height: 14px; + border-radius: var(--ion-border-radius-rounded); + overflow: hidden; + .progress-bar { + border-radius: var(--ion-border-radius-rounded); + height: 100%; + background-color: #e0b160; + transition: + width 0.5s ease, + background-color 0.5s ease; + } + } + .countdown-text { + margin-left: 8px; + color: var(--ion-color-gray-600); + font-weight: var(--font-weight-medium); + } + } + .image { + img { + width: 140px; + } + } + .unlocked .image { + img { + width: 170px; + } + } + .details { + display: flex; + flex-direction: row; + align-items: center; + margin-top: -5px; + .title h4 { + color: var(--ion-color-gray-600); + font-weight: var(--font-weight-bold); + } + .icon { + display: flex; + align-items: center; + img { + width: 28px; + } + } + } +} +.activity-container[data-language-direction~="rtl"] { + .progress-tracker { + .progress-bar-container { + margin-right: 0; + margin-left: 6px; + } + } +} diff --git a/src/theme/themes/plh_kids_kw/_overrides.scss b/src/theme/themes/plh_kids_kw/_overrides.scss index ed2bc707c8..330df60667 100644 --- a/src/theme/themes/plh_kids_kw/_overrides.scss +++ b/src/theme/themes/plh_kids_kw/_overrides.scss @@ -604,80 +604,6 @@ body[data-theme="plh_kids_kw"] { } } - // activity-check-in - plh-activity-check-in { - .activity-container { - max-width: 180px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - .progress-tracker { - width: 100%; - padding: 0 12px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - .progress-bar-container { - width: 40%; - background-color: var(--ion-color-gray-200); - height: 14px; - border-radius: var(--ion-border-radius-rounded); - overflow: hidden; - .progress-bar { - border-radius: var(--ion-border-radius-rounded); - height: 100%; - background-color: #e0b160; - transition: - width 0.5s ease, - background-color 0.5s ease; - } - } - .countdown-text { - margin-left: 8px; - color: var(--ion-color-gray-600); - font-weight: var(--font-weight-medium); - } - } - .image { - img { - width: 140px; - } - } - .unlocked .image { - img { - width: 170px; - } - } - .details { - display: flex; - flex-direction: row; - align-items: center; - margin-top: -5px; - .title h4 { - color: var(--ion-color-gray-600); - font-weight: var(--font-weight-bold); - } - .icon { - display: flex; - align-items: center; - img { - width: 28px; - } - } - } - } - .activity-container[data-language-direction~="rtl"] { - .progress-tracker { - .progress-bar-container { - margin-right: 0; - margin-left: 6px; - } - } - } - } - // Radio Button Group plh-radio-group { .btn_triangle { From 032eee8c3d982bc285fadc187f276e63238dc1cd Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Thu, 12 Dec 2024 15:07:16 +0000 Subject: [PATCH 16/22] fix: countdown logic --- .../activity-check-in.component.ts | 27 ++++++++++++------- .../number-selector.component.ts | 2 +- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index 3c8eb3951e..1245f04547 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -1,5 +1,5 @@ import { Component, computed, OnInit, signal } from "@angular/core"; -import { addDays, differenceInCalendarDays, parseISO, startOfDay, toDate } from "date-fns"; +import { addDays, differenceInCalendarDays, isValid, parseISO, startOfDay } from "date-fns"; import { TemplateBaseComponent } from "src/app/shared/components/template/components/base"; import { TemplateTranslateService } from "src/app/shared/components/template/services/template-translate.service"; import { @@ -49,7 +49,11 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement return this.params.countdownTextList[targetIndex]; }); progressPercentage = computed(() => { - return ((this.params.countDownDays - this.daysUntilUnlock()) / this.params.countDownDays) * 100; + if (this.daysUntilUnlock() === Infinity) return 0; + return ( + ((this.params.countDownDays - (this.daysUntilUnlock() || 0)) / this.params.countDownDays) * + 100 + ); }); constructor(public templateTranslateService: TemplateTranslateService) { @@ -86,14 +90,18 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement ); this.params.countDownDays = getNumberParamFromTemplateRow(this._row, "countdown_days", 6); const countdownStartDate = getParamFromTemplateRow(this._row, "countdown_start_date", null); - try { - const parsedDate = parseISO(countdownStartDate); - this.params.countdownStartDate = parsedDate; - } catch { - console.error( - `[ACTIVITY CHECK-IN] Invalid date for countdown_start_date: ${countdownStartDate}` - ); + + let parsedDate = new Date(countdownStartDate); + if (!isValid(parsedDate)) { + // Attempt to parse from ISO format + parsedDate = parseISO(countdownStartDate); + if (!isValid(parsedDate)) { + console.error( + `[ACTIVITY CHECK-IN] Invalid date for countdown_start_date: ${countdownStartDate}` + ); + } } + this.params.countdownStartDate = parsedDate; let countdownTextList = getParamFromTemplateRow(this._row, "countdown_text_list", []); if (typeof countdownTextList === "string") { @@ -103,6 +111,7 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement } private calculateDaysUntilUnlock() { + if (this.params.countDownDays === 0) this.daysUntilUnlock.set(0); if (this.params.countdownStartDate && this.params.countDownDays) { const unlockDate = addDays(this.params.countdownStartDate, this.params.countDownDays); const daysRemaining = differenceInCalendarDays( diff --git a/src/app/shared/components/template/components/number-selector/number-selector.component.ts b/src/app/shared/components/template/components/number-selector/number-selector.component.ts index 73c875c2cc..cf15d0af9c 100644 --- a/src/app/shared/components/template/components/number-selector/number-selector.component.ts +++ b/src/app/shared/components/template/components/number-selector/number-selector.component.ts @@ -56,7 +56,7 @@ export class TmplNumberComponent this.displayValue = this.min_value; } // assign any previously saved value - if (this._row.value) { + if (this._row.value || this._row.value === 0) { this.displayValue = this._row.value; } } From a4533c1e6a48fd59c30f6f4629e764ace4eef3d1 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Thu, 12 Dec 2024 16:57:16 +0000 Subject: [PATCH 17/22] chore: remove unused param --- .../activity-check-in/activity-check-in.component.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index 1245f04547..bfb6aef5cc 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -9,8 +9,6 @@ import { } from "src/app/shared/utils"; interface IActivityCheckInParams { - /* TEMPLATE PARAMETER: "activity_id". The activity identifier attached at the bottom of the component */ - id: string; /* TEMPLATE PARAMETER: "title". The title attached at the bottom of the component */ title?: string; /* TEMPLATE PARAMETER: "locked_icon_asset". The icon that shows when the activity is locked */ @@ -66,7 +64,6 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement } private getParams() { - this.params.id = getStringParamFromTemplateRow(this._row, "activity_id", null); this.params.title = getStringParamFromTemplateRow(this._row, "title", null); this.params.lockedIconAsset = getStringParamFromTemplateRow( this._row, From 76e96871856171d371aafbc1ff3cb35ddd35a6b9 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Thu, 12 Dec 2024 17:27:04 +0000 Subject: [PATCH 18/22] chore: fix progres bar styling on default theme --- .../activity-check-in/activity-check-in.component.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss index adcf347638..c3dfd3d146 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss @@ -15,10 +15,10 @@ width: 40%; background-color: var(--ion-color-gray-200); height: 14px; - border-radius: var(--ion-border-radius-rounded); + border-radius: 50px; overflow: hidden; .progress-bar { - border-radius: var(--ion-border-radius-rounded); + border-radius: 50px; height: 100%; background-color: #e0b160; transition: From 64e8d5cc3f9c24c17ef34e1495eda7923f677116 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Wed, 18 Dec 2024 10:41:07 +0300 Subject: [PATCH 19/22] feat: max height for images and rtl support --- .../activity-check-in.component.html | 6 ++++- .../activity-check-in.component.scss | 26 ++++++++++++++++--- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index 452750540f..5576e05b3c 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -28,7 +28,11 @@

{{ params.title }}

} @else { -
+
diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss index c3dfd3d146..a7f7e2ee78 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss @@ -1,5 +1,7 @@ .activity-container { max-width: 180px; + height: 150px; + max-height: 150px; display: flex; flex-direction: column; align-items: center; @@ -33,20 +35,25 @@ } } .image { + margin-top: -20px; img { - width: 140px; + min-width: 140px; + max-width: 140px; } } .unlocked .image { + margin-top: -16px; img { - width: 170px; + max-width: 160px; + min-width: 160px; } } .details { display: flex; flex-direction: row; align-items: center; - margin-top: -5px; + justify-content: center; + margin-top: -28px; .title h4 { color: var(--ion-color-gray-600); font-weight: var(--font-weight-bold); @@ -54,6 +61,7 @@ .icon { display: flex; align-items: center; + margin: 0 6px; img { width: 28px; } @@ -67,4 +75,16 @@ margin-left: 6px; } } + .image { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } + .details { + .icon { + img { + -webkit-transform: scaleX(-1); + transform: scaleX(-1); + } + } + } } From ec7bd1a8dc0c52dfa45067e39333a93f1e925f4e Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Mon, 23 Dec 2024 17:51:34 +0000 Subject: [PATCH 20/22] chore: activity should be locked when now countdown start date is provided --- .../activity-check-in.component.html | 22 ++++++++++--------- .../activity-check-in.component.ts | 3 +++ 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html index 5576e05b3c..f402b2c93f 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.html @@ -3,17 +3,19 @@ class="activity-container" [attr.data-language-direction]="templateTranslateService.languageDirection()" > -
-
-
+ @if (params.countdownStartDate) { +
+
+
+
+
{{ countdownText() }}
-
{{ countdownText() }}
-
+ }
diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index bfb6aef5cc..0c1b106e4d 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -37,6 +37,8 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement daysUntilUnlock = signal(Infinity); locked = computed(() => { + // If no start date is provided, activity should be locked + if (!this.params.countdownStartDate) return true; return this.daysUntilUnlock() && this.daysUntilUnlock() > 0; }); countdownText = computed(() => { @@ -93,6 +95,7 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement // Attempt to parse from ISO format parsedDate = parseISO(countdownStartDate); if (!isValid(parsedDate)) { + parsedDate = null; console.error( `[ACTIVITY CHECK-IN] Invalid date for countdown_start_date: ${countdownStartDate}` ); From 1f02c83c11ce0df1d713de259f46764f3b9e8d84 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Thu, 2 Jan 2025 14:15:00 +0000 Subject: [PATCH 21/22] fix: handle undefined countdown_start_date input --- .../activity-check-in.component.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts index 0c1b106e4d..42bdc7f55b 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.ts @@ -89,16 +89,16 @@ export class PlhActivityCheckInComponent extends TemplateBaseComponent implement ); this.params.countDownDays = getNumberParamFromTemplateRow(this._row, "countdown_days", 6); const countdownStartDate = getParamFromTemplateRow(this._row, "countdown_start_date", null); - - let parsedDate = new Date(countdownStartDate); - if (!isValid(parsedDate)) { - // Attempt to parse from ISO format - parsedDate = parseISO(countdownStartDate); - if (!isValid(parsedDate)) { - parsedDate = null; - console.error( - `[ACTIVITY CHECK-IN] Invalid date for countdown_start_date: ${countdownStartDate}` - ); + let parsedDate = null; + if (countdownStartDate) { + const attemptDate = new Date(countdownStartDate); + if (isValid(attemptDate)) { + parsedDate = attemptDate; + } else { + const attemptISO = parseISO(countdownStartDate); + if (isValid(attemptISO)) { + parsedDate = attemptISO; + } } } this.params.countdownStartDate = parsedDate; From c7e2043251a203a8b46bf8d35e4858ef23a98e18 Mon Sep 17 00:00:00 2001 From: Johnny McQuade Date: Thu, 2 Jan 2025 14:47:41 +0000 Subject: [PATCH 22/22] style: fix activity check-in component styling --- .../activity-check-in.component.scss | 25 ++++++++----------- .../task-progress-bar.component.scss | 2 +- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss index a7f7e2ee78..613bd87fb5 100644 --- a/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss +++ b/packages/components/plh/plh-kids-kw/components/activity-check-in/activity-check-in.component.scss @@ -1,7 +1,5 @@ .activity-container { - max-width: 180px; - height: 150px; - max-height: 150px; + max-width: 168px; display: flex; flex-direction: column; align-items: center; @@ -35,17 +33,12 @@ } } .image { - margin-top: -20px; + height: 150px; img { - min-width: 140px; - max-width: 140px; - } - } - .unlocked .image { - margin-top: -16px; - img { - max-width: 160px; - min-width: 160px; + padding: 4px; + height: 100%; + width: 100%; + object-fit: contain; } } .details { @@ -53,15 +46,17 @@ flex-direction: row; align-items: center; justify-content: center; - margin-top: -28px; + width: fit-content; + margin: 0 auto; .title h4 { + text-align: center; color: var(--ion-color-gray-600); font-weight: var(--font-weight-bold); } .icon { display: flex; align-items: center; - margin: 0 6px; + margin: 0 4px; img { width: 28px; } diff --git a/src/app/shared/components/template/components/task-progress-bar/task-progress-bar.component.scss b/src/app/shared/components/template/components/task-progress-bar/task-progress-bar.component.scss index a51f32e80e..0dd8f284c5 100644 --- a/src/app/shared/components/template/components/task-progress-bar/task-progress-bar.component.scss +++ b/src/app/shared/components/template/components/task-progress-bar/task-progress-bar.component.scss @@ -53,7 +53,7 @@ $progress-colour: var(--task-progress-bar-color, var(--ion-color-primary)); .task-progress-wheel { .progress-container { position: relative; - width: 150px; + max-width: 150px; height: 150px; margin-bottom: 48px; }