@kompasid/lit-web-components 0.7.3 → 0.7.5
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/.github/workflows/npm-publish.yml +2 -2
- package/demo/index.html +66 -50
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts +32 -2
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js +110 -4
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map +1 -1
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +34 -9
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map +1 -1
- package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js +14 -10
- package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js.map +1 -1
- package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js +5 -2
- package/dist/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.js.map +1 -1
- package/dist/tailwind/tailwind.js +31 -22
- 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 +74 -3
- package/src/components/kompasid-grace-period/readme.md +21 -7
- package/src/components/kompasid-header-account/KompasHeaderAccount.ts +34 -9
- package/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts +14 -10
- package/src/components/kompasid-header-account-menu/KompasHeaderAccountMenu.ts +5 -2
- package/tailwind/tailwind.css +31 -22
- package/tailwind/tailwind.ts +31 -22
|
@@ -9,7 +9,7 @@ on:
|
|
|
9
9
|
|
|
10
10
|
jobs:
|
|
11
11
|
build:
|
|
12
|
-
runs-on: [
|
|
12
|
+
runs-on: [node20]
|
|
13
13
|
steps:
|
|
14
14
|
- uses: actions/checkout@v3
|
|
15
15
|
- uses: actions/setup-node@v3
|
|
@@ -20,7 +20,7 @@ jobs:
|
|
|
20
20
|
|
|
21
21
|
publish-npm:
|
|
22
22
|
needs: build
|
|
23
|
-
runs-on: [
|
|
23
|
+
runs-on: [node20]
|
|
24
24
|
steps:
|
|
25
25
|
- uses: actions/checkout@v3
|
|
26
26
|
- uses: actions/setup-node@v3
|
package/demo/index.html
CHANGED
|
@@ -92,49 +92,62 @@
|
|
|
92
92
|
const trackerContentEditors = 'Editor 1|Editor 2'
|
|
93
93
|
const trackerContentTags = 'Tag1|Tag2|Tag3'
|
|
94
94
|
const trackerContentPublishedDate = '2023-10-12'
|
|
95
|
-
const cartUrl=
|
|
96
|
-
const logoutUrl=
|
|
97
|
-
const manageAccountUrl=
|
|
98
|
-
const notificationUrl=
|
|
99
|
-
const notificationTotal=
|
|
100
|
-
const ordersUrl=
|
|
101
|
-
const subscriptionUrl=
|
|
102
|
-
const readLaterUrl=
|
|
103
|
-
const totalGracePeriod=
|
|
95
|
+
const cartUrl = '/cart'
|
|
96
|
+
const logoutUrl = '/logout'
|
|
97
|
+
const manageAccountUrl = '/manage-count'
|
|
98
|
+
const notificationUrl = '/notif'
|
|
99
|
+
const notificationTotal = '10'
|
|
100
|
+
const ordersUrl = '/orders'
|
|
101
|
+
const subscriptionUrl = ''
|
|
102
|
+
const readLaterUrl = '/baca-nanti'
|
|
103
|
+
const totalGracePeriod = '5'
|
|
104
104
|
|
|
105
105
|
const userData = {
|
|
106
106
|
userName: 'User Fullname',
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
107
|
+
expired: 'Berakhir: 6 hari lagi',
|
|
108
|
+
isNearExpired: false,
|
|
109
|
+
activeInfo:
|
|
110
|
+
'Kompas Digital Premium 1 Bulan - Auto Renewal Example Text',
|
|
111
|
+
isMembership: true,
|
|
112
|
+
updateMembership: 'Perbarui Langganan',
|
|
112
113
|
}
|
|
113
114
|
|
|
114
115
|
const widgetRelatedPost = {
|
|
115
|
-
permalinkArticle:
|
|
116
|
-
|
|
116
|
+
permalinkArticle:
|
|
117
|
+
'https://www.kompas.id/baca/opini/2024/05/02/pesan-bung-karno-jaga-persatuan-dan-keutuhan?open_from=Section_Artikel_Lainnya',
|
|
118
|
+
slugs:
|
|
119
|
+
'persatuan,bung-karno, surat pembaca, eduard lukman, bharoto, wira hardiprakoso, vision',
|
|
117
120
|
}
|
|
118
121
|
|
|
119
122
|
const widgetOtherPost = {
|
|
120
123
|
titleName: 'Lainnya Dalam Opini',
|
|
121
|
-
titleLink: '/kategori/opini'
|
|
124
|
+
titleLink: '/kategori/opini',
|
|
122
125
|
}
|
|
123
126
|
|
|
124
127
|
render(
|
|
125
128
|
html`
|
|
126
|
-
<
|
|
127
|
-
.
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
129
|
+
<header
|
|
130
|
+
style="width: 100%; position: fixed; left: 0; top: 0px; background-color: #0356a8; padding: 0.75rem; z-index: 99"
|
|
131
|
+
>
|
|
132
|
+
<div
|
|
133
|
+
style="max-width: 1280px; margin: auto; display: flex;padding:0 30px"
|
|
134
|
+
>
|
|
135
|
+
<kompasid-header-account
|
|
136
|
+
.userData=${userData}
|
|
137
|
+
.cart_url=${cartUrl}
|
|
138
|
+
.logout_url=${logoutUrl}
|
|
139
|
+
sidebarTopSpacing="49"
|
|
140
|
+
.manage_account_url=${manageAccountUrl}
|
|
141
|
+
.notification_url=${notificationUrl}
|
|
142
|
+
.notification_total=${notificationTotal}
|
|
143
|
+
.orders_url=${ordersUrl}
|
|
144
|
+
.subscription_url=${subscriptionUrl}
|
|
145
|
+
.read_later_url=${readLaterUrl}
|
|
146
|
+
.total_grace_period=${totalGracePeriod}
|
|
147
|
+
style="margin-left: auto; height: 25px; display: flex; align-items: center"
|
|
148
|
+
></kompasid-header-account>
|
|
149
|
+
</div>
|
|
150
|
+
</header>
|
|
138
151
|
|
|
139
152
|
<kompasid-widget-recirculations-default
|
|
140
153
|
.permalinkArticle=${widgetRelatedPost.permalinkArticle}
|
|
@@ -144,11 +157,14 @@
|
|
|
144
157
|
<kompasid-widget-recirculations-default
|
|
145
158
|
.titleName=${widgetOtherPost.titleName}
|
|
146
159
|
.titleLink=${widgetOtherPost.titleLink}
|
|
147
|
-
type=
|
|
148
|
-
mainCategory=
|
|
160
|
+
type="otherArticle"
|
|
161
|
+
mainCategory="opini"
|
|
149
162
|
></kompasid-widget-recirculations-default>
|
|
150
163
|
|
|
151
|
-
<kompasid-widget-recirculations-list
|
|
164
|
+
<kompasid-widget-recirculations-list
|
|
165
|
+
widgetTitle="Terpopuler"
|
|
166
|
+
apiSlug="popular-article"
|
|
167
|
+
>
|
|
152
168
|
</kompasid-widget-recirculations-list>
|
|
153
169
|
|
|
154
170
|
<kompasid-paywall
|
|
@@ -227,26 +243,26 @@
|
|
|
227
243
|
>
|
|
228
244
|
</kompasid-freewall>
|
|
229
245
|
<kompasid-metered-wall-register
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
246
|
+
.id=${'metered-wall-register'}
|
|
247
|
+
.countdownArticle=${countdownArticle}
|
|
248
|
+
.tracker_page_title=${trackerPageTitle}
|
|
249
|
+
.tracker_page_type=${trackerPageType}
|
|
250
|
+
.tracker_content_type=${trackerContentType}
|
|
251
|
+
.tracker_content_id=${trackerContentId}
|
|
252
|
+
.tracker_content_title=${trackerContentTitle}
|
|
253
|
+
.tracker_content_authors=${trackerContentAuthors}
|
|
254
|
+
.tracker_content_editors=${trackerContentEditors}
|
|
255
|
+
.tracker_content_tags=${trackerContentTags}
|
|
256
|
+
.tracker_content_published_date=${trackerContentPublishedDate}
|
|
257
|
+
.tracker_content_categories=${trackerContentCategories}
|
|
258
|
+
.tracker_user_type=${trackerUserType}
|
|
259
|
+
.tracker_subscription_status=${trackerSubscriptionStatus}
|
|
260
|
+
.tracker_metered_wall_type=${meteredWallType}
|
|
261
|
+
.tracker_metered_wall_balance=${trackerMeteredWallBalance}
|
|
262
|
+
.tracker_page_domain=${trackerPageDomain}
|
|
247
263
|
></kompasid-metered-wall-register>
|
|
248
264
|
|
|
249
|
-
<!-- <kompasid-grace-period totalGracePeriod="5"
|
|
265
|
+
<!-- <kompasid-grace-period totalGracePeriod="5"></kompasid-grace-period> -->
|
|
250
266
|
`,
|
|
251
267
|
document.querySelector('#demo')
|
|
252
268
|
)
|
|
@@ -8,12 +8,40 @@ 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
|
|
11
|
+
* property paywall_location = the location where user encounter the paywall
|
|
12
|
+
* property paywall_subscription_package = the name of the subscription package viewed by user
|
|
13
|
+
* property paywall_subscription_id = the ID of the subscription package viewed by user
|
|
14
|
+
* property paywall_subscription_price = the price of the subscriprtion package viewed by user
|
|
15
|
+
* property paywall_position = the position of the subscription package viewed by user
|
|
16
|
+
* property tracker_page_type = type of the page
|
|
17
|
+
* property tracker_content_id = ID of article (slug)
|
|
18
|
+
* property tracker_content_type = whether it's free article or paid article
|
|
19
|
+
* property tracker_content_title = the title of article
|
|
20
|
+
* property tracker_content_categories = the category of the content
|
|
21
|
+
* property tracker_user_type = type of user based on their subscription
|
|
22
|
+
* property tracker_subscription_status = status of their subscription
|
|
23
|
+
* property tracker_page_domain = page Domain
|
|
24
|
+
* property tracker_metered_wall_type = the type of Metered Wall
|
|
25
|
+
* property tracker_metered_wall_balance = the balance of their metered wall
|
|
12
26
|
*/
|
|
13
27
|
totalGracePeriod: number;
|
|
14
28
|
isColumn: boolean;
|
|
15
29
|
isShowButton: boolean;
|
|
16
|
-
|
|
30
|
+
paywall_location: string;
|
|
31
|
+
paywall_subscription_package: string;
|
|
32
|
+
paywall_subscription_id: number;
|
|
33
|
+
paywall_subscription_price: number;
|
|
34
|
+
paywall_position: number;
|
|
35
|
+
tracker_page_type: string;
|
|
36
|
+
tracker_content_id: string;
|
|
37
|
+
tracker_content_title: string;
|
|
38
|
+
tracker_content_categories: string;
|
|
39
|
+
tracker_content_type: string;
|
|
40
|
+
tracker_user_type: string;
|
|
41
|
+
tracker_subscription_status: string;
|
|
42
|
+
tracker_page_domain: string;
|
|
43
|
+
tracker_metered_wall_type: string;
|
|
44
|
+
tracker_metered_wall_balance: number;
|
|
17
45
|
/**
|
|
18
46
|
* State
|
|
19
47
|
*/
|
|
@@ -21,6 +49,8 @@ export declare class KompasGracePeriod extends LitElement {
|
|
|
21
49
|
private updateSubscription;
|
|
22
50
|
private getCountdownGracePeriod;
|
|
23
51
|
private redirectToBerlangganan;
|
|
52
|
+
private getGtmParams;
|
|
53
|
+
private sendGtmEvent;
|
|
24
54
|
private dataLayeronPerbaruiLanggananButton;
|
|
25
55
|
private dataLayeronGracePeriod;
|
|
26
56
|
private gracePeriodTemplate;
|
|
@@ -13,12 +13,40 @@ 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
|
|
16
|
+
* property paywall_location = the location where user encounter the paywall
|
|
17
|
+
* property paywall_subscription_package = the name of the subscription package viewed by user
|
|
18
|
+
* property paywall_subscription_id = the ID of the subscription package viewed by user
|
|
19
|
+
* property paywall_subscription_price = the price of the subscriprtion package viewed by user
|
|
20
|
+
* property paywall_position = the position of the subscription package viewed by user
|
|
21
|
+
* property tracker_page_type = type of the page
|
|
22
|
+
* property tracker_content_id = ID of article (slug)
|
|
23
|
+
* property tracker_content_type = whether it's free article or paid article
|
|
24
|
+
* property tracker_content_title = the title of article
|
|
25
|
+
* property tracker_content_categories = the category of the content
|
|
26
|
+
* property tracker_user_type = type of user based on their subscription
|
|
27
|
+
* property tracker_subscription_status = status of their subscription
|
|
28
|
+
* property tracker_page_domain = page Domain
|
|
29
|
+
* property tracker_metered_wall_type = the type of Metered Wall
|
|
30
|
+
* property tracker_metered_wall_balance = the balance of their metered wall
|
|
17
31
|
*/
|
|
18
32
|
this.totalGracePeriod = 0;
|
|
19
33
|
this.isColumn = false;
|
|
20
34
|
this.isShowButton = false;
|
|
21
|
-
this.
|
|
35
|
+
this.paywall_location = '';
|
|
36
|
+
this.paywall_subscription_package = '';
|
|
37
|
+
this.paywall_subscription_id = 0;
|
|
38
|
+
this.paywall_subscription_price = 0;
|
|
39
|
+
this.paywall_position = 0;
|
|
40
|
+
this.tracker_page_type = '';
|
|
41
|
+
this.tracker_content_id = '';
|
|
42
|
+
this.tracker_content_title = '';
|
|
43
|
+
this.tracker_content_categories = '';
|
|
44
|
+
this.tracker_content_type = '';
|
|
45
|
+
this.tracker_user_type = '';
|
|
46
|
+
this.tracker_subscription_status = '';
|
|
47
|
+
this.tracker_page_domain = '';
|
|
48
|
+
this.tracker_metered_wall_type = '';
|
|
49
|
+
this.tracker_metered_wall_balance = 0;
|
|
22
50
|
/**
|
|
23
51
|
* State
|
|
24
52
|
*/
|
|
@@ -49,7 +77,42 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
|
|
|
49
77
|
}
|
|
50
78
|
redirectToBerlangganan() {
|
|
51
79
|
this.dataLayeronPerbaruiLanggananButton();
|
|
52
|
-
window.
|
|
80
|
+
const originHost = encodeURIComponent(window.location.href);
|
|
81
|
+
this.sendGtmEvent('subscribe_button_clicked');
|
|
82
|
+
window.open(`${this.updateSubscription}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=grace_period_paywall`);
|
|
83
|
+
}
|
|
84
|
+
getGtmParams() {
|
|
85
|
+
return {
|
|
86
|
+
paywall_location: this.paywall_location,
|
|
87
|
+
paywall_subscription_package: this.paywall_subscription_package,
|
|
88
|
+
paywall_subscription_id: this.paywall_subscription_id,
|
|
89
|
+
paywall_subscription_price: this.paywall_subscription_price,
|
|
90
|
+
paywall_position: this.paywall_position,
|
|
91
|
+
page_type: this.tracker_page_type,
|
|
92
|
+
content_id: this.tracker_content_id,
|
|
93
|
+
content_title: this.tracker_content_title,
|
|
94
|
+
content_categories: this.tracker_content_categories,
|
|
95
|
+
content_type: this.tracker_content_type,
|
|
96
|
+
user_type: this.tracker_user_type,
|
|
97
|
+
subscription_status: this.tracker_subscription_status,
|
|
98
|
+
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
99
|
+
metered_wall_type: this.tracker_metered_wall_type || 'GP',
|
|
100
|
+
metered_wall_balance: this.tracker_metered_wall_balance,
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
sendGtmEvent(event) {
|
|
104
|
+
let gtmParams = { event };
|
|
105
|
+
if (event === 'paywall_viewed') {
|
|
106
|
+
gtmParams.impressions = [
|
|
107
|
+
{
|
|
108
|
+
...this.getGtmParams(),
|
|
109
|
+
},
|
|
110
|
+
];
|
|
111
|
+
}
|
|
112
|
+
else {
|
|
113
|
+
gtmParams = { ...gtmParams, ...this.getGtmParams() };
|
|
114
|
+
}
|
|
115
|
+
window.dataLayer.push(gtmParams);
|
|
53
116
|
}
|
|
54
117
|
dataLayeronPerbaruiLanggananButton() {
|
|
55
118
|
window.dataLayer.push({
|
|
@@ -96,6 +159,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
|
|
|
96
159
|
}
|
|
97
160
|
async connectedCallback() {
|
|
98
161
|
super.connectedCallback();
|
|
162
|
+
this.sendGtmEvent('paywall_viewed');
|
|
99
163
|
this.dataLayeronGracePeriod();
|
|
100
164
|
}
|
|
101
165
|
render() {
|
|
@@ -132,7 +196,49 @@ __decorate([
|
|
|
132
196
|
], KompasGracePeriod.prototype, "isShowButton", void 0);
|
|
133
197
|
__decorate([
|
|
134
198
|
property({ type: String })
|
|
135
|
-
], KompasGracePeriod.prototype, "
|
|
199
|
+
], KompasGracePeriod.prototype, "paywall_location", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: String })
|
|
202
|
+
], KompasGracePeriod.prototype, "paywall_subscription_package", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property({ type: Number })
|
|
205
|
+
], KompasGracePeriod.prototype, "paywall_subscription_id", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property({ type: Number })
|
|
208
|
+
], KompasGracePeriod.prototype, "paywall_subscription_price", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
property({ type: Number })
|
|
211
|
+
], KompasGracePeriod.prototype, "paywall_position", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
property({ type: String })
|
|
214
|
+
], KompasGracePeriod.prototype, "tracker_page_type", void 0);
|
|
215
|
+
__decorate([
|
|
216
|
+
property({ type: String })
|
|
217
|
+
], KompasGracePeriod.prototype, "tracker_content_id", void 0);
|
|
218
|
+
__decorate([
|
|
219
|
+
property({ type: String })
|
|
220
|
+
], KompasGracePeriod.prototype, "tracker_content_title", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
property({ type: String })
|
|
223
|
+
], KompasGracePeriod.prototype, "tracker_content_categories", void 0);
|
|
224
|
+
__decorate([
|
|
225
|
+
property({ type: String })
|
|
226
|
+
], KompasGracePeriod.prototype, "tracker_content_type", void 0);
|
|
227
|
+
__decorate([
|
|
228
|
+
property({ type: String })
|
|
229
|
+
], KompasGracePeriod.prototype, "tracker_user_type", void 0);
|
|
230
|
+
__decorate([
|
|
231
|
+
property({ type: String })
|
|
232
|
+
], KompasGracePeriod.prototype, "tracker_subscription_status", void 0);
|
|
233
|
+
__decorate([
|
|
234
|
+
property({ type: String })
|
|
235
|
+
], KompasGracePeriod.prototype, "tracker_page_domain", void 0);
|
|
236
|
+
__decorate([
|
|
237
|
+
property({ type: String })
|
|
238
|
+
], KompasGracePeriod.prototype, "tracker_metered_wall_type", void 0);
|
|
239
|
+
__decorate([
|
|
240
|
+
property({ type: Number })
|
|
241
|
+
], KompasGracePeriod.prototype, "tracker_metered_wall_balance", void 0);
|
|
136
242
|
__decorate([
|
|
137
243
|
state()
|
|
138
244
|
], KompasGracePeriod.prototype, "maxGracePeriod", void 0);
|
|
@@ -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 subscriptionId = used for renewal subs\n */\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = false\n @property({ type: String }) subscriptionId = ''\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 window.open(\n `${this.updateSubscription}/kdp?productId=${this.subscriptionId}`\n )\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 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 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=grace_period_paywall`\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"]}
|
|
@@ -54,7 +54,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
54
54
|
`;
|
|
55
55
|
};
|
|
56
56
|
return html `
|
|
57
|
-
<button @click=${this.toggleSidebar} class="cursor-pointer
|
|
57
|
+
<button @click=${this.toggleSidebar} class="cursor-pointer ">
|
|
58
58
|
<div class="flex flex-row items-center self-center">
|
|
59
59
|
${!this.getInitialUserName()
|
|
60
60
|
? html `<div
|
|
@@ -83,11 +83,15 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
83
83
|
}
|
|
84
84
|
accountSidebar() {
|
|
85
85
|
return html `
|
|
86
|
-
<nav
|
|
86
|
+
<nav
|
|
87
|
+
class="w-screen fixed right-0 top-0 bottom-0"
|
|
88
|
+
@keyup="${this.onkeyup}"
|
|
89
|
+
@click=${this.toggleSidebar}
|
|
90
|
+
>
|
|
87
91
|
<div
|
|
92
|
+
class="bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto"
|
|
93
|
+
style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}
|
|
88
94
|
@keyup="${this.onkeyup}"
|
|
89
|
-
class="bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-99 ml-auto"
|
|
90
|
-
style=${`margin-top: ${this.sidebarTopSpacing}px`}
|
|
91
95
|
@click=${(ev) => ev.stopPropagation()}
|
|
92
96
|
>
|
|
93
97
|
<kompasid-header-account-profile
|
|
@@ -126,11 +130,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
126
130
|
}
|
|
127
131
|
render() {
|
|
128
132
|
return html `
|
|
129
|
-
|
|
130
|
-
<div class="text-end">
|
|
131
|
-
${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}
|
|
132
|
-
</div>
|
|
133
|
-
</header>
|
|
133
|
+
${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}
|
|
134
134
|
`;
|
|
135
135
|
}
|
|
136
136
|
};
|
|
@@ -187,6 +187,31 @@ KompasHeaderAccount.styles = [
|
|
|
187
187
|
font-family: 'PT Sans', sans-serif;
|
|
188
188
|
font-size: 0.875rem;
|
|
189
189
|
}
|
|
190
|
+
.z-index-max {
|
|
191
|
+
z-index: 99999;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
/* Custom Scrollbar for header */
|
|
195
|
+
/* width */
|
|
196
|
+
::-webkit-scrollbar {
|
|
197
|
+
width: 4px;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* Track */
|
|
201
|
+
::-webkit-scrollbar-track {
|
|
202
|
+
background: transparent;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
/* Handle */
|
|
206
|
+
::-webkit-scrollbar-thumb {
|
|
207
|
+
background: #0356a8;
|
|
208
|
+
border-radius: 100px;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* Handle on hover */
|
|
212
|
+
::-webkit-scrollbar-thumb:hover {
|
|
213
|
+
background: #0356a8;
|
|
214
|
+
}
|
|
190
215
|
`,
|
|
191
216
|
TWStyles,
|
|
192
217
|
];
|
|
@@ -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 `,\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://d3w4qaq4xm1ncv.cloudfront.net/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 p-3\">\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 @keyup=\"${this.onkeyup}\" @click=${this.toggleSidebar}>\n <div\n @keyup=\"${this.onkeyup}\"\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-99 ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px`}\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 <header class=\"header flex flex-row justify-end h-[49px] relative z-50\">\n <div class=\"text-end\">\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n </div>\n </header>\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 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://d3w4qaq4xm1ncv.cloudfront.net/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"]}
|
package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js
CHANGED
|
@@ -142,23 +142,27 @@ KompasHeaderAccountHelpCenter.styles = [
|
|
|
142
142
|
display: flex;
|
|
143
143
|
flex-direction: row;
|
|
144
144
|
align-items: center;
|
|
145
|
-
padding: 0.75rem;
|
|
146
|
-
transition: background-color 0.3s ease-in-out;
|
|
147
|
-
border-radius: 0.25rem;
|
|
145
|
+
padding: 0 0.75rem;
|
|
148
146
|
}
|
|
149
|
-
.header-account-help-center--
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
147
|
+
.header-account-help-center--content {
|
|
148
|
+
display: flex;
|
|
149
|
+
flex-direction: column;
|
|
150
|
+
flex-grow: 1;
|
|
151
|
+
margin-left: 1rem; /* Equivalent to mx-4 (margin-left: 1rem and margin-right: 1rem) */
|
|
152
|
+
margin-right: 1rem;
|
|
153
|
+
line-height: 1.25rem; /* Equivalent to leading-4 (line-height: 1.25rem) */
|
|
154
|
+
font-size: 1rem; /* Equivalent to text-base (font-size: 1rem) */
|
|
155
|
+
gap: 0.5rem; /* Equivalent to gap-y-2 (gap between rows: 0.5rem) */
|
|
154
156
|
}
|
|
155
157
|
.icon {
|
|
156
|
-
width: 20px;
|
|
157
|
-
height: 20px;
|
|
158
158
|
margin-top: auto;
|
|
159
159
|
margin-bottom: auto;
|
|
160
160
|
color: rgb(0 85 154);
|
|
161
161
|
}
|
|
162
|
+
.icon svg {
|
|
163
|
+
width: 20px;
|
|
164
|
+
height: 20px;
|
|
165
|
+
}
|
|
162
166
|
`,
|
|
163
167
|
TWStyles,
|
|
164
168
|
];
|
package/dist/src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasHeaderAccountHelpCenter.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGjD,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,UAAU;IAAtD;;
|
|
1
|
+
{"version":3,"file":"KompasHeaderAccountHelpCenter.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-header-account-help-center')\nexport class KompasHeaderAccountHelpCenter extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0 0.75rem;\n }\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem; /* Equivalent to mx-4 (margin-left: 1rem and margin-right: 1rem) */\n margin-right: 1rem;\n line-height: 1.25rem; /* Equivalent to leading-4 (line-height: 1.25rem) */\n font-size: 1rem; /* Equivalent to text-base (font-size: 1rem) */\n gap: 0.5rem; /* Equivalent to gap-y-2 (gap between rows: 0.5rem) */\n }\n .icon {\n margin-top: auto;\n margin-bottom: auto;\n color: rgb(0 85 154);\n }\n .icon svg {\n width: 20px;\n height: 20px;\n }\n `,\n TWStyles,\n ]\n\n kompasKring?: HTMLInputElement\n\n @state() clipboardClicked: boolean = false\n\n // Q & A\n private qna = () =>\n html` <div class=\"header-account-help-center--item\">\n <div class=\"icon\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'comments'))}\n </div>\n <div\n class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n >\n <p>Tanya Jawab</p>\n <a href=\"http://kb.kompas.id/\" class=\"font-bold hover:underline\"\n >http://kb.kompas.id/</a\n >\n </div>\n </div>`\n\n // Telephone\n private telephone = () => {\n // Clipboard Action\n const clipboardAction = async () => {\n const phoneNumberCopy =\n this.shadowRoot?.getElementById('kompasKring')?.innerHTML\n if (phoneNumberCopy) {\n try {\n await navigator.clipboard.writeText(phoneNumberCopy)\n this.clipboardClicked = true\n setTimeout(() => {\n this.clipboardClicked = false\n }, 2000)\n } catch (error) {\n // Handle clipboard write error\n console.error('Failed to copy to clipboard:', error)\n }\n }\n }\n\n // Keyboard event handler\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter') {\n clipboardAction()\n }\n }\n\n return html`<div class=\"header-account-help-center--item\">\n <div class=\"icon\">${unsafeSVG(getFontAwesomeIcon('fas', 'phone'))}</div>\n <div\n class=\"relative header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n >\n ${this.clipboardClicked\n ? html`<p\n class=\"absolute bg-grey-200 rounded-md h-full top-0 w-full flex items-center justify-center\"\n >\n Berhasil menyalin!\n </p>`\n : html``}\n <p>Kompas Kring</p>\n <p id=\"kompasKring\" class=\"font-bold\">+6221 2567 6000</p>\n </div>\n <div\n class=\"bg-grey-200 px-3 py-2 rounded cursor-pointer\"\n @click=${clipboardAction}\n @keydown=${handleKeyDown}\n tabindex=\"0\"\n >\n <div class=\"icon-sm icon-grey-600\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'copy'))}\n </div>\n </div>\n </div>`\n }\n\n // Whatsapp\n private whatsapp = () =>\n html`<a\n href=\"https://api.whatsapp.com/send?phone=6281290050800\"\n class=\"header-account-help-center--item\"\n >\n <div class=\"icon\">\n ${unsafeSVG(getFontAwesomeIcon('fab', 'whatsapp'))}\n </div>\n <div\n class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n >\n <p>Whatsapp</p>\n <p class=\"font-bold hover:underline\">+62812 900 50 800</p>\n </div>\n </a>`\n\n // Email\n private email = () =>\n html`<a\n href=\"mailto:hotline@kompas.id\"\n class=\"header-account-help-center--item\"\n >\n <div class=\"icon-md text-brand-1\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'envelope'))}\n </div>\n <div\n class=\"header-account-help-center--content mx-4 leading-4 gap-y-2 text-base\"\n >\n <p>Email</p>\n <p class=\"font-bold hover:underline\">hotline@kompas.id</p>\n </div>\n </a>`\n\n // Working Hour\n private workingHour = () =>\n html`<div class=\"header-account-help-center--item\">\n <div class=\"icon-md text-brand-1\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'clock'))}\n </div>\n <div class=\"flex flex-col mx-4 leading-4 gap-y-2 text-base\">\n <p>Jam Kerja</p>\n <p class=\"font-bold\">06.00 - 16.00 WIB</p>\n </div>\n </div>`\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div\n class=\"account-help-center-container text-left leading-none mt-4 text-grey-600\"\n >\n <p class=\"text-base mx-1\">Pusat Bantuan</p>\n <div class=\"flex flex-col text-sm gap-y-4 my-4\">\n ${this.qna()} ${this.telephone()} ${this.whatsapp()} ${this.email()}\n ${this.workingHour()}\n </div>\n </div>\n `\n }\n}\n"]}
|