npm - @kompasid/lit-web-components - Versions diffs - 0.9.35 → 0.9.36 - Mend

@kompasid/lit-web-components 0.9.35 → 0.9.36

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 (22) hide show

package/demo/header.html CHANGED Viewed

@@ -43,33 +43,33 @@
   <script type="module">
     import { html, render } from 'lit'
     import { keyed } from 'lit/directives/keyed.js'
+    import { format, addDays } from 'date-fns'
+    import { id } from 'date-fns/locale/id'
     import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
     import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
     const urlParams = new URLSearchParams(window.location.search);
     const headerTheme = urlParams.get('header_theme') || 'default'
+    const formated = (date) => format(new Date(date), 'yyyy-MM-dd HH:mm:ss', { locale: id })
     const templates = {
       gracePeriod: {
         "userName": "Clara Wijaya",
-        "expired": "2025-12-05 23:59:59",
-        "activeInfo": "Pada masa tenggang",
+        "expired": formated(new Date()),
         "isMembership": true,
-        "totalGracePeriod": 3,
+        "totalGracePeriod": 10,
         "isGracePeriod": true
       },
       moreThan3Days: {
         "userName": "Clara Wijaya",
-        "expired": "2025-12-25 23:59:59",
-        "activeInfo": "Aktif berlangganan",
+        "expired": formated(addDays(new Date(), 10)),
         "isMembership": true,
         "totalGracePeriod": 0,
         "isGracePeriod": false
       },
       lessThan3Days: {
         "userName": "Clara Wijaya",
-        "expired": "2025-12-19 23:59:59",
-        "activeInfo": "Aktif berlangganan",
+        "expired": formated(addDays(new Date(), 3)),
         "isMembership": true,
         "totalGracePeriod": 0,
         "isGracePeriod": false
@@ -77,7 +77,6 @@
       tidakBerlangganan: {
         "userName": "Clara Wijaya",
         "expired": "",
-        "activeInfo": "Tidak berlangganan", // ""
         "isMembership": false,
         "totalGracePeriod": 0,
         "isGracePeriod": false

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js CHANGED Viewed

@@ -75,7 +75,10 @@ let KompasGracePeriod = class KompasGracePeriod extends LitElement {
         return html `
       <p
         class="message-gp"
-        .innerHTML=${this.tempTextEachDay[maxGracePeriod - totalGracePeriod + 1 - 1]}
+        .innerHTML=${this.tempTextEachDay[totalGracePeriod > maxGracePeriod
+            ? maxGracePeriod - 1
+            : totalGracePeriod - 1 // template maksimal 7 hari
+        ]}
       ></p>
     `;
         // comment old html

package/dist/src/components/kompasid-grace-period/KompasGracePeriod.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAGjD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAwBL;;WAEG;QACH;;;;;;;;;;;;;;;;;;;;;WAqBG;QAEyB,qBAAgB,GAAG,CAAC,CAAA;QACnB,aAAQ,GAAG,KAAK,CAAA;QAChB,iBAAY,GAAG,IAAI,CAAA;QACnB,aAAQ,GAAG,KAAK,CAAA;QAChB,8BAAyB,GAAG,KAAK,CAAA;QAClC,WAAM,GAAG,SAAS,CAAA;QAClB,qBAAgB,GAAG,EAAE,CAAA;QACrB,iCAA4B,GAAG,EAAE,CAAA;QACjC,4BAAuB,GAAG,CAAC,CAAA;QAC3B,+BAA0B,GAAG,CAAC,CAAA;QAC9B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC/B,yBAAoB,GAAG,EAAE,CAAA;QACzB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAChC,2BAAsB,GAAG,EAAE,CAAA;QAEvD;;WAEG;QACc,mBAAc,GAAG,CAAC,CAAA;QAClB,qBAAgB,GAAG,oCAAoC,CAAA;QACvD,iBAAY,GAAG,8BAA8B,CAAA;QAC7C,oBAAe,GAAG,EAAE,CAAA;QACpB,gBAAW,GAGxB;YACF,GAAG,EAAE,EAAE;YACP,IAAI,EAAE,EAAE;SACT,CAAA;QACgB,gBAAW,GAGxB;YACF,GAAG,EAAE,EAAE;YACP,IAAI,EAAE,EAAE;SACT,CAAA;IA2OH,CAAC;IAzOS,uBAAuB;QAC7B,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAA;QACjC,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAA;QAC/B,OAAO,IAAI,CAAA;;;qBAGM,IAAI,CAAC,eAAe,CAC/B,cAAc,GAAG,gBAAgB,GAAG,CAAC,GAAG,CAAC,CAC1C;;KAEJ,CAAA;QACD,mBAAmB;QACnB,gCAAgC;QAChC,iBAAiB;QACjB,UAAU;QACV,mBAAmB;QACnB,WAAW;QACX,mBAAmB;QACnB,qEAAqE;QACrE,iDAAiD;QACjD,UAAU;QACV,wBAAwB;QACxB,aAAa;QACb,6EAA6E;QAC7E,8CAA8C;QAC9C,WAAW;QACX,MAAM;QACN,IAAI;QACJ,eAAe;QACf,QAAQ;QACR,2CAA2C;QAC3C,SAAS;QACT,iBAAiB;QACjB,mEAAmE;QACnE,+CAA+C;QAC/C,QAAQ;QACR,+DAA+D;QAC/D,8EAA8E;QAC9E,mBAAmB;QACnB,SAAS;QACT,IAAI;IACN,CAAC;IAEO,uBAAuB;QAC7B,MAAM,CAAC,IAAI,CACT,6FAA6F,EAC7F,QAAQ,CACT,CAAA;IACH,CAAC;IAEO,sBAAsB;QAC5B,MAAM,EAAE,GAAG,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QACrC,IAAI,CAAC,kCAAkC,EAAE,CAAA;QACzC,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,IAAI,CAAC,CAAA;QAEnD,MAAM,WAAW,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC,gBAAgB,yBAAyB,CAAA;QAC5E,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;IAC1B,CAAC;IAEO,kBAAkB;QACxB,MAAM,EAAE,GAAG,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QACrC,IAAI,CAAC,kCAAkC,EAAE,CAAA;QACzC,MAAM,UAAU,GAAW,kBAAkB,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;QAEnE,IAAI,CAAC,YAAY,CAAC,0BAA0B,CAAC,CAAA;QAE7C,MAAM,WAAW,GACf,GAAG;YACH,GAAG,IAAI,CAAC,YAAY,qBAAqB,IAAI,CAAC,uBAAuB,gBAAgB,CAAA;QAEvF,MAAM,CAAC,IAAI,CAAC,GAAG,WAAW,aAAa,UAAU,WAAW,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;IAC5E,CAAC;IAEO,YAAY,CAClB,4BAAqC,KAAK;QAE1C,MAAM,SAAS,GAAwB,EAAE,CAAA;QAEzC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,SAAS,CAAC,aAAa,GAAG,IAAI,CAAC,qBAAqB,CAAA;YACpD,SAAS,CAAC,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAA;YAC9C,SAAS,CAAC,kBAAkB,GAAG,IAAI,CAAC,0BAA0B,CAAA;YAC9D,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAA;YAClD,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAA;SAC7C;aAAM;YACL,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,sBAAsB,CAAA;SACvD;QAED,IAAI,CAAC,yBAAyB,EAAE;YAC9B,SAAS,CAAC,4BAA4B,GAAG,IAAI,CAAC,4BAA4B,CAAA;YAC1E,SAAS,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAA;YAChE,SAAS,CAAC,0BAA0B,GAAG,IAAI,CAAC,0BAA0B,CAAA;SACvE;QAED,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAA;QAClD,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAA;QAClD,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAA;QAC5C,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,2BAA2B,CAAA;QAChE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,mBAAmB,IAAI,WAAW,CAAA;QAC/D,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAA;QACpE,SAAS,CAAC,oBAAoB,GAAG,IAAI,CAAC,4BAA4B,CAAA;QAElE,OAAO,SAAS,CAAA;IAClB,CAAC;IAEO,YAAY,CAClB,KAAa,EACb,4BAAqC,KAAK;QAE1C,IAAI,SAAS,GAAwB,EAAE,KAAK,EAAE,CAAA;QAE9C,IAAI,KAAK,KAAK,gBAAgB,EAAE;YAC9B,SAAS,CAAC,WAAW,GAAG;gBACtB;oBACE,GAAG,IAAI,CAAC,YAAY,CAAC,yBAAyB,CAAC;iBAChD;aACF,CAAA;SACF;aAAM;YACL,SAAS,GAAG;gBACV,GAAG,SAAS;gBACZ,GAAG,IAAI,CAAC,YAAY,CAAC,yBAAyB,CAAC;aAChD,CAAA;SACF;QAED,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IAClC,CAAC;IAEO,kCAAkC;QACxC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE,UAAU,EAAE;YACvB,OAAO,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB;YACpD,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;SAC9B,CAAC,CAAA;IACJ,CAAC;IAEO,sBAAsB;QAC5B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,uBAAuB;YAC9B,SAAS,EAAE,UAAU,EAAE;YACvB,OAAO,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,gBAAgB;YACpD,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI;SAC9B,CAAC,CAAA;IACJ,CAAC;IAEO,mBAAmB;QACzB,MAAM,EAAE,QAAQ,EAAE,yBAAyB,EAAE,GAAG,IAAI,CAAA;QAEpD,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QAE7C,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,WAAW,CAAA;QAE7C,MAAM,kBAAkB,GAAG,QAAQ;YACjC,CAAC,CAAC,YAAY;YACd,CAAC,CAAC,4CAA4C,CAAA;QAChD,MAAM,iBAAiB,GAAG,QAAQ;YAChC,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,+CAA+C,CAAA;QACnD,MAAM,mBAAmB,GAAG,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAA;QACvD,MAAM,cAAc,GAAG,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;QAC9D,MAAM,cAAc,GAAG,yBAAyB;YAC9C,CAAC,CAAC,mCAAmC;YACrC,CAAC,CAAC,EAAE,CAAA;QAEN,OAAO,IAAI,CAAA;;6EAE8D,kBAAkB,IAAI,cAAc;;;4EAGrC,cAAc;;YAE9E,IAAI,CAAC,uBAAuB,EAAE;;UAEhC,IAAI,CAAC,YAAY;YACjB,CAAC,CAAC,IAAI,CAAA;;gEAEgD,iBAAiB;;;2BAGtD,IAAI,CAAC,kBAAkB;;;oBAG9B,KAAK,IAAI,oBAAoB;;;;6BAIpB,IAAI,CAAC,sBAAsB;2IACmF,mBAAmB;;sBAExI,KAAK,IAAI,eAAe;;;;;6BAKjB,IAAI,CAAC,sBAAsB;2IACmF,mBAAmB;;sBAExI,KAAK,IAAI,qBAAqB;;;;aAIvC;YACH,CAAC,CAAC,OAAO;;KAEd,CAAA;IACH,CAAC;IAEQ,KAAK,CAAC,iBAAiB;QAC9B,uCAAuC;QACvC,MAAM,QAAQ,GAAG,mEAAmE,CAAA;QACpF,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAA;QACtC,MAAM,MAAM,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;QACpC,IAAI,CAAC,eAAe,GAAG,MAAM,CAAC,OAAO,CAAA;QACrC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAA;QACjC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAA;QAEjC,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAA;QAEnC,IAAI,CAAC,sBAAsB,EAAE,CAAA;IAC/B,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,CAAC,IAAI,CAAC,yBAAyB;YAC7C,CAAC,CAAC,oCAAoC;YACtC,CAAC,CAAC,EAAE,CAAA;QACN,OAAO,IAAI,CAAA;kCACmB,OAAO;UAC/B,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC,CAAC,OAAO;;KAErE,CAAA;IACH,CAAC;;AAtUM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;IACD,QAAQ;CACT,CAAA;AA4B2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAqB;AACnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAiB;AAChB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAoB;AACnB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDAAiB;AAChB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oEAAkC;AAClC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAA4B;AAC3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6DAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qEAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8DAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oEAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uEAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAA4B;AAK9C;IAAR,KAAK,EAAE;yDAA2B;AAC1B;IAAR,KAAK,EAAE;2DAAgE;AAC/D;IAAR,KAAK,EAAE;uDAAsD;AACrD;IAAR,KAAK,EAAE;0DAA6B;AAC5B;IAAR,KAAK,EAAE;sDAMP;AACQ;IAAR,KAAK,EAAE;sDAMP;AA7FU,iBAAiB;IAD7B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,iBAAiB,CAwU7B;SAxUY,iBAAiB","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .message-gp > a {\n color: #db5d00;\n text-decoration-line: underline;\n font-weight: 700;\n cursor: pointer;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n /\n property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property isEpaper = is paywall opened in epaper page\n * property paywall_location = the location where user encounter the paywall\n * property paywall_subscription_package = the name of the subscription package viewed by user\n * property paywall_subscription_id = the ID of the subscription package viewed by user\n * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n * property paywall_position = the position of the subscription package viewed by user\n * property tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n * property tracker_epaper_edition = the edition of epaper viewed by user\n /\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = true\n @property({ type: Boolean }) isEpaper = false\n @property({ type: Boolean }) isBackgroundOnContentOnly = false\n @property({ type: String }) source = 'article'\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n\n /\n State\n */\n @state() private maxGracePeriod = 7\n @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n @state() private tempTextEachDay = []\n @state() private tempButtonA: {\n url: string\n text: string\n } = {\n url: '',\n text: '',\n }\n @state() private tempButtonB: {\n url: string\n text: string\n } = {\n url: '',\n text: '',\n }\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n return html`\n <p\n class=\"message-gp\"\n .innerHTML=${this.tempTextEachDay[\n maxGracePeriod - totalGracePeriod + 1 - 1\n ]}\n ></p>\n `\n // comment old html\n // if (totalGracePeriod === 7) {\n // return html`\n // <p>\n // Anda dalam\n // <a\n // href=\"#\"\n // class=\"text-orange-500 underline font-bold cursor-pointer\"\n // @click=${this.redirectToKnowledgeBase}\n // >\n // hari terakhir\n // </a>\n // masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n // mengakses konten premium tanpa batas.\n // </p>\n // `\n // }\n // return html`\n // <p>\n // Masa tenggang langganan Anda tersisa\n // <a\n // href=\"#\"\n // class=\"text-orange-500 underline font-bold cursor-pointer\"\n // @click=${this.redirectToKnowledgeBase}\n // >\n // ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n // >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n // tanpa batas.\n // </p>\n // `\n }\n\n private redirectToKnowledgeBase(): void {\n window.open(\n 'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n '_blank'\n )\n }\n\n private redirectToBerlangganan(): void {\n const { url = '' } = this.tempButtonB\n this.dataLayeronPerbaruiLanggananButton()\n this.sendGtmEvent('subscribe_button_clicked', true)\n\n const urlComputed = url \|\| `${this.subscriptionPage}?open_from=Grace_Period`\n window.open(urlComputed)\n }\n\n private redirectToCheckout(): void {\n const { url = '' } = this.tempButtonA\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n const defaultPath =\n url \|\|\n `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`\n\n window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`)\n }\n\n private getGtmParams(\n excludeSubscriptionParams: boolean = false\n ): Record<string, any> {\n const gtmParams: Record<string, any> = {}\n\n if (!this.isEpaper) {\n gtmParams.content_title = this.tracker_content_title\n gtmParams.content_id = this.tracker_content_id\n gtmParams.content_categories = this.tracker_content_categories\n gtmParams.content_type = this.tracker_content_type\n gtmParams.page_type = this.tracker_page_type\n } else {\n gtmParams.epaper_edition = this.tracker_epaper_edition\n }\n\n if (!excludeSubscriptionParams) {\n gtmParams.paywall_subscription_package = this.paywall_subscription_package\n gtmParams.paywall_subscription_id = this.paywall_subscription_id\n gtmParams.paywall_subscription_price = this.paywall_subscription_price\n }\n\n gtmParams.paywall_location = this.paywall_location\n gtmParams.paywall_position = this.paywall_position\n gtmParams.user_type = this.tracker_user_type\n gtmParams.subscription_status = this.tracker_subscription_status\n gtmParams.page_domain = this.tracker_page_domain \|\| 'Kompas.id'\n gtmParams.metered_wall_type = this.tracker_metered_wall_type \|\| 'GP'\n gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n return gtmParams\n }\n\n private sendGtmEvent(\n event: string,\n excludeSubscriptionParams: boolean = false\n ) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(excludeSubscriptionParams),\n },\n ]\n } else {\n gtmParams = {\n ...gtmParams,\n ...this.getGtmParams(excludeSubscriptionParams),\n }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n const { isColumn, isBackgroundOnContentOnly } = this\n\n const { text: textA = '' } = this.tempButtonA\n\n const { text: textB = '' } = this.tempButtonB\n\n const wrapperColumnClass = isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n const buttonColumnClass = isColumn\n ? ''\n : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n const contentBgClass = isBackgroundOnContentOnly\n ? 'bg-orange-100 p-4 rounded-lg mb-4'\n : ''\n\n return html`\n <div\n class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n >\n <div\n class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n >\n ${this.getCountdownGracePeriod()}\n </div>\n ${this.isShowButton\n ? html`\n <div\n class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n >\n <button\n @click=${this.redirectToCheckout}\n class=\"w-full rounded-md bg-brand-1 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n >\n ${textA \|\| 'Perbarui Langganan'}\n </button>\n <div class=\"md:block hidden\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}\"\n >\n ${textB \|\| 'Paket Lainnya'}\n </button>\n </div>\n <div class=\"md:hidden block\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}\"\n >\n ${textB \|\| 'Lihat Paket Lainnya'}\n </button>\n </div>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n // Constructing the URL with parameters\n const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`\n const response = await fetch(endpoint)\n const result = await response.json()\n this.tempTextEachDay = result.message\n this.tempButtonA = result.buttonA\n this.tempButtonB = result.buttonB\n\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n const bgClass = !this.isBackgroundOnContentOnly\n ? 'bg-orange-100 sticky bottom-0 z-20'\n : ''\n return html`\n <div class=\"h-full w-full ${bgClass}\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasGracePeriod.js","sourceRoot":"","sources":["../../../../src/components/kompasid-grace-period/KompasGracePeriod.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { deviceType } from '../../utils/deviceType.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\n\n@customElement('kompasid-grace-period')\nexport class KompasGracePeriod extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .message-gp > a {\n color: #db5d00;\n text-decoration-line: underline;\n font-weight: 700;\n cursor: pointer;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n /\n property totalGracePeriod = how many days are left in grace period\n * property isColumn = changes how the component looks on different screen sizes\n * property isShowButton = shows or hides a subscription button\n * property isEpaper = is paywall opened in epaper page\n * property paywall_location = the location where user encounter the paywall\n * property paywall_subscription_package = the name of the subscription package viewed by user\n * property paywall_subscription_id = the ID of the subscription package viewed by user\n * property paywall_subscription_price = the price of the subscriprtion package viewed by user\n * property paywall_position = the position of the subscription package viewed by user\n * property tracker_page_type = type of the page\n * property tracker_content_id = ID of article (slug)\n * property tracker_content_type = whether it's free article or paid article\n * property tracker_content_title = the title of article\n * property tracker_content_categories = the category of the content\n * property tracker_user_type = type of user based on their subscription\n * property tracker_subscription_status = status of their subscription\n * property tracker_page_domain = page Domain\n * property tracker_metered_wall_type = the type of Metered Wall\n * property tracker_metered_wall_balance = the balance of their metered wall\n * property tracker_epaper_edition = the edition of epaper viewed by user\n /\n\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: Boolean }) isColumn = false\n @property({ type: Boolean }) isShowButton = true\n @property({ type: Boolean }) isEpaper = false\n @property({ type: Boolean }) isBackgroundOnContentOnly = false\n @property({ type: String }) source = 'article'\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n @property({ type: String }) tracker_epaper_edition = ''\n\n /\n State\n */\n @state() private maxGracePeriod = 7\n @state() private subscriptionPage = 'https://www.kompas.id/berlangganan'\n @state() private checkoutPage = 'https://checkoutv2.kompas.id'\n @state() private tempTextEachDay = []\n @state() private tempButtonA: {\n url: string\n text: string\n } = {\n url: '',\n text: '',\n }\n @state() private tempButtonB: {\n url: string\n text: string\n } = {\n url: '',\n text: '',\n }\n\n private getCountdownGracePeriod() {\n const { totalGracePeriod } = this\n const { maxGracePeriod } = this\n return html`\n <p\n class=\"message-gp\"\n .innerHTML=${this.tempTextEachDay[\n totalGracePeriod > maxGracePeriod\n ? maxGracePeriod - 1\n : totalGracePeriod - 1 // template maksimal 7 hari\n ]}\n ></p>\n `\n // comment old html\n // if (totalGracePeriod === 7) {\n // return html`\n // <p>\n // Anda dalam\n // <a\n // href=\"#\"\n // class=\"text-orange-500 underline font-bold cursor-pointer\"\n // @click=${this.redirectToKnowledgeBase}\n // >\n // hari terakhir\n // </a>\n // masa tenggang langganan. Segera perbarui paket langganan untuk tetap\n // mengakses konten premium tanpa batas.\n // </p>\n // `\n // }\n // return html`\n // <p>\n // Masa tenggang langganan Anda tersisa\n // <a\n // href=\"#\"\n // class=\"text-orange-500 underline font-bold cursor-pointer\"\n // @click=${this.redirectToKnowledgeBase}\n // >\n // ${maxGracePeriod - totalGracePeriod + 1} hari lagi </a\n // >. Segera perbarui paket langganan untuk tetap mengakses konten premium\n // tanpa batas.\n // </p>\n // `\n }\n\n private redirectToKnowledgeBase(): void {\n window.open(\n 'https://kb.kompas.id/baca/berlangganan-kompas-id/masa-tenggang-atau-grace-period-langganan/',\n '_blank'\n )\n }\n\n private redirectToBerlangganan(): void {\n const { url = '' } = this.tempButtonB\n this.dataLayeronPerbaruiLanggananButton()\n this.sendGtmEvent('subscribe_button_clicked', true)\n\n const urlComputed = url \|\| `${this.subscriptionPage}?open_from=Grace_Period`\n window.open(urlComputed)\n }\n\n private redirectToCheckout(): void {\n const { url = '' } = this.tempButtonA\n this.dataLayeronPerbaruiLanggananButton()\n const originHost: string = encodeURIComponent(window.location.href)\n\n this.sendGtmEvent('subscribe_button_clicked')\n\n const defaultPath =\n url \|\|\n `${this.checkoutPage}/v2/kdp?productId=${this.paywall_subscription_id}&autorenewal=1`\n\n window.open(`${defaultPath}&referrer=${originHost}&source=${this.source}`)\n }\n\n private getGtmParams(\n excludeSubscriptionParams: boolean = false\n ): Record<string, any> {\n const gtmParams: Record<string, any> = {}\n\n if (!this.isEpaper) {\n gtmParams.content_title = this.tracker_content_title\n gtmParams.content_id = this.tracker_content_id\n gtmParams.content_categories = this.tracker_content_categories\n gtmParams.content_type = this.tracker_content_type\n gtmParams.page_type = this.tracker_page_type\n } else {\n gtmParams.epaper_edition = this.tracker_epaper_edition\n }\n\n if (!excludeSubscriptionParams) {\n gtmParams.paywall_subscription_package = this.paywall_subscription_package\n gtmParams.paywall_subscription_id = this.paywall_subscription_id\n gtmParams.paywall_subscription_price = this.paywall_subscription_price\n }\n\n gtmParams.paywall_location = this.paywall_location\n gtmParams.paywall_position = this.paywall_position\n gtmParams.user_type = this.tracker_user_type\n gtmParams.subscription_status = this.tracker_subscription_status\n gtmParams.page_domain = this.tracker_page_domain \|\| 'Kompas.id'\n gtmParams.metered_wall_type = this.tracker_metered_wall_type \|\| 'GP'\n gtmParams.metered_wall_balance = this.tracker_metered_wall_balance\n\n return gtmParams\n }\n\n private sendGtmEvent(\n event: string,\n excludeSubscriptionParams: boolean = false\n ) {\n let gtmParams: Record<string, any> = { event }\n\n if (event === 'paywall_viewed') {\n gtmParams.impressions = [\n {\n ...this.getGtmParams(excludeSubscriptionParams),\n },\n ]\n } else {\n gtmParams = {\n ...gtmParams,\n ...this.getGtmParams(excludeSubscriptionParams),\n }\n }\n\n window.dataLayer.push(gtmParams)\n }\n\n private dataLayeronPerbaruiLanggananButton(): void {\n window.dataLayer.push({\n event: 'gracePeriodClick',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private dataLayeronGracePeriod(): void {\n window.dataLayer.push({\n event: 'gracePeriodImpression',\n interface: deviceType(),\n dayLeft: this.maxGracePeriod - this.totalGracePeriod,\n urlName: window.location.href,\n })\n }\n\n private gracePeriodTemplate() {\n const { isColumn, isBackgroundOnContentOnly } = this\n\n const { text: textA = '' } = this.tempButtonA\n\n const { text: textB = '' } = this.tempButtonB\n\n const wrapperColumnClass = isColumn\n ? 'rounded-lg'\n : 'md:flex-row lg:px-8 md:space-x-4 px-4 py-4'\n const buttonColumnClass = isColumn\n ? ''\n : 'md:w-1/2 justify-end md:flex-row pt-4 md:pt-0'\n const otherBtnColumnClass = isColumn ? '' : 'md:w-auto'\n const wrapperBgClass = !isBackgroundOnContentOnly ? 'p-4' : ''\n const contentBgClass = isBackgroundOnContentOnly\n ? 'bg-orange-100 p-4 rounded-lg mb-4'\n : ''\n\n return html`\n <div\n class=\"bottom-0 mx-auto flex w-full max-w-7xl flex-col justify-end ${wrapperColumnClass} ${wrapperBgClass}\"\n >\n <div\n class=\"self-center text-left text-sm text-grey-600 md:text-base ${contentBgClass}\"\n >\n ${this.getCountdownGracePeriod()}\n </div>\n ${this.isShowButton\n ? html`\n <div\n class=\"flex w-full flex-col gap-4 self-center ${buttonColumnClass}\"\n >\n <button\n @click=${this.redirectToCheckout}\n class=\"w-full rounded-md bg-brand-1 p-2 px-5 text-sm font-bold text-grey-100 md:w-auto md:text-base\"\n >\n ${textA \|\| 'Perbarui Langganan'}\n </button>\n <div class=\"md:block hidden\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}\"\n >\n ${textB \|\| 'Paket Lainnya'}\n </button>\n </div>\n <div class=\"md:hidden block\">\n <button\n @click=${this.redirectToBerlangganan}\n class=\"bg-transparent w-full rounded-md border border-brand-1 p-1.5 px-5 text-sm font-bold text-brand-1 md:text-base ${otherBtnColumnClass}\"\n >\n ${textB \|\| 'Lihat Paket Lainnya'}\n </button>\n </div>\n </div>\n `\n : nothing}\n </div>\n `\n }\n\n override async connectedCallback() {\n // Constructing the URL with parameters\n const endpoint = `https://cdn-www.kompas.id/web-component/grace-period-paywall.json`\n const response = await fetch(endpoint)\n const result = await response.json()\n this.tempTextEachDay = result.message\n this.tempButtonA = result.buttonA\n this.tempButtonB = result.buttonB\n\n super.connectedCallback()\n\n this.sendGtmEvent('paywall_viewed')\n\n this.dataLayeronGracePeriod()\n }\n\n render() {\n const bgClass = !this.isBackgroundOnContentOnly\n ? 'bg-orange-100 sticky bottom-0 z-20'\n : ''\n return html`\n <div class=\"h-full w-full ${bgClass}\">\n ${this.totalGracePeriod > 0 ? this.gracePeriodTemplate() : nothing}\n </div>\n `\n }\n}\n"]}

package/dist/src/components/kompasid-header-account/types.d.ts CHANGED Viewed

@@ -3,7 +3,5 @@ export interface User {
     expired: string;
     totalGracePeriod: number;
     isGracePeriod: boolean;
-    activeInfo: string;
     isMembership: boolean;
-    updateMembership: string;
 }

package/dist/src/components/kompasid-header-account/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface User {\n userName: string\n expired: string\n totalGracePeriod: number\n isGracePeriod: boolean\n ~~activeInfo~~: ~~string~~\n ~~isMembership~~: ~~boolean~~\n ~~updateMembership~~: string\n}\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface User {\n userName: string\n expired: string\n totalGracePeriod: number\n isGracePeriod: boolean\n isMembership: boolean\n // updateMembership: string\n // activeInfo: string // ga kepake dua data ini\n}\n"]}

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js CHANGED Viewed

@@ -107,8 +107,8 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
          * Active Info Element
          */
         const activeInfoTemplate = () => {
-            const { isGracePeriod, totalGracePeriod, activeInfo, expired } = this.userData;
-            let result = html `${activeInfo}`;
+            const { isGracePeriod, totalGracePeriod, expired } = this.userData;
+            let result = html `Tidak Berlangganan`; // default
             let endGracePeriodDate = '';
             const nowDate = new Date();
             const isoDateString = expired.replace(' ', 'T');
@@ -116,10 +116,10 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
             const subsDaysLeft = differenceInDays(expiredDate, nowDate);
             const gracePeriodCard = () => {
                 if (isGracePeriod) {
-                    const totalGraceSubs = Math.max(totalGracePeriod - 1, 0);
-                    endGracePeriodDate = this.formatDate(addDays(new Date(), this.maxGracePeriod - totalGraceSubs));
+                    const totalGraceSubs = this.maxGracePeriod - Math.max(totalGracePeriod, 0);
+                    endGracePeriodDate = this.formatDate(addDays(new Date(), totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs));
                 }
-                const label = activeInfo !== null && activeInfo !== void 0 ? activeInfo : 'Periode Masa Tenggang';
+                const label = 'Periode Masa Tenggang';
                 return html `
           <div class="text-orange-500 gracePeriodCard">
             <span>${label}</span>
@@ -128,7 +128,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
         `;
             };
             const lessThan3daysCard = () => {
-                const label = activeInfo !== null && activeInfo !== void 0 ? activeInfo : 'Aktif Berlangganan';
+                const label = 'Aktif Berlangganan';
                 return html `
           <div class="lessThan3daysCard">
             <span> ${label} </span>
@@ -138,7 +138,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
             };
             const moreThan3daysCard = () => {
                 const formattedExpired = this.formatDate(expired);
-                const label = activeInfo !== null && activeInfo !== void 0 ? activeInfo : 'Aktif Berlangganan';
+                const label = 'Aktif Berlangganan';
                 return html `
           <div class="moreThan3daysCard">
             <span>${label}</span>
@@ -146,7 +146,7 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
           </div>
         `;
             };
-            if (isGracePeriod) {
+            if (isGracePeriod && totalGracePeriod > 0) {
                 result = gracePeriodCard();
             }
             else if (subsDaysLeft > 0 && subsDaysLeft <= 3) {

package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: String }) openFrom = ''\n /\n Props For Grace Period Tracker\n /\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /\n State\n /\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date \| string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /\n Subs Button Element\n /\n const subscribeButton = () => {\n if (this.userData.isMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom \|\| 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\n </button>\n </div>\n `\n }\n /\n membership icon element, show if isMebership has truthy value\n /\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /\n Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, activeInfo, expired } =\n this.userData\n\n let result = html`${activeInfo}`\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate)\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs = Math.max(totalGracePeriod - 1, 0)\n endGracePeriodDate = this.formatDate(\n addDays(new Date(), this.maxGracePeriod - totalGraceSubs)\n )\n }\n const label = activeInfo ?? 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = activeInfo ?? 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = activeInfo ?? 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod) {\n result = gracePeriodCard()\n } else if (subsDaysLeft > 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n return html`\n <div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <p class=\"capitalize font-bold text-base text-blue-600\">\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}
1	+ {"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n `,\n TWStyles,\n ]\n\n /*\n Props\n /\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: Number }) totalGracePeriod = 0\n @property({ type: String }) openFrom = ''\n /\n Props For Grace Period Tracker\n /\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /\n State\n /\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date \| string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /\n Subs Button Element\n /\n const subscribeButton = () => {\n if (this.userData.isMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom \|\| 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\n </button>\n </div>\n `\n }\n /\n membership icon element, show if isMebership has truthy value\n /\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /\n Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate)\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft > 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n return html`\n <div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <p class=\"capitalize font-bold text-base text-blue-600\">\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}

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

@@ -8,7 +8,6 @@ export declare class KompasMeteredPaywallPersonalize extends LitElement {
      * 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
@@ -30,7 +29,6 @@ export declare class KompasMeteredPaywallPersonalize extends LitElement {
      * 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;

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

@@ -16,7 +16,6 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
          * 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
@@ -38,7 +37,6 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
          * prop tracker_epaper_edition = The edition of epaper viewed by user
          * prop tracker_metered_wall_balance = The balance of their metered wall
          */
-        this.countdownArticle = 0;
         this.segment = '';
         this.offering = '';
         this.user_name = '';
@@ -114,7 +112,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
             subscription_status: this.tracker_subscription_status,
             page_domain: this.tracker_page_domain || 'Kompas.id',
             metered_wall_type: this.tracker_metered_wall_type || 'MP',
-            metered_wall_balance: this.maxQuota - this.countdownArticle + 1,
+            metered_wall_balance: this.tracker_metered_wall_balance,
             paywall_segment: this.segment || '',
             checkout_url: (_a = this.packageData) === null || _a === void 0 ? void 0 : _a.offering[this.offering ? this.offering : 'Q1'].checkout_url,
         });
@@ -137,7 +135,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
             subscription_status: this.tracker_subscription_status,
             page_domain: this.tracker_page_domain || 'Kompas.id',
             metered_wall_type: this.tracker_metered_wall_type || 'MP',
-            metered_wall_balance: this.maxQuota - this.countdownArticle + 1,
+            metered_wall_balance: this.tracker_metered_wall_balance,
             paywall_segment: this.segment || '',
             checkout_url: (_a = this.packageData) === null || _a === void 0 ? void 0 : _a.offering[this.offering ? this.offering : 'Q1'].checkout_url,
         });
