@kompasid/lit-web-components 0.9.28 → 0.9.30

package/demo/index.html

@@ -52,6 +52,7 @@
       import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
       import '../dist/src/components/kompasid-paywall-video/KompasPaywallVideo.js'
       import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
+      import '../dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js'
       import '../dist/src/components/kompasid-freewall/KompasFreewall.js'
       import '../dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js'
       import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
@@ -260,7 +261,7 @@
             .tracker_subscription_status=${trackerSubscriptionStatus}
           >
           </kompasid-paywall>
-          <div class="metered font-sans">
+          <div class="metered font-sans" style="position: sticky; bottom: 0; width: 100%; z-index: 999;">
             <kompasid-metered-paywall
             .paywall_location=${paywallLocation}
               .paywall_subscription_id=${paywallSubscriptionId}
@@ -280,6 +281,29 @@
               .metered_wall_balance=${meteredWallBalance}
             >
             </kompasid-metered-paywall>
+            <kompasid-metered-paywall-personalize
+              segment="Unaware"
+              offering="Q3"
+              user_name="Dummy User"
+              rubrik="Politik &amp; Hukum"
+              .paywall_location=${paywallLocation}
+              .paywall_subscription_id=${paywallSubscriptionId}
+              .paywall_subscription_price=${paywallSubscriptionPrice}
+              .paywall_position=${paywallPosition}
+              .tracker_page_type=${trackerPageType}
+              .tracker_content_id=${trackerContentId}
+              .tracker_content_type=${trackerContentType}
+              .tracker_content_title=${trackerContentTitle}
+              .tracker_content_categories=${trackerContentCategories}
+              .tracker_user_type=${trackerUserType}
+              .subscriptionStatus=${subscriptionStatus}
+              .tracker_page_domain=${trackerPageDomain}
+              .metered_wall_type=${meteredWallType}
+              .subscriptionStatus=${subscriptionStatus}
+              .tracker_epaper_edition=${trackerEpaperEdition}
+              .metered_wall_balance=${meteredWallBalance}
+            >
+            </kompasid-metered-paywall-personalize>
           </div>
 
           <!-- <div style="margin: 20px 0">

package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.d.ts

@@ -0,0 +1,71 @@
+import { LitElement, nothing } from 'lit';
+export declare class KompasMeteredPaywallPersonalize extends LitElement {
+    static styles: import("lit").CSSResult[];
+    private isLoading;
+    private maxQuota;
+    private packageData;
+    /**
+     * Props
+     */
+    /**
+     * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.
+     * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
+     * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
+     * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
+     * prop rubrik untuk menerika rubrikasi dari implementor
+     * 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 ther 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_epaper_edition = The edition of epaper viewed by user
+     * prop tracker_metered_wall_balance = The balance of their metered wall
+     */
+    countdownArticle: number;
+    segment: string;
+    offering: string;
+    user_name: string;
+    rubrik: string;
+    paywall_location: string;
+    paywall_subscription_package: string;
+    paywall_subscription_id: string;
+    paywall_subscription_price: number;
+    paywall_position: number;
+    tracker_page_type: string;
+    tracker_content_id: string;
+    tracker_content_title: string;
+    tracker_content_categories: string;
+    tracker_content_type: string;
+    tracker_user_type: string;
+    tracker_subscription_status: string;
+    tracker_page_domain: string;
+    tracker_metered_wall_type: string;
+    tracker_metered_wall_balance: number;
+    connectedCallback(): Promise<void>;
+    getMeteredPaywallData(): Promise<void>;
+    private redirectToBerlangganan;
+    private dataLayeronLanggananButton;
+    private dataLayeronMeteredPaywall;
+    private stateDefaultPaywall;
+    private computedstateDefaultPaywall;
+    /**
+     * Ganti placeholder _key_ di template dengan nilai dari data offering
+     * Hanya replace jika placeholder cocok dan datanya valid
+     */
+    private replacePlaceholdersFromOffering;
+    private engageReturners;
+    private passiveFaders;
+    private lostButCurious;
+    private unaware;
+    private pickTemplate;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}