@kompasid/lit-web-components 0.9.29 → 0.9.30

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 (15) hide show
  1. package/demo/index.html +2 -1
  2. package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.d.ts +4 -0
  3. package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js +232 -14
  4. package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js.map +1 -1
  5. package/dist/src/components/kompasid-paywall/KompasPaywall.js +1 -1
  6. package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -1
  7. package/dist/tailwind/tailwind.js +37 -0
  8. package/dist/tailwind/tailwind.js.map +1 -1
  9. package/dist/tsconfig.tsbuildinfo +1 -1
  10. package/package.json +1 -1
  11. package/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.ts +266 -14
  12. package/src/components/kompasid-metered-paywall-personalize/readme.md +1 -0
  13. package/src/components/kompasid-paywall/KompasPaywall.ts +1 -1
  14. package/tailwind/tailwind.css +37 -0
  15. package/tailwind/tailwind.ts +37 -0
package/demo/index.html CHANGED
@@ -282,9 +282,10 @@
282
282
  >
283
283
  </kompasid-metered-paywall>
284
284
  <kompasid-metered-paywall-personalize
285
- segment="Passive Faders"
285
+ segment="Unaware"
286
286
  offering="Q3"
287
287
  user_name="Dummy User"
288
+ rubrik="Politik &amp; Hukum"
288
289
  .paywall_location=${paywallLocation}
289
290
  .paywall_subscription_id=${paywallSubscriptionId}
290
291
  .paywall_subscription_price=${paywallSubscriptionPrice}
