@kompasid/lit-web-components 0.4.0 → 0.4.2

package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js

@@ -1,11 +1,13 @@
 /* eslint-disable no-return-assign */
 import { __decorate } from "tslib";
-import { html, css, LitElement } from 'lit';
+import { html, css, LitElement, nothing } from 'lit';
 import { property, state, customElement } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { TWStyles } from '../../../tailwind/tailwind.js';
 import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
 import { deviceType } from '../../utils/deviceType.js';
+import { formatRupiah } from '../../utils/formatRupiah.js';
+import { addGoogleFonts } from '../../utils/googleFont.js';
 let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     constructor() {
         super(...arguments);
@@ -65,6 +67,9 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         this.tracker_metered_wall_balance = 0;
         this.tracker_epaper_edition = '';
         this.theme = '';
+        /**
+         * State
+         */
         this.isExtensionsOpened = false;
         this.kompasAkunHost = 'https://akun.kompas.id';
         this.kompasApigenHost = 'https://apigen.kompas.id';
@@ -75,133 +80,26 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         this.swgPublisherId = 'kompas.id';
         this.swgProductId = 'kompas.id:kompas_digital_premium';
         this.errorFlag = 0;
-        this.subscribeWithGoogleButton = () => {
-            // @ts-ignore
-            // eslint-disable-next-line no-restricted-globals
-            ;
-            (self.SWG = self.SWG || []).push((subscriptions) => {
-                // set entitlement
-                subscriptions.setOnEntitlementsResponse(() => {
-                    // subscriptions attach button
-                    subscriptions.attachButton(this.buttonElement, { theme: 'light', lang: 'en' }, () => {
-                        subscriptions.showOffers({ isClosable: true });
-                        subscriptions.setOnLoginRequest(() => {
-                            window.location.href = this.redirectToLogin;
-                        });
-                        subscriptions.setOnPaymentResponse(async (paymentResponse) => {
-                            const response = await paymentResponse;
-                            const raw = JSON.parse(response.purchaseData.raw);
-                            const { productId, purchaseToken, packageName } = raw;
-                            const { email } = response.userData.data;
-                            const payload = {
-                                subscription_token: purchaseToken,
-                                products: productId,
-                                detail: 'test',
-                            };
-                            const userToken = await this.getUserToken('google', payload);
-                            if (userToken) {
-                                // login and update membership
-                                const accessToken = await this.getSubscriptionToken('google', {
-                                    token: userToken,
-                                });
-                                if (accessToken) {
-                                    const payloadSWG = {
-                                        email,
-                                        package_name: packageName,
-                                        product_id: productId,
-                                        purchase_token: purchaseToken,
-                                    };
-                                    await this.createSwG(payloadSWG, accessToken);
-                                }
-                            }
-                            else {
-                                // register and login the unknown user
-                                const payloadRegisterToken = {
-                                    subscription_token: purchaseToken,
-                                    products: productId,
-                                    detail: 'test',
-                                };
-                                const token = await this.getRegisterToken('google', payloadRegisterToken);
-                                if (token) {
-                                    const accessToken = await this.getSubscriptionToken('google', { token });
-                                    const payloadSWRUknown = {
-                                        email,
-                                        package_name: packageName,
-                                        product_id: productId,
-                                        purchase_token: purchaseToken,
-                                    };
-                                    await this.createSwG(payloadSWRUknown, accessToken);
-                                }
-                            }
-                            response.complete().then(() => {
-                                window.location.href = this.redirectToLogin;
-                            });
-                        });
-                    });
-                });
-            });
-        };
-        this.sendDataLayeronPaywallBody = () => {
-            const gtmParams = {
-                event: 'paywall_viewed',
-                impressions: [
-                    {
-                        paywall_location: this.paywall_location || '',
-                        paywall_subscription_package: 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',
-                        paywall_subscription_id: '9802032',
-                        paywall_subscription_price: 360000,
-                        paywall_position: 1,
-                        user_type: this.tracker_user_type,
-                        subscription_status: this.tracker_subscription_status,
-                        page_domain: this.tracker_page_domain || 'Kompas.id',
-                        metered_wall_type: this.tracker_metered_wall_type || 'HP',
-                        metered_wall_balance: this.tracker_metered_wall_balance,
-                    },
-                    {
-                        paywall_location: this.paywall_location || '',
-                        paywall_subscription_package: 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',
-                        paywall_subscription_id: '9802035',
-                        paywall_subscription_price: 50000,
-                        paywall_position: 2,
-                        user_type: this.tracker_user_type,
-                        subscription_status: this.tracker_subscription_status,
-                        page_domain: this.tracker_page_domain || 'Kompas.id',
-                        metered_wall_type: this.tracker_metered_wall_type || 'HP',
-                        metered_wall_balance: this.tracker_metered_wall_balance,
-                    },
-                ],
-            };
-            if (this.type === 'epaper') {
-                gtmParams.impressions[0].epaper_edition = this.tracker_epaper_edition;
-                gtmParams.impressions[1].epaper_edition = this.tracker_epaper_edition;
-            }
-            else {
-                gtmParams.impressions[0].page_type = this.tracker_page_type;
-                gtmParams.impressions[0].content_id = this.tracker_content_id;
-                gtmParams.impressions[0].content_title = this.tracker_content_title;
-                gtmParams.impressions[0].content_categories =
-                    this.tracker_content_categories;
-                gtmParams.impressions[0].content_type = this.tracker_content_type;
-                gtmParams.impressions[1].page_type = this.tracker_page_type;
-                gtmParams.impressions[1].content_id = this.tracker_content_id;
-                gtmParams.impressions[1].content_title = this.tracker_content_title;
-                gtmParams.impressions[1].content_categories =
-                    this.tracker_content_categories;
-                gtmParams.impressions[1].content_type = this.tracker_content_type;
-            }
-            window.dataLayer.push(gtmParams);
+        this.redirectToLogin = () => {
+            window.location.href = this.loginUrl;
         };
     }
-    getRupiahFormat(value) {
-        const roundedValue = Math.round(value);
-        return `Rp ${roundedValue
-            .toString()
-            .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}`;
+    /**
+     * Getter
+     */
+    get loginUrl() {
+        return `${this.kompasLoginHost}?next=${encodeURIComponent(this.selfHost + window.location.pathname)}`;
+    }
+    get isDark() {
+        return this.theme === 'dark';
     }
+    /**
+     * Logic Function
+     */
     redirectToCheckout(url, name, id, price, position) {
         this.sendDataLayeronButtonBuyPackage(name, id, price, position);
         const originHost = encodeURIComponent(window.location.href);
-        const source = this.type === 'epaper' ? 'epaper' : '';
+        const source = this.type === 'epaper' ? 'epaper' : 'article';
         const directUrlCheckout = `${url}${originHost}&source=${source}`;
         window.open(directUrlCheckout);
     }
@@ -213,7 +111,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         window.open('https://www.kompas.id/berlangganan');
     }
     redirectToRegister() {
-        const loginHost = 'https://account.kompas.id/login';
+        const loginHost = 'https://account.kompas.id/register';
         const nextParams = encodeURIComponent(window.location.href);
         const directUrlRegister = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login`;
         window.location.href = directUrlRegister;
@@ -222,14 +120,12 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         this.sendDataLayeronHelpDesk();
         window.open('https://api.whatsapp.com/send/?phone=6281290050800&text=Halo,%20saya%20perlu%20informasi%20mengenai%20kompas.id');
     }
-    paymentExtensionHandler() {
-        this.isExtensionsOpened = !this.isExtensionsOpened;
-    }
-    get isDark() {
-        return this.theme === 'dark';
-    }
-    get redirectToLogin() {
-        return `${this.kompasLoginHost}?next=${encodeURIComponent(this.selfHost + window.location.pathname)}`;
+    parsePrice(price) {
+        const lowerCasePrice = price.toLowerCase();
+        if (lowerCasePrice.startsWith('rp')) {
+            return parseFloat(price.replace(/[^0-9,]/g, ''));
+        }
+        return parseFloat(price.replace(/[^0-9.]/g, ''));
     }
     async getRegisterToken(path, payload) {
         return fetch(`${this.kompasApigenHost}/v1/user/register/token/${path}`, {
@@ -301,6 +197,83 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
             throw error;
         });
     }
+    subscribeWithGoogleButton() {
+        // @ts-ignore
+        // eslint-disable-next-line no-restricted-globals
+        ;
+        (self.SWG = self.SWG || []).push((subscriptions) => {
+            // set entitlement
+            subscriptions.setOnEntitlementsResponse(() => {
+                // subscriptions attach button
+                subscriptions.attachButton(this.buttonElement, { theme: 'light', lang: 'en' }, async () => {
+                    subscriptions.showOffers({ isClosable: true });
+                    subscriptions.setOnLoginRequest(() => {
+                        window.location.href = this.loginUrl;
+                    });
+                    const offers = await subscriptions.getOffers();
+                    subscriptions.setOnFlowStarted((callback) => {
+                        if (callback.flow === 'showOffers') {
+                            window.dataLayer.push(this.swgPackageViewedDataLayer(offers));
+                        }
+                        else if (callback.flow === 'subscribe') {
+                            const selectedOfferSkuId = callback.data.skuId;
+                            const selectedOffer = offers.find((offer) => offer.skuId === selectedOfferSkuId);
+                            window.dataLayer.push(this.swgSubscribeButtonClicked(selectedOffer, offers.indexOf(selectedOffer)));
+                        }
+                    });
+                    subscriptions.setOnPaymentResponse(async (paymentResponse) => {
+                        const response = await paymentResponse;
+                        const raw = JSON.parse(response.purchaseData.raw);
+                        const { productId, purchaseToken, packageName } = raw;
+                        const { email } = response.userData.data;
+                        const payload = {
+                            subscription_token: purchaseToken,
+                            products: productId,
+                            detail: 'test',
+                        };
+                        const userToken = await this.getUserToken('google', payload);
+                        if (userToken) {
+                            // login and update membership
+                            const accessToken = await this.getSubscriptionToken('google', {
+                                token: userToken,
+                            });
+                            if (accessToken) {
+                                const payloadSWG = {
+                                    email,
+                                    package_name: packageName,
+                                    product_id: productId,
+                                    purchase_token: purchaseToken,
+                                };
+                                await this.createSwG(payloadSWG, accessToken);
+                            }
+                        }
+                        else {
+                            // register and login the unknown user
+                            const payloadRegisterToken = {
+                                subscription_token: purchaseToken,
+                                products: productId,
+                                detail: 'test',
+                            };
+                            const token = await this.getRegisterToken('google', payloadRegisterToken);
+                            if (token) {
+                                const accessToken = await this.getSubscriptionToken('google', { token });
+                                const payloadSWRUknown = {
+                                    email,
+                                    package_name: packageName,
+                                    product_id: productId,
+                                    purchase_token: purchaseToken,
+                                };
+                                await this.createSwG(payloadSWRUknown, accessToken);
+                            }
+                        }
+                        response.complete().then(() => {
+                            window.location.href = this.loginUrl;
+                        });
+                    });
+                });
+            });
+        });
+    }
     jsonScript() {
         const jsonData = {
             '@context': 'https://schema.org',
@@ -327,27 +300,78 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
             jsonHead.appendChild(jsonScript);
         }
     }
-    connectedCallback() {
-        // eslint-disable-next-line wc/guard-super-call
+    async connectedCallback() {
+        var _a;
         super.connectedCallback();
+        await this.updateComplete;
         if (this.swgEnable) {
             this.jsonScript();
-            const appendSWGButton = () => {
-                var _a;
-                this.buttonElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('subscribe-with-google');
-                if (this.buttonElement) {
-                    const head = document.querySelector('head');
-                    const script = document.createElement('script');
-                    script.src = 'https://news.google.com/swg/js/v1/swg.js';
-                    script.defer = true;
-                    script.onload = this.subscribeWithGoogleButton();
-                    if (head) {
-                        head.appendChild(script);
-                    }
+            this.buttonElement = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('subscribe-with-google');
+            if (this.buttonElement) {
+                const head = document.querySelector('head');
+                const script = document.createElement('script');
+                script.src = 'https://news.google.com/swg/js/v1/swg.js';
+                script.defer = true;
+                script.onload = this.subscribeWithGoogleButton();
+                if (head) {
+                    head.appendChild(script);
                 }
-            };
-            setTimeout(appendSWGButton, 500);
+            }
         }
+        addGoogleFonts(['pt-sans', 'lora']);
+    }
+    otherPackagesClicked() {
+        this.sendDataLayerOtherPackagesClicked();
+        this.redirectToSubscriber();
+    }
+    customerServiceClicked() {
+        this.sendDataLayerCustomerServiceClicked();
+        this.redirectToHelpdesk();
+    }
+    /**
+     * Data Layer
+     */
+    buildGtmParams(event, impressions, index = 0) {
+        const gtmParams = {
+            event,
+            impressions: impressions.map((impression, i) => ({
+                paywall_location: this.paywall_location || '',
+                paywall_subscription_package: impression.package,
+                paywall_subscription_id: impression.subscription_id,
+                paywall_subscription_price: this.parsePrice(impression.price),
+                paywall_position: index + i + 1,
+                user_type: this.tracker_user_type,
+                subscription_status: this.tracker_subscription_status,
+                page_domain: this.tracker_page_domain || 'Kompas.id',
+                metered_wall_type: this.tracker_metered_wall_type || 'HP',
+                metered_wall_balance: this.tracker_metered_wall_balance,
+                ...(this.type === 'epaper'
+                    ? { epaper_edition: this.tracker_epaper_edition }
+                    : {
+                        page_type: this.tracker_page_type,
+                        content_id: this.tracker_content_id,
+                        content_title: this.tracker_content_title,
+                        content_categories: this.tracker_content_categories,
+                        content_type: this.tracker_content_type,
+                    }),
+            })),
+        };
+        return gtmParams;
+    }
+    generalPaywallDataLayer(event) {
+        const impressions = [
+            {
+                package: 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12',
+                subscription_id: '9802032',
+                price: '360000',
+            },
+            {
+                package: 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1',
+                subscription_id: '9802035',
+                price: '50000',
+            },
+        ];
+        return this.buildGtmParams(event, impressions);
     }
     sendDataLayer() {
         window.dataLayer.push({
@@ -391,23 +415,81 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         }
         window.dataLayer.push(gtmParams);
     }
+    sendDataLayeronPaywallBody() {
+        const gtmParams = this.generalPaywallDataLayer('paywall_viewed');
+        window.dataLayer.push(gtmParams);
+    }
+    sendDataLayerOtherPackagesClicked() {
+        const gtmParams = this.generalPaywallDataLayer('other_packages_clicked');
+        window.dataLayer.push(gtmParams);
+    }
+    sendDataLayerCustomerServiceClicked() {
+        const gtmParams = this.generalPaywallDataLayer('customer_service_clicked');
+        window.dataLayer.push(gtmParams);
+    }
+    swgPackageViewedDataLayer(data) {
+        const impressions = data.map((item) => ({
+            package: item.title,
+            subscription_id: item.skuId,
+            price: item.introductoryPrice || item.price,
+        }));
+        return this.buildGtmParams('subscription_package_viewed', impressions);
+    }
+    swgSubscribeButtonClicked(item, index) {
+        const gtmParams = {
+            event: 'subscribe_button_clicked',
+            paywall_location: this.paywall_location || '',
+            paywall_subscription_package: item.title,
+            paywall_subscription_id: item.skuId,
+            paywall_subscription_price: this.parsePrice(item.introductoryPrice || item.price),
+            paywall_position: index + 1,
+            user_type: this.tracker_user_type,
+            subscription_status: this.tracker_subscription_status,
+            page_domain: this.tracker_page_domain || 'Kompas.id',
+            metered_wall_type: this.tracker_metered_wall_type || 'HP',
+            metered_wall_balance: this.tracker_metered_wall_balance,
+        };
+        if (this.type === 'epaper') {
+            gtmParams.epaper_edition = this.tracker_epaper_edition;
+        }
+        else {
+            gtmParams.page_type = this.tracker_page_type;
+            gtmParams.content_id = this.tracker_content_id;
+            gtmParams.content_title = this.tracker_content_title;
+            gtmParams.content_categories = this.tracker_content_categories;
+            gtmParams.content_type = this.tracker_content_type;
+        }
+        return gtmParams;
+    }
+    /**
+     * Component
+     */
     headerSection(type) {
+        const headerSectionText = type === 'epaper'
+            ? 'Akses ePaper Ini dengan Berlangganan'
+            : 'Lanjut Baca Artikel Ini dengan Berlangganan';
         return html `
-      <div class="flex w-full items-center">
+      <div class="flex w-full items-center justify-center">
         ${type === 'epaper'
             ? html `<button
-              @click=${() => this.redirectToPrevUrl()}
+              @click=${this.redirectToPrevUrl}
               class="hidden lg:block w-8 h-8 text-blue-600 pl-4"
             >
               ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
             </button>`
-            : ''}
+            : nothing}
         <h4
-          class="text-base md:text-xl ${this.isDark &&
-            'text-white'} text-center font-bold font-serif tracking-wide md:tracking-normal w-full"
+          class="text-base flex justify-center self-center md:block md:text-xl ${this
+            .isDark
+            ? 'text-white'
+            : 'text-grey-600'}
+          text-center font-lora font-bold tracking-wide md:tracking-normal w-4/5 md:w-full"
         >
