@kompasid/lit-web-components 0.4.0 → 0.4.2

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

@@ -1,9 +1,11 @@
 import { __decorate } from "tslib";
 /* eslint-disable class-methods-use-this */
-import { html, css, LitElement } from 'lit';
+import { html, css, LitElement, nothing } from 'lit';
 import { property, customElement, state } from 'lit/decorators.js';
 import { TWStyles } from '../../../tailwind/tailwind.js';
 import { deviceType } from '../../utils/deviceType.js';
+import { formatRupiah } from '../../utils/formatRupiah.js';
+import { addGoogleFonts } from '../../utils/googleFont.js';
 let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
     constructor() {
         super(...arguments);
@@ -27,8 +29,8 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
          * prop page_domain = Page Domain
          * prop metered_wall_type = The type of Metered Wall
          * prop metered_wall_balance = The balance of their metered wall
+         * prop type = The type of video paywall
          */
-        this.subscriptionUrl = 'https://www.kompas.id/berlangganan';
         this.isLogin = false;
         this.paywall_location = '';
         this.paywall_subscription_package = '';
@@ -45,77 +47,37 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
         this.tracker_page_domain = '';
         this.tracker_metered_wall_type = '';
         this.tracker_metered_wall_balance = 0;
-        this.sendDataLayeronNonLogin = () => {
-            window.dataLayer.push({
-                event: 'registrationOfferimppression',
-                interface: deviceType(),
-            });
-        };
-        this.sendDataLayeronBerlangganan = () => {
-            window.dataLayer.push({
-                event: 'paywall_viewed',
-                paywall_location: this.paywall_location,
-                paywall_subscription_package: this.paywall_subscription_package,
-                paywall_subscription_id: this.paywall_subscription_id,
-                paywall_subscription_price: this.paywall_subscription_price,
-                paywall_position: this.paywall_position,
-                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,
-                user_type: this.tracker_user_type,
-                subscription_status: this.tracker_subscription_status,
-                page_domain: this.tracker_page_domain || 'Kompas.id',
-                metered_wall_type: this.tracker_metered_wall_type || 'HP',
-                metered_wall_balance: this.tracker_metered_wall_balance,
-            });
-        };
-        this.sendDataLayeronButtonLogin = (triggerClick) => {
-            window.dataLayer.push({
-                event: 'registrationOfferClick',
-                interface: deviceType(),
-                buttonClicked: triggerClick,
-            });
-        };
-        this.sendDataLayeronButtonBerlangganan = () => {
-            window.dataLayer.push({
-                event: 'subscribe_button_clicked',
-                paywall_location: this.paywall_location,
-                paywall_subscription_package: this.paywall_subscription_package,
-                paywall_subscription_id: this.paywall_subscription_id,
-                paywall_subscription_price: this.paywall_subscription_price,
-                paywall_position: this.paywall_position,
-                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,
-                user_type: this.tracker_user_type,
-                subscription_status: this.tracker_subscription_status,
-                page_domain: this.tracker_page_domain || 'Kompas.id',
-                metered_wall_type: this.tracker_metered_wall_type || 'HP',
-                metered_wall_balance: this.tracker_metered_wall_balance,
-            });
-        };
+        this.type = 'article';
+        /**
+         * State
+         */
+        this.subscriptionUrl = 'https://www.kompas.id/berlangganan';
+        this.checkoutHost = 'https://checkoutv2.kompas.id';
     }
-    isLoginComponent() {
+    /**
+     * Component
+     */
+    regulerRegistrationSection() {
         return html `
-      <div>
-        ${this.sendDataLayeronBerlangganan()}
-        <h5
-          class="leading-6 text-white text-center text-base md:text-xl max-w-2xl"
-        >
-          Akses konten premium Anda bulan ini sudah habis. Aktifkan langganan
-          untuk akses tanpa batas, mulai dari
-          <span class="font-bold">Rp50.000/bulan.</span>
-        </h5>
-        <div class="flex justify-between mt-4">
+      <div
+        class="flex flex-col text-white text-sm md:text-base items-center justify-center"
+      >
+        <div>
           <button
-            @click=${() => this.redirectToBerlangganan()}
-            class="bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold"
+            @click=${() => this.redirectToRegister('Daftar')}
+            class="text-blue-300 font-bold"
           >
-            Berlangganan
+            Daftar
+          </button>
+          <span> untuk akses konten gratis.</span>
+        </div>
+        <div>
+          <span>Sudah punya akun? </span>
+          <button
+            @click=${this.redirectToLogin}
+            class="text-blue-300 font-bold"
+          >
+            Masuk<span class="text-white font-normal">.</span>
           </button>
         </div>
       </div>
@@ -123,68 +85,172 @@ let KompasPaywallVideo = class KompasPaywallVideo extends LitElement {
     }
     defaultComponent() {
         return html `
-      <div>
-        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayeronBerlangganan()}
+      <div class="flex flex-col items-center space-y-2 md:space-y-4">
+        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayerPaywallViewed()}
         <h5
