@kompasid/lit-web-components 0.5.0 → 0.5.2

package/demo/index.html

@@ -79,8 +79,8 @@
       const swgEnable = true
       const videoPaywallType = 'homepage'
       const freewallType = 'landing_page'
-      const headCopyExpand = 'copy expand'
-      const headCopyCollapse = 'copy collapse'
+      const headCopyExpand = ''
+      const headCopyCollapse = ''
       const expand = false
 
       render(

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

@@ -72,6 +72,7 @@ export declare class KompasFreewall extends LitElement {
     /**
      * Data Layer
      */
+    private prepareImpressionsData;
     private sendDataLayer;
     private sendDataLayerPaywallViewed;
     private sendDataLayerSubscribeButtonClicked;

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

@@ -80,9 +80,8 @@ let KompasFreewall = class KompasFreewall extends LitElement {
     /**
      * Data Layer
      */
-    sendDataLayer(event) {
+    prepareImpressionsData() {
         const baseData = {
-            event,
             paywall_location: this.paywall_location,
             paywall_subscription_package: this.paywall_subscription_package || this.packageData.title,
             paywall_subscription_id: this.paywall_subscription_id || this.packageData.id,
@@ -95,23 +94,30 @@ let KompasFreewall = class KompasFreewall extends LitElement {
             metered_wall_type: this.tracker_metered_wall_type || 'FP',
             metered_wall_balance: this.tracker_metered_wall_balance,
         };
-        const data = this.isArticle
-            ? {
+        if (this.isArticle) {
+            return {
                 ...baseData,
                 content_id: this.tracker_content_id,
                 content_title: this.tracker_content_title,
                 content_categories: this.tracker_content_categories,
                 content_type: this.tracker_content_type,
-            }
-            : {
-                ...baseData,
-                page_title: this.tracker_page_title,
             };
+        }
+        return {
+            ...baseData,
+            page_title: this.tracker_page_title,
+        };
+    }
+    sendDataLayer(event, includeImpressions = false) {
+        const impressionsData = this.prepareImpressionsData();
+        const data = includeImpressions
+            ? { event, impressions: [impressionsData] }
+            : { event, ...impressionsData };
         window.dataLayer.push(data);
     }
     sendDataLayerPaywallViewed() {
         if (this.isExpand)
-            this.sendDataLayer('paywall_viewed');
+            this.sendDataLayer('paywall_viewed', true);
     }
     sendDataLayerSubscribeButtonClicked() {
         this.sendDataLayer('subscribe_button_clicked');
@@ -146,9 +152,10 @@ let KompasFreewall = class KompasFreewall extends LitElement {
      */
     render() {
         return html `
-      <div class="sticky bottom-0 w-full h-full z-20">
+      <div class="sticky bottom-0 w-full h-full z-20 top-shadow">
         <div
-          class="flex flex-col w-full bg-blue-100 py-4 justify-center md:px-12 lg:px-24"
+          class="flex flex-col w-full bg-blue-100 justify-center ${this
+            .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24"
         >
           <kompasid-freewall-head
             .expand=${this.isExpand}
@@ -177,6 +184,10 @@ KompasFreewall.styles = [
       :host {
         font-family: 'PT Sans', sans-serif;
       }
+
+      .top-shadow {
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);
+      }
     `,
     TWStyles,
 ];

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 { 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    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 isExpand: boolean = true\n  @state() private packageData: PackageData = {} as PackageData\n\n  /**\n   * Getter\n   */\n\n  get isArticle() {\n    return this.type === 'article'\n  }\n\n  /**\n   * Data Layer\n   */\n\n  private sendDataLayer(event: string): void {\n    const baseData = {\n      event,\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    const data = this.isArticle\n      ? {\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          ...baseData,\n          page_title: this.tracker_page_title,\n        }\n\n    window.dataLayer.push(data)\n  }\n\n  private sendDataLayerPaywallViewed(): void {\n    if (this.isExpand) this.sendDataLayer('paywall_viewed')\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.packageData.link}${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    this.isExpand = this.expand\n\n    const originHost: string = encodeURIComponent(window.location.href)\n    this.packageData = { ...this.showPackage, referrer: originHost }\n\n    this.sendDataLayerPaywallViewed()\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div class=\"sticky bottom-0 w-full h-full z-20\">\n        <div\n          class=\"flex flex-col w-full bg-blue-100 py-4 justify-center md:px-12 lg:px-24\"\n        >\n          <kompasid-freewall-head\n            .expand=${this.isExpand}\n            .type=${this.type}\n            .head_copy_expand=${this.head_copy_expand}\n            .head_copy_collapse=${this.head_copy_collapse}\n            .toggleExpand=${() => this.toggleExpand()}\n            .onSubscriptionClick=${() => this.onSubscriptionClick()}\n            .packageData=${this.packageData}\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                ?isLogin=${this.isLogin}\n              ></kompasid-freewall-body>`\n            : nothing}\n        </div>\n      </div>\n    `\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 { 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 isExpand: boolean = true\n  @state() private packageData: PackageData = {} as PackageData\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.packageData.link}${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\n    this.sendDataLayerPaywallViewed()\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return 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.head_copy_expand}\n            .head_copy_collapse=${this.head_copy_collapse}\n            .toggleExpand=${() => this.toggleExpand()}\n            .onSubscriptionClick=${() => this.onSubscriptionClick()}\n            .packageData=${this.packageData}\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                ?isLogin=${this.isLogin}\n              ></kompasid-freewall-body>`\n            : nothing}\n        </div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js

@@ -47,8 +47,8 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
           id="subscription-card"
           class="flex justify-between items-center relative z-10 flex-col w-[328px] ${this
             .isLogin
-            ? 'h-[277px] md:w-[580px] md:h-[240px]'
-            : 'h-[223px] md:w-[350px] lg:w-[410px] md:h-[210px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white"
+            ? 'md:w-[580px]'
+            : 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white"
         >
           <div
             class="flex w-full flex-col ${this.isLogin
@@ -77,7 +77,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
         </div>
         <div id="ribbon-container">
           <div
-            class="text-[11px] font-medium font-roboto-condensed flex justify-center items-center"
+            class="text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center"
           >
             <span class="-ml-2">Penawaran Terbaik</span>
           </div>
@@ -88,7 +88,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
     registerCardComponent() {
         return html `
       <div
-        class="flex flex-col justify-between w-[328px] h-[159px] md:w-[350px] lg:w-[410px] md:h-[210px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white"
+        class="flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white"
       >
         <div>
           <h5
@@ -96,7 +96,9 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
           >
             Daftar Akun Gratis
           </h5>
-          <div class="flex items-start lg:items-center mt-1 md:mt-3">
+          <div
+            class="flex items-start lg:items-center mt-3 mb-4 md:mt-4 md:mb-5"
+          >
             <div class="mt-1 lg:mt-0">${faCheck()}</div>
             <h6 class="text-base text-grey-600 ml-1">
               Akses ke 3 artikel berbayar gratis tiap bulan
@@ -105,7 +107,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
         </div>
         <button
           @click=${() => redirectToRegister('freewall')}
-          class="bg-white border border-blue-600 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-blue-600 font-bold leading-[18px]"
+          class="bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]"
         >
           Daftar Gratis
         </button>
@@ -113,7 +115,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
     `;
     }
     descriptionSection() {
-        return html `<div class="flex flex-col space-y-1 mt-1 lg:mt-3">
+        return html `<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
       ${this.description.map(item => html `
             <div class="flex items-start lg:items-center">
               <div class="mt-1 lg:mt-0">${faCheck()}</div>
@@ -128,7 +130,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
     render() {
         return html `
       <div
-        class="w-full h-full flex flex-col md:flex-row pt-6 md:pt-3 relative px-4 md:px-0 py-3 space-y-4 md:space-x-5 md:space-y-0 justify-center items-center"
+        class="w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center"
       >
         ${this.subscriptionCardComponent()}
         ${!this.isLogin ? this.registerCardComponent() : nothing}

package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { PackageData } from '../kompasid-freewall/types.js'\nimport { faCheck } from '../../../assets/font-awesome.js'\nimport { redirectToRegister } from '../../utils/cta.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n  static styles = [\n    css`\n      .font-lora {\n        font-family: 'Lora', 'Georgia', 'serif';\n      }\n\n      .font-roboto-condensed {\n        font-family: 'Roboto Condensed', sans-serif;\n      }\n\n      /* ----- Ribbon Container ---------------------------------------*/\n      #ribbon-container {\n        background: transparent;\n        height: 130px;\n        width: 200px;\n        position: absolute;\n        top: -5px;\n        right: -5px;\n        overflow: hidden;\n      }\n\n      /* ----- Top Curl ---------------------------------------*/\n      #ribbon-container:before {\n        content: '';\n        display: block;\n        -webkit-border-radius: 10px 10px 0px 0px;\n        border-radius: 10px 10px 0px 0px;\n        width: 35px;\n        height: 10px;\n        position: absolute;\n        right: 60px;\n        background: #b78b00;\n        z-index: 1;\n      }\n\n      /* ----- Right Curl ---------------------------------------*/\n      #ribbon-container:after {\n        content: '';\n        display: block;\n        -webkit-border-radius: 0px 10px 10px 0px;\n        border-radius: 0px 10px 10px 0px;\n        width: 10px;\n        height: 35px;\n        position: absolute;\n        right: 0px;\n        top: 60px;\n        background: #b78b00;\n      }\n\n      /* ----- Ribbon ---------------------------------------*/\n      #ribbon-container > div {\n        width: 140px;\n        height: 28px;\n        position: relative;\n        top: 24px;\n        right: -100px;\n        z-index: 11;\n        overflow: hidden;\n        transform: rotate(45deg);\n        -ms-transform: rotate(45deg); /* IE 9 */\n        -moz-transform: rotate(45deg); /* Firefox */\n        -webkit-transform: rotate(45deg); /* Safari and Chrome */\n        -o-transform: rotate(45deg); /* Opera */\n        background: #ffcc00;\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 onSubscriptionClick to handle cta when subscription button is clicked\n   * packageData sebagai data package yang diambil dari kompasid-freewall\n   */\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n  @property() onSubscriptionClick = () => {}\n  @property({ type: Object }) packageData: PackageData = {} as PackageData\n\n  description = [\n    'Akses seluruh konten Kompas.id di web & aplikasi',\n    'ePaper hingga 30 edisi terakhir',\n    'Buku digital tiap bulannya di aplikasi ',\n  ]\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n  }\n\n  /**\n   * Component\n   */\n\n  private subscriptionCardComponent() {\n    return html`\n      <div class=\"relative\">\n        <div\n          id=\"subscription-card\"\n          class=\"flex justify-between items-center relative z-10 flex-col w-[328px] ${this\n            .isLogin\n            ? 'h-[277px] md:w-[580px] md:h-[240px]'\n            : 'h-[223px] md:w-[350px] lg:w-[410px] md:h-[210px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white\"\n        >\n          <div\n            class=\"flex w-full flex-col ${this.isLogin\n              ? 'items-center md:w-[374px] text-center'\n              : 'items-start text-start'}\"\n          >\n            <h5\n              class=\"font-lora text-lg md:text-xl font-bold leading-[30px] ${this\n                .isLogin && 'w-60 md:w-full'} text-grey-600\"\n            >\n              ${this.isLogin\n                ? 'Dukung Jurnalisme Mencerahkan dengan Berlangganan'\n                : 'Mulai Berlangganan'}\n            </h5>\n            ${this.descriptionSection()}\n          </div>\n          <button\n            @click=${this.onSubscriptionClick}\n            class=\"bg-green-500 whitespace-nowrap w-full rounded ${this\n              .isLogin &&\n            'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n          >\n            Langganan ${formatRupiah(this.packageData.price)}\n            /${generateCopyDuration(this.packageData.durationType)}\n          </button>\n        </div>\n        <div id=\"ribbon-container\">\n          <div\n            class=\"text-[11px] font-medium font-roboto-condensed flex justify-center items-center\"\n          >\n            <span class=\"-ml-2\">Penawaran Terbaik</span>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private registerCardComponent() {\n    return html`\n      <div\n        class=\"flex flex-col justify-between w-[328px] h-[159px] md:w-[350px] lg:w-[410px] md:h-[210px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white\"\n      >\n        <div>\n          <h5\n            class=\"font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600\"\n          >\n            Daftar Akun Gratis\n          </h5>\n          <div class=\"flex items-start lg:items-center mt-1 md:mt-3\">\n            <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n            <h6 class=\"text-base text-grey-600 ml-1\">\n              Akses ke 3 artikel berbayar gratis tiap bulan\n            </h6>\n          </div>\n        </div>\n        <button\n          @click=${() => redirectToRegister('freewall')}\n          class=\"bg-white border border-blue-600 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-blue-600 font-bold leading-[18px]\"\n        >\n          Daftar Gratis\n        </button>\n      </div>\n    `\n  }\n\n  private descriptionSection() {\n    return html`<div class=\"flex flex-col space-y-1 mt-1 lg:mt-3\">\n      ${this.description.map(\n        item =>\n          html`\n            <div class=\"flex items-start lg:items-center\">\n              <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n              <h6 class=\"text-base text-grey-600 ml-1 text-start\">${item}</h6>\n            </div>\n          `\n      )}\n    </div>`\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div\n        class=\"w-full h-full flex flex-col md:flex-row pt-6 md:pt-3 relative px-4 md:px-0 py-3 space-y-4 md:space-x-5 md:space-y-0 justify-center items-center\"\n      >\n        ${this.subscriptionCardComponent()}\n        ${!this.isLogin ? this.registerCardComponent() : nothing}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { PackageData } from '../kompasid-freewall/types.js'\nimport { faCheck } from '../../../assets/font-awesome.js'\nimport { redirectToRegister } from '../../utils/cta.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n  static styles = [\n    css`\n      .font-lora {\n        font-family: 'Lora', 'Georgia', 'serif';\n      }\n\n      .font-roboto-condensed {\n        font-family: 'Roboto Condensed', sans-serif;\n      }\n\n      /* ----- Ribbon Container ---------------------------------------*/\n      #ribbon-container {\n        background: transparent;\n        height: 130px;\n        width: 200px;\n        position: absolute;\n        top: -5px;\n        right: -5px;\n        overflow: hidden;\n      }\n\n      /* ----- Top Curl ---------------------------------------*/\n      #ribbon-container:before {\n        content: '';\n        display: block;\n        -webkit-border-radius: 10px 10px 0px 0px;\n        border-radius: 10px 10px 0px 0px;\n        width: 35px;\n        height: 10px;\n        position: absolute;\n        right: 60px;\n        background: #b78b00;\n        z-index: 1;\n      }\n\n      /* ----- Right Curl ---------------------------------------*/\n      #ribbon-container:after {\n        content: '';\n        display: block;\n        -webkit-border-radius: 0px 10px 10px 0px;\n        border-radius: 0px 10px 10px 0px;\n        width: 10px;\n        height: 35px;\n        position: absolute;\n        right: 0px;\n        top: 60px;\n        background: #b78b00;\n      }\n\n      /* ----- Ribbon ---------------------------------------*/\n      #ribbon-container > div {\n        width: 140px;\n        height: 28px;\n        position: relative;\n        top: 24px;\n        right: -100px;\n        z-index: 11;\n        overflow: hidden;\n        transform: rotate(45deg);\n        -ms-transform: rotate(45deg); /* IE 9 */\n        -moz-transform: rotate(45deg); /* Firefox */\n        -webkit-transform: rotate(45deg); /* Safari and Chrome */\n        -o-transform: rotate(45deg); /* Opera */\n        background: #ffcc00;\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 onSubscriptionClick to handle cta when subscription button is clicked\n   * packageData sebagai data package yang diambil dari kompasid-freewall\n   */\n\n  @property({ type: Boolean }) isLogin = false\n  @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n  @property() onSubscriptionClick = () => {}\n  @property({ type: Object }) packageData: PackageData = {} as PackageData\n\n  description = [\n    'Akses seluruh konten Kompas.id di web & aplikasi',\n    'ePaper hingga 30 edisi terakhir',\n    'Buku digital tiap bulannya di aplikasi ',\n  ]\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n  }\n\n  /**\n   * Component\n   */\n\n  private subscriptionCardComponent() {\n    return html`\n      <div class=\"relative\">\n        <div\n          id=\"subscription-card\"\n          class=\"flex justify-between items-center relative z-10 flex-col w-[328px] ${this\n            .isLogin\n            ? 'md:w-[580px]'\n            : 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white\"\n        >\n          <div\n            class=\"flex w-full flex-col ${this.isLogin\n              ? 'items-center md:w-[374px] text-center'\n              : 'items-start text-start'}\"\n          >\n            <h5\n              class=\"font-lora text-lg md:text-xl font-bold leading-[30px] ${this\n                .isLogin && 'w-60 md:w-full'} text-grey-600\"\n            >\n              ${this.isLogin\n                ? 'Dukung Jurnalisme Mencerahkan dengan Berlangganan'\n                : 'Mulai Berlangganan'}\n            </h5>\n            ${this.descriptionSection()}\n          </div>\n          <button\n            @click=${this.onSubscriptionClick}\n            class=\"bg-green-500 whitespace-nowrap w-full rounded ${this\n              .isLogin &&\n            'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n          >\n            Langganan ${formatRupiah(this.packageData.price)}\n            /${generateCopyDuration(this.packageData.durationType)}\n          </button>\n        </div>\n        <div id=\"ribbon-container\">\n          <div\n            class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n          >\n            <span class=\"-ml-2\">Penawaran Terbaik</span>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  private registerCardComponent() {\n    return html`\n      <div\n        class=\"flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white\"\n      >\n        <div>\n          <h5\n            class=\"font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600\"\n          >\n            Daftar Akun Gratis\n          </h5>\n          <div\n            class=\"flex items-start lg:items-center mt-3 mb-4 md:mt-4 md:mb-5\"\n          >\n            <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n            <h6 class=\"text-base text-grey-600 ml-1\">\n              Akses ke 3 artikel berbayar gratis tiap bulan\n            </h6>\n          </div>\n        </div>\n        <button\n          @click=${() => redirectToRegister('freewall')}\n          class=\"bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]\"\n        >\n          Daftar Gratis\n        </button>\n      </div>\n    `\n  }\n\n  private descriptionSection() {\n    return html`<div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n      ${this.description.map(\n        item =>\n          html`\n            <div class=\"flex items-start lg:items-center\">\n              <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n              <h6 class=\"text-base text-grey-600 ml-1 text-start\">${item}</h6>\n            </div>\n          `\n      )}\n    </div>`\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div\n        class=\"w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center\"\n      >\n        ${this.subscriptionCardComponent()}\n        ${!this.isLogin ? this.registerCardComponent() : nothing}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js

@@ -51,11 +51,15 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
      */
     render() {
         return html `
-      <div class="flex flex-col px-4 md:px-0 space-y-4">
+      <div class="flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2">
         <div class="flex justify-between items-center h-full space-x-3">
-          <div class="hidden md:block"></div>
+          <div
+            class="hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9"
+          ></div>
           <div class="flex items-center md:justify-start space-x-3">
-            <p class="w-[280px] md:w-full">${this.headCopy}</p>
+            <p class="max-w-[280px] md:max-w-full text-grey-600">
+              ${this.headCopy}
+            </p>
             ${!this.expand
             ? html `<button
                   @click=${this.onSubscriptionClick}
@@ -69,6 +73,7 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
           <div>
             <button
               @click=${this.toggleExpand}
+              aria-label="Toggle Expand"
               class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
             >
               <div class="${!this.expand && 'rotate-180'}">

package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { PackageData } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-head')\nexport class KompasFreewallHead extends LitElement {\n  static styles = [css``, TWStyles]\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 toggleExpand to handle toggle expand/collapse\n   * property onSubscriptionClick to handle cta when subscription button is clicked\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() toggleExpand = () => {}\n  @property() onSubscriptionClick = () => {}\n  @property({ type: Object }) packageData: PackageData = {} as PackageData\n\n  /**\n   * Getter\n   */\n\n  get headCopy() {\n    return (\n      (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||\n      'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'\n    )\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans'])\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div class=\"flex flex-col px-4 md:px-0 space-y-4\">\n        <div class=\"flex justify-between items-center h-full space-x-3\">\n          <div class=\"hidden md:block\"></div>\n          <div class=\"flex items-center md:justify-start space-x-3\">\n            <p class=\"w-[280px] md:w-full\">${this.headCopy}</p>\n            ${!this.expand\n              ? html`<button\n                  @click=${this.onSubscriptionClick}\n                  class=\"bg-green-500 hidden md:block whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n                >\n                  Langganan ${formatRupiah(this.packageData.price)}\n                  /${generateCopyDuration(this.packageData.durationType)}\n                </button>`\n              : nothing}\n          </div>\n          <div>\n            <button\n              @click=${this.toggleExpand}\n              class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div class=\"${!this.expand && 'rotate-180'}\">\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        ${!this.expand\n          ? html`<button\n              @click=${this.onSubscriptionClick}\n              class=\"bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n            >\n              Langganan ${formatRupiah(this.packageData.price)}\n              /${generateCopyDuration(this.packageData.durationType)}\n            </button>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { PackageData } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-head')\nexport class KompasFreewallHead extends LitElement {\n  static styles = [css``, TWStyles]\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 toggleExpand to handle toggle expand/collapse\n   * property onSubscriptionClick to handle cta when subscription button is clicked\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() toggleExpand = () => {}\n  @property() onSubscriptionClick = () => {}\n  @property({ type: Object }) packageData: PackageData = {} as PackageData\n\n  /**\n   * Getter\n   */\n\n  get headCopy() {\n    return (\n      (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||\n      'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'\n    )\n  }\n\n  /**\n   * Lifecycle\n   */\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans'])\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div class=\"flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2\">\n        <div class=\"flex justify-between items-center h-full space-x-3\">\n          <div\n            class=\"hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9\"\n          ></div>\n          <div class=\"flex items-center md:justify-start space-x-3\">\n            <p class=\"max-w-[280px] md:max-w-full text-grey-600\">\n              ${this.headCopy}\n            </p>\n            ${!this.expand\n              ? html`<button\n                  @click=${this.onSubscriptionClick}\n                  class=\"bg-green-500 hidden md:block whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n                >\n                  Langganan ${formatRupiah(this.packageData.price)}\n                  /${generateCopyDuration(this.packageData.durationType)}\n                </button>`\n              : nothing}\n          </div>\n          <div>\n            <button\n              @click=${this.toggleExpand}\n              aria-label=\"Toggle Expand\"\n              class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n            >\n              <div class=\"${!this.expand && 'rotate-180'}\">\n                ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n              </div>\n            </button>\n          </div>\n        </div>\n        ${!this.expand\n          ? html`<button\n              @click=${this.onSubscriptionClick}\n              class=\"bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n            >\n              Langganan ${formatRupiah(this.packageData.price)}\n              /${generateCopyDuration(this.packageData.durationType)}\n            </button>`\n          : nothing}\n      </div>\n    `\n  }\n}\n"]}

package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.d.ts

@@ -63,6 +63,7 @@ export declare class KompasPaywallVideo extends LitElement {
     /**
      * Data Layer
      */
+    private prepareImpressionsData;
     private sendDataLayer;
     private sendDataLayerPaywallViewed;
     private sendDataLayerSubscribeButtonClicked;

package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js

@@ -98,7 +98,6 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
     defaultComponent() {
         return html `
       <div class="flex flex-col items-center space-y-2 md:space-y-4">
-        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayerPaywallViewed()}
         <h5
           class="leading-5 md:leading-6 w-[296px] md:w-[400px] text-white text-center text-base mb-2 md:mb-0 ${!this
             .isLogin &&
@@ -132,9 +131,8 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
     /**
      * Data Layer
      */
-    sendDataLayer(event) {
+    prepareImpressionsData() {
         const baseData = {
-            event,
             paywall_location: this.paywall_location,
             paywall_subscription_package: this.paywall_subscription_package || this.packageData.title,
             paywall_subscription_id: this.paywall_subscription_id || this.packageData.id,
@@ -146,20 +144,27 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
             metered_wall_type: this.tracker_metered_wall_type || 'HP',
             metered_wall_balance: this.tracker_metered_wall_balance,
         };
-        const data = this.isArticle
-            ? {
+        if (this.isArticle) {
+            return {
                 ...baseData,
                 page_type: this.tracker_page_type,
                 content_id: this.tracker_content_id,
                 content_title: this.tracker_content_title,
                 content_categories: this.tracker_content_categories,
                 content_type: this.tracker_content_type,
-            }
-            : baseData;
+            };
+        }
+        return baseData;
+    }
+    sendDataLayer(event, includeImpressions = false) {
+        const impressionsData = this.prepareImpressionsData();
+        const data = includeImpressions
+            ? { event, impressions: [impressionsData] }
+            : { event, ...impressionsData };
         window.dataLayer.push(data);
     }
     sendDataLayerPaywallViewed() {
-        this.sendDataLayer('paywall_viewed');
+        this.sendDataLayer('paywall_viewed', true);
     }
     sendDataLayerSubscribeButtonClicked() {
         this.sendDataLayer('subscribe_button_clicked');
@@ -210,6 +215,8 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
         addGoogleFonts(['pt-sans']);
         const originHost = encodeURIComponent(window.location.href);
         this.packageData = { ...this.showPackage, referrer: originHost };
+        this.sendDataLayeronNonLogin();
+        this.sendDataLayerPaywallViewed();
     }
     /**
      * Render Statement

package/dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"KompasPaywallVideo.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-video/KompasPaywallVideo.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { PackageData } from '../kompasid-freewall/types.js'\nimport {\n  redirectToCheckout,\n  redirectToLogin,\n  redirectToRegister,\n} from '../../utils/cta.js'\n\n@customElement('kompasid-paywall-video')\nexport class KompasPaywallVideo extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * prop isLogin untuk menghandle apakah user sudah login atau belum\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 the subscription package viewed by user\n   * prop page_type = Type of the page\n   * prop content_id = ID of article (slug)\n   * prop content_type = Whether it's free article or paid article\n   * prop content_title = The title of article\n   * prop tracker_content_categories = The category of the content\n   * prop user_type = Type of user based on their subscription\n   * prop subscription_status = Status of their subscription\n   * prop page_domain = Page Domain\n   * prop metered_wall_type = The type of Metered Wall\n   * prop metered_wall_balance = The balance of their metered wall\n   * prop type = The type of video paywall\n   */\n\n  @property({ type: Boolean }) isLogin = false\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  @property({ type: String }) type: 'article' | 'homepage' = 'article'\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 subscriptionUrl: string =\n    'https://www.kompas.id/berlangganan'\n  @state() private packageData: PackageData = {} as PackageData\n\n  /**\n   * Component\n   */\n\n  private regulerRegistrationSection() {\n    return html`\n      <div\n        class=\"flex flex-col text-grey-300 text-sm md:text-base items-center justify-center\"\n      >\n        <div>\n          <button\n            @click=${() => this.onRegisterClick('Daftar')}\n            class=\"text-blue-300 font-bold\"\n          >\n            Daftar\n          </button>\n          <span> untuk akses konten gratis.</span>\n        </div>\n        <div>\n          <span>Sudah punya akun? </span>\n          <button\n            @click=${() => redirectToLogin('video_paywall')}\n            class=\"text-blue-300 font-bold\"\n          >\n            Masuk<span class=\"text-grey-300 font-normal\">.</span>\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private defaultComponent() {\n    return html`\n      <div class=\"flex flex-col items-center space-y-2 md:space-y-4\">\n        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayerPaywallViewed()}\n        <h5\n          class=\"leading-5 md:leading-6 w-[296px] md:w-[400px] text-white text-center text-base mb-2 md:mb-0 ${!this\n            .isLogin &&\n          !this.isArticle &&\n          'mb-0'} md:text-xl max-w-xl\"\n        >\n          ${this.isArticle\n            ? 'Langganan untuk lanjut menonton video'\n            : 'Langganan sekarang untuk akses seluruh konten Kompas.id'}\n        </h5>\n        <button\n          @click=${this.redirectToSelectedPackage}\n          class=\"bg-green-500 rounded md:rounded-lg h-8 md:h-12 px-4 md:px-6 text-sm md:text-lg text-white font-bold leading-[18px]\"\n        >\n          Langganan ${formatRupiah(this.packageData.price)}\n          /${generateCopyDuration(this.packageData.durationType)}\n        </button>\n        <button\n          @click=${this.redirectToBerlangganan}\n          class=\"text-sm md:text-lg leading-[22px] text-white font-bold underline ${!this\n            .isLogin && this.isArticle\n            ? 'pb-3'\n            : 'pb-2'} md:pb-4\"\n        >\n          Paket Lainnya\n        </button>\n        ${!this.isLogin ? this.regulerRegistrationSection() : nothing}\n      </div>\n    `\n  }\n\n  /**\n   * Data Layer\n   */\n\n  private sendDataLayer(event: string): void {\n    const baseData = {\n      event,\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      metered_wall_type: this.tracker_metered_wall_type || 'HP',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n    }\n\n    const data = this.isArticle\n      ? {\n          ...baseData,\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        }\n      : baseData\n\n    window.dataLayer.push(data)\n  }\n\n  private sendDataLayerPaywallViewed(): void {\n    this.sendDataLayer('paywall_viewed')\n  }\n\n  private sendDataLayerSubscribeButtonClicked(): void {\n    this.sendDataLayer('subscribe_button_clicked')\n  }\n\n  private sendDataLayerOtherPackagesClicked(): void {\n    this.sendDataLayer('other_packages_clicked')\n  }\n\n  private sendDataLayeronButtonLogin(triggerClick: string): void {\n    window.dataLayer.push({\n      event: 'registrationOfferClick',\n      interface: deviceType(),\n      buttonClicked: triggerClick,\n    })\n  }\n\n  private sendDataLayeronNonLogin(): void {\n    window.dataLayer.push({\n      event: 'registrationOfferimppression',\n      interface: deviceType(),\n    })\n  }\n\n  /**\n   * Getter\n   */\n\n  get isArticle() {\n    return this.type === 'article'\n  }\n\n  /**\n   * Logic Function\n   */\n\n  private onRegisterClick(triggerClick: string): void {\n    this.sendDataLayeronButtonLogin(triggerClick)\n    redirectToRegister('video_paywall')\n  }\n\n  private redirectToSelectedPackage(): void {\n    this.sendDataLayerSubscribeButtonClicked()\n    redirectToCheckout({\n      link: `${this.packageData.link}${this.packageData.referrer}`,\n      source: this.type,\n    })\n  }\n\n  private redirectToBerlangganan(): void {\n    this.sendDataLayerOtherPackagesClicked()\n    window.open(this.subscriptionUrl, '_blank')\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans'])\n\n    const originHost: string = encodeURIComponent(window.location.href)\n    this.packageData = { ...this.showPackage, referrer: originHost }\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div\n        class=\"radius absolute z-20 bg-black bg-opacity-75 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center\"\n      >\n        ${this.defaultComponent()}\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"KompasPaywallVideo.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall-video/KompasPaywallVideo.ts"],"names":[],"mappings":";AAAA,2CAA2C;AAC3C,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAA;AAE1E,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,kBAAkB,GACnB,MAAM,oBAAoB,CAAA;AAGpB,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAUL;;WAEG;QACH;;;;;;;;;;;;;;;;;;WAkBG;QAE0B,YAAO,GAAG,KAAK,CAAA;QAChB,qBAAgB,GAAG,EAAE,CAAA;QACrB,iCAA4B,GAAG,EAAE,CAAA;QACjC,4BAAuB,GAAG,EAAE,CAAA;QAC5B,+BAA0B,GAAG,CAAC,CAAA;QAC9B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC/B,yBAAoB,GAAG,EAAE,CAAA;QACzB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAChC,SAAI,GAA2B,SAAS,CAAA;QAEpE,gBAAW,GAAG;YACZ,QAAQ,EAAE,CAAC;YACX,YAAY,EAAE,CAAC;YACf,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,iCAAiC;YACvC,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,CAAC;YACX,KAAK,EAAE,gCAAgC;YACvC,QAAQ,EAAE,EAAE;SACb,CAAA;QAED;;WAEG;QAEc,oBAAe,GAC9B,oCAAoC,CAAA;QACrB,gBAAW,GAAgB,EAAiB,CAAA;IAoM/D,CAAC;IAlMC;;OAEG;IAEK,0BAA0B;QAChC,OAAO,IAAI,CAAA;;;;;;qBAMM,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC;;;;;;;;;;qBAUpC,GAAG,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC;;;;;;;KAOtD,CAAA;IACH,CAAC;IAEO,gBAAgB;QACtB,OAAO,IAAI,CAAA;;;+GAGgG,CAAC,IAAI;aACvG,OAAO;YACV,CAAC,IAAI,CAAC,SAAS;YACf,MAAM;;YAEJ,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,uCAAuC;YACzC,CAAC,CAAC,yDAAyD;;;mBAGpD,IAAI,CAAC,yBAAyB;;;sBAG3B,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;aAC7C,oBAAoB,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC;;;mBAG7C,IAAI,CAAC,sBAAsB;oFACsC,CAAC,IAAI;aAC5E,OAAO,IAAI,IAAI,CAAC,SAAS;YAC1B,CAAC,CAAC,MAAM;YACR,CAAC,CAAC,MAAM;;;;UAIV,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,0BAA0B,EAAE,CAAC,CAAC,CAAC,OAAO;;KAEhE,CAAA;IACH,CAAC;IAED;;OAEG;IAEK,sBAAsB;QAC5B,MAAM,QAAQ,GAAG;YACf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;YACvC,4BAA4B,EAC1B,IAAI,CAAC,4BAA4B,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK;YAC7D,uBAAuB,EACrB,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE;YACrD,0BAA0B,EACxB,IAAI,CAAC,0BAA0B,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK;YAC3D,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ;YACpE,SAAS,EAAE,IAAI,CAAC,iBAAiB;YACjC,mBAAmB,EAAE,IAAI,CAAC,2BAA2B;YACrD,WAAW,EAAE,IAAI,CAAC,mBAAmB,IAAI,WAAW;YACpD,iBAAiB,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI;YACzD,oBAAoB,EAAE,IAAI,CAAC,4BAA4B;SACxD,CAAA;QAED,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO;gBACL,GAAG,QAAQ;gBACX,SAAS,EAAE,IAAI,CAAC,iBAAiB;gBACjC,UAAU,EAAE,IAAI,CAAC,kBAAkB;gBACnC,aAAa,EAAE,IAAI,CAAC,qBAAqB;gBACzC,kBAAkB,EAAE,IAAI,CAAC,0BAA0B;gBACnD,YAAY,EAAE,IAAI,CAAC,oBAAoB;aACxC,CAAA;SACF;QACD,OAAO,QAAQ,CAAA;IACjB,CAAC;IAEO,aAAa,CACnB,KAAa,EACb,qBAA8B,KAAK;QAEnC,MAAM,eAAe,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAA;QAErD,MAAM,IAAI,GAAG,kBAAkB;YAC7B,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,eAAe,CAAC,EAAE;YAC3C,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAA;QAEjC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC7B,CAAC;IAEO,0BAA0B;QAChC,IAAI,CAAC,aAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAA;IAC5C,CAAC;IAEO,mCAAmC;QACzC,IAAI,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAA;IAChD,CAAC;IAEO,iCAAiC;QACvC,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAA;IAC9C,CAAC;IAEO,0BAA0B,CAAC,YAAoB;QACrD,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,wBAAwB;YAC/B,SAAS,EAAE,UAAU,EAAE;YACvB,aAAa,EAAE,YAAY;SAC5B,CAAC,CAAA;IACJ,CAAC;IAEO,uBAAuB;QAC7B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,8BAA8B;YACrC,SAAS,EAAE,UAAU,EAAE;SACxB,CAAC,CAAA;IACJ,CAAC;IAED;;OAEG;IAEH,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAA;IAChC,CAAC;IAED;;OAEG;IAEK,eAAe,CAAC,YAAoB;QAC1C,IAAI,CAAC,0BAA0B,CAAC,YAAY,CAAC,CAAA;QAC7C,kBAAkB,CAAC,eAAe,CAAC,CAAA;IACrC,CAAC;IAEO,yBAAyB;QAC/B,IAAI,CAAC,mCAAmC,EAAE,CAAA;QAC1C,kBAAkB,CAAC;YACjB,IAAI,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE;YAC5D,MAAM,EAAE,IAAI,CAAC,IAAI;SAClB,CAAC,CAAA;IACJ,CAAC;IAEO,sBAAsB;QAC5B,IAAI,CAAC,iCAAiC,EAAE,CAAA;QACxC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,CAAA;IAC7C,CAAC;IAEQ,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,cAAc,CAAA;QACzB,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;QAE3B,MAAM,UAAU,GAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QACnE,IAAI,CAAC,WAAW,GAAG,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAA;QAEhE,IAAI,CAAC,uBAAuB,EAAE,CAAA;QAC9B,IAAI,CAAC,0BAA0B,EAAE,CAAA;IACnC,CAAC;IAED;;OAEG;IAEH,MAAM;QACJ,OAAO,IAAI,CAAA;;;;UAIL,IAAI,CAAC,gBAAgB,EAAE;;KAE5B,CAAA;IACH,CAAC;;AAtQM,yBAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;IACD,QAAQ;CACT,CAAA;AAyB4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAgB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wEAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mEAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAAyC;AAiB3D;IAAR,KAAK,EAAE;2DAC8B;AAC7B;IAAR,KAAK,EAAE;uDAAqD;AApElD,kBAAkB;IAD9B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,kBAAkB,CAwQ9B;SAxQY,kBAAkB","sourcesContent":["/* eslint-disable class-methods-use-this */\nimport { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { generateCopyDuration } from '../../utils/generateCopyDuration.js'\nimport { PackageData } from '../kompasid-freewall/types.js'\nimport {\n  redirectToCheckout,\n  redirectToLogin,\n  redirectToRegister,\n} from '../../utils/cta.js'\n\n@customElement('kompasid-paywall-video')\nexport class KompasPaywallVideo extends LitElement {\n  static styles = [\n    css`\n      :host {\n        font-family: 'PT Sans', sans-serif;\n      }\n    `,\n    TWStyles,\n  ]\n\n  /**\n   * Props\n   */\n  /**\n   * prop isLogin untuk menghandle apakah user sudah login atau belum\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 the subscription package viewed by user\n   * prop page_type = Type of the page\n   * prop content_id = ID of article (slug)\n   * prop content_type = Whether it's free article or paid article\n   * prop content_title = The title of article\n   * prop tracker_content_categories = The category of the content\n   * prop user_type = Type of user based on their subscription\n   * prop subscription_status = Status of their subscription\n   * prop page_domain = Page Domain\n   * prop metered_wall_type = The type of Metered Wall\n   * prop metered_wall_balance = The balance of their metered wall\n   * prop type = The type of video paywall\n   */\n\n  @property({ type: Boolean }) isLogin = false\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  @property({ type: String }) type: 'article' | 'homepage' = 'article'\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 subscriptionUrl: string =\n    'https://www.kompas.id/berlangganan'\n  @state() private packageData: PackageData = {} as PackageData\n\n  /**\n   * Component\n   */\n\n  private regulerRegistrationSection() {\n    return html`\n      <div\n        class=\"flex flex-col text-grey-300 text-sm md:text-base items-center justify-center\"\n      >\n        <div>\n          <button\n            @click=${() => this.onRegisterClick('Daftar')}\n            class=\"text-blue-300 font-bold\"\n          >\n            Daftar\n          </button>\n          <span> untuk akses konten gratis.</span>\n        </div>\n        <div>\n          <span>Sudah punya akun? </span>\n          <button\n            @click=${() => redirectToLogin('video_paywall')}\n            class=\"text-blue-300 font-bold\"\n          >\n            Masuk<span class=\"text-grey-300 font-normal\">.</span>\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private defaultComponent() {\n    return html`\n      <div class=\"flex flex-col items-center space-y-2 md:space-y-4\">\n        <h5\n          class=\"leading-5 md:leading-6 w-[296px] md:w-[400px] text-white text-center text-base mb-2 md:mb-0 ${!this\n            .isLogin &&\n          !this.isArticle &&\n          'mb-0'} md:text-xl max-w-xl\"\n        >\n          ${this.isArticle\n            ? 'Langganan untuk lanjut menonton video'\n            : 'Langganan sekarang untuk akses seluruh konten Kompas.id'}\n        </h5>\n        <button\n          @click=${this.redirectToSelectedPackage}\n          class=\"bg-green-500 rounded md:rounded-lg h-8 md:h-12 px-4 md:px-6 text-sm md:text-lg text-white font-bold leading-[18px]\"\n        >\n          Langganan ${formatRupiah(this.packageData.price)}\n          /${generateCopyDuration(this.packageData.durationType)}\n        </button>\n        <button\n          @click=${this.redirectToBerlangganan}\n          class=\"text-sm md:text-lg leading-[22px] text-white font-bold underline ${!this\n            .isLogin && this.isArticle\n            ? 'pb-3'\n            : 'pb-2'} md:pb-4\"\n        >\n          Paket Lainnya\n        </button>\n        ${!this.isLogin ? this.regulerRegistrationSection() : nothing}\n      </div>\n    `\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      metered_wall_type: this.tracker_metered_wall_type || 'HP',\n      metered_wall_balance: this.tracker_metered_wall_balance,\n    }\n\n    if (this.isArticle) {\n      return {\n        ...baseData,\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      }\n    }\n    return baseData\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    this.sendDataLayer('paywall_viewed', true)\n  }\n\n  private sendDataLayerSubscribeButtonClicked(): void {\n    this.sendDataLayer('subscribe_button_clicked')\n  }\n\n  private sendDataLayerOtherPackagesClicked(): void {\n    this.sendDataLayer('other_packages_clicked')\n  }\n\n  private sendDataLayeronButtonLogin(triggerClick: string): void {\n    window.dataLayer.push({\n      event: 'registrationOfferClick',\n      interface: deviceType(),\n      buttonClicked: triggerClick,\n    })\n  }\n\n  private sendDataLayeronNonLogin(): void {\n    window.dataLayer.push({\n      event: 'registrationOfferimppression',\n      interface: deviceType(),\n    })\n  }\n\n  /**\n   * Getter\n   */\n\n  get isArticle() {\n    return this.type === 'article'\n  }\n\n  /**\n   * Logic Function\n   */\n\n  private onRegisterClick(triggerClick: string): void {\n    this.sendDataLayeronButtonLogin(triggerClick)\n    redirectToRegister('video_paywall')\n  }\n\n  private redirectToSelectedPackage(): void {\n    this.sendDataLayerSubscribeButtonClicked()\n    redirectToCheckout({\n      link: `${this.packageData.link}${this.packageData.referrer}`,\n      source: this.type,\n    })\n  }\n\n  private redirectToBerlangganan(): void {\n    this.sendDataLayerOtherPackagesClicked()\n    window.open(this.subscriptionUrl, '_blank')\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback()\n    await this.updateComplete\n    addGoogleFonts(['pt-sans'])\n\n    const originHost: string = encodeURIComponent(window.location.href)\n    this.packageData = { ...this.showPackage, referrer: originHost }\n\n    this.sendDataLayeronNonLogin()\n    this.sendDataLayerPaywallViewed()\n  }\n\n  /**\n   * Render Statement\n   */\n\n  render() {\n    return html`\n      <div\n        class=\"radius absolute z-20 bg-black bg-opacity-75 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center\"\n      >\n        ${this.defaultComponent()}\n      </div>\n    `\n  }\n}\n"]}