npm - @kompasid/lit-web-components - Versions diffs - 0.9.29 → 0.9.31 - Mend

@kompasid/lit-web-components 0.9.29 → 0.9.31

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

Files changed (19) hide show

package/demo/index.html CHANGED Viewed

@@ -282,9 +282,10 @@
             >
             </kompasid-metered-paywall>
             <kompasid-metered-paywall-personalize
-              segment="Passive Faders"
+              segment="Unaware"
               offering="Q3"
               user_name="Dummy User"
+              rubrik="Politik &amp; Hukum"
               .paywall_location=${paywallLocation}
               .paywall_subscription_id=${paywallSubscriptionId}
               .paywall_subscription_price=${paywallSubscriptionPrice}

package/demo/paywall.html ADDED Viewed

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kompas Paywall Demo</title>
+  <link rel="icon" type="image/x-icon" href="/assets/kompas-icon.svg" />
+  <style>
+    body {
+      background: #fafafa;
+      margin: 0;
+      padding: 20px;
+      font-family: sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <script type="module">
+    import { html, render } from 'lit'
+    import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
+    const type = 'proMiningArticle'
+    const theme = ''
+    const paywallLocation = 'paywall_location'
+    const paywallSubscriptionId = 'testId'
+    const paywallSubscriptionPrice = 0
+    const paywallPosition = 1
+    const trackerPageType = 'page_type'
+    const trackerContentId = 'content_id'
+    const trackerContentType = 'content_type'
+    const trackerContentTitle = 'content_title'
+    const trackerContentCategories = 'content_categories'
+    const trackerUserType = 'user_type'
+    const trackerContentPublisher = 'publisher'
+    const subscriptionStatus = 'subscription_status'
+    const trackerPageDomain = 'page_domain'
+    const meteredWallType = 'metered_wall_type'
+    const trackerEpaperEdition = 'edition'
+    const meteredWallBalance = 0
+    const isLogin = false
+    const isWithHeader = false
+    const textHeader = 'this is message for header information'
+    const userGuid = '111000'
+    const trackerSubscriptionStatus = 'register'
+    const swgEnable = true
+    render(
+      html`
+        <kompasid-paywall
+          .type=${type}
+          .theme=${theme}
+          .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}
+          .tracker_content_publisher=${trackerContentPublisher}
+          .isLogin=${isLogin}
+          .isWithHeader=${isWithHeader}
+          .swgEnable=${swgEnable}
+          .textHeader=${textHeader}
+          .userGuid=${userGuid}
+          .tracker_subscription_status=${trackerSubscriptionStatus}
+        >
+        </kompasid-paywall>
+      `,
+      document.body
+    )
+  </script>
+</body>
+</html>

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

@@ -12,6 +12,7 @@ export declare class KompasMeteredPaywallPersonalize extends LitElement {
      * 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
@@ -33,6 +34,7 @@ export declare class KompasMeteredPaywallPersonalize extends LitElement {
     segment: string;
     offering: string;
     user_name: string;
+    rubrik: string;
     paywall_location: string;
     paywall_subscription_package: string;
     paywall_subscription_id: string;
@@ -62,6 +64,8 @@ export declare class KompasMeteredPaywallPersonalize extends LitElement {
     private replacePlaceholdersFromOffering;
     private engageReturners;
     private passiveFaders;
+    private lostButCurious;
+    private unaware;
     private pickTemplate;
     render(): import("lit-html").TemplateResult<1> | typeof nothing;
 }

package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js CHANGED Viewed

@@ -19,6 +19,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
          * 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
@@ -40,6 +41,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
         this.segment = '';
         this.offering = '';
         this.user_name = '';
+        this.rubrik = '';
         this.paywall_location = '';
         this.paywall_subscription_package = '';
         this.paywall_subscription_id = '';
@@ -64,7 +66,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
     }
     async getMeteredPaywallData() {
         try {
-            const getSegment = this.segment.toLocaleLowerCase().replace(' ', '_');
+            const getSegment = this.segment.toLocaleLowerCase().replace(/ /g, '_');
             const response = await fetch(`https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`);
             const json = await response.json();
             this.packageData = json;
@@ -140,7 +142,6 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
     }
     computedstateDefaultPaywall() {
         this.stateDefaultPaywall = !this.stateDefaultPaywall;
-        this.requestUpdate();
     }
     /**
      * Ganti placeholder _key_ di template dengan nilai dari data offering
@@ -232,7 +233,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
               class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 justify-center gap-4 px-4 lg:px-0 bottom-0"
             >
               <div
-                class="text-grey-600 text-base self-center text-left message-collapse-engage-returners font-bold"
+                class="text-grey-600 text-base self-center text-left message-formatter font-bold"
               >
                 ${unsafeHTML(textTemplateFormater)}
               </div>
@@ -257,7 +258,10 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
         return html `
       <div class="sticky bottom-0 w-full h-full">
         <div
-          class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 gap-4 px-4 bottom-0"
+          class="flex flex-col lg:flex-row w-full bg-blue-100 ${this
+            .stateDefaultPaywall
+            ? 'py-4 lg:py-3'
+            : 'py-4 lg:py-8'} gap-4 px-4 bottom-0"
         >
           <div
             class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto "
@@ -269,7 +273,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
                     class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
                   >
                     <div
-                      class="text-grey-600 font-lora message-collapse-engage-returners order-2"
+                      class="text-grey-600 font-lora message-formatter order-2"
                     >
                       <div
                         class="text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start"
@@ -293,11 +297,11 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
                 : nothing}
                       </div>
                       <div
-                        class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-collapse-engage-returners mb-4"
+                        class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-4"
                       >
                         ${unsafeHTML(descriptionExpand)}
                       </div>
-                      <div>
+                      <div class="font-sans">
                         <button
                           @click="${this.redirectToBerlangganan}"
                           class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
@@ -328,10 +332,10 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
                   </div>
                 `
             : html `
-                  <div class="h-9 w-9 flex"></div>
+                  <div class="hidden h-9 w-9 lg:flex"></div>
                   <div class="flex justify-between">
                     <div
-                      class="text-grey-600 text-base self-center text-left message-collapse-engage-returners font-bold"
+                      class="text-grey-600 text-base self-center text-left message-formatter font-bold"
                     >
                       ${unsafeHTML(messageTitleCollapse)}
                     </div>
@@ -376,12 +380,219 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
       </div>
     `;
     }
+    lostButCurious() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const messageTitleCollapse = this.replacePlaceholdersFromOffering(((_a = this.packageData) === null || _a === void 0 ? void 0 : _a.paywall.messageTitleCollapse) || '', ((_b = this.packageData) === null || _b === void 0 ? void 0 : _b.offering[this.offering ? this.offering : 'Q1']) ||
+            {});
+        const descriptionExpand = this.replacePlaceholdersFromOffering(((_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.descriptionExpand) || '', ((_d = this.packageData) === null || _d === void 0 ? void 0 : _d.offering[this.offering ? this.offering : 'Q1']) ||
+            {});
+        return html `
+      <div class="sticky bottom-0 w-full h-full leading-none">
+        <div
+          class="flex flex-col lg:flex-row w-full bg-blue-100 ${this
+            .stateDefaultPaywall
+            ? 'py-4 lg:py-3'
+            : 'py-4 lg:py-8'} gap-4 px-4 bottom-0"
+        >
+          <div
+            class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto "
+          >
+            ${!this.stateDefaultPaywall
+            ? html `
+                  <div class="h-9 w-9 hidden lg:flex"></div>
+                  <div
+                    class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
+                  >
+                    <div class="text-grey-600 font-sans order-2">
+                      <div
+                        class="text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-center lg:text-start"
+                      >
+                        <span
+                          >Halo
+                          ${this.user_name
+                ? this.user_name
+                : 'Pembaca Setia Kompas'},</span
+                        >
+                        ${(_e = this.packageData) === null || _e === void 0 ? void 0 : _e.paywall.messageTitleExpand}
+                        <span>${this.rubrik}</span>
+                      </div>
+                      <div
+                        class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-2"
+                      >
+                        ${unsafeHTML(descriptionExpand)}
+                      </div>
+                      <div class="text-base lg:text-lg text-grey-400 mb-1">
+                        <s
+                          >${formatRupiah(((_f = this.packageData) === null || _f === void 0 ? void 0 : _f.offering[this.offering ? this.offering : 'Q1'].harga_coret) || 0)}</s
+                        >
+                        <span
+                          class="text-lg lg:text-2xl text-orange-400 font-bold"
+                        >
+                          ${formatRupiah(((_g = this.packageData) === null || _g === void 0 ? void 0 : _g.offering[this.offering ? this.offering : 'Q1'].offering_price) || 0)}
+                        </span>
+                        ${((_h = this.packageData) === null || _h === void 0 ? void 0 : _h.offering[this.offering ? this.offering : 'Q1'].duration)
+                ? html `
+                              <span class="text-base lg:text-lg text-grey-600"
+                                >${(_j = this.packageData) === null || _j === void 0 ? void 0 : _j.offering[this.offering ? this.offering : 'Q1'].duration}</span
+                              >
+                            `
+                : nothing}
+                      </div>
+                      <div class="mb-3 lg:mb-4">untuk tahun pertama.</div>
+                      <div class="font-sans">
+                        <button
+                          @click="${this.redirectToBerlangganan}"
+                          class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                        >
+                          ${(_k = this.packageData) === null || _k === void 0 ? void 0 : _k.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                        </button>
+                      </div>
+                    </div>
+                    <div
+                      class="flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
+                    >
+                      <image
+                        src="${(_l = this.packageData) === null || _l === void 0 ? void 0 : _l.paywall.image}"
+                        alt="content"
+                        class="w-[112px] lg:w-[202px]"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <button
+                      @click="${this.computedstateDefaultPaywall}"
+                      class="h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4"
+                    >
+                      <div>
+                        ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
+                      </div>
+                    </button>
+                  </div>
+                `
+            : html `
+                  <div class="hidden h-9 w-9 lg:flex"></div>
+                  <div class="flex justify-between">
+                    <div
+                      class="text-grey-600 text-base self-center text-left message-formatter font-bold"
+                    >
+                      ${unsafeHTML(messageTitleCollapse)}
+                    </div>
+                    <div class="hidden lg:flex ml-6">
+                      <button
+                        @click="${this.redirectToBerlangganan}"
+                        class="bg-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                      >
+                        ${(_m = this.packageData) === null || _m === void 0 ? void 0 : _m.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                      </button>
+                    </div>
+                    <div class="flex lg:hidden ml-4">
+                      <button
+                        @click="${this.computedstateDefaultPaywall}"
+                        class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
+                      >
+                        <div>
+                          ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
+                        </div>
+                      </button>
+                    </div>
+                  </div>
+                  <div>
+                    <button
+                      @click="${this.computedstateDefaultPaywall}"
+                      class="h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200"
+                    >
+                      <div>
+                        ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
+                      </div>
+                    </button>
+                    <button
+                      @click="${this.redirectToBerlangganan}"
+                      class="bg-brand-1 lg:hidden flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full"
+                    >
+                      ${(_o = this.packageData) === null || _o === void 0 ? void 0 : _o.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                    </button>
+                  </div>
+                `}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    unaware() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        const descriptionExpand = this.replacePlaceholdersFromOffering(((_a = this.packageData) === null || _a === void 0 ? void 0 : _a.paywall.descriptionExpand) || '', ((_b = this.packageData) === null || _b === void 0 ? void 0 : _b.offering[this.offering ? this.offering : 'Q1']) ||
+            {});
+        return html `
+      <div class="w-full h-full max-w-4xl mx-auto">
+        <div
+          class="flex flex-col lg:flex-row w-full bg-blue-100 py-6 px-4 lg:py-9 lg:px-6 gap-4 rounded-lg"
+        >
+          <div
+            class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto"
+          >
+            <div
+              class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
+            >
+              <div class="text-grey-600 font-lora message-formatter order-2">
+                <div
+                  class="text-xl lg:text-2xl font-bold mb-2 text-center lg:text-start"
+                >
+                  ${(_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.messageTitleExpand}${this
+            .user_name
+            ? `, ${this.user_name}!`
+            : ''}
+                </div>
+                <div class="mb-2 font-sans">
+                  ${unsafeHTML(descriptionExpand)}
+                </div>
+                <div class="flex flex-col font-sans gap-3 mb-4">
+                  ${((_d = this.packageData) === null || _d === void 0 ? void 0 : _d.paywall.listBenefits)
+            ? (_e = this.packageData) === null || _e === void 0 ? void 0 : _e.paywall.listBenefits.map(item => html `
+                            <div class="flex items-baseline align-baseline">
+                              <div
+                                class="bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center"
+                              >
+                                ${unsafeSVG(getFontAwesomeIcon('fas', 'circle-check', 12, 12))}
+                              </div>
+                              <h6 class="text-base ml-1">${item}</h6>
+                            </div>
+                          `)
+            : nothing}
+                </div>
+                <div class="font-sans">
+                  <button
+                    @click="${this.redirectToBerlangganan}"
+                    class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-[18px] w-full lg:w-auto"
+                  >
+                    ${(_f = this.packageData) === null || _f === void 0 ? void 0 : _f.offering[this.offering ? this.offering : 'Q1'].checkout_text}
+                  </button>
+                </div>
+              </div>
+              <div
+                class="flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
+              >
+                <image
+                  src="${(_g = this.packageData) === null || _g === void 0 ? void 0 : _g.paywall.image}"
+                  alt="content"
+                  class="w-[112px] lg:w-[202px]"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+    }
     pickTemplate() {
-        switch (this.segment) {
-            case 'Engaged Returners':
+        switch (this.segment.toLocaleLowerCase()) {
+            case 'engaged returners':
                 return this.engageReturners();
-            case 'Passive Faders':
+            case 'passive faders':
                 return this.passiveFaders();
+            case 'lost but curious':
+                return this.lostButCurious();
+            case 'unaware':
+                return this.unaware();
             default:
                 return nothing;
         }
@@ -404,15 +615,16 @@ KompasMeteredPaywallPersonalize.styles = [
         width: 100%;
       }
-      .message-collapse-engage-returners span {
+      .message-formatter span {
         color: #ff7a00;
         font-weight: 700;
         text-wrap: nowrap;
       }
-      .message-collapse-engage-returners s {
+      .message-formatter s {
         color: #999999;
         text-wrap: nowrap;
+        font-weight: 400;
       }
       .font-lora {
@@ -455,6 +667,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], KompasMeteredPaywallPersonalize.prototype, "user_name", void 0);
+__decorate([
+    property({ type: String })
+], KompasMeteredPaywallPersonalize.prototype, "rubrik", void 0);
 __decorate([
     property({ type: String })
 ], KompasMeteredPaywallPersonalize.prototype, "paywall_location", void 0);
@@ -500,6 +715,9 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], KompasMeteredPaywallPersonalize.prototype, "tracker_metered_wall_balance", void 0);
+__decorate([
+    state()
+], KompasMeteredPaywallPersonalize.prototype, "stateDefaultPaywall", void 0);
 KompasMeteredPaywallPersonalize = __decorate([
     customElement('kompasid-metered-paywall-personalize')
 ], KompasMeteredPaywallPersonalize);