-          class="leading-6 text-white text-center text-base md:text-xl max-w-xl"
+          class="leading-5 md:leading-6 w-[296px] md:w-[400px] text-white text-center text-base mb-2 md:mb-0 ${!this
+            .isLogin &&
+            !this.isArticle &&
+            'mb-0'} md:text-xl max-w-xl"
         >
-          Langganan untuk akses ke seluruh konten premium, mulai dari
-          <span class="font-bold">Rp50.000/bulan.</span>
+          ${this.isArticle
+            ? 'Langganan untuk lanjut menonton video'
+            : 'Langganan sekarang untuk akses seluruh konten Kompas.id'}
         </h5>
-        <div class="flex justify-center mt-4 space-x-3">
-          <button
-            @click=${() => this.redirectToRegister('Masuk')}
-            class="rounded text-sm text-white px-4 py-1.5 ring-1 ring-grey-100"
-          >
-            Masuk
-          </button>
-          <button
-            @click=${() => this.redirectToBerlangganan()}
-            class="bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold"
-          >
-            Berlangganan
-          </button>
-        </div>
-        <p
-          class="text-center text-sm leading-4 text-white mt-6 max-w-xs md:max-w-none"
+        <button
+          @click=${this.redirectToSelectedPackage}
+          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]"
         >
-          Dapatkan 5 konten premium gratis tiap bulan!
-          <button
-            @click=${() => this.redirectToRegister('Coba Sekarang')}
-            target="_blank"
-            class="text-blue-300 font-bold cursor-pointer"
-          >
-            Coba Sekarang
-          </button>
-        </p>
+          Langganan ${formatRupiah(this.showPackage.price)}
+          /${this.generateCopyDuration(this.showPackage.durationType)}
+        </button>
+        <button
+          @click=${this.redirectToBerlangganan}
+          class="text-sm md:text-lg leading-[22px] text-white font-bold underline ${!this
+            .isLogin && this.isArticle
+            ? 'pb-3'
+            : 'pb-2'} md:pb-4"
+        >
+          Paket Lainnya
+        </button>
+        ${!this.isLogin ? this.regulerRegistrationSection() : nothing}
       </div>
     `;
     }
+    /**
+     * Data Layer
+     */
+    sendDataLayer(event) {
+        const baseData = {
+            event,
+            paywall_location: this.paywall_location,
+            paywall_subscription_package: this.paywall_subscription_package || this.showPackage.title,
+            paywall_subscription_id: this.paywall_subscription_id || this.showPackage.id,
+            paywall_subscription_price: this.paywall_subscription_price || this.showPackage.price,
+            paywall_position: this.paywall_position || this.showPackage.position,
+            user_type: this.tracker_user_type,
+            subscription_status: this.tracker_subscription_status,
+            page_domain: this.tracker_page_domain || 'Kompas.id',
+            metered_wall_type: this.tracker_metered_wall_type || 'HP',
+            metered_wall_balance: this.tracker_metered_wall_balance,
+        };
+        const data = this.isArticle
+            ? {
+                ...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;
+        window.dataLayer.push(data);
+    }
+    sendDataLayerPaywallViewed() {
+        this.sendDataLayer('paywall_viewed');
+    }
+    sendDataLayerSubscribeButtonClicked() {
+        this.sendDataLayer('subscribe_button_clicked');
+    }
+    sendDataLayerOtherPackagesClicked() {
+        this.sendDataLayer('other_packages_clicked');
+    }
+    sendDataLayeronButtonLogin(triggerClick) {
+        window.dataLayer.push({
+            event: 'registrationOfferClick',
+            interface: deviceType(),
+            buttonClicked: triggerClick,
+        });
+    }
+    sendDataLayeronNonLogin() {
+        window.dataLayer.push({
+            event: 'registrationOfferimppression',
+            interface: deviceType(),
+        });
+    }
+    /**
+     * Getter
+     */
+    get isArticle() {
+        return this.type === 'article';
+    }
+    // temporary mocking data package for component and dataLayer
+    get showPackage() {
+        return {
+            duration: 1,
+            durationType: 3,
+            id: '9802035',
+            link: 'kdp?productId=9802035&referrer=https%3A%2F%2Fwww.kompas.cloud%2Fberlangganan',
+            price: 50000,
+            position: 1,
+            title: 'Kompas Digital Premium 1 Bulan',
+        };
+    }
+    /**
+     * Logic Function
+     */
     redirectToRegister(triggerClick) {
         this.sendDataLayeronButtonLogin(triggerClick);
         const registerHost = 'https://account.kompas.id/register';
         const nextParams = encodeURIComponent(window.location.href);
-        const directUrlRegister = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login`;
+        const directUrlRegister = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=video_paywall`;
         window.open(directUrlRegister, '_blank');
     }
+    redirectToLogin() {
+        const loginHost = 'https://account.kompas.id/login';
+        const nextParams = encodeURIComponent(window.location.href);
+        const directUrlLogin = `${loginHost}?next=${nextParams}&loc=video_paywall`;
+        window.open(directUrlLogin, '_blank');
+    }
+    redirectToSelectedPackage() {
+        const url = `${this.checkoutHost}/${this.showPackage.link}&source=${this.type}`;
+        this.sendDataLayerSubscribeButtonClicked();
+        window.open(url, '_blank');
+    }
     redirectToBerlangganan() {
-        this.sendDataLayeronButtonBerlangganan();
+        this.sendDataLayerOtherPackagesClicked();
         window.open(this.subscriptionUrl, '_blank');
     }
+    generateCopyDuration(type) {
+        switch (type) {
+            case 1:
+                return 'hari';
+            case 2:
+                return 'minggu';
+            case 3:
+                return 'bulan';
+            case 4:
+                return 'tahun';
+            default:
+                return '';
+        }
+    }
+    async connectedCallback() {
+        super.connectedCallback();
+        await this.updateComplete;
+        addGoogleFonts(['pt-sans']);
+    }
+    /**
+     * Render Statement
+     */
     render() {
         return html `
       <div
