@kompasid/lit-web-components 0.8.15 → 0.8.17

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 (36) hide show
  1. package/demo/index.html +4 -4
  2. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js +19 -15
  3. package/dist/src/components/kompasid-header-notification/KompasHeaderNotification.js.map +1 -1
  4. package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js +19 -12
  5. package/dist/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.js.map +1 -1
  6. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +3 -0
  7. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +29 -9
  8. package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
  9. package/dist/src/utils/api/getLoginGuest.d.ts +1 -0
  10. package/dist/src/utils/api/getLoginGuest.js +18 -0
  11. package/dist/src/utils/api/getLoginGuest.js.map +1 -0
  12. package/dist/src/utils/customFetch.d.ts +21 -0
  13. package/dist/src/utils/customFetch.js +42 -0
  14. package/dist/src/utils/customFetch.js.map +1 -0
  15. package/dist/src/utils/ellipsisText.d.ts +8 -0
  16. package/dist/src/utils/ellipsisText.js +19 -0
  17. package/dist/src/utils/ellipsisText.js.map +1 -0
  18. package/dist/src/utils/getCookies.d.ts +1 -0
  19. package/dist/src/utils/getCookies.js +9 -0
  20. package/dist/src/utils/getCookies.js.map +1 -0
  21. package/dist/tailwind/tailwind.js +143 -133
  22. package/dist/tailwind/tailwind.js.map +1 -1
  23. package/dist/tsconfig.tsbuildinfo +1 -1
  24. package/package.json +1 -1
  25. package/src/components/kompasid-header-notification/KompasHeaderNotification.ts +19 -18
  26. package/src/components/kompasid-header-notification/readme.md +1 -1
  27. package/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts +19 -12
  28. package/src/components/kompasid-paywall/readme.md +231 -182
  29. package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +30 -9
  30. package/src/utils/api/getLoginGuest.ts +21 -0
  31. package/src/utils/customFetch.ts +89 -0
  32. package/src/utils/ellipsisText.ts +26 -0
  33. package/src/utils/getCookies.ts +8 -0
  34. package/tailwind/tailwind.css +80 -20
  35. package/tailwind/tailwind.ts +143 -133
  36. package/web-dev-server.config.mjs +0 -1
package/src/components/kompasid-metered-wall-register/KompasMeteredWallRegister.ts CHANGED
@@ -8,6 +8,7 @@ import {
8
8
  meteredRegisterResponse,
9
9
  meteredRegisterContent,
10
10
  } from './types.js'
11
+ import { ellipsisText } from '../../utils/ellipsisText.js'
11
12
 
12
13
  @customElement('kompasid-metered-wall-register')
