@kompasid/lit-web-components 0.9.34 → 0.9.35
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 +2 -2
- 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.js +12 -9
- 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 +20 -8
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-header-notification/KompasHeaderNotification.ts +1 -1
- package/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.ts +12 -9
- package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +2 -0
- package/tailwind/tailwind.css +20 -8
- package/tailwind/tailwind.ts +20 -8
package/demo/index.html
CHANGED
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
|
|
60
60
|
import '../dist/src/components/kompasid-grace-period/KompasGracePeriod.js'
|
|
61
61
|
|
|
62
|
-
const type = '
|
|
62
|
+
const type = 'proMiningOutlook'
|
|
63
63
|
const theme = ''
|
|
64
64
|
const paywallLocation = 'paywall_location'
|
|
65
65
|
const paywallSubscriptionId = 'testId'
|
|
@@ -282,7 +282,7 @@
|
|
|
282
282
|
>
|
|
283
283
|
</kompasid-metered-paywall>
|
|
284
284
|
<kompasid-metered-paywall-personalize
|
|
285
|
-
segment="
|
|
285
|
+
segment="lost but curious"
|
|
286
286
|
offering="Q3"
|
|
287
287
|
user_name="Dummy User"
|
|
288
288
|
rubrik="Politik & Hukum"
|
|
@@ -265,7 +265,7 @@ let KompasHeaderNotification = class KompasHeaderNotification extends LitElement
|
|
|
265
265
|
</div>
|
|
266
266
|
<div class="text-grey-600">
|
|
267
267
|
<p class="text-sm font-bold break-words">${item.title}</p>
|
|
268
|
-
<p class="text-sm"
|
|
268
|
+
<p class="text-sm" .innerHTML=${item.description}></p>
|
|
269
269
|
</div>
|
|
270
270
|
</div>
|
|
271
271
|
<div class="w-1/4">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasHeaderNotification.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-notification/KompasHeaderNotification.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, isToday, formatDistanceStrict, subDays } from 'date-fns'\nimport { cva } from 'class-variance-authority'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n UserNotification,\n NotificationList,\n ApiResponse,\n ApiRubrikResponse,\n} from './types.js'\nimport { customFetch } from './utils.js'\nimport { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'\n\n@customElement('kompasid-header-notification')\nexport class KompasHeaderNotification extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #ff7a00;\n border-radius: 50%;\n right: 0.03rem;\n top: 0.09rem;\n border: 1.2px solid white;\n }\n\n .break-words {\n overflow-wrap: break-word;\n }\n\n .header-notification-dropdown {\n width: 20.5rem;\n background-color: #ffffff;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n position: absolute;\n right: -7.5vmax;\n }\n\n .w-14 {\n width: 3.25rem;\n }\n\n .pb-18 {\n padding-bottom: 4.5rem;\n }\n\n .h-\\\\[300px\\\\] {\n height: 300px;\n }\n\n .h-14 {\n height: 3.25rem;\n }\n\n .bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 252 210 / var(--tw-bg-opacity));\n }\n\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n\n .link-active {\n color: #0468cb;\n border-color: #0468cb;\n border-bottom-width: 3px;\n background-color: transparent !important;\n }\n\n .animate-spin {\n animation: spin 2s linear infinite;\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n .object-cover {\n object-fit: cover;\n }\n\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n\n @media (min-width: 1024px) {\n .header-notification-dropdown {\n right: -4vmax;\n }\n }\n\n @media (max-width: 360px) {\n .header-notification-dropdown {\n right: -10vmax;\n }\n }\n `,\n TWStyles,\n ]\n\n @state() isShowDropdown: boolean = false\n @state() selectedTab: string = 'Info'\n @state() notificationInfoData: UserNotification = {} as UserNotification\n @state() notificationContentData: any[] = []\n @state() isDataLoaded: boolean = false\n @state() themeList: any = null\n /*\n * property accessToken is the access token of the user\n * property refreshToken is the refresh token of the user\n * property domain is the domain of the API based on website\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n */\n\n @property({ type: String }) accessToken = ''\n @property({ type: String }) refreshToken = ''\n @property({ type: String }) domain = 'id' // 'id' | 'cloud'\n @property({ type: String }) theme: 'default' | 'primary' = 'default'\n\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 constructor() {\n super()\n this.handleClickOutside = this.handleClickOutside.bind(this)\n }\n\n /**\n * Function to format date\n */\n formatDate(date: string) {\n // Check if the provided date is today\n let result\n if (isToday(date)) {\n // Return time difference if it's today (e.g., \"7 hours ago\")\n result = `${formatDistanceStrict(date, new Date(), { locale: id })} lalu`\n } else {\n // Return formatted date (e.g., \"12 Sep 2024, 09:00\")\n result = format(date, 'dd MMM yyyy, HH:mm', { locale: id })\n }\n return result\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowDropdown = false\n this.themeList = await getHeaderTheme()\n\n if ((this.accessToken || this.refreshToken) && this.domain)\n await this.loadData()\n document.addEventListener('click', this.handleClickOutside)\n }\n\n override async disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this.handleClickOutside)\n }\n\n private setTheme(param: any): String {\n if (!this.themeList) return 'text-grey-100'\n const cvaFn = cva('', { variants: this.themeList })\n\n return cvaFn(param)\n }\n\n private async apiFetch(url: string, options: any) {\n const response = await customFetch(\n url,\n this.refreshToken,\n this.accessToken,\n this.domain,\n { ...options }\n )\n\n return response\n }\n\n private async getNotifRubrik() {\n const req = this.apiFetch(\n `https://cds.kompas.${this.domain}/api/v1/article/pilihanku`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n return req\n }\n\n private async getNotifList() {\n const req = await this.apiFetch(\n `https://api.kompas.${this.domain}/account/api/v1/users/notification`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n return req\n }\n\n private async getEpaperData() {\n const formatDate = 'yyyy/MM/dd'\n const startDate = format(subDays(new Date(), 1), formatDate)\n const endDate = format(new Date(), formatDate).toString()\n const req = await this.apiFetch(\n `https://apiepaper.kompas.${this.domain}/products?startDate=${startDate}&endDate=${endDate}&sort=desc`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n\n return req\n }\n\n private async notifRead(notifId: string) {\n const req = await this.apiFetch(\n `https://api.kompas.${this.domain}/account/api/v1/users/notification/read`,\n {\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'PUT',\n body: JSON.stringify({\n notificationId: notifId,\n }),\n }\n )\n return req\n }\n\n private async loadData() {\n const apiCalls = [\n this.getNotifList(),\n this.getNotifRubrik(),\n this.getEpaperData(),\n ]\n this.isDataLoaded = false\n\n Promise.all(apiCalls)\n .then(responses =>\n Promise.all(responses.map(response => response.json()))\n )\n .then(values => {\n this.notificationInfoData = (\n values[0] as ApiResponse<UserNotification>\n ).data\n this.notificationInfoData.notificationList =\n this.notificationInfoData.notificationList || []\n const rubrikData = (values[1] as ApiRubrikResponse<any>).result || []\n const ePaperData = (values[2] as ApiResponse<any>).data[0] || {}\n\n const { publishDate, description, thumbnail, title, url } = ePaperData\n\n const data = {\n title,\n category: [{ name: 'ePaper', slug: 'epaper' }],\n publishedDate: format(new Date(publishDate), 'yyyy-MM-dd HH:mm:ss'),\n permalink: url,\n thumbnails: {\n sizes: { thumbnailSquareMedium: { permalink: thumbnail } },\n },\n excerpt: description,\n }\n\n this.notificationContentData = [data, ...rubrikData]\n this.notificationContentData.sort(\n (a: any, b: any) =>\n new Date(b.publishedDate).getTime() -\n new Date(a.publishedDate).getTime()\n )\n\n this.isDataLoaded = true\n })\n }\n\n private toggleDropdown() {\n this.isShowDropdown = !this.isShowDropdown\n\n // if opened, fire the datalayer\n if (this.isShowDropdown) this.pushDataLayer('notification_opened')\n }\n\n private notificationIcon() {\n const notificationIndicator = () => {\n if (!this.notificationInfoData.notificationCount) return html``\n return html`<div class=\"header-account--notification-indicator\"></div>`\n }\n\n return html`\n <button\n @click=${this.toggleDropdown}\n class=\"cursor-pointer relative flex items-center\"\n >\n ${notificationIndicator()}\n <div class=\"flex flex-row items-center self-center\">\n <div\n class=\"cursor-pointer mt-0.5 ${this.setTheme({\n icon: this.theme,\n })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}\n </div>\n </div>\n </button>\n `\n }\n\n private handleClick = (value: string) => {\n this.selectedTab = value\n }\n\n private handleNotificationUrlParam = (url: string, type: string) => {\n const params = {\n open_from: type,\n }\n const newUrl = new URL(decodeURIComponent(url))\n if (newUrl.search) {\n for (const [key, value] of Object.entries(params)) {\n if (!newUrl.searchParams.has(key)) {\n newUrl.searchParams.append(key, value)\n }\n }\n } else {\n newUrl.search = new URLSearchParams(params).toString()\n }\n\n return newUrl.toString()\n }\n\n private redirectTo = async (notifData: NotificationList) => {\n const { notificationId: notifId, link, label } = notifData\n const res = await this.notifRead(notifId)\n\n if (res.status === 200) {\n this.notificationInfoData = {\n ...this.notificationInfoData,\n notificationList: this.notificationInfoData.notificationList\n ? this.notificationInfoData.notificationList.map(notifItem => ({\n ...notifItem,\n isRead:\n notifItem.notificationId === notifId ? true : notifItem.isRead,\n }))\n : [],\n }\n }\n\n this.pushDataLayer('notification_clicked', 'Information', label)\n if (link) {\n const url = this.handleNotificationUrlParam(link, 'Notification_Info')\n window.open(url, '_blank')\n }\n }\n\n private handleClickOutside(event: Event) {\n if (!this.isShowDropdown) return\n\n const popup = this.shadowRoot?.getElementById('headerNotification')\n const ev = event.composedPath()\n if (this.isShowDropdown && popup && !ev?.includes(popup as HTMLElement)) {\n this.isShowDropdown = false // Close the popup\n }\n }\n\n // Notification Info\n private notificationInfoSection() {\n const {\n notificationList,\n }: { notificationList: NotificationList[] | null } =\n this.notificationInfoData\n\n // Empty state\n if (!notificationList || !notificationList.length)\n return html`\n <div class=\"text-center px-4 pt-6 pb-18\">\n <img\n src=\"https://cdn-www.kompas.id/assets/empty-state-notification.png\"\n alt=\"empty-state-notification\"\n class=\"w-auto mx-auto\"\n />\n <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n <p class=\"px-2\">\n Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n terbaru.\n </p>\n </div>\n `\n\n const notificationInfoListTemplate = (item: NotificationList) => {\n const imgUrl =\n item.label === 'Akun'\n ? `https://cdn-www.kompas.id/assets/notifikasi-akun.svg`\n : `https://cdn-www.kompas.id/assets/langganan-anda-telah-berakhir.svg`\n\n return html`<div class=\"w-3/4 pr-1\">\n <div class=\"flex items-center mb-1 text-xs font-bold\">\n <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n ${item.label}\n </span>\n <span class=\"text-grey-400 ml-2\"\n >${this.formatDate(item.time)}</span\n >\n </div>\n <div class=\"text-grey-600\">\n <p class=\"text-sm font-bold break-words\">${item.title}</p>\n <p class=\"text-sm\">${item.description}</p>\n </div>\n </div>\n <div class=\"w-1/4\">\n <img src=\"${imgUrl}\" alt=\"${item.label}-alt\" class=\"w-14 h-14\" />\n </div>`\n }\n\n return html`<div class=\"h-[300px] overflow-y-scroll\">\n ${notificationList.map(\n item =>\n html`<button\n class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n ? 'bg-blue-100'\n : ''}\"\n @click=${() => this.redirectTo(item)}\n >\n ${notificationInfoListTemplate(item)}\n </button> `\n )}\n </div>\n <!-- Footer Link -->\n <div class=\"px-4 py-4 text-center\">\n <a href=\"#\" @click=\"${() =>\n this.redirectToNotification(\n 'info'\n )}\" class=\"text-base font-bold text-blue-500\">\n Lihat Selengkapnya</a\n >\n </div>\n </div>`\n }\n\n private redirectToNotification(tab: string) {\n window.open(\n `https://manage-account.kompas.${this.domain}/manage-account/notification/${tab}`,\n '_blank'\n )\n }\n\n // Notification Content\n private notificationContentSection() {\n // Empty state\n if (!this.notificationContentData.length) {\n return html`\n <div class=\"text-center px-4 pt-6 pb-18\">\n <img\n src=\"https://cdn-www.kompas.id/assets/empty-state-notification.png\"\n alt=\"empty-state-notification\"\n class=\"w-auto mx-auto\"\n />\n <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n <p class=\"px-2\">\n Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n terbaru.\n </p>\n </div>\n `\n }\n const notificationContentListTemplate = (item: any) => html`<div\n class=\"w-3/4 pr-1 \"\n >\n <div class=\"flex items-center mb-1 text-xs font-bold\">\n <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n ${item.category[0].name}\n </span>\n <span class=\"text-grey-400 ml-2\">\n ${this.formatDate(item.publishedDate)}</span\n >\n </div>\n <p class=\"font-bold text-sm text-grey-600 py-1 break-words\">\n ${item.title}\n </p>\n </div>\n <div class=\"w-1/4\">\n <img\n src=\"${item.thumbnails.sizes.thumbnailSquareMedium.permalink}\"\n alt=\"content-img-alt\"\n class=\"w-14 h-14 object-cover\"\n />\n </div>`\n\n return html`<div class=\"h-[300px] overflow-y-scroll\">\n ${this.notificationContentData.map(\n item =>\n html`<button\n class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n ? 'bg-blue-100'\n : ''}\"\n @click=${() => {\n this.pushDataLayer('notification_clicked', 'Content', 'Content')\n window.open(\n this.handleNotificationUrlParam(\n item.permalink,\n 'Notification_Content'\n ),\n '_blank'\n )\n }}\n >\n ${notificationContentListTemplate(item)}\n </button> `\n )}\n </div>\n <!-- Footer Link -->\n <div class=\"px-4 py-4 text-center\">\n <a href=\"#\" @click=\"${() =>\n this.redirectToNotification(\n 'konten'\n )}\" class=\"text-base font-bold text-blue-500\">\n Lihat Selengkapnya</a\n >\n </div>\n </div>`\n }\n\n private notificationPopup() {\n const tab = ['Info', 'Konten']\n\n return html`\n <div\n id=\"notificationPopup\"\n class=\"header-notification-dropdown rounded-lg shadow-lg z-50 mt-2 ${this\n .isShowDropdown\n ? 'active'\n : ''}\"\n >\n <div class=\"sticky\">\n <div class=\"flex justify-center py-4 border-b border-grey-300\">\n <span class=\"font-bold text-base text-grey-700\">Notifikasi</span>\n </div>\n <!-- Tabs for Info and Content -->\n <div class=\"flex justify-between text-grey-400\">\n ${tab.map(\n item =>\n html`\n <button\n class=\"focus:outline-none font-bold py-2 w-1/2 ${this\n .selectedTab === item && 'link-active'}\"\n @click=${() => this.handleClick(item)}\n >\n ${item}\n </button>\n `\n )}\n </div>\n </div>\n\n <!-- Notification Content -->\n ${this.selectedTab === 'Info'\n ? this.notificationInfoSection()\n : this.notificationContentSection()}\n </div>\n `\n }\n\n private getParamsData(tab?: string, type?: string): any {\n let notificationData = {}\n let notifType = type\n\n if (type && tab) {\n if (type !== 'Content') {\n switch (true) {\n case /langganan/i.test(type):\n notifType = 'Subscription'\n break\n case type === 'Akun':\n notifType = 'Account'\n break\n case /bayar/i.test(type):\n notifType = 'Payment'\n break\n default:\n notifType = 'Information'\n break\n }\n }\n\n notificationData = {\n notification_tab: tab,\n notification_type: notifType,\n }\n }\n\n const data = {\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'FP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n return {\n ...notificationData,\n ...data,\n }\n }\n\n private pushDataLayer(eventName: string, tab?: string, type?: string): void {\n const data = this.getParamsData(tab, type)\n window.dataLayer.push({\n event: eventName,\n ...data,\n })\n }\n\n render() {\n return html`<div id=\"headerNotification\" class=\"relative\">\n ${this.isDataLoaded\n ? this.notificationIcon()\n : html`<div\n class=\"cursor-pointer mt-0.5 animate-spin ${this.setTheme({\n icon: this.theme,\n })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}\n </div>`}\n ${this.isShowDropdown ? this.notificationPopup() : ''}\n </div>`\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasHeaderNotification.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-notification/KompasHeaderNotification.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, isToday, formatDistanceStrict, subDays } from 'date-fns'\nimport { cva } from 'class-variance-authority'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport {\n UserNotification,\n NotificationList,\n ApiResponse,\n ApiRubrikResponse,\n} from './types.js'\nimport { customFetch } from './utils.js'\nimport { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'\n\n@customElement('kompasid-header-notification')\nexport class KompasHeaderNotification extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #ff7a00;\n border-radius: 50%;\n right: 0.03rem;\n top: 0.09rem;\n border: 1.2px solid white;\n }\n\n .break-words {\n overflow-wrap: break-word;\n }\n\n .header-notification-dropdown {\n width: 20.5rem;\n background-color: #ffffff;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n position: absolute;\n right: -7.5vmax;\n }\n\n .w-14 {\n width: 3.25rem;\n }\n\n .pb-18 {\n padding-bottom: 4.5rem;\n }\n\n .h-\\\\[300px\\\\] {\n height: 300px;\n }\n\n .h-14 {\n height: 3.25rem;\n }\n\n .bg-green-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(238 252 210 / var(--tw-bg-opacity));\n }\n\n .overflow-y-scroll {\n overflow-y: scroll;\n }\n\n .link-active {\n color: #0468cb;\n border-color: #0468cb;\n border-bottom-width: 3px;\n background-color: transparent !important;\n }\n\n .animate-spin {\n animation: spin 2s linear infinite;\n }\n\n @keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n .object-cover {\n object-fit: cover;\n }\n\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n\n @media (min-width: 1024px) {\n .header-notification-dropdown {\n right: -4vmax;\n }\n }\n\n @media (max-width: 360px) {\n .header-notification-dropdown {\n right: -10vmax;\n }\n }\n `,\n TWStyles,\n ]\n\n @state() isShowDropdown: boolean = false\n @state() selectedTab: string = 'Info'\n @state() notificationInfoData: UserNotification = {} as UserNotification\n @state() notificationContentData: any[] = []\n @state() isDataLoaded: boolean = false\n @state() themeList: any = null\n /*\n * property accessToken is the access token of the user\n * property refreshToken is the refresh token of the user\n * property domain is the domain of the API based on website\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n */\n\n @property({ type: String }) accessToken = ''\n @property({ type: String }) refreshToken = ''\n @property({ type: String }) domain = 'id' // 'id' | 'cloud'\n @property({ type: String }) theme: 'default' | 'primary' = 'default'\n\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 constructor() {\n super()\n this.handleClickOutside = this.handleClickOutside.bind(this)\n }\n\n /**\n * Function to format date\n */\n formatDate(date: string) {\n // Check if the provided date is today\n let result\n if (isToday(date)) {\n // Return time difference if it's today (e.g., \"7 hours ago\")\n result = `${formatDistanceStrict(date, new Date(), { locale: id })} lalu`\n } else {\n // Return formatted date (e.g., \"12 Sep 2024, 09:00\")\n result = format(date, 'dd MMM yyyy, HH:mm', { locale: id })\n }\n return result\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowDropdown = false\n this.themeList = await getHeaderTheme()\n\n if ((this.accessToken || this.refreshToken) && this.domain)\n await this.loadData()\n document.addEventListener('click', this.handleClickOutside)\n }\n\n override async disconnectedCallback() {\n super.disconnectedCallback()\n document.removeEventListener('click', this.handleClickOutside)\n }\n\n private setTheme(param: any): String {\n if (!this.themeList) return 'text-grey-100'\n const cvaFn = cva('', { variants: this.themeList })\n\n return cvaFn(param)\n }\n\n private async apiFetch(url: string, options: any) {\n const response = await customFetch(\n url,\n this.refreshToken,\n this.accessToken,\n this.domain,\n { ...options }\n )\n\n return response\n }\n\n private async getNotifRubrik() {\n const req = this.apiFetch(\n `https://cds.kompas.${this.domain}/api/v1/article/pilihanku`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n return req\n }\n\n private async getNotifList() {\n const req = await this.apiFetch(\n `https://api.kompas.${this.domain}/account/api/v1/users/notification`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n return req\n }\n\n private async getEpaperData() {\n const formatDate = 'yyyy/MM/dd'\n const startDate = format(subDays(new Date(), 1), formatDate)\n const endDate = format(new Date(), formatDate).toString()\n const req = await this.apiFetch(\n `https://apiepaper.kompas.${this.domain}/products?startDate=${startDate}&endDate=${endDate}&sort=desc`,\n {\n method: 'GET',\n headers: {\n 'Content-Type': 'application/json',\n },\n }\n )\n\n return req\n }\n\n private async notifRead(notifId: string) {\n const req = await this.apiFetch(\n `https://api.kompas.${this.domain}/account/api/v1/users/notification/read`,\n {\n headers: {\n 'Content-Type': 'application/json',\n },\n method: 'PUT',\n body: JSON.stringify({\n notificationId: notifId,\n }),\n }\n )\n return req\n }\n\n private async loadData() {\n const apiCalls = [\n this.getNotifList(),\n this.getNotifRubrik(),\n this.getEpaperData(),\n ]\n this.isDataLoaded = false\n\n Promise.all(apiCalls)\n .then(responses =>\n Promise.all(responses.map(response => response.json()))\n )\n .then(values => {\n this.notificationInfoData = (\n values[0] as ApiResponse<UserNotification>\n ).data\n this.notificationInfoData.notificationList =\n this.notificationInfoData.notificationList || []\n const rubrikData = (values[1] as ApiRubrikResponse<any>).result || []\n const ePaperData = (values[2] as ApiResponse<any>).data[0] || {}\n\n const { publishDate, description, thumbnail, title, url } = ePaperData\n\n const data = {\n title,\n category: [{ name: 'ePaper', slug: 'epaper' }],\n publishedDate: format(new Date(publishDate), 'yyyy-MM-dd HH:mm:ss'),\n permalink: url,\n thumbnails: {\n sizes: { thumbnailSquareMedium: { permalink: thumbnail } },\n },\n excerpt: description,\n }\n\n this.notificationContentData = [data, ...rubrikData]\n this.notificationContentData.sort(\n (a: any, b: any) =>\n new Date(b.publishedDate).getTime() -\n new Date(a.publishedDate).getTime()\n )\n\n this.isDataLoaded = true\n })\n }\n\n private toggleDropdown() {\n this.isShowDropdown = !this.isShowDropdown\n\n // if opened, fire the datalayer\n if (this.isShowDropdown) this.pushDataLayer('notification_opened')\n }\n\n private notificationIcon() {\n const notificationIndicator = () => {\n if (!this.notificationInfoData.notificationCount) return html``\n return html`<div class=\"header-account--notification-indicator\"></div>`\n }\n\n return html`\n <button\n @click=${this.toggleDropdown}\n class=\"cursor-pointer relative flex items-center\"\n >\n ${notificationIndicator()}\n <div class=\"flex flex-row items-center self-center\">\n <div\n class=\"cursor-pointer mt-0.5 ${this.setTheme({\n icon: this.theme,\n })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'bell', 21, 21))}\n </div>\n </div>\n </button>\n `\n }\n\n private handleClick = (value: string) => {\n this.selectedTab = value\n }\n\n private handleNotificationUrlParam = (url: string, type: string) => {\n const params = {\n open_from: type,\n }\n const newUrl = new URL(decodeURIComponent(url))\n if (newUrl.search) {\n for (const [key, value] of Object.entries(params)) {\n if (!newUrl.searchParams.has(key)) {\n newUrl.searchParams.append(key, value)\n }\n }\n } else {\n newUrl.search = new URLSearchParams(params).toString()\n }\n\n return newUrl.toString()\n }\n\n private redirectTo = async (notifData: NotificationList) => {\n const { notificationId: notifId, link, label } = notifData\n const res = await this.notifRead(notifId)\n\n if (res.status === 200) {\n this.notificationInfoData = {\n ...this.notificationInfoData,\n notificationList: this.notificationInfoData.notificationList\n ? this.notificationInfoData.notificationList.map(notifItem => ({\n ...notifItem,\n isRead:\n notifItem.notificationId === notifId ? true : notifItem.isRead,\n }))\n : [],\n }\n }\n\n this.pushDataLayer('notification_clicked', 'Information', label)\n if (link) {\n const url = this.handleNotificationUrlParam(link, 'Notification_Info')\n window.open(url, '_blank')\n }\n }\n\n private handleClickOutside(event: Event) {\n if (!this.isShowDropdown) return\n\n const popup = this.shadowRoot?.getElementById('headerNotification')\n const ev = event.composedPath()\n if (this.isShowDropdown && popup && !ev?.includes(popup as HTMLElement)) {\n this.isShowDropdown = false // Close the popup\n }\n }\n\n // Notification Info\n private notificationInfoSection() {\n const {\n notificationList,\n }: { notificationList: NotificationList[] | null } =\n this.notificationInfoData\n\n // Empty state\n if (!notificationList || !notificationList.length)\n return html`\n <div class=\"text-center px-4 pt-6 pb-18\">\n <img\n src=\"https://cdn-www.kompas.id/assets/empty-state-notification.png\"\n alt=\"empty-state-notification\"\n class=\"w-auto mx-auto\"\n />\n <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n <p class=\"px-2\">\n Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n terbaru.\n </p>\n </div>\n `\n\n const notificationInfoListTemplate = (item: NotificationList) => {\n const imgUrl =\n item.label === 'Akun'\n ? `https://cdn-www.kompas.id/assets/notifikasi-akun.svg`\n : `https://cdn-www.kompas.id/assets/langganan-anda-telah-berakhir.svg`\n\n return html`<div class=\"w-3/4 pr-1\">\n <div class=\"flex items-center mb-1 text-xs font-bold\">\n <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n ${item.label}\n </span>\n <span class=\"text-grey-400 ml-2\"\n >${this.formatDate(item.time)}</span\n >\n </div>\n <div class=\"text-grey-600\">\n <p class=\"text-sm font-bold break-words\">${item.title}</p>\n <p class=\"text-sm\" .innerHTML=${item.description}></p>\n </div>\n </div>\n <div class=\"w-1/4\">\n <img src=\"${imgUrl}\" alt=\"${item.label}-alt\" class=\"w-14 h-14\" />\n </div>`\n }\n\n return html`<div class=\"h-[300px] overflow-y-scroll\">\n ${notificationList.map(\n item =>\n html`<button\n class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n ? 'bg-blue-100'\n : ''}\"\n @click=${() => this.redirectTo(item)}\n >\n ${notificationInfoListTemplate(item)}\n </button> `\n )}\n </div>\n <!-- Footer Link -->\n <div class=\"px-4 py-4 text-center\">\n <a href=\"#\" @click=\"${() =>\n this.redirectToNotification(\n 'info'\n )}\" class=\"text-base font-bold text-blue-500\">\n Lihat Selengkapnya</a\n >\n </div>\n </div>`\n }\n\n private redirectToNotification(tab: string) {\n window.open(\n `https://manage-account.kompas.${this.domain}/manage-account/notification/${tab}`,\n '_blank'\n )\n }\n\n // Notification Content\n private notificationContentSection() {\n // Empty state\n if (!this.notificationContentData.length) {\n return html`\n <div class=\"text-center px-4 pt-6 pb-18\">\n <img\n src=\"https://cdn-www.kompas.id/assets/empty-state-notification.png\"\n alt=\"empty-state-notification\"\n class=\"w-auto mx-auto\"\n />\n <p class=\"font-bold text-center text-lg py-2\">Belum Ada Notifikasi</p>\n <p class=\"px-2\">\n Kami akan memberitahukan Anda ketika ada informasi dan pemberitahuan\n terbaru.\n </p>\n </div>\n `\n }\n const notificationContentListTemplate = (item: any) => html`<div\n class=\"w-3/4 pr-1 \"\n >\n <div class=\"flex items-center mb-1 text-xs font-bold\">\n <span class=\"text-green-500 bg-green-100 rounded-sm p-1 px-2\">\n ${item.category[0].name}\n </span>\n <span class=\"text-grey-400 ml-2\">\n ${this.formatDate(item.publishedDate)}</span\n >\n </div>\n <p class=\"font-bold text-sm text-grey-600 py-1 break-words\">\n ${item.title}\n </p>\n </div>\n <div class=\"w-1/4\">\n <img\n src=\"${item.thumbnails.sizes.thumbnailSquareMedium.permalink}\"\n alt=\"content-img-alt\"\n class=\"w-14 h-14 object-cover\"\n />\n </div>`\n\n return html`<div class=\"h-[300px] overflow-y-scroll\">\n ${this.notificationContentData.map(\n item =>\n html`<button\n class=\"flex w-full text-left items-start p-4 cursor-pointer justify-between ${!item.isRead\n ? 'bg-blue-100'\n : ''}\"\n @click=${() => {\n this.pushDataLayer('notification_clicked', 'Content', 'Content')\n window.open(\n this.handleNotificationUrlParam(\n item.permalink,\n 'Notification_Content'\n ),\n '_blank'\n )\n }}\n >\n ${notificationContentListTemplate(item)}\n </button> `\n )}\n </div>\n <!-- Footer Link -->\n <div class=\"px-4 py-4 text-center\">\n <a href=\"#\" @click=\"${() =>\n this.redirectToNotification(\n 'konten'\n )}\" class=\"text-base font-bold text-blue-500\">\n Lihat Selengkapnya</a\n >\n </div>\n </div>`\n }\n\n private notificationPopup() {\n const tab = ['Info', 'Konten']\n\n return html`\n <div\n id=\"notificationPopup\"\n class=\"header-notification-dropdown rounded-lg shadow-lg z-50 mt-2 ${this\n .isShowDropdown\n ? 'active'\n : ''}\"\n >\n <div class=\"sticky\">\n <div class=\"flex justify-center py-4 border-b border-grey-300\">\n <span class=\"font-bold text-base text-grey-700\">Notifikasi</span>\n </div>\n <!-- Tabs for Info and Content -->\n <div class=\"flex justify-between text-grey-400\">\n ${tab.map(\n item =>\n html`\n <button\n class=\"focus:outline-none font-bold py-2 w-1/2 ${this\n .selectedTab === item && 'link-active'}\"\n @click=${() => this.handleClick(item)}\n >\n ${item}\n </button>\n `\n )}\n </div>\n </div>\n\n <!-- Notification Content -->\n ${this.selectedTab === 'Info'\n ? this.notificationInfoSection()\n : this.notificationContentSection()}\n </div>\n `\n }\n\n private getParamsData(tab?: string, type?: string): any {\n let notificationData = {}\n let notifType = type\n\n if (type && tab) {\n if (type !== 'Content') {\n switch (true) {\n case /langganan/i.test(type):\n notifType = 'Subscription'\n break\n case type === 'Akun':\n notifType = 'Account'\n break\n case /bayar/i.test(type):\n notifType = 'Payment'\n break\n default:\n notifType = 'Information'\n break\n }\n }\n\n notificationData = {\n notification_tab: tab,\n notification_type: notifType,\n }\n }\n\n const data = {\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type || 'FP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n return {\n ...notificationData,\n ...data,\n }\n }\n\n private pushDataLayer(eventName: string, tab?: string, type?: string): void {\n const data = this.getParamsData(tab, type)\n window.dataLayer.push({\n event: eventName,\n ...data,\n })\n }\n\n render() {\n return html`<div id=\"headerNotification\" class=\"relative\">\n ${this.isDataLoaded\n ? this.notificationIcon()\n : html`<div\n class=\"cursor-pointer mt-0.5 animate-spin ${this.setTheme({\n icon: this.theme,\n })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'circle-notch', 21, 21))}\n </div>`}\n ${this.isShowDropdown ? this.notificationPopup() : ''}\n </div>`\n }\n}\n"]}
|
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);
|
|
@@ -63,6 +64,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
63
64
|
super.connectedCallback();
|
|
64
65
|
await this.getMeteredPaywallData();
|
|
65
66
|
this.dataLayeronMeteredPaywall();
|
|
67
|
+
addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed']);
|
|
66
68
|
}
|
|
67
69
|
async getMeteredPaywallData() {
|
|
68
70
|
try {
|
|
@@ -187,10 +189,10 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
187
189
|
<image
|
|
188
190
|
src="${(_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.image}"
|
|
189
191
|
alt="content"
|
|
190
|
-
class="w-
|
|
192
|
+
class="w-auto max-h-40"
|
|
191
193
|
/>
|
|
192
194
|
<div
|
|
193
|
-
class="font-lora font-bold text-grey-600 lg:text-2xl text-center"
|
|
195
|
+
class="font-lora font-bold text-grey-600 lg:text-2xl text-center pt-6"
|
|
194
196
|
>
|
|
195
197
|
<div>Halo ${this.user_name},</div>
|
|
196
198
|
<div>${(_d = this.packageData) === null || _d === void 0 ? void 0 : _d.paywall.messageTitleExpand}</div>
|
|
@@ -230,7 +232,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
230
232
|
: html `
|
|
231
233
|
<div class="sticky bottom-0 w-full h-full">
|
|
232
234
|
<div
|
|
233
|
-
class="flex flex-col lg:flex-row w-full bg-blue-100 py-
|
|
235
|
+
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
236
|
>
|
|
235
237
|
<div
|
|
236
238
|
class="text-grey-600 text-base self-center text-left message-formatter font-bold"
|
|
@@ -297,7 +299,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
297
299
|
: nothing}
|
|
298
300
|
</div>
|
|
299
301
|
<div
|
|
300
|
-
class="text-grey-600 font-sans text-
|
|
302
|
+
class="text-grey-600 font-sans text-base self-center text-left message-formatter mb-4 leading-[150%]"
|
|
301
303
|
>
|
|
302
304
|
${unsafeHTML(descriptionExpand)}
|
|
303
305
|
</div>
|
|
@@ -405,7 +407,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
405
407
|
>
|
|
406
408
|
<div class="text-grey-600 font-sans order-2">
|
|
407
409
|
<div
|
|
408
|
-
class="text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-
|
|
410
|
+
class="text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-start lg:text-start"
|
|
409
411
|
>
|
|
410
412
|
<span
|
|
411
413
|
>Halo
|
|
@@ -535,14 +537,14 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
535
537
|
>
|
|
536
538
|
<div class="text-grey-600 font-lora message-formatter order-2">
|
|
537
539
|
<div
|
|
538
|
-
class="text-xl lg:text-2xl font-bold mb-
|
|
540
|
+
class="text-xl lg:text-2xl font-bold mb-3 text-start lg:text-start"
|
|
539
541
|
>
|
|
540
542
|
${(_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.messageTitleExpand}${this
|
|
541
543
|
.user_name
|
|
542
544
|
? `, ${this.user_name}!`
|
|
543
545
|
: ''}
|
|
544
546
|
</div>
|
|
545
|
-
<div class="mb-
|
|
547
|
+
<div class="mb-3 font-sans">
|
|
546
548
|
${unsafeHTML(descriptionExpand)}
|
|
547
549
|
</div>
|
|
548
550
|
<div class="flex flex-col font-sans gap-3 mb-4">
|
|
@@ -569,12 +571,12 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
|
|
|
569
571
|
</div>
|
|
570
572
|
</div>
|
|
571
573
|
<div
|
|
572
|
-
class="flex self-center
|
|
574
|
+
class="flex self-center mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
|
|
573
575
|
>
|
|
574
576
|
<image
|
|
575
577
|
src="${(_g = this.packageData) === null || _g === void 0 ? void 0 : _g.paywall.image}"
|
|
576
578
|
alt="content"
|
|
577
|
-
class="w-
|
|
579
|
+
class="w-full lg:w-[202px] max-h-[116px] lg:max-h-none"
|
|
578
580
|
/>
|
|
579
581
|
</div>
|
|
580
582
|
</div>
|
|
@@ -625,6 +627,7 @@ KompasMeteredPaywallPersonalize.styles = [
|
|
|
625
627
|
color: #999999;
|
|
626
628
|
text-wrap: nowrap;
|
|
627
629
|
font-weight: 400;
|
|
630
|
+
font-size: 14px;
|
|
628
631
|
}
|
|
629
632
|
|
|
630
633
|
.font-lora {
|
|
@@ -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 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 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.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-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
|
}
|