@kompasid/lit-web-components 0.5.4 → 0.5.6
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 +26 -1
- package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.d.ts +98 -0
- package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js +390 -0
- package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js.map +1 -0
- package/dist/src/components/kompasid-metered-wall-register/types.d.ts +16 -0
- package/dist/src/components/kompasid-metered-wall-register/types.js +2 -0
- package/dist/src/components/kompasid-metered-wall-register/types.js.map +1 -0
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +1 -2
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +10 -10
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
- package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js +1 -1
- package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/utils/cta.d.ts +11 -4
- package/dist/src/utils/cta.js +3 -3
- package/dist/src/utils/cta.js.map +1 -1
- package/dist/tailwind/tailwind.js +0 -5
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts +344 -0
- package/src/components/kompasid-metered-wall-register/readme.md +77 -0
- package/src/components/kompasid-metered-wall-register/types.ts +16 -0
- package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +10 -10
- package/src/components/kompasid-paywall-video/KompasPaywallVideo.ts +2 -1
- package/src/index.ts +1 -0
- package/src/utils/cta.ts +19 -7
- package/tailwind/tailwind.css +0 -5
- package/tailwind/tailwind.ts +0 -5
package/demo/index.html
CHANGED
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
|
|
51
51
|
import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
|
|
52
52
|
import '../dist/src/components/kompasid-freewall/KompasFreewall.js'
|
|
53
|
+
import '../dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
|
|
53
54
|
|
|
54
55
|
const type = 'reguler'
|
|
55
56
|
const theme = ''
|
|
@@ -82,6 +83,11 @@
|
|
|
82
83
|
const headCopyExpand = ''
|
|
83
84
|
const headCopyCollapse = ''
|
|
84
85
|
const expand = false
|
|
86
|
+
const countdownArticle = 2
|
|
87
|
+
const trackerContentAuthors = 'Author 1|Author 2'
|
|
88
|
+
const trackerContentEditors = 'Editor 1|Editor 2'
|
|
89
|
+
const trackerContentTags = 'Tag1|Tag2|Tag3'
|
|
90
|
+
const trackerContentPublishedDate = '2023-10-12'
|
|
85
91
|
|
|
86
92
|
render(
|
|
87
93
|
html`
|
|
@@ -135,7 +141,7 @@
|
|
|
135
141
|
</kompasid-paywall-video>
|
|
136
142
|
</div>
|
|
137
143
|
<kompasid-footer></kompasid-footer>
|
|
138
|
-
|
|
144
|
+
|
|
139
145
|
<kompasid-freewall
|
|
140
146
|
.isLogin=${isLogin}
|
|
141
147
|
.type=${freewallType}
|
|
@@ -160,6 +166,25 @@
|
|
|
160
166
|
.tracker_metered_wall_balance=${trackerMeteredWallBalance}
|
|
161
167
|
>
|
|
162
168
|
</kompasid-freewall>
|
|
169
|
+
<kompasid-metered-wall-register
|
|
170
|
+
.id=${"metered-wall-register"}
|
|
171
|
+
.countdownArticle=${countdownArticle}
|
|
172
|
+
.tracker_page_title=${trackerPageTitle}
|
|
173
|
+
.tracker_page_type=${trackerPageType}
|
|
174
|
+
.tracker_content_type=${trackerContentType}
|
|
175
|
+
.tracker_content_id=${trackerContentId}
|
|
176
|
+
.tracker_content_title=${trackerContentTitle}
|
|
177
|
+
.tracker_content_authors=${trackerContentAuthors}
|
|
178
|
+
.tracker_content_editors=${trackerContentEditors}
|
|
179
|
+
.tracker_content_tags=${trackerContentTags}
|
|
180
|
+
.tracker_content_published_date=${trackerContentPublishedDate}
|
|
181
|
+
.tracker_content_categories=${trackerContentCategories}
|
|
182
|
+
.tracker_user_type=${trackerUserType}
|
|
183
|
+
.tracker_subscription_status=${trackerSubscriptionStatus}
|
|
184
|
+
.tracker_metered_wall_type=${meteredWallType}
|
|
185
|
+
.tracker_metered_wall_balance=${trackerMeteredWallBalance}
|
|
186
|
+
.tracker_page_domain=${trackerPageDomain}
|
|
187
|
+
></kompasid-metered-wall-register>
|
|
163
188
|
`,
|
|
164
189
|
document.querySelector('#demo')
|
|
165
190
|
)
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class KompasMeteredWallRegister extends LitElement {
|
|
3
|
+
static styles: import("lit").CSSResult[];
|
|
4
|
+
/**
|
|
5
|
+
* state
|
|
6
|
+
*/
|
|
7
|
+
/**
|
|
8
|
+
* state registerUrl untuk memberikan link kemana user akan dialihkan.
|
|
9
|
+
*/
|
|
10
|
+
registerUrl: string;
|
|
11
|
+
/**
|
|
12
|
+
* state isShowBanner untuk memunculkan component.
|
|
13
|
+
*/
|
|
14
|
+
isShowBanner: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.
|
|
17
|
+
*/
|
|
18
|
+
isExpandBanner: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* state textTemplate untuk menyimpan template yang di berikan.
|
|
21
|
+
*/
|
|
22
|
+
private textTemplate;
|
|
23
|
+
/**
|
|
24
|
+
* Props
|
|
25
|
+
*/
|
|
26
|
+
/**
|
|
27
|
+
* prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
|
|
28
|
+
* prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.
|
|
29
|
+
* prop tracker_page_title untuk title of the page
|
|
30
|
+
* prop tracker_page_type untuk type of the page
|
|
31
|
+
* prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)
|
|
32
|
+
* prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)
|
|
33
|
+
* prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)
|
|
34
|
+
* prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)
|
|
35
|
+
* prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)
|
|
36
|
+
* prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)
|
|
37
|
+
* prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)
|
|
38
|
+
* prop tracker_content_categories untuk The main category the content belongs to
|
|
39
|
+
* prop tracker_user_type untuk type of user based on their subscription
|
|
40
|
+
* prop tracker_subscription_status untuk status of their subscription
|
|
41
|
+
* prop tracker_metered_wall_type untuk the type of Metered Wall
|
|
42
|
+
* prop tracker_metered_wall_balance untuk the balance of their metered wall
|
|
43
|
+
* prop tracker_page_domain untuk Page Domain
|
|
44
|
+
* prop next_param untuk page Domain
|
|
45
|
+
*/
|
|
46
|
+
countdownArticle: number;
|
|
47
|
+
defaultExpandBanner: boolean;
|
|
48
|
+
isDesktop: boolean;
|
|
49
|
+
tracker_page_title: string;
|
|
50
|
+
tracker_page_type: string;
|
|
51
|
+
tracker_content_type: string;
|
|
52
|
+
tracker_content_id: string;
|
|
53
|
+
tracker_content_title: string;
|
|
54
|
+
tracker_content_authors: string;
|
|
55
|
+
tracker_content_editors: string;
|
|
56
|
+
tracker_content_tags: string;
|
|
57
|
+
tracker_content_published_date: string;
|
|
58
|
+
tracker_content_categories: string;
|
|
59
|
+
tracker_user_type: string;
|
|
60
|
+
tracker_subscription_status: string;
|
|
61
|
+
tracker_metered_wall_type: string;
|
|
62
|
+
tracker_metered_wall_balance: number;
|
|
63
|
+
tracker_page_domain: string;
|
|
64
|
+
next_param: string;
|
|
65
|
+
/**
|
|
66
|
+
* menentukan template yang akan di render
|
|
67
|
+
*/
|
|
68
|
+
private setTemplate;
|
|
69
|
+
private checkIsDesktop;
|
|
70
|
+
/**
|
|
71
|
+
* Render Statement
|
|
72
|
+
*/
|
|
73
|
+
private bannerTemplate;
|
|
74
|
+
private defaultBannerContent;
|
|
75
|
+
private expandedBannerContent;
|
|
76
|
+
/**
|
|
77
|
+
* template button register
|
|
78
|
+
*/
|
|
79
|
+
private registerButtonTemplate;
|
|
80
|
+
/**
|
|
81
|
+
* mengarahkan ke page register
|
|
82
|
+
*/
|
|
83
|
+
private redirectToRegister;
|
|
84
|
+
/**
|
|
85
|
+
* mengirim event ke datalayer
|
|
86
|
+
*/
|
|
87
|
+
private pushToDataLayer;
|
|
88
|
+
/**
|
|
89
|
+
* toggle isExpandBanner flag
|
|
90
|
+
*/
|
|
91
|
+
private triggerExpandBanner;
|
|
92
|
+
/**
|
|
93
|
+
* Lifecycle
|
|
94
|
+
*/
|
|
95
|
+
connectedCallback(): Promise<void>;
|
|
96
|
+
private loadData;
|
|
97
|
+
render(): import("lit").TemplateResult<1> | null;
|
|
98
|
+
}
|
|
@@ -0,0 +1,390 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { html, css, LitElement, nothing } from 'lit';
|
|
3
|
+
import { customElement, state, property } from 'lit/decorators.js';
|
|
4
|
+
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
5
|
+
import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
|
|
6
|
+
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
7
|
+
let KompasMeteredWallRegister = class KompasMeteredWallRegister extends LitElement {
|
|
8
|
+
constructor() {
|
|
9
|
+
super(...arguments);
|
|
10
|
+
/**
|
|
11
|
+
* state
|
|
12
|
+
*/
|
|
13
|
+
/**
|
|
14
|
+
* state registerUrl untuk memberikan link kemana user akan dialihkan.
|
|
15
|
+
*/
|
|
16
|
+
this.registerUrl = 'https://account.kompas.id/register?loc=metered_register_wall';
|
|
17
|
+
/**
|
|
18
|
+
* state isShowBanner untuk memunculkan component.
|
|
19
|
+
*/
|
|
20
|
+
this.isShowBanner = true;
|
|
21
|
+
/**
|
|
22
|
+
* state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.
|
|
23
|
+
*/
|
|
24
|
+
this.isExpandBanner = true;
|
|
25
|
+
/**
|
|
26
|
+
* state textTemplate untuk menyimpan template yang di berikan.
|
|
27
|
+
*/
|
|
28
|
+
this.textTemplate = {
|
|
29
|
+
default: { title: '', lastArticle: { title: '' } },
|
|
30
|
+
expand: {
|
|
31
|
+
title: '',
|
|
32
|
+
description: '',
|
|
33
|
+
lastArticle: { title: '', description: '' },
|
|
34
|
+
},
|
|
35
|
+
};
|
|
36
|
+
/**
|
|
37
|
+
* Props
|
|
38
|
+
*/
|
|
39
|
+
/**
|
|
40
|
+
* prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
|
|
41
|
+
* prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.
|
|
42
|
+
* prop tracker_page_title untuk title of the page
|
|
43
|
+
* prop tracker_page_type untuk type of the page
|
|
44
|
+
* prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)
|
|
45
|
+
* prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)
|
|
46
|
+
* prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)
|
|
47
|
+
* prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)
|
|
48
|
+
* prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)
|
|
49
|
+
* prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)
|
|
50
|
+
* prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)
|
|
51
|
+
* prop tracker_content_categories untuk The main category the content belongs to
|
|
52
|
+
* prop tracker_user_type untuk type of user based on their subscription
|
|
53
|
+
* prop tracker_subscription_status untuk status of their subscription
|
|
54
|
+
* prop tracker_metered_wall_type untuk the type of Metered Wall
|
|
55
|
+
* prop tracker_metered_wall_balance untuk the balance of their metered wall
|
|
56
|
+
* prop tracker_page_domain untuk Page Domain
|
|
57
|
+
* prop next_param untuk page Domain
|
|
58
|
+
*/
|
|
59
|
+
this.countdownArticle = 0;
|
|
60
|
+
this.defaultExpandBanner = false;
|
|
61
|
+
this.isDesktop = false;
|
|
62
|
+
this.tracker_page_title = '';
|
|
63
|
+
this.tracker_page_type = '';
|
|
64
|
+
this.tracker_content_type = '';
|
|
65
|
+
this.tracker_content_id = '';
|
|
66
|
+
this.tracker_content_title = '';
|
|
67
|
+
this.tracker_content_authors = '';
|
|
68
|
+
this.tracker_content_editors = '';
|
|
69
|
+
this.tracker_content_tags = '';
|
|
70
|
+
this.tracker_content_published_date = '';
|
|
71
|
+
this.tracker_content_categories = '';
|
|
72
|
+
this.tracker_user_type = '';
|
|
73
|
+
this.tracker_subscription_status = '';
|
|
74
|
+
this.tracker_metered_wall_type = '';
|
|
75
|
+
this.tracker_metered_wall_balance = 0;
|
|
76
|
+
this.tracker_page_domain = '';
|
|
77
|
+
this.next_param = 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini';
|
|
78
|
+
/**
|
|
79
|
+
* mengarahkan ke page register
|
|
80
|
+
*/
|
|
81
|
+
this.redirectToRegister = () => {
|
|
82
|
+
this.pushToDataLayer('mrw_clicked');
|
|
83
|
+
const newUrl = new URL(decodeURIComponent(this.registerUrl));
|
|
84
|
+
if (this.next_param)
|
|
85
|
+
newUrl.searchParams.append('next', decodeURIComponent(this.next_param));
|
|
86
|
+
window.location.href = newUrl.toString();
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
/**
|
|
90
|
+
* menentukan template yang akan di render
|
|
91
|
+
*/
|
|
92
|
+
setTemplate(prop, mode = 'default') {
|
|
93
|
+
let template = '';
|
|
94
|
+
// dynamicMode dibuat agar typescript bisa akses data lastArticle
|
|
95
|
+
const dynamicMode = this.textTemplate[mode];
|
|
96
|
+
if ('lastArticle' in dynamicMode) {
|
|
97
|
+
const lastArticleMode = dynamicMode;
|
|
98
|
+
template = lastArticleMode.lastArticle[prop] || '';
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
template = dynamicMode[prop] || '';
|
|
102
|
+
}
|
|
103
|
+
return template;
|
|
104
|
+
}
|
|
105
|
+
checkIsDesktop() {
|
|
106
|
+
if (window.innerWidth >= 960) {
|
|
107
|
+
this.isDesktop = true;
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
this.isDesktop = false;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Render Statement
|
|
115
|
+
*/
|
|
116
|
+
bannerTemplate() {
|
|
117
|
+
return this.isExpandBanner
|
|
118
|
+
? this.expandedBannerContent()
|
|
119
|
+
: this.defaultBannerContent();
|
|
120
|
+
}
|
|
121
|
+
defaultBannerContent() {
|
|
122
|
+
return html `
|
|
123
|
+
<div>
|
|
124
|
+
<div
|
|
125
|
+
class="${this.isDesktop
|
|
126
|
+
? 'cont-banner-content '
|
|
127
|
+
: null} flex flex-row justify-center"
|
|
128
|
+
>
|
|
129
|
+
<div class="banner-content flex flex-row">
|
|
130
|
+
<div
|
|
131
|
+
class="text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0"
|
|
132
|
+
.innerHTML=${this.setTemplate('title')}
|
|
133
|
+
></div>
|
|
134
|
+
<div class="md:self-center btn-regis">
|
|
135
|
+
${this.isDesktop
|
|
136
|
+
? html `<div class="ml-4"></div>
|
|
137
|
+
${this.registerButtonTemplate()}`
|
|
138
|
+
: nothing}
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
<div class="">
|
|
142
|
+
<button
|
|
143
|
+
@click="${this.triggerExpandBanner}"
|
|
144
|
+
class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
|
|
145
|
+
>
|
|
146
|
+
<div
|
|
147
|
+
class="icon icon-blue-600 ${this.isExpandBanner
|
|
148
|
+
? 'chevron-down'
|
|
149
|
+
: 'rotate-180'}"
|
|
150
|
+
>
|
|
151
|
+
${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
|
|
152
|
+
</div>
|
|
153
|
+
</button>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="md:self-center mt-4">
|
|
157
|
+
${!this.isDesktop ? html `${this.registerButtonTemplate()} ` : nothing}
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
`;
|
|
161
|
+
}
|
|
162
|
+
expandedBannerContent() {
|
|
163
|
+
return html `
|
|
164
|
+
<div class="flex flex-col-reverse md:flex-row gap-4 md:gap-8">
|
|
165
|
+
<div
|
|
166
|
+
class="flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2"
|
|
167
|
+
>
|
|
168
|
+
<p
|
|
169
|
+
class="text-lg md:text-2xl font-lora"
|
|
170
|
+
.innerHTML=${this.setTemplate('title', 'expand')}
|
|
171
|
+
></p>
|
|
172
|
+
<p
|
|
173
|
+
class="text-sm md:text-base"
|
|
174
|
+
.innerHTML=${this.setTemplate('description', 'expand')}
|
|
175
|
+
></p>
|
|
176
|
+
<div class="${this.isDesktop ? null : 'expanded-btn'} md:self-start">
|
|
177
|
+
${this.registerButtonTemplate()}
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
<div class="flex justify-center">
|
|
181
|
+
<img
|
|
182
|
+
alt="metered-wall-register"
|
|
183
|
+
src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png"
|
|
184
|
+
class="h-40 w-40 md:w-full md:h-full"
|
|
185
|
+
/>
|
|
186
|
+
</div>
|
|
187
|
+
<button
|
|
188
|
+
@click="${this.triggerExpandBanner}"
|
|
189
|
+
class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
|
|
190
|
+
>
|
|
191
|
+
<div
|
|
192
|
+
class="icon icon-blue-600 ${this.isExpandBanner
|
|
193
|
+
? 'chevron-down'
|
|
194
|
+
: 'rotate-180'}"
|
|
195
|
+
>
|
|
196
|
+
${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
|
|
197
|
+
</div>
|
|
198
|
+
</button>
|
|
199
|
+
</div>
|
|
200
|
+
`;
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* template button register
|
|
204
|
+
*/
|
|
205
|
+
registerButtonTemplate() {
|
|
206
|
+
return html `
|
|
207
|
+
<button
|
|
208
|
+
onClick=${this.redirectToRegister}
|
|
209
|
+
class="bg-green-500 px-5 py-3 w-full lg:w[127px] rounded-md font-bold text-grey-100 text-sm md:text-base"
|
|
210
|
+
>
|
|
211
|
+
Daftar Akun
|
|
212
|
+
</button>
|
|
213
|
+
`;
|
|
214
|
+
}
|
|
215
|
+
/**
|
|
216
|
+
* mengirim event ke datalayer
|
|
217
|
+
*/
|
|
218
|
+
pushToDataLayer(eventName) {
|
|
219
|
+
window.dataLayer.push({
|
|
220
|
+
event: eventName,
|
|
221
|
+
page_title: this.tracker_page_title,
|
|
222
|
+
page_type: this.tracker_page_type,
|
|
223
|
+
content_type: this.tracker_content_type,
|
|
224
|
+
content_id: this.tracker_content_id,
|
|
225
|
+
content_title: this.tracker_content_title,
|
|
226
|
+
content_authors: this.tracker_content_authors,
|
|
227
|
+
content_editors: this.tracker_content_editors,
|
|
228
|
+
content_tags: this.tracker_content_tags,
|
|
229
|
+
content_published_date: this.tracker_content_published_date,
|
|
230
|
+
content_categories: this.tracker_content_categories,
|
|
231
|
+
user_type: this.tracker_user_type || 'G',
|
|
232
|
+
subscription_status: this.tracker_subscription_status || '',
|
|
233
|
+
metered_wall_type: this.tracker_metered_wall_type || 'MRW',
|
|
234
|
+
metered_wall_balance: this.tracker_metered_wall_balance,
|
|
235
|
+
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
236
|
+
});
|
|
237
|
+
}
|
|
238
|
+
/**
|
|
239
|
+
* toggle isExpandBanner flag
|
|
240
|
+
*/
|
|
241
|
+
triggerExpandBanner() {
|
|
242
|
+
this.isExpandBanner = !this.isExpandBanner;
|
|
243
|
+
return !this.isExpandBanner && this.pushToDataLayer('mrw_closed');
|
|
244
|
+
}
|
|
245
|
+
/**
|
|
246
|
+
* Lifecycle
|
|
247
|
+
*/
|
|
248
|
+
async connectedCallback() {
|
|
249
|
+
super.connectedCallback();
|
|
250
|
+
await this.updateComplete;
|
|
251
|
+
this.loadData();
|
|
252
|
+
this.checkIsDesktop();
|
|
253
|
+
}
|
|
254
|
+
async loadData() {
|
|
255
|
+
const req = await fetch(`https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`);
|
|
256
|
+
if (req.status !== 200) {
|
|
257
|
+
throw new Error(`${req.status} Ada galat saat memproses permintaan.`);
|
|
258
|
+
}
|
|
259
|
+
this.textTemplate = await req.json();
|
|
260
|
+
const getCountdown = this.countdownArticle;
|
|
261
|
+
if (!getCountdown) {
|
|
262
|
+
this.isShowBanner = false;
|
|
263
|
+
}
|
|
264
|
+
else {
|
|
265
|
+
this.isExpandBanner = this.defaultExpandBanner;
|
|
266
|
+
}
|
|
267
|
+
if (this.isShowBanner) {
|
|
268
|
+
this.pushToDataLayer('mrw_viewed');
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
render() {
|
|
272
|
+
return this.isShowBanner
|
|
273
|
+
? html `
|
|
274
|
+
<div class="sticky bottom-0 w-full h-full z-20">
|
|
275
|
+
<div class="w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4">
|
|
276
|
+
<div class="lg:max-w-7xl m-auto relative">
|
|
277
|
+
<div>${this.bannerTemplate()}</div>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
`
|
|
282
|
+
: null;
|
|
283
|
+
}
|
|
284
|
+
};
|
|
285
|
+
KompasMeteredWallRegister.styles = [
|
|
286
|
+
css `
|
|
287
|
+
:host {
|
|
288
|
+
font-family: 'PT Sans', sans-serif;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.body {
|
|
292
|
+
position: sticky;
|
|
293
|
+
top: 0;
|
|
294
|
+
height: 100%;
|
|
295
|
+
width: 100%;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.btn-regis {
|
|
299
|
+
margin-left: 16px;
|
|
300
|
+
width: 120px;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.banner-content {
|
|
304
|
+
gap: 55px;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.cont-banner-content {
|
|
308
|
+
gap: 201px;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.expanded-btn {
|
|
312
|
+
width: 127px;
|
|
313
|
+
}
|
|
314
|
+
`,
|
|
315
|
+
TWStyles,
|
|
316
|
+
];
|
|
317
|
+
__decorate([
|
|
318
|
+
state()
|
|
319
|
+
], KompasMeteredWallRegister.prototype, "registerUrl", void 0);
|
|
320
|
+
__decorate([
|
|
321
|
+
state()
|
|
322
|
+
], KompasMeteredWallRegister.prototype, "isShowBanner", void 0);
|
|
323
|
+
__decorate([
|
|
324
|
+
state()
|
|
325
|
+
], KompasMeteredWallRegister.prototype, "isExpandBanner", void 0);
|
|
326
|
+
__decorate([
|
|
327
|
+
state()
|
|
328
|
+
], KompasMeteredWallRegister.prototype, "textTemplate", void 0);
|
|
329
|
+
__decorate([
|
|
330
|
+
property({ type: Number })
|
|
331
|
+
], KompasMeteredWallRegister.prototype, "countdownArticle", void 0);
|
|
332
|
+
__decorate([
|
|
333
|
+
property({ type: Boolean })
|
|
334
|
+
], KompasMeteredWallRegister.prototype, "defaultExpandBanner", void 0);
|
|
335
|
+
__decorate([
|
|
336
|
+
property({ type: Boolean })
|
|
337
|
+
], KompasMeteredWallRegister.prototype, "isDesktop", void 0);
|
|
338
|
+
__decorate([
|
|
339
|
+
property({ type: String })
|
|
340
|
+
], KompasMeteredWallRegister.prototype, "tracker_page_title", void 0);
|
|
341
|
+
__decorate([
|
|
342
|
+
property({ type: String })
|
|
343
|
+
], KompasMeteredWallRegister.prototype, "tracker_page_type", void 0);
|
|
344
|
+
__decorate([
|
|
345
|
+
property({ type: String })
|
|
346
|
+
], KompasMeteredWallRegister.prototype, "tracker_content_type", void 0);
|
|
347
|
+
__decorate([
|
|
348
|
+
property({ type: String })
|
|
349
|
+
], KompasMeteredWallRegister.prototype, "tracker_content_id", void 0);
|
|
350
|
+
__decorate([
|
|
351
|
+
property({ type: String })
|
|
352
|
+
], KompasMeteredWallRegister.prototype, "tracker_content_title", void 0);
|
|
353
|
+
__decorate([
|
|
354
|
+
property({ type: String })
|
|
355
|
+
], KompasMeteredWallRegister.prototype, "tracker_content_authors", void 0);
|
|
356
|
+
__decorate([
|
|
357
|
+
property({ type: String })
|
|
358
|
+
], KompasMeteredWallRegister.prototype, "tracker_content_editors", void 0);
|
|
359
|
+
__decorate([
|
|
360
|
+
property({ type: String })
|
|
361
|
+
], KompasMeteredWallRegister.prototype, "tracker_content_tags", void 0);
|
|
362
|
+
__decorate([
|
|
363
|
+
property({ type: String })
|
|
364
|
+
], KompasMeteredWallRegister.prototype, "tracker_content_published_date", void 0);
|
|
365
|
+
__decorate([
|
|
366
|
+
property({ type: String })
|
|
367
|
+
], KompasMeteredWallRegister.prototype, "tracker_content_categories", void 0);
|
|
368
|
+
__decorate([
|
|
369
|
+
property({ type: String })
|
|
370
|
+
], KompasMeteredWallRegister.prototype, "tracker_user_type", void 0);
|
|
371
|
+
__decorate([
|
|
372
|
+
property({ type: String })
|
|
373
|
+
], KompasMeteredWallRegister.prototype, "tracker_subscription_status", void 0);
|
|
374
|
+
__decorate([
|
|
375
|
+
property({ type: String })
|
|
376
|
+
], KompasMeteredWallRegister.prototype, "tracker_metered_wall_type", void 0);
|
|
377
|
+
__decorate([
|
|
378
|
+
property({ type: Number })
|
|
379
|
+
], KompasMeteredWallRegister.prototype, "tracker_metered_wall_balance", void 0);
|
|
380
|
+
__decorate([
|
|
381
|
+
property({ type: String })
|
|
382
|
+
], KompasMeteredWallRegister.prototype, "tracker_page_domain", void 0);
|
|
383
|
+
__decorate([
|
|
384
|
+
property({ type: String })
|
|
385
|
+
], KompasMeteredWallRegister.prototype, "next_param", void 0);
|
|
386
|
+
KompasMeteredWallRegister = __decorate([
|
|
387
|
+
customElement('kompasid-metered-wall-register')
|
|
388
|
+
], KompasMeteredWallRegister);
|
|
389
|
+
export { KompasMeteredWallRegister };
|
|
390
|
+
//# sourceMappingURL=KompasMeteredWallRegister.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KompasMeteredWallRegister.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { customElement, state, property } 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'\nimport { meteredRegisterContent } from './types.js'\n\n@customElement('kompasid-metered-wall-register')\nexport class KompasMeteredWallRegister 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 .btn-regis {\n margin-left: 16px;\n width: 120px;\n }\n\n .banner-content {\n gap: 55px;\n }\n\n .cont-banner-content {\n gap: 201px;\n }\n\n .expanded-btn {\n width: 127px;\n }\n `,\n TWStyles,\n ]\n\n /**\n * state\n */\n /**\n * state registerUrl untuk memberikan link kemana user akan dialihkan.\n */\n @state() registerUrl: string =\n 'https://account.kompas.id/register?loc=metered_register_wall'\n /**\n * state isShowBanner untuk memunculkan component.\n */\n @state() isShowBanner: boolean = true\n /**\n * state isExpandBanner untuk menentukan apakah component sedang dalam mode expand.\n */\n @state() isExpandBanner: boolean = true\n /**\n * state textTemplate untuk menyimpan template yang di berikan.\n */\n @state() private textTemplate: meteredRegisterContent = {\n default: { title: '', lastArticle: { title: '' } },\n expand: {\n title: '',\n description: '',\n lastArticle: { title: '', description: '' },\n },\n }\n /**\n * Props\n */\n /**\n * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop defaultExpandBanner untuk menentukan keadaan awal komponen apakah dalam mode expand atau tidak.\n * prop tracker_page_title untuk title of the page\n * prop tracker_page_type untuk type of the page\n * prop tracker_content_type untuk whether it's a free article or paid article (will only be sent if the user views article detail page)\n * prop tracker_content_id untuk the ID for the article (will only be sent if the user views article detail page)\n * prop tracker_content_title untuk the title of the article (will only be sent if the user views article detail page)\n * prop tracker_content_authors untuk name of the authors (will only be sent if the user views article detail page)\n * prop tracker_content_editors untuk name of the editors (will only be sent if the user views article detail page)\n * prop tracker_content_tags untuk tags inside the article (will only be sent if the user views article detail page)\n * prop tracker_content_published_date untuk the published date (will only be sent if the user views article detail page)\n * prop tracker_content_categories untuk The main category the content belongs to\n * prop tracker_user_type untuk type of user based on their subscription\n * prop tracker_subscription_status untuk status of their subscription\n * prop tracker_metered_wall_type untuk the type of Metered Wall\n * prop tracker_metered_wall_balance untuk the balance of their metered wall\n * prop tracker_page_domain untuk Page Domain\n * prop next_param untuk page Domain\n */\n\n @property({ type: Number }) countdownArticle = 0\n @property({ type: Boolean }) defaultExpandBanner = false\n @property({ type: Boolean }) isDesktop = false\n @property({ type: String }) tracker_page_title = ''\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_authors = ''\n @property({ type: String }) tracker_content_editors = ''\n @property({ type: String }) tracker_content_tags = ''\n @property({ type: String }) tracker_content_published_date = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) next_param =\n 'https://www.kompas.id/baca/opini/2023/12/05/masa-depan-wolbachia-sebagai-alternatif-pengendalian-dbd?open_from=Section_Opini'\n\n /**\n * menentukan template yang akan di render\n */\n private setTemplate(\n prop: string,\n mode: keyof meteredRegisterContent = 'default'\n ): string {\n let template = ''\n\n // dynamicMode dibuat agar typescript bisa akses data lastArticle\n const dynamicMode = this.textTemplate[mode]\n\n if ('lastArticle' in dynamicMode) {\n const lastArticleMode = dynamicMode as {\n lastArticle: { [key: string]: string }\n }\n template = lastArticleMode.lastArticle[prop] || ''\n } else {\n template = dynamicMode[prop] || ''\n }\n return template\n }\n\n private checkIsDesktop() {\n if (window.innerWidth >= 960) {\n this.isDesktop = true\n } else {\n this.isDesktop = false\n }\n }\n\n /**\n * Render Statement\n */\n\n private bannerTemplate() {\n return this.isExpandBanner\n ? this.expandedBannerContent()\n : this.defaultBannerContent()\n }\n\n private defaultBannerContent() {\n return html`\n <div>\n <div\n class=\"${this.isDesktop\n ? 'cont-banner-content '\n : null} flex flex-row justify-center\"\n >\n <div class=\"banner-content flex flex-row\">\n <div\n class=\"text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0\"\n .innerHTML=${this.setTemplate('title')}\n ></div>\n <div class=\"md:self-center btn-regis\">\n ${this.isDesktop\n ? html`<div class=\"ml-4\"></div>\n ${this.registerButtonTemplate()}`\n : nothing}\n </div>\n </div>\n <div class=\"\">\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n <div class=\"md:self-center mt-4\">\n ${!this.isDesktop ? html`${this.registerButtonTemplate()} ` : nothing}\n </div>\n </div>\n `\n }\n\n private expandedBannerContent() {\n return html`\n <div class=\"flex flex-col-reverse md:flex-row gap-4 md:gap-8\">\n <div\n class=\"flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 md:gap-2\"\n >\n <p\n class=\"text-lg md:text-2xl font-lora\"\n .innerHTML=${this.setTemplate('title', 'expand')}\n ></p>\n <p\n class=\"text-sm md:text-base\"\n .innerHTML=${this.setTemplate('description', 'expand')}\n ></p>\n <div class=\"${this.isDesktop ? null : 'expanded-btn'} md:self-start\">\n ${this.registerButtonTemplate()}\n </div>\n </div>\n <div class=\"flex justify-center\">\n <img\n alt=\"metered-wall-register\"\n src=\"https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png\"\n class=\"h-40 w-40 md:w-full md:h-full\"\n />\n </div>\n <button\n @click=\"${this.triggerExpandBanner}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div\n class=\"icon icon-blue-600 ${this.isExpandBanner\n ? 'chevron-down'\n : 'rotate-180'}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n }\n\n /**\n * template button register\n */\n private registerButtonTemplate() {\n return html`\n <button\n onClick=${this.redirectToRegister}\n class=\"bg-green-500 px-5 py-3 w-full lg:w[127px] rounded-md font-bold text-grey-100 text-sm md:text-base\"\n >\n Daftar Akun\n </button>\n `\n }\n\n /**\n * mengarahkan ke page register\n */\n private redirectToRegister = (): void => {\n this.pushToDataLayer('mrw_clicked')\n const newUrl = new URL(decodeURIComponent(this.registerUrl))\n if (this.next_param)\n newUrl.searchParams.append('next', decodeURIComponent(this.next_param))\n window.location.href = newUrl.toString()\n }\n\n /**\n * mengirim event ke datalayer\n */\n private pushToDataLayer(eventName: string) {\n window.dataLayer.push({\n event: eventName,\n page_title: this.tracker_page_title,\n page_type: this.tracker_page_type,\n content_type: this.tracker_content_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_authors: this.tracker_content_authors,\n content_editors: this.tracker_content_editors,\n content_tags: this.tracker_content_tags,\n content_published_date: this.tracker_content_published_date,\n content_categories: this.tracker_content_categories,\n user_type: this.tracker_user_type || 'G',\n subscription_status: this.tracker_subscription_status || '',\n metered_wall_type: this.tracker_metered_wall_type || 'MRW',\n metered_wall_balance: this.tracker_metered_wall_balance,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n })\n }\n\n /**\n * toggle isExpandBanner flag\n */\n private triggerExpandBanner() {\n this.isExpandBanner = !this.isExpandBanner\n return !this.isExpandBanner && this.pushToDataLayer('mrw_closed')\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n this.loadData()\n this.checkIsDesktop()\n }\n\n private async loadData() {\n const req = await fetch(\n `https://d3w4qaq4xm1ncv.cloudfront.net/assets/register_wall.json`\n )\n\n if (req.status !== 200) {\n throw new Error(`${req.status} Ada galat saat memproses permintaan.`)\n }\n\n this.textTemplate = await req.json()\n\n const getCountdown = this.countdownArticle\n\n if (!getCountdown) {\n this.isShowBanner = false\n } else {\n this.isExpandBanner = this.defaultExpandBanner\n }\n\n if (this.isShowBanner) {\n this.pushToDataLayer('mrw_viewed')\n }\n }\n\n render() {\n return this.isShowBanner\n ? html`\n <div class=\"sticky bottom-0 w-full h-full z-20\">\n <div class=\"w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4\">\n <div class=\"lg:max-w-7xl m-auto relative\">\n <div>${this.bannerTemplate()}</div>\n </div>\n </div>\n </div>\n `\n : null\n }\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-wall-register/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface meteredRegisterContent {\n expand: {\n lastArticle: {\n title: string\n description: string\n }\n title: string\n description: string\n }\n default: {\n lastArticle: {\n title: string\n }\n title: string\n }\n}\n"]}
|
|
@@ -66,7 +66,7 @@ export declare class KompasIdPaywallBody extends LitElement {
|
|
|
66
66
|
private kompasApigenHost;
|
|
67
67
|
private kompasApiWcmHost;
|
|
68
68
|
private kompasLoginHost;
|
|
69
|
-
private
|
|
69
|
+
private epaperHost;
|
|
70
70
|
private swgPublisherName;
|
|
71
71
|
private swgPublisherId;
|
|
72
72
|
private swgProductId;
|
|
@@ -84,7 +84,6 @@ export declare class KompasIdPaywallBody extends LitElement {
|
|
|
84
84
|
private redirectToCheckout;
|
|
85
85
|
private redirectToPrevUrl;
|
|
86
86
|
private redirectToSubscriber;
|
|
87
|
-
private redirectToLogin;
|
|
88
87
|
private redirectToHelpdesk;
|
|
89
88
|
private parsePrice;
|
|
90
89
|
private getRegisterToken;
|