@kompasid/lit-web-components 0.5.3 → 0.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/demo/index.html +2 -2
  2. package/dist/src/components/kompasid-paywall/KompasPaywall.js +2 -2
  3. package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -1
  4. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +5 -3
  5. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +80 -48
  6. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
  7. package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js +1 -1
  8. package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js.map +1 -1
  9. package/dist/src/utils/cta.d.ts +11 -4
  10. package/dist/src/utils/cta.js +3 -3
  11. package/dist/src/utils/cta.js.map +1 -1
  12. package/dist/tailwind/tailwind.js +112 -14
  13. package/dist/tailwind/tailwind.js.map +1 -1
  14. package/dist/tsconfig.tsbuildinfo +1 -1
  15. package/package.json +1 -1
  16. package/src/components/kompasid-paywall/KompasPaywall.ts +2 -2
  17. package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +84 -49
  18. package/src/components/kompasid-paywall-video/KompasPaywallVideo.ts +2 -1
  19. package/src/utils/cta.ts +19 -7
  20. package/tailwind/tailwind.css +112 -14
  21. package/tailwind/tailwind.ts +112 -14
package/demo/index.html CHANGED
@@ -59,7 +59,7 @@
59
59
  const paywallPosition = 1
60
60
  const paywallSubscriptionPackage = 'test subscription'
61
61
  const trackerPageType = 'page_type'
62
- const trackerPageTitle= 'page_title'
62
+ const trackerPageTitle = 'page_title'
63
63
  const trackerContentId = 'content_id'
64
64
  const trackerContentType = 'content_type'
65
65
  const trackerContentTitle = 'content_title'
@@ -142,7 +142,7 @@
142
142
  .head_copy_expand=${headCopyExpand}
143
143
  .head_copy_collapse=${headCopyCollapse}
144
144
  .expand=${expand}
145
- .id=${"freewall"}
145
+ .id=${'freewall'}
146
146
  .paywall_location=${paywallLocation}
147
147
  .paywall_subscription_id=${paywallSubscriptionId}
148
148
  .paywall_subscription_price=${paywallSubscriptionPrice}
package/dist/src/components/kompasid-paywall/KompasPaywall.js CHANGED
@@ -95,7 +95,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
95
95
  percentage: 40,
96
96
  price: 360000,
97
97
  discountPrice: 600000,
98
- periode: '1 Tahun',
98
+ periode: 'Tahun',
99
99
  isHighlight: true,
100
100
  url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',
101
101
  },
@@ -104,7 +104,7 @@ let KompasPaywall = class KompasPaywall extends LitElement {
104
104
  percentage: 0,
105
105
  discountPrice: 0,
106
106
  price: 50000,
107
- periode: '1 Bulan',
107
+ periode: 'Bulan',
108
108
  isHighlight: false,
109
109
  url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',
110
110
  },