-        class="radius absolute z-20 bg-black bg-opacity-50 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center"
+        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"
       >
-        ${this.isLogin ? this.isLoginComponent() : this.defaultComponent()}
+        ${this.defaultComponent()}
       </div>
     `;
     }
 };
-KompasPaywallVideo.styles = [css ``, TWStyles];
-__decorate([
-    state()
-], KompasPaywallVideo.prototype, "subscriptionUrl", void 0);
+KompasPaywallVideo.styles = [
+    css `
+      :host {
+        font-family: 'PT Sans', sans-serif;
+      }
+    `,
+    TWStyles,
+];
 __decorate([
     property({ type: Boolean })
 ], KompasPaywallVideo.prototype, "isLogin", void 0);
@@ -233,6 +299,15 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], KompasPaywallVideo.prototype, "tracker_metered_wall_balance", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallVideo.prototype, "type", void 0);
+__decorate([
+    state()
+], KompasPaywallVideo.prototype, "subscriptionUrl", void 0);
+__decorate([
+    state()
+], KompasPaywallVideo.prototype, "checkoutHost", void 0);
 KompasPaywallVideo = __decorate([
     customElement('kompasid-paywall-video')
 ], KompasPaywallVideo);

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 } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { deviceType } from '../../utils/deviceType.js'\n\n@customElement('kompasid-paywall-video')\nexport class KompasPaywallVideo extends LitElement {\n  static styles = [css``, TWStyles]\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   */\n\n  @state() private subscriptionUrl: string =\n    'https://www.kompas.id/berlangganan'\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\n  private isLoginComponent() {\n    return html`\n      <div>\n        ${this.sendDataLayeronBerlangganan()}\n        <h5\n          class=\"leading-6 text-white text-center text-base md:text-xl max-w-2xl\"\n        >\n          Akses konten premium Anda bulan ini sudah habis. Aktifkan langganan\n          untuk akses tanpa batas, mulai dari\n          <span class=\"font-bold\">Rp50.000/bulan.</span>\n        </h5>\n        <div class=\"flex justify-between mt-4\">\n          <button\n            @click=${() => this.redirectToBerlangganan()}\n            class=\"bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold\"\n          >\n            Berlangganan\n          </button>\n        </div>\n      </div>\n    `\n  }\n\n  private defaultComponent() {\n    return html`\n      <div>\n        ${this.sendDataLayeronNonLogin()} ${this.sendDataLayeronBerlangganan()}\n        <h5\n          class=\"leading-6 text-white text-center text-base md:text-xl max-w-xl\"\n        >\n          Langganan untuk akses ke seluruh konten premium, mulai dari\n          <span class=\"font-bold\">Rp50.000/bulan.</span>\n        </h5>\n        <div class=\"flex justify-center mt-4 space-x-3\">\n          <button\n            @click=${() => this.redirectToRegister('Masuk')}\n            class=\"rounded text-sm text-white px-4 py-1.5 ring-1 ring-grey-100\"\n          >\n            Masuk\n          </button>\n          <button\n            @click=${() => this.redirectToBerlangganan()}\n            class=\"bg-green-500 rounded px-4 py-1.5 text-sm text-white font-bold\"\n          >\n            Berlangganan\n          </button>\n        </div>\n        <p\n          class=\"text-center text-sm leading-4 text-white mt-6 max-w-xs md:max-w-none\"\n        >\n          Dapatkan 5 konten premium gratis tiap bulan!\n          <button\n            @click=${() => this.redirectToRegister('Coba Sekarang')}\n            target=\"_blank\"\n            class=\"text-blue-300 font-bold cursor-pointer\"\n          >\n            Coba Sekarang\n          </button>\n        </p>\n      </div>\n    `\n  }\n\n  private sendDataLayeronNonLogin = (): void => {\n    window.dataLayer.push({\n      event: 'registrationOfferimppression',\n      interface: deviceType(),\n    })\n  }\n\n  private sendDataLayeronBerlangganan = (): void => {\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,\n      paywall_position: this.paywall_position,\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,\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\n  private sendDataLayeronButtonLogin = (triggerClick: string): void => {\n    window.dataLayer.push({\n      event: 'registrationOfferClick',\n      interface: deviceType(),\n      buttonClicked: triggerClick,\n    })\n  }\n\n  private sendDataLayeronButtonBerlangganan = (): void => {\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,\n      paywall_position: this.paywall_position,\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,\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\n  private redirectToRegister(triggerClick: string): void {\n    this.sendDataLayeronButtonLogin(triggerClick)\n    const registerHost: string = 'https://account.kompas.id/register'\n    const nextParams: string = encodeURIComponent(window.location.href)\n    const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login`\n    window.open(directUrlRegister, '_blank')\n  }\n\n  private redirectToBerlangganan(): void {\n    this.sendDataLayeronButtonBerlangganan()\n    window.open(this.subscriptionUrl, '_blank')\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"radius absolute z-20 bg-black bg-opacity-50 p-4 top-0 bottom-0 left-0 flex flex-col w-full h-full justify-center items-center\"\n      >\n        ${this.isLogin ? this.isLoginComponent() : this.defaultComponent()}\n      </div>\n    `\n  }\n}\n"]}
+{"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'\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  /**\n   * State\n   */\n\n  @state() private subscriptionUrl: string =\n    'https://www.kompas.id/berlangganan'\n  @state() private checkoutHost: string = 'https://checkoutv2.kompas.id'\n\n  /**\n   * Component\n   */\n\n  private regulerRegistrationSection() {\n    return html`\n      <div\n        class=\"flex flex-col text-white text-sm md:text-base items-center justify-center\"\n      >\n        <div>\n          <button\n            @click=${() => this.redirectToRegister('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=${this.redirectToLogin}\n            class=\"text-blue-300 font-bold\"\n          >\n            Masuk<span class=\"text-white 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.showPackage.price)}\n          /${this.generateCopyDuration(this.showPackage.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.showPackage.title,\n      paywall_subscription_id:\n        this.paywall_subscription_id || this.showPackage.id,\n      paywall_subscription_price:\n        this.paywall_subscription_price || this.showPackage.price,\n      paywall_position: this.paywall_position || this.showPackage.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  // temporary mocking data package for component and dataLayer\n  get showPackage() {\n    return {\n      duration: 1,\n      durationType: 3,\n      id: '9802035',\n      link: 'kdp?productId=9802035&referrer=https%3A%2F%2Fwww.kompas.cloud%2Fberlangganan',\n      price: 50000,\n      position: 1,\n      title: 'Kompas Digital Premium 1 Bulan',\n    }\n  }\n\n  /**\n   * Logic Function\n   */\n\n  private redirectToRegister(triggerClick: string): void {\n    this.sendDataLayeronButtonLogin(triggerClick)\n    const registerHost: string = 'https://account.kompas.id/register'\n    const nextParams: string = encodeURIComponent(window.location.href)\n    const directUrlRegister: string = `${registerHost}?next=${nextParams}?status=sukses_login&status_login=login&loc=video_paywall`\n    window.open(directUrlRegister, '_blank')\n  }\n\n  private redirectToLogin(): void {\n    const loginHost: string = 'https://account.kompas.id/login'\n    const nextParams: string = encodeURIComponent(window.location.href)\n    const directUrlLogin: string = `${loginHost}?next=${nextParams}&loc=video_paywall`\n    window.open(directUrlLogin, '_blank')\n  }\n\n  private redirectToSelectedPackage(): void {\n    const url = `${this.checkoutHost}/${this.showPackage.link}&source=${this.type}`\n    this.sendDataLayerSubscribeButtonClicked()\n    window.open(url, '_blank')\n  }\n\n  private redirectToBerlangganan(): void {\n    this.sendDataLayerOtherPackagesClicked()\n    window.open(this.subscriptionUrl, '_blank')\n  }\n\n  private generateCopyDuration(type: number): string {\n    switch (type) {\n      case 1:\n        return 'hari'\n      case 2:\n        return 'minggu'\n      case 3:\n        return 'bulan'\n      case 4:\n        return 'tahun'\n      default:\n        return ''\n    }\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\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"]}

