@kompasid/lit-web-components 0.9.42 → 0.9.44

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 (20) hide show
  1. package/demo/paywall.html +17 -20
  2. package/dist/src/components/kompasid-paywall/KompasPaywall.js +11 -11
  3. package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -1
  4. package/dist/src/components/kompasid-paywall/types.d.ts +4 -0
  5. package/dist/src/components/kompasid-paywall/types.js.map +1 -1
  6. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +2 -2
  7. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +188 -160
  8. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
  9. package/dist/tailwind/tailwind.js +84 -89
  10. package/dist/tailwind/tailwind.js.map +1 -1
  11. package/dist/tsconfig.tsbuildinfo +1 -1
  12. package/package.json +1 -1
  13. package/src/components/kompasid-paywall/KompasPaywall.ts +11 -11
  14. package/src/components/kompasid-paywall/readme.md +74 -352
  15. package/src/components/kompasid-paywall/types.ts +4 -0
  16. package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +211 -200
  17. package/src/components/kompasid-paywall-body/readme.md +3 -0
  18. package/tailwind/tailwind.css +84 -89
  19. package/tailwind/tailwind.ts +84 -89
  20. package/tailwind.config.js +1 -1
package/src/components/kompasid-paywall/KompasPaywall.ts CHANGED
@@ -109,6 +109,7 @@ export class KompasPaywall extends LitElement {
109
109
  mockResult: PaywallProduct = {
110
110
  informations: {
111
111
  title: '',
112
+ excerpt: '',
112
113
  description: [],
113
114
  register: {
114
115
  img: 'https://www.kompas.id/img/backgrounds/ilustrasi-banner-registration.png',
@@ -279,7 +280,7 @@ export class KompasPaywall extends LitElement {
279
280
  async getPaywallData() {
280
281
  try {
281
282
  const [paywallResponse, contextualResponse] = await Promise.all([
282
- fetch('https://cdn-www.kompas.id/web-component/paywall.json'),
283
+ fetch('https://cdn-www.kompas.id/web-component/hard-paywall.json'),
283
284
  fetch(
284
285
  'https://cdn-www.kompas.id/web-component/contextual_paywall.json'
285
286
  ),
@@ -305,10 +306,13 @@ export class KompasPaywall extends LitElement {
305
306
  ...this.mockResult.informations,
306
307
  title: json[defaultType][typeContextual]
307
308
  ? json[defaultType][typeContextual].head
308
- : json[defaultType].head,
309
+ : '',
310
+ excerpt: json[defaultType][typeContextual]
311
+ ? json[defaultType][typeContextual].description
312
+ : '',
309
313
  description: json[defaultType][typeContextual]
310
314
  ? json[defaultType][typeContextual].content
311
- : json[defaultType].content,
315
+ : '',
312
316
  cta: json[defaultType].cta,
313
317
  typeVariant: json[defaultType][typeContextual]
314
318
  ? json[defaultType][typeContextual].variant
@@ -318,7 +322,7 @@ export class KompasPaywall extends LitElement {
318
322
  ...this.mockResult.packages,
319
323
  memberships: json[defaultType][typeContextual]
320
324
  ? json[defaultType][typeContextual].memberships
321
- : json[defaultType].memberships,
325
+ : [],
322
326
  swgEnable: json[defaultType].swgEnable,
323
327
  freeTrial: json[defaultType].freeTrial,
324
328
  swgContent: json[defaultType].swgContent,
@@ -452,7 +456,7 @@ export class KompasPaywall extends LitElement {
452
456
  <div
453
457
  class="flex flex-col ${this.theme === 'dark'
454
458
  ? 'bg-dark-5'
455
- : 'bg-white'} items-center justify-center mx-4 md:mx-0"
459
+ : 'bg-white'} items-center justify-center px-4 md:px-0"
456
460
  >
457
461
  <div class="flex flex-col w-full max-w-screen-md my-5">
458
462
  <kompasid-paywall-information-header
@@ -503,7 +507,7 @@ export class KompasPaywall extends LitElement {
503
507
  <div
504
508
  class="flex flex-col ${this.theme === 'dark'
505
509
  ? 'bg-dark-5'
506
- : 'bg-white'} items-center justify-center mx-4 md:mx-0"
510
+ : 'bg-white'} items-center justify-center px-4 md:px-0"
507
511
  >
508
512
  <div class="flex flex-col w-full max-w-screen-md my-5">
509
513
  <kompasid-paywall-body
@@ -602,11 +606,7 @@ export class KompasPaywall extends LitElement {
602
606
  return html`
603
607
  <div>
604
608
  ${this.transitionBox()}
605
- <div
606
- class="flex flex-col ${this.theme === 'dark'
607
- ? 'bg-dark-5'
608
- : 'bg-white'} items-center justify-center mx-4 md:mx-0"
609
- >
609
+ <div class="flex flex-col">
610
610
  <div class="flex flex-col w-full max-w-screen-md my-5">
611
611
  <kompasid-paywall-body
612
612
  tracker_content_type=${this.tracker_content_type}
package/src/components/kompasid-paywall/readme.md CHANGED
@@ -38,359 +38,81 @@ Terdapat skenario contextual paywall jika beberapa props tracker di isi seperti
38
38
  | `userGuid` | `user-guid` | | `string` | `''` | `false` |
39
39
 
40
40
  ## JSON ([https://cdn-www.kompas.id/web-component/paywall.json](https://cdn-www.kompas.id/web-component/paywall.json))
41
-
42
- Example:
43
-
44
41
  ```json
45
- {
46
- "proMiningArticle": {
47
- "head": "Akses Penuh Kompas Pro dengan Berlangganan",
48
- "content": [
49
- "Analisis tajam dari pakar industri",
50
- "Indonesia Mining Outlook",
51
- "Kompas Mining Connect",
52
- "Newsletter eksklusif",
53
- "Akses penuh Kompas.id Premium"
54
- ],
55
- "memberships": [
56
- {
57
- "title": "Kompas Pro Mining 1 Tahun",
58
- "percentage": 0,
59
- "price": 1500000,
60
- "discountPrice": 0,
61
- "savingPrice": 0,
62
- "periode": "Tahun",
63
- "isHighlight": false,
64
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891033&autorenewal=1&referrer=",
65
- "package": "Cash-B2C-Pro-Mining-12",
66
- "subscriptionId": "9891033",
67
- "position": 1
68
- }
69
- ],
70
- "swgEnable": false,
71
- "swgContent": {
72
- "introductory": {
73
- "price": "Rp 30.000",
74
- "description": "untuk 1 bulan pertama",
75
- "duration": ""
76
- },
77
- "default": {
78
- "price": "",
79
- "description": "Berlangganan lebih mudah dengan Google",
80
- "duration": ""
81
- }
82
- },
83
- "cta": {
84
- "show": true,
85
- "text": "Keunggulan Kompas Pro",
86
- "url": "https://pro.kompas.id/"
87
- }
88
- },
89
- "proMiningOutlook": {
90
- "head": "Akses Penuh Kompas Pro dengan Berlangganan",
91
- "content": [
92
- "Analisis tajam dari pakar industri",
93
- "Indonesia Mining Outlook",
94
- "Kompas Mining Connect",
95
- "Newsletter eksklusif",
96
- "Akses penuh Kompas.id Premium"
97
- ],
98
- "memberships": [
99
- {
100
- "title": "Kompas Pro Mining 1 Tahun",
101
- "percentage": 0,
102
- "price": 1500000,
103
- "discountPrice": 0,
104
- "savingPrice": 0,
105
- "periode": "Tahun",
106
- "isHighlight": false,
107
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891033&autorenewal=1&referrer=",
108
- "package": "Cash-B2C-Pro-Mining-12",
109
- "subscriptionId": "9891033",
110
- "position": 1
111
- }
112
- ],
113
- "swgEnable": false,
114
- "swgContent": {
115
- "introductory": {
116
- "price": "Rp 30.000",
117
- "description": "untuk 1 bulan pertama",
118
- "duration": ""
119
- },
120
- "default": {
121
- "price": "",
122
- "description": "Berlangganan lebih mudah dengan Google",
123
- "duration": ""
124
- }
125
- },
126
- "cta": {
127
- "show": true,
128
- "text": "Keunggulan Kompas Pro",
129
- "url": "https://pro.kompas.id/"
130
- }
131
- },
132
- "epaper": {
133
- "head": "Buat Ramadhan Lebih Bermakna, Akses ePaper Ini dengan Berlangganan",
134
- "content": [
135
- "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
136
- "Akses ePaper hingga 30 edisi terakhir",
137
- "Undangan prioritas webinar eksklusif bersama redaksi",
138
- "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
139
- ],
140
- "memberships": [
141
- {
142
- "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
143
- "percentage": 70,
144
- "price": 110000,
145
- "discountPrice": 360000,
146
- "savingPrice": 9000,
147
- "periode": "Tahun",
148
- "isHighlight": true,
149
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891038&autorenewal=1&referrer=",
150
- "package": "cash-b2c-kdp-regular-12-1000002",
151
- "subscriptionId": "9891038",
152
- "position": 1
153
- },
154
- {
155
- "title": "Kompas Digital Premium 1 Bulan",
156
- "percentage": 0,
157
- "discountPrice": 0,
158
- "price": 20000,
159
- "periode": "Bulan",
160
- "isHighlight": false,
161
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891075&autorenewal=1&referrer=",
162
- "package": "cash-b2c-kdp-regular-1-1000042",
163
- "subscriptionId": "9891075",
164
- "position": 2
165
- }
166
- ],
167
- "swgEnable": true,
168
- "swgContent": {
169
- "introductory": {
170
- "price": "Rp 30.000",
171
- "description": "untuk 1 bulan pertama",
172
- "duration": ""
173
- },
174
- "default": {
175
- "price": "",
176
- "description": "Berlangganan lebih mudah dengan Google",
177
- "duration": ""
178
- }
179
- },
180
- "cta": {
181
- "show": true,
182
- "text": "Lihat Paket Lainnya",
183
- "url": "https://www.kompas.id/berlangganan/v2"
184
- }
185
- },
186
- "reguler": {
187
- "typeA": {
188
- "head": "Tingkatkan Literasi di Bulan Suci Dengan Artikel Penuh Inspirasi Type A",
189
- "content": [
190
- "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
191
- "Akses ePaper hingga 30 edisi terakhir",
192
- "Undangan prioritas webinar eksklusif bersama redaksi",
193
- "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
194
- ],
195
- "memberships": [
196
- {
197
- "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
198
- "percentage": 70,
199
- "price": 110000,
200
- "discountPrice": 360000,
201
- "savingPrice": 9000,
202
- "periode": "Tahun",
203
- "isHighlight": true,
204
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891038&autorenewal=1&referrer=",
205
- "package": "cash-b2c-kdp-regular-12-1000002",
206
- "subscriptionId": "9891038",
207
- "position": 1
208
- },
209
- {
210
- "title": "Kompas Digital Premium 1 Bulan",
211
- "percentage": 0,
212
- "discountPrice": 0,
213
- "price": 20000,
214
- "periode": "Bulan",
215
- "isHighlight": false,
216
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891075&autorenewal=1&referrer=",
217
- "package": "cash-b2c-kdp-regular-1-1000042",
218
- "subscriptionId": "9891075",
219
- "position": 2
220
- }
221
- ],
222
- "variant": "A"
223
- },
224
- "typeB": {
225
- "head": "Tingkatkan Literasi di Bulan Suci Dengan Artikel Penuh Inspirasi Type B",
226
- "content": [
227
- "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
228
- "Akses ePaper hingga 30 edisi terakhir",
229
- "Undangan prioritas webinar eksklusif bersama redaksi",
230
- "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
231
- ],
232
- "memberships": [
233
- {
234
- "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
235
- "percentage": 70,
236
- "price": 110000,
237
- "discountPrice": 360000,
238
- "savingPrice": 9000,
239
- "periode": "Tahun",
240
- "isHighlight": true,
241
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891038&autorenewal=1&referrer=",
242
- "package": "cash-b2c-kdp-regular-12-1000002",
243
- "subscriptionId": "9891038",
244
- "position": 1
245
- },
246
- {
247
- "title": "Kompas Digital Premium 1 Bulan",
248
- "percentage": 0,
249
- "discountPrice": 0,
250
- "price": 20000,
251
- "periode": "Bulan",
252
- "isHighlight": false,
253
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891075&autorenewal=1&referrer=",
254
- "package": "cash-b2c-kdp-regular-1-1000042",
255
- "subscriptionId": "9891075",
256
- "position": 2
257
- }
258
- ],
259
- "variant": "B"
260
- },
261
- "swgEnable": true,
262
- "swgContent": {
263
- "introductory": {
264
- "price": "Rp 30.000",
265
- "description": "untuk 1 bulan pertama",
266
- "duration": ""
267
- },
268
- "default": {
269
- "price": "",
270
- "description": "Berlangganan lebih mudah dengan Google",
271
- "duration": ""
272
- }
273
- },
274
- "cta": {
275
- "show": true,
276
- "text": "Lihat Paket Lainnya",
277
- "url": "https://www.kompas.id/berlangganan/v2"
278
- }
279
- },
280
- "audio": {
281
- "head": "Buat Ramadhan Lebih Bermakna, Akses Audio Berita dan Keuntungan Lainnya Tanpa Jeda",
282
- "content": [
283
- "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
284
- "Akses ePaper hingga 30 edisi terakhir",
285
- "Undangan prioritas webinar eksklusif bersama redaksi",
286
- "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
287
- ],
288
- "memberships": [
289
- {
290
- "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
291
- "percentage": 70,
292
- "price": 110000,
293
- "discountPrice": 360000,
294
- "savingPrice": 9000,
295
- "periode": "Tahun",
296
- "isHighlight": true,
297
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891038&autorenewal=1&referrer=",
298
- "package": "cash-b2c-kdp-regular-12-1000002",
299
- "subscriptionId": "9891038",
300
- "position": 1
301
- },
302
- {
303
- "title": "Kompas Digital Premium 1 Bulan",
304
- "percentage": 0,
305
- "discountPrice": 0,
306
- "price": 20000,
307
- "periode": "Bulan",
308
- "isHighlight": false,
309
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891075&autorenewal=1&referrer=",
310
- "package": "cash-b2c-kdp-regular-1-1000042",
311
- "subscriptionId": "9891075",
312
- "position": 2
313
- }
314
- ],
315
- "swgEnable": true,
316
- "swgContent": {
317
- "introductory": {
318
- "price": "Rp 30.000",
319
- "description": "Berlangganan dengan Harga Pertama",
320
- "duration": ""
321
- },
322
- "default": {
323
- "price": "",
324
- "description": "Berlangganan lebih mudah dengan Google",
325
- "duration": ""
326
- }
327
- },
328
- "cta": {
329
- "show": true,
330
- "text": "Lihat Paket Lainnya",
331
- "url": "https://www.kompas.id/berlangganan/v2"
332
- }
333
- },
334
- "custom": {
335
- "head": "ini title custom",
336
- "content": [
337
- "Akses seluruh konten Kompas.id web dan aplikasi",
338
- "ePaper hingga 30 edisi terakhir",
339
- "Artikel Riset dan Opini eksklusif dari para ahli",
340
- "Buku digital tiap bulannya di aplikasi"
341
- ],
342
- "memberships": [
343
- {
344
- "title": "Kompas Digital Premium 12 Bulan (Hemat 70%)",
345
- "percentage": 70,
346
- "price": 110000,
347
- "discountPrice": 360000,
348
- "savingPrice": 9000,
349
- "periode": "Tahun",
350
- "isHighlight": true,
351
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802032&autorenewal=1&referrer=",
352
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
353
- "subscriptionId": "9802032",
354
- "position": 1
355
- },
356
- {
357
- "title": "Kompas Digital Premium 1 Bulan",
358
- "percentage": 0,
359
- "discountPrice": 0,
360
- "price": 15000,
361
- "periode": "Bulan",
362
- "isHighlight": false,
363
- "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9802035&autorenewal=1&referrer=",
364
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
365
- "subscriptionId": "9802035",
366
- "position": 2
367
- }
368
- ],
369
- "freeTrial": {
370
- "packageText": "untuk 3 hari pertama",
371
- "desktopText": "Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR dengan ponsel atau tablet untuk mengunduh aplikasi.",
372
- "mobileText": "Dapatkan akses gratis selama 3 hari ke konten dan fitur premium Kompas.id di aplikasi."
373
- },
374
- "swgEnable": true,
375
- "swgContent": {
376
- "introductory": {
377
- "price": "Rp 30.000",
378
- "description": "untuk 1 bulan pertama",
379
- "duration": ""
380
- },
381
- "default": {
382
- "price": "",
383
- "description": "Berlangganan lebih mudah dengan Google",
384
- "duration": ""
385
- }
386
- },
387
- "cta": {
388
- "show": true,
389
- "text": "Lihat Paket Lainnya",
390
- "url": "https://www.kompas.id/berlangganan/v2"
391
- }
392
- }
393
- }
42
+ "samplePaywall": {
43
+ "typeA": {
44
+ "variant": "A",
45
+ "head": "Akses Penuh Kompas Professional dengan Berlangganan",
46
+ "description": "Dapatkan laporan mendalam dan analisis tajam untuk para professional.",
47
+ "content": [
48
+ "Analisis tajam dari pakar industri",
49
+ "Indonesia Mining Outlook",
50
+ "Kompas Mining Connect",
51
+ "Newsletter eksklusif",
52
+ "Akses penuh Kompas.id Premium"
53
+ ],
54
+ "memberships": [
55
+ {
56
+ "title": "Kompas Pro Mining 1 Tahun",
57
+ "saveLabel": "",
58
+ "price": 1500000,
59
+ "priceSlice": 0,
60
+ "periode": "Tahun",
61
+ "isHighlight": true,
62
+ "isButtonSolid": true,
63
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891033&autorenewal=1&referrer=",
64
+ "package": "Cash-B2C-Pro-Mining-12",
65
+ "subscriptionId": "9891033",
66
+ "position": 1
67
+ }
68
+ ]
69
+ },
70
+ "typeB": {
71
+ "variant": "B",
72
+ "head": "Akses Penuh Kompas Professional dengan Berlangganan",
73
+ "description": "Dapatkan laporan mendalam dan analisis tajam untuk para professional.",
74
+ "content": [
75
+ "Analisis tajam dari pakar industri",
76
+ "Indonesia Mining Outlook",
77
+ "Kompas Mining Connect",
78
+ "Newsletter eksklusif",
79
+ "Akses penuh Kompas.id Premium"
80
+ ],
81
+ "memberships": [
82
+ {
83
+ "title": "Kompas Pro Mining 1 Tahun",
84
+ "saveLabel": "",
85
+ "price": 1500000,
86
+ "priceSlice": 0,
87
+ "periode": "Tahun",
88
+ "isHighlight": true,
89
+ "isButtonSolid": true,
90
+ "url": "https://checkoutv2.kompas.id/v2/kdp?productId=9891033&autorenewal=1&referrer=",
91
+ "package": "Cash-B2C-Pro-Mining-12",
92
+ "subscriptionId": "9891033",
93
+ "position": 1
94
+ }
95
+ ]
96
+ },
97
+ "swgEnable": false,
98
+ "swgContent": {
99
+ "introductory": {
100
+ "price": "Rp 30.000",
101
+ "description": "untuk 1 bulan pertama",
102
+ "duration": ""
103
+ },
104
+ "default": {
105
+ "price": "",
106
+ "description": "Berlangganan lebih mudah dengan Google",
107
+ "duration": ""
108
+ }
109
+ },
110
+ "cta": {
111
+ "show": true,
112
+ "text": "Keunggulan Kompas Professional",
113
+ "url": "https://pro.kompas.id/"
114
+ }
115
+ }
394
116
  ```
395
117
 
396
118
  ## JSON ([https://cdn-www.kompas.id/web-component/contextual_paywall.json](https://cdn-www.kompas.id/web-component/contextual_paywall.json))
package/src/components/kompasid-paywall/types.ts CHANGED
@@ -2,10 +2,13 @@ export interface Product {
2
2
  title: string
3
3
  percentage: number
4
4
  price: number
5
+ priceSlice: number
5
6
  discountPrice: number
6
7
  savingPrice: number
8
+ saveLabel: string
7
9
  periode: string
8
10
  isHighlight: boolean
11
+ isButtonSolid: boolean
9
12
  url: string
10
13
  package: string
11
14
  subscriptionId: string
@@ -70,6 +73,7 @@ export interface ctaPaywall {
70
73
  export interface PaywallProduct {
71
74
  informations: {
72
75
  title: string
76
+ excerpt: string
73
77
  description: Array<string>
74
78
  register: Registration
75
79
  meterred: Metered