@kompasid/lit-web-components 0.9.11 → 0.9.14

package/demo/index.html

@@ -361,7 +361,7 @@
             source="kompasid"
           ></kompasid-metered-wall-register>
 
-          <!-- <kompasid-grace-period
+          <kompasid-grace-period
             totalGracePeriod="1"
             isShowButton="true"
             source="epaper"
@@ -380,7 +380,7 @@
             .tracker_metered_wall_type=${meteredWallType}
             .tracker_subscription_status=${trackerSubscriptionStatus}
             .tracker_metered_wall_balance=${trackerMeteredWallBalance}
-          ></kompasid-grace-period> -->
+          ></kompasid-grace-period>
         `,
         document.querySelector('#demo')
       )

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

@@ -7,38 +7,24 @@ export declare class KompasFreewall extends LitElement {
      * Props
      */
     /**
-     * property isLogin untuk menghandle apakah user sudah login atau belum
-     * property type untuk menghandle tipe freewall
-     * property head_copy_expand to update copy header when expand
-     * property head_copy_collapse to update copy header when collapse
+     * property type untuk menghandle tipe freewall (akan menyematkan beberapa tipe data layer)
      * property expand to handle expand/collapse
-     * property paywall_location is the location where user encounter the paywall
-     * property paywall_subscription_package is the name of the subscription package viewed by user
-     * property paywall_subscription_id is the ID of the subscription package viewed by user
-     * property paywall_subscription_price is the price of the subscription package viewed by user
-     * property paywall_position is the position of the subscription package viewed by user
+     * property tracker_paywall_location is the location where user encounter the paywall
      * property tracker_page_type is the type of the page
      * property tracker_page_title is the title of the page
-     * property tracker_content_id is the ID of article (slug)
-     * property content_title is the title of article
-     * property tracker_content_categories is the category of the content
-     * property tracker_content_type is to decide whether it's free article or paid article
      * property tracker_user_type is the type of user based on their subscription
      * property tracker_subscription_status is the status of their subscription
      * property tracker_page_domain is the page domain
      * property tracker_metered_wall_type is the type of metered wall
      * property tracker_metered_wall_balance is the balance of their metered wall
+     * property tracker_content_title is the title of article [type=article]
+     * property tracker_content_id is the ID of article (slug) [type=article]
+     * property tracker_content_categories is the category of the content [type=article]
+     * property tracker_content_type is to decide whether it's free article or paid article [type=article]
      */
-    isLogin: boolean;
     type: 'article' | 'landing_page';
-    head_copy_expand: string;
-    head_copy_collapse: string;
     expand: boolean;
-    paywall_location: string;
-    paywall_subscription_package: string;
-    paywall_subscription_id: number;
-    paywall_subscription_price: number;
-    paywall_position: number;
+    tracker_paywall_location: string;
     tracker_page_type: string;
     tracker_page_title: string;
     tracker_content_id: string;
@@ -66,8 +52,7 @@ export declare class KompasFreewall extends LitElement {
      */
     private isLoading;
     private isExpand;
-    private packageData;
-    private jsonPackageData;
+    private pullData;
     /**
      * Getter
      */
@@ -83,7 +68,7 @@ export declare class KompasFreewall extends LitElement {
      * Logic Function
      */
     private toggleExpand;
-    private onSubscriptionClick;
+    private goToUrl;
     /**
      * Lifecycle
      */

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

@@ -12,38 +12,24 @@ let KompasFreewall = class KompasFreewall extends LitElement {
          * Props
          */
         /**
-         * property isLogin untuk menghandle apakah user sudah login atau belum
-         * property type untuk menghandle tipe freewall
-         * property head_copy_expand to update copy header when expand
-         * property head_copy_collapse to update copy header when collapse
+         * property type untuk menghandle tipe freewall (akan menyematkan beberapa tipe data layer)
          * property expand to handle expand/collapse
-         * property paywall_location is the location where user encounter the paywall
-         * property paywall_subscription_package is the name of the subscription package viewed by user
-         * property paywall_subscription_id is the ID of the subscription package viewed by user
-         * property paywall_subscription_price is the price of the subscription package viewed by user
-         * property paywall_position is the position of the subscription package viewed by user
+         * property tracker_paywall_location is the location where user encounter the paywall
          * property tracker_page_type is the type of the page
          * property tracker_page_title is the title of the page
-         * property tracker_content_id is the ID of article (slug)
-         * property content_title is the title of article
-         * property tracker_content_categories is the category of the content
-         * property tracker_content_type is to decide whether it's free article or paid article
          * property tracker_user_type is the type of user based on their subscription
          * property tracker_subscription_status is the status of their subscription
          * property tracker_page_domain is the page domain
          * property tracker_metered_wall_type is the type of metered wall
          * property tracker_metered_wall_balance is the balance of their metered wall
+         * property tracker_content_title is the title of article [type=article]
+         * property tracker_content_id is the ID of article (slug) [type=article]
+         * property tracker_content_categories is the category of the content [type=article]
+         * property tracker_content_type is to decide whether it's free article or paid article [type=article]
          */
-        this.isLogin = false;
         this.type = 'article';
-        this.head_copy_expand = '';
-        this.head_copy_collapse = '';
         this.expand = true;
-        this.paywall_location = '';
-        this.paywall_subscription_package = '';
-        this.paywall_subscription_id = 0;
-        this.paywall_subscription_price = 0;
-        this.paywall_position = 1;
+        this.tracker_paywall_location = '';
         this.tracker_page_type = '';
         this.tracker_page_title = '';
         this.tracker_content_id = '';
@@ -71,8 +57,7 @@ let KompasFreewall = class KompasFreewall extends LitElement {
          */
         this.isLoading = true;
         this.isExpand = true;
-        this.packageData = {};
-        this.jsonPackageData = {};
+        this.pullData = {};
     }
     /**
      * Getter
@@ -83,19 +68,19 @@ let KompasFreewall = class KompasFreewall extends LitElement {
     /**
      * Data Layer
      */
-    prepareImpressionsData() {
+    prepareImpressionsData(item) {
         const baseData = {
-            paywall_location: this.paywall_location,
-            paywall_subscription_package: this.paywall_subscription_package || this.packageData.slug,
-            paywall_subscription_id: this.paywall_subscription_id || this.packageData.id,
-            paywall_subscription_price: this.paywall_subscription_price || this.packageData.price,
-            paywall_position: this.paywall_position || this.packageData.position,
+            paywall_subscription_package: item.packageSlug,
+            paywall_subscription_id: item.packageId,
+            paywall_subscription_price: item.priceDiscount || item.priceBased,
+            paywall_position: item.position,
+            paywall_location: this.tracker_paywall_location,
             user_type: this.tracker_user_type,
             subscription_status: this.tracker_subscription_status,
             page_domain: this.tracker_page_domain || 'Kompas.id',
             page_type: this.tracker_page_type,
             metered_wall_type: this.tracker_metered_wall_type || 'FP',
-            metered_wall_balance: this.tracker_metered_wall_balance,
+            metered_wall_balance: this.tracker_metered_wall_balance, // from user
         };
         if (this.isArticle) {
             return {
@@ -111,19 +96,22 @@ let KompasFreewall = class KompasFreewall extends LitElement {
             page_title: this.tracker_page_title,
         };
     }
-    sendDataLayer(event, includeImpressions = false) {
-        const impressionsData = this.prepareImpressionsData();
-        const data = includeImpressions
-            ? { event, impressions: [impressionsData] }
-            : { event, ...impressionsData };
+    sendDataLayer(event, position = 0 // ganti ke specific package
+    ) {
+        const impressionsData = this.pullData.body.map((item) => this.prepareImpressionsData(item));
+        const get = this.pullData.body.find(item => item.position === position);
+        const specificData = get ? this.prepareImpressionsData(get) : [];
+        const data = position
+            ? { event, ...specificData }
+            : { event, impressions: [impressionsData] };
         window.dataLayer.push(data);
     }
     sendDataLayerPaywallViewed() {
         if (this.isExpand)
-            this.sendDataLayer('paywall_viewed', true);
+            this.sendDataLayer('paywall_viewed');
     }
-    sendDataLayerSubscribeButtonClicked() {
-        this.sendDataLayer('subscribe_button_clicked');
+    sendDataLayerSubscribeButtonClicked(pos) {
+        this.sendDataLayer('subscribe_button_clicked', pos);
     }
     /**
      * Logic Function
@@ -132,10 +120,13 @@ let KompasFreewall = class KompasFreewall extends LitElement {
         this.isExpand = !this.isExpand;
         this.sendDataLayerPaywallViewed();
     }
-    onSubscriptionClick() {
-        this.sendDataLayerSubscribeButtonClicked();
+    goToUrl(url, position) {
+        if (!url)
+            return;
+        this.sendDataLayerSubscribeButtonClicked(position);
+        const originHost = encodeURIComponent(window.location.href);
         redirectToCheckout({
-            link: `${this.jsonPackageData.subscriptionUrl}&referrer=${this.packageData.referrer}`,
+            link: `${url.replace('https://checkoutv2.kompas.id/', '')}&referrer=${originHost}`,
             source: this.type,
         });
     }
@@ -146,27 +137,14 @@ let KompasFreewall = class KompasFreewall extends LitElement {
         super.connectedCallback();
         await this.updateComplete;
         this.isExpand = this.expand;
-        const originHost = encodeURIComponent(window.location.href);
-        this.packageData = { ...this.showPackage, referrer: originHost };
-        this.getFreewallData();
-        this.sendDataLayerPaywallViewed();
+        await this.getFreewallData();
+        await this.sendDataLayerPaywallViewed();
     }
     async getFreewallData() {
         try {
-            const response = await fetch('https://cdn-www.kompas.id/web-component/freewall.json');
+            const response = await fetch('https://cdn-www.kompas.id/web-component/freewall-new.json');
             const json = await response.json();
-            this.jsonPackageData = {
-                headCopyCollapse: json.headCopyCollapse,
-                headCopyExpand: json.headCopyExpand,
-                subscriptionUrl: json.subscriptionUrl,
-                subscriptionTitle: json.subscriptionTitle,
-                subscriptionTitleGuest: json.subscriptionTitleGuest,
-                subscriptionDescription: json.subscriptionDescription,
-                subscriptionButtonText: json.subscriptionButtonText,
-                registerTitle: json.registerTitle,
-                registerDescription: json.registerDescription,
-                registerButtonText: json.registerButtonText,
-            };
+            this.pullData = json;
         }
         catch (error) {
             throw Error('Failed to get metered paywall data');
@@ -183,27 +161,22 @@ let KompasFreewall = class KompasFreewall extends LitElement {
             ? html `
           <div class="sticky bottom-0 w-full h-full z-20 top-shadow">
             <div