package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.d.ts CHANGED
@@ -12,6 +12,7 @@ export declare class KompasMeteredPaywallPersonalize extends LitElement {
12
12
  * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
13
13
  * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
14
14
  * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
15
+ * prop rubrik untuk menerika rubrikasi dari implementor
15
16
  * prop paywall_location = The location where user encounter the paywall
16
17
  * prop paywall_subscription_package = The name of the subscription package viewed by user
17
18
  * prop paywall_subscription_id = The ID of the subscription package viewed by user
@@ -33,6 +34,7 @@ export declare class KompasMeteredPaywallPersonalize extends LitElement {
33
34
  segment: string;
34
35
  offering: string;
35
36
  user_name: string;
37
+ rubrik: string;
36
38
  paywall_location: string;
37
39
  paywall_subscription_package: string;
38
40
  paywall_subscription_id: string;
@@ -62,6 +64,8 @@ export declare class KompasMeteredPaywallPersonalize extends LitElement {
62
64
  private replacePlaceholdersFromOffering;
63
65
  private engageReturners;
64
66
  private passiveFaders;
67
+ private lostButCurious;
68
+ private unaware;
65
69
  private pickTemplate;
66
70
  render(): import("lit-html").TemplateResult<1> | typeof nothing;
67
71
  }
package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js CHANGED
@@ -19,6 +19,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
19
19
  * prop segment untuk menentukan paywall template dari segmen apa yang di pakai, bila tidak ada yang cocok jangan render paywall
20
20
  * prop offering untuk handle offering yang akan di berikan, bila tidak di isi maka akan default menjadi Q1
21
21
  * prop user_name untuk menerima nama user yang akan di tampilkan paywall specific
22
+ * prop rubrik untuk menerika rubrikasi dari implementor
22
23
  * prop paywall_location = The location where user encounter the paywall
23
24
  * prop paywall_subscription_package = The name of the subscription package viewed by user
24
25
  * prop paywall_subscription_id = The ID of the subscription package viewed by user
@@ -40,6 +41,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
40
41
  this.segment = '';
41
42
  this.offering = '';
42
43
  this.user_name = '';
44
+ this.rubrik = '';
43
45
  this.paywall_location = '';
44
46
  this.paywall_subscription_package = '';
45
47
  this.paywall_subscription_id = '';
@@ -64,7 +66,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
64
66
  }
65
67
  async getMeteredPaywallData() {
66
68
  try {
67
- const getSegment = this.segment.toLocaleLowerCase().replace(' ', '_');
69
+ const getSegment = this.segment.toLocaleLowerCase().replace(/ /g, '_');
68
70
  const response = await fetch(`https://cdn-www.kompas.id/web-component/metered-paywall-personalize/${getSegment}.json`);
69
71
  const json = await response.json();
70
72
  this.packageData = json;
@@ -140,7 +142,6 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
140
142
  }
141
143
  computedstateDefaultPaywall() {
142
144
  this.stateDefaultPaywall = !this.stateDefaultPaywall;
143
- this.requestUpdate();
144
145
  }
145
146
  /**
146
147
  * Ganti placeholder _key_ di template dengan nilai dari data offering
@@ -232,7 +233,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
232
233
  class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 justify-center gap-4 px-4 lg:px-0 bottom-0"
233
234
  >
234
235
  <div
235
- class="text-grey-600 text-base self-center text-left message-collapse-engage-returners font-bold"
236
+ class="text-grey-600 text-base self-center text-left message-formatter font-bold"
236
237
  >
237
238
  ${unsafeHTML(textTemplateFormater)}
238
239
  </div>
@@ -257,7 +258,10 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
257
258
  return html `
258
259
  <div class="sticky bottom-0 w-full h-full">
259
260
  <div
260
- class="flex flex-col lg:flex-row w-full bg-blue-100 py-4 gap-4 px-4 bottom-0"
261
+ class="flex flex-col lg:flex-row w-full bg-blue-100 ${this
262
+ .stateDefaultPaywall
263
+ ? 'py-4 lg:py-3'
264
+ : 'py-4 lg:py-8'} gap-4 px-4 bottom-0"
261
265
  >
262
266
  <div
263
267
  class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto "
@@ -269,7 +273,7 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
269
273
  class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
270
274
  >
271
275
  <div
272
- class="text-grey-600 font-lora message-collapse-engage-returners order-2"
276
+ class="text-grey-600 font-lora message-formatter order-2"
273
277
  >
274
278
  <div
275
279
  class="text-xl lg:text-2xl font-bold mb-3 text-center lg:text-start"
@@ -293,11 +297,11 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
293
297
  : nothing}
294
298
  </div>
295
299
  <div
296
- class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-collapse-engage-returners mb-4"
300
+ class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-4"
297
301
  >
298
302
  ${unsafeHTML(descriptionExpand)}
299
303
  </div>
300
- <div>
304
+ <div class="font-sans">
301
305
  <button
302
306
  @click="${this.redirectToBerlangganan}"
303
307
  class="bg-brand-1 flex whitespace-nowrap items-center justify-center rounded md:rounded h-10 px-4 md:px-5 text-base text-white font-bold leading-[18px] w-full lg:w-auto"
@@ -328,10 +332,10 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
328
332
  </div>
329
333
  `
330
334
  : html `
331
- <div class="h-9 w-9 flex"></div>
335
+ <div class="hidden h-9 w-9 lg:flex"></div>
332
336
  <div class="flex justify-between">
333
337
  <div
334
- class="text-grey-600 text-base self-center text-left message-collapse-engage-returners font-bold"
338
+ class="text-grey-600 text-base self-center text-left message-formatter font-bold"
335
339
  >
336
340
  ${unsafeHTML(messageTitleCollapse)}
337
341
  </div>
@@ -376,12 +380,219 @@ let KompasMeteredPaywallPersonalize = class KompasMeteredPaywallPersonalize exte
376
380
  </div>
377
381
  `;
378
382
  }
383
+ lostButCurious() {
384
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
385
+ const messageTitleCollapse = this.replacePlaceholdersFromOffering(((_a = this.packageData) === null || _a === void 0 ? void 0 : _a.paywall.messageTitleCollapse) || '', ((_b = this.packageData) === null || _b === void 0 ? void 0 : _b.offering[this.offering ? this.offering : 'Q1']) ||
386
+ {});
387
+ const descriptionExpand = this.replacePlaceholdersFromOffering(((_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.descriptionExpand) || '', ((_d = this.packageData) === null || _d === void 0 ? void 0 : _d.offering[this.offering ? this.offering : 'Q1']) ||
388
+ {});
389
+ return html `
390
+ <div class="sticky bottom-0 w-full h-full leading-none">
391
+ <div
392
+ class="flex flex-col lg:flex-row w-full bg-blue-100 ${this
393
+ .stateDefaultPaywall
394
+ ? 'py-4 lg:py-3'
395
+ : 'py-4 lg:py-8'} gap-4 px-4 bottom-0"
396
+ >
397
+ <div
398
+ class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto "
399
+ >
400
+ ${!this.stateDefaultPaywall
401
+ ? html `
402
+ <div class="h-9 w-9 hidden lg:flex"></div>
403
+ <div
404
+ class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
405
+ >
406
+ <div class="text-grey-600 font-sans order-2">
407
+ <div
408
+ class="text-xl lg:text-2xl font-lora font-bold mb-3 lg:mb-2 text-center lg:text-start"
409
+ >
410
+ <span
411
+ >Halo
412
+ ${this.user_name
413
+ ? this.user_name
414
+ : 'Pembaca Setia Kompas'},</span
415
+ >
416
+ ${(_e = this.packageData) === null || _e === void 0 ? void 0 : _e.paywall.messageTitleExpand}
417
+ <span>${this.rubrik}</span>
418
+ </div>
419
+ <div
420
+ class="text-grey-600 font-sans text-sm lg:text-base self-center text-left message-formatter mb-2"
421
+ >
422
+ ${unsafeHTML(descriptionExpand)}
423
+ </div>
424
+ <div class="text-base lg:text-lg text-grey-400 mb-1">
425
+ <s
426
+ >${formatRupiah(((_f = this.packageData) === null || _f === void 0 ? void 0 : _f.offering[this.offering ? this.offering : 'Q1'].harga_coret) || 0)}</s
427
+ >
428
+ <span
429
+ class="text-lg lg:text-2xl text-orange-400 font-bold"
430
+ >
431
+ ${formatRupiah(((_g = this.packageData) === null || _g === void 0 ? void 0 : _g.offering[this.offering ? this.offering : 'Q1'].offering_price) || 0)}
432
+ </span>
433
+ ${((_h = this.packageData) === null || _h === void 0 ? void 0 : _h.offering[this.offering ? this.offering : 'Q1'].duration)
434
+ ? html `
435
+ <span class="text-base lg:text-lg text-grey-600"
436
+ >${(_j = this.packageData) === null || _j === void 0 ? void 0 : _j.offering[this.offering ? this.offering : 'Q1'].duration}</span
437
+ >
438
+ `
439
+ : nothing}
440
+ </div>
441
+ <div class="mb-3 lg:mb-4">untuk tahun pertama.</div>
442
+ <div class="font-sans">
443
+ <button
444
+ @click="${this.redirectToBerlangganan}"
445
+ 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"
446
+ >
447
+ ${(_k = this.packageData) === null || _k === void 0 ? void 0 : _k.offering[this.offering ? this.offering : 'Q1'].checkout_text}
448
+ </button>
449
+ </div>
450
+ </div>
451
+ <div
452
+ class="flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
453
+ >
454
+ <image
455
+ src="${(_l = this.packageData) === null || _l === void 0 ? void 0 : _l.paywall.image}"
456
+ alt="content"
457
+ class="w-[112px] lg:w-[202px]"
458
+ />
459
+ </div>
460
+ </div>
461
+ <div>
462
+ <button
463
+ @click="${this.computedstateDefaultPaywall}"
464
+ class="h-9 w-9 absolute lg:static flex items-center justify-center text-blue-500 rounded bg-blue-200 right-4 top-4"
465
+ >
466
+ <div>
467
+ ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}
468
+ </div>
469
+ </button>
470
+ </div>
471
+ `
472
+ : html `
473
+ <div class="hidden h-9 w-9 lg:flex"></div>
474
+ <div class="flex justify-between">
475
+ <div
476
+ class="text-grey-600 text-base self-center text-left message-formatter font-bold"
477
+ >
478
+ ${unsafeHTML(messageTitleCollapse)}
479
+ </div>
480
+ <div class="hidden lg:flex ml-6">
481
+ <button
482
+ @click="${this.redirectToBerlangganan}"
483
+ 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"
484
+ >
485
+ ${(_m = this.packageData) === null || _m === void 0 ? void 0 : _m.offering[this.offering ? this.offering : 'Q1'].checkout_text}
486
+ </button>
487
+ </div>
488
+ <div class="flex lg:hidden ml-4">
489
+ <button
490
+ @click="${this.computedstateDefaultPaywall}"
491
+ class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
492
+ >
493
+ <div>
494
+ ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
495
+ </div>
496
+ </button>
497
+ </div>
498
+ </div>
499
+ <div>
500
+ <button
501
+ @click="${this.computedstateDefaultPaywall}"
502
+ class="h-9 w-9 hidden lg:flex items-center justify-center text-blue-500 rounded bg-blue-200"
503
+ >
504
+ <div>
505
+ ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}
506
+ </div>
507
+ </button>
508
+ <button
509
+ @click="${this.redirectToBerlangganan}"
510
+ 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"
511
+ >
512
+ ${(_o = this.packageData) === null || _o === void 0 ? void 0 : _o.offering[this.offering ? this.offering : 'Q1'].checkout_text}
513
+ </button>
514
+ </div>
515
+ `}
516
+ </div>
517
+ </div>
518
+ </div>
519
+ `;
520
+ }
521
+ unaware() {
522
+ var _a, _b, _c, _d, _e, _f, _g;
523
+ const descriptionExpand = this.replacePlaceholdersFromOffering(((_a = this.packageData) === null || _a === void 0 ? void 0 : _a.paywall.descriptionExpand) || '', ((_b = this.packageData) === null || _b === void 0 ? void 0 : _b.offering[this.offering ? this.offering : 'Q1']) ||
524
+ {});
525
+ return html `
526
+ <div class="w-full h-full max-w-4xl mx-auto">
527
+ <div
528
+ 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"
529
+ >
530
+ <div
531
+ class="flex flex-col lg:flex-row w-full justify-between max-w-[1200px] gap-4 mx-auto"
532
+ >
533
+ <div
534
+ class="flex flex-col lg:flex-row justify-center items-center lg:items-start lg:justify-between w-full max-w-5xl"
535
+ >
536
+ <div class="text-grey-600 font-lora message-formatter order-2">
537
+ <div
538
+ class="text-xl lg:text-2xl font-bold mb-2 text-center lg:text-start"
539
+ >
540
+ ${(_c = this.packageData) === null || _c === void 0 ? void 0 : _c.paywall.messageTitleExpand}${this
541
+ .user_name
542
+ ? `, ${this.user_name}!`
543
+ : ''}
544
+ </div>
545
+ <div class="mb-2 font-sans">
546
+ ${unsafeHTML(descriptionExpand)}
547
+ </div>
548
+ <div class="flex flex-col font-sans gap-3 mb-4">
549
+ ${((_d = this.packageData) === null || _d === void 0 ? void 0 : _d.paywall.listBenefits)
550
+ ? (_e = this.packageData) === null || _e === void 0 ? void 0 : _e.paywall.listBenefits.map(item => html `
551
+ <div class="flex items-baseline align-baseline">
552
+ <div
553
+ class="bg-white text-green-500 h-3 w-3 mr-1 rounded-full flex justify-center items-center"
554
+ >
555
+ ${unsafeSVG(getFontAwesomeIcon('fas', 'circle-check', 12, 12))}
556
+ </div>
557
+ <h6 class="text-base ml-1">${item}</h6>
558
+ </div>
559
+ `)
560
+ : nothing}
561
+ </div>
562
+ <div class="font-sans">
563
+ <button
564
+ @click="${this.redirectToBerlangganan}"
565
+ 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"
566
+ >
567
+ ${(_f = this.packageData) === null || _f === void 0 ? void 0 : _f.offering[this.offering ? this.offering : 'Q1'].checkout_text}
568
+ </button>
569
+ </div>
570
+ </div>
571
+ <div
572
+ class="flex self-center mt-10 mb-3 lg:mb-0 lg:mt-0 lg:ml-6 order-1 lg:order-2"
573
+ >
574
+ <image
575
+ src="${(_g = this.packageData) === null || _g === void 0 ? void 0 : _g.paywall.image}"
576
+ alt="content"
577
+ class="w-[112px] lg:w-[202px]"
578
+ />
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ `;
585
+ }
379
586
  pickTemplate() {
380
- switch (this.segment) {
381
- case 'Engaged Returners':
587
+ switch (this.segment.toLocaleLowerCase()) {
588
+ case 'engaged returners':
382
589
  return this.engageReturners();
383
- case 'Passive Faders':
590
+ case 'passive faders':
384
591
  return this.passiveFaders();
592
+ case 'lost but curious':
593
+ return this.lostButCurious();
594
+ case 'unaware':
595
+ return this.unaware();
385
596
  default:
386
597
  return nothing;
387
598
  }
@@ -404,15 +615,16 @@ KompasMeteredPaywallPersonalize.styles = [
404
615
  width: 100%;
405
616
  }
406
617
 
407
- .message-collapse-engage-returners span {
618
+ .message-formatter span {
408
619
  color: #ff7a00;
409
620
  font-weight: 700;
410
621
  text-wrap: nowrap;
411
622
  }
412
623
 
413
- .message-collapse-engage-returners s {
624
+ .message-formatter s {
414
625
  color: #999999;
415
626
  text-wrap: nowrap;
627
+ font-weight: 400;
416
628
  }
417
629
 
418
630
  .font-lora {
@@ -455,6 +667,9 @@ __decorate([
455
667
  __decorate([
456
668
  property({ type: String })
457
669
  ], KompasMeteredPaywallPersonalize.prototype, "user_name", void 0);
670
+ __decorate([
671
+ property({ type: String })
672
+ ], KompasMeteredPaywallPersonalize.prototype, "rubrik", void 0);
458
673
  __decorate([
459
674
  property({ type: String })
460
675
  ], KompasMeteredPaywallPersonalize.prototype, "paywall_location", void 0);
@@ -500,6 +715,9 @@ __decorate([
500
715
  __decorate([
501
716
  property({ type: Number })
502
717
  ], KompasMeteredPaywallPersonalize.prototype, "tracker_metered_wall_balance", void 0);
718
+ __decorate([
719
+ state()
720
+ ], KompasMeteredPaywallPersonalize.prototype, "stateDefaultPaywall", void 0);
503
721
  KompasMeteredPaywallPersonalize = __decorate([
504
722
  customElement('kompasid-metered-paywall-personalize')
505
723
  ], KompasMeteredPaywallPersonalize);
package/dist/src/components/kompasid-metered-paywall-personalize/KompasMeteredPaywallPersonalize.js.map CHANGED
@@ -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'\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-collapse-engage-returners span {\n color: #ff7a00;\n font-weight: 700;\n text-wrap: nowrap;\n }\n\n .message-collapse-engage-returners s {\n color: #999999;\n text-wrap: nowrap;\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 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 }) 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 }\n\n async getMeteredPaywallData() {\n try {\n const getSegment = this.segment.toLocaleLowerCase().replace(' ', '_')\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 private stateDefaultPaywall = false\n private computedstateDefaultPaywall() {\n this.stateDefaultPaywall = !this.stateDefaultPaywall\n this.requestUpdate()\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-[248px] lg:w-[364px]\"\n />\n <div\n class=\"font-lora font-bold text-grey-600 lg:text-2xl text-center\"\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-4 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-collapse-engage-returners 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 py-4 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-collapse-engage-returners 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-sm lg:text-base self-center text-left message-collapse-engage-returners mb-4\"\n >\n ${unsafeHTML(descriptionExpand)}\n </div>\n <div>\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=\"h-9 w-9 flex\"></div>\n <div class=\"flex justify-between\">\n <div\n class=\"text-grey-600 text-base self-center text-left message-collapse-engage-returners 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 pickTemplate() {\n switch (this.segment) {\n case 'Engaged Returners':\n return this.engageReturners()\n case 'Passive Faders':\n return this.passiveFaders()\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":"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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'\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 }\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 }\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-[248px] lg:w-[364px]\"\n />\n <div\n class=\"font-lora font-bold text-grey-600 lg:text-2xl text-center\"\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-4 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-sm lg:text-base self-center text-left message-formatter mb-4\"\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-center 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-2 text-center lg:text-start\"\n >\n ${this.packageData?.paywall.messageTitleExpand}${this\n .user_name\n ? `, ${this.user_name}!`\n : ''}\n </div>\n <div class=\"mb-2 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 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 </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"]}
package/dist/src/components/kompasid-paywall/KompasPaywall.js CHANGED
@@ -228,11 +228,11 @@ let KompasPaywall = class KompasPaywall extends LitElement {
228
228
  this.selectorTypePaywall = (type) => {
229
229
  switch (type) {
230
230
  case 'epaper':
231
- case 'proMiningArticle':
232
231
  case 'proMiningOutlook':
233
232
  return this.renderEpaperPaywallSection();
234
233
  case 'audio':
235
234
  return this.renderAudioPaywallSection();
235
+ case 'proMiningArticle':
236
236
  case 'reguler':
237
237
  return this.renderRegularPaywallSection();
238
238
  default: