@kompasid/lit-web-components 0.7.9 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo/index.html +37 -1
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts +8 -1
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js +95 -33
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map +1 -1
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts +18 -0
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +78 -0
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map +1 -1
- package/dist/src/components/kompasid-header-account/types.d.ts +2 -0
- package/dist/src/components/kompasid-header-account/types.js.map +1 -1
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.d.ts +29 -2
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js +115 -57
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map +1 -1
- package/dist/tailwind/tailwind.js +151 -171
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-grace-period/KompasGracePeriod.ts +93 -31
- package/src/components/kompasid-grace-period/readme.md +2 -0
- package/src/components/kompasid-header-account/KompasHeaderAccount.ts +34 -0
- package/src/components/kompasid-header-account/types.ts +2 -0
- package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts +84 -56
- package/tailwind/tailwind.css +38 -99
- package/tailwind/tailwind.ts +151 -171
package/demo/index.html
CHANGED
|
@@ -101,11 +101,14 @@
|
|
|
101
101
|
const subscriptionUrl = ''
|
|
102
102
|
const readLaterUrl = '/baca-nanti'
|
|
103
103
|
const totalGracePeriod = '5'
|
|
104
|
+
const productId = 9802032
|
|
104
105
|
|
|
105
106
|
const userData = {
|
|
106
107
|
userName: 'User Fullname',
|
|
107
108
|
expired: 'Berakhir: 6 hari lagi',
|
|
108
109
|
isNearExpired: false,
|
|
110
|
+
totalGracePeriod: 2,
|
|
111
|
+
isGracePeriod: true,
|
|
109
112
|
activeInfo:
|
|
110
113
|
'Kompas Digital Premium 1 Bulan - Auto Renewal Example Text',
|
|
111
114
|
isMembership: true,
|
|
@@ -144,6 +147,21 @@
|
|
|
144
147
|
.subscription_url=${subscriptionUrl}
|
|
145
148
|
.read_later_url=${readLaterUrl}
|
|
146
149
|
.total_grace_period=${totalGracePeriod}
|
|
150
|
+
.paywall_location=${paywallLocation}
|
|
151
|
+
.paywall_subscription_package=${paywallSubscriptionPackage}
|
|
152
|
+
.paywall_subscription_id=${productId}
|
|
153
|
+
.paywall_subscription_price=${paywallSubscriptionPrice}
|
|
154
|
+
.paywall_position=${paywallPosition}
|
|
155
|
+
.tracker_page_type=${trackerPageType}
|
|
156
|
+
.tracker_content_id=${trackerContentId}
|
|
157
|
+
.tracker_content_type=${trackerContentType}
|
|
158
|
+
.tracker_content_title=${trackerContentTitle}
|
|
159
|
+
.tracker_content_categories=${trackerContentCategories}
|
|
160
|
+
.tracker_user_type=${trackerUserType}
|
|
161
|
+
.tracker_subscription_status=${trackerSubscriptionStatus}
|
|
162
|
+
.tracker_page_domain=${trackerPageDomain}
|
|
163
|
+
.metered_wall_type=${meteredWallType}
|
|
164
|
+
.tracker_metered_wall_balance=${trackerMeteredWallBalance}
|
|
147
165
|
style="margin-left: auto; height: 25px; display: flex; align-items: center"
|
|
148
166
|
></kompasid-header-account>
|
|
149
167
|
</div>
|
|
@@ -262,7 +280,25 @@
|
|
|
262
280
|
.tracker_page_domain=${trackerPageDomain}
|
|
263
281
|
></kompasid-metered-wall-register>
|
|
264
282
|
|
|
265
|
-
<!-- <kompasid-grace-period
|
|
283
|
+
<!-- <kompasid-grace-period
|
|
284
|
+
totalGracePeriod="2"
|
|
285
|
+
isShowButton="true"
|
|
286
|
+
.paywall_location=${paywallLocation}
|
|
287
|
+
.paywall_subscription_id=${productId}
|
|
288
|
+
.paywall_subscription_price=${paywallSubscriptionPrice}
|
|
289
|
+
.paywall_position=${paywallPosition}
|
|
290
|
+
.tracker_page_type=${trackerPageType}
|
|
291
|
+
.tracker_page_title=${trackerPageTitle}
|
|
292
|
+
.tracker_content_id=${trackerContentId}
|
|
293
|
+
.tracker_content_type=${trackerContentType}
|
|
294
|
+
.tracker_content_title=${trackerContentTitle}
|
|
295
|
+
.tracker_content_categories=${trackerContentCategories}
|
|
296
|
+
.tracker_user_type=${trackerUserType}
|
|
297
|
+
.tracker_page_domain=${trackerPageDomain}
|
|
298
|
+
.tracker_metered_wall_type=${meteredWallType}
|
|
299
|
+
.tracker_subscription_status=${trackerSubscriptionStatus}
|
|
300
|
+
.tracker_metered_wall_balance=${trackerMeteredWallBalance}
|
|
301
|
+
></kompasid-grace-period> -->
|
|
266
302
|
`,
|
|
267
303
|
document.querySelector('#demo')
|
|
268
304
|
)
|
|
@@ -8,6 +8,7 @@ export declare class KompasGracePeriod extends LitElement {
|
|
|
8
8
|
* property totalGracePeriod = how many days are left in grace period
|
|
9
9
|
* property isColumn = changes how the component looks on different screen sizes
|
|
10
10
|
* property isShowButton = shows or hides a subscription button
|
|
11
|
+
* property isEpaper = is paywall opened in epaper page
|
|
11
12
|
* property paywall_location = the location where user encounter the paywall
|
|
12
13
|
* property paywall_subscription_package = the name of the subscription package viewed by user
|
|
13
14
|
* property paywall_subscription_id = the ID of the subscription package viewed by user
|
|
@@ -23,10 +24,13 @@ export declare class KompasGracePeriod extends LitElement {
|
|
|
23
24
|
* property tracker_page_domain = page Domain
|
|
24
25
|
* property tracker_metered_wall_type = the type of Metered Wall
|
|
25
26
|
* property tracker_metered_wall_balance = the balance of their metered wall
|
|
27
|
+
* property tracker_epaper_edition = the edition of epaper viewed by user
|
|
26
28
|
*/
|
|
27
29
|
totalGracePeriod: number;
|
|
28
30
|
isColumn: boolean;
|
|
29
31
|
isShowButton: boolean;
|
|
32
|
+
isEpaper: boolean;
|
|
33
|
+
isBackgroundOnContentOnly: boolean;
|
|
30
34
|
paywall_location: string;
|
|
31
35
|
paywall_subscription_package: string;
|
|
32
36
|
paywall_subscription_id: number;
|
|
@@ -42,13 +46,16 @@ export declare class KompasGracePeriod extends LitElement {
|
|
|
42
46
|
tracker_page_domain: string;
|
|
43
47
|
tracker_metered_wall_type: string;
|
|
44
48
|
tracker_metered_wall_balance: number;
|
|
49
|
+
tracker_epaper_edition: string;
|
|
45
50
|
/**
|
|
46
51
|
* State
|
|
47
52
|
*/
|
|
48
53
|
private maxGracePeriod;
|
|
49
|
-
private
|
|
54
|
+
private subscriptionPage;
|
|
55
|
+
private checkoutPage;
|
|
50
56
|
private getCountdownGracePeriod;
|
|
51
57
|
private redirectToBerlangganan;
|
|
58
|
+
private redirectToCheckout;
|
|
52
59
|
private getGtmParams;
|
|
53
60
|
private sendGtmEvent;
|
|
54
61
|
private dataLayeronPerbaruiLanggananButton;
|
|
@@ -13,6 +13,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
|
|
|
13
13
|
* property totalGracePeriod = how many days are left in grace period
|
|
14
14
|
* property isColumn = changes how the component looks on different screen sizes
|
|
15
15
|
* property isShowButton = shows or hides a subscription button
|
|
16
|
+
* property isEpaper = is paywall opened in epaper page
|
|
16
17
|
* property paywall_location = the location where user encounter the paywall
|
|
17
18
|
* property paywall_subscription_package = the name of the subscription package viewed by user
|
|
18
19
|
* property paywall_subscription_id = the ID of the subscription package viewed by user
|
|
@@ -28,10 +29,13 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
|
|
|
28
29
|
* property tracker_page_domain = page Domain
|
|
29
30
|
* property tracker_metered_wall_type = the type of Metered Wall
|
|
30
31
|
* property tracker_metered_wall_balance = the balance of their metered wall
|
|
32
|
+
* property tracker_epaper_edition = the edition of epaper viewed by user
|
|
31
33
|
*/
|
|
32
34
|
this.totalGracePeriod = 0;
|
|
33
35
|
this.isColumn = false;
|
|
34
36
|
this.isShowButton = false;
|
|
37
|
+
this.isEpaper = false;
|
|
38
|
+
this.isBackgroundOnContentOnly = false;
|
|
35
39
|
this.paywall_location = '';
|
|
36
40
|
this.paywall_subscription_package = '';
|
|
37
41
|
this.paywall_subscription_id = 0;
|
|
@@ -47,11 +51,13 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
|
|
|
47
51
|
this.tracker_page_domain = '';
|
|
48
52
|
this.tracker_metered_wall_type = '';
|
|
49
53
|
this.tracker_metered_wall_balance = 0;
|
|
54
|
+
this.tracker_epaper_edition = '';
|
|
50
55
|
/**
|
|
51
56
|
* State
|
|
52
57
|
*/
|
|
53
58
|
this.maxGracePeriod = 7;
|
|
54
|
-
this.
|
|
59
|
+
this.subscriptionPage = 'https://www.kompas.id/berlangganan';
|
|
60
|
+
this.checkoutPage = 'https://checkoutv2.kompas.id';
|
|
55
61
|
}
|
|
56
62
|
getCountdownGracePeriod() {
|
|
57
63
|
const { totalGracePeriod } = this;
|
|
@@ -76,41 +82,56 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
|
|
|
76
82
|
`;
|
|
77
83
|
}
|
|
78
84
|
redirectToBerlangganan() {
|
|
85
|
+
this.dataLayeronPerbaruiLanggananButton();
|
|
86
|
+
this.sendGtmEvent('subscribe_button_clicked', true);
|
|
87
|
+
window.open(this.subscriptionPage);
|
|
88
|
+
}
|
|
89
|
+
redirectToCheckout() {
|
|
79
90
|
this.dataLayeronPerbaruiLanggananButton();
|
|
80
91
|
const originHost = encodeURIComponent(window.location.href);
|
|
81
92
|
this.sendGtmEvent('subscribe_button_clicked');
|
|
82
|
-
window.open(`${this.
|
|
93
|
+
window.open(`${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`);
|
|
83
94
|
}
|
|
84
|
-
getGtmParams() {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
page_type
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
95
|
+
getGtmParams(excludeSubscriptionParams = false) {
|
|
96
|
+
const gtmParams = {};
|
|
97
|
+
if (!this.isEpaper) {
|
|
98
|
+
gtmParams.content_title = this.tracker_content_title;
|
|
99
|
+
gtmParams.content_id = this.tracker_content_id;
|
|
100
|
+
gtmParams.content_categories = this.tracker_content_categories;
|
|
101
|
+
gtmParams.content_type = this.tracker_content_type;
|
|
102
|
+
gtmParams.page_type = this.tracker_page_type;
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
gtmParams.epaper_edition = this.tracker_epaper_edition;
|
|
106
|
+
}
|
|
107
|
+
if (!excludeSubscriptionParams) {
|
|
108
|
+
gtmParams.paywall_subscription_package = this.paywall_subscription_package;
|
|
109
|
+
gtmParams.paywall_subscription_id = this.paywall_subscription_id;
|
|
110
|
+
gtmParams.paywall_subscription_price = this.paywall_subscription_price;
|
|
111
|
+
}
|
|
112
|
+
gtmParams.paywall_location = this.paywall_location;
|
|
113
|
+
gtmParams.paywall_position = this.paywall_position;
|
|
114
|
+
gtmParams.user_type = this.tracker_user_type;
|
|
115
|
+
gtmParams.subscription_status = this.tracker_subscription_status;
|
|
116
|
+
gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id';
|
|
117
|
+
gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP';
|
|
118
|
+
gtmParams.metered_wall_balance = this.tracker_metered_wall_balance;
|
|
119
|
+
return gtmParams;
|
|
102
120
|
}
|
|
103
|
-
sendGtmEvent(event) {
|
|
121
|
+
sendGtmEvent(event, excludeSubscriptionParams = false) {
|
|
104
122
|
let gtmParams = { event };
|
|
105
123
|
if (event === 'paywall_viewed') {
|
|
106
124
|
gtmParams.impressions = [
|
|
107
125
|
{
|
|
108
|
-
...this.getGtmParams(),
|
|
126
|
+
...this.getGtmParams(excludeSubscriptionParams),
|
|
109
127
|
},
|
|
110
128
|
];
|
|
111
129
|
}
|
|
112
130
|
else {
|
|
113
|
-
gtmParams = {
|
|
131
|
+
gtmParams = {
|
|
132
|
+
...gtmParams,
|
|
133
|
+
...this.getGtmParams(excludeSubscriptionParams),
|
|
134
|
+
};
|
|
114
135
|
}
|
|
115
136
|
window.dataLayer.push(gtmParams);
|
|
116
137
|
}
|
|
@@ -131,26 +152,54 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
|
|
|
131
152
|
});
|
|
132
153
|
}
|
|
133
154
|
gracePeriodTemplate() {
|
|
155
|
+
const { isColumn, isBackgroundOnContentOnly } = this;
|
|
156
|
+
const wrapperColumnClass = isColumn
|
|
157
|
+
? 'rounded-lg'
|
|
158
|
+
: 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4';
|
|
159
|
+
const buttonColumnClass = isColumn
|
|
160
|
+
? ''
|
|
161
|
+
: 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0';
|
|
162
|
+
const otherBtnColumnClass = isColumn ? '' : 'md:w-auto';
|
|
163
|
+
const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : '';
|
|
164
|
+
const contentBgClass = isBackgroundOnContentOnly
|
|
165
|
+
? 'bg-orange-100 p-4 rounded-lg mb-4'
|
|
166
|
+
: '';
|
|
134
167
|
return html `
|
|
135
168
|
<div
|
|
136
|
-
class="${
|
|
137
|
-
? 'rounded-lg'
|
|
138
|
-
: 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto"
|
|
169
|
+
class="bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}"
|
|
139
170
|
>
|
|
140
|
-
<div
|
|
171
|
+
<div
|
|
172
|
+
class="self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}"
|
|
173
|
+
>
|
|
141
174
|
${this.getCountdownGracePeriod()}
|
|
142
175
|
</div>
|
|
143
|
-
${
|
|
176
|
+
${this.isShowButton
|
|
144
177
|
? html `
|
|
145
178
|
<div
|
|
146
|
-
class="flex
|
|
179
|
+
class="flex w-full flex-col gap-4 self-center ${buttonColumnClass}"
|
|
147
180
|
>
|
|
148
181
|
<button
|
|
149
|
-
@click=${this.
|
|
150
|
-
class="bg-green-500 p-2 px-5
|
|
182
|
+
@click=${this.redirectToCheckout}
|
|
183
|
+
class="w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base"
|
|
151
184
|
>
|
|
152
185
|
Perbarui Langganan
|
|
153
186
|
</button>
|
|
187
|
+
<div class="md:block hidden">
|
|
188
|
+
<button
|
|
189
|
+
@click=${this.redirectToBerlangganan}
|
|
190
|
+
class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
|
|
191
|
+
>
|
|
192
|
+
Paket Lainnya
|
|
193
|
+
</button>
|
|
194
|
+
</div>
|
|
195
|
+
<div class="md:hidden block">
|
|
196
|
+
<button
|
|
197
|
+
@click=${this.redirectToBerlangganan}
|
|
198
|
+
class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
|
|
199
|
+
>
|
|
200
|
+
Lihat Paket Lainnya
|
|
201
|
+
</button>
|
|
202
|
+
</div>
|
|
154
203
|
</div>
|
|
155
204
|
`
|
|
156
205
|
: nothing}
|
|
@@ -163,8 +212,9 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
|
|
|
163
212
|
this.dataLayeronGracePeriod();
|
|
164
213
|
}
|
|
165
214
|
render() {
|
|
215
|
+
const bgClass = !this.isBackgroundOnContentOnly ? 'bg-orange-100' : '';
|
|
166
216
|
return html `
|
|
167
|
-
<div class="sticky bottom-0
|
|
217
|
+
<div class="sticky bottom-0 h-full w-full ${bgClass}">
|
|
168
218
|
${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}
|
|
169
219
|
</div>
|
|
170
220
|
`;
|
|
@@ -194,6 +244,12 @@ __decorate([
|
|
|
194
244
|
__decorate([
|
|
195
245
|
property({ type: Boolean })
|
|
196
246
|
], KompasGracePeriod.prototype, "isShowButton", void 0);
|
|
247
|
+
__decorate([
|
|
248
|
+
property({ type: Boolean })
|
|
249
|
+
], KompasGracePeriod.prototype, "isEpaper", void 0);
|
|
250
|
+
__decorate([
|
|
251
|
+
property({ type: Boolean })
|
|
252
|
+
], KompasGracePeriod.prototype, "isBackgroundOnContentOnly", void 0);
|
|
197
253
|
__decorate([
|
|
198
254
|
property({ type: String })
|
|
199
255
|
], KompasGracePeriod.prototype, "paywall_location", void 0);
|
|
@@ -239,12 +295,18 @@ __decorate([
|
|
|
239
295
|
__decorate([
|
|
240
296
|
property({ type: Number })
|
|
241
297
|
], KompasGracePeriod.prototype, "tracker_metered_wall_balance", void 0);
|
|
298
|
+
__decorate([
|
|
299
|
+
property({ type: String })
|
|
300
|
+
], KompasGracePeriod.prototype, "tracker_epaper_edition", void 0);
|
|
242
301
|
__decorate([
|
|
243
302
|
state()
|
|
244
303
|
], KompasGracePeriod.prototype, "maxGracePeriod", void 0);
|
|
245
304
|
__decorate([
|
|
246
305
|
state()
|
|
247
|
-
], KompasGracePeriod.prototype, "
|
|
306
|
+
], KompasGracePeriod.prototype, "subscriptionPage", void 0);
|
|
307
|
+
__decorate([
|
|
308
|
+
state()
|
|
309
|
+
], KompasGracePeriod.prototype, "checkoutPage", void 0);
|
|
248
310
|
KompasGracePeriod = __decorate([
|
|
249
311
|
customElement('kompasid-grace-period')
|
|
250
312
|
], KompasGracePeriod);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property paywall_location = the location where user encounter the paywall\n * property paywall_subscription_package = the name of the subscription package viewed by user\n * property paywall_subscription_id = the ID of the subscription package viewed by user\n * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n * property paywall_position = the position of the subscription package viewed by user\n * property tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n */\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n @state() private updateSubscription = 'https://checkoutv2.kompas.id'\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n if (totalGracePeriod === 7) {\n return html`\n <p>\n Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n langganan. Segera perbarui paket langganan untuk tetap mengakses\n konten premium tanpa batas.\n </p>\n `\n }\n return html`\n <p>\n Masa tenggang langganan Anda tersisa\n <b class=\"text-orange-500\"\n >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n tanpa batas.\n </p>\n `\n }\n\n private redirectToBerlangganan(): void {\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n window.open(\n `${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`\n )\n }\n\n private getGtmParams(): Record<string, any> {\n return {\n paywall_location: this.paywall_location,\n paywall_subscription_package: this.paywall_subscription_package,\n paywall_subscription_id: this.paywall_subscription_id,\n paywall_subscription_price: this.paywall_subscription_price,\n paywall_position: this.paywall_position,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'GP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n }\n\n private sendGtmEvent(event: string) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(),\n },\n ]\n } else {\n gtmParams = { ...gtmParams, ...this.getGtmParams() }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n return html`\n <div\n class=\"${this.isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8'} flex flex-col w-full justify-end py-4 md:space-x-4 px-4 bottom-0 max-w-7xl mx-auto\"\n >\n <div class=\"text-grey-600 text-sm md:text-base self-center text-left\">\n ${this.getCountdownGracePeriod()}\n </div>\n ${!this.isShowButton\n ? html`\n <div\n class=\"flex self-center w-full md:w-1/2 justify-end pt-4 md:pt-0\"\n >\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base w-full md:w-auto\"\n >\n Perbarui Langganan\n </button>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full bg-orange-100\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property isEpaper = is paywall opened in epaper page\n * property paywall_location = the location where user encounter the paywall\n * property paywall_subscription_package = the name of the subscription package viewed by user\n * property paywall_subscription_id = the ID of the subscription package viewed by user\n * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n * property paywall_position = the position of the subscription package viewed by user\n * property tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n * property tracker_epaper_edition = the edition of epaper viewed by user\n */\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = false\n @property({ type: Boolean }) isEpaper = false\n @property({ type: Boolean }) isBackgroundOnContentOnly = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n if (totalGracePeriod === 7) {\n return html`\n <p>\n Anda dalam <b class=\"text-orange-500\"> hari terakhir</b> masa tenggang\n langganan. Segera perbarui paket langganan untuk tetap mengakses\n konten premium tanpa batas.\n </p>\n `\n }\n return html`\n <p>\n Masa tenggang langganan Anda tersisa\n <b class=\"text-orange-500\"\n >${maxGracePeriod - totalGracePeriod + 1} hari lagi</b\n >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n tanpa batas.\n </p>\n `\n }\n\n private redirectToBerlangganan(): void {\n this.dataLayeronPerbaruiLanggananButton()\n this.sendGtmEvent('subscribe_button_clicked', true)\n\n window.open(this.subscriptionPage)\n }\n\n private redirectToCheckout(): void {\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n window.open(\n `${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`,\n )\n }\n\n private getGtmParams(\n excludeSubscriptionParams: boolean = false,\n ): Record<string, any> {\n const gtmParams: Record<string, any> = {}\n\n if (!this.isEpaper) {\n gtmParams.content_title = this.tracker_content_title\n gtmParams.content_id = this.tracker_content_id\n gtmParams.content_categories = this.tracker_content_categories\n gtmParams.content_type = this.tracker_content_type\n gtmParams.page_type = this.tracker_page_type\n } else {\n gtmParams.epaper_edition = this.tracker_epaper_edition\n }\n\n if (!excludeSubscriptionParams) {\n gtmParams.paywall_subscription_package = this.paywall_subscription_package\n gtmParams.paywall_subscription_id = this.paywall_subscription_id\n gtmParams.paywall_subscription_price = this.paywall_subscription_price\n }\n\n gtmParams.paywall_location = this.paywall_location\n gtmParams.paywall_position = this.paywall_position\n gtmParams.user_type = this.tracker_user_type\n gtmParams.subscription_status = this.tracker_subscription_status\n gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id'\n gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP'\n gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n return gtmParams\n }\n\n private sendGtmEvent(\n event: string,\n excludeSubscriptionParams: boolean = false,\n ) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(excludeSubscriptionParams),\n },\n ]\n } else {\n gtmParams = {\n ...gtmParams,\n ...this.getGtmParams(excludeSubscriptionParams),\n }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n const { isColumn, isBackgroundOnContentOnly } = this\n\n const wrapperColumnClass = isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n const buttonColumnClass = isColumn\n ? ''\n : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n const contentBgClass = isBackgroundOnContentOnly\n ? 'bg-orange-100 p-4 rounded-lg mb-4'\n : ''\n\n return html`\n <div\n class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n >\n <div\n class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n >\n ${this.getCountdownGracePeriod()}\n </div>\n ${this.isShowButton\n ? html`\n <div\n class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n >\n <button\n @click=${this.redirectToCheckout}\n class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n >\n Perbarui Langganan\n </button>\n <div class=\"md:block hidden\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n >\n Paket Lainnya\n </button>\n </div>\n <div class=\"md:hidden block\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n >\n Lihat Paket Lainnya\n </button>\n </div>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n const bgClass = !this.isBackgroundOnContentOnly ? 'bg-orange-100' : ''\n return html`\n <div class=\"sticky bottom-0 h-full w-full ${bgClass}\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}
|
|
@@ -18,6 +18,24 @@ export declare class KompasHeaderAccount extends LitElement {
|
|
|
18
18
|
sidebarTopSpacing: number;
|
|
19
19
|
subscriptionUrl: string;
|
|
20
20
|
totalGracePeriod: number;
|
|
21
|
+
/**
|
|
22
|
+
* Props For Grace Period Tracker
|
|
23
|
+
*/
|
|
24
|
+
paywall_location: string;
|
|
25
|
+
paywall_subscription_package: string;
|
|
26
|
+
paywall_subscription_id: number;
|
|
27
|
+
paywall_subscription_price: number;
|
|
28
|
+
paywall_position: number;
|
|
29
|
+
tracker_page_type: string;
|
|
30
|
+
tracker_content_id: string;
|
|
31
|
+
tracker_content_title: string;
|
|
32
|
+
tracker_content_categories: string;
|
|
33
|
+
tracker_content_type: string;
|
|
34
|
+
tracker_user_type: string;
|
|
35
|
+
tracker_subscription_status: string;
|
|
36
|
+
tracker_page_domain: string;
|
|
37
|
+
tracker_metered_wall_type: string;
|
|
38
|
+
tracker_metered_wall_balance: number;
|
|
21
39
|
private toggleSidebar;
|
|
22
40
|
private getInitialUserName;
|
|
23
41
|
private account;
|
|
@@ -23,6 +23,24 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
23
23
|
this.sidebarTopSpacing = 0;
|
|
24
24
|
this.subscriptionUrl = '';
|
|
25
25
|
this.totalGracePeriod = 0;
|
|
26
|
+
/**
|
|
27
|
+
* Props For Grace Period Tracker
|
|
28
|
+
*/
|
|
29
|
+
this.paywall_location = '';
|
|
30
|
+
this.paywall_subscription_package = '';
|
|
31
|
+
this.paywall_subscription_id = 0;
|
|
32
|
+
this.paywall_subscription_price = 0;
|
|
33
|
+
this.paywall_position = 0;
|
|
34
|
+
this.tracker_page_type = '';
|
|
35
|
+
this.tracker_content_id = '';
|
|
36
|
+
this.tracker_content_title = '';
|
|
37
|
+
this.tracker_content_categories = '';
|
|
38
|
+
this.tracker_content_type = '';
|
|
39
|
+
this.tracker_user_type = '';
|
|
40
|
+
this.tracker_subscription_status = '';
|
|
41
|
+
this.tracker_page_domain = '';
|
|
42
|
+
this.tracker_metered_wall_type = '';
|
|
43
|
+
this.tracker_metered_wall_balance = 0;
|
|
26
44
|
}
|
|
27
45
|
toggleSidebar() {
|
|
28
46
|
this.isShowSidebar = !this.isShowSidebar;
|
|
@@ -99,6 +117,21 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
99
117
|
.userData=${this.formattedUserData}
|
|
100
118
|
.subscriptionUrl=${this.subscriptionUrl}
|
|
101
119
|
.totalGracePeriod=${this.totalGracePeriod}
|
|
120
|
+
paywall_location=${this.paywall_location}
|
|
121
|
+
paywall_subscription_package=${this.paywall_subscription_package}
|
|
122
|
+
paywall_subscription_id=${this.paywall_subscription_id}
|
|
123
|
+
paywall_subscription_price=${this.paywall_subscription_price}
|
|
124
|
+
paywall_position=${this.paywall_position}
|
|
125
|
+
tracker_page_type=${this.tracker_page_type}
|
|
126
|
+
tracker_content_id=${this.tracker_content_id}
|
|
127
|
+
tracker_content_title=${this.tracker_content_title}
|
|
128
|
+
tracker_content_categories=${this.tracker_content_categories}
|
|
129
|
+
tracker_content_type=${this.tracker_content_type}
|
|
130
|
+
tracker_user_type=${this.tracker_user_type}
|
|
131
|
+
tracker_subscription_status=${this.tracker_subscription_status}
|
|
132
|
+
tracker_page_domain=${this.tracker_page_domain}
|
|
133
|
+
tracker_metered_wall_type=${this.tracker_metered_wall_type}
|
|
134
|
+
tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
|
|
102
135
|
></kompasid-header-account-profile>
|
|
103
136
|
<div class="pl-4 pr-3 py-4 text-left">
|
|
104
137
|
<kompasid-header-account-menu
|
|
@@ -251,6 +284,51 @@ __decorate([
|
|
|
251
284
|
__decorate([
|
|
252
285
|
property({ type: Number })
|
|
253
286
|
], KompasHeaderAccount.prototype, "totalGracePeriod", void 0);
|
|
287
|
+
__decorate([
|
|
288
|
+
property({ type: String })
|
|
289
|
+
], KompasHeaderAccount.prototype, "paywall_location", void 0);
|
|
290
|
+
__decorate([
|
|
291
|
+
property({ type: String })
|
|
292
|
+
], KompasHeaderAccount.prototype, "paywall_subscription_package", void 0);
|
|
293
|
+
__decorate([
|
|
294
|
+
property({ type: Number })
|
|
295
|
+
], KompasHeaderAccount.prototype, "paywall_subscription_id", void 0);
|
|
296
|
+
__decorate([
|
|
297
|
+
property({ type: Number })
|
|
298
|
+
], KompasHeaderAccount.prototype, "paywall_subscription_price", void 0);
|
|
299
|
+
__decorate([
|
|
300
|
+
property({ type: Number })
|
|
301
|
+
], KompasHeaderAccount.prototype, "paywall_position", void 0);
|
|
302
|
+
__decorate([
|
|
303
|
+
property({ type: String })
|
|
304
|
+
], KompasHeaderAccount.prototype, "tracker_page_type", void 0);
|
|
305
|
+
__decorate([
|
|
306
|
+
property({ type: String })
|
|
307
|
+
], KompasHeaderAccount.prototype, "tracker_content_id", void 0);
|
|
308
|
+
__decorate([
|
|
309
|
+
property({ type: String })
|
|
310
|
+
], KompasHeaderAccount.prototype, "tracker_content_title", void 0);
|
|
311
|
+
__decorate([
|
|
312
|
+
property({ type: String })
|
|
313
|
+
], KompasHeaderAccount.prototype, "tracker_content_categories", void 0);
|
|
314
|
+
__decorate([
|
|
315
|
+
property({ type: String })
|
|
316
|
+
], KompasHeaderAccount.prototype, "tracker_content_type", void 0);
|
|
317
|
+
__decorate([
|
|
318
|
+
property({ type: String })
|
|
319
|
+
], KompasHeaderAccount.prototype, "tracker_user_type", void 0);
|
|
320
|
+
__decorate([
|
|
321
|
+
property({ type: String })
|
|
322
|
+
], KompasHeaderAccount.prototype, "tracker_subscription_status", void 0);
|
|
323
|
+
__decorate([
|
|
324
|
+
property({ type: String })
|
|
325
|
+
], KompasHeaderAccount.prototype, "tracker_page_domain", void 0);
|
|
326
|
+
__decorate([
|
|
327
|
+
property({ type: String })
|
|
328
|
+
], KompasHeaderAccount.prototype, "tracker_metered_wall_type", void 0);
|
|
329
|
+
__decorate([
|
|
330
|
+
property({ type: Number })
|
|
331
|
+
], KompasHeaderAccount.prototype, "tracker_metered_wall_balance", void 0);
|
|
254
332
|
KompasHeaderAccount = __decorate([
|
|
255
333
|
customElement('kompasid-header-account')
|
|
256
334
|
], KompasHeaderAccount);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n\n formattedUserData: User = {} as User\n\n @property({ type: String }) cartUrl = ''\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: Number }) notificationTotal = 0\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = ''\n @property({ type: String }) readLaterUrl = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private account() {\n const notificationIndicator = () => {\n if (!this.notificationTotal) return html``\n return html`<div class=\"header-account--notification-indicator\"></div>`\n }\n\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-2.5 w-2.5\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative\"\n >\n <span class=\"capitalize text-xxs text-blue-600 font-bold\"\n >${this.getInitialUserName()}</span\n >\n ${notificationIndicator()} ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-3 icon-xs text-white chevron-icon ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n .totalGracePeriod=${this.totalGracePeriod}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .cart-url=${this.cartUrl}\n .manage-account-url=${this.manageAccountUrl}\n .logout-url=${this.logoutUrl}\n .notification-url=${this.notificationUrl}\n .notification-total=${this.notificationTotal}\n .orders-url=${this.ordersUrl}\n .read-later-url=${this.readLaterUrl}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n\n formattedUserData: User = {} as User\n\n @property({ type: String }) cartUrl = ''\n @property({ type: String }) logoutUrl = ''\n @property({ type: String }) manageAccountUrl = ''\n @property({ type: Number }) notificationTotal = 0\n @property({ type: String }) notificationUrl = ''\n @property({ type: String }) ordersUrl = ''\n @property({ type: String }) readLaterUrl = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n\n /**\n * Props For Grace Period Tracker\n */\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private account() {\n const notificationIndicator = () => {\n if (!this.notificationTotal) return html``\n return html`<div class=\"header-account--notification-indicator\"></div>`\n }\n\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-2.5 w-2.5\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex bg-grey-100 rounded-full h-6 w-6 items-center justify-center relative\"\n >\n <span class=\"capitalize text-xxs text-blue-600 font-bold\"\n >${this.getInitialUserName()}</span\n >\n ${notificationIndicator()} ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-3 icon-xs text-white chevron-icon ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n .totalGracePeriod=${this.totalGracePeriod}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .cart-url=${this.cartUrl}\n .manage-account-url=${this.manageAccountUrl}\n .logout-url=${this.logoutUrl}\n .notification-url=${this.notificationUrl}\n .notification-total=${this.notificationTotal}\n .orders-url=${this.ordersUrl}\n .read-later-url=${this.readLaterUrl}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface User {\n userName: string\n expired: string\n isNearExpired: boolean\n activeInfo: string\n isMembership: boolean\n updateMembership: string\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface User {\n userName: string\n expired: string\n isNearExpired: boolean\n totalGracePeriod: number\n isGracePeriod: boolean\n activeInfo: string\n isMembership: boolean\n updateMembership: string\n}\n"]}
|
|
@@ -1,10 +1,37 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import { User } from '../kompasid-header-account/types.js';
|
|
3
|
+
import '../kompasid-grace-period/KompasGracePeriod.js';
|
|
2
4
|
export declare class KompasHeaderAccountProfile extends LitElement {
|
|
3
5
|
static styles: import("lit").CSSResult[];
|
|
6
|
+
/**
|
|
7
|
+
* Props
|
|
8
|
+
*/
|
|
4
9
|
userInitialName: string;
|
|
5
|
-
userData:
|
|
6
|
-
subscriptionUrl: string;
|
|
10
|
+
userData: User;
|
|
7
11
|
totalGracePeriod: number;
|
|
12
|
+
/**
|
|
13
|
+
* Props For Grace Period Tracker
|
|
14
|
+
*/
|
|
15
|
+
paywall_location: string;
|
|
16
|
+
paywall_subscription_package: string;
|
|
17
|
+
paywall_subscription_id: number;
|
|
18
|
+
paywall_subscription_price: number;
|
|
19
|
+
paywall_position: number;
|
|
20
|
+
tracker_page_type: string;
|
|
21
|
+
tracker_content_id: string;
|
|
22
|
+
tracker_content_title: string;
|
|
23
|
+
tracker_content_categories: string;
|
|
24
|
+
tracker_content_type: string;
|
|
25
|
+
tracker_user_type: string;
|
|
26
|
+
tracker_subscription_status: string;
|
|
27
|
+
tracker_page_domain: string;
|
|
28
|
+
tracker_metered_wall_type: string;
|
|
29
|
+
tracker_metered_wall_balance: number;
|
|
30
|
+
/**
|
|
31
|
+
* State
|
|
32
|
+
*/
|
|
33
|
+
private maxGracePeriod;
|
|
34
|
+
formatDate(date: Date | string): string;
|
|
8
35
|
private renderSkeletonLoading;
|
|
9
36
|
private renderProfileContent;
|
|
10
37
|
connectedCallback(): Promise<void>;
|