-              class="flex flex-col w-full bg-blue-100 justify-center ${this
+              class="flex flex-col transition-all 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}
-                .type=${this.type}
-                .head_copy_expand=${this.jsonPackageData.headCopyExpand}
-                .head_copy_collapse=${this.jsonPackageData.headCopyCollapse}
                 .toggleExpand=${() => this.toggleExpand()}
-                .onSubscriptionClick=${() => this.onSubscriptionClick()}
-                .packageData=${this.packageData}
-                .jsonPackageData=${this.jsonPackageData}
+                .headData=${this.pullData.head}
+                .onButtonClick=${(url) => this.goToUrl(url)}
               ></kompasid-freewall-head>
               ${this.isExpand
-                ? html `<kompasid-freewall-body
-                    .type=${this.type}
-                    .onSubscriptionClick=${() => this.onSubscriptionClick()}
-                    .packageData=${this.packageData}
-                    .jsonPackageData=${this.jsonPackageData}
-                    ?isLogin=${this.isLogin}
-                  ></kompasid-freewall-body>`
+                ? html ` <div>
+                    <kompasid-freewall-body
+                      .bodyData=${this.pullData.body}
+                      .onButtonClick=${(url, position) => this.goToUrl(url, position)}
+                    ></kompasid-freewall-body>
+                  </div>`
                 : nothing}
             </div>
           </div>
