@kompasid/lit-web-components 0.5.7 → 0.5.8

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

@@ -10,78 +10,6 @@ import { formatRupiah } from '../../utils/formatRupiah.js';
 import { addGoogleFonts } from '../../utils/googleFont.js';
 import { redirectToRegister, redirectToLogin } from '../../utils/cta.js';
 let KompasIdPaywallBody = class KompasIdPaywallBody 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 = '';
-        /**
-         * State
-         */
-        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.epaperHost = 'https://epaper.kompas.id';
-        this.swgPublisherName = 'Harian Kompas';
-        this.swgPublisherId = 'kompas.id';
-        this.swgProductId = 'kompas.id:kompas_digital_premium';
-        this.errorFlag = 0;
-    }
     /**
      * Getter
      */
@@ -100,7 +28,17 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     redirectToCheckout(url, name, id, price, position) {
         this.sendDataLayeronButtonBuyPackage(name, id, price, position);
         const originHost = encodeURIComponent(window.location.href);
-        const source = this.type === 'epaper' ? 'epaper' : 'article';
+        let source;
+        switch (this.type) {
+            case 'epaper':
+                source = 'epaper';
+                break;
+            case 'audio':
+                source = 'news_audio';
+                break;
+            default:
+                source = 'article';
+        }
         const directUrlCheckout = `${url}${originHost}&source=${source}`;
         window.open(directUrlCheckout);
     }
@@ -115,6 +53,17 @@ 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');
     }
+    close() {
+        this.isOpen = false;
+    }
+    handleClickOutside() {
+        if (this.isOpen) {
+            if (this.targetElement instanceof HTMLElement &&
+                this.targetElement.classList.contains('wrapper-body')) {
+                this.close();
+            }
+        }
+    }
     parsePrice(price) {
         const lowerCasePrice = price.toLowerCase();
         if (lowerCasePrice.startsWith('rp')) {
@@ -295,25 +244,112 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
             jsonHead.appendChild(jsonScript);
         }
     }
+    constructor() {
+        super();
+        /**
+         * 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
+         * prop isOpen = The condition for the visibility of the component
+         */
+        this.slug = '';
+        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.isOpen = true;
+        /**
+         * State
+         */
+        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.epaperHost = 'https://epaper.kompas.id';
+        this.swgPublisherName = 'Harian Kompas';
+        this.swgPublisherId = 'kompas.id';
+        this.swgProductId = 'kompas.id:kompas_digital_premium';
+        this.errorFlag = 0;
+        this.handleClickOutside = this.handleClickOutside.bind(this);
+    }
+    createRenderRoot() {
+        const root = super.createRenderRoot();
+        root.addEventListener('click', (e) => (this.targetElement = e.target));
+        return root;
+    }
     async connectedCallback() {
-        var _a;
         super.connectedCallback();
         await this.updateComplete;
         if (this.swgEnable) {
             this.jsonScript();
-            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);
+            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);
+                    }
                 }