-          Langganan untuk Lanjut Membaca
+          ${headerSectionText}
         </h4>
+        ${type === 'epaper'
+            ? html `<div class="w-10 hidden lg:flex"></div>`
+            : nothing}
       </div>
     `;
     }
@@ -416,12 +498,13 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
       <div class="flex flex-col space-y-2 mt-2.5 md:mt-3">
         ${data.map(item => html `
               <div class="flex items-center">
-                <div class="text-green-500">
+                <div class=${this.isDark ? 'text-green-400' : 'text-green-500'}>
                   ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
                 </div>
                 <h6
-                  class="text-xs md:text-base ${this.isDark &&
-            'text-white'} ml-0.5 md:ml-1"
+                  class="text-xs md:text-base ${this.isDark
+            ? 'text-white'
+            : 'text-grey-600'} ml-0.5 md:ml-1"
                 >
                   ${item}
                 </h6>
@@ -433,7 +516,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     informationPackages() {
         return html ` <div class="mt-4 flex justify-center">
       <button
-        @click=${() => this.redirectToSubscriber()}
+        @click=${this.otherPackagesClicked}
         class="text-sm md:text-base font-bold ${this.isDark
             ? 'text-blue-300'
             : 'text-blue-600'} underline"
@@ -445,54 +528,69 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     separatorLine() {
         return html `
       <div class="flex flex-row w-full justify-center">
-        <div
-          class="border-b-2 ${this.isDark
-            ? 'border-dark-2'
-            : 'border-blue-200'} w-1/4 my-4 flex justify-center"
-        ></div>
-        <p class="px-4 pt-1 ${this.isDark && 'text-dark-1'}">atau</p>
-        <div
-          class="border-b-2 ${this.isDark
-            ? 'border-dark-2'
-            : 'border-blue-200'} w-1/4 my-4 flex justify-center"
-        ></div>
+        <p class="px-4 pt-1 ${this.isDark ? 'text-dark-1' : 'text-grey-500'}">
+          atau
+        </p>
       </div>
     `;
     }
-    paymentDesktopSection(data) {
+    epaperRegistrationSection() {
         return html `