@@ -223,36 +196,15 @@ KompasFreewall.styles = [
     `,
     TWStyles,
 ];
-__decorate([
-    property({ type: Boolean })
-], KompasFreewall.prototype, "isLogin", void 0);
 __decorate([
     property({ type: String })
 ], KompasFreewall.prototype, "type", void 0);
-__decorate([
-    property({ type: String })
-], KompasFreewall.prototype, "head_copy_expand", void 0);
-__decorate([
-    property({ type: String })
-], KompasFreewall.prototype, "head_copy_collapse", void 0);
 __decorate([
     property({ type: Boolean })
 ], KompasFreewall.prototype, "expand", void 0);
 __decorate([
     property({ type: String })
-], KompasFreewall.prototype, "paywall_location", void 0);
-__decorate([
-    property({ type: String })
-], KompasFreewall.prototype, "paywall_subscription_package", void 0);
-__decorate([
-    property({ type: Number })
-], KompasFreewall.prototype, "paywall_subscription_id", void 0);
-__decorate([
-    property({ type: Number })
-], KompasFreewall.prototype, "paywall_subscription_price", void 0);
-__decorate([
-    property({ type: Number })
-], KompasFreewall.prototype, "paywall_position", void 0);
+], KompasFreewall.prototype, "tracker_paywall_location", void 0);
 __decorate([
     property({ type: String })
 ], KompasFreewall.prototype, "tracker_page_type", void 0);
@@ -294,10 +246,7 @@ __decorate([
 ], KompasFreewall.prototype, "isExpand", void 0);
 __decorate([
     state()
-], KompasFreewall.prototype, "packageData", void 0);
-__decorate([
-    state()
-], KompasFreewall.prototype, "jsonPackageData", void 0);
+], KompasFreewall.prototype, "pullData", void 0);
 KompasFreewall = __decorate([
     customElement('kompasid-freewall')
 ], KompasFreewall);

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

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

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

@@ -0,0 +1,96 @@
+import { LitElement, nothing } from 'lit';
+import '../kompasid-freewall-head/KompasFreewallHead.js';
+import '../kompasid-freewall-body/KompasFreewallBody.js';
+export declare class KompasFreewall extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Props
+     */
+    /**
+     * property isLogin untuk menghandle apakah user sudah login atau belum
+     * property type untuk menghandle tipe freewall
+     * property head_copy_expand to update copy header when expand
+     * property head_copy_collapse to update copy header when collapse
+     * property expand to handle expand/collapse
+     * property paywall_location is the location where user encounter the paywall
+     * property paywall_subscription_package is the name of the subscription package viewed by user
+     * property paywall_subscription_id is the ID of the subscription package viewed by user
+     * property paywall_subscription_price is the price of the subscription package viewed by user
+     * property paywall_position is the position of the subscription package viewed by user
+     * property tracker_page_type is the type of the page
+     * property tracker_page_title is the title of the page
+     * property tracker_content_id is the ID of article (slug)
+     * property content_title is the title of article
+     * property tracker_content_categories is the category of the content
+     * property tracker_content_type is to decide whether it's free article or paid article
+     * property tracker_user_type is the type of user based on their subscription
+     * property tracker_subscription_status is the status of their subscription
+     * property tracker_page_domain is the page domain
+     * property tracker_metered_wall_type is the type of metered wall
+     * property tracker_metered_wall_balance is the balance of their metered wall
+     */
+    isLogin: boolean;
+    type: 'article' | 'landing_page';
+    head_copy_expand: string;
+    head_copy_collapse: string;
+    expand: boolean;
+    paywall_location: string;
+    paywall_subscription_package: string;
+    paywall_subscription_id: number;
+    paywall_subscription_price: number;
+    paywall_position: number;
+    tracker_page_type: string;
+    tracker_page_title: string;
+    tracker_content_id: string;
+    tracker_content_title: string;
+    tracker_content_categories: string;
+    tracker_content_type: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_page_domain: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
+    showPackage: {
+        duration: number;
+        durationType: number;
+        id: string;
+        link: string;
+        price: number;
+        position: number;
+        title: string;
+        slug: string;
+        referrer: string;
+    };
+    /**
+     * State
+     */
+    private isLoading;
+    private isExpand;
+    private packageData;
+    private jsonPackageData;
+    /**
+     * Getter
+     */
+    get isArticle(): boolean;
+    /**
+     * Data Layer
+     */
+    private prepareImpressionsData;
+    private sendDataLayer;
+    private sendDataLayerPaywallViewed;
+    private sendDataLayerSubscribeButtonClicked;
+    /**
+     * Logic Function
+     */
+    private toggleExpand;
+    private onSubscriptionClick;
+    /**
+     * Lifecycle
+     */
+    connectedCallback(): Promise<void>;
+    getFreewallData(): Promise<void>;
+    /**
+     * Render Statement
+     */
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}