@kompasid/lit-web-components 0.9.26 → 0.9.27

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.
@@ -22,6 +22,7 @@ Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](ht
22
22
  | `tracker_content_id` | `tracker_content_id` | | `string` | `''` | `false` |
23
23
  | `tracker_content_title` | `tracker_content_title` | | `string` | `''` | `false` |
24
24
  | `tracker_content_type` | `tracker_content_type` | | `string` | `''` | `false` |
25
+ | `tracker_content_publisher` | `tracker_content_publisher` | | `string` | `''` | `false` |
25
26
  | `tracker_epaper_edition` | `tracker_epaper_edition` | | `string` | `''` | `false` |
26
27
  | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | | `number` | `0` | `false` |
27
28
  | `tracker_metered_wall_type` | `tracker_metered_wall_type` | | `string` | `''` | `false` |
@@ -29,7 +30,7 @@ Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](ht
29
30
  | `tracker_page_type` | `tracker_page_type` | | `string` | `''` | `false` |
30
31
  | `tracker_subscription_status` | `tracker_subscription_status` | | `string` | `''` | `false` |
31
32
  | `tracker_user_type` | `tracker_user_type` | | `string` | `''` | `false` |
32
- | `type` | `type` | | `"epaper" \| "reguler" \| "audio" \| "custom"` | `'reguler'` | `false` |
33
+ | `type` | `type` | | `"epaper" \| "reguler" \| "audio" \| "proMiningArticle" \| "proMiningOutlook" \| "custom"` | `'reguler'` | `'reguler'` |
33
34
  | `userGuid` | `user-guid` | | `string` | `''` | `false` |
34
35
 
35
36
  ## JSON ([https://cdn-www.kompas.id/web-component/paywall.json](https://cdn-www.kompas.id/web-component/paywall.json))
@@ -38,6 +39,92 @@ Example:
38
39
 
39
40
  ```json
40
41
  {
42
+ "proMiningArticle": {
43
+ "head": "Akses Penuh Kompas Pro dengan Berlangganan",
44
+ "content": [
45
+ "Analisis tajam dari pakar industri",
46
+ "Laporan eksklusif tiap industri",
47
+ "Newsletter premium",
48
+ "Akses Kompas.id Premium",
49
+ "Undangan Kompas Editor's Talks dan Newsroom Visit"
50
+ ],
51
+ "memberships": [
52
+ {
53
+ "title": "Judul Product",
54
+ "percentage": 70,
55
+ "price": 1200000,
56
+ "discountPrice": 0,
57
+ "savingPrice": 0,
58
+ "periode": "Tahun",
59
+ "isHighlight": false,
60
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=_number_product_&autorenewal=1&referrer=",
61
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
62
+ "subscriptionId": "_number_product_",
63
+ "position": 1
64
+ }
65
+ ],
66
+ "swgEnable": false,
67
+ "swgContent": {
68
+ "introductory": {
69
+ "price": "Rp 30.000",
70
+ "description": "untuk 1 bulan pertama",
71
+ "duration": ""
72
+ },
73
+ "default": {
74
+ "price": "",
75
+ "description": "Berlangganan lebih mudah dengan Google",
76
+ "duration": ""
77
+ }
78
+ },
79
+ "cta": {
80
+ "show": true,
81
+ "text": "Keunggulan Kompas Pro",
82
+ "url": "https://www.kompas.id/berlangganan/v2"
83
+ }
84
+ },
85
+ "proMiningOutlook": {
86
+ "head": "Akses Penuh Kompas Pro dengan Berlangganan",
87
+ "content": [
88
+ "Analisis tajam dari pakar industri",
89
+ "Laporan eksklusif tiap industri",
90
+ "Newsletter premium",
91
+ "Akses Kompas.id Premium",
92
+ "Undangan Kompas Editor's Talks dan Newsroom Visit"
93
+ ],
94
+ "memberships": [
95
+ {
96
+ "title": "Judul Product",
97
+ "percentage": 70,
98
+ "price": 1200000,
99
+ "discountPrice": 0,
100
+ "savingPrice": 0,
101
+ "periode": "Tahun",
102
+ "isHighlight": false,
103
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=_number_product_&autorenewal=1&referrer=",
104
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
105
+ "subscriptionId": "_number_product_",
106
+ "position": 1
107
+ }
108
+ ],
109
+ "swgEnable": false,
110
+ "swgContent": {
111
+ "introductory": {
112
+ "price": "Rp 30.000",
113
+ "description": "untuk 1 bulan pertama",
114
+ "duration": ""
115
+ },
116
+ "default": {
117
+ "price": "",
118
+ "description": "Berlangganan lebih mudah dengan Google",
119
+ "duration": ""
120
+ }
121
+ },
122
+ "cta": {
123
+ "show": true,
124
+ "text": "Keunggulan Kompas Pro",
125
+ "url": "https://www.kompas.id/berlangganan/v2"
126
+ }
127
+ },
41
128
  "epaper": {
42
129
  "head": "Akses ePaper Ini dengan Berlangganan",
43
130
  "content": [
@@ -48,14 +135,14 @@ Example:
48
135
  ],
49
136
  "memberships": [
50
137
  {
51
- "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
52
- "percentage": 40,
53
- "price": 360000,
54
- "discountPrice": 600000,
55
- "savingPrice": 30000,
138
+ "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
139
+ "percentage": 70,
140
+ "price": 110000,
141
+ "discountPrice": 360000,
142
+ "savingPrice": 9000,
56
143
  "periode": "Tahun",
57
144
  "isHighlight": true,
58
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
145
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
59
146
  "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
60
147
  "subscriptionId": "9802032",
61
148
  "position": 1
@@ -64,27 +151,32 @@ Example:
64
151
  "title": "Kompas Digital Premium 1 Bulan",
65
152
  "percentage": 0,
66
153
  "discountPrice": 0,
67
- "price": 50000,
154
+ "price": 15000,
68
155
  "periode": "Bulan",
69
156
  "isHighlight": false,
70
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
157
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
71
158
  "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
72
159
  "subscriptionId": "9802035",
73
160
  "position": 2
74
161
  }
75
162
  ],
76
- "swgEnable": false,
163
+ "swgEnable": true,
77
164
  "swgContent": {
78
165
  "introductory": {
79
- "price": "Rp 50.000",
80
- "description": "Gratis Kaus Kompas",
81
- "duration": "/ Bulan"
166
+ "price": "Rp 30.000",
167
+ "description": "untuk 1 bulan pertama",
168
+ "duration": ""
82
169
  },
83
170
  "default": {
84
171
  "price": "",
85
172
  "description": "Berlangganan lebih mudah dengan Google",
86
173
  "duration": ""
87
174
  }
175
+ },
176
+ "cta": {
177
+ "show": true,
178
+ "text": "Lihat Paket Lainnya",
179
+ "url": "https://www.kompas.id/berlangganan/v2"
88
180
  }
89
181
  },
90
182
  "reguler": {
@@ -97,14 +189,14 @@ Example:
97
189
  ],
98
190
  "memberships": [
99
191
  {
100
- "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
101
- "percentage": 40,
102
- "price": 360000,
103
- "discountPrice": 600000,
104
- "savingPrice": 30000,
192
+ "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
193
+ "percentage": 70,
194
+ "price": 110000,
195
+ "discountPrice": 360000,
196
+ "savingPrice": 9000,
105
197
  "periode": "Tahun",
106
198
  "isHighlight": true,
107
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
199
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
108
200
  "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
109
201
  "subscriptionId": "9802032",
110
202
  "position": 1
@@ -113,27 +205,32 @@ Example:
113
205
  "title": "Kompas Digital Premium 1 Bulan",
114
206
  "percentage": 0,
115
207
  "discountPrice": 0,
116
- "price": 50000,
208
+ "price": 15000,
117
209
  "periode": "Bulan",
118
210
  "isHighlight": false,
119
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
211
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
120
212
  "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
121
213
  "subscriptionId": "9802035",
122
214
  "position": 2
123
215
  }
124
216
  ],
125
- "swgEnable": false,
217
+ "swgEnable": true,
126
218
  "swgContent": {
127
219
  "introductory": {
128
- "price": "Rp 50.000",
129
- "description": "Gratis Kaus Kompas",
130
- "duration": "/ Bulan"
220
+ "price": "Rp 30.000",
221
+ "description": "untuk 1 bulan pertama",
222
+ "duration": ""
131
223
  },
132
224
  "default": {
133
225
  "price": "",
134
226
  "description": "Berlangganan lebih mudah dengan Google",
135
227
  "duration": ""
136
228
  }
229
+ },
230
+ "cta": {
231
+ "show": true,
232
+ "text": "Lihat Paket Lainnya",
233
+ "url": "https://www.kompas.id/berlangganan/v2"
137
234
  }
138
235
  },
139
236
  "audio": {
@@ -146,14 +243,14 @@ Example:
146
243
  ],
147
244
  "memberships": [
148
245
  {
149
- "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
150
- "percentage": 40,
151
- "price": 360000,
152
- "discountPrice": 600000,
153
- "savingPrice": 30000,
246
+ "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
247
+ "percentage": 70,
248
+ "price": 110000,
249
+ "discountPrice": 360000,
250
+ "savingPrice": 9000,
154
251
  "periode": "Tahun",
155
252
  "isHighlight": true,
156
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
253
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
157
254
  "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
158
255
  "subscriptionId": "9802032",
159
256
  "position": 1
@@ -162,27 +259,32 @@ Example:
162
259
  "title": "Kompas Digital Premium 1 Bulan",
163
260
  "percentage": 0,
164
261
  "discountPrice": 0,
165
- "price": 50000,
262
+ "price": 15000,
166
263
  "periode": "Bulan",
167
264
  "isHighlight": false,
168
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
265
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
169
266
  "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
170
267
  "subscriptionId": "9802035",
171
268
  "position": 2
172
269
  }
173
270
  ],
174
- "swgEnable": false,
271
+ "swgEnable": true,
175
272
  "swgContent": {
176
273
  "introductory": {
177
- "price": "Rp 50.000",
178
- "description": "Gratis Kaus Kompas",
179
- "duration": "/ Bulan"
274
+ "price": "Rp 30.000",
275
+ "description": "Berlangganan dengan Harga Pertama",
276
+ "duration": ""
180
277
  },
181
278
  "default": {
182
279
  "price": "",
183
280
  "description": "Berlangganan lebih mudah dengan Google",
184
281
  "duration": ""
185
282
  }
283
+ },
284
+ "cta": {
285
+ "show": true,
286
+ "text": "Lihat Paket Lainnya",
287
+ "url": "https://www.kompas.id/berlangganan/v2"
186
288
  }
187
289
  },
188
290
  "custom": {
@@ -195,14 +297,14 @@ Example:
195
297
  ],
196
298
  "memberships": [
197
299
  {
198
- "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
199
- "percentage": 40,
200
- "price": 360000,
201
- "discountPrice": 600000,
202
- "savingPrice": 30000,
300
+ "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
301
+ "percentage": 70,
302
+ "price": 110000,
303
+ "discountPrice": 360000,
304
+ "savingPrice": 9000,
203
305
  "periode": "Tahun",
204
306
  "isHighlight": true,
205
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
307
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
206
308
  "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
207
309
  "subscriptionId": "9802032",
208
310
  "position": 1
@@ -211,10 +313,10 @@ Example:
211
313
  "title": "Kompas Digital Premium 1 Bulan",
212
314
  "percentage": 0,
213
315
  "discountPrice": 0,
214
- "price": 50000,
316
+ "price": 15000,
215
317
  "periode": "Bulan",
216
318
  "isHighlight": false,
217
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
319
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
218
320
  "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
219
321
  "subscriptionId": "9802035",
220
322
  "position": 2
@@ -228,15 +330,20 @@ Example:
228
330
  "swgEnable": true,
229
331
  "swgContent": {
230
332
  "introductory": {
231
- "price": "Rp 50.000",
232
- "description": "Gratis Kaus Kompas",
233
- "duration": "/ Bulan"
333
+ "price": "Rp 30.000",
334
+ "description": "untuk 1 bulan pertama",
335
+ "duration": ""
234
336
  },
235
337
  "default": {
236
338
  "price": "",
237
339
  "description": "Berlangganan lebih mudah dengan Google",
238
340
  "duration": ""
239
341
  }
342
+ },
343
+ "cta": {
344
+ "show": true,
345
+ "text": "Lihat Paket Lainnya",
346
+ "url": "https://www.kompas.id/berlangganan/v2"
240
347
  }
241
348
  }
242
349
  }
@@ -679,7 +679,7 @@ export class KompasIdPaywallBody extends LitElement {
679
679
  ${unsafeSVG(getFontAwesomeIcon('fas', 'check', 12, 12))}
680
680
  </div>
681
681
  <h6
682
- class="text-xs md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
682
+ class="text-sm md:text-base ml-0.5 md:ml-1 ${buttonTextColorClass}"
683
683
  >
684
684
  ${item}
685
685
  </h6>
@@ -736,25 +736,35 @@ export class KompasIdPaywallBody extends LitElement {
736
736
  private regulerRegistrationSection() {
737
737
  const textColorClass = this.isDark ? 'text-blue-300' : 'text-blue-600'
738
738
  const buttonTextColorClass = this.isDark ? 'text-white' : 'text-grey-600'
739
+ const isPro =
740
+ this.type === 'proMiningArticle' || this.type === 'proMiningOutlook'
739
741
 
740
742
  return html`
741
- <div class="flex flex-col items-center justify-center">
742
- <div>
743
- <button
744
- @click=${() => redirectToRegister('hard_paywall')}
745
- class="text-sm md:text-base font-bold underline ${textColorClass}"
746
- >
747
- Daftar
748
- </button>
749
- <span class="${buttonTextColorClass}"
750
- >untuk kuota artikel gratis</span
751
- >
752
- </div>
743
+ <div
744
+ class="flex flex-col items-center justify-center text-sm md:text-base"
745
+ >
746
+ ${!isPro
747
+ ? html`
748
+ <div>
749
+ <button
750
+ @click=${() => redirectToRegister('hard_paywall')}
751
+ class="font-bold underline ${textColorClass}"
752
+ >
753
+ Daftar
754
+ </button>
755
+ <span class="${buttonTextColorClass}"
756
+ >untuk kuota artikel gratis</span
757
+ >
758
+ </div>
759
+ `
760
+ : nothing}
753
761
  <div>
754
- <span class="${buttonTextColorClass}">atau</span>
762
+ ${!isPro
763
+ ? html` <span class="${buttonTextColorClass}">atau</span>`
764
+ : nothing}
755
765
  <button
756
766
  @click=${() => redirectToLogin({ loc: 'hard_paywall' })}
757
- class="text-sm md:text-base font-bold underline ${textColorClass}"
767
+ class="font-bold underline ${textColorClass}"
758
768
  >
759
769
  Masuk
760
770
  </button>
@@ -671,6 +671,11 @@ video {
671
671
  margin-right: auto;
672
672
  }
673
673
 
674
+ .my-1 {
675
+ margin-top: 0.25rem;
676
+ margin-bottom: 0.25rem;
677
+ }
678
+
674
679
  .my-4 {
675
680
  margin-top: 1rem;
676
681
  margin-bottom: 1rem;
@@ -850,6 +855,10 @@ video {
850
855
  height: 4rem;
851
856
  }
852
857
 
858
+ .h-2 {
859
+ height: 0.5rem;
860
+ }
861
+
853
862
  .h-20 {
854
863
  height: 5rem;
855
864
  }
@@ -943,6 +952,10 @@ video {
943
952
  width: 4rem;
944
953
  }
945
954
 
955
+ .w-2 {
956
+ width: 0.5rem;
957
+ }
958
+
946
959
  .w-2\/3 {
947
960
  width: 66.666667%;
948
961
  }
@@ -1417,6 +1430,10 @@ video {
1417
1430
  border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));
1418
1431
  }