-      <div
-        class="hidden md:flex w-full md:max-w-sm items-center justify-center flex-wrap"
-      >
-        ${data.map(item => html `<img
-              class="object-cover ${this.isDark ? 'h-9' : 'h-10'}"
-              src=${item.link}
-              alt="${item.name}-logo-payment"
-            />`)}
+      <div>
+        <button
+          @click=${this.redirectToLogin}
+          class="text-sm md:text-base font-bold ${this.isDark
+            ? 'text-blue-300'
+            : 'text-blue-600'} underline"
+        >
+          Masuk
+        </button>
+        <span class=${this.isDark && 'text-white'}>
+          jika sudah berlangganan.</span
+        >
       </div>
     `;
     }
-    paymentMobileSection(data) {
+    regulerRegistrationSection() {
         return html `
-      <div
-        class="grid md:hidden items-center grid-flow-col grid-cols-auto grid-rows-1 mt-4 mx-4"
-      >
-        ${data.map(item => html `<img
-              class="w-16"
-              src=${item.link}
-              alt="${item.name}-logo-payment"
-            />`)}
-        <button
-          @click=${() => this.paymentExtensionHandler()}
-          class="text-xs md:text-sm ${this.isDark
+      <div class="flex flex-col items-center justify-center">
+        <div>
+          <button
+            @click=${this.redirectToRegister}
+            class="text-sm md:text-base font-bold ${this.isDark
             ? 'text-blue-300'