13
14
  export class KompasMeteredWallRegister extends LitElement {
@@ -17,6 +18,10 @@ export class KompasMeteredWallRegister extends LitElement {
17
18
  font-family: 'PT Sans', sans-serif;
18
19
  }
19
20
 
21
+ .font-lora {
22
+ font-family: 'Lora', 'Georgia', 'serif';
23
+ }
24
+
20
25
  .body {
21
26
  position: sticky;
22
27
  top: 0;
@@ -24,8 +29,10 @@ export class KompasMeteredWallRegister extends LitElement {
24
29
  width: 100%;
25
30
  }
26
31
 
27
- .banner-content {
28
- gap: 55px;
32
+ @media (min-width: 768px) {
33
+ .md\:max-w-\[737px\] {
34
+ max-width: 737px;
35
+ }
29
36
  }
30
37
  `,
31
38
  TWStyles,
@@ -168,17 +175,17 @@ export class KompasMeteredWallRegister extends LitElement {
168
175
  <div class="flex flex-col space-y-4">
169
176
  <div class="flex justify-between items-center h-full">
170
177
  <div class="w-9 h-9 hidden lg:block"></div>
171
- <div class="banner-content flex flex-row items-center">
178
+ <div class="flex flex-row items-center gap-6">
172
179
  <div
173
- class="text-base md:text-lg font-lora"
174
- .innerHTML=${this.setTemplate('title')}
180
+ class="text-base md:text-lg font-lora md:max-w-[737px] text-grey-600"
181
+ .innerHTML=${ellipsisText(this.setTemplate('title'), 76)}
175
182
  ></div>
176
183
  <div class="hidden md:block">${this.registerButtonTemplate()}</div>
177
184
  </div>
178
185
  <div>
179
186
  <button
180
187
  @click="${this.triggerExpandBanner}"
181
- class="h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200"
188
+ class="h-9 w-9 flex ml-auto items-center justify-center text-blue-500 rounded bg-blue-200"
182
189
  >
183
190
  <div
184
191
  class="icon icon-blue-600 ${this.isExpandBanner
@@ -198,13 +205,13 @@ export class KompasMeteredWallRegister extends LitElement {
198
205
  private expandedBannerContent() {
199
206
  return html`
200
207
  <div
201
- class="flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8"
208
+ class="flex flex-col-reverse justify-between md:flex-row gap-4 md:gap-8 text-grey-600"
202
209
  >
203
210
  <div
204
211
  class="flex flex-col justify-evenly md:text-left md:w-5/12 gap-4 ml-auto"
205
212
  >
206
213
  <p
207
- class="text-lg md:text-2xl font-lora"
214
+ class="text-2xl md:text-2xl font-lora"
208
215
  .innerHTML=${this.setTemplate('title', 'expand')}
209
216
  ></p>
210
217
  <p
@@ -223,7 +230,7 @@ export class KompasMeteredWallRegister extends LitElement {
223
230
  </div>
224
231
  <button
225
232
  @click="${this.triggerExpandBanner}"
226
- class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
233
+ class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200 ml-auto"
227
234
  >
228
235
  <div
229
236
  class="icon icon-blue-600 ${this.isExpandBanner
@@ -246,15 +253,15 @@ export class KompasMeteredWallRegister extends LitElement {
246
253
  ${!this.textTemplate.expand.ctaUrl
247
254
  ? html`<button
248
255
  @click=${this.redirectToRegister}
249
- class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base"
256
+ class="bg-green-500 p-3 w-full whitespace-nowrap rounded-md font-bold text-grey-100 text-sm md:text-base"
250
257
  >
251
258
  Daftar Akun
252
259
  </button>`
253
260
  : html`<button
254
261
  @click=${this.redirectToCTAUrl}
255
- class="bg-green-500 p-1.5 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto"
262
+ class="bg-green-500 p-3 w-full whitespace-nowrap rounded-md font-bold text-grey-100 px-5 text-sm md:text-base md:w-auto md:mr-6"
256
263
  >
257
- ${this.textTemplate.expand.ctaText}
264
+ ${ellipsisText(this.textTemplate.expand.ctaText, 24)}
258
265
  </button>`}
259
266
  </div>
260
267
  `
package/src/components/kompasid-paywall/readme.md CHANGED
@@ -1,196 +1,244 @@
1
1
  # kompasid-paywall
2
2
 
3
- Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](https://epaper.kompas.id) dan [kompas.id](https://kompas.id). Penggunaan komponen ini dapat dibedakan berdasarkan type productnya ( epaper atau reguler(kompas.id)).
3
+ Ini adalah redesign komponen _paywall_ yang digunakan pada [epaper.kompas.id](https://epaper.kompas.id) dan [kompas.id](https://kompas.id). Penggunaan komponen ini dapat dibedakan berdasarkan type productnya ( epaper atau reguler(kompas.id)).
4
4
 
5
5
  ## Properties
6
6
 
7
- | Property | Attribute | Description | Type | Default |
8
- | ------------------------------ | ------------------------------ | ----------- | ----------------------- | ----------- |
9
- | `countdownArticle` | `countdown-article` | | `number` | `0` |
10
- | `isLogin` | `is-login` | | `boolean` | `false` |
11
- | `isWithHeader` | `is-with-header` | | `boolean` | `false` |
12
- | `paywall_location` | `paywall_location` | | `string` | `''` |
13
- | `paywall_position` | `paywall_position` | | `number` | `0` |
14
- | `paywall_subscription_id` | `paywall_subscription_id` | | `number` | `0` |
15
- | `paywall_subscription_package` | `paywall_subscription_package` | | `string` | `''` |
16
- | `paywall_subscription_price` | `paywall_subscription_price` | | `number` | `0` |
17
- | `subscriptionStatus` | `subscription-status` | | `string` | `''` |
18
- | `swgEnable` | `swg-enable` | | `boolean` | `false` |
19
- | `textHeader` | `text-header` | | `string` | `''` |
20
- | `theme` | `theme` | | `string` | `''` |
21
- | `tracker_content_categories` | `tracker_content_categories` | | `string` | `''` |
22
- | `tracker_content_id` | `tracker_content_id` | | `string` | `''` |
23
- | `tracker_content_title` | `tracker_content_title` | | `string` | `''` |
24
- | `tracker_content_type` | `tracker_content_type` | | `string` | `''` |
25
- | `tracker_epaper_edition` | `tracker_epaper_edition` | | `string` | `''` |
26
- | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | | `number` | `0` |
27
- | `tracker_metered_wall_type` | `tracker_metered_wall_type` | | `string` | `''` |
28
- | `tracker_page_domain` | `tracker_page_domain` | | `string` | `''` |
29
- | `tracker_page_type` | `tracker_page_type` | | `string` | `''` |
30
- | `tracker_subscription_status` | `tracker_subscription_status` | | `string` | `''` |
31
- | `tracker_user_type` | `tracker_user_type` | | `string` | `''` |
32
- | `type` | `type` | | `"epaper" \| "reguler" \| "audio" \| "custom"` | `'reguler'` | `'reguler'` |
33
- | `userGuid` | `user-guid` | | `string` | `''` |
34
-
7
+ | Property | Attribute | Description | Type | Default | Required |
8
+ | ------------------------------ | ------------------------------ | ----------- | ---------------------------------------------- | ----------- | -------- |
9
+ | `countdownArticle` | `countdown-article` | | `number` | `0` | `false` |
10
+ | `isLogin` | `is-login` | | `boolean` | `false` | `false` |
11
+ | `isWithHeader` | `is-with-header` | | `boolean` | `false` | `false` |
12
+ | `paywall_location` | `paywall_location` | | `string` | `''` | `false` |
13
+ | `paywall_position` | `paywall_position` | | `number` | `0` | `false` |
14
+ | `paywall_subscription_id` | `paywall_subscription_id` | | `number` | `0` | `false` |
15
+ | `paywall_subscription_package` | `paywall_subscription_package` | | `string` | `''` | `false` |
16
+ | `paywall_subscription_price` | `paywall_subscription_price` | | `number` | `0` | `false` |
17
+ | `subscriptionStatus` | `subscription-status` | | `string` | `''` | `false` |
18
+ | `swgEnable` | `swg-enable` | | `boolean` | `false` | `false` |
19
+ | `textHeader` | `text-header` | | `string` | `''` | `false` |
20
+ | `theme` | `theme` | | `string` | `''` | `false` |
21
+ | `tracker_content_categories` | `tracker_content_categories` | | `string` | `''` | `false` |
22
+ | `tracker_content_id` | `tracker_content_id` | | `string` | `''` | `false` |
23
+ | `tracker_content_title` | `tracker_content_title` | | `string` | `''` | `false` |
24
+ | `tracker_content_type` | `tracker_content_type` | | `string` | `''` | `false` |
25
+ | `tracker_epaper_edition` | `tracker_epaper_edition` | | `string` | `''` | `false` |
26
+ | `tracker_metered_wall_balance` | `tracker_metered_wall_balance` | | `number` | `0` | `false` |
27
+ | `tracker_metered_wall_type` | `tracker_metered_wall_type` | | `string` | `''` | `false` |
28
+ | `tracker_page_domain` | `tracker_page_domain` | | `string` | `''` | `false` |
29
+ | `tracker_page_type` | `tracker_page_type` | | `string` | `''` | `false` |
30
+ | `tracker_subscription_status` | `tracker_subscription_status` | | `string` | `''` | `false` |
31
+ | `tracker_user_type` | `tracker_user_type` | | `string` | `''` | `false` |
32
+ | `type` | `type` | | `"epaper" \| "reguler" \| "audio" \| "custom"` | `'reguler'` | `false` |
33
+ | `userGuid` | `user-guid` | | `string` | `''` | `false` |
35
34
 
36
35
  ## JSON ([https://cdn-www.kompas.id/web-component/paywall.json](https://cdn-www.kompas.id/web-component/paywall.json))
36
+
37
37
  Example:
38
38
 
39
39
  ```json
40
40
  {
41
- "epaper": {
42
- "head": "Akses ePaper Ini dengan Berlangganan",
43
- "content": [
44
- "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
45
- "Akses ePaper hingga 30 edisi terakhir",
46
- "Undangan prioritas webinar eksklusif bersama redaksi",
47
- "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
48
- ],
49
- "memberships": [
50
- {
51
- "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
52
- "percentage": 40,
53
- "price": 360000,
54
- "discountPrice": 600000,
55
- "savingPrice": 30000,
56
- "periode": "Tahun",
57
- "isHighlight": true,
58
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
59
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
60
- "subscriptionId": "9802032",
61
- "position": 1
62
- },
63
- {
64
- "title": "Kompas Digital Premium 1 Bulan",
65
- "percentage": 0,
66
- "discountPrice": 0,
67
- "price": 50000,
68
- "periode": "Bulan",
69
- "isHighlight": false,
70
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
71
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
72
- "subscriptionId": "9802035",
73
- "position": 2
74
- }
75
- ],
76
- "swgEnable": true
77
- },
78
- "reguler": {
79
- "head": "Baca Lengkap Seluruh Artikel dengan Berlangganan",
80
- "content": [
81
- "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
82
- "Akses ePaper hingga 30 edisi terakhir",
83
- "Undangan prioritas webinar eksklusif bersama redaksi",
84
- "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
85
- ],
86
- "memberships": [
87
- {
88
- "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
89
- "percentage": 40,
90
- "price": 360000,
91
- "discountPrice": 600000,
92
- "savingPrice": 30000,
93
- "periode": "Tahun",
94
- "isHighlight": true,
95
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
96
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
97
- "subscriptionId": "9802032",
98
- "position": 1
99
- },
100
- {
101
- "title": "Kompas Digital Premium 1 Bulan",
102
- "percentage": 0,
103
- "discountPrice": 0,
104
- "price": 50000,
105
- "periode": "Bulan",
106
- "isHighlight": false,
107
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
108
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
109
- "subscriptionId": "9802035",
110
- "position": 2
111
- }
112
- ],
113
- "swgEnable": true
114
- },
115
- "audio": {
116
- "head": "Akses Audio Berita dan Keuntungan Lainnya dengan Berlangganan",
117
- "content": [
118
- "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
119
- "Akses ePaper hingga 30 edisi terakhir",
120
- "Undangan prioritas webinar eksklusif bersama redaksi",
121
- "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
122
- ],
123
- "memberships": [
124
- {
125
- "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
126
- "percentage": 40,
127
- "price": 360000,
128
- "discountPrice": 600000,
129
- "savingPrice": 30000,
130
- "periode": "Tahun",
131
- "isHighlight": true,
132
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
133
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
134
- "subscriptionId": "9802032",
135
- "position": 1
136
- },
137
- {
138
- "title": "Kompas Digital Premium 1 Bulan",
139
- "percentage": 0,
140
- "discountPrice": 0,
141
- "price": 50000,
142
- "periode": "Bulan",
143
- "isHighlight": false,
144
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
145
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
146
- "subscriptionId": "9802035",
147
- "position": 2
148
- }
149
- ],
150
- "swgEnable": false
41
+ "epaper": {
42
+ "head": "Akses ePaper Ini dengan Berlangganan",
43
+ "content": [
44
+ "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
45
+ "Akses ePaper hingga 30 edisi terakhir",
46
+ "Undangan prioritas webinar eksklusif bersama redaksi",
47
+ "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
48
+ ],
49
+ "memberships": [
50
+ {
51
+ "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
52
+ "percentage": 40,
53
+ "price": 360000,
54
+ "discountPrice": 600000,
55
+ "savingPrice": 30000,
56
+ "periode": "Tahun",
57
+ "isHighlight": true,
58
+ "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
59
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
60
+ "subscriptionId": "9802032",
61
+ "position": 1
62
+ },
63
+ {
64
+ "title": "Kompas Digital Premium 1 Bulan",
65
+ "percentage": 0,
66
+ "discountPrice": 0,
67
+ "price": 50000,
68
+ "periode": "Bulan",
69
+ "isHighlight": false,
70
+ "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
71
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
72
+ "subscriptionId": "9802035",
73
+ "position": 2
74
+ }
75
+ ],
76
+ "swgEnable": false,
77
+ "swgContent": {
78
+ "introductory": {
79
+ "price": "Rp 50.000",
80
+ "description": "Gratis Kaus Kompas",
81
+ "duration": "/ Bulan"
82
+ },
83
+ "default": {
84
+ "price": "",
85
+ "description": "Berlangganan lebih mudah dengan Google",
86
+ "duration": ""
87
+ }
88
+ }
89
+ },
90
+ "reguler": {
91
+ "head": "Baca Lengkap Seluruh Artikel dengan Berlangganan",
92
+ "content": [
93
+ "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
94
+ "Akses ePaper hingga 30 edisi terakhir",
95
+ "Undangan prioritas webinar eksklusif bersama redaksi",
96
+ "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
97
+ ],
98
+ "memberships": [
99
+ {
100
+ "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
101
+ "percentage": 40,
102
+ "price": 360000,
103
+ "discountPrice": 600000,
104
+ "savingPrice": 30000,
105
+ "periode": "Tahun",
106
+ "isHighlight": true,
107
+ "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
108
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
109
+ "subscriptionId": "9802032",
110
+ "position": 1
111
+ },
112
+ {
113
+ "title": "Kompas Digital Premium 1 Bulan",
114
+ "percentage": 0,
115
+ "discountPrice": 0,
116
+ "price": 50000,
117
+ "periode": "Bulan",
118
+ "isHighlight": false,
119
+ "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
120
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
121
+ "subscriptionId": "9802035",
122
+ "position": 2
123
+ }
124
+ ],
125
+ "swgEnable": false,
126
+ "swgContent": {
127
+ "introductory": {
128
+ "price": "Rp 50.000",
129
+ "description": "Gratis Kaus Kompas",
130
+ "duration": "/ Bulan"
131
+ },
132
+ "default": {
133
+ "price": "",
134
+ "description": "Berlangganan lebih mudah dengan Google",
135
+ "duration": ""
136
+ }
137
+ }
138
+ },
139
+ "audio": {
140
+ "head": "Akses Audio Berita dan Keuntungan Lainnya dengan Berlangganan",
141
+ "content": [
142
+ "10+ buku digital dan 5+ Political Insight eksklusif di aplikasi",
143
+ "Akses ePaper hingga 30 edisi terakhir",
144
+ "Undangan prioritas webinar eksklusif bersama redaksi",
145
+ "Klaim voucer digital Hotel Santika dan mitra Kompas.id lainnya"
146
+ ],
147
+ "memberships": [
148
+ {
149
+ "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
150
+ "percentage": 40,
151
+ "price": 360000,
152
+ "discountPrice": 600000,
153
+ "savingPrice": 30000,
154
+ "periode": "Tahun",
155
+ "isHighlight": true,
156
+ "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
157
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
158
+ "subscriptionId": "9802032",
159
+ "position": 1
160
+ },
161
+ {
162
+ "title": "Kompas Digital Premium 1 Bulan",
163
+ "percentage": 0,
164
+ "discountPrice": 0,
165
+ "price": 50000,
166
+ "periode": "Bulan",
167
+ "isHighlight": false,
168
+ "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
169
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
170
+ "subscriptionId": "9802035",
171
+ "position": 2
172
+ }
173
+ ],
174
+ "swgEnable": false,
175
+ "swgContent": {
176
+ "introductory": {
177
+ "price": "Rp 50.000",
178
+ "description": "Gratis Kaus Kompas",
179
+ "duration": "/ Bulan"
180
+ },
181
+ "default": {
182
+ "price": "",
183
+ "description": "Berlangganan lebih mudah dengan Google",
184
+ "duration": ""
185
+ }
186
+ }
187
+ },
188
+ "custom": {
189
+ "head": "ini title custom",
190
+ "content": [
191
+ "Akses seluruh konten Kompas.id web dan aplikasi",
192
+ "ePaper hingga 30 edisi terakhir",
193
+ "Artikel Riset dan Opini eksklusif dari para ahli",
194
+ "Buku digital tiap bulannya di aplikasi"
195
+ ],
196
+ "memberships": [
197
+ {
198
+ "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
199
+ "percentage": 40,
200
+ "price": 360000,
201
+ "discountPrice": 600000,
202
+ "savingPrice": 30000,
203
+ "periode": "Tahun",
204
+ "isHighlight": true,
205
+ "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
206
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
207
+ "subscriptionId": "9802032",
208
+ "position": 1
209
+ },
210
+ {
211
+ "title": "Kompas Digital Premium 1 Bulan",
212
+ "percentage": 0,
213
+ "discountPrice": 0,
214
+ "price": 50000,
215
+ "periode": "Bulan",
216
+ "isHighlight": false,
217
+ "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
218
+ "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
219
+ "subscriptionId": "9802035",
220
+ "position": 2
221
+ }
222
+ ],
223
+ "freeTrial": {
224
+ "packageText": "untuk 3 hari pertama",
225
+ "desktopText": "Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR dengan ponsel atau tablet untuk mengunduh aplikasi.",
226
+ "mobileText": "Dapatkan akses gratis selama 3 hari ke konten dan fitur premium Kompas.id di aplikasi."
151
227
  },
152
- "custom": {
153
- "head": "ini title custom",
154
- "content": [
155
- "Akses seluruh konten Kompas.id web dan aplikasi",
156
- "ePaper hingga 30 edisi terakhir",
157
- "Artikel Riset dan Opini eksklusif dari para ahli",
158
- "Buku digital tiap bulannya di aplikasi"
159
- ],
160
- "memberships": [
161
- {
162
- "title": "Kompas Digital Premium 12 Bulan (Hemat 40%)",
163
- "percentage": 40,
164
- "price": 360000,
165
- "discountPrice": 600000,
166
- "savingPrice": 30000,
167
- "periode": "Tahun",
168
- "isHighlight": true,
169
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802032&referrer=",
170
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 12",
171
- "subscriptionId": "9802032",
172
- "position": 1
173
- },
174
- {
175
- "title": "Kompas Digital Premium 1 Bulan",
176
- "percentage": 0,
177
- "discountPrice": 0,
178
- "price": 50000,
179
- "periode": "Bulan",
180
- "isHighlight": false,
181
- "url": "https://checkoutv2.kompas.id/kdp?productId=9802035&referrer=",
182
- "package": "Cash-B2C-Halaman Berlangganan-Reguler_Digital-KDP 1",
183
- "subscriptionId": "9802035",
184
- "position": 2
185
- }
186
- ],
187
- "swgEnable": true,
188
- "freeTrial": {
189
- "packageText": "untuk 3 hari pertama",
190
- "desktopText": "Coba gratis 3 hari Kompas.id melalui aplikasi. Pindai kode QR dengan ponsel atau tablet untuk mengunduh aplikasi.",
191
- "mobileText": "Dapatkan akses gratis selama 3 hari ke konten dan fitur premium Kompas.id di aplikasi."
192
- }
228
+ "swgEnable": true,
229
+ "swgContent": {
230
+ "introductory": {
231
+ "price": "Rp 50.000",
232
+ "description": "Gratis Kaus Kompas",
233
+ "duration": "/ Bulan"
234
+ },
235
+ "default": {
236
+ "price": "",
237
+ "description": "Berlangganan lebih mudah dengan Google",
238
+ "duration": ""
239
+ }
193
240
  }
241
+ }
194
242
  }
195
243
  ```
196
244
 
@@ -203,6 +251,7 @@ Example:
203
251
  - [kompasid-paywall-banner-registration](../kompasid-paywall-banner-registration)
204
252
 
205
253
  ### Graph
254
+
206
255
  ```mermaid
207
256
  graph TD;
208
257
  kompasid-paywall --> kompasid-paywall-body
@@ -211,6 +260,6 @@ graph TD;
211
260
  style kompasid-paywall fill:#f9f,stroke:#333,stroke-width:4px
212
261
  ```
213
262
 
214
- ----------------------------------------------
263
+ ---
215
264
 
216
- *Terbikin oleh tim front-end kompas.id*
265
+ _Terbikin oleh tim front-end kompas.id_
package/src/components/kompasid-paywall-body/KompasPaywallBody.ts CHANGED
@@ -16,7 +16,9 @@ import { deviceType } from '../../utils/deviceType.js'
16
16
  import { formatRupiah } from '../../utils/formatRupiah.js'
17
17
  import { addGoogleFonts } from '../../utils/googleFont.js'
18
18
  import { redirectToRegister, redirectToLogin } from '../../utils/cta.js'
19
- import { cryptos } from '../../utils/crypt.js'
19
+ import { customFetch } from '../../utils/customFetch.js'
20
+ import { getCookie } from '../../utils/getCookies.js'
21
+ import { getLoginGuest } from '../../utils/api/getLoginGuest.js'
20
22
 
21
23
  @customElement('kompasid-paywall-body')
22
24
  export class KompasIdPaywallBody extends LitElement {
@@ -114,6 +116,9 @@ export class KompasIdPaywallBody extends LitElement {
114
116
  @state() private swgPublisherId = 'kompas.id'
115
117
  @state() private swgProductId = 'kompas.id:kompas_digital_premium'
116
118
  @state() private errorFlag = 0
119
+ @state() private accessToken = ''
120
+ @state() private refreshToken = ''
121
+ @state() private domain = 'id'
117
122
 
118
123
  _packages!: Packages
119
124
  buttonElement!: HTMLButtonElement
@@ -269,16 +274,24 @@ export class KompasIdPaywallBody extends LitElement {
269
274
  }
270
275
 
271
276
  private async createSwG(payload: any) {
272
- const crypto = await cryptos()
273
- await fetch(`${this.kompasApiSubsHost}/membership/swg`, {
277
+ const headersData: any = {
278
+ 'content-type': 'application/json',
279
+ Authorization: `Bearer ${this.accessToken}`,
280
+ }
281
+
282
+ const options = {
274
283
  method: 'POST',
275
284
  body: JSON.stringify(payload),
276
- headers: {
277
- 'content-type': 'application/json',
278
- 'x-signature': crypto.xSignature,
279
- datetime: crypto.datetime,
280
- },
281
- })
285
+ headers: headersData,
286
+ }
287
+
288
+ await customFetch(
289
+ `${this.kompasApiSubsHost}/membership/swg`,
290
+ this.refreshToken,
291
+ this.accessToken,
292
+ this.domain,
293
+ { ...options }
294
+ )
282
295
  .then(response => response.json())
283
296
  .catch(error => {
284
297
  throw error
@@ -388,6 +401,13 @@ export class KompasIdPaywallBody extends LitElement {
388
401
 
389
402
  super.connectedCallback()
390
403
  await this.updateComplete
404
+ this.accessToken = getCookie('kompas._token')
405
+ this.refreshToken = getCookie('kompas._token_refresh')
406
+
407
+ await getLoginGuest().then(data => {
408
+ this.accessToken = this.accessToken || data.accessToken
409
+ this.refreshToken = this.refreshToken || data.refreshToken
410
+ })
391
411
 
392
412
  if (this.packages.swgEnable) {
393
413
  this.jsonScript()
@@ -401,6 +421,7 @@ export class KompasIdPaywallBody extends LitElement {
401
421
  script.src = 'https://news.google.com/swg/js/v1/swg.js'
402
422
  script.defer = true
403
423
  script.onload = this.subscribeWithGoogleButton()
424
+
404
425
  if (head) {
405
426
  head.appendChild(script)
406
427
  }
package/src/utils/api/getLoginGuest.ts ADDED
@@ -0,0 +1,21 @@
1
+ export const getLoginGuest = async () => {
2
+ const response = await fetch(
3
+ 'https://api.kompas.id/account/api/v1/login/guest',
4
+ {
5
+ method: 'POST',
6
+ headers: {
7
+ 'Content-Type': 'application/json',
8
+ },
9
+ body: JSON.stringify({
10
+ email: 'anonynous.user@kompas.id',
11
+ }),
12
+ }
13
+ )
14
+
15
+ const result = await response.json()
16
+
17
+ if (!result?.data?.accessToken) {
18
+ throw new Error('Token akses tidak tersedia dalam respons')
19
+ }
20
+ return result.data
21
+ }