1419
1432
 
1433
+ .bg-\[\#00000066\] {
1434
+ background-color: #00000066;
1435
+ }
1436
+
1420
1437
  .bg-\[\#2C2C2C\] {
1421
1438
  --tw-bg-opacity: 1;
1422
1439
  background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
@@ -1708,6 +1725,10 @@ video {
1708
1725
  padding-left: 0.25rem;
1709
1726
  }
1710
1727
 
1728
+ .pl-14 {
1729
+ padding-left: 3.5rem;
1730
+ }
1731
+
1711
1732
  .pl-2 {
1712
1733
  padding-left: 0.5rem;
1713
1734
  }
@@ -1744,6 +1765,10 @@ video {
1744
1765
  padding-top: 0.125rem;
1745
1766
  }
1746
1767
 
1768
+ .pt-1 {
1769
+ padding-top: 0.25rem;
1770
+ }
1771
+
1747
1772
  .pt-10 {
1748
1773
  padding-top: 2.5rem;
1749
1774
  }
@@ -678,6 +678,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
678
678
  margin-right: auto;
679
679
  }
680
680
 
681
+ .my-1 {
682
+ margin-top: 0.25rem;
683
+ margin-bottom: 0.25rem;
684
+ }
685
+
681
686
  .my-4 {
682
687
  margin-top: 1rem;
683
688
  margin-bottom: 1rem;
@@ -857,6 +862,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
857
862
  height: 4rem;
858
863
  }