-            : 'text-blue-600'} font-bold"
-        >
-          +9 lainnya
-        </button>
+            : 'text-blue-600'} underline"
+          >
+            Daftar
+          </button>
+          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}>
+            untuk kuota artikel gratis</span
+          >
+        </div>
+        <div>
+          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}
+            >atau
+          </span>
+          <button
+            @click=${this.redirectToLogin}
+            class="text-sm md:text-base font-bold ${this.isDark
+            ? 'text-blue-300'
+            : 'text-blue-600'} underline"
+          >
+            Masuk
+          </button>
+          <span class=${this.isDark ? 'text-white' : 'text-grey-600'}>
+            jika sudah punya akun.</span
+          >
+        </div>
       </div>
     `;
     }
+    registrationSection(type) {
+        return type === 'epaper'
+            ? this.epaperRegistrationSection()
+            : this.regulerRegistrationSection();
+    }
     paymentMobileExtension(data) {
         return html `
       <div
@@ -533,22 +631,23 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
       <div
         class="flex flex-wrap justify-between items-center ${this.isDark
             ? 'bg-grey-600'
-            : 'bg-white'} rounded md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5 md:mt-4 border border-yellow-400 relative"
+            : 'bg-white'} rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-2.5 md:mt-4 border border-yellow-400 relative"
       >
         <div class="flex flex-col py-3 px-4">
           <div class="flex flex-none items-center">
             <h5 class="text-base md:text-lg font-bold text-orange-400">
