@kompasid/lit-web-components 0.8.24 → 0.8.26

package/demo/index.html

@@ -57,7 +57,7 @@
       import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
       import '../dist/src/components/kompasid-grace-period/KompasGracePeriod.js'
 
-      const type = 'custom'
+      const type = 'epaper'
       const theme = ''
       const paywallLocation = 'paywall_location'
       const paywallSubscriptionId = 'testId'
@@ -99,7 +99,7 @@
       const notificationUrl = '/notif'
       const notificationTotal = '10'
       const ordersUrl = '/orders'
-      const subscriptionUrl = '/subs'
+      const subscriptionUrl = 'https://www.kompas.id/berlangganan'
       const readLaterUrl = '/baca-nanti'
       const totalGracePeriod = '5'
       const productId = 9802032
@@ -122,10 +122,10 @@
 
       const userData = {
         "userName": "User fullname",
-        "expired": "15 Jan 2025 - 14 Feb 2025",
-        "activeInfo": "Kompas.com Plus - KDP 1 Tahun",
-        "isMembership": true,
-        "updateMembership": "",
+        "expired": "",
+        "activeInfo": "",
+        "isMembership": false,
+        "updateMembership": "Perbarui Langganan",
         "totalGracePeriod": 0,
         "isGracePeriod": false
       }
@@ -234,14 +234,40 @@
             .tracker_subscription_status=${trackerSubscriptionStatus}
           >
           </kompasid-paywall>
-          <!-- <kompasid-header-account-profile
-            .userInitialName="'User'"
-            .userData="${userData}"
-            subscriptionUrl="https://www.kompas.id/berlangganan/"
-            .paywall_subscription_package=${paywallSubscriptionPackage}
-            .paywall_subscription_id=${paywallSubscriptionId}
-            .paywall_subscription_price=${paywallSubscriptionPrice}
-          ></kompasid-header-account-profile> -->
+          <div class="metered font-sans">
+            <kompasid-metered-paywall
+            .paywall_location=${paywallLocation}
+              .paywall_subscription_id=${paywallSubscriptionId}
+              .paywall_subscription_price=${paywallSubscriptionPrice}
+              .paywall_position=${paywallPosition}
+              .tracker_page_type=${trackerPageType}
+              .tracker_content_id=${trackerContentId}
+              .tracker_content_type=${trackerContentType}
+              .tracker_content_title=${trackerContentTitle}
+              .tracker_content_categories=${trackerContentCategories}
+              .tracker_user_type=${trackerUserType}
+              .subscriptionStatus=${subscriptionStatus}
+              .tracker_page_domain=${trackerPageDomain}
+              .metered_wall_type=${meteredWallType}
+              .subscriptionStatus=${subscriptionStatus}
+              .tracker_epaper_edition=${trackerEpaperEdition}
+              .metered_wall_balance=${meteredWallBalance}
+            >
+            </kompasid-metered-paywall>
+          </div>
+
+          <!-- <div style="margin: 20px 0">
+            <kompasid-header-account-profile
+              userInitialName="U"
+              .userData="${userData}"
+              subscriptionUrl="https://www.kompas.id/berlangganan/"
+              .paywall_subscription_package=${paywallSubscriptionPackage}
+              .paywall_subscription_id=${paywallSubscriptionId}
+              .paywall_subscription_price=${paywallSubscriptionPrice}
+              openFrom="Kelola_Akun"
+            ></kompasid-header-account-profile>
+          </div> -->
+
           <div class="video">
             <kompasid-paywall-video
               .isLogin=${isLogin}

package/dist/src/components/kompasid-freewall/KompasFreewall.d.ts