859
864
 
865
+ .h-2 {
866
+ height: 0.5rem;
867
+ }
868
+
860
869
  .h-20 {
861
870
  height: 5rem;
862
871
  }
@@ -950,6 +959,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
950
959
  width: 4rem;
951
960
  }
952
961
 
962
+ .w-2 {
963
+ width: 0.5rem;
964
+ }
965
+
953
966
  .w-2\\/3 {
954
967
  width: 66.666667%;
955
968
  }
@@ -1428,6 +1441,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1428
1441
  border-color: rgb(255 204 0 / var(--tw-border-opacity, 1));
1429
1442
  }
1430
1443
 
1444
+ .bg-\\[\\#00000066\\] {
1445
+ background-color: #00000066;
1446
+ }
1447
+
1431
1448
  .bg-\\[\\#2C2C2C\\] {
1432
1449
  --tw-bg-opacity: 1;
1433
1450
  background-color: rgb(44 44 44 / var(--tw-bg-opacity, 1));
@@ -1719,6 +1736,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1719
1736
  padding-left: 0.25rem;
1720
1737
  }
1721
1738
 
1739
+ .pl-14 {
1740
+ padding-left: 3.5rem;
1741
+ }
1742
+
1722
1743
  .pl-2 {
1723
1744
  padding-left: 0.5rem;
1724
1745
  }
@@ -1755,6 +1776,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
1755
1776
  padding-top: 0.125rem;
1756
1777
  }
1757
1778
 
1779
+ .pt-1 {
1780
+ padding-top: 0.25rem;
1781
+ }
1782
+
1758
1783
  .pt-10 {
1759
1784
  padding-top: 2.5rem;
1760
1785
  }