-              ${this.getRupiahFormat(product.price)}
+              ${formatRupiah(product.price)}
             </h5>
             <h6
-              class="text-xs md:text-base ${this.isDark &&
-            'text-white'} font-bold pl-1"
+              class="text-xs md:text-base ${this.isDark
+            ? 'text-dark-7'
+            : 'text-grey-600'} font-bold pl-1"
             >
               / ${product.periode}
             </h6>
           </div>
           <div class="flex items-center">
-            <p class="text-xs ${this.isDark && 'text-white'}">
+            <p class="text-xs ${this.isDark ? 'text-dark-7' : 'text-grey-600'}">
               hanya <span class="text-orange-400">Rp 30.000</span> / bulan
             </p>
           </div>
@@ -569,7 +668,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         </button>
         <div class="absolute -top-2 left-4">
           <div class="rounded bg-yellow-300 px-2 py-0.5 text-xs">
-            <b>Harga Terbaik</b>
+            <b class="text-grey-600">Harga Terbaik</b>
           </div>
         </div>
       </div>
@@ -580,15 +679,16 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
       <div
         class="flex  flex-wrap justify-between ${this.isDark
             ? 'bg-grey-600'
-            : 'bg-white'} py-3 px-4 rounded md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
+            : 'bg-white'} py-3 px-4 rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 mt-3 md:mt-4"
       >
         <div class="flex items-center">
           <h5 class="text-base md:text-lg font-bold text-orange-400">