package/dist/src/utils/formatRupiah.d.ts

@@ -0,0 +1 @@
+export declare const formatRupiah: (value: number) => string;

package/dist/src/utils/formatRupiah.js

@@ -0,0 +1,7 @@
+export const formatRupiah = (value) => {
+    const roundedValue = Math.round(value);
+    return `Rp ${roundedValue
+        .toString()
+        .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}`;
+};
+//# sourceMappingURL=formatRupiah.js.map

package/dist/src/utils/formatRupiah.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatRupiah.js","sourceRoot":"","sources":["../../../src/utils/formatRupiah.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,EAAE;IAC5C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IACtC,OAAO,MAAM,YAAY;SACtB,QAAQ,EAAE;SACV,OAAO,CAAC,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAA;AAChD,CAAC,CAAA","sourcesContent":["export const formatRupiah = (value: number) => {\n  const roundedValue = Math.round(value)\n  return `Rp ${roundedValue\n    .toString()\n    .replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1.')}`\n}\n"]}

package/dist/src/utils/googleFont.d.ts

@@ -0,0 +1 @@
+export declare const addGoogleFonts: (fonts: string[]) => void;

package/dist/src/utils/googleFont.js

@@ -0,0 +1,17 @@
+export const addGoogleFonts = (fonts) => {
+    const fontMap = {
+        lora: 'https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap',
+        'pt-sans': 'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',
+    };
+    fonts.forEach(font => {
+        const fontCssUrl = fontMap[font];
+        const existingElement = document.querySelector(`link[href="${fontCssUrl}"]`);
+        if (!existingElement && fontCssUrl) {
+            const newElement = document.createElement('link');
+            newElement.setAttribute('rel', 'stylesheet');
+            newElement.setAttribute('href', fontCssUrl);
+            document.head.appendChild(newElement);
+        }
+    });
+};
+//# sourceMappingURL=googleFont.js.map