@@ -658,9 +656,6 @@ __decorate([
 __decorate([
     state()
 ], KompasMeteredPaywallPersonalize.prototype, "packageData", void 0);
-__decorate([
-    property({ type: Number })
-], KompasMeteredPaywallPersonalize.prototype, "countdownArticle", void 0);
 __decorate([
     property({ type: String })
 ], KompasMeteredPaywallPersonalize.prototype, "segment", void 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"KompasMeteredPaywallPersonalize.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData, OfferingItem } from './types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\n\n@customElement('kompasid-metered-paywall-personalize')\nexport class KompasMeteredPaywallPersonalize extends LitElement {\n static styles = [\n css`\n .text-transition {\n width: 100%;\n height: 5rem;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .message-formatter span {\n color: #ff7a00;\n font-weight: 700;\n text-wrap: nowrap;\n }\n\n .message-formatter s {\n color: #999999;\n text-wrap: nowrap;\n font-weight: 400;\n font-size: 14px;\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .icon {\n height: 1rem;\n color: #48bb78;\n }\n\n .icon.lg {\n height: 1.5rem;\n }\n\n .icon.lg svg {\n height: 1.5rem;\n }\n `,\n TWStyles,\n ]\n\n @state() private isLoading: Boolean = true\n @state() private maxQuota: number = 3\n @state() private packageData: PackageData \| undefined\n\n /*\n Props\n /\n /\n prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca.\n * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall\n * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1\n * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific\n * prop rubrik untuk menerika rubrikasi dari implementor\n * prop paywall_location = The location where user encounter the paywall\n * prop paywall_subscription_package = The name of the subscription package viewed by user\n * prop paywall_subscription_id = The ID of the subscription package viewed by user\n * prop paywall_subscription_price = The price of the subscriprtion package viewed by user\n * prop paywall_position = The position of ther subscription package viewed by user\n * prop tracker_page_type = Type of the page\n * prop tracker_content_id = ID of article (slug)\n * prop tracker_content_type = Whether it's free article or paid article\n * prop tracker_content_title = The title of article\n * prop tracker_content_categories = The category of the content\n * prop tracker_user_type = Type of user based on their subscription\n * prop tracker_subscription_status = Status of their subscription\n * prop tracker_page_domain = Page Domain\n * prop tracker_metered_wall_type = The type of Metered Wall\n * prop tracker_epaper_edition = The edition of epaper viewed by user\n * prop tracker_metered_wall_balance = The balance of their metered wall\n /\n @property({ type: Number }) countdownArticle = 0\n @property({ type: String }) segment = ''\n @property({ type: String }) offering = ''\n @property({ type: String }) user_name = ''\n @property({ type: String }) rubrik = ''\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: String }) paywall_subscription_id = ''\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.getMeteredPaywallData()\n this.dataLayeronMeteredPaywall()\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n }\n\n async getMeteredPaywallData() {\n try {\n const getSegment = this.segment.toLocaleLowerCase().replace(/ /g, '_')\n const response = await fetch(\n `https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`\n )\n const json = await response.json()\n\n this.packageData = json\n } catch (error) {\n throw Error('Failed to get metered paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n private redirectToBerlangganan() {\n this.dataLayeronLanggananButton()\n\n // Pastikan data tersedia\n const offeringKey = this.offering \|\| 'Q1'\n const offeringData = this.packageData?.offering?.[offeringKey]\n\n const checkoutUrl = offeringData?.checkout_url \|\| ''\n\n // Encode referrer dengan aman\n const { origin, pathname, search } = window.location\n const referrer = encodeURIComponent(`${origin}${pathname}${search}`)\n\n // Bangun URL dengan parameter tambahan aman\n const url = new URL(checkoutUrl)\n url.searchParams.set('referrer', referrer)\n\n // Redirect ke URL akhir\n window.location.href = url.toString()\n }\n\n private dataLayeronLanggananButton() {\n window.dataLayer.push({\n event: 'subscribe_button_clicked',\n paywall_location: this.paywall_location \|\| '',\n paywall_subscription_package: this.paywall_subscription_package \|\| '',\n paywall_subscription_id: this.paywall_subscription_id \|\| '',\n paywall_subscription_price: this.paywall_subscription_price \|\| 0,\n paywall_position: this.paywall_position \|\| 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type \|\| 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'MP',\n metered_wall_balance: this.maxQuota - this.countdownArticle + 1,\n paywall_segment: this.segment \|\| '',\n checkout_url:\n this.packageData?.offering[this.offering ? this.offering : 'Q1']\n .checkout_url,\n })\n }\n\n private dataLayeronMeteredPaywall() {\n window.dataLayer.push({\n event: 'paywall_viewed',\n paywall_location: this.paywall_location \|\| '',\n paywall_subscription_package: this.paywall_subscription_package \|\| '',\n paywall_subscription_id: this.paywall_subscription_id \|\| '',\n paywall_subscription_price: this.paywall_subscription_price \|\| 0,\n paywall_position: this.paywall_position \|\| 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type \|\| 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'MP',\n metered_wall_balance: this.maxQuota - this.countdownArticle + 1,\n paywall_segment: this.segment \|\| '',\n checkout_url:\n this.packageData?.offering[this.offering ? this.offering : 'Q1']\n .checkout_url,\n })\n }\n\n @state() private stateDefaultPaywall = false\n private computedstateDefaultPaywall() {\n this.stateDefaultPaywall = !this.stateDefaultPaywall\n }\n\n /\n Ganti placeholder _key_ di template dengan nilai dari data offering\n * Hanya replace jika placeholder cocok dan datanya valid\n */\n private replacePlaceholdersFromOffering(\n template: string,\n offeringData: OfferingItem\n ): string {\n if (!offeringData) return template\n // regex cari placeholder seperti _harga_coret_, _offering_price_, dst.\n return template.replace(/_([a-zA-Z0-9_]+)_/g, (match, key) => {\n // cek apakah key ada di dalam data\n if (key in offeringData) {\n const value = (offeringData as any)[key]\n\n // jika value number, auto format ke rupiah\n if (typeof value === 'number') {\n return formatRupiah(value)\n }\n\n // jika string, langsung return\n return String(value)\n }\n\n // kalau placeholder tidak dikenal, biarkan apa adanya\n return match\n })\n }\n\n private engageReturners() {\n const textTemplateFormater = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n return !this.stateDefaultPaywall\n ? html`\n <div\n class=\"fixed w-full inset-0 px-4 lg:px-0 h-full flex justify-center items-center bg-black bg-opacity-75 z-[999]\"\n >\n <div\n class=\"bg-white max-w-[460px] w-full justify-center items-center flex flex-col p-6 lg:pb-6 lg:px-6 lg:pt-9 relative rounded\"\n >\n <button\n class=\"font-bold cursor-pointer text-grey-400 flex rounded text-base absolute right-0 top-0 w-6 h-6 lg:w-8 lg:h-8 justify-center items-center mt-4 mr-4\"\n @click=${this.computedstateDefaultPaywall}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </button>\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-auto max-h-40\"\n />\n <div\n class=\"font-lora font-bold text-grey-600 lg:text-2xl text-center pt-6\"\n >\n <div>Halo ${this.user_name},</div>\n <div>${this.packageData?.paywall.messageTitleExpand}</div>\n </div>\n <div\n class=\"pt-3 text-center font-sans text-grey-600 text-sm lg:text-base leading-none\"\n >\n <div>${this.packageData?.paywall.descriptionExpand}</div>\n <div class=\"text-base lg:text-lg text-grey-400 py-3\">\n <s\n >${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].harga_coret \|\| 0\n )}</s\n >\n <span class=\"text-lg lg:text-2xl text-orange-400 font-bold\">\n ${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].offering_price \|\| 0\n )}\n </span>\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration\n ? html`\n <span class=\"text-base lg:text-lg text-grey-600\"\n >${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration}</span\n >\n `\n : nothing}\n </div>\n <div>untuk tahun pertama.</div>\n </div>\n <div class=\"w-full pt-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-none w-full\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n </div>\n `\n : html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 py-3 justify-center gap-4 px-4 lg:px-0 bottom-0\"\n >\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(textTemplateFormater)}\n </div>\n <div>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n </div>\n `\n }\n\n private passiveFaders() {\n const messageTitleCollapse = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n return html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 ${this\n .stateDefaultPaywall\n ? 'py-4 lg:py-3'\n : 'py-4 lg:py-8'} gap-4 px-4 bottom-0\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto \"\n >\n ${!this.stateDefaultPaywall\n ? html`\n <div class=\"h-9 w-9 hidden lg:flex\"></div>\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div\n class=\"text-grey-600 font-lora message-formatter order-2\"\n >\n <div\n class=\"text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}\n </div>\n <div class=\"flex flex-col font-sans gap-3 mb-3\">\n ${this.packageData?.paywall.listBenefits\n ? this.packageData?.paywall.listBenefits.map(\n item =>\n html`\n <div\n class=\"flex items-baseline align-baseline\"\n >\n <div\n class=\"bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'circle-check',\n 12,\n 12\n )\n )}\n </div>\n <h6 class=\"text-base ml-1\">${item}</h6>\n </div>\n `\n )\n : nothing}\n </div>\n <div\n class=\"text-grey-600 font-sans text-base self-center text-left message-formatter mb-4 leading-[150%]\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n : html`\n <div class=\"hidden h-9 w-9 lg:flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(messageTitleCollapse)}\n </div>\n <div class=\"hidden lg:flex ml-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n <div class=\"flex lg:hidden ml-4\">\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n `}\n </div>\n </div>\n </div>\n `\n }\n\n private lostButCurious() {\n const messageTitleCollapse = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n return html`\n <div class=\"sticky bottom-0 w-full h-full leading-none\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 ${this\n .stateDefaultPaywall\n ? 'py-4 lg:py-3'\n : 'py-4 lg:py-8'} gap-4 px-4 bottom-0\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto \"\n >\n ${!this.stateDefaultPaywall\n ? html`\n <div class=\"h-9 w-9 hidden lg:flex\"></div>\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div class=\"text-grey-600 font-sans order-2\">\n <div\n class=\"text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-start lg:text-start\"\n >\n <span\n >Halo\n ${this.user_name\n ? this.user_name\n : 'Pembaca Setia Kompas'},</span\n >\n ${this.packageData?.paywall.messageTitleExpand}\n <span>${this.rubrik}</span>\n </div>\n <div\n class=\"text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-2\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"text-base lg:text-lg text-grey-400 mb-1\">\n <s\n >${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].harga_coret \|\| 0\n )}</s\n >\n <span\n class=\"text-lg lg:text-2xl text-orange-400 font-bold\"\n >\n ${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].offering_price \|\| 0\n )}\n </span>\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration\n ? html`\n <span class=\"text-base lg:text-lg text-grey-600\"\n >${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration}</span\n >\n `\n : nothing}\n </div>\n <div class=\"mb-3 lg:mb-4\">untuk tahun pertama.</div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n : html`\n <div class=\"hidden h-9 w-9 lg:flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(messageTitleCollapse)}\n </div>\n <div class=\"hidden lg:flex ml-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n <div class=\"flex lg:hidden ml-4\">\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n `}\n </div>\n </div>\n </div>\n `\n }\n\n private unaware() {\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n\n return html`\n <div class=\"w-full h-full max-w-4xl mx-auto\">\n <div\n 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\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto\"\n >\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div class=\"text-grey-600 font-lora message-formatter order-2\">\n <div\n class=\"text-xl lg:text-2xl font-bold mb-3 text-start lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}${this\n .user_name\n ? `, ${this.user_name}!`\n : ''}\n </div>\n <div class=\"mb-3 font-sans\">\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"flex flex-col font-sans gap-3 mb-4\">\n ${this.packageData?.paywall.listBenefits\n ? this.packageData?.paywall.listBenefits.map(\n item =>\n html`\n <div class=\"flex items-baseline align-baseline\">\n <div\n class=\"bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'circle-check',\n 12,\n 12\n )\n )}\n </div>\n <h6 class=\"text-base ml-1\">${item}</h6>\n </div>\n `\n )\n : nothing}\n </div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-full lg:w-[202px] max-h-[116px] lg:max-h-none\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n private pickTemplate() {\n switch (this.segment.toLocaleLowerCase()) {\n case 'engaged returners':\n return this.engageReturners()\n case 'passive faders':\n return this.passiveFaders()\n case 'lost but curious':\n return this.lostButCurious()\n case 'unaware':\n return this.unaware()\n default:\n return nothing\n }\n }\n\n render() {\n return !this.isLoading ? this.pickTemplate() : nothing\n }\n}\n"]}
1	+ {"version":3,"file":"KompasMeteredPaywallPersonalize.js","sourceRoot":"","sources":["../../../../src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AAExD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAGnD,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,UAAU;IAAxD;;QAgDY,cAAS,GAAY,IAAI,CAAA;QACzB,aAAQ,GAAW,CAAC,CAAA;QAGrC;;WAEG;QACH;;;;;;;;;;;;;;;;;;;;;WAqBG;QACyB,YAAO,GAAG,EAAE,CAAA;QACZ,aAAQ,GAAG,EAAE,CAAA;QACb,cAAS,GAAG,EAAE,CAAA;QACd,WAAM,GAAG,EAAE,CAAA;QACX,qBAAgB,GAAG,EAAE,CAAA;QACrB,iCAA4B,GAAG,EAAE,CAAA;QACjC,4BAAuB,GAAG,EAAE,CAAA;QAC5B,+BAA0B,GAAG,CAAC,CAAA;QAC9B,qBAAgB,GAAG,CAAC,CAAA;QACpB,sBAAiB,GAAG,EAAE,CAAA;QACtB,uBAAkB,GAAG,EAAE,CAAA;QACvB,0BAAqB,GAAG,EAAE,CAAA;QAC1B,+BAA0B,GAAG,EAAE,CAAA;QAC/B,yBAAoB,GAAG,EAAE,CAAA;QACzB,sBAAiB,GAAG,EAAE,CAAA;QACtB,gCAA2B,GAAG,EAAE,CAAA;QAChC,wBAAmB,GAAG,EAAE,CAAA;QACxB,8BAAyB,GAAG,EAAE,CAAA;QAC9B,iCAA4B,GAAG,CAAC,CAAA;QAgG3C,wBAAmB,GAAG,KAAK,CAAA;IAsiB9C,CAAC;IApoBU,KAAK,CAAC,iBAAiB;QAC9B,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAA;QAClC,IAAI,CAAC,yBAAyB,EAAE,CAAA;QAChC,cAAc,CAAC,CAAC,SAAS,EAAE,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAA;IACzD,CAAC;IAED,KAAK,CAAC,qBAAqB;QACzB,IAAI;YACF,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;YACtE,MAAM,QAAQ,GAAG,MAAM,KAAK,CAC1B,uEAAuE,UAAU,OAAO,CACzF,CAAA;YACD,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAA;YAElC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAA;SACxB;QAAC,OAAO,KAAK,EAAE;YACd,MAAM,KAAK,CAAC,oCAAoC,CAAC,CAAA;SAClD;gBAAS;YACR,IAAI,CAAC,SAAS,GAAG,KAAK,CAAA;SACvB;IACH,CAAC;IAEO,sBAAsB;;QAC5B,IAAI,CAAC,0BAA0B,EAAE,CAAA;QAEjC,yBAAyB;QACzB,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAA;QACzC,MAAM,YAAY,GAAG,MAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,0CAAG,WAAW,CAAC,CAAA;QAE9D,MAAM,WAAW,GAAG,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,YAAY,KAAI,EAAE,CAAA;QAEpD,8BAA8B;QAC9B,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAA;QACpD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,EAAE,CAAC,CAAA;QAEpE,4CAA4C;QAC5C,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,CAAA;QAChC,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAA;QAE1C,wBAAwB;QACxB,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,GAAG,CAAC,QAAQ,EAAE,CAAA;IACvC,CAAC;IAEO,0BAA0B;;QAChC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,0BAA0B;YACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,IAAI,EAAE;YAC7C,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,IAAI,EAAE;YACrE,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,IAAI,EAAE;YAC3D,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,IAAI,CAAC;YAChE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,IAAI,CAAC;YAC5C,SAAS,EAAE,IAAI,CAAC,iBAAiB;YACjC,UAAU,EAAE,IAAI,CAAC,kBAAkB;YACnC,aAAa,EAAE,IAAI,CAAC,qBAAqB;YACzC,kBAAkB,EAAE,IAAI,CAAC,0BAA0B;YACnD,YAAY,EAAE,IAAI,CAAC,oBAAoB;YACvC,SAAS,EAAE,IAAI,CAAC,iBAAiB,IAAI,GAAG;YACxC,mBAAmB,EAAE,IAAI,CAAC,2BAA2B;YACrD,WAAW,EAAE,IAAI,CAAC,mBAAmB,IAAI,WAAW;YACpD,iBAAiB,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI;YACzD,oBAAoB,EAAE,IAAI,CAAC,4BAA4B;YACvD,eAAe,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE;YACnC,YAAY,EACV,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC5D,YAAY;SAClB,CAAC,CAAA;IACJ,CAAC;IAEO,yBAAyB;;QAC/B,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC;YACpB,KAAK,EAAE,gBAAgB;YACvB,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,IAAI,EAAE;YAC7C,4BAA4B,EAAE,IAAI,CAAC,4BAA4B,IAAI,EAAE;YACrE,uBAAuB,EAAE,IAAI,CAAC,uBAAuB,IAAI,EAAE;YAC3D,0BAA0B,EAAE,IAAI,CAAC,0BAA0B,IAAI,CAAC;YAChE,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,IAAI,CAAC;YAC5C,SAAS,EAAE,IAAI,CAAC,iBAAiB;YACjC,UAAU,EAAE,IAAI,CAAC,kBAAkB;YACnC,aAAa,EAAE,IAAI,CAAC,qBAAqB;YACzC,kBAAkB,EAAE,IAAI,CAAC,0BAA0B;YACnD,YAAY,EAAE,IAAI,CAAC,oBAAoB;YACvC,SAAS,EAAE,IAAI,CAAC,iBAAiB,IAAI,GAAG;YACxC,mBAAmB,EAAE,IAAI,CAAC,2BAA2B;YACrD,WAAW,EAAE,IAAI,CAAC,mBAAmB,IAAI,WAAW;YACpD,iBAAiB,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI;YACzD,oBAAoB,EAAE,IAAI,CAAC,4BAA4B;YACvD,eAAe,EAAE,IAAI,CAAC,OAAO,IAAI,EAAE;YACnC,YAAY,EACV,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EAC5D,YAAY;SAClB,CAAC,CAAA;IACJ,CAAC;IAGO,2BAA2B;QACjC,IAAI,CAAC,mBAAmB,GAAG,CAAC,IAAI,CAAC,mBAAmB,CAAA;IACtD,CAAC;IAED;;;OAGG;IACK,+BAA+B,CACrC,QAAgB,EAChB,YAA0B;QAE1B,IAAI,CAAC,YAAY;YAAE,OAAO,QAAQ,CAAA;QAClC,uEAAuE;QACvE,OAAO,QAAQ,CAAC,OAAO,CAAC,oBAAoB,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YAC3D,mCAAmC;YACnC,IAAI,GAAG,IAAI,YAAY,EAAE;gBACvB,MAAM,KAAK,GAAI,YAAoB,CAAC,GAAG,CAAC,CAAA;gBAExC,2CAA2C;gBAC3C,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;oBAC7B,OAAO,YAAY,CAAC,KAAK,CAAC,CAAA;iBAC3B;gBAED,+BAA+B;gBAC/B,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;aACrB;YAED,sDAAsD;YACtD,OAAO,KAAK,CAAA;QACd,CAAC,CAAC,CAAA;IACJ,CAAC;IAEO,eAAe;;QACrB,MAAM,oBAAoB,GAAG,IAAI,CAAC,+BAA+B,CAC/D,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,oBAAoB,KAAI,EAAE,EACpD,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7D,EAAmB,CACvB,CAAA;QACD,OAAO,CAAC,IAAI,CAAC,mBAAmB;YAC9B,CAAC,CAAC,IAAI,CAAA;;;;;;;;;yBASa,IAAI,CAAC,2BAA2B;;kBAEvC,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;;;uBAG/C,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,KAAK;;;;;;;4BAO1B,IAAI,CAAC,SAAS;uBACnB,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,kBAAkB;;;;;uBAK5C,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,iBAAiB;;;uBAG3C,YAAY,CACb,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CACxB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,WAAW,KAAI,CAAC,CACnB;;;sBAGC,YAAY,CACZ,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CACxB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,cAAc,KAAI,CAAC,CACtB;;oBAED,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA;;6BAEG,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,QAAQ;;uBAEb;gBACH,CAAC,CAAC,OAAO;;;;;;4BAMD,IAAI,CAAC,sBAAsB;;;oBAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;;;SAKxB;YACH,CAAC,CAAC,IAAI,CAAA;;;;;;;;kBAQM,UAAU,CAAC,oBAAoB,CAAC;;;;4BAItB,IAAI,CAAC,sBAAsB;;;oBAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;;;SAKxB,CAAA;IACP,CAAC;IAEO,aAAa;;QACnB,MAAM,oBAAoB,GAAG,IAAI,CAAC,+BAA+B,CAC/D,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,oBAAoB,KAAI,EAAE,EACpD,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7D,EAAmB,CACvB,CAAA;QACD,MAAM,iBAAiB,GAAG,IAAI,CAAC,+BAA+B,CAC5D,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,iBAAiB,KAAI,EAAE,EACjD,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7D,EAAmB,CACvB,CAAA;QACD,OAAO,IAAI,CAAA;;;gEAGiD,IAAI;aACvD,mBAAmB;YACpB,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,cAAc;;;;;cAKd,CAAC,IAAI,CAAC,mBAAmB;YACzB,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;0BAWM,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,kBAAkB;;;0BAG5C,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,YAAY;gBACtC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,YAAY,CAAC,GAAG,CACxC,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;;;;;;;wCAOI,SAAS,CACT,kBAAkB,CAChB,KAAK,EACL,cAAc,EACd,EAAE,EACF,EAAE,CACH,CACF;;iEAE0B,IAAI;;iCAEpC,CACJ;gBACH,CAAC,CAAC,OAAO;;;;;0BAKT,UAAU,CAAC,iBAAiB,CAAC;;;;oCAInB,IAAI,CAAC,sBAAsB;;;4BAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;;;;;;+BAQV,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,KAAK;;;;;;;;gCAQ9B,IAAI,CAAC,2BAA2B;;;;0BAItC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;;;;iBAI7D;YACH,CAAC,CAAC,IAAI,CAAA;;;;;;wBAMI,UAAU,CAAC,oBAAoB,CAAC;;;;kCAItB,IAAI,CAAC,sBAAsB;;;0BAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;;;kCAKL,IAAI,CAAC,2BAA2B;;;;4BAItC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;;;;;;;gCAO9C,IAAI,CAAC,2BAA2B;;;;0BAItC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;;;;gCAI5C,IAAI,CAAC,sBAAsB;;;wBAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;iBAGpB;;;;KAIZ,CAAA;IACH,CAAC;IAEO,cAAc;;QACpB,MAAM,oBAAoB,GAAG,IAAI,CAAC,+BAA+B,CAC/D,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,oBAAoB,KAAI,EAAE,EACpD,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7D,EAAmB,CACvB,CAAA;QACD,MAAM,iBAAiB,GAAG,IAAI,CAAC,+BAA+B,CAC5D,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,iBAAiB,KAAI,EAAE,EACjD,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7D,EAAmB,CACvB,CAAA;QACD,OAAO,IAAI,CAAA;;;gEAGiD,IAAI;aACvD,mBAAmB;YACpB,CAAC,CAAC,cAAc;YAChB,CAAC,CAAC,cAAc;;;;;cAKd,CAAC,IAAI,CAAC,mBAAmB;YACzB,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;4BAWQ,IAAI,CAAC,SAAS;gBACd,CAAC,CAAC,IAAI,CAAC,SAAS;gBAChB,CAAC,CAAC,sBAAsB;;0BAE1B,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,kBAAkB;gCACtC,IAAI,CAAC,MAAM;;;;;0BAKjB,UAAU,CAAC,iBAAiB,CAAC;;;;6BAI1B,YAAY,CACb,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CACxB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,WAAW,KAAI,CAAC,CACnB;;;;;4BAKC,YAAY,CACZ,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CACxB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,cAAc,KAAI,CAAC,CACtB;;0BAED,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA;;mCAEG,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC3B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,QAAQ;;6BAEb;gBACH,CAAC,CAAC,OAAO;;;;;oCAKC,IAAI,CAAC,sBAAsB;;;4BAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;;;;;;+BAQV,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,KAAK;;;;;;;;gCAQ9B,IAAI,CAAC,2BAA2B;;;;0BAItC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;;;;iBAI7D;YACH,CAAC,CAAC,IAAI,CAAA;;;;;;wBAMI,UAAU,CAAC,oBAAoB,CAAC;;;;kCAItB,IAAI,CAAC,sBAAsB;;;0BAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;;;kCAKL,IAAI,CAAC,2BAA2B;;;;4BAItC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;;;;;;;gCAO9C,IAAI,CAAC,2BAA2B;;;;0BAItC,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;;;;gCAI5C,IAAI,CAAC,sBAAsB;;;wBAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;iBAGpB;;;;KAIZ,CAAA;IACH,CAAC;IAEO,OAAO;;QACb,MAAM,iBAAiB,GAAG,IAAI,CAAC,+BAA+B,CAC5D,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,iBAAiB,KAAI,EAAE,EACjD,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;YAC7D,EAAmB,CACvB,CAAA;QAED,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;oBAeK,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,kBAAkB,GAAG,IAAI;aAClD,SAAS;YACV,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,GAAG;YACxB,CAAC,CAAC,EAAE;;;oBAGJ,UAAU,CAAC,iBAAiB,CAAC;;;oBAG7B,CAAA,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,YAAY;YACtC,CAAC,CAAC,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,YAAY,CAAC,GAAG,CACxC,IAAI,CAAC,EAAE,CACL,IAAI,CAAA;;;;;kCAKI,SAAS,CACT,kBAAkB,CAChB,KAAK,EACL,cAAc,EACd,EAAE,EACF,EAAE,CACH,CACF;;2DAE0B,IAAI;;2BAEpC,CACJ;YACH,CAAC,CAAC,OAAO;;;;8BAIC,IAAI,CAAC,sBAAsB;;;sBAGnC,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,CAC1B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,EACpC,aAAa;;;;;;;;yBAQV,MAAA,IAAI,CAAC,WAAW,0CAAE,OAAO,CAAC,KAAK;;;;;;;;;KASnD,CAAA;IACH,CAAC;IAEO,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE;YACxC,KAAK,mBAAmB;gBACtB,OAAO,IAAI,CAAC,eAAe,EAAE,CAAA;YAC/B,KAAK,gBAAgB;gBACnB,OAAO,IAAI,CAAC,aAAa,EAAE,CAAA;YAC7B,KAAK,kBAAkB;gBACrB,OAAO,IAAI,CAAC,cAAc,EAAE,CAAA;YAC9B,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAC,OAAO,EAAE,CAAA;YACvB;gBACE,OAAO,OAAO,CAAA;SACjB;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,OAAO,CAAA;IACxD,CAAC;;AAnuBM,sCAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0CF;IACD,QAAQ;CACT,CAAA;AAEQ;IAAR,KAAK,EAAE;kEAAkC;AACjC;IAAR,KAAK,EAAE;iEAA6B;AAC5B;IAAR,KAAK,EAAE;oEAA6C;AA2BzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gEAAa;AACZ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iEAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAAe;AACd;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+DAAY;AACX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yEAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qFAAkC;AACjC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gFAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mFAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yEAAqB;AACpB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0EAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2EAAwB;AACvB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8EAA2B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mFAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6EAA0B;AACzB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0EAAuB;AACtB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oFAAiC;AAChC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4EAAyB;AACxB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kFAA+B;AAC9B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qFAAiC;AAgGnD;IAAR,KAAK,EAAE;4EAAoC;AA/LjC,+BAA+B;IAD3C,aAAa,CAAC,sCAAsC,CAAC;GACzC,+BAA+B,CAquB3C;SAruBY,+BAA+B","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { customElement, state, property } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData, OfferingItem } from './types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { formatRupiah } from '../../utils/formatRupiah.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\n\n@customElement('kompasid-metered-paywall-personalize')\nexport class KompasMeteredPaywallPersonalize extends LitElement {\n static styles = [\n css`\n .text-transition {\n width: 100%;\n height: 5rem;\n }\n\n .body {\n position: sticky;\n top: 0;\n height: 100%;\n width: 100%;\n }\n\n .message-formatter span {\n color: #ff7a00;\n font-weight: 700;\n text-wrap: nowrap;\n }\n\n .message-formatter s {\n color: #999999;\n text-wrap: nowrap;\n font-weight: 400;\n font-size: 14px;\n }\n\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .icon {\n height: 1rem;\n color: #48bb78;\n }\n\n .icon.lg {\n height: 1.5rem;\n }\n\n .icon.lg svg {\n height: 1.5rem;\n }\n `,\n TWStyles,\n ]\n\n @state() private isLoading: Boolean = true\n @state() private maxQuota: number = 3\n @state() private packageData: PackageData \| undefined\n\n /*\n Props\n /\n /\n prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall\n * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1\n * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific\n * prop rubrik untuk menerika rubrikasi dari implementor\n * prop paywall_location = The location where user encounter the paywall\n * prop paywall_subscription_package = The name of the subscription package viewed by user\n * prop paywall_subscription_id = The ID of the subscription package viewed by user\n * prop paywall_subscription_price = The price of the subscriprtion package viewed by user\n * prop paywall_position = The position of ther subscription package viewed by user\n * prop tracker_page_type = Type of the page\n * prop tracker_content_id = ID of article (slug)\n * prop tracker_content_type = Whether it's free article or paid article\n * prop tracker_content_title = The title of article\n * prop tracker_content_categories = The category of the content\n * prop tracker_user_type = Type of user based on their subscription\n * prop tracker_subscription_status = Status of their subscription\n * prop tracker_page_domain = Page Domain\n * prop tracker_metered_wall_type = The type of Metered Wall\n * prop tracker_epaper_edition = The edition of epaper viewed by user\n * prop tracker_metered_wall_balance = The balance of their metered wall\n /\n @property({ type: String }) segment = ''\n @property({ type: String }) offering = ''\n @property({ type: String }) user_name = ''\n @property({ type: String }) rubrik = ''\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: String }) paywall_subscription_id = ''\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.getMeteredPaywallData()\n this.dataLayeronMeteredPaywall()\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n }\n\n async getMeteredPaywallData() {\n try {\n const getSegment = this.segment.toLocaleLowerCase().replace(/ /g, '_')\n const response = await fetch(\n `https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`\n )\n const json = await response.json()\n\n this.packageData = json\n } catch (error) {\n throw Error('Failed to get metered paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n private redirectToBerlangganan() {\n this.dataLayeronLanggananButton()\n\n // Pastikan data tersedia\n const offeringKey = this.offering \|\| 'Q1'\n const offeringData = this.packageData?.offering?.[offeringKey]\n\n const checkoutUrl = offeringData?.checkout_url \|\| ''\n\n // Encode referrer dengan aman\n const { origin, pathname, search } = window.location\n const referrer = encodeURIComponent(`${origin}${pathname}${search}`)\n\n // Bangun URL dengan parameter tambahan aman\n const url = new URL(checkoutUrl)\n url.searchParams.set('referrer', referrer)\n\n // Redirect ke URL akhir\n window.location.href = url.toString()\n }\n\n private dataLayeronLanggananButton() {\n window.dataLayer.push({\n event: 'subscribe_button_clicked',\n paywall_location: this.paywall_location \|\| '',\n paywall_subscription_package: this.paywall_subscription_package \|\| '',\n paywall_subscription_id: this.paywall_subscription_id \|\| '',\n paywall_subscription_price: this.paywall_subscription_price \|\| 0,\n paywall_position: this.paywall_position \|\| 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type \|\| 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'MP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n paywall_segment: this.segment \|\| '',\n checkout_url:\n this.packageData?.offering[this.offering ? this.offering : 'Q1']\n .checkout_url,\n })\n }\n\n private dataLayeronMeteredPaywall() {\n window.dataLayer.push({\n event: 'paywall_viewed',\n paywall_location: this.paywall_location \|\| '',\n paywall_subscription_package: this.paywall_subscription_package \|\| '',\n paywall_subscription_id: this.paywall_subscription_id \|\| '',\n paywall_subscription_price: this.paywall_subscription_price \|\| 0,\n paywall_position: this.paywall_position \|\| 0,\n page_type: this.tracker_page_type,\n content_id: this.tracker_content_id,\n content_title: this.tracker_content_title,\n content_categories: this.tracker_content_categories,\n content_type: this.tracker_content_type,\n user_type: this.tracker_user_type \|\| 'R',\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain \|\| 'Kompas.id',\n metered_wall_type: this.tracker_metered_wall_type \|\| 'MP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n paywall_segment: this.segment \|\| '',\n checkout_url:\n this.packageData?.offering[this.offering ? this.offering : 'Q1']\n .checkout_url,\n })\n }\n\n @state() private stateDefaultPaywall = false\n private computedstateDefaultPaywall() {\n this.stateDefaultPaywall = !this.stateDefaultPaywall\n }\n\n /\n Ganti placeholder _key_ di template dengan nilai dari data offering\n * Hanya replace jika placeholder cocok dan datanya valid\n */\n private replacePlaceholdersFromOffering(\n template: string,\n offeringData: OfferingItem\n ): string {\n if (!offeringData) return template\n // regex cari placeholder seperti _harga_coret_, _offering_price_, dst.\n return template.replace(/_([a-zA-Z0-9_]+)_/g, (match, key) => {\n // cek apakah key ada di dalam data\n if (key in offeringData) {\n const value = (offeringData as any)[key]\n\n // jika value number, auto format ke rupiah\n if (typeof value === 'number') {\n return formatRupiah(value)\n }\n\n // jika string, langsung return\n return String(value)\n }\n\n // kalau placeholder tidak dikenal, biarkan apa adanya\n return match\n })\n }\n\n private engageReturners() {\n const textTemplateFormater = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n return !this.stateDefaultPaywall\n ? html`\n <div\n class=\"fixed w-full inset-0 px-4 lg:px-0 h-full flex justify-center items-center bg-black bg-opacity-75 z-[999]\"\n >\n <div\n class=\"bg-white max-w-[460px] w-full justify-center items-center flex flex-col p-6 lg:pb-6 lg:px-6 lg:pt-9 relative rounded\"\n >\n <button\n class=\"font-bold cursor-pointer text-grey-400 flex rounded text-base absolute right-0 top-0 w-6 h-6 lg:w-8 lg:h-8 justify-center items-center mt-4 mr-4\"\n @click=${this.computedstateDefaultPaywall}\n >\n ${unsafeSVG(getFontAwesomeIcon('fa', 'times', 20, 20))}\n </button>\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-auto max-h-40\"\n />\n <div\n class=\"font-lora font-bold text-grey-600 lg:text-2xl text-center pt-6\"\n >\n <div>Halo ${this.user_name},</div>\n <div>${this.packageData?.paywall.messageTitleExpand}</div>\n </div>\n <div\n class=\"pt-3 text-center font-sans text-grey-600 text-sm lg:text-base leading-none\"\n >\n <div>${this.packageData?.paywall.descriptionExpand}</div>\n <div class=\"text-base lg:text-lg text-grey-400 py-3\">\n <s\n >${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].harga_coret \|\| 0\n )}</s\n >\n <span class=\"text-lg lg:text-2xl text-orange-400 font-bold\">\n ${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].offering_price \|\| 0\n )}\n </span>\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration\n ? html`\n <span class=\"text-base lg:text-lg text-grey-600\"\n >${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration}</span\n >\n `\n : nothing}\n </div>\n <div>untuk tahun pertama.</div>\n </div>\n <div class=\"w-full pt-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n class=\"bg-brand-1 whitespace-nowrap rounded md:rounded h-8 lg:h-10 px-4 md:px-5 text-sm lg:text-base text-white font-bold leading-none w-full\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n </div>\n `\n : html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 py-3 justify-center gap-4 px-4 lg:px-0 bottom-0\"\n >\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(textTemplateFormater)}\n </div>\n <div>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n </div>\n `\n }\n\n private passiveFaders() {\n const messageTitleCollapse = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n return html`\n <div class=\"sticky bottom-0 w-full h-full\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 ${this\n .stateDefaultPaywall\n ? 'py-4 lg:py-3'\n : 'py-4 lg:py-8'} gap-4 px-4 bottom-0\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto \"\n >\n ${!this.stateDefaultPaywall\n ? html`\n <div class=\"h-9 w-9 hidden lg:flex\"></div>\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div\n class=\"text-grey-600 font-lora message-formatter order-2\"\n >\n <div\n class=\"text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}\n </div>\n <div class=\"flex flex-col font-sans gap-3 mb-3\">\n ${this.packageData?.paywall.listBenefits\n ? this.packageData?.paywall.listBenefits.map(\n item =>\n html`\n <div\n class=\"flex items-baseline align-baseline\"\n >\n <div\n class=\"bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'circle-check',\n 12,\n 12\n )\n )}\n </div>\n <h6 class=\"text-base ml-1\">${item}</h6>\n </div>\n `\n )\n : nothing}\n </div>\n <div\n class=\"text-grey-600 font-sans text-base self-center text-left message-formatter mb-4 leading-[150%]\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n : html`\n <div class=\"hidden h-9 w-9 lg:flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(messageTitleCollapse)}\n </div>\n <div class=\"hidden lg:flex ml-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n <div class=\"flex lg:hidden ml-4\">\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n `}\n </div>\n </div>\n </div>\n `\n }\n\n private lostButCurious() {\n const messageTitleCollapse = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.messageTitleCollapse \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n return html`\n <div class=\"sticky bottom-0 w-full h-full leading-none\">\n <div\n class=\"flex flex-col lg:flex-row w-full bg-blue-100 ${this\n .stateDefaultPaywall\n ? 'py-4 lg:py-3'\n : 'py-4 lg:py-8'} gap-4 px-4 bottom-0\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto \"\n >\n ${!this.stateDefaultPaywall\n ? html`\n <div class=\"h-9 w-9 hidden lg:flex\"></div>\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div class=\"text-grey-600 font-sans order-2\">\n <div\n class=\"text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-start lg:text-start\"\n >\n <span\n >Halo\n ${this.user_name\n ? this.user_name\n : 'Pembaca Setia Kompas'},</span\n >\n ${this.packageData?.paywall.messageTitleExpand}\n <span>${this.rubrik}</span>\n </div>\n <div\n class=\"text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-2\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"text-base lg:text-lg text-grey-400 mb-1\">\n <s\n >${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].harga_coret \|\| 0\n )}</s\n >\n <span\n class=\"text-lg lg:text-2xl text-orange-400 font-bold\"\n >\n ${formatRupiah(\n this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].offering_price \|\| 0\n )}\n </span>\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration\n ? html`\n <span class=\"text-base lg:text-lg text-grey-600\"\n >${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].duration}</span\n >\n `\n : nothing}\n </div>\n <div class=\"mb-3 lg:mb-4\">untuk tahun pertama.</div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-[112px] lg:w-[202px]\"\n />\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n `\n : html`\n <div class=\"hidden h-9 w-9 lg:flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-formatter font-bold\"\n >\n ${unsafeHTML(messageTitleCollapse)}\n </div>\n <div class=\"hidden lg:flex ml-6\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n <div class=\"flex lg:hidden ml-4\">\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n </div>\n </div>\n <div>\n <button\n @click=\"${this.computedstateDefaultPaywall}\"\n class=\"h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div>\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </button>\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n `}\n </div>\n </div>\n </div>\n `\n }\n\n private unaware() {\n const descriptionExpand = this.replacePlaceholdersFromOffering(\n this.packageData?.paywall.descriptionExpand \|\| '',\n this.packageData?.offering[this.offering ? this.offering : 'Q1'] \|\|\n ({} as OfferingItem)\n )\n\n return html`\n <div class=\"w-full h-full max-w-4xl mx-auto\">\n <div\n 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\"\n >\n <div\n class=\"flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto\"\n >\n <div\n class=\"flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl\"\n >\n <div class=\"text-grey-600 font-lora message-formatter order-2\">\n <div\n class=\"text-xl lg:text-2xl font-bold mb-3 text-start lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}${this\n .user_name\n ? `, ${this.user_name}!`\n : ''}\n </div>\n <div class=\"mb-3 font-sans\">\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div class=\"flex flex-col font-sans gap-3 mb-4\">\n ${this.packageData?.paywall.listBenefits\n ? this.packageData?.paywall.listBenefits.map(\n item =>\n html`\n <div class=\"flex items-baseline align-baseline\">\n <div\n class=\"bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center\"\n >\n ${unsafeSVG(\n getFontAwesomeIcon(\n 'fas',\n 'circle-check',\n 12,\n 12\n )\n )}\n </div>\n <h6 class=\"text-base ml-1\">${item}</h6>\n </div>\n `\n )\n : nothing}\n </div>\n <div class=\"font-sans\">\n <button\n @click=\"${this.redirectToBerlangganan}\"\n 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\"\n >\n ${this.packageData?.offering[\n this.offering ? this.offering : 'Q1'\n ].checkout_text}\n </button>\n </div>\n </div>\n <div\n class=\"flex self-center mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2\"\n >\n <image\n src=\"${this.packageData?.paywall.image}\"\n alt=\"content\"\n class=\"w-full lg:w-[202px] max-h-[116px] lg:max-h-none\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n `\n }\n\n private pickTemplate() {\n switch (this.segment.toLocaleLowerCase()) {\n case 'engaged returners':\n return this.engageReturners()\n case 'passive faders':\n return this.passiveFaders()\n case 'lost but curious':\n return this.lostButCurious()\n case 'unaware':\n return this.unaware()\n default:\n return nothing\n }\n }\n\n render() {\n return !this.isLoading ? this.pickTemplate() : nothing\n }\n}\n"]}