@@ -58,6 +58,7 @@ export declare class KompasFreewall extends LitElement {
         price: number;
         position: number;
         title: string;
+        slug: string;
         referrer: string;
     };
     /**

package/dist/src/components/kompasid-freewall/KompasFreewall.js

@@ -63,6 +63,7 @@ let KompasFreewall = class KompasFreewall extends LitElement {
             price: 50000,
             position: 1,
             title: 'Kompas Digital Premium 1 Bulan',
+            slug: 'cash-b2c-halaman-berlangganan-reguler_digital-kdp-1',
             referrer: '',
         };
         /**
@@ -85,7 +86,7 @@ let KompasFreewall = class KompasFreewall extends LitElement {
     prepareImpressionsData() {
         const baseData = {
             paywall_location: this.paywall_location,
-            paywall_subscription_package: this.paywall_subscription_package || this.packageData.title,
+            paywall_subscription_package: this.paywall_subscription_package || this.packageData.slug,
             paywall_subscription_id: this.paywall_subscription_id || this.packageData.id,
             paywall_subscription_price: this.paywall_subscription_price || this.packageData.price,
             paywall_position: this.paywall_position || this.packageData.position,

package/dist/src/components/kompasid-freewall/KompasFreewall.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasFreewall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/KompasFreewall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { JsonPackageData, PackageData } from './types.js'\nimport { redirectToCheckout } from '../../utils/cta.js'\nimport '../kompasid-freewall-head/KompasFreewallHead.js'\nimport '../kompasid-freewall-body/KompasFreewallBody.js'\n\n@customElement('kompasid-freewall')\nexport class KompasFreewall extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .top-shadow {\n        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property type untuk menghandle tipe freewall\n   * property head_copy_expand to update copy header when expand\n   * property head_copy_collapse to update copy header when collapse\n   * property expand to handle expand/collapse\n   * property paywall_location is the location where user encounter the paywall\n   * property paywall_subscription_package is the name of the subscription package viewed by user\n   * property paywall_subscription_id is the ID of the subscription package viewed by user\n   * property paywall_subscription_price is the price of the subscription package viewed by user\n   * property paywall_position is the position of the subscription package viewed by user\n   * property tracker_page_type is the type of the page\n   * property tracker_page_title is the title of the page\n   * property tracker_content_id is the ID of article (slug)\n   * property content_title is the title of article\n   * property tracker_content_categories is the category of the content\n   * property tracker_content_type is to decide whether it's free article or paid article\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: Boolean }) isLogin = false\n  @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n  @property({ type: String }) head_copy_expand = ''\n  @property({ type: String }) head_copy_collapse = ''\n  @property({ type: Boolean }) expand = true\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 = 1\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_page_title = ''\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  showPackage = {\n    duration: 1,\n    durationType: 3,\n    id: '9802035',\n    link: 'kdp?productId=9802035&referrer=',\n    price: 50000,\n    position: 1,\n    title: 'Kompas Digital Premium 1 Bulan',\n    referrer: '',\n  }\n\n  /**\n   * State\n   */\n\n  @state() private isLoading: Boolean = true\n  @state() private isExpand: boolean = true\n  @state() private packageData: PackageData = {} as PackageData\n  @state() private jsonPackageData: JsonPackageData = {} as JsonPackageData\n\n  /**\n   * Getter\n   */\n\n  get isArticle() {\n    return this.type === 'article'\n  }\n\n  /**\n   * Data Layer\n   */\n\n  private prepareImpressionsData(): Record<string, any> {\n    const baseData = {\n      paywall_location: this.paywall_location,\n      paywall_subscription_package:\n        this.paywall_subscription_package || this.packageData.title,\n      paywall_subscription_id:\n        this.paywall_subscription_id || this.packageData.id,\n      paywall_subscription_price:\n        this.paywall_subscription_price || this.packageData.price,\n      paywall_position: this.paywall_position || this.packageData.position,\n      user_type: this.tracker_user_type,\n      subscription_status: this.tracker_subscription_status,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n      page_type: this.tracker_page_type,\n      metered_wall_type: this.tracker_metered_wall_type || 'FP',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n    }\n\n    if (this.isArticle) {\n      return {\n        ...baseData,\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      }\n    }\n    return {\n      ...baseData,\n      page_title: this.tracker_page_title,\n    }\n  }\n\n  private sendDataLayer(\n    event: string,\n    includeImpressions: boolean = false\n  ): void {\n    const impressionsData = this.prepareImpressionsData()\n\n    const data = includeImpressions\n      ? { event, impressions: [impressionsData] }\n      : { event, ...impressionsData }\n\n    window.dataLayer.push(data)\n  }\n\n  private sendDataLayerPaywallViewed(): void {\n    if (this.isExpand) this.sendDataLayer('paywall_viewed', true)\n  }\n\n  private sendDataLayerSubscribeButtonClicked(): void {\n    this.sendDataLayer('subscribe_button_clicked')\n  }\n\n  /**\n   * Logic Function\n   */\n\n  private toggleExpand() {\n    this.isExpand = !this.isExpand\n    this.sendDataLayerPaywallViewed()\n  }\n\n  private onSubscriptionClick() {\n    this.sendDataLayerSubscribeButtonClicked()\n    redirectToCheckout({\n      link: `${this.jsonPackageData.subscriptionUrl}&referrer=${this.packageData.referrer}`,\n      source: this.type,\n    })\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n\n    this.isExpand = this.expand\n\n    const originHost: string = encodeURIComponent(window.location.href)\n    this.packageData = { ...this.showPackage, referrer: originHost }\n    this.getFreewallData()\n\n    this.sendDataLayerPaywallViewed()\n  }\n\n  async getFreewallData() {\n    try {\n      const response = await fetch(\n        'https://cdn-www.kompas.id/web-component/freewall.json'\n      )\n      const json = await response.json()\n      this.jsonPackageData = {\n        headCopyCollapse: json.headCopyCollapse,\n        headCopyExpand: json.headCopyExpand,\n        subscriptionUrl: json.subscriptionUrl,\n        subscriptionTitle: json.subscriptionTitle,\n        subscriptionTitleGuest: json.subscriptionTitleGuest,\n        subscriptionDescription: json.subscriptionDescription,\n        subscriptionButtonText: json.subscriptionButtonText,\n        registerTitle: json.registerTitle,\n        registerDescription: json.registerDescription,\n        registerButtonText: json.registerButtonText,\n      }\n    } catch (error) {\n      throw Error('Failed to get metered paywall data')\n    } finally {\n      this.isLoading = false\n    }\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return !this.isLoading\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full z-20 top-shadow\">\n            <div\n              class=\"flex flex-col w-full bg-blue-100 justify-center ${this\n                .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24\"\n            >\n              <kompasid-freewall-head\n                .expand=${this.isExpand}\n                .type=${this.type}\n                .head_copy_expand=${this.jsonPackageData.headCopyExpand}\n                .head_copy_collapse=${this.jsonPackageData.headCopyCollapse}\n                .toggleExpand=${() => this.toggleExpand()}\n                .onSubscriptionClick=${() => this.onSubscriptionClick()}\n                .packageData=${this.packageData}\n                .jsonPackageData=${this.jsonPackageData}\n              ></kompasid-freewall-head>\n              ${this.isExpand\n                ? html`<kompasid-freewall-body\n                    .type=${this.type}\n                    .onSubscriptionClick=${() => this.onSubscriptionClick()}\n                    .packageData=${this.packageData}\n                    .jsonPackageData=${this.jsonPackageData}\n                    ?isLogin=${this.isLogin}\n                  ></kompasid-freewall-body>`\n                : nothing}\n            </div>\n          </div>\n        `\n      : nothing\n  }\n}\n"]}
+{"version":3,"file":"KompasFreewall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/KompasFreewall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { JsonPackageData, PackageData } from './types.js'\nimport { redirectToCheckout } from '../../utils/cta.js'\nimport '../kompasid-freewall-head/KompasFreewallHead.js'\nimport '../kompasid-freewall-body/KompasFreewallBody.js'\n\n@customElement('kompasid-freewall')\nexport class KompasFreewall extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .top-shadow {\n        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property isLogin untuk menghandle apakah user sudah login atau belum\n   * property type untuk menghandle tipe freewall\n   * property head_copy_expand to update copy header when expand\n   * property head_copy_collapse to update copy header when collapse\n   * property expand to handle expand/collapse\n   * property paywall_location is the location where user encounter the paywall\n   * property paywall_subscription_package is the name of the subscription package viewed by user\n   * property paywall_subscription_id is the ID of the subscription package viewed by user\n   * property paywall_subscription_price is the price of the subscription package viewed by user\n   * property paywall_position is the position of the subscription package viewed by user\n   * property tracker_page_type is the type of the page\n   * property tracker_page_title is the title of the page\n   * property tracker_content_id is the ID of article (slug)\n   * property content_title is the title of article\n   * property tracker_content_categories is the category of the content\n   * property tracker_content_type is to decide whether it's free article or paid article\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: Boolean }) isLogin = false\n  @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n  @property({ type: String }) head_copy_expand = ''\n  @property({ type: String }) head_copy_collapse = ''\n  @property({ type: Boolean }) expand = true\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 = 1\n  @property({ type: String }) tracker_page_type = ''\n  @property({ type: String }) tracker_page_title = ''\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  showPackage = {\n    duration: 1,\n    durationType: 3,\n    id: '9802035',\n    link: 'kdp?productId=9802035&referrer=',\n    price: 50000,\n    position: 1,\n    title: 'Kompas Digital Premium 1 Bulan',\n    slug: 'cash-b2c-halaman-berlangganan-reguler_digital-kdp-1',\n    referrer: '',\n  }\n\n  /**\n   * State\n   */\n\n  @state() private isLoading: Boolean = true\n  @state() private isExpand: boolean = true\n  @state() private packageData: PackageData = {} as PackageData\n  @state() private jsonPackageData: JsonPackageData = {} as JsonPackageData\n\n  /**\n   * Getter\n   */\n\n  get isArticle() {\n    return this.type === 'article'\n  }\n\n  /**\n   * Data Layer\n   */\n\n  private prepareImpressionsData(): Record<string, any> {\n    const baseData = {\n      paywall_location: this.paywall_location,\n      paywall_subscription_package:\n        this.paywall_subscription_package || this.packageData.slug,\n      paywall_subscription_id:\n        this.paywall_subscription_id || this.packageData.id,\n      paywall_subscription_price:\n        this.paywall_subscription_price || this.packageData.price,\n      paywall_position: this.paywall_position || this.packageData.position,\n      user_type: this.tracker_user_type,\n      subscription_status: this.tracker_subscription_status,\n      page_domain: this.tracker_page_domain || 'Kompas.id',\n      page_type: this.tracker_page_type,\n      metered_wall_type: this.tracker_metered_wall_type || 'FP',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n    }\n\n    if (this.isArticle) {\n      return {\n        ...baseData,\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      }\n    }\n    return {\n      ...baseData,\n      page_title: this.tracker_page_title,\n    }\n  }\n\n  private sendDataLayer(\n    event: string,\n    includeImpressions: boolean = false\n  ): void {\n    const impressionsData = this.prepareImpressionsData()\n\n    const data = includeImpressions\n      ? { event, impressions: [impressionsData] }\n      : { event, ...impressionsData }\n\n    window.dataLayer.push(data)\n  }\n\n  private sendDataLayerPaywallViewed(): void {\n    if (this.isExpand) this.sendDataLayer('paywall_viewed', true)\n  }\n\n  private sendDataLayerSubscribeButtonClicked(): void {\n    this.sendDataLayer('subscribe_button_clicked')\n  }\n\n  /**\n   * Logic Function\n   */\n\n  private toggleExpand() {\n    this.isExpand = !this.isExpand\n    this.sendDataLayerPaywallViewed()\n  }\n\n  private onSubscriptionClick() {\n    this.sendDataLayerSubscribeButtonClicked()\n    redirectToCheckout({\n      link: `${this.jsonPackageData.subscriptionUrl}&referrer=${this.packageData.referrer}`,\n      source: this.type,\n    })\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n\n    this.isExpand = this.expand\n\n    const originHost: string = encodeURIComponent(window.location.href)\n    this.packageData = { ...this.showPackage, referrer: originHost }\n    this.getFreewallData()\n\n    this.sendDataLayerPaywallViewed()\n  }\n\n  async getFreewallData() {\n    try {\n      const response = await fetch(\n        'https://cdn-www.kompas.id/web-component/freewall.json'\n      )\n      const json = await response.json()\n      this.jsonPackageData = {\n        headCopyCollapse: json.headCopyCollapse,\n        headCopyExpand: json.headCopyExpand,\n        subscriptionUrl: json.subscriptionUrl,\n        subscriptionTitle: json.subscriptionTitle,\n        subscriptionTitleGuest: json.subscriptionTitleGuest,\n        subscriptionDescription: json.subscriptionDescription,\n        subscriptionButtonText: json.subscriptionButtonText,\n        registerTitle: json.registerTitle,\n        registerDescription: json.registerDescription,\n        registerButtonText: json.registerButtonText,\n      }\n    } catch (error) {\n      throw Error('Failed to get metered paywall data')\n    } finally {\n      this.isLoading = false\n    }\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return !this.isLoading\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full z-20 top-shadow\">\n            <div\n              class=\"flex flex-col w-full bg-blue-100 justify-center ${this\n                .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24\"\n            >\n              <kompasid-freewall-head\n                .expand=${this.isExpand}\n                .type=${this.type}\n                .head_copy_expand=${this.jsonPackageData.headCopyExpand}\n                .head_copy_collapse=${this.jsonPackageData.headCopyCollapse}\n                .toggleExpand=${() => this.toggleExpand()}\n                .onSubscriptionClick=${() => this.onSubscriptionClick()}\n                .packageData=${this.packageData}\n                .jsonPackageData=${this.jsonPackageData}\n              ></kompasid-freewall-head>\n              ${this.isExpand\n                ? html`<kompasid-freewall-body\n                    .type=${this.type}\n                    .onSubscriptionClick=${() => this.onSubscriptionClick()}\n                    .packageData=${this.packageData}\n                    .jsonPackageData=${this.jsonPackageData}\n                    ?isLogin=${this.isLogin}\n                  ></kompasid-freewall-body>`\n                : nothing}\n            </div>\n          </div>\n        `\n      : nothing\n  }\n}\n"]}