-            ${this.getRupiahFormat(product.price)}
+            ${formatRupiah(product.price)}
           </h5>
           <h6
-            class="text-xs md:text-base ${this.isDark &&
-            'text-white'} font-bold pl-1"
+            class="text-xs md:text-base ${this.isDark
+            ? 'text-dark-7'
+            : 'text-grey-600'} font-bold pl-1"
           >
             / ${product.periode}
           </h6>
@@ -611,12 +711,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     }
     packagesSection(data) {
         return html `
-      <div class="flex flex-col w-full items-center mt-8 lg:mt-2 px-2 ">
-        <h6
-          class="text-sm md:text-base ${this.isDark && 'text-white'} font-bold"
-        >
-          ${data.title}
-        </h6>
+      <div class="flex flex-col w-full items-center mt-8 lg:mt-2 px-4">
         ${data.memberships.map(item => item.isHighlight
             ? this.primaryPackages(item)
             : this.secondaryPackages(item))}
@@ -627,7 +722,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
         return html `
       <div class="flex lg:hidden items-center w-full pb-4 ">
         <button
-          @click=${() => this.redirectToPrevUrl()}
+          @click=${this.redirectToPrevUrl}
           class="text-xs md:text-lg text-white flex flex-row"
         >
           <div class="icon-lg icon-white w-4 h-4 mr-3.5 md:mr-5 pt-0.5">
@@ -640,94 +735,92 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     }
     helpDesk() {
         return html `
-      <div class="py-2.5 text-white self-center text-xs md:text-sm">
-        Mengalami masalah? Hubungi
-        <button
-          @click=${() => this.redirectToHelpdesk()}
-          class="font-bold ${this.isDark && 'text-blue-300'} underline"
-        >
-          Layanan Pelanggan.
-        </button>
-      </div>
-    `;
-    }
-    authRegister() {
-        return html `
       <div
-        class="flex flex-row text-white px-2 py-2.5 space-x-4 md:space-x-8 self-center"
+        class="${this.isDark
+            ? 'text-dark-7'
+            : 'text-white'} self-center text-xs md:text-sm"
       >
-        <div class="flex flex-col text-left text-xs md:text-sm text-white">
-          <b>Sudah berlangganan Kompas.id?</b>
-          <p>Masuk untuk lanjut membaca.</p>
-        </div>
+        Butuh bantuan? Hubungi
         <button
-          @click=${() => this.redirectToRegister()}
-          class="h-auto ${this.isDark
-            ? 'bg-blue-300'
-            : 'bg-grey-100'} rounded mr-3"
+          @click=${this.customerServiceClicked}
+          class="font-bold underline"
         >
-          <p
-            class="text-xs md:text-sm ${this.isDark
-            ? 'text-black'
-            : 'text-blue-600'} font-bold py-2 px-4"
-          >
-            Masuk / Daftar
-          </p>
+          Layanan Pelanggan.
         </button>
       </div>
     `;
     }
