@kompasid/lit-web-components 0.9.23 → 0.9.25
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 +3 -1
- package/dist/src/components/kompasid-paywall/KompasPaywall.d.ts +1 -0
- package/dist/src/components/kompasid-paywall/KompasPaywall.js +33 -6
- package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -1
- package/dist/src/components/kompasid-paywall/types.d.ts +7 -1
- package/dist/src/components/kompasid-paywall/types.js.map +1 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +2 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +33 -12
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
- package/dist/tailwind/tailwind.js +14 -46
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-paywall/KompasPaywall.ts +30 -6
- package/src/components/kompasid-paywall/types.ts +14 -1
- package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +29 -13
- package/src/components/kompasid-paywall-body/readme.md +2 -1
- package/tailwind/tailwind.css +17 -42
- package/tailwind/tailwind.ts +14 -46
package/demo/index.html
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
|
|
59
59
|
import '../dist/src/components/kompasid-grace-period/KompasGracePeriod.js'
|
|
60
60
|
|
|
61
|
-
const type = '
|
|
61
|
+
const type = 'proMiningArticle'
|
|
62
62
|
const theme = ''
|
|
63
63
|
const paywallLocation = 'paywall_location'
|
|
64
64
|
const paywallSubscriptionId = 'testId'
|
|
@@ -73,6 +73,7 @@
|
|
|
73
73
|
const trackerContentCategories = 'content_categories'
|
|
74
74
|
const trackerUserId = 'user_id'
|
|
75
75
|
const trackerUserType = 'user_type'
|
|
76
|
+
const trackerContentPublisher = 'publisher'
|
|
76
77
|
const trackerMeteredWallBalance = 0
|
|
77
78
|
const subscriptionStatus = 'subscription_status'
|
|
78
79
|
const trackerPageDomain = 'page_domain'
|
|
@@ -250,6 +251,7 @@
|
|
|
250
251
|
.subscriptionStatus=${subscriptionStatus}
|
|
251
252
|
.tracker_epaper_edition=${trackerEpaperEdition}
|
|
252
253
|
.metered_wall_balance=${meteredWallBalance}
|
|
254
|
+
.tracker_content_publisher=${trackerContentPublisher}
|
|
253
255
|
.isLogin=${isLogin}
|
|
254
256
|
.isWithHeader=${isWithHeader}
|
|
255
257
|
.swgEnable=${swgEnable}
|
|
@@ -63,6 +63,7 @@ export declare class KompasPaywall extends LitElement {
|
|
|
63
63
|
tracker_metered_wall_type: string;
|
|
64
64
|
tracker_metered_wall_balance: number;
|
|
65
65
|
tracker_epaper_edition: string;
|
|
66
|
+
tracker_content_publisher: string;
|
|
66
67
|
theme: string;
|
|
67
68
|
mockResult: PaywallProduct;
|
|
68
69
|
get darkUrl(): "" | "-dark";
|
|
@@ -66,6 +66,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
66
66
|
this.tracker_metered_wall_type = '';
|
|
67
67
|
this.tracker_metered_wall_balance = 0;
|
|
68
68
|
this.tracker_epaper_edition = '';
|
|
69
|
+
this.tracker_content_publisher = '';
|
|
69
70
|
this.theme = '';
|
|
70
71
|
this.mockResult = {
|
|
71
72
|
informations: {
|
|
@@ -83,6 +84,11 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
83
84
|
maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',
|
|
84
85
|
url: 'https://kompas.id/berlangganan',
|
|
85
86
|
},
|
|
87
|
+
cta: {
|
|
88
|
+
show: true,
|
|
89
|
+
text: 'Lihat Paket Lainnya',
|
|
90
|
+
url: 'https://www.kompas.id/berlangganan/v2',
|
|
91
|
+
},
|
|
86
92
|
},
|
|
87
93
|
packages: {
|
|
88
94
|
title: 'Sekali bayar, tanpa perpanjang otomatis',
|
|
@@ -222,6 +228,8 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
222
228
|
this.selectorTypePaywall = (type) => {
|
|
223
229
|
switch (type) {
|
|
224
230
|
case 'epaper':
|
|
231
|
+
case 'proMiningArticle':
|
|
232
|
+
case 'proMiningOutlook':
|
|
225
233
|
return this.renderEpaperPaywallSection();
|
|
226
234
|
case 'audio':
|
|
227
235
|
return this.renderAudioPaywallSection();
|
|
@@ -243,19 +251,30 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
243
251
|
try {
|
|
244
252
|
const response = await fetch('https://cdn-www.kompas.id/web-component/paywall.json');
|
|
245
253
|
const json = await response.json();
|
|
254
|
+
const listType = [
|
|
255
|
+
'reguler',
|
|
256
|
+
'audio',
|
|
257
|
+
'proMiningOutlook',
|
|
258
|
+
'proMiningArticle',
|
|
259
|
+
'epaper',
|
|
260
|
+
'custom',
|
|
261
|
+
];
|
|
262
|
+
const findTypeOnTheList = listType.includes(this.type);
|
|
263
|
+
const defaultType = findTypeOnTheList ? this.type : 'reguler';
|
|
246
264
|
this.paywallData = {
|
|
247
265
|
...this.mockResult,
|
|
248
266
|
informations: {
|
|
249
267
|
...this.mockResult.informations,
|
|
250
|
-
title: json[
|
|
251
|
-
description: json[
|
|
268
|
+
title: json[defaultType].head,
|
|
269
|
+
description: json[defaultType].content,
|
|
270
|
+
cta: json[defaultType].cta,
|
|
252
271
|
},
|
|
253
272
|
packages: {
|
|
254
273
|
...this.mockResult.packages,
|
|
255
|
-
memberships: json[
|
|
256
|
-
swgEnable: json[
|
|
257
|
-
freeTrial: json[
|
|
258
|
-
swgContent: json[
|
|
274
|
+
memberships: json[defaultType].memberships,
|
|
275
|
+
swgEnable: json[defaultType].swgEnable,
|
|
276
|
+
freeTrial: json[defaultType].freeTrial,
|
|
277
|
+
swgContent: json[defaultType].swgContent,
|
|
259
278
|
},
|
|
260
279
|
};
|
|
261
280
|
}
|
|
@@ -292,6 +311,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
292
311
|
tracker_metered_wall_type=${this.tracker_metered_wall_type}
|
|
293
312
|
tracker_epaper_edition=${this.tracker_epaper_edition}
|
|
294
313
|
tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
|
|
314
|
+
tracker_content_publisher=${this.tracker_content_publisher}
|
|
295
315
|
?swgEnable=${this.swgEnable}
|
|
296
316
|
tracker_content_type=${this.tracker_content_type}
|
|
297
317
|
?isLogin=${this.isLogin}
|
|
@@ -338,6 +358,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
338
358
|
tracker_metered_wall_balance=${this
|
|
339
359
|
.tracker_metered_wall_balance}
|
|
340
360
|
tracker_content_type=${this.tracker_content_type}
|
|
361
|
+
tracker_content_publisher=${this.tracker_content_publisher}
|
|
341
362
|
?swgEnable=${this.swgEnable}
|
|
342
363
|
?isLogin=${this.isLogin}
|
|
343
364
|
type=${this.type}
|
|
@@ -378,6 +399,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
378
399
|
tracker_page_domain=${this.tracker_page_domain}
|
|
379
400
|
tracker_metered_wall_type=${this.tracker_metered_wall_type}
|
|
380
401
|
tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
|
|
402
|
+
tracker_content_publisher=${this.tracker_content_publisher}
|
|
381
403
|
?swgEnable=${this.swgEnable}
|
|
382
404
|
?isLogin=${this.isLogin}
|
|
383
405
|
type=${this.type}
|
|
@@ -427,6 +449,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
427
449
|
tracker_metered_wall_balance=${this
|
|
428
450
|
.tracker_metered_wall_balance}
|
|
429
451
|
tracker_content_type=${this.tracker_content_type}
|
|
452
|
+
tracker_content_publisher=${this.tracker_content_publisher}
|
|
430
453
|
?swgEnable=${this.swgEnable}
|
|
431
454
|
?isLogin=${this.isLogin}
|
|
432
455
|
type=${this.type}
|
|
@@ -468,6 +491,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
|
|
|
468
491
|
tracker_page_domain=${this.tracker_page_domain}
|
|
469
492
|
tracker_metered_wall_type=${this.tracker_metered_wall_type}
|
|
470
493
|
tracker_metered_wall_balance=${this.tracker_metered_wall_balance}
|
|
494
|
+
tracker_content_publisher=${this.tracker_content_publisher}
|
|
471
495
|
?swgEnable=${this.swgEnable}
|
|
472
496
|
?isLogin=${this.isLogin}
|
|
473
497
|
type=${this.type}
|
|
@@ -607,6 +631,9 @@ __decorate([
|
|
|
607
631
|
__decorate([
|
|
608
632
|
property({ type: String })
|
|
609
633
|
], KompasPaywall.prototype, "tracker_epaper_edition", void 0);
|
|
634
|
+
__decorate([
|
|
635
|
+
property({ type: String })
|
|
636
|
+
], KompasPaywall.prototype, "tracker_content_publisher", void 0);
|
|
610
637
|
__decorate([
|
|
611
638
|
property({ type: String })
|
|
612
639
|
], KompasPaywall.prototype, "theme", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct, PaywallType } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .transparent-linear {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 100%, 0)),\n to(#fff)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n }\n\n .transparent-linear-dark {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 18%, 0)),\n to(#121212)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property countdownArticle untuk menghandle count artikel\n * property type untuk menghandle tipe epaper\n * property isWithHeader untuk menghandle paywall information header\n * property textHeader digunakan sebagai text pada paywall information header\n * property paywallData untuk menghandle data paywall\n * property userGuid untuk menghandle user Guid\n * property subscriptionStatus untuk menghandle status subscription user\n * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\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 page_type = Type of the page\n * property content_id = ID of article (slug)\n * property content_type = Whether it's free article or paid article\n * property content_title = The title of article\n * property tracker_content_categories = The category of the content\n * property user_type = Type of user based on their subscription\n * property subscription_status = Status of their subscription\n * property page_domain = Page Domain\n * property metered_wall_type = The type of Metered Wall\n * property metered_wall_balance = The balance of their metered wall\n * property epaper_edition = The edition of epaper viewed by user\n * property theme = The theme of the paywall component\n */\n\n @state() private paywallData: PaywallProduct = {} as PaywallProduct\n @state() private isOpen: Boolean = true\n @state() private isLoading: Boolean = true\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) type: PaywallType = 'reguler'\n @property({ type: Boolean }) isWithHeader = false\n @property({ type: String }) textHeader = ''\n @property({ type: String }) userGuid = ''\n @property({ type: String }) subscriptionStatus = ''\n @property({ type: Boolean }) swgEnable = 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 @property({ type: String }) theme = ''\n\n mockResult: PaywallProduct = {\n informations: {\n title: '',\n description: [],\n register: {\n img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n label: 'Daftar Sekarang ',\n },\n meterred: {\n maxQuota: 5,\n label: 'Langganan',\n maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n url: 'https://kompas.id/berlangganan',\n },\n },\n packages: {\n title: 'Sekali bayar, tanpa perpanjang otomatis',\n memberships: [],\n swgEnable: false,\n freeTrial: {\n packageText: 'untuk 3 hari pertama',\n desktopText:\n 'Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR dengan ponsel atau tablet untuk mengunduh aplikasi.',\n mobileText:\n 'Dapatkan akses gratis selama 3 hari ke konten dan fitur premium Kompas.id di aplikasi.',\n },\n swgContent: {\n introductory: {\n price: 'Rp. 10.000',\n description: 'untuk 1 bulan pertama',\n duration: '',\n },\n default: {\n price: '',\n description: 'Berlangganan lebih mudah dengan Google',\n duration: '',\n },\n },\n },\n payment: {\n desktop: [\n {\n name: 'gopay',\n link: `https://cdn-www.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://cdn-www.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://cdn-www.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://cdn-www.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://cdn-www.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n {\n name: 'dana',\n link: `https://cdn-www.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://cdn-www.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://cdn-www.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://cdn-www.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n ],\n mobile: [\n {\n name: 'gopay',\n link: `https://cdn-www.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://cdn-www.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://cdn-www.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://cdn-www.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n ],\n ekstension: [\n {\n name: 'dana',\n link: `https://cdn-www.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://cdn-www.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://cdn-www.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://cdn-www.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://cdn-www.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n ],\n },\n }\n\n get darkUrl() {\n return this.theme === 'dark' ? '-dark' : ''\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.getPaywallData()\n }\n\n async getPaywallData() {\n try {\n const response = await fetch(\n 'https://cdn-www.kompas.id/web-component/paywall.json'\n )\n const json = await response.json()\n this.paywallData = {\n ...this.mockResult,\n informations: {\n ...this.mockResult.informations,\n title: json[this.type].head,\n description: json[this.type].content,\n },\n packages: {\n ...this.mockResult.packages,\n memberships: json[this.type].memberships,\n swgEnable: json[this.type].swgEnable,\n freeTrial: json[this.type].freeTrial,\n swgContent: json[this.type].swgContent,\n },\n }\n } catch (error) {\n throw Error('Failed to get paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n private transitionBox() {\n return html`\n <div\n class=\"h-20 ${this.theme === 'dark'\n ? 'transparent-linear-dark'\n : 'transparent-linear'} -mt-24 z-0 w-full\"\n ></div>\n `\n }\n\n private renderEpaperPaywallSection() {\n return html`<kompasid-paywall-body\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_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_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ?swgEnable=${this.swgEnable}\n tracker_content_type=${this.tracker_content_type}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>`\n }\n\n private renderRegularPaywallSection() {\n const defaultHeaderText: string =\n this.paywallData.informations.meterred.maxQuotaMessage\n if (this.isWithHeader) {\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-information-header\n text=${this.textHeader || defaultHeaderText}\n theme=${this.theme}\n ></kompasid-paywall-information-header>\n <kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .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_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_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n tracker_content_type=${this.tracker_content_type}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-body\n tracker_content_type=${this.tracker_content_type}\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_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_epaper_edition=${this.tracker_epaper_edition}\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 ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n\n private renderAudioPaywallSection() {\n const defaultHeaderText: string =\n this.paywallData.informations.meterred.maxQuotaMessage\n if (this.isWithHeader) {\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-information-header\n text=${this.textHeader || defaultHeaderText}\n theme=${this.theme}\n ></kompasid-paywall-information-header>\n <kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .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_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_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n tracker_content_type=${this.tracker_content_type}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n .togglePaywall=${() => this.togglePaywall()}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-body\n tracker_content_type=${this.tracker_content_type}\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_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_epaper_edition=${this.tracker_epaper_edition}\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 ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n .togglePaywall=${() => this.togglePaywall()}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n\n private selectorTypePaywall = (type: PaywallType) => {\n switch (type) {\n case 'epaper':\n return this.renderEpaperPaywallSection()\n case 'audio':\n return this.renderAudioPaywallSection()\n case 'reguler':\n return this.renderRegularPaywallSection()\n default:\n return this.renderRegularPaywallSection()\n }\n }\n\n private togglePaywall() {\n this.isOpen = !this.isOpen\n }\n\n render() {\n return !this.isLoading && this.isOpen\n ? html`\n <div class=\"relative w-full\">\n ${this.selectorTypePaywall(this.type)}\n </div>\n `\n : nothing\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct, PaywallType } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .transparent-linear {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 100%, 0)),\n to(#fff)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n }\n\n .transparent-linear-dark {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 18%, 0)),\n to(#121212)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property countdownArticle untuk menghandle count artikel\n * property type untuk menghandle tipe epaper\n * property isWithHeader untuk menghandle paywall information header\n * property textHeader digunakan sebagai text pada paywall information header\n * property paywallData untuk menghandle data paywall\n * property userGuid untuk menghandle user Guid\n * property subscriptionStatus untuk menghandle status subscription user\n * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\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 page_type = Type of the page\n * property content_id = ID of article (slug)\n * property content_type = Whether it's free article or paid article\n * property content_title = The title of article\n * property tracker_content_categories = The category of the content\n * property user_type = Type of user based on their subscription\n * property subscription_status = Status of their subscription\n * property page_domain = Page Domain\n * property metered_wall_type = The type of Metered Wall\n * property metered_wall_balance = The balance of their metered wall\n * property epaper_edition = The edition of epaper viewed by user\n * property theme = The theme of the paywall component\n */\n\n @state() private paywallData: PaywallProduct = {} as PaywallProduct\n @state() private isOpen: Boolean = true\n @state() private isLoading: Boolean = true\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) type: PaywallType = 'reguler'\n @property({ type: Boolean }) isWithHeader = false\n @property({ type: String }) textHeader = ''\n @property({ type: String }) userGuid = ''\n @property({ type: String }) subscriptionStatus = ''\n @property({ type: Boolean }) swgEnable = 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 @property({ type: String }) tracker_content_publisher = ''\n @property({ type: String }) theme = ''\n\n mockResult: PaywallProduct = {\n informations: {\n title: '',\n description: [],\n register: {\n img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n label: 'Daftar Sekarang ',\n },\n meterred: {\n maxQuota: 5,\n label: 'Langganan',\n maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n url: 'https://kompas.id/berlangganan',\n },\n cta: {\n show: true,\n text: 'Lihat Paket Lainnya',\n url: 'https://www.kompas.id/berlangganan/v2',\n },\n },\n packages: {\n title: 'Sekali bayar, tanpa perpanjang otomatis',\n memberships: [],\n swgEnable: false,\n freeTrial: {\n packageText: 'untuk 3 hari pertama',\n desktopText:\n 'Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR dengan ponsel atau tablet untuk mengunduh aplikasi.',\n mobileText:\n 'Dapatkan akses gratis selama 3 hari ke konten dan fitur premium Kompas.id di aplikasi.',\n },\n swgContent: {\n introductory: {\n price: 'Rp. 10.000',\n description: 'untuk 1 bulan pertama',\n duration: '',\n },\n default: {\n price: '',\n description: 'Berlangganan lebih mudah dengan Google',\n duration: '',\n },\n },\n },\n payment: {\n desktop: [\n {\n name: 'gopay',\n link: `https://cdn-www.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://cdn-www.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://cdn-www.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://cdn-www.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://cdn-www.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n {\n name: 'dana',\n link: `https://cdn-www.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://cdn-www.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://cdn-www.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://cdn-www.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n ],\n mobile: [\n {\n name: 'gopay',\n link: `https://cdn-www.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://cdn-www.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://cdn-www.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://cdn-www.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n ],\n ekstension: [\n {\n name: 'dana',\n link: `https://cdn-www.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://cdn-www.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://cdn-www.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://cdn-www.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://cdn-www.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://cdn-www.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n ],\n },\n }\n\n get darkUrl() {\n return this.theme === 'dark' ? '-dark' : ''\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.getPaywallData()\n }\n\n async getPaywallData() {\n try {\n const response = await fetch(\n 'https://cdn-www.kompas.id/web-component/paywall.json'\n )\n const json = await response.json()\n const listType = [\n 'reguler',\n 'audio',\n 'proMiningOutlook',\n 'proMiningArticle',\n 'epaper',\n 'custom',\n ]\n const findTypeOnTheList = listType.includes(this.type)\n const defaultType = findTypeOnTheList ? this.type : 'reguler'\n this.paywallData = {\n ...this.mockResult,\n informations: {\n ...this.mockResult.informations,\n title: json[defaultType].head,\n description: json[defaultType].content,\n cta: json[defaultType].cta,\n },\n packages: {\n ...this.mockResult.packages,\n memberships: json[defaultType].memberships,\n swgEnable: json[defaultType].swgEnable,\n freeTrial: json[defaultType].freeTrial,\n swgContent: json[defaultType].swgContent,\n },\n }\n } catch (error) {\n throw Error('Failed to get paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n private transitionBox() {\n return html`\n <div\n class=\"h-20 ${this.theme === 'dark'\n ? 'transparent-linear-dark'\n : 'transparent-linear'} -mt-24 z-0 w-full\"\n ></div>\n `\n }\n\n private renderEpaperPaywallSection() {\n return html`<kompasid-paywall-body\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_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_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n tracker_content_publisher=${this.tracker_content_publisher}\n ?swgEnable=${this.swgEnable}\n tracker_content_type=${this.tracker_content_type}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>`\n }\n\n private renderRegularPaywallSection() {\n const defaultHeaderText: string =\n this.paywallData.informations.meterred.maxQuotaMessage\n if (this.isWithHeader) {\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-information-header\n text=${this.textHeader || defaultHeaderText}\n theme=${this.theme}\n ></kompasid-paywall-information-header>\n <kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .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_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_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n tracker_content_type=${this.tracker_content_type}\n tracker_content_publisher=${this.tracker_content_publisher}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-body\n tracker_content_type=${this.tracker_content_type}\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_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_epaper_edition=${this.tracker_epaper_edition}\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 tracker_content_publisher=${this.tracker_content_publisher}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n\n private renderAudioPaywallSection() {\n const defaultHeaderText: string =\n this.paywallData.informations.meterred.maxQuotaMessage\n if (this.isWithHeader) {\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-information-header\n text=${this.textHeader || defaultHeaderText}\n theme=${this.theme}\n ></kompasid-paywall-information-header>\n <kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .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_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_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n tracker_content_type=${this.tracker_content_type}\n tracker_content_publisher=${this.tracker_content_publisher}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n .togglePaywall=${() => this.togglePaywall()}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-body\n tracker_content_type=${this.tracker_content_type}\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_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_epaper_edition=${this.tracker_epaper_edition}\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 tracker_content_publisher=${this.tracker_content_publisher}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n .togglePaywall=${() => this.togglePaywall()}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n\n private selectorTypePaywall = (type: PaywallType) => {\n switch (type) {\n case 'epaper':\n case 'proMiningArticle':\n case 'proMiningOutlook':\n return this.renderEpaperPaywallSection()\n case 'audio':\n return this.renderAudioPaywallSection()\n case 'reguler':\n return this.renderRegularPaywallSection()\n default:\n return this.renderRegularPaywallSection()\n }\n }\n\n private togglePaywall() {\n this.isOpen = !this.isOpen\n }\n\n render() {\n return !this.isLoading && this.isOpen\n ? html`\n <div class=\"relative w-full\">\n ${this.selectorTypePaywall(this.type)}\n </div>\n `\n : nothing\n }\n}\n"]}
|
|
@@ -58,12 +58,18 @@ export interface Packages {
|
|
|
58
58
|
freeTrial: FreeTrial;
|
|
59
59
|
swgContent: SwgContent;
|
|
60
60
|
}
|
|
61
|
+
export interface ctaPaywall {
|
|
62
|
+
show: boolean;
|
|
63
|
+
text: string;
|
|
64
|
+
url: string;
|
|
65
|
+
}
|
|
61
66
|
export interface PaywallProduct {
|
|
62
67
|
informations: {
|
|
63
68
|
title: string;
|
|
64
69
|
description: Array<string>;
|
|
65
70
|
register: Registration;
|
|
66
71
|
meterred: Metered;
|
|
72
|
+
cta: ctaPaywall;
|
|
67
73
|
};
|
|
68
74
|
packages: Packages;
|
|
69
75
|
payment: {
|
|
@@ -72,4 +78,4 @@ export interface PaywallProduct {
|
|
|
72
78
|
ekstension: Array<PaymentImage>;
|
|
73
79
|
};
|
|
74
80
|
}
|
|
75
|
-
export type PaywallType = 'epaper' | 'reguler' | 'audio' | 'custom';
|
|
81
|
+
export type PaywallType = 'proMiningArticle' | 'proMiningOutlook' | 'epaper' | 'reguler' | 'audio' | 'custom';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Product {\n title: string\n percentage: number\n price: number\n discountPrice: number\n savingPrice: number\n periode: string\n isHighlight: boolean\n url: string\n package: string\n subscriptionId: string\n position: number\n}\nexport interface Metered {\n maxQuota: number\n label: string\n maxQuotaMessage: string\n url: string\n}\nexport interface PaymentImage {\n name: string\n link: string\n}\nexport interface Registration {\n img: string\n title: string\n subtitle: string\n label: string\n}\nexport interface Informations {\n title: string\n description: Array<string>\n register: {\n img: string\n title: string\n subtitle: string\n label: string\n }\n}\nexport interface FreeTrial {\n packageText: string\n desktopText: string\n mobileText: string\n}\nexport interface SwgContentData {\n duration: string\n price: string\n description: string\n}\n\nexport interface SwgContent {\n introductory: SwgContentData\n default: SwgContentData\n}\n\nexport interface Packages {\n title: string\n memberships: Array<Product>\n swgEnable: boolean\n freeTrial: FreeTrial\n swgContent: SwgContent\n}\n\nexport interface PaywallProduct {\n informations: {\n title: string\n description: Array<string>\n register: Registration\n meterred: Metered\n }\n packages: Packages\n payment: {\n desktop: Array<PaymentImage>\n mobile: Array<PaymentImage>\n ekstension: Array<PaymentImage>\n }\n}\nexport type PaywallType
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Product {\n title: string\n percentage: number\n price: number\n discountPrice: number\n savingPrice: number\n periode: string\n isHighlight: boolean\n url: string\n package: string\n subscriptionId: string\n position: number\n}\nexport interface Metered {\n maxQuota: number\n label: string\n maxQuotaMessage: string\n url: string\n}\nexport interface PaymentImage {\n name: string\n link: string\n}\nexport interface Registration {\n img: string\n title: string\n subtitle: string\n label: string\n}\nexport interface Informations {\n title: string\n description: Array<string>\n register: {\n img: string\n title: string\n subtitle: string\n label: string\n }\n}\nexport interface FreeTrial {\n packageText: string\n desktopText: string\n mobileText: string\n}\nexport interface SwgContentData {\n duration: string\n price: string\n description: string\n}\n\nexport interface SwgContent {\n introductory: SwgContentData\n default: SwgContentData\n}\n\nexport interface Packages {\n title: string\n memberships: Array<Product>\n swgEnable: boolean\n freeTrial: FreeTrial\n swgContent: SwgContent\n}\n\nexport interface ctaPaywall {\n show: boolean\n text: string\n url: string\n}\n\nexport interface PaywallProduct {\n informations: {\n title: string\n description: Array<string>\n register: Registration\n meterred: Metered\n cta: ctaPaywall\n }\n packages: Packages\n payment: {\n desktop: Array<PaymentImage>\n mobile: Array<PaymentImage>\n ekstension: Array<PaymentImage>\n }\n}\nexport type PaywallType =\n | 'proMiningArticle'\n | 'proMiningOutlook'\n | 'epaper'\n | 'reguler'\n | 'audio'\n | 'custom'\n"]}
|
|
@@ -56,6 +56,7 @@ export declare class KompasIdPaywallBody extends LitElement {
|
|
|
56
56
|
tracker_metered_wall_type: string;
|
|
57
57
|
tracker_metered_wall_balance: number;
|
|
58
58
|
tracker_epaper_edition: string;
|
|
59
|
+
tracker_content_publisher: string;
|
|
59
60
|
theme: string;
|
|
60
61
|
togglePaywall: () => void;
|
|
61
62
|
/**
|
|
@@ -124,7 +125,7 @@ export declare class KompasIdPaywallBody extends LitElement {
|
|
|
124
125
|
*/
|
|
125
126
|
private headerSection;
|
|
126
127
|
private descriptionSection;
|
|
127
|
-
private
|
|
128
|
+
private ctaPackages;
|
|
128
129
|
private epaperRegistrationSection;
|
|
129
130
|
private regulerRegistrationSection;
|
|
130
131
|
private registrationSection;
|
|
@@ -52,9 +52,15 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
52
52
|
window.history.back();
|
|
53
53
|
}
|
|
54
54
|
redirectToSubscriber() {
|
|
55
|
+
var _a, _b, _c, _d;
|
|
55
56
|
this.sendDataLayer();
|
|
57
|
+
const getCtaUrl = ((_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.cta)
|
|
58
|
+
? (_d = (_c = this.paywallData) === null || _c === void 0 ? void 0 : _c.informations) === null || _d === void 0 ? void 0 : _d.cta.url
|
|
59
|
+
: '';
|
|
60
|
+
// TODO: Hendy
|
|
61
|
+
// Bisa jadi ini nanti open from nya beda, untuk sekarang biarkan dulu, note 25 08 2025 (tolong tanya ke PM bersangkutan)
|
|
56
62
|
const openFrom = `${this.type === 'epaper' ? 'ePaper' : 'Hard'}_Paywall`;
|
|
57
|
-
window.open(
|
|
63
|
+
window.open(`${getCtaUrl}?open_from=${openFrom}`);
|
|
58
64
|
}
|
|
59
65
|
redirectToHelpdesk() {
|
|
60
66
|
this.sendDataLayeronHelpDesk();
|
|
@@ -276,6 +282,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
276
282
|
this.tracker_metered_wall_type = '';
|
|
277
283
|
this.tracker_metered_wall_balance = 0;
|
|
278
284
|
this.tracker_epaper_edition = '';
|
|
285
|
+
this.tracker_content_publisher = '';
|
|
279
286
|
this.theme = '';
|
|
280
287
|
this.togglePaywall = () => { };
|
|
281
288
|
/**
|
|
@@ -364,7 +371,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
364
371
|
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
365
372
|
metered_wall_type: this.tracker_metered_wall_type || 'HP',
|
|
366
373
|
metered_wall_balance: this.tracker_metered_wall_balance,
|
|
367
|
-
...(this.type === 'epaper'
|
|
374
|
+
...(this.type === 'epaper' || this.type === 'proMiningOutlook'
|
|
368
375
|
? { epaper_edition: this.tracker_epaper_edition }
|
|
369
376
|
: {
|
|
370
377
|
page_type: this.tracker_page_type,
|
|
@@ -372,6 +379,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
372
379
|
content_title: this.tracker_content_title,
|
|
373
380
|
content_categories: this.tracker_content_categories,
|
|
374
381
|
content_type: this.tracker_content_type,
|
|
382
|
+
content_publisher: this.tracker_content_publisher,
|
|
375
383
|
}),
|
|
376
384
|
})),
|
|
377
385
|
};
|
|
@@ -422,6 +430,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
422
430
|
gtmParams.content_id = this.tracker_content_id;
|
|
423
431
|
gtmParams.content_categories = this.tracker_content_categories;
|
|
424
432
|
gtmParams.content_type = this.tracker_content_type;
|
|
433
|
+
gtmParams.content_publisher = this.tracker_content_publisher;
|
|
425
434
|
gtmParams.page_type = this.tracker_page_type;
|
|
426
435
|
}
|
|
427
436
|
else {
|
|
@@ -534,17 +543,26 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
534
543
|
</div>
|
|
535
544
|
</div>`;
|
|
536
545
|
}
|
|
537
|
-
|
|
546
|
+
ctaPackages() {
|
|
547
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
538
548
|
const marginTopClass = this.type === 'audio' ? 'mt-4 md:mt-2' : 'mt-4';
|
|
539
549
|
const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600';
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
550
|
+
const getCtaText = ((_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.cta)
|
|
551
|
+
? (_d = (_c = this.paywallData) === null || _c === void 0 ? void 0 : _c.informations) === null || _d === void 0 ? void 0 : _d.cta.text
|
|
552
|
+
: '';
|
|
553
|
+
const showCta = ((_f = (_e = this.paywallData) === null || _e === void 0 ? void 0 : _e.informations) === null || _f === void 0 ? void 0 : _f.cta)
|
|
554
|
+
? (_h = (_g = this.paywallData) === null || _g === void 0 ? void 0 : _g.informations) === null || _h === void 0 ? void 0 : _h.cta.show
|
|
555
|
+
: false;
|
|
556
|
+
return showCta
|
|
557
|
+
? html ` <div class="flex justify-center ${marginTopClass}">
|
|
558
|
+
<button
|
|
559
|
+
@click=${this.otherPackagesClicked}
|
|
560
|
+
class="text-sm md:text-base font-bold underline ${textColorClass}"
|
|
561
|
+
>
|
|
562
|
+
${getCtaText}
|
|
563
|
+
</button>
|
|
564
|
+
</div>`
|
|
565
|
+
: nothing;
|
|
548
566
|
}
|
|
549
567
|
epaperRegistrationSection() {
|
|
550
568
|
const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600';
|
|
@@ -1016,7 +1034,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
1016
1034
|
${this.headerSection(this.type, (_c = (_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '')}
|
|
1017
1035
|
${this.descriptionSection((_f = (_e = (_d = this.paywallData) === null || _d === void 0 ? void 0 : _d.informations) === null || _e === void 0 ? void 0 : _e.description) !== null && _f !== void 0 ? _f : [])}
|
|
1018
1036
|
${this.packagesSection((_h = (_g = this.paywallData) === null || _g === void 0 ? void 0 : _g.packages) !== null && _h !== void 0 ? _h : {})}
|
|
1019
|
-
${this.
|
|
1037
|
+
${this.ctaPackages()}
|
|
1020
1038
|
${!isLogin
|
|
1021
1039
|
? html `
|
|
1022
1040
|
<div
|
|
@@ -1128,6 +1146,9 @@ __decorate([
|
|
|
1128
1146
|
__decorate([
|
|
1129
1147
|
property({ type: String })
|
|
1130
1148
|
], KompasIdPaywallBody.prototype, "tracker_epaper_edition", void 0);
|
|
1149
|
+
__decorate([
|
|
1150
|
+
property({ type: String })
|
|
1151
|
+
], KompasIdPaywallBody.prototype, "tracker_content_publisher", void 0);
|
|
1131
1152
|
__decorate([
|
|
1132
1153
|
property({ type: String })
|
|
1133
1154
|
], KompasIdPaywallBody.prototype, "theme", void 0);
|