@kompasid/lit-web-components 0.7.7 → 0.7.9
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.
- package/demo/index.html +6 -6
- package/dist/src/components/kompasid-freewall/KompasFreewall.d.ts +5 -2
- package/dist/src/components/kompasid-freewall/KompasFreewall.js +61 -24
- package/dist/src/components/kompasid-freewall/KompasFreewall.js.map +1 -1
- package/dist/src/components/kompasid-freewall/types.d.ts +12 -0
- package/dist/src/components/kompasid-freewall/types.js.map +1 -1
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.d.ts +2 -1
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js +19 -16
- package/dist/src/components/kompasid-freewall-body/KompasFreewallBody.js.map +1 -1
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.d.ts +2 -1
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js +6 -6
- package/dist/src/components/kompasid-freewall-head/KompasFreewallHead.js.map +1 -1
- package/dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.d.ts +6 -4
- package/dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js +54 -24
- package/dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js.map +1 -1
- package/dist/src/components/kompasid-metered-paywall/types.d.ts +5 -0
- package/dist/src/components/kompasid-metered-paywall/types.js +2 -0
- package/dist/src/components/kompasid-metered-paywall/types.js.map +1 -0
- package/dist/src/components/kompasid-paywall/KompasPaywall.js +8 -2
- package/dist/src/components/kompasid-paywall/KompasPaywall.js.map +1 -1
- package/dist/src/components/kompasid-paywall/types.d.ts +7 -1
- package/dist/src/components/kompasid-paywall/types.js.map +1 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +3 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +16 -12
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.d.ts +1 -0
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js +34 -7
- package/dist/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.js.map +1 -1
- package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.d.ts +1 -0
- package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js +19 -4
- package/dist/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-freewall/KompasFreewall.ts +57 -25
- package/src/components/kompasid-freewall/readme.md +25 -0
- package/src/components/kompasid-freewall/types.ts +13 -0
- package/src/components/kompasid-freewall-body/KompasFreewallBody.ts +20 -17
- package/src/components/kompasid-freewall-head/KompasFreewallHead.ts +5 -7
- package/src/components/kompasid-metered-paywall/KompasMeteredPaywall.ts +54 -26
- package/src/components/kompasid-metered-paywall/readme.md +11 -0
- package/src/components/kompasid-metered-paywall/types.ts +5 -0
- package/src/components/kompasid-paywall/KompasPaywall.ts +10 -2
- package/src/components/kompasid-paywall/readme.md +161 -0
- package/src/components/kompasid-paywall/types.ts +7 -2
- package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +16 -12
- package/src/components/kompasid-widget-recirculations-default/KompasWidgetRecirculationsDefault.ts +32 -7
- package/src/components/kompasid-widget-recirculations-list/KompasWidgetRecirculationsList.ts +17 -4
package/demo/index.html
CHANGED
|
@@ -154,6 +154,12 @@
|
|
|
154
154
|
.slugs=${widgetRelatedPost.slugs}
|
|
155
155
|
></kompasid-widget-recirculations-default>
|
|
156
156
|
|
|
157
|
+
<kompasid-widget-recirculations-list
|
|
158
|
+
widgetTitle="Terpopuler"
|
|
159
|
+
apiSlug="popular-article"
|
|
160
|
+
>
|
|
161
|
+
</kompasid-widget-recirculations-list>
|
|
162
|
+
|
|
157
163
|
<kompasid-widget-recirculations-default
|
|
158
164
|
.titleName=${widgetOtherPost.titleName}
|
|
159
165
|
.titleLink=${widgetOtherPost.titleLink}
|
|
@@ -161,12 +167,6 @@
|
|
|
161
167
|
mainCategory="opini"
|
|
162
168
|
></kompasid-widget-recirculations-default>
|
|
163
169
|
|
|
164
|
-
<kompasid-widget-recirculations-list
|
|
165
|
-
widgetTitle="Terpopuler"
|
|
166
|
-
apiSlug="popular-article"
|
|
167
|
-
>
|
|
168
|
-
</kompasid-widget-recirculations-list>
|
|
169
|
-
|
|
170
170
|
<kompasid-paywall
|
|
171
171
|
.type=${type}
|
|
172
172
|
.theme=${theme}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, nothing } from 'lit';
|
|
2
2
|
import '../kompasid-freewall-head/KompasFreewallHead.js';
|
|
3
3
|
import '../kompasid-freewall-body/KompasFreewallBody.js';
|
|
4
4
|
export declare class KompasFreewall extends LitElement {
|
|
@@ -63,8 +63,10 @@ export declare class KompasFreewall extends LitElement {
|
|
|
63
63
|
/**
|
|
64
64
|
* State
|
|
65
65
|
*/
|
|
66
|
+
private isLoading;
|
|
66
67
|
private isExpand;
|
|
67
68
|
private packageData;
|
|
69
|
+
private jsonPackageData;
|
|
68
70
|
/**
|
|
69
71
|
* Getter
|
|
70
72
|
*/
|
|
@@ -85,8 +87,9 @@ export declare class KompasFreewall extends LitElement {
|
|
|
85
87
|
* Lifecycle
|
|
86
88
|
*/
|
|
87
89
|
connectedCallback(): Promise<void>;
|
|
90
|
+
getFreewallData(): Promise<void>;
|
|
88
91
|
/**
|
|
89
92
|
* Render Statement
|
|
90
93
|
*/
|
|
91
|
-
render(): import("lit").TemplateResult<1
|
|
94
|
+
render(): import("lit").TemplateResult<1> | typeof nothing;
|
|
92
95
|
}
|
|
@@ -68,8 +68,10 @@ let KompasFreewall = class KompasFreewall extends LitElement {
|
|
|
68
68
|
/**
|
|
69
69
|
* State
|
|
70
70
|
*/
|
|
71
|
+
this.isLoading = true;
|
|
71
72
|
this.isExpand = true;
|
|
72
73
|
this.packageData = {};
|
|
74
|
+
this.jsonPackageData = {};
|
|
73
75
|
}
|
|
74
76
|
/**
|
|
75
77
|
* Getter
|
|
@@ -132,7 +134,7 @@ let KompasFreewall = class KompasFreewall extends LitElement {
|
|
|
132
134
|
onSubscriptionClick() {
|
|
133
135
|
this.sendDataLayerSubscribeButtonClicked();
|
|
134
136
|
redirectToCheckout({
|
|
135
|
-
link: `${this.
|
|
137
|
+
link: `${this.jsonPackageData.subscriptionUrl}&referrer=${this.packageData.referrer}`,
|
|
136
138
|
source: this.type,
|
|
137
139
|
});
|
|
138
140
|
}
|
|
@@ -145,38 +147,67 @@ let KompasFreewall = class KompasFreewall extends LitElement {
|
|
|
145
147
|
this.isExpand = this.expand;
|
|
146
148
|
const originHost = encodeURIComponent(window.location.href);
|
|
147
149
|
this.packageData = { ...this.showPackage, referrer: originHost };
|
|
150
|
+
this.getFreewallData();
|
|
148
151
|
this.sendDataLayerPaywallViewed();
|
|
149
152
|
}
|
|
153
|
+
async getFreewallData() {
|
|
154
|
+
try {
|
|
155
|
+
const response = await fetch('https://cdn-www.kompas.id/web-component/freewall.json');
|
|
156
|
+
const json = await response.json();
|
|
157
|
+
this.jsonPackageData = {
|
|
158
|
+
headCopyCollapse: json.headCopyCollapse,
|
|
159
|
+
headCopyExpand: json.headCopyExpand,
|
|
160
|
+
subscriptionUrl: json.subscriptionUrl,
|
|
161
|
+
subscriptionTitle: json.subscriptionTitle,
|
|
162
|
+
subscriptionTitleGuest: json.subscriptionTitleGuest,
|
|
163
|
+
subscriptionDescription: json.subscriptionDescription,
|
|
164
|
+
subscriptionButtonText: json.subscriptionButtonText,
|
|
165
|
+
registerTitle: json.registerTitle,
|
|
166
|
+
registerDescription: json.registerDescription,
|
|
167
|
+
registerButtonText: json.registerButtonText,
|
|
168
|
+
};
|
|
169
|
+
}
|
|
170
|
+
catch (error) {
|
|
171
|
+
throw Error('Failed to get metered paywall data');
|
|
172
|
+
}
|
|
173
|
+
finally {
|
|
174
|
+
this.isLoading = false;
|
|
175
|
+
}
|
|
176
|
+
}
|
|
150
177
|
/**
|
|
151
178
|
* Render Statement
|
|
152
179
|
*/
|
|
153
180
|
render() {
|
|
154
|
-
return
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
.head_copy_expand=${this.head_copy_expand}
|
|
164
|
-
.head_copy_collapse=${this.head_copy_collapse}
|
|
165
|
-
.toggleExpand=${() => this.toggleExpand()}
|
|
166
|
-
.onSubscriptionClick=${() => this.onSubscriptionClick()}
|
|
167
|
-
.packageData=${this.packageData}
|
|
168
|
-
></kompasid-freewall-head>
|
|
169
|
-
${this.isExpand
|
|
170
|
-
? html `<kompasid-freewall-body
|
|
181
|
+
return !this.isLoading
|
|
182
|
+
? html `
|
|
183
|
+
<div class="sticky bottom-0 w-full h-full z-20 top-shadow">
|
|
184
|
+
<div
|
|
185
|
+
class="flex flex-col w-full bg-blue-100 justify-center ${this
|
|
186
|
+
.isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24"
|
|
187
|
+
>
|
|
188
|
+
<kompasid-freewall-head
|
|
189
|
+
.expand=${this.isExpand}
|
|
171
190
|
.type=${this.type}
|
|
191
|
+
.head_copy_expand=${this.jsonPackageData.headCopyExpand}
|
|
192
|
+
.head_copy_collapse=${this.jsonPackageData.headCopyCollapse}
|
|
193
|
+
.toggleExpand=${() => this.toggleExpand()}
|
|
172
194
|
.onSubscriptionClick=${() => this.onSubscriptionClick()}
|
|
173
195
|
.packageData=${this.packageData}
|
|
174
|
-
|
|
175
|
-
></kompasid-freewall-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
196
|
+
.jsonPackageData=${this.jsonPackageData}
|
|
197
|
+
></kompasid-freewall-head>
|
|
198
|
+
${this.isExpand
|
|
199
|
+
? html `<kompasid-freewall-body
|
|
200
|
+
.type=${this.type}
|
|
201
|
+
.onSubscriptionClick=${() => this.onSubscriptionClick()}
|
|
202
|
+
.packageData=${this.packageData}
|
|
203
|
+
.jsonPackageData=${this.jsonPackageData}
|
|
204
|
+
?isLogin=${this.isLogin}
|
|
205
|
+
></kompasid-freewall-body>`
|
|
206
|
+
: nothing}
|
|
207
|
+
</div>
|
|
208
|
+
</div>
|
|
209
|
+
`
|
|
210
|
+
: nothing;
|
|
180
211
|
}
|
|
181
212
|
};
|
|
182
213
|
KompasFreewall.styles = [
|
|
@@ -254,12 +285,18 @@ __decorate([
|
|
|
254
285
|
__decorate([
|
|
255
286
|
property({ type: Number })
|
|
256
287
|
], KompasFreewall.prototype, "tracker_metered_wall_balance", void 0);
|
|
288
|
+
__decorate([
|
|
289
|
+
state()
|
|
290
|
+
], KompasFreewall.prototype, "isLoading", void 0);
|
|
257
291
|
__decorate([
|
|
258
292
|
state()
|
|
259
293
|
], KompasFreewall.prototype, "isExpand", void 0);
|
|
260
294
|
__decorate([
|
|
261
295
|
state()
|
|
262
296
|
], KompasFreewall.prototype, "packageData", void 0);
|
|
297
|
+
__decorate([
|
|
298
|
+
state()
|
|
299
|
+
], KompasFreewall.prototype, "jsonPackageData", void 0);
|
|
263
300
|
KompasFreewall = __decorate([
|
|
264
301
|
customElement('kompasid-freewall')
|
|
265
302
|
], KompasFreewall);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasFreewall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/KompasFreewall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { PackageData } from './types.js'\nimport { redirectToCheckout } from '../../utils/cta.js'\nimport '../kompasid-freewall-head/KompasFreewallHead.js'\nimport '../kompasid-freewall-body/KompasFreewallBody.js'\n\n@customElement('kompasid-freewall')\nexport class KompasFreewall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .top-shadow {\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property type untuk menghandle tipe freewall\n * property head_copy_expand to update copy header when expand\n * property head_copy_collapse to update copy header when collapse\n * property expand to handle expand/collapse\n * property paywall_location is the location where user encounter the paywall\n * property paywall_subscription_package is the name of the subscription package viewed by user\n * property paywall_subscription_id is the ID of the subscription package viewed by user\n * property paywall_subscription_price is the price of the subscription package viewed by user\n * property paywall_position is the position of the subscription package viewed by user\n * property tracker_page_type is the type of the page\n * property tracker_page_title is the title of the page\n * property tracker_content_id is the ID of article (slug)\n * property content_title is the title of article\n * property tracker_content_categories is the category of the content\n * property tracker_content_type is to decide whether it's free article or paid article\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n */\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n @property({ type: String }) head_copy_expand = ''\n @property({ type: String }) head_copy_collapse = ''\n @property({ type: Boolean }) expand = true\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 1\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_page_title = ''\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 showPackage = {\n duration: 1,\n durationType: 3,\n id: '9802035',\n link: 'kdp?productId=9802035&referrer=',\n price: 50000,\n position: 1,\n title: 'Kompas Digital Premium 1 Bulan',\n referrer: '',\n }\n\n /**\n * State\n */\n\n @state() private isExpand: boolean = true\n @state() private packageData: PackageData = {} as PackageData\n\n /**\n * Getter\n */\n\n get isArticle() {\n return this.type === 'article'\n }\n\n /**\n * Data Layer\n */\n\n private prepareImpressionsData(): Record<string, any> {\n const baseData = {\n paywall_location: this.paywall_location,\n paywall_subscription_package:\n this.paywall_subscription_package || this.packageData.title,\n paywall_subscription_id:\n this.paywall_subscription_id || this.packageData.id,\n paywall_subscription_price:\n this.paywall_subscription_price || this.packageData.price,\n paywall_position: this.paywall_position || this.packageData.position,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n page_type: this.tracker_page_type,\n metered_wall_type: this.tracker_metered_wall_type || 'FP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n if (this.isArticle) {\n return {\n ...baseData,\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 }\n }\n return {\n ...baseData,\n page_title: this.tracker_page_title,\n }\n }\n\n private sendDataLayer(\n event: string,\n includeImpressions: boolean = false\n ): void {\n const impressionsData = this.prepareImpressionsData()\n\n const data = includeImpressions\n ? { event, impressions: [impressionsData] }\n : { event, ...impressionsData }\n\n window.dataLayer.push(data)\n }\n\n private sendDataLayerPaywallViewed(): void {\n if (this.isExpand) this.sendDataLayer('paywall_viewed', true)\n }\n\n private sendDataLayerSubscribeButtonClicked(): void {\n this.sendDataLayer('subscribe_button_clicked')\n }\n\n /**\n * Logic Function\n */\n\n private toggleExpand() {\n this.isExpand = !this.isExpand\n this.sendDataLayerPaywallViewed()\n }\n\n private onSubscriptionClick() {\n this.sendDataLayerSubscribeButtonClicked()\n redirectToCheckout({\n link: `${this.packageData.link}${this.packageData.referrer}`,\n source: this.type,\n })\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n\n this.isExpand = this.expand\n\n const originHost: string = encodeURIComponent(window.location.href)\n this.packageData = { ...this.showPackage, referrer: originHost }\n\n this.sendDataLayerPaywallViewed()\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return html`\n <div class=\"sticky bottom-0 w-full h-full z-20 top-shadow\">\n <div\n class=\"flex flex-col w-full bg-blue-100 justify-center ${this\n .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24\"\n >\n <kompasid-freewall-head\n .expand=${this.isExpand}\n .type=${this.type}\n .head_copy_expand=${this.head_copy_expand}\n .head_copy_collapse=${this.head_copy_collapse}\n .toggleExpand=${() => this.toggleExpand()}\n .onSubscriptionClick=${() => this.onSubscriptionClick()}\n .packageData=${this.packageData}\n ></kompasid-freewall-head>\n ${this.isExpand\n ? html`<kompasid-freewall-body\n .type=${this.type}\n .onSubscriptionClick=${() => this.onSubscriptionClick()}\n .packageData=${this.packageData}\n ?isLogin=${this.isLogin}\n ></kompasid-freewall-body>`\n : nothing}\n </div>\n </div>\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasFreewall.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/KompasFreewall.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { JsonPackageData, PackageData } from './types.js'\nimport { redirectToCheckout } from '../../utils/cta.js'\nimport '../kompasid-freewall-head/KompasFreewallHead.js'\nimport '../kompasid-freewall-body/KompasFreewallBody.js'\n\n@customElement('kompasid-freewall')\nexport class KompasFreewall extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n\n .top-shadow {\n box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.16);\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property type untuk menghandle tipe freewall\n * property head_copy_expand to update copy header when expand\n * property head_copy_collapse to update copy header when collapse\n * property expand to handle expand/collapse\n * property paywall_location is the location where user encounter the paywall\n * property paywall_subscription_package is the name of the subscription package viewed by user\n * property paywall_subscription_id is the ID of the subscription package viewed by user\n * property paywall_subscription_price is the price of the subscription package viewed by user\n * property paywall_position is the position of the subscription package viewed by user\n * property tracker_page_type is the type of the page\n * property tracker_page_title is the title of the page\n * property tracker_content_id is the ID of article (slug)\n * property content_title is the title of article\n * property tracker_content_categories is the category of the content\n * property tracker_content_type is to decide whether it's free article or paid article\n * property tracker_user_type is the type of user based on their subscription\n * property tracker_subscription_status is the status of their subscription\n * property tracker_page_domain is the page domain\n * property tracker_metered_wall_type is the type of metered wall\n * property tracker_metered_wall_balance is the balance of their metered wall\n */\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n @property({ type: String }) head_copy_expand = ''\n @property({ type: String }) head_copy_collapse = ''\n @property({ type: Boolean }) expand = true\n @property({ type: String }) paywall_location = ''\n @property({ type: String }) paywall_subscription_package = ''\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0\n @property({ type: Number }) paywall_position = 1\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_page_title = ''\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 showPackage = {\n duration: 1,\n durationType: 3,\n id: '9802035',\n link: 'kdp?productId=9802035&referrer=',\n price: 50000,\n position: 1,\n title: 'Kompas Digital Premium 1 Bulan',\n referrer: '',\n }\n\n /**\n * State\n */\n\n @state() private isLoading: Boolean = true\n @state() private isExpand: boolean = true\n @state() private packageData: PackageData = {} as PackageData\n @state() private jsonPackageData: JsonPackageData = {} as JsonPackageData\n\n /**\n * Getter\n */\n\n get isArticle() {\n return this.type === 'article'\n }\n\n /**\n * Data Layer\n */\n\n private prepareImpressionsData(): Record<string, any> {\n const baseData = {\n paywall_location: this.paywall_location,\n paywall_subscription_package:\n this.paywall_subscription_package || this.packageData.title,\n paywall_subscription_id:\n this.paywall_subscription_id || this.packageData.id,\n paywall_subscription_price:\n this.paywall_subscription_price || this.packageData.price,\n paywall_position: this.paywall_position || this.packageData.position,\n user_type: this.tracker_user_type,\n subscription_status: this.tracker_subscription_status,\n page_domain: this.tracker_page_domain || 'Kompas.id',\n page_type: this.tracker_page_type,\n metered_wall_type: this.tracker_metered_wall_type || 'FP',\n metered_wall_balance: this.tracker_metered_wall_balance,\n }\n\n if (this.isArticle) {\n return {\n ...baseData,\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 }\n }\n return {\n ...baseData,\n page_title: this.tracker_page_title,\n }\n }\n\n private sendDataLayer(\n event: string,\n includeImpressions: boolean = false\n ): void {\n const impressionsData = this.prepareImpressionsData()\n\n const data = includeImpressions\n ? { event, impressions: [impressionsData] }\n : { event, ...impressionsData }\n\n window.dataLayer.push(data)\n }\n\n private sendDataLayerPaywallViewed(): void {\n if (this.isExpand) this.sendDataLayer('paywall_viewed', true)\n }\n\n private sendDataLayerSubscribeButtonClicked(): void {\n this.sendDataLayer('subscribe_button_clicked')\n }\n\n /**\n * Logic Function\n */\n\n private toggleExpand() {\n this.isExpand = !this.isExpand\n this.sendDataLayerPaywallViewed()\n }\n\n private onSubscriptionClick() {\n this.sendDataLayerSubscribeButtonClicked()\n redirectToCheckout({\n link: `${this.jsonPackageData.subscriptionUrl}&referrer=${this.packageData.referrer}`,\n source: this.type,\n })\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n\n this.isExpand = this.expand\n\n const originHost: string = encodeURIComponent(window.location.href)\n this.packageData = { ...this.showPackage, referrer: originHost }\n this.getFreewallData()\n\n this.sendDataLayerPaywallViewed()\n }\n\n async getFreewallData() {\n try {\n const response = await fetch(\n 'https://cdn-www.kompas.id/web-component/freewall.json'\n )\n const json = await response.json()\n this.jsonPackageData = {\n headCopyCollapse: json.headCopyCollapse,\n headCopyExpand: json.headCopyExpand,\n subscriptionUrl: json.subscriptionUrl,\n subscriptionTitle: json.subscriptionTitle,\n subscriptionTitleGuest: json.subscriptionTitleGuest,\n subscriptionDescription: json.subscriptionDescription,\n subscriptionButtonText: json.subscriptionButtonText,\n registerTitle: json.registerTitle,\n registerDescription: json.registerDescription,\n registerButtonText: json.registerButtonText,\n }\n } catch (error) {\n throw Error('Failed to get metered paywall data')\n } finally {\n this.isLoading = false\n }\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return !this.isLoading\n ? html`\n <div class=\"sticky bottom-0 w-full h-full z-20 top-shadow\">\n <div\n class=\"flex flex-col w-full bg-blue-100 justify-center ${this\n .isExpand && 'pb-6 md:pb-7'} md:px-4 lg:px-24\"\n >\n <kompasid-freewall-head\n .expand=${this.isExpand}\n .type=${this.type}\n .head_copy_expand=${this.jsonPackageData.headCopyExpand}\n .head_copy_collapse=${this.jsonPackageData.headCopyCollapse}\n .toggleExpand=${() => this.toggleExpand()}\n .onSubscriptionClick=${() => this.onSubscriptionClick()}\n .packageData=${this.packageData}\n .jsonPackageData=${this.jsonPackageData}\n ></kompasid-freewall-head>\n ${this.isExpand\n ? html`<kompasid-freewall-body\n .type=${this.type}\n .onSubscriptionClick=${() => this.onSubscriptionClick()}\n .packageData=${this.packageData}\n .jsonPackageData=${this.jsonPackageData}\n ?isLogin=${this.isLogin}\n ></kompasid-freewall-body>`\n : nothing}\n </div>\n </div>\n `\n : nothing\n }\n}\n"]}
|
|
@@ -8,3 +8,15 @@ export interface PackageData {
|
|
|
8
8
|
title: string;
|
|
9
9
|
referrer: string;
|
|
10
10
|
}
|
|
11
|
+
export interface JsonPackageData {
|
|
12
|
+
headCopyCollapse: string;
|
|
13
|
+
headCopyExpand: string;
|
|
14
|
+
subscriptionUrl: string;
|
|
15
|
+
subscriptionTitle: string;
|
|
16
|
+
subscriptionTitleGuest: string;
|
|
17
|
+
subscriptionDescription: string[];
|
|
18
|
+
subscriptionButtonText: string;
|
|
19
|
+
registerTitle: string;
|
|
20
|
+
registerDescription: string[];
|
|
21
|
+
registerButtonText: string;
|
|
22
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface PackageData {\n duration: number\n durationType: number\n id: string\n link: string\n price: number\n position: number\n title: string\n referrer: string\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface PackageData {\n duration: number\n durationType: number\n id: string\n link: string\n price: number\n position: number\n title: string\n referrer: string\n}\n\nexport interface JsonPackageData {\n headCopyCollapse: string\n headCopyExpand: string\n subscriptionUrl: string\n subscriptionTitle: string\n subscriptionTitleGuest: string\n subscriptionDescription: string[]\n subscriptionButtonText: string\n registerTitle: string\n registerDescription: string[]\n registerButtonText: string\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { PackageData } from '../kompasid-freewall/types.js';
|
|
2
|
+
import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js';
|
|
3
3
|
export declare class KompasFreewallBody extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
/**
|
|
@@ -15,6 +15,7 @@ export declare class KompasFreewallBody extends LitElement {
|
|
|
15
15
|
type: 'article' | 'landing_page';
|
|
16
16
|
onSubscriptionClick: () => void;
|
|
17
17
|
packageData: PackageData;
|
|
18
|
+
jsonPackageData: JsonPackageData;
|
|
18
19
|
description: string[];
|
|
19
20
|
/**
|
|
20
21
|
* Lifecycle
|
|
@@ -3,8 +3,6 @@ import { html, css, LitElement, nothing } from 'lit';
|
|
|
3
3
|
import { property, customElement } from 'lit/decorators.js';
|
|
4
4
|
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
5
5
|
import { addGoogleFonts } from '../../utils/googleFont.js';
|
|
6
|
-
import { formatRupiah } from '../../utils/formatRupiah.js';
|
|
7
|
-
import { generateCopyDuration } from '../../utils/generateCopyDuration.js';
|
|
8
6
|
import { faCheck } from '../../../assets/font-awesome.js';
|
|
9
7
|
import { redirectToRegister } from '../../utils/cta.js';
|
|
10
8
|
let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
@@ -23,6 +21,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
23
21
|
this.type = 'article';
|
|
24
22
|
this.onSubscriptionClick = () => { };
|
|
25
23
|
this.packageData = {};
|
|
24
|
+
this.jsonPackageData = {};
|
|
26
25
|
this.description = [
|
|
27
26
|
'Akses seluruh konten Kompas.id di web & aplikasi',
|
|
28
27
|
'ePaper hingga 30 edisi terakhir',
|
|
@@ -60,8 +59,8 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
60
59
|
.isLogin && 'w-60 md:w-full'} text-grey-600"
|
|
61
60
|
>
|
|
62
61
|
${this.isLogin
|
|
63
|
-
?
|
|
64
|
-
:
|
|
62
|
+
? this.jsonPackageData.subscriptionTitle
|
|
63
|
+
: this.jsonPackageData.subscriptionTitleGuest}
|
|
65
64
|
</h5>
|
|
66
65
|
${this.descriptionSection()}
|
|
67
66
|
</div>
|
|
@@ -71,8 +70,7 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
71
70
|
.isLogin &&
|
|
72
71
|
'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
|
|
73
72
|
>
|
|
74
|
-
|
|
75
|
-
/${generateCopyDuration(this.packageData.durationType)}
|
|
73
|
+
${this.jsonPackageData.subscriptionButtonText}
|
|
76
74
|
</button>
|
|
77
75
|
</div>
|
|
78
76
|
<div id="ribbon-container">
|
|
@@ -94,29 +92,31 @@ let KompasFreewallBody = class KompasFreewallBody extends LitElement {
|
|
|
94
92
|
<h5
|
|
95
93
|
class="font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600"
|
|
96
94
|
>
|
|
97
|
-
|
|
95
|
+
${this.jsonPackageData.registerTitle}
|
|
98
96
|
</h5>
|
|
99
|
-
<div
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
97
|
+
<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
|
|
98
|
+
${this.jsonPackageData.registerDescription.map(item => html `
|
|
99
|
+
<div class="flex items-start lg:items-center">
|
|
100
|
+
<div class="mt-1 lg:mt-0">${faCheck()}</div>
|
|
101
|
+
<h6 class="text-base text-grey-600 ml-1 text-start">
|
|
102
|
+
${item}
|
|
103
|
+
</h6>
|
|
104
|
+
</div>
|
|
105
|
+
`)}
|
|
106
106
|
</div>
|
|
107
107
|
</div>
|
|
108
108
|
<button
|
|
109
109
|
@click=${() => redirectToRegister('freewall')}
|
|
110
110
|
class="bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]"
|
|
111
111
|
>
|
|
112
|
-
|
|
112
|
+
${this.jsonPackageData.registerButtonText}
|
|
113
113
|
</button>
|
|
114
114
|
</div>
|
|
115
115
|
`;
|
|
116
116
|
}
|
|
117
117
|
descriptionSection() {
|
|
118
118
|
return html `<div class="flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5">
|
|
119
|
-
${this.
|
|
119
|
+
${this.jsonPackageData.subscriptionDescription.map(item => html `
|
|
120
120
|
<div class="flex items-start lg:items-center">
|
|
121
121
|
<div class="mt-1 lg:mt-0">${faCheck()}</div>
|
|
122
122
|
<h6 class="text-base text-grey-600 ml-1 text-start">${item}</h6>
|
|
@@ -218,6 +218,9 @@ __decorate([
|
|
|
218
218
|
__decorate([
|
|
219
219
|
property({ type: Object })
|
|
220
220
|
], KompasFreewallBody.prototype, "packageData", void 0);
|
|
221
|
+
__decorate([
|
|
222
|
+
property({ type: Object })
|
|
223
|
+
], KompasFreewallBody.prototype, "jsonPackageData", void 0);
|
|
221
224
|
KompasFreewallBody = __decorate([
|
|
222
225
|
customElement('kompasid-freewall-body')
|
|
223
226
|
], KompasFreewallBody);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;
|
|
1
|
+
{"version":3,"file":"KompasFreewallBody.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-body/KompasFreewallBody.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'\nimport { faCheck } from '../../../assets/font-awesome.js'\nimport { redirectToRegister } from '../../utils/cta.js'\n\n@customElement('kompasid-freewall-body')\nexport class KompasFreewallBody extends LitElement {\n static styles = [\n css`\n .font-lora {\n font-family: 'Lora', 'Georgia', 'serif';\n }\n\n .font-roboto-condensed {\n font-family: 'Roboto Condensed', sans-serif;\n }\n\n /* ----- Ribbon Container ---------------------------------------*/\n #ribbon-container {\n background: transparent;\n height: 130px;\n width: 200px;\n position: absolute;\n top: -5px;\n right: -5px;\n overflow: hidden;\n }\n\n /* ----- Top Curl ---------------------------------------*/\n #ribbon-container:before {\n content: '';\n display: block;\n -webkit-border-radius: 10px 10px 0px 0px;\n border-radius: 10px 10px 0px 0px;\n width: 35px;\n height: 10px;\n position: absolute;\n right: 60px;\n background: #b78b00;\n z-index: 1;\n }\n\n /* ----- Right Curl ---------------------------------------*/\n #ribbon-container:after {\n content: '';\n display: block;\n -webkit-border-radius: 0px 10px 10px 0px;\n border-radius: 0px 10px 10px 0px;\n width: 10px;\n height: 35px;\n position: absolute;\n right: 0px;\n top: 60px;\n background: #b78b00;\n }\n\n /* ----- Ribbon ---------------------------------------*/\n #ribbon-container > div {\n width: 140px;\n height: 28px;\n position: relative;\n top: 24px;\n right: -100px;\n z-index: 11;\n overflow: hidden;\n transform: rotate(45deg);\n -ms-transform: rotate(45deg); /* IE 9 */\n -moz-transform: rotate(45deg); /* Firefox */\n -webkit-transform: rotate(45deg); /* Safari and Chrome */\n -o-transform: rotate(45deg); /* Opera */\n background: #ffcc00;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property type untuk menghandle tipe freewall\n * property onSubscriptionClick to handle cta when subscription button is clicked\n * packageData sebagai data package yang diambil dari kompasid-freewall\n */\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n @property() onSubscriptionClick = () => {}\n @property({ type: Object }) packageData: PackageData = {} as PackageData\n @property({ type: Object }) jsonPackageData: JsonPackageData =\n {} as JsonPackageData\n\n description = [\n 'Akses seluruh konten Kompas.id di web & aplikasi',\n 'ePaper hingga 30 edisi terakhir',\n 'Buku digital tiap bulannya di aplikasi ',\n ]\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans', 'lora', 'roboto-condensed'])\n }\n\n /**\n * Component\n */\n\n private subscriptionCardComponent() {\n return html`\n <div class=\"relative\">\n <div\n id=\"subscription-card\"\n class=\"flex justify-between items-center relative z-10 flex-col w-[328px] ${this\n .isLogin\n ? 'md:w-[580px]'\n : 'md:w-[350px] lg:w-[410px]'} py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] border-2 border-yellow-400 bg-white\"\n >\n <div\n class=\"flex w-full flex-col ${this.isLogin\n ? 'items-center md:w-[374px] text-center'\n : 'items-start text-start'}\"\n >\n <h5\n class=\"font-lora text-lg md:text-xl font-bold leading-[30px] ${this\n .isLogin && 'w-60 md:w-full'} text-grey-600\"\n >\n ${this.isLogin\n ? this.jsonPackageData.subscriptionTitle\n : this.jsonPackageData.subscriptionTitleGuest}\n </h5>\n ${this.descriptionSection()}\n </div>\n <button\n @click=${this.onSubscriptionClick}\n class=\"bg-green-500 whitespace-nowrap w-full rounded ${this\n .isLogin &&\n 'md:w-[370px]'} md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n >\n ${this.jsonPackageData.subscriptionButtonText}\n </button>\n </div>\n <div id=\"ribbon-container\">\n <div\n class=\"text-[11px] font-medium text-grey-600 font-roboto-condensed flex justify-center items-center\"\n >\n <span class=\"-ml-2\">Penawaran Terbaik</span>\n </div>\n </div>\n </div>\n `\n }\n\n private registerCardComponent() {\n return html`\n <div\n class=\"flex flex-col justify-between md:min-h-[244px] lg:min-h-[220px] w-[328px] md:w-[350px] lg:w-[410px] py-3 px-[10px] md:p-5 md:pt-3 rounded-[10px] bg-white\"\n >\n <div>\n <h5\n class=\"font-lora text-lg md:text-xl font-bold leading-[30px] text-grey-600\"\n >\n ${this.jsonPackageData.registerTitle}\n </h5>\n <div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n ${this.jsonPackageData.registerDescription.map(\n item => html`\n <div class=\"flex items-start lg:items-center\">\n <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n <h6 class=\"text-base text-grey-600 ml-1 text-start\">\n ${item}\n </h6>\n </div>\n `\n )}\n </div>\n </div>\n <button\n @click=${() => redirectToRegister('freewall')}\n class=\"bg-white border border-brand-1 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-brand-1 font-bold leading-[18px]\"\n >\n ${this.jsonPackageData.registerButtonText}\n </button>\n </div>\n `\n }\n\n private descriptionSection() {\n return html`<div class=\"flex flex-col space-y-1 mt-3 mb-4 md:mt-4 md:mb-5\">\n ${this.jsonPackageData.subscriptionDescription.map(\n item =>\n html`\n <div class=\"flex items-start lg:items-center\">\n <div class=\"mt-1 lg:mt-0\">${faCheck()}</div>\n <h6 class=\"text-base text-grey-600 ml-1 text-start\">${item}</h6>\n </div>\n `\n )}\n </div>`\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return html`\n <div\n class=\"w-full h-full flex flex-col md:flex-row pt-[5px] relative space-y-4 md:space-x-5 md:space-y-0 justify-center items-center\"\n >\n ${this.subscriptionCardComponent()}\n ${!this.isLogin ? this.registerCardComponent() : nothing}\n </div>\n `\n }\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
-
import { PackageData } from '../kompasid-freewall/types.js';
|
|
2
|
+
import { JsonPackageData, PackageData } from '../kompasid-freewall/types.js';
|
|
3
3
|
export declare class KompasFreewallHead extends LitElement {
|
|
4
4
|
static styles: import("lit").CSSResult[];
|
|
5
5
|
/**
|
|
@@ -22,6 +22,7 @@ export declare class KompasFreewallHead extends LitElement {
|
|
|
22
22
|
toggleExpand: () => void;
|
|
23
23
|
onSubscriptionClick: () => void;
|
|
24
24
|
packageData: PackageData;
|
|
25
|
+
jsonPackageData: JsonPackageData;
|
|
25
26
|
/**
|
|
26
27
|
* Getter
|
|
27
28
|
*/
|
|
@@ -5,8 +5,6 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
|
5
5
|
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
6
6
|
import { addGoogleFonts } from '../../utils/googleFont.js';
|
|
7
7
|
import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
|
|
8
|
-
import { formatRupiah } from '../../utils/formatRupiah.js';
|
|
9
|
-
import { generateCopyDuration } from '../../utils/generateCopyDuration.js';
|
|
10
8
|
let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
11
9
|
constructor() {
|
|
12
10
|
super(...arguments);
|
|
@@ -30,6 +28,7 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
30
28
|
this.toggleExpand = () => { };
|
|
31
29
|
this.onSubscriptionClick = () => { };
|
|
32
30
|
this.packageData = {};
|
|
31
|
+
this.jsonPackageData = {};
|
|
33
32
|
}
|
|
34
33
|
/**
|
|
35
34
|
* Getter
|
|
@@ -63,8 +62,7 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
63
62
|
@click=${this.onSubscriptionClick}
|
|
64
63
|
class="bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
|
|
65
64
|
>
|
|
66
|
-
|
|
67
|
-
/${generateCopyDuration(this.packageData.durationType)}
|
|
65
|
+
${this.jsonPackageData.subscriptionButtonText}
|
|
68
66
|
</button>`
|
|
69
67
|
: nothing}
|
|
70
68
|
</div>
|
|
@@ -85,8 +83,7 @@ let KompasFreewallHead = class KompasFreewallHead extends LitElement {
|
|
|
85
83
|
@click=${this.onSubscriptionClick}
|
|
86
84
|
class="bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]"
|
|
87
85
|
>
|
|
88
|
-
|
|
89
|
-
/${generateCopyDuration(this.packageData.durationType)}
|
|
86
|
+
${this.jsonPackageData.subscriptionButtonText}
|
|
90
87
|
</button>`
|
|
91
88
|
: nothing}
|
|
92
89
|
</div>
|
|
@@ -118,6 +115,9 @@ __decorate([
|
|
|
118
115
|
__decorate([
|
|
119
116
|
property({ type: Object })
|
|
120
117
|
], KompasFreewallHead.prototype, "packageData", void 0);
|
|
118
|
+
__decorate([
|
|
119
|
+
property({ type: Object })
|
|
120
|
+
], KompasFreewallHead.prototype, "jsonPackageData", void 0);
|
|
121
121
|
KompasFreewallHead = __decorate([
|
|
122
122
|
customElement('kompasid-freewall-head')
|
|
123
123
|
], KompasFreewallHead);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAA;
|
|
1
|
+
{"version":3,"file":"KompasFreewallHead.js","sourceRoot":"","sources":["../../../../src/components/kompasid-freewall-head/KompasFreewallHead.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, nothing } from 'lit'\nimport { property, customElement } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { JsonPackageData, PackageData } from '../kompasid-freewall/types.js'\n\n@customElement('kompasid-freewall-head')\nexport class KompasFreewallHead extends LitElement {\n static styles = [css``, TWStyles]\n\n /**\n * Props\n */\n /**\n * property isLogin untuk menghandle apakah user sudah login atau belum\n * property type untuk menghandle tipe freewall\n * property head_copy_expand to update copy header when expand\n * property head_copy_collapse to update copy header when collapse\n * property expand to handle expand/collapse\n * property toggleExpand to handle toggle expand/collapse\n * property onSubscriptionClick to handle cta when subscription button is clicked\n */\n\n @property({ type: Boolean }) isLogin = false\n @property({ type: String }) type: 'article' | 'landing_page' = 'article'\n @property({ type: String }) head_copy_expand = ''\n @property({ type: String }) head_copy_collapse = ''\n @property({ type: Boolean }) expand = true\n @property() toggleExpand = () => {}\n @property() onSubscriptionClick = () => {}\n @property({ type: Object }) packageData: PackageData = {} as PackageData\n @property({ type: Object }) jsonPackageData: JsonPackageData =\n {} as JsonPackageData\n\n /**\n * Getter\n */\n\n get headCopy() {\n return (\n (this.expand ? this.head_copy_expand : this.head_copy_collapse) ||\n 'Akses seluruh konten dan fitur Kompas.id dengan berlangganan.'\n )\n }\n\n /**\n * Lifecycle\n */\n\n override async connectedCallback() {\n super.connectedCallback()\n await this.updateComplete\n addGoogleFonts(['pt-sans'])\n }\n\n /**\n * Render Statement\n */\n\n render() {\n return html`\n <div class=\"flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2\">\n <div class=\"flex justify-between items-center h-full\">\n <div\n class=\"hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9\"\n ></div>\n <div class=\"flex items-center md:justify-start\">\n <p class=\"w-full text-grey-600\">${this.headCopy}</p>\n ${!this.expand\n ? html`<button\n @click=${this.onSubscriptionClick}\n class=\"bg-green-500 hidden md:block ml-3 whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n >\n ${this.jsonPackageData.subscriptionButtonText}\n </button>`\n : nothing}\n </div>\n <div>\n <button\n @click=${this.toggleExpand}\n aria-label=\"Toggle Expand\"\n class=\"h-9 w-9 flex ml-2 items-center justify-center text-blue-500 rounded bg-blue-200\"\n >\n <div class=\"${!this.expand && 'rotate-180'}\">\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-down'))}\n </div>\n </button>\n </div>\n </div>\n ${!this.expand\n ? html`<button\n @click=${this.onSubscriptionClick}\n class=\"bg-green-500 block md:hidden whitespace-nowrap rounded md:rounded h-10 px-4 md:px-5 text-sm md:text-base text-white font-bold leading-[18px]\"\n >\n ${this.jsonPackageData.subscriptionButtonText}\n </button>`\n : nothing}\n </div>\n `\n }\n}\n"]}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
1
|
+
import { LitElement, nothing } from 'lit';
|
|
2
2
|
export declare class KompasMeteredPaywall extends LitElement {
|
|
3
3
|
static styles: import("lit").CSSResult[];
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
private isLoading;
|
|
5
|
+
private maxQuota;
|
|
6
|
+
private packageData;
|
|
6
7
|
/**
|
|
7
8
|
* Props
|
|
8
9
|
*/
|
|
@@ -43,8 +44,9 @@ export declare class KompasMeteredPaywall extends LitElement {
|
|
|
43
44
|
tracker_metered_wall_balance: number;
|
|
44
45
|
private getCountdownArticle;
|
|
45
46
|
connectedCallback(): void;
|
|
47
|
+
getMeteredPaywallData(): Promise<void>;
|
|
46
48
|
private redirectToBerlangganan;
|
|
47
49
|
private dataLayeronLanggananButton;
|
|
48
50
|
private dataLayeronMeteredPaywall;
|
|
49
|
-
render(): import("lit").TemplateResult<1
|
|
51
|
+
render(): import("lit").TemplateResult<1> | typeof nothing;
|
|
50
52
|
}
|