package/dist/src/components/kompasid-freewall/types.d.ts

@@ -6,6 +6,7 @@ export interface PackageData {
     price: number;
     position: number;
     title: string;
+    slug: string;
     referrer: string;
 }
 export interface JsonPackageData {

package/dist/src/components/kompasid-freewall/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface PackageData {\n  duration: number\n  durationType: number\n  id: string\n  link: string\n  price: number\n  position: number\n  title: string\n  referrer: string\n}\n\nexport interface JsonPackageData {\n  headCopyCollapse: string\n  headCopyExpand: string\n  subscriptionUrl: string\n  subscriptionTitle: string\n  subscriptionTitleGuest: string\n  subscriptionDescription: string[]\n  subscriptionButtonText: string\n  registerTitle: string\n  registerDescription: string[]\n  registerButtonText: string\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface PackageData {\n  duration: number\n  durationType: number\n  id: string\n  link: string\n  price: number\n  position: number\n  title: string\n  slug: string\n  referrer: string\n}\n\nexport interface JsonPackageData {\n  headCopyCollapse: string\n  headCopyExpand: string\n  subscriptionUrl: string\n  subscriptionTitle: string\n  subscriptionTitleGuest: string\n  subscriptionDescription: string[]\n  subscriptionButtonText: string\n  registerTitle: string\n  registerDescription: string[]\n  registerButtonText: string\n}\n"]}

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js

@@ -98,7 +98,8 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     redirectToBerlangganan() {
         this.dataLayeronPerbaruiLanggananButton();
         this.sendGtmEvent('subscribe_button_clicked', true);
-        window.open(this.subscriptionPage);
+        const url = `${this.subscriptionPage}?open_from=Grace_Period`;
+        window.open(url);
     }
     redirectToCheckout() {
         this.dataLayeronPerbaruiLanggananButton();

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property isEpaper = is paywall opened in epaper page\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 tracker_page_type = type of the page\n   * property tracker_content_id = ID of article (slug)\n   * property tracker_content_type = whether it's free article or paid article\n   * property tracker_content_title = the title of article\n   * property tracker_content_categories = the category of the content\n   * property tracker_user_type = type of user based on their subscription\n   * property tracker_subscription_status = status of their subscription\n   * property tracker_page_domain = page Domain\n   * property tracker_metered_wall_type = the type of Metered Wall\n   * property tracker_metered_wall_balance = the balance of their metered wall\n   * property tracker_epaper_edition = the edition of epaper viewed by user\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = true\n  @property({ type: Boolean }) isEpaper = false\n  @property({ type: Boolean }) isBackgroundOnContentOnly = 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\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n  @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam\n          <a\n            href=\"#\"\n            class=\"text-orange-500 underline font-bold cursor-pointer\"\n            @click=${this.redirectToKnowledgeBase}\n          >\n            hari terakhir\n          </a>\n          masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n          mengakses konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <a\n          href=\"#\"\n          class=\"text-orange-500 underline font-bold cursor-pointer\"\n          @click=${this.redirectToKnowledgeBase}\n        >\n          ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToKnowledgeBase(): void {\n    window.open(\n      'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n      '_blank'\n    )\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    this.sendGtmEvent('subscribe_button_clicked', true)\n\n    window.open(this.subscriptionPage)\n  }\n\n  private redirectToCheckout(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    const originHost: string = encodeURIComponent(window.location.href)\n\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    window.open(\n      `${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`\n    )\n  }\n\n  private getGtmParams(\n    excludeSubscriptionParams: boolean = false\n  ): Record<string, any> {\n    const gtmParams: Record<string, any> = {}\n\n    if (!this.isEpaper) {\n      gtmParams.content_title = this.tracker_content_title\n      gtmParams.content_id = this.tracker_content_id\n      gtmParams.content_categories = this.tracker_content_categories\n      gtmParams.content_type = this.tracker_content_type\n      gtmParams.page_type = this.tracker_page_type\n    } else {\n      gtmParams.epaper_edition = this.tracker_epaper_edition\n    }\n\n    if (!excludeSubscriptionParams) {\n      gtmParams.paywall_subscription_package = this.paywall_subscription_package\n      gtmParams.paywall_subscription_id = this.paywall_subscription_id\n      gtmParams.paywall_subscription_price = this.paywall_subscription_price\n    }\n\n    gtmParams.paywall_location = this.paywall_location\n    gtmParams.paywall_position = this.paywall_position\n    gtmParams.user_type = this.tracker_user_type\n    gtmParams.subscription_status = this.tracker_subscription_status\n    gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id'\n    gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP'\n    gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n    return gtmParams\n  }\n\n  private sendGtmEvent(\n    event: string,\n    excludeSubscriptionParams: boolean = false\n  ) {\n    let gtmParams: Record<string, any> = { event }\n\n    if (event === 'paywall_viewed') {\n      gtmParams.impressions = [\n        {\n          ...this.getGtmParams(excludeSubscriptionParams),\n        },\n      ]\n    } else {\n      gtmParams = {\n        ...gtmParams,\n        ...this.getGtmParams(excludeSubscriptionParams),\n      }\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    const { isColumn, isBackgroundOnContentOnly } = this\n\n    const wrapperColumnClass = isColumn\n      ? 'rounded-lg'\n      : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n    const buttonColumnClass = isColumn\n      ? ''\n      : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n    const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n    const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n    const contentBgClass = isBackgroundOnContentOnly\n      ? 'bg-orange-100 p-4 rounded-lg mb-4'\n      : ''\n\n    return html`\n      <div\n        class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n      >\n        <div\n          class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n        >\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${this.isShowButton\n          ? html`\n              <div\n                class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n              >\n                <button\n                  @click=${this.redirectToCheckout}\n                  class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n                >\n                  Perbarui Langganan\n                </button>\n                <div class=\"md:block hidden\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n                  >\n                    Paket Lainnya\n                  </button>\n                </div>\n                <div class=\"md:hidden block\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n                  >\n                    Lihat Paket Lainnya\n                  </button>\n                </div>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n\n    this.sendGtmEvent('paywall_viewed')\n\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    const bgClass = !this.isBackgroundOnContentOnly\n      ? 'bg-orange-100 sticky bottom-0 z-20'\n      : ''\n    return html`\n      <div class=\"h-full w-full ${bgClass}\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n\n      .body {\n        position: sticky;\n        top: 0;\n        height: 100%;\n        width: 100%;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * property totalGracePeriod = how many days are left in grace period\n   * property isColumn = changes how the component looks on different screen sizes\n   * property isShowButton = shows or hides a subscription button\n   * property isEpaper = is paywall opened in epaper page\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 tracker_page_type = type of the page\n   * property tracker_content_id = ID of article (slug)\n   * property tracker_content_type = whether it's free article or paid article\n   * property tracker_content_title = the title of article\n   * property tracker_content_categories = the category of the content\n   * property tracker_user_type = type of user based on their subscription\n   * property tracker_subscription_status = status of their subscription\n   * property tracker_page_domain = page Domain\n   * property tracker_metered_wall_type = the type of Metered Wall\n   * property tracker_metered_wall_balance = the balance of their metered wall\n   * property tracker_epaper_edition = the edition of epaper viewed by user\n   */\n\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: Boolean }) isColumn = false\n  @property({ type: Boolean }) isShowButton = true\n  @property({ type: Boolean }) isEpaper = false\n  @property({ type: Boolean }) isBackgroundOnContentOnly = 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\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n  @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n  @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n\n  private getCountdownGracePeriod() {\n    const { totalGracePeriod } = this\n    const { maxGracePeriod } = this\n    if (totalGracePeriod === 7) {\n      return html`\n        <p>\n          Anda dalam\n          <a\n            href=\"#\"\n            class=\"text-orange-500 underline font-bold cursor-pointer\"\n            @click=${this.redirectToKnowledgeBase}\n          >\n            hari terakhir\n          </a>\n          masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n          mengakses konten premium tanpa batas.\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Masa tenggang langganan Anda tersisa\n        <a\n          href=\"#\"\n          class=\"text-orange-500 underline font-bold cursor-pointer\"\n          @click=${this.redirectToKnowledgeBase}\n        >\n          ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n        >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n        tanpa batas.\n      </p>\n    `\n  }\n\n  private redirectToKnowledgeBase(): void {\n    window.open(\n      'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n      '_blank'\n    )\n  }\n\n  private redirectToBerlangganan(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    this.sendGtmEvent('subscribe_button_clicked', true)\n\n    const url = `${this.subscriptionPage}?open_from=Grace_Period`\n    window.open(url)\n  }\n\n  private redirectToCheckout(): void {\n    this.dataLayeronPerbaruiLanggananButton()\n    const originHost: string = encodeURIComponent(window.location.href)\n\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    window.open(\n      `${this.checkoutPage}/kdp?productId=${this.paywall_subscription_id}&referrer=${originHost}&source=article`\n    )\n  }\n\n  private getGtmParams(\n    excludeSubscriptionParams: boolean = false\n  ): Record<string, any> {\n    const gtmParams: Record<string, any> = {}\n\n    if (!this.isEpaper) {\n      gtmParams.content_title = this.tracker_content_title\n      gtmParams.content_id = this.tracker_content_id\n      gtmParams.content_categories = this.tracker_content_categories\n      gtmParams.content_type = this.tracker_content_type\n      gtmParams.page_type = this.tracker_page_type\n    } else {\n      gtmParams.epaper_edition = this.tracker_epaper_edition\n    }\n\n    if (!excludeSubscriptionParams) {\n      gtmParams.paywall_subscription_package = this.paywall_subscription_package\n      gtmParams.paywall_subscription_id = this.paywall_subscription_id\n      gtmParams.paywall_subscription_price = this.paywall_subscription_price\n    }\n\n    gtmParams.paywall_location = this.paywall_location\n    gtmParams.paywall_position = this.paywall_position\n    gtmParams.user_type = this.tracker_user_type\n    gtmParams.subscription_status = this.tracker_subscription_status\n    gtmParams.page_domain = this.tracker_page_domain || 'Kompas.id'\n    gtmParams.metered_wall_type = this.tracker_metered_wall_type || 'GP'\n    gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n    return gtmParams\n  }\n\n  private sendGtmEvent(\n    event: string,\n    excludeSubscriptionParams: boolean = false\n  ) {\n    let gtmParams: Record<string, any> = { event }\n\n    if (event === 'paywall_viewed') {\n      gtmParams.impressions = [\n        {\n          ...this.getGtmParams(excludeSubscriptionParams),\n        },\n      ]\n    } else {\n      gtmParams = {\n        ...gtmParams,\n        ...this.getGtmParams(excludeSubscriptionParams),\n      }\n    }\n\n    window.dataLayer.push(gtmParams)\n  }\n\n  private dataLayeronPerbaruiLanggananButton(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodClick',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private dataLayeronGracePeriod(): void {\n    window.dataLayer.push({\n      event: 'gracePeriodImpression',\n      interface: deviceType(),\n      dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n      urlName: window.location.href,\n    })\n  }\n\n  private gracePeriodTemplate() {\n    const { isColumn, isBackgroundOnContentOnly } = this\n\n    const wrapperColumnClass = isColumn\n      ? 'rounded-lg'\n      : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n    const buttonColumnClass = isColumn\n      ? ''\n      : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n    const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n    const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n    const contentBgClass = isBackgroundOnContentOnly\n      ? 'bg-orange-100 p-4 rounded-lg mb-4'\n      : ''\n\n    return html`\n      <div\n        class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n      >\n        <div\n          class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n        >\n          ${this.getCountdownGracePeriod()}\n        </div>\n        ${this.isShowButton\n          ? html`\n              <div\n                class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n              >\n                <button\n                  @click=${this.redirectToCheckout}\n                  class=\"w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n                >\n                  Perbarui Langganan\n                </button>\n                <div class=\"md:block hidden\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n                  >\n                    Paket Lainnya\n                  </button>\n                </div>\n                <div class=\"md:hidden block\">\n                  <button\n                    @click=${this.redirectToBerlangganan}\n                    class=\"bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}\"\n                  >\n                    Lihat Paket Lainnya\n                  </button>\n                </div>\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n\n    this.sendGtmEvent('paywall_viewed')\n\n    this.dataLayeronGracePeriod()\n  }\n\n  render() {\n    const bgClass = !this.isBackgroundOnContentOnly\n      ? 'bg-orange-100 sticky bottom-0 z-20'\n      : ''\n    return html`\n      <div class=\"h-full w-full ${bgClass}\">\n        ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.d.ts

@@ -10,6 +10,7 @@ export declare class KompasHeaderAccountProfile extends LitElement {
     userData: User;
     subscriptionUrl: string;
     totalGracePeriod: number;
+    openFrom: string;
     /**
      * Props For Grace Period Tracker
      */

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js

@@ -16,6 +16,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
         this.userData = {};
         this.subscriptionUrl = '';
         this.totalGracePeriod = 0;
+        this.openFrom = '';
         /**
          * Props For Grace Period Tracker
          */
@@ -72,7 +73,8 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
                 return html ``;
             }
             const handleSubscribe = () => {
-                window.location.href = this.subscriptionUrl;
+                const openFromValue = this.openFrom || 'Sidebar_Menu';
+                window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`;
             };
             return html `
         <div class="w-full">
@@ -210,6 +212,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], KompasHeaderAccountProfile.prototype, "totalGracePeriod", void 0);
+__decorate([
+    property({ type: String })
+], KompasHeaderAccountProfile.prototype, "openFrom", void 0);
 __decorate([
     property({ type: String })
 ], KompasHeaderAccountProfile.prototype, "paywall_location", void 0);

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, subDays, addDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { truncate } from '../../utils/text.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n  static styles = [\n    css`\n      .header-account--membership-icon {\n        position: absolute;\n        bottom: -2px;\n        right: -2px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  @property({ type: String }) userInitialName = ''\n  @property({ type: Object }) userData = {} as User\n  @property({ type: String }) subscriptionUrl = ''\n  @property({ type: Number }) totalGracePeriod = 0\n\n  /**\n   * Props For Grace Period Tracker\n   */\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\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n\n  formatDate(date: Date | string) {\n    return format(new Date(date), 'dd MMM yyyy', { locale: id })\n  }\n\n  private renderSkeletonLoading() {\n    return html`\n      <div>\n        <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n          <div\n            class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n          ></div>\n          <div class=\"flex flex-col text-left w-40 gap-y-2\">\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderProfileContent() {\n    /**\n     * Subs Button Element\n     */\n    const subscribeButton = () => {\n      if (!(this.userData as any)?.updateMembership) {\n        return html``\n      }\n      const handleSubscribe = () => {\n        window.location.href = this.subscriptionUrl\n      }\n\n      return html`\n        <div class=\"w-full\">\n          <button\n            @click=${handleSubscribe}\n            class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-green-500 text-grey-100 font-bold text-base focus:outline-none\"\n          >\n            ${(this.userData as any)?.updateMembership}\n          </button>\n        </div>\n      `\n    }\n    /**\n     * membership icon element, show if isMebership has truthy value\n     */\n    const membershipIcon = () => {\n      if (!this.userData?.isMembership) {\n        return html``\n      }\n\n      return html`\n        <div>\n          <img\n            class=\"header-account--membership-icon h-6 w-6\"\n            src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n            alt=\"membership-crown-icon\"\n          />\n        </div>\n      `\n    }\n\n    /**\n     * Active Info Element\n     */\n\n    const activeInfoTemplate = () => {\n      const { isGracePeriod, totalGracePeriod, activeInfo, expired } =\n        this.userData\n\n      let startGracePeriodDate\n      let endGracePeriodDate\n\n      if (isGracePeriod) {\n        const totalGraceSubs = Math.max(totalGracePeriod - 1, 0)\n        startGracePeriodDate = this.formatDate(\n          subDays(new Date(), totalGraceSubs)\n        )\n        endGracePeriodDate = this.formatDate(\n          addDays(new Date(), this.maxGracePeriod - totalGracePeriod)\n        )\n      }\n\n      const expiredTextColor = isGracePeriod\n        ? `text-orange-500`\n        : `text-grey-600`\n\n      const text = isGracePeriod\n        ? html`<span> Periode Masa Tenggang </span>\n            <p class=\"font-bold\">\n              ${startGracePeriodDate} - ${endGracePeriodDate}\n            </p> `\n        : html`<p>${activeInfo}</p>\n            <p class=\"font-bold\">${expired}</p>` || ''\n\n      return html`<p class=\"text-sm ${expiredTextColor}\">${text}</p>`\n    }\n\n    return html`<div\n      class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n    >\n      <div class=\"flex flex-row items-center gap-4\">\n        <div\n          class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n        >\n          <span class=\"capitalize text-2xl text-grey-100 font-bold\"\n            >${this.userInitialName}</span\n          >\n          ${membershipIcon()}\n        </div>\n\n        <div class=\"flex flex-col text-left\">\n          <p class=\"capitalize font-bold text-base text-blue-600\">\n            ${truncate(this.userData.userName, 25)}\n          </p>\n          ${activeInfoTemplate()}\n        </div>\n      </div>\n\n      ${this.userData?.isGracePeriod\n        ? html`<div class=\"mt-4\">\n            <kompasid-grace-period\n              totalGracePeriod=${this.userData.totalGracePeriod}\n              isColumn=\"true\"\n              isShowButton=\"true\"\n              isBackgroundOnContentOnly=\"true\"\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_content_type=${this.tracker_content_type}\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_metered_wall_balance=${this.tracker_metered_wall_balance}\n            ></kompasid-grace-period>\n          </div>`\n        : subscribeButton()}\n    </div>`\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n  }\n\n  render() {\n    return html`\n      <div class=\"flex flex-shrink-0 flex-col bg-blue-100 p-4\">\n        ${!this.userData\n          ? this.renderSkeletonLoading()\n          : this.renderProfileContent()}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, subDays, addDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { truncate } from '../../utils/text.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n  static styles = [\n    css`\n      .header-account--membership-icon {\n        position: absolute;\n        bottom: -2px;\n        right: -2px;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  @property({ type: String }) userInitialName = ''\n  @property({ type: Object }) userData = {} as User\n  @property({ type: String }) subscriptionUrl = ''\n  @property({ type: Number }) totalGracePeriod = 0\n  @property({ type: String }) openFrom = ''\n  /**\n   * Props For Grace Period Tracker\n   */\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\n  /**\n   * State\n   */\n  @state() private maxGracePeriod = 7\n\n  formatDate(date: Date | string) {\n    return format(new Date(date), 'dd MMM yyyy', { locale: id })\n  }\n\n  private renderSkeletonLoading() {\n    return html`\n      <div>\n        <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n          <div\n            class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n          ></div>\n          <div class=\"flex flex-col text-left w-40 gap-y-2\">\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n            <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n          </div>\n        </div>\n        <div>\n          <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n        </div>\n      </div>\n    `\n  }\n\n  private renderProfileContent() {\n    /**\n     * Subs Button Element\n     */\n    const subscribeButton = () => {\n      if (!(this.userData as any)?.updateMembership) {\n        return html``\n      }\n      const handleSubscribe = () => {\n        const openFromValue = this.openFrom || 'Sidebar_Menu'\n        window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n      }\n\n      return html`\n        <div class=\"w-full\">\n          <button\n            @click=${handleSubscribe}\n            class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-green-500 text-grey-100 font-bold text-base focus:outline-none\"\n          >\n            ${(this.userData as any)?.updateMembership}\n          </button>\n        </div>\n      `\n    }\n    /**\n     * membership icon element, show if isMebership has truthy value\n     */\n    const membershipIcon = () => {\n      if (!this.userData?.isMembership) {\n        return html``\n      }\n\n      return html`\n        <div>\n          <img\n            class=\"header-account--membership-icon h-6 w-6\"\n            src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n            alt=\"membership-crown-icon\"\n          />\n        </div>\n      `\n    }\n\n    /**\n     * Active Info Element\n     */\n\n    const activeInfoTemplate = () => {\n      const { isGracePeriod, totalGracePeriod, activeInfo, expired } =\n        this.userData\n\n      let startGracePeriodDate\n      let endGracePeriodDate\n\n      if (isGracePeriod) {\n        const totalGraceSubs = Math.max(totalGracePeriod - 1, 0)\n        startGracePeriodDate = this.formatDate(\n          subDays(new Date(), totalGraceSubs)\n        )\n        endGracePeriodDate = this.formatDate(\n          addDays(new Date(), this.maxGracePeriod - totalGracePeriod)\n        )\n      }\n\n      const expiredTextColor = isGracePeriod\n        ? `text-orange-500`\n        : `text-grey-600`\n\n      const text = isGracePeriod\n        ? html`<span> Periode Masa Tenggang </span>\n            <p class=\"font-bold\">\n              ${startGracePeriodDate} - ${endGracePeriodDate}\n            </p> `\n        : html`<p>${activeInfo}</p>\n            <p class=\"font-bold\">${expired}</p>` || ''\n\n      return html`<p class=\"text-sm ${expiredTextColor}\">${text}</p>`\n    }\n\n    return html`<div\n      class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n    >\n      <div class=\"flex flex-row items-center gap-4\">\n        <div\n          class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n        >\n          <span class=\"capitalize text-2xl text-grey-100 font-bold\"\n            >${this.userInitialName}</span\n          >\n          ${membershipIcon()}\n        </div>\n\n        <div class=\"flex flex-col text-left\">\n          <p class=\"capitalize font-bold text-base text-blue-600\">\n            ${truncate(this.userData.userName, 25)}\n          </p>\n          ${activeInfoTemplate()}\n        </div>\n      </div>\n\n      ${this.userData?.isGracePeriod\n        ? html`<div class=\"mt-4\">\n            <kompasid-grace-period\n              totalGracePeriod=${this.userData.totalGracePeriod}\n              isColumn=\"true\"\n              isShowButton=\"true\"\n              isBackgroundOnContentOnly=\"true\"\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_content_type=${this.tracker_content_type}\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_metered_wall_balance=${this.tracker_metered_wall_balance}\n            ></kompasid-grace-period>\n          </div>`\n        : subscribeButton()}\n    </div>`\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n  }\n\n  render() {\n    return html`\n      <div class=\"flex flex-shrink-0 flex-col bg-blue-100 p-4\">\n        ${!this.userData\n          ? this.renderSkeletonLoading()\n          : this.renderProfileContent()}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js

@@ -10,7 +10,7 @@ let KompasMeteredPaywall = class KompasMeteredPaywall extends LitElement {
         this.packageData = {
             subscriptionText: 'Langganan untuk akses tanpa batas',
             buttonText: 'Langganan',
-            subscriptionUrl: 'https://www.kompas.id/berlangganan',
+            subscriptionUrl: 'https://www.kompas.id/berlangganan?open_from=Metered_Paywall',
         };
         /**
          * Props
@@ -151,7 +151,7 @@ let KompasMeteredPaywall = class KompasMeteredPaywall extends LitElement {
               <div class="self-center">
                 <button
                   @click="${this.redirectToBerlangganan}"
-                  class="bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl"
+                  class="bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base font-sans"
                 >
                   ${this.packageData.buttonText}
                 </button>

package/dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasMeteredPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-paywall/KompasMeteredPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData } from './types.js'\n\n@customElement('kompasid-metered-paywall')\nexport class KompasMeteredPaywall 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      .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 = {\n    subscriptionText: 'Langganan untuk akses tanpa batas',\n    buttonText: 'Langganan',\n    subscriptionUrl: 'https://www.kompas.id/berlangganan',\n  }\n\n  /**\n   * Props\n   */\n  /**\n   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\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 }) 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  private getCountdownArticle() {\n    const getCountdown = this.countdownArticle\n    const { maxQuota } = this\n\n    if (getCountdown > 0 && getCountdown < maxQuota) {\n      return html`\n        <p>\n          Anda memiliki sisa\n          <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium\n          gratis bulan ini. ${this.packageData.subscriptionText}\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> ${this\n          .packageData.subscriptionText}\n      </p>\n    `\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.getMeteredPaywallData()\n    this.dataLayeronMeteredPaywall()\n  }\n\n  async getMeteredPaywallData() {\n    try {\n      const response = await fetch(\n        'https://cdn-www.kompas.id/web-component/metered-paywall.json'\n      )\n      const json = await response.json()\n      this.packageData = {\n        subscriptionText: json.subscriptionText,\n        buttonText: json.buttonText,\n        subscriptionUrl: json.subscriptionUrl,\n      }\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    window.location.href = this.packageData.subscriptionUrl\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    })\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    })\n  }\n\n  render() {\n    return !this.isLoading\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full\">\n            <div\n              class=\"flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0\"\n            >\n              <div\n                class=\"text-grey-600 text-sm md:text-lg self-center text-left\"\n              >\n                ${this.getCountdownArticle()}\n              </div>\n              <div class=\"self-center\">\n                <button\n                  @click=\"${this.redirectToBerlangganan}\"\n                  class=\"bg-green-400 p-2 rounded-md font-bold text-grey-100 text-sm md:text-xl\"\n                >\n                  ${this.packageData.buttonText}\n                </button>\n              </div>\n            </div>\n          </div>\n        `\n      : nothing\n  }\n}\n"]}
+{"version":3,"file":"KompasMeteredPaywall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-paywall/KompasMeteredPaywall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData } from './types.js'\n\n@customElement('kompasid-metered-paywall')\nexport class KompasMeteredPaywall 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      .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 = {\n    subscriptionText: 'Langganan untuk akses tanpa batas',\n    buttonText: 'Langganan',\n    subscriptionUrl:\n      'https://www.kompas.id/berlangganan?open_from=Metered_Paywall',\n  }\n\n  /**\n   * Props\n   */\n  /**\n   * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\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 }) 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  private getCountdownArticle() {\n    const getCountdown = this.countdownArticle\n    const { maxQuota } = this\n\n    if (getCountdown > 0 && getCountdown < maxQuota) {\n      return html`\n        <p>\n          Anda memiliki sisa\n          <b>${maxQuota - getCountdown} dari ${maxQuota}</b> artikel premium\n          gratis bulan ini. ${this.packageData.subscriptionText}\n        </p>\n      `\n    }\n    return html`\n      <p>\n        Anda sedang membaca <b>artikel gratis terakhir bulan ini.</b> ${this\n          .packageData.subscriptionText}\n      </p>\n    `\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.getMeteredPaywallData()\n    this.dataLayeronMeteredPaywall()\n  }\n\n  async getMeteredPaywallData() {\n    try {\n      const response = await fetch(\n        'https://cdn-www.kompas.id/web-component/metered-paywall.json'\n      )\n      const json = await response.json()\n      this.packageData = {\n        subscriptionText: json.subscriptionText,\n        buttonText: json.buttonText,\n        subscriptionUrl: json.subscriptionUrl,\n      }\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    window.location.href = this.packageData.subscriptionUrl\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    })\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    })\n  }\n\n  render() {\n    return !this.isLoading\n      ? html`\n          <div class=\"sticky bottom-0 w-full h-full\">\n            <div\n              class=\"flex flex-row w-full bg-blue-100 py-4 justify-center space-x-4 px-4 lg:px-0 bottom-0\"\n            >\n              <div\n                class=\"text-grey-600 text-sm md:text-lg self-center text-left\"\n              >\n                ${this.getCountdownArticle()}\n              </div>\n              <div class=\"self-center\">\n                <button\n                  @click=\"${this.redirectToBerlangganan}\"\n                  class=\"bg-green-500 p-2 px-5 rounded-md font-bold text-grey-100 text-sm md:text-base font-sans\"\n                >\n                  ${this.packageData.buttonText}\n                </button>\n              </div>\n            </div>\n          </div>\n        `\n      : nothing\n  }\n}\n"]}

package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js

@@ -53,7 +53,8 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     }
     redirectToSubscriber() {
         this.sendDataLayer();
-        window.open('https://www.kompas.id/berlangganan');
+        const openFrom = `${this.type === 'epaper' ? 'ePaper' : 'Hard'}_Paywall`;
+        window.open(`https://www.kompas.id/berlangganan?open_from=${openFrom}`);
     }
     redirectToHelpdesk() {
         this.sendDataLayeronHelpDesk();