package/dist/src/components/kompasid-paywall/KompasPaywall.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .transparent-linear {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 100%, 0)),\n to(#fff)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n }\n\n .transparent-linear-dark {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 18%, 0)),\n to(#121212)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property countdownArticle untuk menghandle count artikel\n * property type untuk menghandle tipe epaper\n * property isWithHeader untuk menghandle paywall information header\n * property textHeader digunakan sebagai text pada paywall information header\n * property paywallData untuk menghandle data paywall\n * property userGuid untuk menghandle user Guid\n * property subscriptionStatus untuk menghandle status subscription user\n * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\n * property paywall_location = The location where user encounter the paywall\n * property paywall_subscription_package = The name of the subscription package viewed by user\n * property paywall_subscription_id = The ID of the subscription package viewed by user\n * property paywall_subscription_price = The price of the subscriprtion package viewed by user\n * property paywall_position = The position of the subscription package viewed by user\n * property page_type = Type of the page\n * property content_id = ID of article (slug)\n * property content_type = Whether it's free article or paid article\n * property content_title = The title of article\n * property tracker_content_categories = The category of the content\n * property user_type = Type of user based on their subscription\n * property subscription_status = Status of their subscription\n * property page_domain = Page Domain\n * property metered_wall_type = The type of Metered Wall\n * property metered_wall_balance = The balance of their metered wall\n * property epaper_edition = The edition of epaper viewed by user\n * property theme = The theme of the paywall component\n */\n\n @state() private paywallData: PaywallProduct = {} as PaywallProduct\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'\n @property({ type: Boolean }) isWithHeader = false\n @property({ type: String }) textHeader = ''\n @property({ type: String }) userGuid = ''\n @property({ type: String }) subscriptionStatus = ''\n @property({ type: Boolean }) swgEnable = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n @property({ type: String }) theme = ''\n\n mockResult: PaywallProduct = {\n informations: {\n title: 'Langganan untuk Lanjut Membaca',\n description: [\n 'Akses seluruh konten Kompas.id web & aplikasi',\n 'ePaper hingga 30 edisi terakhir',\n 'Artikel Riset dan Opini eksklusif dari para ahli',\n 'Buku digital tiap bulannya di aplikasi ',\n ],\n register: {\n img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n label: 'Daftar Sekarang ',\n },\n meterred: {\n maxQuota: 5,\n label: 'Langganan',\n maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n url: 'https://kompas.id/berlangganan',\n },\n },\n packages: {\n title: 'Sekali bayar, tanpa perpanjang otomatis',\n memberships: [\n {\n title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',\n percentage: 40,\n price: 360000,\n discountPrice: 600000,\n periode: '1 Tahun',\n isHighlight: true,\n url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',\n },\n {\n title: 'Kompas Digital Premium 1 Bulan',\n percentage: 0,\n discountPrice: 0,\n price: 50000,\n periode: '1 Bulan',\n isHighlight: false,\n url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',\n },\n ],\n },\n payment: {\n desktop: [\n {\n name: 'gopay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n {\n name: 'dana',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n ],\n mobile: [\n {\n name: 'gopay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n ],\n ekstension: [\n {\n name: 'dana',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n ],\n },\n }\n\n get darkUrl() {\n return this.theme === 'dark' ? '-dark' : ''\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.paywallData = this.mockResult\n }\n\n private transitionBox() {\n return html`\n <div\n class=\"h-20 ${this.theme === 'dark'\n ? 'transparent-linear-dark'\n : 'transparent-linear'} -mt-24 z-0 w-full\"\n ></div>\n `\n }\n\n private renderEpaperPaywallSection() {\n return html`<kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ?swgEnable=${this.swgEnable}\n tracker_content_type=${this.tracker_content_type}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>`\n }\n\n private renderRegularPaywallSection() {\n const defaultHeaderText: string =\n this.paywallData.informations.meterred.maxQuotaMessage\n if (this.isWithHeader) {\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-information-header\n text=${this.textHeader || defaultHeaderText}\n theme=${this.theme}\n ></kompasid-paywall-information-header>\n <kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n tracker_content_type=${this.tracker_content_type}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-body\n tracker_content_type=${this.tracker_content_type}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n\n private selectorTypePaywall = (type: 'epaper' | 'reguler') => {\n switch (type) {\n case 'epaper':\n return this.renderEpaperPaywallSection()\n case 'reguler':\n return this.renderRegularPaywallSection()\n default:\n return this.renderRegularPaywallSection()\n }\n }\n\n render() {\n return html`\n <div class=\"relative w-full\">${this.selectorTypePaywall(this.type)}</div>\n `\n }\n}\n"]}
1
+ {"version":3,"file":"KompasPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/KompasPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement } from 'lit'\nimport { property, state, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PaywallProduct } from './types.js'\nimport '../kompasid-paywall-body/KompasPaywallBody.js'\nimport '../kompasid-paywall-banner-registration/KompasPaywallBannerRegistration.js'\nimport '../kompasid-paywall-information-header/KompasPaywallInformationHeader.js'\n\n@customElement('kompasid-paywall')\nexport class KompasPaywall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .transparent-linear {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 100%, 0)),\n to(#fff)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff);\n }\n\n .transparent-linear-dark {\n background-image: -webkit-gradient(\n linear,\n left top,\n left bottom,\n from(hsla(0, 0%, 18%, 0)),\n to(#121212)\n );\n background-image: linear-gradient(180deg, hsla(0, 0%, 18%, 0), #121212);\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property countdownArticle untuk menghandle count artikel\n * property type untuk menghandle tipe epaper\n * property isWithHeader untuk menghandle paywall information header\n * property textHeader digunakan sebagai text pada paywall information header\n * property paywallData untuk menghandle data paywall\n * property userGuid untuk menghandle user Guid\n * property subscriptionStatus untuk menghandle status subscription user\n * property swgEnable untuk menghandle swg apakah di aktifkan atau tidak\n * property paywall_location = The location where user encounter the paywall\n * property paywall_subscription_package = The name of the subscription package viewed by user\n * property paywall_subscription_id = The ID of the subscription package viewed by user\n * property paywall_subscription_price = The price of the subscriprtion package viewed by user\n * property paywall_position = The position of the subscription package viewed by user\n * property page_type = Type of the page\n * property content_id = ID of article (slug)\n * property content_type = Whether it's free article or paid article\n * property content_title = The title of article\n * property tracker_content_categories = The category of the content\n * property user_type = Type of user based on their subscription\n * property subscription_status = Status of their subscription\n * property page_domain = Page Domain\n * property metered_wall_type = The type of Metered Wall\n * property metered_wall_balance = The balance of their metered wall\n * property epaper_edition = The edition of epaper viewed by user\n * property theme = The theme of the paywall component\n */\n\n @state() private paywallData: PaywallProduct = {} as PaywallProduct\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) type: 'epaper' | 'reguler' = 'reguler'\n @property({ type: Boolean }) isWithHeader = false\n @property({ type: String }) textHeader = ''\n @property({ type: String }) userGuid = ''\n @property({ type: String }) subscriptionStatus = ''\n @property({ type: Boolean }) swgEnable = false\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n @property({ type: String }) theme = ''\n\n mockResult: PaywallProduct = {\n informations: {\n title: 'Langganan untuk Lanjut Membaca',\n description: [\n 'Akses seluruh konten Kompas.id web & aplikasi',\n 'ePaper hingga 30 edisi terakhir',\n 'Artikel Riset dan Opini eksklusif dari para ahli',\n 'Buku digital tiap bulannya di aplikasi ',\n ],\n register: {\n img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',\n title: 'Ingin Membaca Artikel Ini Secara Utuh?',\n subtitle: 'Daftar akun untuk membaca 5 artikel premium secara gratis ',\n label: 'Daftar Sekarang ',\n },\n meterred: {\n maxQuota: 5,\n label: 'Langganan',\n maxQuotaMessage: 'Akses artikel gratis Anda bulan ini sudah habis.',\n url: 'https://kompas.id/berlangganan',\n },\n },\n packages: {\n title: 'Sekali bayar, tanpa perpanjang otomatis',\n memberships: [\n {\n title: 'Kompas Digital Premium 12 Bulan (Hemat 40%)',\n percentage: 40,\n price: 360000,\n discountPrice: 600000,\n periode: 'Tahun',\n isHighlight: true,\n url: 'https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=',\n },\n {\n title: 'Kompas Digital Premium 1 Bulan',\n percentage: 0,\n discountPrice: 0,\n price: 50000,\n periode: 'Bulan',\n isHighlight: false,\n url: 'https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=',\n },\n ],\n },\n payment: {\n desktop: [\n {\n name: 'gopay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n {\n name: 'dana',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n ],\n mobile: [\n {\n name: 'gopay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/gopay${this.darkUrl}.svg`,\n },\n {\n name: 'ovo',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/ovo${this.darkUrl}.svg`,\n },\n {\n name: 'visa',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/visa${this.darkUrl}.svg`,\n },\n {\n name: 'mastercard',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mastercard${this.darkUrl}.svg`,\n },\n ],\n ekstension: [\n {\n name: 'dana',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/dana${this.darkUrl}.svg`,\n },\n {\n name: 'mandiri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/mandiri${this.darkUrl}.svg`,\n },\n {\n name: 'bri',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bri${this.darkUrl}.svg`,\n },\n {\n name: 'bcaklikpay',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca-klik-pay${this.darkUrl}.svg`,\n },\n {\n name: 'akulaku',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/akulaku${this.darkUrl}.svg`,\n },\n {\n name: 'bni',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bni${this.darkUrl}.svg`,\n },\n {\n name: 'indomaret',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/indomaret${this.darkUrl}.svg`,\n },\n {\n name: 'bca',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/bca${this.darkUrl}.svg`,\n },\n {\n name: 'jcb',\n link: `https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/jcb${this.darkUrl}.svg`,\n },\n ],\n },\n }\n\n get darkUrl() {\n return this.theme === 'dark' ? '-dark' : ''\n }\n\n override connectedCallback() {\n super.connectedCallback()\n this.paywallData = this.mockResult\n }\n\n private transitionBox() {\n return html`\n <div\n class=\"h-20 ${this.theme === 'dark'\n ? 'transparent-linear-dark'\n : 'transparent-linear'} -mt-24 z-0 w-full\"\n ></div>\n `\n }\n\n private renderEpaperPaywallSection() {\n return html`<kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ?swgEnable=${this.swgEnable}\n tracker_content_type=${this.tracker_content_type}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>`\n }\n\n private renderRegularPaywallSection() {\n const defaultHeaderText: string =\n this.paywallData.informations.meterred.maxQuotaMessage\n if (this.isWithHeader) {\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-information-header\n text=${this.textHeader || defaultHeaderText}\n theme=${this.theme}\n ></kompasid-paywall-information-header>\n <kompasid-paywall-body\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n tracker_content_type=${this.tracker_content_type}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n return html`\n <div>\n ${this.transitionBox()}\n <div\n class=\"flex flex-col ${this.theme === 'dark'\n ? 'bg-dark-5'\n : 'bg-white'} items-center justify-center mx-4 md:mx-0\"\n >\n <div class=\"flex flex-col w-full max-w-screen-md my-5\">\n <kompasid-paywall-body\n tracker_content_type=${this.tracker_content_type}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_epaper_edition=${this.tracker_epaper_edition}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ?swgEnable=${this.swgEnable}\n ?isLogin=${this.isLogin}\n type=${this.type}\n countdownArticle=${this.countdownArticle}\n .paywallData=${this.paywallData}\n subscriptionStatus=${this.subscriptionStatus}\n userGuid=${this.userGuid}\n theme=${this.theme}\n ></kompasid-paywall-body>\n </div>\n </div>\n </div>\n `\n }\n\n private selectorTypePaywall = (type: 'epaper' | 'reguler') => {\n switch (type) {\n case 'epaper':\n return this.renderEpaperPaywallSection()\n case 'reguler':\n return this.renderRegularPaywallSection()\n default:\n return this.renderRegularPaywallSection()\n }\n }\n\n render() {\n return html`\n <div class=\"relative w-full\">${this.selectorTypePaywall(this.type)}</div>\n `\n }\n}\n"]}
package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts CHANGED
@@ -66,7 +66,7 @@ export declare class KompasIdPaywallBody extends LitElement {
66
66
  private kompasApigenHost;
67
67
  private kompasApiWcmHost;
68
68
  private kompasLoginHost;
69
- private selfHost;
69
+ private epaperHost;
70
70
  private swgPublisherName;
71
71
  private swgPublisherId;
72
72
  private swgProductId;
@@ -77,13 +77,13 @@ export declare class KompasIdPaywallBody extends LitElement {
77
77
  */
78
78
  get loginUrl(): string;
79
79
  get isDark(): boolean;
80
+ get isEntitledForIntroductoryPrice(): boolean;
80
81
  /**
81
82
  * Logic Function
82
83
  */
83
84
  private redirectToCheckout;
84
85
  private redirectToPrevUrl;
85
86
  private redirectToSubscriber;
86
- private redirectToLogin;
87
87
  private redirectToHelpdesk;
88
88
  private parsePrice;
89
89
  private getRegisterToken;
@@ -114,7 +114,6 @@ export declare class KompasIdPaywallBody extends LitElement {
114
114
  private headerSection;
115
115
  private descriptionSection;
116
116
  private informationPackages;
117
- private separatorLine;
118
117
  private epaperRegistrationSection;
119
118
  private regulerRegistrationSection;
120
119
  private registrationSection;
@@ -125,6 +124,9 @@ export declare class KompasIdPaywallBody extends LitElement {
125
124
  private topNavigator;
126
125
  private helpDesk;
127
126
  private userAction;
127
+ private introductoryPrice;
128
+ private swgRegonText;
129
+ private swgPackageSection;
128
130
  /**
129
131
  * Render Statement
130
132
  */
package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js CHANGED
@@ -8,7 +8,7 @@ import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
8
8
  import { deviceType } from '../../utils/deviceType.js';
9
9
  import { formatRupiah } from '../../utils/formatRupiah.js';
10
10
  import { addGoogleFonts } from '../../utils/googleFont.js';
11
- import { redirectToRegister } from '../../utils/cta.js';
11
+ import { redirectToRegister, redirectToLogin } from '../../utils/cta.js';
12
12
  let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
13
13
  constructor() {
14
14
  super(...arguments);
@@ -76,24 +76,24 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
76
76
  this.kompasApigenHost = 'https://apigen.kompas.id';
77
77
  this.kompasApiWcmHost = 'https://apiwcm.kompas.id';
78
78
  this.kompasLoginHost = 'https://account.kompas.id/login';
79
- this.selfHost = 'https://epaper.kompas.id';
79
+ this.epaperHost = 'https://epaper.kompas.id';
80
80
  this.swgPublisherName = 'Harian Kompas';
81
81
  this.swgPublisherId = 'kompas.id';
82
82
  this.swgProductId = 'kompas.id:kompas_digital_premium';
83
83
  this.errorFlag = 0;
84
- this.redirectToLogin = () => {
85
- window.location.href = this.loginUrl;
86
- };
87
84
  }
88
85
  /**
89
86
  * Getter
90
87
  */
91
88
  get loginUrl() {
92
- return `${this.kompasLoginHost}?next=${encodeURIComponent(this.selfHost + window.location.pathname)}&loc=hard_paywall`;
89
+ return `${this.kompasLoginHost}?next=${encodeURIComponent(this.epaperHost + window.location.pathname)}&loc=hard_paywall`;
93
90
  }
94
91
  get isDark() {
95
92
  return this.theme === 'dark';
96
93
  }
94
+ get isEntitledForIntroductoryPrice() {
95
+ return !this.isLogin || this.tracker_subscription_status === 'IA';
96
+ }
97
97
  /**
98
98
  * Logic Function
99
99
  */
@@ -274,7 +274,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
274
274
  '@context': 'https://schema.org',
275
275
  '@type': ['WebSite', 'WebPage'],
276
276
  isAccessibleForFree: false,
277
- url: this.selfHost + window.location.pathname,
277
+ url: this.epaperHost + window.location.pathname,
278
278
  name: this.swgPublisherName,
279
279
  hasPart: {
280
280
  '@type': 'WebPageElement',
@@ -522,20 +522,14 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
522
522
  </button>
523
523
  </div>`;
524
524
  }
525
- separatorLine() {
526
- return html `
527
- <div class="flex flex-row w-full justify-center">
528
- <p class="px-4 pt-1 ${this.isDark ? 'text-dark-1' : 'text-grey-500'}">
529
- atau
530
- </p>
531
- </div>
532
- `;
533
- }
534
525
  epaperRegistrationSection() {
535
526
  return html `
536
527
  <div>
537
528
  <button
538
- @click=${this.redirectToLogin}
529
+ @click=${() => redirectToLogin({
530
+ loc: 'hard_paywall',
531
+ next: this.epaperHost + window.location.pathname,
532
+ })}
539
533
  class="text-sm md:text-base font-bold ${this.isDark
540
534
  ? 'text-blue-300'
541
535
  : 'text-blue-600'} underline"
@@ -569,7 +563,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
569
563
  >atau
570
564
  </span>
571
565
  <button
572
- @click=${this.redirectToLogin}
566
+ @click=${() => redirectToLogin({ loc: 'hard_paywall' })}
573
567
  class="text-sm md:text-base font-bold ${this.isDark
574
568
  ? 'text-blue-300'
575
569
  : 'text-blue-600'} underline"
@@ -626,7 +620,8 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
626
620
  primaryPackages(product) {
627
621
  return html `
628
622
  <div
629
- class="flex flex-wrap justify-between items-center ${this.isDark
623
+ class="flex flex-wrap justify-between h-[68px] items-center ${this
624
+ .isDark
630
625
  ? 'bg-grey-600'
631
626
  : 'bg-white'} rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5 md:mt-4 border border-yellow-400 relative"
632
627
  >
@@ -650,13 +645,13 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
650
645
  </div>
651
646
  </div>
652
647
  <button
653
- class="h-auto ${this.isDark
648
+ class="h-8 ${this.isDark
654
649
  ? 'bg-green-300 border border-green-400'
655
- : 'bg-green-500'} rounded mr-4"
650
+ : 'bg-green-500'} rounded mr-4 flex items-center"
656
651
  @click=${() => this.redirectToCheckout(product.url, 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12', '9802032', 360000, 1)}
657
652
  >
658
653
  <h6
659
- class="text-xs md:text-base ${this.isDark
654
+ class="text-xs md:text-sm ${this.isDark
660
655
  ? 'text-black'
661
656
  : 'text-white'} font-bold py-2 px-4"
662
657
  >
@@ -674,9 +669,9 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
674
669
  secondaryPackages(product) {
675
670
  return html `
676
671
  <div
677
- class="flex flex-wrap justify-between ${this.isDark
672
+ class="flex flex-wrap items-center justify-between ${this.isDark
678
673
  ? 'bg-grey-600'
679
- : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
674
+ : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
680
675
  >
681
676
  <div class="flex items-center">
682
677
  <h5 class="text-base md:text-lg font-bold text-orange-400">
@@ -692,13 +687,13 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
692
687
  </div>
693
688
  <button
694
689
  @click=${() => this.redirectToCheckout(product.url, 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1', '9802035', 50000, 2)}
695
- class="h-auto ${!this.isDark &&
690
+ class="h-8 ${!this.isDark &&
696
691
  'bg-white'} border border-green-500 rounded"
697
692
  >
698
693
  <h6
699
- class="text-xs md:text-base ${this.isDark
694
+ class="text-xs md:text-sm ${this.isDark
700
695
  ? 'text-green-300'
701
- : 'text-green-500'} font-bold py-2 px-4"
696
+ : 'text-green-500'} font-bold px-4 "
702
697
  >
703
698
  Langganan
704
699
  </h6>
@@ -712,6 +707,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
712
707
  ${data.memberships.map(item => item.isHighlight
713
708
  ? this.primaryPackages(item)
714
709
  : this.secondaryPackages(item))}
710
+ ${this.swgEnable ? this.swgPackageSection() : nothing}
715
711
  </div>
716
712
  `;
717
713
  }
@@ -758,6 +754,62 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
758
754
  </div>
759
755
  `;
760
756
  }
757
+ introductoryPrice() {
758
+ return html ` <div
759
+ class="flex space-x-1 h-5 md:h-max overflow-hidden md:flex-col md:space-x-0 items-center md:items-start md:justify-center"
760
+ >
761
+ <h5 class="text-base md:text-lg font-bold text-orange-400">Rp 10.000</h5>
762
+ <p class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}">
763
+ untuk 1 bulan pertama
764
+ </p>
765
+ </div>`;
766
+ }
767
+ swgRegonText() {
768
+ return html `<p
769
+ class="text-xs leading-4 md:max-w-[137px] ${this.isDark
770
+ ? 'text-dark-7'
771
+ : 'text-grey-600'}"
772
+ >
773
+ Berlangganan lebih mudah dengan Google
774
+ </p>`;
775
+ }
776
+ swgPackageSection() {
777
+ return html `
778
+ <div
779
+ class="flex flex-col space-y-2 md:space-x-2 md:space-y-0 md:flex-row justify-between items-center ${this
780
+ .isDark
781
+ ? 'bg-grey-600'
782
+ : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full h-[76px] md:h-[68px] max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
783
+ >
784
+ ${this.isEntitledForIntroductoryPrice
785
+ ? this.introductoryPrice()
786
+ : this.swgRegonText()}
787
+ <div>
788
+ <button
789
+ class="${this.isDark
790
+ ? 'bg-grey-600'
791
+ : 'bg-grey-100 border-grey-100'} border space-x-2 justify-center border-grey-400 rounded-md px-[22px] md:px-6 shadow-sm flex h-max flex-row flex-nowrap py-[5.6px] md:py-1.5 items-center"
792
+ id="subscribe-with-google"
793
+ >
794
+ <p
795
+ class="${this.isDark
796
+ ? 'text-dark-7'
797
+ : 'text-grey-500'} text-[11px] md:text-xs whitespace-nowrap w-full "
798
+ >
799
+ Subscribe with
800
+ </p>
801
+ <img
802
+ class="object-scale-down h-[17px] md:h-5"
803
+ src=${this.isDark
804
+ ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google-white.png'
805
+ : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png'}
806
+ alt="subscribe with google"
807
+ />
808
+ </button>
809
+ </div>
810
+ </div>
811
+ `;
812
+ }
761
813
  /**
762
814
  * Render Statement
763
815
  */
@@ -783,26 +835,6 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
783
835
  ${this.descriptionSection((_c = (_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.description) !== null && _c !== void 0 ? _c : [])}
784
836
  ${this.packagesSection((_e = (_d = this.paywallData) === null || _d === void 0 ? void 0 : _d.packages) !== null && _e !== void 0 ? _e : {})}
785
837
  ${this.informationPackages()}
786
- ${this.swgEnable ? this.separatorLine() : nothing}
787
- ${this.swgEnable
788
- ? html `<button
789
- class="${this.isDark
790
- ? 'bg-grey-600'
791
- : 'border-2 bg-grey-100 border-grey-100'} rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 items-center"
792
- id="subscribe-with-google"
793
- >
794
- <p class=${this.isDark ? 'text-dark-7' : 'text-grey-500'}>
795
- Subscribe with
796
- </p>
797
- <img
798
- class="pl-2 object-scale-down w-20 pt-0.5"
799
- src=${this.isDark
800
- ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google-white.png'
801
- : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png'}
802
- alt="subscribe with google"
803
- />
804
- </button>`
805
- : nothing}
806
838
  ${!this.isLogin
807
839
  ? html `
808
840
  <div
@@ -933,7 +965,7 @@ __decorate([
933
965
  ], KompasIdPaywallBody.prototype, "kompasLoginHost", void 0);
934
966
  __decorate([
935
967
  state()
936
- ], KompasIdPaywallBody.prototype, "selfHost", void 0);
968
+ ], KompasIdPaywallBody.prototype, "epaperHost", void 0);
937
969
  __decorate([
938
970
  state()
939
971
  ], KompasIdPaywallBody.prototype, "swgPublisherName", void 0);