@kompasid/lit-web-components 0.9.34 → 0.9.36
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/header.html +7 -8
- package/demo/index.html +2 -2
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js +4 -1
- package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map +1 -1
- package/dist/src/components/kompasid-header-account/types.d.ts +0 -2
- package/dist/src/components/kompasid-header-account/types.js.map +1 -1
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js +8 -8
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map +1 -1
- package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js +1 -1
- package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js.map +1 -1
- package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.d.ts +0 -2
- package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js +14 -16
- package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js.map +1 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +2 -0
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
- package/dist/tailwind/tailwind.js +16 -8
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-grace-period/KompasGracePeriod.ts +3 -1
- package/src/components/kompasid-header-account/readme.md +10 -13
- package/src/components/kompasid-header-account/types.ts +2 -2
- package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts +12 -9
- package/src/components/kompasid-header-notification/KompasHeaderNotification.ts +1 -1
- package/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.ts +14 -13
- package/src/components/kompasid-metered-paywall-personalize/readme.md +2 -3
- package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +2 -0
- package/tailwind/tailwind.css +16 -8
- package/tailwind/tailwind.ts +16 -8
package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js
CHANGED
|
@@ -6,6 +6,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
|
6
6
|
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
7
7
|
import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
|
|
8
8
|
import { formatRupiah } from '../../utils/formatRupiah.js';
|
|
9
|
+
import { addGoogleFonts } from '../../utils/googleFont.js';
|
|
9
10
|
let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize extends LitElement {
|
|
10
11
|
constructor() {
|
|
11
12
|
super(...arguments);
|
|
@@ -15,7 +16,6 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
15
16
|
* Props
|
|
16
17
|
*/
|
|
17
18
|
/**
|
|
18
|
-
* prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
|
|
19
19
|
* prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
|
|
20
20
|
* prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
|
|
21
21
|
* prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
|
|
@@ -37,7 +37,6 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
37
37
|
* prop tracker_epaper_edition = The edition of epaper viewed by user
|
|
38
38
|
* prop tracker_metered_wall_balance = The balance of their metered wall
|
|
39
39
|
*/
|
|
40
|
-
this.countdownArticle = 0;
|
|
41
40
|
this.segment = '';
|
|
42
41
|
this.offering = '';
|
|
43
42
|
this.user_name = '';
|
|
@@ -63,6 +62,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
63
62
|
super.connectedCallback();
|
|
64
63
|
await this.getMeteredPaywallData();
|
|
65
64
|
this.dataLayeronMeteredPaywall();
|
|
65
|
+
addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed']);
|
|
66
66
|
}
|
|
67
67
|
async getMeteredPaywallData() {
|
|
68
68
|
try {
|
|
@@ -112,7 +112,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
112
112
|
subscription_status: this.tracker_subscription_status,
|
|
113
113
|
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
114
114
|
metered_wall_type: this.tracker_metered_wall_type || 'MP',
|
|
115
|
-
metered_wall_balance: this.
|
|
115
|
+
metered_wall_balance: this.tracker_metered_wall_balance,
|
|
116
116
|
paywall_segment: this.segment || '',
|
|
117
117
|
checkout_url: (_a = this.packageData) === null || _a === void 0 ? void 0 : _a.offering[this.offering ? this.offering : 'Q1'].checkout_url,
|
|
118
118
|
});
|
|
@@ -135,7 +135,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
135
135
|
subscription_status: this.tracker_subscription_status,
|
|
136
136
|
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
137
137
|
metered_wall_type: this.tracker_metered_wall_type || 'MP',
|
|
138
|
-
metered_wall_balance: this.
|
|
138
|
+
metered_wall_balance: this.tracker_metered_wall_balance,
|
|
139
139
|
paywall_segment: this.segment || '',
|
|
140
140
|
checkout_url: (_a = this.packageData) === null || _a === void 0 ? void 0 : _a.offering[this.offering ? this.offering : 'Q1'].checkout_url,
|
|
141
141
|
});
|
|
@@ -187,10 +187,10 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
187
187
|
<image
|
|
188
188
|
src="${(_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.image}"
|
|
189
189
|
alt="content"
|
|
190
|
-
class="w-
|
|
190
|
+
class="w-auto max-h-40"
|
|
191
191
|
/>
|
|
192
192
|
<div
|
|
193
|
-
class="font-lora font-bold text-grey-600 lg:text-2xl text-center"
|
|
193
|
+
class="font-lora font-bold text-grey-600 lg:text-2xl text-center pt-6"
|
|
194
194
|
>
|
|
195
195
|
<div>Halo ${this.user_name},</div>
|
|
196
196
|
<div>${(_d = this.packageData) === null || _d === void 0 ? void 0 : _d.paywall.messageTitleExpand}</div>
|
|
@@ -230,7 +230,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
230
230
|
: html `
|
|
231
231
|
<div class="sticky bottom-0 w-full h-full">
|
|
232
232
|
<div
|
|
233
|
-
class="flex flex-col lg:flex-row w-full bg-blue-100 py-
|
|
233
|
+
class="flex flex-col lg:flex-row w-full bg-blue-100 py-3 justify-center gap-4 px-4 lg:px-0 bottom-0"
|
|
234
234
|
>
|
|
235
235
|
<div
|
|
236
236
|
class="text-grey-600 text-base self-center text-left message-formatter font-bold"
|
|
@@ -297,7 +297,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
297
297
|
: nothing}
|
|
298
298
|
</div>
|
|
299
299
|
<div
|
|
300
|
-
class="text-grey-600 font-sans text-
|
|
300
|
+
class="text-grey-600 font-sans text-base self-center text-left message-formatter mb-4 leading-[150%]"
|
|
301
301
|
>
|
|
302
302
|
${unsafeHTML(descriptionExpand)}
|
|
303
303
|
</div>
|
|
@@ -405,7 +405,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
405
405
|
>
|
|
406
406
|
<div class="text-grey-600 font-sans order-2">
|
|
407
407
|
<div
|
|
408
|
-
class="text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-
|
|
408
|
+
class="text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-start lg:text-start"
|
|
409
409
|
>
|
|
410
410
|
<span
|
|
411
411
|
>Halo
|
|
@@ -535,14 +535,14 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
535
535
|
>
|
|
536
536
|
<div class="text-grey-600 font-lora message-formatter order-2">
|
|
537
537
|
<div
|
|
538
|
-
class="text-xl lg:text-2xl font-bold mb-
|
|
538
|
+
class="text-xl lg:text-2xl font-bold mb-3 text-start lg:text-start"
|
|
539
539
|
>
|
|
540
540
|
${(_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.messageTitleExpand}${this
|
|
541
541
|
.user_name
|
|
542
542
|
? `, ${this.user_name}!`
|
|
543
543
|
: ''}
|
|
544
544
|
</div>
|
|
545
|
-
<div class="mb-
|
|
545
|
+
<div class="mb-3 font-sans">
|
|
546
546
|
${unsafeHTML(descriptionExpand)}
|
|
547
547
|
</div>
|
|
548
548
|
<div class="flex flex-col font-sans gap-3 mb-4">
|
|
@@ -569,12 +569,12 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
569
569
|
</div>
|
|
570
570
|
</div>
|
|
571
571
|
<div
|
|
572
|
-
class="flex self-center
|
|
572
|
+
class="flex self-center mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
|
|
573
573
|
>
|
|
574
574
|
<image
|
|
575
575
|
src="${(_g = this.packageData) === null || _g === void 0 ? void 0 : _g.paywall.image}"
|
|
576
576
|
alt="content"
|
|
577
|
-
class="w-
|
|
577
|
+
class="w-full lg:w-[202px] max-h-[116px] lg:max-h-none"
|
|
578
578
|
/>
|
|
579
579
|
</div>
|
|
580
580
|
</div>
|
|
@@ -625,6 +625,7 @@ KompasMeteredPaywallPersonalize.styles = [
|
|
|
625
625
|
color: #999999;
|
|
626
626
|
text-wrap: nowrap;
|
|
627
627
|
font-weight: 400;
|
|
628
|
+
font-size: 14px;
|
|
628
629
|
}
|
|
629
630
|
|
|
630
631
|
.font-lora {
|
|
@@ -655,9 +656,6 @@ __decorate([
|
|
|
655
656
|
__decorate([
|
|
656
657
|
state()
|
|
657
658
|
], KompasMeteredPaywallPersonalize.prototype, "packageData", void 0);
|
|
658
|
-
__decorate([
|
|
659
|
-
property({ type: Number })
|
|
660
|
-
], KompasMeteredPaywallPersonalize.prototype, "countdownArticle", void 0);
|
|
661
659
|
__decorate([
|
|
662
660
|
property({ type: String })
|
|
663
661
|
], KompasMeteredPaywallPersonalize.prototype, "segment", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasMeteredPaywallPersonalize.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.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 { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData, OfferingItem } from './types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\n\n@customElement('kompasid-metered-paywall-personalize')\nexport class KompasMeteredPaywallPersonalize extends LitElement {\n static styles = [\n css`\n .text-transition {\n width: 100%;\n height: 5rem;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .message-formatter span {\n color: #ff7a00;\n font-weight: 700;\n text-wrap: nowrap;\n }\n\n .message-formatter s {\n color: #999999;\n text-wrap: nowrap;\n font-weight: 400;\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .icon {\n height: 1rem;\n color: #48bb78;\n }\n\n .icon.lg {\n height: 1.5rem;\n }\n\n .icon.lg svg {\n height: 1.5rem;\n }\n `,\n TWStyles,\n ]\n\n @state() private isLoading: Boolean = true\n @state() private maxQuota: number = 3\n @state() private packageData: PackageData | undefined\n\n /**\n * Props\n */\n /**\n * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall\n * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1\n * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific\n * prop rubrik untuk menerika rubrikasi dari implementor\n * prop paywall_location = The location where user encounter the paywall\n * prop paywall_subscription_package = The name of the subscription package viewed by user\n * prop paywall_subscription_id = The ID of the subscription package viewed by user\n * prop paywall_subscription_price = The price of the subscriprtion package viewed by user\n * prop paywall_position = The position of ther subscription package viewed by user\n * prop tracker_page_type = Type of the page\n * prop tracker_content_id = ID of article (slug)\n * prop tracker_content_type = Whether it's free article or paid article\n * prop tracker_content_title = The title of article\n * prop tracker_content_categories = The category of the content\n * prop tracker_user_type = Type of user based on their subscription\n * prop tracker_subscription_status = Status of their subscription\n * prop tracker_page_domain = Page Domain\n * prop tracker_metered_wall_type = The type of Metered Wall\n * prop tracker_epaper_edition = The edition of epaper viewed by user\n * prop tracker_metered_wall_balance = The balance of their metered wall\n */\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) segment = ''\n @property({ type: String }) offering = ''\n @property({ type: String }) user_name = ''\n @property({ type: String }) rubrik = ''\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: String }) paywall_subscription_id = ''\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.getMeteredPaywallData()\n this.dataLayeronMeteredPaywall()\n }\n\n async getMeteredPaywallData() {\n try {\n const getSegment = this.segment.toLocaleLowerCase().replace(/ /g, '_')\n const response = await fetch(\n `https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`\n )\n const json = await response.json()\n\n this.packageData = json\n } catch (error) {\n throw Error('Failed to get metered paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n private redirectToBerlangganan() {\n this.dataLayeronLanggananButton()\n\n // Pastikan data tersedia\n const offeringKey = this.offering || 'Q1'\n const offeringData = this.packageData?.offering?.[offeringKey]\n\n const checkoutUrl = offeringData?.checkout_url || ''\n\n // Encode referrer dengan aman\n const { origin, pathname, search } = window.location\n const referrer = encodeURIComponent(`${origin}${pathname}${search}`)\n\n // Bangun URL dengan parameter tambahan aman\n const url = new URL(checkoutUrl)\n url.searchParams.set('referrer', referrer)\n\n // Redirect ke URL akhir\n window.location.href = url.toString()\n }\n\n private dataLayeronLanggananButton() {\n window.dataLayer.push({\n event: 'subscribe_button_clicked',\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 || 0,\n paywall_position: this.paywall_position || 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type || 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'MP',\n metered_wall_balance: this.maxQuota - this.countdownArticle + 1,\n paywall_segment: this.segment || '',\n checkout_url:\n this.packageData?.offering[this.offering ? this.offering : 'Q1']\n .checkout_url,\n })\n }\n\n private dataLayeronMeteredPaywall() {\n window.dataLayer.push({\n event: 'paywall_viewed',\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 || 0,\n paywall_position: this.paywall_position || 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type || 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'MP',\n metered_wall_balance: this.maxQuota - this.countdownArticle + 1,\n paywall_segment: this.segment || '',\n checkout_url:\n this.packageData?.offering[this.offering ? this.offering : 'Q1']\n .checkout_url,\n })\n }\n\n @state() private stateDefaultPaywall = false\n private computedstateDefaultPaywall() {\n this.stateDefaultPaywall = !this.stateDefaultPaywall\n }\n\n /**\n * Ganti placeholder _key_ di template dengan nilai dari data offering\n * Hanya replace jika placeholder cocok dan datanya valid\n */\n private replacePlaceholdersFromOffering(\n template: string,\n offeringData: OfferingItem\n ): string {\n if (!offeringData) return template\n // regex cari placeholder seperti _harga_coret_, _offering_price_, dst.\n return template.replace(/_([a-zA-Z0-9_]+)_/g, (match, key) => {\n // cek apakah key ada di dalam data\n if (key in offeringData) {\n const value = (offeringData as any)[key]\n\n // jika value number, auto format ke rupiah\n if (typeof value === 'number') {\n return formatRupiah(value)\n }\n\n // jika string, langsung return\n return String(value)\n }\n\n // kalau placeholder tidak dikenal, biarkan apa adanya\n return match\n })\n }\n\n private engageReturners() {\n const textTemplateFormater = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n return !this.stateDefaultPaywall\n ? html`\n <div\n class=\"fixed w-full inset-0 px-4 lg:px-0 h-full flex justify-center items-center bg-black bg-opacity-75 z-[999]\"\n >\n <div\n class=\"bg-white max-w-[460px] w-full justify-center items-center flex flex-col p-6 lg:pb-6 lg:px-6 lg:pt-9 relative rounded\"\n >\n <button\n class=\"font-bold cursor-pointer text-grey-400 flex rounded text-base absolute right-0 top-0 w-6 h-6 lg:w-8 lg:h-8 justify-center items-center mt-4 mr-4\"\n @click=${this.computedstateDefaultPaywall}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </button>\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[248px] lg:w-[364px]\"\n />\n <div\n class=\"font-lora font-bold text-grey-600 lg:text-2xl text-center\"\n >\n <div>Halo ${this.user_name},</div>\n <div>${this.packageData?.paywall.messageTitleExpand}</div>\n </div>\n <div\n class=\"pt-3 text-center font-sans text-grey-600 text-sm lg:text-base leading-none\"\n >\n <div>${this.packageData?.paywall.descriptionExpand}</div>\n <div class=\"text-base lg:text-lg text-grey-400 py-3\">\n <s\n >${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].harga_coret || 0\n )}</s\n >\n <span class=\"text-lg lg:text-2xl text-orange-400 font-bold\">\n ${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].offering_price || 0\n )}\n </span>\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration\n ? html`\n <span class=\"text-base lg:text-lg text-grey-600\"\n >${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration}</span\n >\n `\n : nothing}\n </div>\n <div>untuk tahun pertama.</div>\n </div>\n <div class=\"w-full pt-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-none w-full\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n </div>\n `\n : html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 py-4 justify-center gap-4 px-4 lg:px-0 bottom-0\"\n >\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(textTemplateFormater)}\n </div>\n <div>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n </div>\n `\n }\n\n private passiveFaders() {\n const messageTitleCollapse = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n return html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 ${this\n .stateDefaultPaywall\n ? 'py-4 lg:py-3'\n : 'py-4 lg:py-8'} gap-4 px-4 bottom-0\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto \"\n >\n ${!this.stateDefaultPaywall\n ? html`\n <div class=\"h-9 w-9 hidden lg:flex\"></div>\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div\n class=\"text-grey-600 font-lora message-formatter order-2\"\n >\n <div\n class=\"text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}\n </div>\n <div class=\"flex flex-col font-sans gap-3 mb-3\">\n ${this.packageData?.paywall.listBenefits\n ? this.packageData?.paywall.listBenefits.map(\n item =>\n html`\n <div\n class=\"flex items-baseline align-baseline\"\n >\n <div\n class=\"bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'circle-check',\n 12,\n 12\n )\n )}\n </div>\n <h6 class=\"text-base ml-1\">${item}</h6>\n </div>\n `\n )\n : nothing}\n </div>\n <div\n class=\"text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-4\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n : html`\n <div class=\"hidden h-9 w-9 lg:flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(messageTitleCollapse)}\n </div>\n <div class=\"hidden lg:flex ml-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n <div class=\"flex lg:hidden ml-4\">\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 lg:hidden flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n `}\n </div>\n </div>\n </div>\n `\n }\n\n private lostButCurious() {\n const messageTitleCollapse = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n return html`\n <div class=\"sticky bottom-0 w-full h-full leading-none\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 ${this\n .stateDefaultPaywall\n ? 'py-4 lg:py-3'\n : 'py-4 lg:py-8'} gap-4 px-4 bottom-0\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto \"\n >\n ${!this.stateDefaultPaywall\n ? html`\n <div class=\"h-9 w-9 hidden lg:flex\"></div>\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div class=\"text-grey-600 font-sans order-2\">\n <div\n class=\"text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-center lg:text-start\"\n >\n <span\n >Halo\n ${this.user_name\n ? this.user_name\n : 'Pembaca Setia Kompas'},</span\n >\n ${this.packageData?.paywall.messageTitleExpand}\n <span>${this.rubrik}</span>\n </div>\n <div\n class=\"text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-2\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"text-base lg:text-lg text-grey-400 mb-1\">\n <s\n >${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].harga_coret || 0\n )}</s\n >\n <span\n class=\"text-lg lg:text-2xl text-orange-400 font-bold\"\n >\n ${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].offering_price || 0\n )}\n </span>\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration\n ? html`\n <span class=\"text-base lg:text-lg text-grey-600\"\n >${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration}</span\n >\n `\n : nothing}\n </div>\n <div class=\"mb-3 lg:mb-4\">untuk tahun pertama.</div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n : html`\n <div class=\"hidden h-9 w-9 lg:flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(messageTitleCollapse)}\n </div>\n <div class=\"hidden lg:flex ml-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n <div class=\"flex lg:hidden ml-4\">\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 lg:hidden flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n `}\n </div>\n </div>\n </div>\n `\n }\n\n private unaware() {\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n\n return html`\n <div class=\"w-full h-full max-w-4xl mx-auto\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 py-6 px-4 lg:py-9 lg:px-6 gap-4 rounded-lg\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto\"\n >\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div class=\"text-grey-600 font-lora message-formatter order-2\">\n <div\n class=\"text-xl lg:text-2xl font-bold mb-2 text-center lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}${this\n .user_name\n ? `, ${this.user_name}!`\n : ''}\n </div>\n <div class=\"mb-2 font-sans\">\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"flex flex-col font-sans gap-3 mb-4\">\n ${this.packageData?.paywall.listBenefits\n ? this.packageData?.paywall.listBenefits.map(\n item =>\n html`\n <div class=\"flex items-baseline align-baseline\">\n <div\n class=\"bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'circle-check',\n 12,\n 12\n )\n )}\n </div>\n <h6 class=\"text-base ml-1\">${item}</h6>\n </div>\n `\n )\n : nothing}\n </div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n private pickTemplate() {\n switch (this.segment.toLocaleLowerCase()) {\n case 'engaged returners':\n return this.engageReturners()\n case 'passive faders':\n return this.passiveFaders()\n case 'lost but curious':\n return this.lostButCurious()\n case 'unaware':\n return this.unaware()\n default:\n return nothing\n }\n }\n\n render() {\n return !this.isLoading ? this.pickTemplate() : nothing\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasMeteredPaywallPersonalize.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.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 { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData, OfferingItem } from './types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\n\n@customElement('kompasid-metered-paywall-personalize')\nexport class KompasMeteredPaywallPersonalize extends LitElement {\n static styles = [\n css`\n .text-transition {\n width: 100%;\n height: 5rem;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .message-formatter span {\n color: #ff7a00;\n font-weight: 700;\n text-wrap: nowrap;\n }\n\n .message-formatter s {\n color: #999999;\n text-wrap: nowrap;\n font-weight: 400;\n font-size: 14px;\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .icon {\n height: 1rem;\n color: #48bb78;\n }\n\n .icon.lg {\n height: 1.5rem;\n }\n\n .icon.lg svg {\n height: 1.5rem;\n }\n `,\n TWStyles,\n ]\n\n @state() private isLoading: Boolean = true\n @state() private maxQuota: number = 3\n @state() private packageData: PackageData | undefined\n\n /**\n * Props\n */\n /**\n * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall\n * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1\n * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific\n * prop rubrik untuk menerika rubrikasi dari implementor\n * prop paywall_location = The location where user encounter the paywall\n * prop paywall_subscription_package = The name of the subscription package viewed by user\n * prop paywall_subscription_id = The ID of the subscription package viewed by user\n * prop paywall_subscription_price = The price of the subscriprtion package viewed by user\n * prop paywall_position = The position of ther subscription package viewed by user\n * prop tracker_page_type = Type of the page\n * prop tracker_content_id = ID of article (slug)\n * prop tracker_content_type = Whether it's free article or paid article\n * prop tracker_content_title = The title of article\n * prop tracker_content_categories = The category of the content\n * prop tracker_user_type = Type of user based on their subscription\n * prop tracker_subscription_status = Status of their subscription\n * prop tracker_page_domain = Page Domain\n * prop tracker_metered_wall_type = The type of Metered Wall\n * prop tracker_epaper_edition = The edition of epaper viewed by user\n * prop tracker_metered_wall_balance = The balance of their metered wall\n */\n @property({ type: String }) segment = ''\n @property({ type: String }) offering = ''\n @property({ type: String }) user_name = ''\n @property({ type: String }) rubrik = ''\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: String }) paywall_subscription_id = ''\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.getMeteredPaywallData()\n this.dataLayeronMeteredPaywall()\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n }\n\n async getMeteredPaywallData() {\n try {\n const getSegment = this.segment.toLocaleLowerCase().replace(/ /g, '_')\n const response = await fetch(\n `https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`\n )\n const json = await response.json()\n\n this.packageData = json\n } catch (error) {\n throw Error('Failed to get metered paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n private redirectToBerlangganan() {\n this.dataLayeronLanggananButton()\n\n // Pastikan data tersedia\n const offeringKey = this.offering || 'Q1'\n const offeringData = this.packageData?.offering?.[offeringKey]\n\n const checkoutUrl = offeringData?.checkout_url || ''\n\n // Encode referrer dengan aman\n const { origin, pathname, search } = window.location\n const referrer = encodeURIComponent(`${origin}${pathname}${search}`)\n\n // Bangun URL dengan parameter tambahan aman\n const url = new URL(checkoutUrl)\n url.searchParams.set('referrer', referrer)\n\n // Redirect ke URL akhir\n window.location.href = url.toString()\n }\n\n private dataLayeronLanggananButton() {\n window.dataLayer.push({\n event: 'subscribe_button_clicked',\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 || 0,\n paywall_position: this.paywall_position || 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type || 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'MP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n paywall_segment: this.segment || '',\n checkout_url:\n this.packageData?.offering[this.offering ? this.offering : 'Q1']\n .checkout_url,\n })\n }\n\n private dataLayeronMeteredPaywall() {\n window.dataLayer.push({\n event: 'paywall_viewed',\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 || 0,\n paywall_position: this.paywall_position || 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type || 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'MP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n paywall_segment: this.segment || '',\n checkout_url:\n this.packageData?.offering[this.offering ? this.offering : 'Q1']\n .checkout_url,\n })\n }\n\n @state() private stateDefaultPaywall = false\n private computedstateDefaultPaywall() {\n this.stateDefaultPaywall = !this.stateDefaultPaywall\n }\n\n /**\n * Ganti placeholder _key_ di template dengan nilai dari data offering\n * Hanya replace jika placeholder cocok dan datanya valid\n */\n private replacePlaceholdersFromOffering(\n template: string,\n offeringData: OfferingItem\n ): string {\n if (!offeringData) return template\n // regex cari placeholder seperti _harga_coret_, _offering_price_, dst.\n return template.replace(/_([a-zA-Z0-9_]+)_/g, (match, key) => {\n // cek apakah key ada di dalam data\n if (key in offeringData) {\n const value = (offeringData as any)[key]\n\n // jika value number, auto format ke rupiah\n if (typeof value === 'number') {\n return formatRupiah(value)\n }\n\n // jika string, langsung return\n return String(value)\n }\n\n // kalau placeholder tidak dikenal, biarkan apa adanya\n return match\n })\n }\n\n private engageReturners() {\n const textTemplateFormater = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n return !this.stateDefaultPaywall\n ? html`\n <div\n class=\"fixed w-full inset-0 px-4 lg:px-0 h-full flex justify-center items-center bg-black bg-opacity-75 z-[999]\"\n >\n <div\n class=\"bg-white max-w-[460px] w-full justify-center items-center flex flex-col p-6 lg:pb-6 lg:px-6 lg:pt-9 relative rounded\"\n >\n <button\n class=\"font-bold cursor-pointer text-grey-400 flex rounded text-base absolute right-0 top-0 w-6 h-6 lg:w-8 lg:h-8 justify-center items-center mt-4 mr-4\"\n @click=${this.computedstateDefaultPaywall}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </button>\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-auto max-h-40\"\n />\n <div\n class=\"font-lora font-bold text-grey-600 lg:text-2xl text-center pt-6\"\n >\n <div>Halo ${this.user_name},</div>\n <div>${this.packageData?.paywall.messageTitleExpand}</div>\n </div>\n <div\n class=\"pt-3 text-center font-sans text-grey-600 text-sm lg:text-base leading-none\"\n >\n <div>${this.packageData?.paywall.descriptionExpand}</div>\n <div class=\"text-base lg:text-lg text-grey-400 py-3\">\n <s\n >${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].harga_coret || 0\n )}</s\n >\n <span class=\"text-lg lg:text-2xl text-orange-400 font-bold\">\n ${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].offering_price || 0\n )}\n </span>\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration\n ? html`\n <span class=\"text-base lg:text-lg text-grey-600\"\n >${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration}</span\n >\n `\n : nothing}\n </div>\n <div>untuk tahun pertama.</div>\n </div>\n <div class=\"w-full pt-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-none w-full\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n </div>\n `\n : html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 py-3 justify-center gap-4 px-4 lg:px-0 bottom-0\"\n >\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(textTemplateFormater)}\n </div>\n <div>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n </div>\n `\n }\n\n private passiveFaders() {\n const messageTitleCollapse = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n return html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 ${this\n .stateDefaultPaywall\n ? 'py-4 lg:py-3'\n : 'py-4 lg:py-8'} gap-4 px-4 bottom-0\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto \"\n >\n ${!this.stateDefaultPaywall\n ? html`\n <div class=\"h-9 w-9 hidden lg:flex\"></div>\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div\n class=\"text-grey-600 font-lora message-formatter order-2\"\n >\n <div\n class=\"text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}\n </div>\n <div class=\"flex flex-col font-sans gap-3 mb-3\">\n ${this.packageData?.paywall.listBenefits\n ? this.packageData?.paywall.listBenefits.map(\n item =>\n html`\n <div\n class=\"flex items-baseline align-baseline\"\n >\n <div\n class=\"bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'circle-check',\n 12,\n 12\n )\n )}\n </div>\n <h6 class=\"text-base ml-1\">${item}</h6>\n </div>\n `\n )\n : nothing}\n </div>\n <div\n class=\"text-grey-600 font-sans text-base self-center text-left message-formatter mb-4 leading-[150%]\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n : html`\n <div class=\"hidden h-9 w-9 lg:flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(messageTitleCollapse)}\n </div>\n <div class=\"hidden lg:flex ml-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n <div class=\"flex lg:hidden ml-4\">\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 lg:hidden flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n `}\n </div>\n </div>\n </div>\n `\n }\n\n private lostButCurious() {\n const messageTitleCollapse = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n return html`\n <div class=\"sticky bottom-0 w-full h-full leading-none\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 ${this\n .stateDefaultPaywall\n ? 'py-4 lg:py-3'\n : 'py-4 lg:py-8'} gap-4 px-4 bottom-0\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto \"\n >\n ${!this.stateDefaultPaywall\n ? html`\n <div class=\"h-9 w-9 hidden lg:flex\"></div>\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div class=\"text-grey-600 font-sans order-2\">\n <div\n class=\"text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-start lg:text-start\"\n >\n <span\n >Halo\n ${this.user_name\n ? this.user_name\n : 'Pembaca Setia Kompas'},</span\n >\n ${this.packageData?.paywall.messageTitleExpand}\n <span>${this.rubrik}</span>\n </div>\n <div\n class=\"text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-2\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"text-base lg:text-lg text-grey-400 mb-1\">\n <s\n >${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].harga_coret || 0\n )}</s\n >\n <span\n class=\"text-lg lg:text-2xl text-orange-400 font-bold\"\n >\n ${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].offering_price || 0\n )}\n </span>\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration\n ? html`\n <span class=\"text-base lg:text-lg text-grey-600\"\n >${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration}</span\n >\n `\n : nothing}\n </div>\n <div class=\"mb-3 lg:mb-4\">untuk tahun pertama.</div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n : html`\n <div class=\"hidden h-9 w-9 lg:flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(messageTitleCollapse)}\n </div>\n <div class=\"hidden lg:flex ml-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n <div class=\"flex lg:hidden ml-4\">\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 lg:hidden flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n `}\n </div>\n </div>\n </div>\n `\n }\n\n private unaware() {\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand || '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] ||\n ({} as OfferingItem)\n )\n\n return html`\n <div class=\"w-full h-full max-w-4xl mx-auto\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 py-6 px-4 lg:py-9 lg:px-6 gap-4 rounded-lg\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto\"\n >\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div class=\"text-grey-600 font-lora message-formatter order-2\">\n <div\n class=\"text-xl lg:text-2xl font-bold mb-3 text-start lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}${this\n .user_name\n ? `, ${this.user_name}!`\n : ''}\n </div>\n <div class=\"mb-3 font-sans\">\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"flex flex-col font-sans gap-3 mb-4\">\n ${this.packageData?.paywall.listBenefits\n ? this.packageData?.paywall.listBenefits.map(\n item =>\n html`\n <div class=\"flex items-baseline align-baseline\">\n <div\n class=\"bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'circle-check',\n 12,\n 12\n )\n )}\n </div>\n <h6 class=\"text-base ml-1\">${item}</h6>\n </div>\n `\n )\n : nothing}\n </div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-[18px] w-full lg:w-auto\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-full lg:w-[202px] max-h-[116px] lg:max-h-none\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n private pickTemplate() {\n switch (this.segment.toLocaleLowerCase()) {\n case 'engaged returners':\n return this.engageReturners()\n case 'passive faders':\n return this.passiveFaders()\n case 'lost but curious':\n return this.lostButCurious()\n case 'unaware':\n return this.unaware()\n default:\n return nothing\n }\n }\n\n render() {\n return !this.isLoading ? this.pickTemplate() : nothing\n }\n}\n"]}
|
|
@@ -37,11 +37,13 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
37
37
|
let source;
|
|
38
38
|
switch (this.type) {
|
|
39
39
|
case 'epaper':
|
|
40
|
+
case 'proMiningOutlook':
|
|
40
41
|
source = 'epaper';
|
|
41
42
|
break;
|
|
42
43
|
case 'audio':
|
|
43
44
|
source = 'news_audio';
|
|
44
45
|
break;
|
|
46
|
+
case 'proMiningArticle':
|
|
45
47
|
default:
|
|
46
48
|
source = 'article';
|
|
47
49
|
}
|