@kompasid/lit-web-components 0.9.18 → 0.9.20

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.d.ts

@@ -54,6 +54,9 @@ export declare class KompasGracePeriod extends LitElement {
     private maxGracePeriod;
     private subscriptionPage;
     private checkoutPage;
+    private tempTextEachDay;
+    private tempButtonA;
+    private tempButtonB;
     private getCountdownGracePeriod;
     private redirectToKnowledgeBase;
     private redirectToBerlangganan;

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

@@ -59,54 +59,74 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
         this.maxGracePeriod = 7;
         this.subscriptionPage = 'https://www.kompas.id/berlangganan';
         this.checkoutPage = 'https://checkoutv2.kompas.id';
+        this.tempTextEachDay = [];
+        this.tempButtonA = {
+            url: '',
+            text: '',
+        };
+        this.tempButtonB = {
+            url: '',
+            text: '',
+        };
     }
     getCountdownGracePeriod() {
         const { totalGracePeriod } = this;
         const { maxGracePeriod } = this;
-        if (totalGracePeriod === 7) {
-            return html `
-        <p>
-          Anda dalam
-          <a
-            href="#"
-            class="text-orange-500 underline font-bold cursor-pointer"
-            @click=${this.redirectToKnowledgeBase}
-          >
-            hari terakhir
-          </a>
-          masa tenggang langganan. Segera perbarui paket langganan untuk tetap
-          mengakses konten premium tanpa batas.
-        </p>
-      `;
-        }
         return html `
-      <p>
-        Masa tenggang langganan Anda tersisa
-        <a
-          href="#"
-          class="text-orange-500 underline font-bold cursor-pointer"
-          @click=${this.redirectToKnowledgeBase}
-        >
-          ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a
-        >. Segera perbarui paket langganan untuk tetap mengakses konten premium
-        tanpa batas.
-      </p>
+      <p
+        class="message-gp"
+        .innerHTML=${this.tempTextEachDay[maxGracePeriod - totalGracePeriod + 1 - 1]}
+      ></p>
     `;
+        // comment old html
+        // if (totalGracePeriod === 7) {
+        //   return html`
+        //     <p>
+        //       Anda dalam
+        //       <a
+        //         href="#"
+        //         class="text-orange-500 underline font-bold cursor-pointer"
+        //         @click=${this.redirectToKnowledgeBase}
+        //       >
+        //         hari terakhir
+        //       </a>
+        //       masa tenggang langganan. Segera perbarui paket langganan untuk tetap
+        //       mengakses konten premium tanpa batas.
+        //     </p>
+        //   `
+        // }
+        // return html`
+        //   <p>
+        //     Masa tenggang langganan Anda tersisa
+        //     <a
+        //       href="#"
+        //       class="text-orange-500 underline font-bold cursor-pointer"
+        //       @click=${this.redirectToKnowledgeBase}
+        //     >
+        //       ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a
+        //     >. Segera perbarui paket langganan untuk tetap mengakses konten premium
+        //     tanpa batas.
+        //   </p>
+        // `
     }
     redirectToKnowledgeBase() {
         window.open('https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/', '_blank');
     }
     redirectToBerlangganan() {
+        const { url = '' } = this.tempButtonB;
         this.dataLayeronPerbaruiLanggananButton();
         this.sendGtmEvent('subscribe_button_clicked', true);
-        const url = `${this.subscriptionPage}?open_from=Grace_Period`;
-        window.open(url);
+        const urlComputed = url || `${this.subscriptionPage}?open_from=Grace_Period`;
+        window.open(urlComputed);
     }
     redirectToCheckout() {
+        const { url = '' } = this.tempButtonA;
         this.dataLayeronPerbaruiLanggananButton();
         const originHost = encodeURIComponent(window.location.href);
         this.sendGtmEvent('subscribe_button_clicked');
-        window.open(`${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1&referrer=${originHost}&source=${this.source}`);
+        const defaultPath = url ||
+            `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`;
+        window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`);
     }
     getGtmParams(excludeSubscriptionParams = false) {
         const gtmParams = {};
@@ -169,6 +189,8 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     }
     gracePeriodTemplate() {
         const { isColumn, isBackgroundOnContentOnly } = this;
+        const { text: textA = '' } = this.tempButtonA;
+        const { text: textB = '' } = this.tempButtonB;
         const wrapperColumnClass = isColumn
             ? 'rounded-lg'
             : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4';
@@ -198,14 +220,14 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
                   @click=${this.redirectToCheckout}
                   class="w-full rounded-md bg-green-500 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base"
                 >
-                  Perbarui Langganan
+                  ${textA || 'Perbarui Langganan'}
                 </button>
                 <div class="md:block hidden">
                   <button
                     @click=${this.redirectToBerlangganan}
                     class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
                   >
-                    Paket Lainnya
+                    ${textB || 'Paket Lainnya'}
                   </button>
                 </div>
                 <div class="md:hidden block">
@@ -213,7 +235,7 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
                     @click=${this.redirectToBerlangganan}
                     class="bg-transparent w-full rounded-md border border-green-500 p-1.5 px-5 text-sm font-bold text-green-500 md:text-base ${otherBtnColumnClass}"
                   >
-                    Lihat Paket Lainnya
+                    ${textB || 'Lihat Paket Lainnya'}
                   </button>
                 </div>
               </div>
@@ -223,6 +245,13 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     `;
     }
     async connectedCallback() {
+        // Constructing the URL with parameters
+        const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`;
+        const response = await fetch(endpoint);
+        const result = await response.json();
+        this.tempTextEachDay = result.message;
+        this.tempButtonA = result.buttonA;
+        this.tempButtonB = result.buttonB;
         super.connectedCallback();
         this.sendGtmEvent('paywall_viewed');
         this.dataLayeronGracePeriod();
@@ -250,6 +279,13 @@ KompasGracePeriod.styles = [
         height: 100%;
         width: 100%;
       }
+
+      .message-gp > a {
+        color: #db5d00;
+        text-decoration-line: underline;
+        font-weight: 700;
+        cursor: pointer;
+      }
     `,
     TWStyles,
 ];