package/dist/src/utils/googleFont.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"googleFont.js","sourceRoot":"","sources":["../../../src/utils/googleFont.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAe,EAAE,EAAE;IAChD,MAAM,OAAO,GAA8B;QACzC,IAAI,EAAE,qEAAqE;QAC3E,SAAS,EACP,iGAAiG;KACpG,CAAA;IAED,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACnB,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;QAChC,MAAM,eAAe,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,UAAU,IAAI,CAAC,CAAA;QAE5E,IAAI,CAAC,eAAe,IAAI,UAAU,EAAE;YAClC,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YACjD,UAAU,CAAC,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAA;YAC5C,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;YAC3C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;SACtC;IACH,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["export const addGoogleFonts = (fonts: string[]) => {\n  const fontMap: { [key: string]: string } = {\n    lora: 'https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap',\n    'pt-sans':\n      'https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap',\n  }\n\n  fonts.forEach(font => {\n    const fontCssUrl = fontMap[font]\n    const existingElement = document.querySelector(`link[href=\"${fontCssUrl}\"]`)\n\n    if (!existingElement && fontCssUrl) {\n      const newElement = document.createElement('link')\n      newElement.setAttribute('rel', 'stylesheet')\n      newElement.setAttribute('href', fontCssUrl)\n      document.head.appendChild(newElement)\n    }\n  })\n}\n"]}