@kompasid/lit-web-components 0.9.53 → 0.9.54

package/demo/header.html

@@ -46,6 +46,7 @@
     import { format, addDays } from 'date-fns'
     import { id } from 'date-fns/locale/id'
     import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
+    import '../dist/src/components/kompasid-grace-period/KompasGracePeriod.js'
     import "../dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js"
     import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
 
@@ -58,8 +59,13 @@
         "userName": "Clara Wijaya",
         "expired": formated(new Date()),
         "isMembership": true,
-        "totalGracePeriod": 10,
-        "isGracePeriod": true
+        "totalGracePeriod": 4,
+        "isGracePeriod": true,
+        "detailPackageUser": {
+          "memberhsip_channel_id": 8,
+          "payment_method": 'xendit_gopek',
+          "offering": 'Q2'
+        }
       },
       moreThan3Days: {
         "userName": "Clara Wijaya",
@@ -114,7 +120,7 @@
     const readLaterUrl = ''
     const totalGracePeriod = '5'
     const paywallLocation = 'paywall'
-    const paywallSubscriptionPackage = 'kompasid'
+    const paywallSubscriptionPackage = 'kdp'
     const productId = 9802032
     const paywallSubscriptionPrice = 0
     const paywallPosition = 'header'
@@ -228,8 +234,35 @@
               .theme=${headerTheme}
               .company_name=${companyName}
               .manage_account_url=${manageAccountUrl}
+              .paywall_subscription_id=${productId}
+              .paywall_subscription_package=${paywallSubscriptionPackage}
             ></kompasid-header-account-profile>
           </div>
+          <div>
+            <kompasid-grace-period
+              totalGracePeriod=${userData.totalGracePeriod}
+              offering=${userData.detailPackageUser?.offering}
+              memberhsip_channel_id=${userData.detailPackageUser?.memberhsip_channel_id}
+              payment_method="${userData.detailPackageUser?.payment_method}"
+              isShowButton="true"
+              source="epaper"
+              .paywall_location=${paywallLocation}
+              .paywall_subscription_package=${paywallSubscriptionPackage}
+              .paywall_subscription_id=${productId}
+              .paywall_subscription_price=${paywallSubscriptionPrice}
+              .paywall_position=${paywallPosition}
+              .tracker_page_type=${trackerPageType}
+              .tracker_content_id=${trackerContentId}
+              .tracker_content_type=${trackerContentType}
+              .tracker_content_title=${trackerContentTitle}
+              .tracker_content_categories=${trackerContentCategories}
+              .tracker_user_type=${trackerUserType}
+              .tracker_page_domain=${trackerPageDomain}
+              .tracker_metered_wall_type=${meteredWallType}
+              .tracker_subscription_status=${trackerSubscriptionStatus}
+              .tracker_metered_wall_balance=${trackerMeteredWallBalance}
+            ></kompasid-grace-period>
+          </div>
           `,
         document.getElementById('controller-container')
       )

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

@@ -9,6 +9,9 @@ export declare class KompasGracePeriod extends LitElement {
      * property isColumn = changes how the component looks on different screen sizes
      * property isShowButton = shows or hides a subscription button
      * property isEpaper = is paywall opened in epaper page
+     * property memberhsip_channel_id = the ID of the subscription package by platform
+     * property payment_method = the payment method used by user
+     * property offering = the offering product
      * property paywall_location = the location where user encounter the paywall
      * property paywall_subscription_package = the name of the subscription package viewed by user
      * property paywall_subscription_id = the ID of the subscription package viewed by user
@@ -27,6 +30,9 @@ export declare class KompasGracePeriod extends LitElement {
      * property tracker_epaper_edition = the edition of epaper viewed by user
      */
     totalGracePeriod: number;
+    memberhsip_channel_id: number;
+    payment_method: string;
+    offering: string;
     isColumn: boolean;
     isShowButton: boolean;
     isEpaper: boolean;
@@ -55,11 +61,16 @@ export declare class KompasGracePeriod extends LitElement {
     private subscriptionPage;
     private checkoutPage;
     private tempTextEachDay;
+    private basketSize;
+    private messages;
+    private templateCheckout;
     private tempButtonA;
     private tempButtonB;
+    private isAutoRenewal;
+    private isWallet;
     private getCountdownGracePeriod;
     private redirectToKnowledgeBase;
-    private redirectToBerlangganan;
+    private redirectCekSaldo;
     private redirectToCheckout;
     private getGtmParams;
     private sendGtmEvent;

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

@@ -14,6 +14,9 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
          * property isColumn = changes how the component looks on different screen sizes
          * property isShowButton = shows or hides a subscription button
          * property isEpaper = is paywall opened in epaper page
+         * property memberhsip_channel_id = the ID of the subscription package by platform
+         * property payment_method = the payment method used by user
+         * property offering = the offering product
          * property paywall_location = the location where user encounter the paywall
          * property paywall_subscription_package = the name of the subscription package viewed by user
          * property paywall_subscription_id = the ID of the subscription package viewed by user
@@ -32,13 +35,16 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
          * property tracker_epaper_edition = the edition of epaper viewed by user
          */
         this.totalGracePeriod = 0;
+        this.memberhsip_channel_id = 0; // [2 5 8] itu autorenewal
+        this.payment_method = ''; // xendit_shopeepay, midtrans_gopay, xendit_ovo , midtrans_cc
+        this.offering = ''; // Q1 ... Q5, [Q5 default]
         this.isColumn = false;
         this.isShowButton = true;
         this.isEpaper = false;
         this.isBackgroundOnContentOnly = false;
         this.source = 'article';
         this.paywall_location = '';
-        this.paywall_subscription_package = '';
+        this.paywall_subscription_package = ''; // kdp, kompas-one, kdp-koran
         this.paywall_subscription_id = 0;
         this.paywall_subscription_price = 0;
         this.paywall_position = 0;
@@ -60,6 +66,9 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
         this.subscriptionPage = 'https://www.kompas.id/berlangganan';
         this.checkoutPage = 'https://checkoutv2.kompas.id';
         this.tempTextEachDay = [];
+        this.basketSize = {};
+        this.messages = {};
+        this.templateCheckout = '';
         this.tempButtonA = {
             url: '',
             text: '',
@@ -69,18 +78,60 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
             text: '',
         };
     }
+    isAutoRenewal() {
+        const { memberhsip_channel_id: checkAutoRenewal } = this;
+        if (checkAutoRenewal === 2 ||
+            checkAutoRenewal === 5 ||
+            checkAutoRenewal === 8) {
+            return true;
+        }
+        return false;
+    }
+    isWallet() {
+        const { payment_method: paymentMethod, memberhsip_channel_id: checkAutoRenewal, } = this;
+        const isMobile = checkAutoRenewal === 5 || checkAutoRenewal === 2;
+        if (paymentMethod.includes('cc')) {
+            return false;
+        }
+        if (isMobile) {
+            return false;
+        }
+        return true;
+    }
     getCountdownGracePeriod() {
-        const { totalGracePeriod } = this;
-        const { maxGracePeriod } = this;
-        return html `
-      <p
-        class="message-gp"
-        .innerHTML=${this.tempTextEachDay[totalGracePeriod > maxGracePeriod
-            ? maxGracePeriod - 1
-            : totalGracePeriod - 1 // template maksimal 7 hari
-        ]}
-      ></p>
-    `;
+        const { messages, memberhsip_channel_id: checkAutoRenewal } = this;
+        if (!this.isAutoRenewal()) {
+            return messages.default;
+        }
+        // 8=Autorenewal
+        // 5=Apple
+        // 2=Google
+        const isRenewal = checkAutoRenewal === 8 || checkAutoRenewal === 5 || checkAutoRenewal === 2;
+        const isMobile = checkAutoRenewal === 5 || checkAutoRenewal === 2;
+        if (!isRenewal) {
+            return messages.default;
+        }
+        if (isMobile) {
+            return messages.default;
+        }
+        // if string contains cc
+        if (this.payment_method.includes('cc')) {
+            return messages.credit_card;
+        }
+        return messages.ewallet;
+        // Comment old
+        // const { totalGracePeriod } = this
+        // const { maxGracePeriod } = this
+        // return html`
+        //   <p
+        //     class="message-gp"
+        //     .innerHTML=${this.tempTextEachDay[
+        //       totalGracePeriod > maxGracePeriod
+        //         ? maxGracePeriod - 1
+        //         : totalGracePeriod - 1 // template maksimal 7 hari
+        //     ]}
+        //   ></p>
+        // `
         // comment old html
         // if (totalGracePeriod === 7) {
         //   return html`
@@ -115,21 +166,37 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     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 urlComputed = url || `${this.subscriptionPage}?open_from=Grace_Period`;
+    redirectCekSaldo() {
+        // this.dataLayeronPerbaruiLanggananButton()
+        // this.sendGtmEvent('subscribe_button_clicked', true)
+        const urlComputed = 'https://kb.kompas.id/baca/berlangganan-kompas-id/langganan-kompas-id/mengapa-perpanjangan-pembaruan-langganan-otomatis-melalui-e-wallet-belum-berhasil/';
         window.open(urlComputed);
     }
     redirectToCheckout() {
-        const { url = '' } = this.tempButtonA;
+        const { paywall_subscription_package: paywallSubscriptionPackage, paywall_subscription_id: paywallSubscriptionId, basketSize, templateCheckout, offering, } = this;
+        const tempOffering = offering || 'Q5';
+        const tempPackageSlug = paywallSubscriptionPackage.toLowerCase();
         this.dataLayeronPerbaruiLanggananButton();
-        const originHost = encodeURIComponent(window.location.href);
         this.sendGtmEvent('subscribe_button_clicked');
-        const defaultPath = url ||
-            `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`;
-        window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`);
+        if (!paywallSubscriptionId) {
+            window.open(basketSize[tempOffering]);
+            return;
+        }
+        if (tempPackageSlug.includes('kdp') && !tempPackageSlug.includes('koran')) {
+            window.open(basketSize[tempOffering]);
+        }
+        else {
+            window.open(templateCheckout.replace('_productid_', paywallSubscriptionId.toString()));
+        }
+        // comment old
+        // const { url = '' } = this.tempButtonA
+        // this.dataLayeronPerbaruiLanggananButton()
+        // const originHost: string = encodeURIComponent(window.location.href)
+        // this.sendGtmEvent('subscribe_button_clicked')
+        // 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 = {};
@@ -193,54 +260,50 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     gracePeriodTemplate() {
         const { isColumn, isBackgroundOnContentOnly } = this;
         const { text: textA = '' } = this.tempButtonA;
-        const { text: textB = '' } = this.tempButtonB;
+        // const { text: textB = '' } = this.tempButtonB
         const wrapperColumnClass = isColumn
             ? 'rounded-lg'
-            : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4';
-        const buttonColumnClass = isColumn
-            ? ''
-            : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0';
+            : 'md:flex-row lg:px-8 px-4 py-4';
+        const buttonColumnClass = isColumn ? '' : 'justify-end md:flex-row';
         const otherBtnColumnClass = isColumn ? '' : 'md:w-auto';
         const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : '';
         const contentBgClass = isBackgroundOnContentOnly
-            ? 'bg-orange-100 p-4 rounded-lg mb-4'
+            ? 'bg-orange-100 p-4 rounded-lg'
             : '';
         return html `
       <div
-        class="bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}"
+        class="bottom-0 mx-auto flex gap-4 w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}"
       >
         <div
-          class="self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}"
+          class="self-center w-full text-left text-sm text-grey-600 md:text-base ${contentBgClass}"
         >
           ${this.getCountdownGracePeriod()}
         </div>
         ${this.isShowButton
             ? html `
               <div
-                class="flex w-full flex-col gap-4 self-center ${buttonColumnClass}"
+                class="flex grow items-center flex-wrap shrink-0 gap-2 ${buttonColumnClass}"
               >
-                <button
-                  @click=${this.redirectToCheckout}
-                  class="w-full rounded-md bg-brand-1 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base"
-                >
-                  ${textA || 'Perbarui Langganan'}
-                </button>
-                <div class="md:block hidden">
-                  <button
-                    @click=${this.redirectToBerlangganan}
-                    class="bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}"
-                  >
-                    ${textB || 'Paket Lainnya'}
-                  </button>
-                </div>
-                <div class="md:hidden block">
+                <div class="max-h-10 flex flex-grow md:w-auto">
                   <button
-                    @click=${this.redirectToBerlangganan}
-                    class="bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}"
+                    @click=${this.redirectToCheckout}
+                    class="w-full rounded-md bg-brand-1 p-2 px-5 text-sm justify-center items-center font-bold text-grey-100 md:text-base"
                   >
-                    ${textB || 'Lihat Paket Lainnya'}
+                    ${textA || 'Perbarui Langganan'}
                   </button>
                 </div>
+                ${this.isWallet()
+                ? html `
+                      <div class="w-full md:w-auto flex flex-grow max-h-10">
+                        <button
+                          @click=${this.redirectCekSaldo}
+                          class="bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}"
+                        >
+                          Cara Isi Saldo
+                        </button>
+                      </div>
+                    `
+                : nothing}
               </div>
             `
             : nothing}
@@ -248,13 +311,21 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
     `;
     }
     async connectedCallback() {
+        // New API
+        const endpointNew = 'https://cdn-www.kompas.id/web-component/grace-period-offering.json';
+        const responseNew = await fetch(endpointNew);
+        const resultNew = await responseNew.json();
+        this.basketSize = resultNew.basket_size_kdp;
+        this.messages = resultNew.payment_method_messages;
+        this.templateCheckout = resultNew.template_checkout_url;
+        // comment old
         // 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;
+        // 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();
@@ -295,6 +366,15 @@ KompasGracePeriod.styles = [
 __decorate([
     property({ type: Number })
 ], KompasGracePeriod.prototype, "totalGracePeriod", void 0);
+__decorate([
+    property({ type: Number })
+], KompasGracePeriod.prototype, "memberhsip_channel_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "payment_method", void 0);
+__decorate([
+    property({ type: String })
+], KompasGracePeriod.prototype, "offering", void 0);
 __decorate([
     property({ type: Boolean })
 ], KompasGracePeriod.prototype, "isColumn", void 0);
@@ -370,6 +450,15 @@ __decorate([
 __decorate([
     state()
 ], KompasGracePeriod.prototype, "tempTextEachDay", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "basketSize", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "messages", void 0);
+__decorate([
+    state()
+], KompasGracePeriod.prototype, "templateCheckout", void 0);
 __decorate([
     state()
 ], KompasGracePeriod.prototype, "tempButtonA", void 0);

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      .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          totalGracePeriod > maxGracePeriod\n            ? maxGracePeriod - 1\n            : totalGracePeriod - 1 // template maksimal 7 hari\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-brand-1 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-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 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-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 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"]}
+{"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 memberhsip_channel_id = the ID of the subscription package by platform\n   * property payment_method = the payment method used by user\n   * property offering = the offering product\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: Number }) memberhsip_channel_id = 0 // [2 5 8] itu autorenewal\n  @property({ type: String }) payment_method = '' // xendit_shopeepay, midtrans_gopay, xendit_ovo , midtrans_cc\n  @property({ type: String }) offering = '' // Q1 ... Q5, [Q5 default]\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 = '' // kdp, kompas-one, kdp-koran\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 basketSize: { [key: string]: string } = {}\n  @state() private messages: { [key: string]: string } = {}\n  @state() private templateCheckout: string = ''\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 isAutoRenewal() {\n    const { memberhsip_channel_id: checkAutoRenewal } = this\n    if (\n      checkAutoRenewal === 2 ||\n      checkAutoRenewal === 5 ||\n      checkAutoRenewal === 8\n    ) {\n      return true\n    }\n    return false\n  }\n\n  private isWallet() {\n    const {\n      payment_method: paymentMethod,\n      memberhsip_channel_id: checkAutoRenewal,\n    } = this\n    const isMobile = checkAutoRenewal === 5 || checkAutoRenewal === 2\n    if (paymentMethod.includes('cc')) {\n      return false\n    }\n\n    if (isMobile) {\n      return false\n    }\n\n    return true\n  }\n\n  private getCountdownGracePeriod() {\n    const { messages, memberhsip_channel_id: checkAutoRenewal } = this\n\n    if (!this.isAutoRenewal()) {\n      return messages.default\n    }\n\n    // 8=Autorenewal\n    // 5=Apple\n    // 2=Google\n    const isRenewal =\n      checkAutoRenewal === 8 || checkAutoRenewal === 5 || checkAutoRenewal === 2\n    const isMobile = checkAutoRenewal === 5 || checkAutoRenewal === 2\n    if (!isRenewal) {\n      return messages.default\n    }\n\n    if (isMobile) {\n      return messages.default\n    }\n\n    // if string contains cc\n    if (this.payment_method.includes('cc')) {\n      return messages.credit_card\n    }\n    return messages.ewallet\n\n    // Comment old\n    // const { totalGracePeriod } = this\n    // const { maxGracePeriod } = this\n    // return html`\n    //   <p\n    //     class=\"message-gp\"\n    //     .innerHTML=${this.tempTextEachDay[\n    //       totalGracePeriod > maxGracePeriod\n    //         ? maxGracePeriod - 1\n    //         : totalGracePeriod - 1 // template maksimal 7 hari\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 redirectCekSaldo(): void {\n    // this.dataLayeronPerbaruiLanggananButton()\n    // this.sendGtmEvent('subscribe_button_clicked', true)\n    const urlComputed =\n      'https://kb.kompas.id/baca/berlangganan-kompas-id/langganan-kompas-id/mengapa-perpanjangan-pembaruan-langganan-otomatis-melalui-e-wallet-belum-berhasil/'\n    window.open(urlComputed)\n  }\n\n  private redirectToCheckout(): void {\n    const {\n      paywall_subscription_package: paywallSubscriptionPackage,\n      paywall_subscription_id: paywallSubscriptionId,\n      basketSize,\n      templateCheckout,\n      offering,\n    } = this\n    const tempOffering = offering || 'Q5'\n    const tempPackageSlug = paywallSubscriptionPackage.toLowerCase()\n\n    this.dataLayeronPerbaruiLanggananButton()\n    this.sendGtmEvent('subscribe_button_clicked')\n\n    if (!paywallSubscriptionId) {\n      window.open(basketSize[tempOffering])\n      return\n    }\n\n    if (tempPackageSlug.includes('kdp') && !tempPackageSlug.includes('koran')) {\n      window.open(basketSize[tempOffering])\n    } else {\n      window.open(\n        templateCheckout.replace(\n          '_productid_',\n          paywallSubscriptionId.toString()\n        )\n      )\n    }\n\n    // comment old\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 px-4 py-4'\n    const buttonColumnClass = isColumn ? '' : 'justify-end md:flex-row'\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'\n      : ''\n\n    return html`\n      <div\n        class=\"bottom-0 mx-auto flex gap-4 w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n      >\n        <div\n          class=\"self-center w-full 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 grow items-center flex-wrap shrink-0 gap-2 ${buttonColumnClass}\"\n              >\n                <div class=\"max-h-10 flex flex-grow md:w-auto\">\n                  <button\n                    @click=${this.redirectToCheckout}\n                    class=\"w-full rounded-md bg-brand-1 p-2 px-5 text-sm justify-center items-center font-bold text-grey-100 md:text-base\"\n                  >\n                    ${textA || 'Perbarui Langganan'}\n                  </button>\n                </div>\n                ${this.isWallet()\n                  ? html`\n                      <div class=\"w-full md:w-auto flex flex-grow max-h-10\">\n                        <button\n                          @click=${this.redirectCekSaldo}\n                          class=\"bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}\"\n                        >\n                          Cara Isi Saldo\n                        </button>\n                      </div>\n                    `\n                  : nothing}\n              </div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  override async connectedCallback() {\n    // New API\n    const endpointNew =\n      'https://cdn-www.kompas.id/web-component/grace-period-offering.json'\n    const responseNew = await fetch(endpointNew)\n    const resultNew = await responseNew.json()\n    this.basketSize = resultNew.basket_size_kdp\n    this.messages = resultNew.payment_method_messages\n    this.templateCheckout = resultNew.template_checkout_url\n\n    // comment old\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-header-account/types.d.ts

@@ -1,7 +1,13 @@
+export interface detailPackage {
+    offering: string;
+    payment_method: string;
+    memberhsip_channel_id: number;
+}
 export interface User {
     userName: string;
     expired: string;
     totalGracePeriod: number;
     isGracePeriod: boolean;
     isMembership: boolean;
+    detailPackageUser: detailPackage;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface User {\n  userName: string\n  expired: string\n  totalGracePeriod: number\n  isGracePeriod: boolean\n  isMembership: boolean\n  // updateMembership: string\n  // activeInfo: string // ga kepake dua data ini\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface detailPackage {\n  offering: string\n  payment_method: string\n  memberhsip_channel_id: number\n}\n\nexport interface User {\n  userName: string\n  expired: string\n  totalGracePeriod: number\n  isGracePeriod: boolean\n  isMembership: boolean\n  detailPackageUser: detailPackage\n}\n"]}

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

@@ -35,6 +35,7 @@ export declare class KompasHeaderAccountProfile extends LitElement {
      */
     private maxGracePeriod;
     formatDate(date: Date | string): string;
+    private handleDetailGracePeriod;
     private renderSkeletonLoading;
     private renderProfileContent;
     clickToManageAccount(): void;

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

@@ -45,6 +45,21 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
     formatDate(date) {
         return format(new Date(date), 'dd MMM yyyy', { locale: id });
     }
+    handleDetailGracePeriod() {
+        const { userData } = this;
+        if (userData.detailPackageUser) {
+            return {
+                memberhsip_channel_id: userData.detailPackageUser.memberhsip_channel_id || 0,
+                payment_method: userData.detailPackageUser.payment_method || '',
+                offering: userData.detailPackageUser.offering || '',
+            };
+        }
+        return {
+            memberhsip_channel_id: 0,
+            payment_method: '',
+            offering: '',
+        };
+    }
     renderSkeletonLoading() {
         return html `
       <div>
@@ -238,6 +253,11 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
             ? html ` <div class="mt-4 kompasid-grace-period">
               <kompasid-grace-period
                 totalGracePeriod=${this.userData.totalGracePeriod}
+                offering="${this.handleDetailGracePeriod().offering}"
+                memberhsip_channel_id="${this.handleDetailGracePeriod()
+                .memberhsip_channel_id}"
+                payment_method="${this.handleDetailGracePeriod()
+                .payment_method}"
                 isColumn="true"
                 isShowButton="true"
                 isBackgroundOnContentOnly="true"