-            }
+            };
+            setTimeout(appendSWGButton, 500);
         }
         addGoogleFonts(['pt-sans', 'lora']);
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    async disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.handleClickOutside);
     }
     otherPackagesClicked() {
         this.sendDataLayerOtherPackagesClicked();
@@ -459,33 +495,38 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
     /**
      * 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 justify-center">
-        ${type === 'epaper'
-            ? html `<button
-              @click=${this.redirectToPrevUrl}
-              class="hidden lg:block w-8 h-8 ${this.isDark
+    headerSection(type, title) {
+        let buttonContent;
+        if (type === 'epaper') {
+            buttonContent = html ` <button
+        @click=${this.redirectToPrevUrl}
+        class="hidden lg:block w-8 h-8 pl-4 ${this.isDark
                 ? 'text-blue-300'
-                : 'text-blue-600'} pl-4"
-            >
-              ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
-            </button>`
-            : nothing}
-        <h4
-          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"
-        >
-          ${headerSectionText}
-        </h4>
-        ${type === 'epaper'
-            ? html `<div class="w-10 hidden lg:flex"></div>`
+                : 'text-blue-600'}"
+      >
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'arrow-left'))}
+      </button>`;
+        }
+        else if (type === 'audio') {
+            buttonContent = html ` <button
+        @click=${this.close}
+        class="hidden md:block w-8 h-8 pl-4 ${this.isDark
+                ? 'text-blue-300'
+                : 'text-blue-600'}"
+      >
+        ${unsafeSVG(getFontAwesomeIcon('fas', 'xmark', 24, 24))}
+      </button>`;
+        }
+        else {
+            buttonContent = nothing;
+        }
+        const headerClass = `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 ${type === 'audio' && 'sm:px-16 md:px-20'}`;
+        return html `
+      <div class="flex w-full items-start justify-center">
+        ${buttonContent}
+        <h4 class=${headerClass}>${title}</h4>
+        ${type === 'epaper' || type === 'audio'
+            ? html `<div class="w-10 hidden md:flex"></div>`
             : nothing}
       </div>
     `;
@@ -693,7 +734,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
           <h6
             class="text-xs md:text-sm ${this.isDark
             ? 'text-green-300'
-            : 'text-green-500'} font-bold px-4 "
+            : 'text-green-500'} font-bold px-4"
           >
             Langganan
           </h6>
@@ -711,17 +752,30 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
       </div>
     `;
     }
-    topNavigator() {
+    topNavigator(type) {
+        let icon;
+        let buttonText;
+        let clickAction;
+        if (type === 'audio') {
+            icon = getFontAwesomeIcon('fas', 'xmark');
+            buttonText = 'Tutup';
+            clickAction = this.close.bind(this);
+        }
+        else {
+            icon = getFontAwesomeIcon('fas', 'arrow-left');
+            buttonText = 'Kembali';
+            clickAction = this.redirectToPrevUrl.bind(this);
+        }
         return html `
-      <div class="flex lg:hidden items-center w-full pb-4 ">
+      <div class="flex md:hidden w-full pb-4">
         <button
-          @click=${this.redirectToPrevUrl}
+          @click=${clickAction}
           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'))}
+            ${unsafeSVG(icon)}
           </div>
-          Kembali
+          ${buttonText}
         </button>
       </div>
     `;
@@ -794,7 +848,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
             <p
               class="${this.isDark
             ? 'text-dark-7'
-            : 'text-grey-500'} text-[11px] md:text-xs whitespace-nowrap w-full "
+            : 'text-grey-500'} text-[11px] md:text-xs whitespace-nowrap w-full"
             >
               Subscribe with
             </p>
@@ -814,26 +868,31 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
      * Render Statement
      */
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         return html `
       <div
         class="${this.type === 'epaper'
             ? 'bg-transparent wrapper-body mx-2'
+            : 'wrapper-body'}
+          ${this.type === 'audio'
+            ? `${this.isOpen ? 'visible' : 'invisible'} fixed w-full h-full inset-0 flex justify-center items-center z-50 bg-black bg-opacity-75`
             : 'wrapper-body'}"
       >
         <div
-          class="flex flex-col justify-center items-center w-full max-w-screen-sm my-5 relative"
+          class="flex flex-col justify-center items-center w-full max-w-screen-sm my-5 px-2 relative"
         >
-          ${this.type === 'epaper' ? this.topNavigator() : nothing}
+          ${this.type === 'epaper' || this.type === 'audio'
+            ? this.topNavigator(this.type)
+            : nothing}
           <div
             class="flex w-full flex-col items-center justify-center ${this
             .isDark
             ? 'bg-dark-3'
-            : 'bg-blue-100'}  rounded-xl 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.headerSection(this.type, (_c = (_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : '')}
+            ${this.descriptionSection((_f = (_e = (_d = this.paywallData) === null || _d === void 0 ? void 0 : _d.informations) === null || _e === void 0 ? void 0 : _e.description) !== null && _f !== void 0 ? _f : [])}
+            ${this.packagesSection((_h = (_g = this.paywallData) === null || _g === void 0 ? void 0 : _g.packages) !== null && _h !== void 0 ? _h : {})}
             ${this.informationPackages()}
             ${!this.isLogin
             ? html `
@@ -848,7 +907,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
             ${this.userAction()} ${this.sendDataLayeronPaywallBody()}
           </div>
           ${this.isExtensionsOpened
-            ? 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 : [])
+            ? this.paymentMobileExtension((_l = (_k = (_j = this.paywallData) === null || _j === void 0 ? void 0 : _j.payment) === null || _k === void 0 ? void 0 : _k.ekstension) !== null && _l !== void 0 ? _l : [])
             : nothing}
         </div>
       </div>
@@ -873,9 +932,6 @@ KompasIdPaywallBody.styles = [
 __decorate([
     property({ type: String })
 ], KompasIdPaywallBody.prototype, "slug", void 0);
-__decorate([
-    property({ type: Number })
-], KompasIdPaywallBody.prototype, "udin", void 0);
 __decorate([
     property({ type: Boolean })
 ], KompasIdPaywallBody.prototype, "isLogin", void 0);
@@ -948,6 +1004,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KompasIdPaywallBody.prototype, "theme", void 0);
+__decorate([
+    property({ type: Boolean })
+], KompasIdPaywallBody.prototype, "isOpen", void 0);
 __decorate([
     state()
 ], KompasIdPaywallBody.prototype, "isExtensionsOpened", void 0);