@kompasid/lit-web-components 0.1.0

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

@@ -0,0 +1,843 @@
+/* eslint-disable no-return-assign */
+import { __decorate } from "tslib";
+import { html, css, LitElement } 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';
+let KompasPaywallBody = class KompasPaywallBody extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Props
+         */
+        /**
+         * prop slug untuk menghandle slug
+         * prop isLogin untuk menghandle apakah user sudah login atau belum
+         * prop type untuk menghandle tipe epaper
+         * prop paywallData untuk menghandle data paywall
+         * prop userGuid untuk menghandle user Guid
+         * prop subscriptionStatus untuk menghandle status subscription user
+         * prop countdownArticle untuk menghandle count artikel
+         * prop swgEnable untuk menghandle swg apakah di aktifkan atau tidak
+         * prop paywall_location = The location where user encounter the paywall
+         * prop paywall_subscription_package = The name of the subscription package viewed by user
+         * prop paywall_subscription_id = The ID of the subscription package viewed by user
+         * prop paywall_subscription_price = The price of the subscriprtion package viewed by user
+         * prop paywall_position = The position of the subscription package viewed by user
+         * prop tracker_page_type = Type of the page
+         * prop tracker_content_id = ID of article (slug)
+         * prop tracker_content_type = Whether it's free article or paid article
+         * prop tracker_content_title = The title of article
+         * prop tracker_content_categories = The category of the content
+         * prop tracker_user_type = Type of user based on their subscription
+         * prop tracker_subscription_status = Status of their subscription
+         * prop tracker_page_domain = Page Domain
+         * prop tracker_metered_wall_type = The type of Metered Wall
+         * prop tracker_metered_wall_balance = The balance of their metered wall
+         * prop tracker_metered_wall_balance = The edition of epaper viewed by user
+         * prop theme = The theme of the paywall component
+         */
+        this.slug = '';
+        this.udin = 0;
+        this.isLogin = false;
+        this.type = 'reguler';
+        this.paywallData = undefined;
+        this.userGuid = '';
+        this.subscriptionStatus = '';
+        this.countdownArticle = 0;
+        this.swgEnable = false;
+        this.paywall_location = '';
+        this.paywall_subscription_package = '';
+        this.paywall_subscription_id = 0;
+        this.paywall_subscription_price = 0;
+        this.paywall_position = 0;
+        this.tracker_page_type = '';
+        this.tracker_content_id = '';
+        this.tracker_content_title = '';
+        this.tracker_content_categories = '';
+        this.tracker_content_type = '';
+        this.tracker_user_type = '';
+        this.tracker_subscription_status = '';
+        this.tracker_page_domain = '';
+        this.tracker_metered_wall_type = '';
+        this.tracker_metered_wall_balance = 0;
+        this.tracker_epaper_edition = '';
+        this.theme = '';
+        this.isExtensionsOpened = false;
+        this.kompasAkunHost = 'https://akun.kompas.id';
+        this.kompasApigenHost = 'https://apigen.kompas.id';
+        this.kompasApiWcmHost = 'https://apiwcm.kompas.id';
+        this.kompasLoginHost = 'https://account.kompas.id/login';
+        this.selfHost = 'https://epaper.kompas.id';
+        this.swgPublisherName = 'Harian Kompas';
+        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);
+        };
+    }
+    getRupiahFormat(value) {
+        const roundedValue = Math.round(value);
+        return `Rp ${roundedValue
+            .toString()
+            .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.')}`;
+    }
+    redirectToCheckout(url, name, id, price, position) {
+        this.sendDataLayeronButtonBuyPackage(name, id, price, position);
+        const originHost = encodeURIComponent(window.location.href);
+        const directUrlCheckout = url + originHost;
+        window.open(directUrlCheckout);
+    }
+    redirectToPrevUrl() {
+        window.history.back();
+    }
+    redirectToSubscriber() {
+        this.sendDataLayer();
+        window.open('https://www.kompas.id/berlangganan');
+    }
+    redirectToRegister() {
+        const loginHost = 'https://account.kompas.id/login';
+        const nextParams = encodeURIComponent(window.location.href);
+        const directUrlRegister = `${loginHost}?next=${nextParams}?status=sukses_login&status_login=login`;
+        window.location.href = directUrlRegister;
+    }
+    redirectToHelpdesk() {
+        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)}`;
+    }
+    async getRegisterToken(path, payload) {
+        return fetch(`${this.kompasApigenHost}/v1/user/register/token/${path}`, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+            headers: {
+                'content-type': 'application/json',
+            },
+        })
+            .then(response => response.json())
+            .then((data) => data.result.token)
+            .catch(error => {
+            throw error;
+        });
+    }
+    async getUserToken(path, payload) {
+        return fetch(`${this.kompasApigenHost}/v1/user/token/${path}`, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+            headers: {
+                'content-type': 'application/json',
+            },
+        })
+            .then(response => response.json())
+            .then((data) => data.result.token)
+            .catch(error => {
+            throw error;
+        });
+    }
+    async getSubscriptionToken(path, payload) {
+        return fetch(`${this.kompasAkunHost}/api/subscription/login/${path}`, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+            headers: {
+                'content-type': 'application/json',
+            },
+        })
+            .then(response => response.json())
+            .then((data) => {
+            this.errorFlag = 0;
+            return data.access_token;
+        })
+            .catch(async (error) => {
+            const errorCode = error.response.status;
+            if (errorCode === 500 && this.errorFlag < 5) {
+                // eslint-disable-next-line no-plusplus
+                this.errorFlag++;
+                setTimeout(async () => {
+                    await this.getSubscriptionToken(path, payload);
+                }, 2000);
+            }
+            else {
+                this.errorFlag = 0;
+                throw error;
+            }
+        });
+    }
+    async createSwG(payload, token) {
+        await fetch(`${this.kompasApiWcmHost}/v2/membership/swg/create`, {
+            method: 'POST',
+            body: JSON.stringify(payload),
+            headers: {
+                'content-type': 'application/json',
+                Authorization: `Bearer ${token}`,
+            },
+        })
+            .then(response => response.json())
+            .catch(error => {
+            throw error;
+        });
+    }
+    jsonScript() {
+        const jsonData = {
+            '@context': 'https://schema.org',
+            '@type': ['WebSite', 'WebPage'],
+            isAccessibleForFree: false,
+            url: this.selfHost + window.location.pathname,
+            name: this.swgPublisherName,
+            hasPart: {
+                '@type': 'WebPageElement',
+            },
+            isPartOf: {
+                '@type': ['CreativeWork', 'Product'],
+                name: this.swgPublisherId,
+                productID: this.swgProductId,
+            },
+        };
+        const str = JSON.stringify(jsonData);
+        const jsonScript = document.createElement('script');
+        jsonScript.type = 'application/ld+json';
+        jsonScript.text = str;
+        jsonScript.defer = true;
+        const jsonHead = document.querySelector('head');
+        if (jsonHead) {
+            jsonHead.appendChild(jsonScript);
+        }
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        if (this.swgEnable) {
+            this.jsonScript();
+            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);
+                }
+            }
+        }
+    }
+    sendDataLayer() {
+        window.dataLayer.push({
+            event: 'halamanBerlanggananClick',
+            subscriptionStatus: '',
+            GUID: '',
+            interface: deviceType(),
+        });
+    }
+    sendDataLayeronHelpDesk() {
+        window.dataLayer.push({
+            event: 'helpOfferClick',
+            userType: this.subscriptionStatus,
+            GUID: this.userGuid,
+            interface: deviceType(),
+        });
+    }
+    sendDataLayeronButtonBuyPackage(name, id, price, position) {
+        const gtmParams = {
+            event: 'subscribe_button_clicked',
+            paywall_location: this.paywall_location,
+            paywall_subscription_package: name,
+            paywall_subscription_id: id,
+            paywall_subscription_price: price,
+            paywall_position: position,
+            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.content_title = this.tracker_content_title;
+            gtmParams.content_id = this.tracker_content_id;
+            gtmParams.content_categories = this.tracker_content_categories;
+            gtmParams.content_type = this.tracker_content_type;
+            gtmParams.page_type = this.tracker_page_type;
+        }
+        else {
+            gtmParams.epaper_edition = this.tracker_epaper_edition;
+        }
+        window.dataLayer.push(gtmParams);
+    }
+    headerSection(type) {
+        return html `
+      <div class="flex w-full items-center">
+        ${type === 'epaper'
+            ? html `<button
+              @click=${() => this.redirectToPrevUrl()}
+              class="hidden lg:block w-8 h-8 text-blue-600 pl-4"
+            >
+              ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+            </button>`
+            : ''}
+        <h4
+          class="text-base md:text-xl ${this.isDark &&
+            'text-white'} text-center font-bold font-serif tracking-wide md:tracking-normal w-full"
+        >
+          Langganan untuk Lanjut Membaca
+        </h4>
+      </div>
+    `;
+    }
+    descriptionSection(data) {
+        return html `<div class=" flex flex-col items-center">
+      <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">
+                  ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
+                </div>
+                <h6
+                  class="text-xs md:text-base ${this.isDark &&
+            'text-white'} ml-0.5 md:ml-1"
+                >
+                  ${item}
+                </h6>
+              </div>
+            `)}
+      </div>
+    </div>`;
+    }
+    informationPackages() {
+        return html ` <div class="mt-4 flex justify-center">
+      <button
+        @click=${() => this.redirectToSubscriber()}
+        class="text-sm md:text-base font-bold ${this.isDark
+            ? 'text-blue-300'
+            : 'text-blue-600'} underline"
+      >
+        Lihat Paket Lainnya
+      </button>
+    </div>`;
+    }
+    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>
+      </div>
+    `;
+    }
+    paymentDesktopSection(data) {
+        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>
+    `;
+    }
+    paymentMobileSection(data) {
+        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
+            ? 'text-blue-300'
+            : 'text-blue-600'} font-bold"
+        >
+          +9 lainnya
+        </button>
+      </div>
+    `;
+    }
+    paymentMobileExtension(data) {
+        return html `
+      <div
+        class="w-full ${this.isDark
+            ? '-bottom-6'
+            : 'bottom-0'} max-w-xs mb-1 ml-8 md:hidden absolute px-4"
+      >
+        <div
+          class="w-full ${this.isDark
+            ? 'bg-dark-6 border-dark-6'
+            : 'bg-white border-white'} rounded p-3 max-w-xs"
+        >
+          <svg
+            class="right-0 ${this.isDark
+            ? 'text-dark-6 border-dark-6'
+            : 'text-white border-white '} h-4 mr-10 -mt-7 z-0 transform rotate-180 absolute"
+            x="0px"
+            y="0px"
+            viewBox="0 0 255 255"
+          >
+            <polygon class="fill-current" points="0,0 127.5,127.5 255,0" />
+          </svg>
+          <div
+            class="grid place-items-center items-center grid-flow-row grid-cols-5 grid-rows-2  gap-y-4"
+          >
+            ${data.map(item => html `<img
+                  class="object-cover"
+                  src=${item.link}
+                  alt="${item.name}-logo-payment"
+                />`)}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    primaryPackages(product) {
+        return html `
+      <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"
+      >
+        <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)}
+            </h5>
+            <h6
+              class="text-xs md:text-base ${this.isDark &&
+            'text-white'} font-bold pl-1"
+            >
+              / ${product.periode}
+            </h6>
+          </div>
+          <div class="flex items-center">
+            <p class="text-xs ${this.isDark && 'text-white'}">
+              hanya <span class="text-orange-400">Rp 30.000</span> / bulan
+            </p>
+          </div>
+        </div>
+        <button
+          class="h-auto ${this.isDark
+            ? 'bg-green-300 border border-green-400'
+            : 'bg-green-500'} rounded mr-4"
+          @click=${() => this.redirectToCheckout(product.url, 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12', '9802032', 360000, 1)}
+        >
+          <h6
+            class="text-xs md:text-base ${this.isDark
+            ? 'text-black'
+            : 'text-white'} font-bold py-2 px-4"
+          >
+            Langganan
+          </h6>
+        </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>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    secondaryPackages(product) {
+        return html `
+      <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"
+      >
+        <div class="flex items-center">
+          <h5 class="text-base md:text-lg font-bold text-orange-400">
+            ${this.getRupiahFormat(product.price)}
+          </h5>
+          <h6
+            class="text-xs md:text-base ${this.isDark &&
+            'text-white'} font-bold pl-1"
+          >
+            / ${product.periode}
+          </h6>
+        </div>
+        <button
+          @click=${() => this.redirectToCheckout(product.url, 'Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1', '9802035', 50000, 2)}
+          class="h-auto ${!this.isDark &&
+            'bg-white'} border border-green-500 rounded"
+        >
+          <h6
+            class="text-xs md:text-base ${this.isDark
+            ? 'text-green-300'
+            : 'text-green-500'} font-bold py-2 px-4"
+          >
+            Langganan
+          </h6>
+        </button>
+      </div>
+    `;
+    }
+    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>
+        ${data.memberships.map(item => item.isHighlight
+            ? this.primaryPackages(item)
+            : this.secondaryPackages(item))}
+      </div>
+    `;
+    }
+    topNavigator() {
+        return html `
+      <div class="flex lg:hidden items-center w-full pb-4 ">
+        <button
+          @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">
+            ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+          </div>
+          Kembali
+        </button>
+      </div>
+    `;
+    }
+    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"
+      >
+        <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>
+        <button
+          @click=${() => this.redirectToRegister()}
+          class="h-auto ${this.isDark
+            ? 'bg-blue-300'
+            : 'bg-grey-100'} rounded mr-3"
+        >
+          <p
+            class="text-xs md:text-sm ${this.isDark
+            ? 'text-black'
+            : 'text-blue-600'} font-bold py-2 px-4"
+          >
+            Masuk / Daftar
+          </p>
+        </button>
+      </div>
+    `;
+    }
+    userAction(isLogin, type) {
+        return html `
+      <div
+        class="flex h-20 ${this.isDark
+            ? 'bg-dark-4'
+            : 'bg-blue-600'} w-full justify-evenly rounded-b mt-6 md:mt-8 relative"
+      >
+        ${isLogin || type !== 'epaper' ? this.helpDesk() : this.authRegister()}
+      </div>
+    `;
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return html `
+      <div
+        class="${this.type === 'epaper'
+            ? 'bg-transparent wrapper-body'
+            : '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"
+        >
+          ${this.type === 'epaper' ? this.topNavigator() : ''}
+          <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"
+          >
+            ${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
+            ? 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"
+              ref=${(el) => (this.buttonElement = el)}
+            >
+              <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()}
+          </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 : [])
+            : ''}
+        </div>
+      </div>
+    `;
+    }
+};
+KompasPaywallBody.styles = [css ``, TWStyles];
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "slug", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywallBody.prototype, "udin", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasPaywallBody.prototype, "isLogin", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "type", void 0);
+__decorate([
+    property({ type: Object })
+], KompasPaywallBody.prototype, "paywallData", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "userGuid", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "subscriptionStatus", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywallBody.prototype, "countdownArticle", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasPaywallBody.prototype, "swgEnable", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "paywall_location", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "paywall_subscription_package", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywallBody.prototype, "paywall_subscription_id", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywallBody.prototype, "paywall_subscription_price", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywallBody.prototype, "paywall_position", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_page_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_content_id", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_content_title", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_content_categories", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_content_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_user_type", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_subscription_status", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_page_domain", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_metered_wall_type", void 0);
+__decorate([
+    property({ type: Number })
+], KompasPaywallBody.prototype, "tracker_metered_wall_balance", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "tracker_epaper_edition", void 0);
+__decorate([
+    property({ type: String })
+], KompasPaywallBody.prototype, "theme", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "isExtensionsOpened", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "kompasAkunHost", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "kompasApigenHost", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "kompasApiWcmHost", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "kompasLoginHost", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "selfHost", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "swgPublisherName", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "swgPublisherId", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "swgProductId", void 0);
+__decorate([
+    state()
+], KompasPaywallBody.prototype, "errorFlag", void 0);
+KompasPaywallBody = __decorate([
+    customElement('kompas-paywall-body')
+], KompasPaywallBody);
+export { KompasPaywallBody };
+//# sourceMappingURL=KompasPaywallBody.js.map