@@ -328,6 +364,15 @@ __decorate([
 __decorate([
     state()
 ], KompasGracePeriod.prototype, "checkoutPage", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "tempTextEachDay", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "tempButtonA", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "tempButtonB", void 0);
 KompasGracePeriod = __decorate([
     customElement('kompasid-grace-period')
 ], KompasGracePeriod);

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

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

package/dist/src/components/kompasid-menu-side-bar/KompasMenuSideBar.d.ts

@@ -1,69 +1,30 @@
 import { LitElement } from 'lit';
-interface DataExternalLink {
-    external?: boolean;
-    gtmClass?: string;
-    icon: object | null;
-    iconify: string | null;
-    isNew: boolean;
-    name: string;
-    url: string;
-}
-interface dataType {
-    href: string;
-    external?: boolean;
-    icon: object | null;
-    iconify: string | null;
-    name: string;
-    slug: string;
-    redDot: [
-        {
-            start: string;
-            end: string;
-        }
-    ];
-    children: [
-        {
-            href: string;
-            external: boolean;
-            icon: string;
-            iconify: string | null;
-            name: string;
-            slug: string;
-            redDot: [
-                {
-                    start: string;
-                    end: string;
-                }
-            ];
-        }
-    ];
-}
-interface DataSideBarLink {
-    feature: dataType[];
-    category: dataType[];
-    lainnya: dataType[];
-}
+import { DataExternalLink, DataSideBarLink } from './SidebarDataController.js';
 export declare class KompasMenuSideBar extends LitElement {
-    hasSlotContent: boolean;
-    shadowRoot: any;
-    firstUpdated(): void;
     static styles: import("lit").CSSResult[];
-    dataExternal: DataExternalLink[];
+    /**
+     * Props
+     * property kompasProSubscription untuk menghandle apakah user sudah login atau belum
+     */
     isDark: boolean;
-    connectedCallback(): Promise<void>;
-    handleFetchError(error: unknown): void;
+    isProductionMode: boolean;
+    subscriptionPackage: string;
+    dataExternal: DataExternalLink[];
     dataSidebar: DataSideBarLink;
-    fetchExternal(): Promise<void>;
-    renderChips(): import("lit-html").TemplateResult<1>[];
-    hasChildren(item: any): boolean;
-    rubricClicked(item: {
-        name: string;
-        href?: string;
-    }, event?: Event): void;
-    private expandedSlug;
+    showNavBar: boolean;
+    expandedSlug: string | null;
+    hasSlotContent: boolean;
+    connectedCallback(): Promise<void>;
+    private hasKompasOnePackage;
+    private hasKompasProPackage;
+    private filterBundles;
+    private loadData;
+    private toggleNavSidebar;
+    private rubricClicked;
+    private hasChildren;
     private toggleChildren;
-    private showNavBar;
-    toggleNavSidebar: (e: Event) => void;
+    private renderItem;
+    private renderSection;
+    private renderChips;
     render(): import("lit-html").TemplateResult<1>;
 }
-export {};