-    userAction(isLogin, type) {
+    userAction() {
         return html `
       <div
-        class="flex h-20 ${this.isDark
+        class="flex py-5 px-8 md:py-6 ${this.isDark
             ? 'bg-dark-4'
-            : 'bg-blue-600'} w-full justify-evenly rounded-b mt-6 md:mt-8 relative"
+            : 'bg-blue-600'} w-full justify-evenly rounded-b-xl mt-6 md:mt-8 relative"
       >
-        ${isLogin || type !== 'epaper' ? this.helpDesk() : this.authRegister()}
+        ${this.helpDesk()}
       </div>
     `;
     }
+    /**
+     * Render Statement
+     */
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return html `
       <div
         class="${this.type === 'epaper'
-            ? 'bg-transparent wrapper-body'
+            ? 'bg-transparent wrapper-body mx-2'
             : 'wrapper-body'}"
       >
         <div
-          class="flex flex-col justify-center items-center w-full max-w-screen-sm px-4 md:px-0 my-5 relative"
+          class="flex flex-col justify-center items-center w-full max-w-screen-sm my-5 relative"
         >
-          ${this.type === 'epaper' ? this.topNavigator() : ''}
+          ${this.type === 'epaper' ? this.topNavigator() : nothing}
           <div
             class="flex w-full flex-col items-center justify-center ${this
             .isDark
             ? 'bg-dark-3'
-            : 'bg-blue-100'}  rounded pt-6 md:pt-8 relative"
+            : 'bg-blue-100'}  rounded-xl pt-6 md:pt-8 relative"
           >
             ${this.headerSection(this.type)}
             ${this.descriptionSection((_c = (_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.description) !== null && _c !== void 0 ? _c : [])}
             ${this.packagesSection((_e = (_d = this.paywallData) === null || _d === void 0 ? void 0 : _d.packages) !== null && _e !== void 0 ? _e : {})}
             ${this.informationPackages()}
-            ${this.swgEnable ? this.separatorLine() : null}
+            ${this.swgEnable ? this.separatorLine() : nothing}
             ${this.swgEnable
             ? html `<button
-              class="border-2 bg-grey-100 border-grey-100 rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 mb-4"
-              id="subscribe-with-google"
-            >
-              <p>Subscribe with</p>
-              <img class="pl-2 object-scale-down w-20 pt-0.5" src="https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png" alt="subscribe with google"></img>
-            </button>`
-            : null}
-            ${this.paymentDesktopSection((_h = (_g = (_f = this.paywallData) === null || _f === void 0 ? void 0 : _f.payment) === null || _g === void 0 ? void 0 : _g.desktop) !== null && _h !== void 0 ? _h : [])}
-            ${this.paymentMobileSection((_l = (_k = (_j = this.paywallData) === null || _j === void 0 ? void 0 : _j.payment) === null || _k === void 0 ? void 0 : _k.mobile) !== null && _l !== void 0 ? _l : [])}
-            ${this.userAction(this.isLogin, this.type)}
-            ${this.sendDataLayeronPaywallBody()}
+                  class="${this.isDark
+                ? 'bg-grey-600'
+                : 'border-2 bg-grey-100 border-grey-100'} rounded-lg px-6 shadow-sm flex flex-row py-2 mt-1 items-center"
+                  id="subscribe-with-google"
+                >
+                  <p class=${this.isDark ? 'text-dark-7' : 'text-grey-500'}>
+                    Subscribe with
+                  </p>
+                  <img
+                    class="pl-2 object-scale-down w-20 pt-0.5"
+                    src=${this.isDark
+                ? 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google-white.png'
+                : 'https://kompasid-production-www.s3.ap-southeast-1.amazonaws.com/paywall-asset/google.png'}
+                    alt="subscribe with google"
+                  />
+                </button>`
+            : nothing}
+            ${!this.isLogin
+            ? html `
+                  <div
+                    class="border-b ${this.isDark
+                ? 'border-dark-8'
+                : 'border-blue-200'} w-1/5 my-4 flex justify-center"
+                  ></div>
+                  ${this.registrationSection(this.type)}
+                `
+            : nothing}
+            ${this.userAction()} ${this.sendDataLayeronPaywallBody()}
           </div>
           ${this.isExtensionsOpened
-            ? this.paymentMobileExtension((_p = (_o = (_m = this.paywallData) === null || _m === void 0 ? void 0 : _m.payment) === null || _o === void 0 ? void 0 : _o.ekstension) !== null && _p !== void 0 ? _p : [])
-            : ''}
+            ? this.paymentMobileExtension((_h = (_g = (_f = this.paywallData) === null || _f === void 0 ? void 0 : _f.payment) === null || _g === void 0 ? void 0 : _g.ekstension) !== null && _h !== void 0 ? _h : [])
+            : nothing}
         </div>
       </div>
     `;
@@ -741,6 +834,10 @@ KompasIdPaywallBody.styles = [
         justify-items: center;
         align-items: center;
       }
+
+      .font-lora {
+        font-family: 'Lora', 'Georgia', 'serif';
+      }
     `,
     TWStyles,
 ];