npm - @kompasid/lit-web-components - Versions diffs - 0.9.53 → 0.9.55 - Mend

@kompasid/lit-web-components 0.9.53 → 0.9.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/demo/header.html CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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,54 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
             text: '',
         };
     }
+    isAutoRenewal() {
+        if (!this.memberhsip_channel_id)
+            return false;
+        if (this.memberhsip_channel_id === 2 ||
+            this.memberhsip_channel_id === 5 ||
+            this.memberhsip_channel_id === 8) {
+            return true;
+        }
+        return false;
+    }
+    isWallet() {
+        if (!this.memberhsip_channel_id)
+            return false;
+        const isMobile = this.memberhsip_channel_id === 5 || this.memberhsip_channel_id === 2;
+        if (this.payment_method.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>
-    `;
+        // 8=Autorenewal
+        // 5=Apple
+        // 2=Google
+        const isMobile = this.memberhsip_channel_id === 5 || this.memberhsip_channel_id === 2;
+        if (!this.isAutoRenewal() || isMobile) {
+            return this.messages.default;
+        }
+        // if string contains cc
+        if (this.payment_method.includes('cc')) {
+            return this.messages.credit_card;
+        }
+        return this.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 +160,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 +254,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">
+                <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 || 'Paket Lainnya'}
-                  </button>
-                </div>
-                <div class="md:hidden block">
-                  <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 || '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 +305,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 +360,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 +444,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 CHANGED Viewed

	@@ -1 +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"]}
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 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 if (!this.memberhsip_channel_id) return false\n\n if (\n this.memberhsip_channel_id === 2 \|\|\n this.memberhsip_channel_id === 5 \|\|\n this.memberhsip_channel_id === 8\n ) {\n return true\n }\n return false\n }\n\n private isWallet() {\n if (!this.memberhsip_channel_id) return false\n\n const isMobile =\n this.memberhsip_channel_id === 5 \|\| this.memberhsip_channel_id === 2\n if (this.payment_method.includes('cc')) {\n return false\n }\n\n if (isMobile) {\n return false\n }\n\n return true\n }\n\n private getCountdownGracePeriod() {\n // 8=Autorenewal\n // 5=Apple\n // 2=Google\n const isMobile =\n this.memberhsip_channel_id === 5 \|\| this.memberhsip_channel_id === 2\n\n if (!this.isAutoRenewal() \|\| isMobile) {\n return this.messages.default\n }\n\n // if string contains cc\n if (this.payment_method.includes('cc')) {\n return this.messages.credit_card\n }\n return this.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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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"