From 159645ca1b964f20113f3271c63da136b7c20959 Mon Sep 17 00:00:00 2001 From: FaithDaka Date: Tue, 26 Nov 2024 15:01:03 +0300 Subject: [PATCH 01/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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/10] 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); }