@kompasid/lit-web-components 0.9.48 → 0.9.49
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/header.html +18 -2
- package/demo/paywall.html +3 -2
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.d.ts +1 -0
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js +8 -0
- package/dist/src/components/kompasid-header-account/KompasHeaderAccount.js.map +1 -1
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.d.ts +3 -0
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js +83 -6
- package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map +1 -1
- package/dist/src/components/kompasid-paywall/types.d.ts +1 -0
- package/dist/src/components/kompasid-paywall/types.js.map +1 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.d.ts +1 -0
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js +22 -1
- package/dist/src/components/kompasid-paywall-body/KompasPaywallBody.js.map +1 -1
- package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.d.ts +36 -0
- package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js +589 -0
- package/dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js.map +1 -0
- package/dist/src/components/kompasid-paywall-modal-register/types.d.ts +33 -0
- package/dist/src/components/kompasid-paywall-modal-register/types.js +2 -0
- package/dist/src/components/kompasid-paywall-modal-register/types.js.map +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/tailwind/tailwind.js +160 -0
- package/dist/tailwind/tailwind.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/components/kompasid-header-account/KompasHeaderAccount.ts +5 -0
- package/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts +78 -6
- package/src/components/kompasid-paywall/types.ts +1 -0
- package/src/components/kompasid-paywall-body/KompasPaywallBody.ts +22 -1
- package/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.ts +613 -0
- package/src/components/kompasid-paywall-modal-register/types.ts +39 -0
- package/src/index.ts +1 -0
- package/tailwind/tailwind.css +160 -0
- package/tailwind/tailwind.ts +160 -0
package/demo/header.html
CHANGED
|
@@ -46,6 +46,7 @@
|
|
|
46
46
|
import { format, addDays } from 'date-fns'
|
|
47
47
|
import { id } from 'date-fns/locale/id'
|
|
48
48
|
import '../dist/src/components/kompasid-header-account/KompasHeaderAccount.js'
|
|
49
|
+
import "../dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js"
|
|
49
50
|
import '../dist/src/components/kompasid-header-notification/KompasHeaderNotification.js'
|
|
50
51
|
|
|
51
52
|
const urlParams = new URLSearchParams(window.location.search);
|
|
@@ -107,6 +108,7 @@
|
|
|
107
108
|
const notificationUrl = '/notif'
|
|
108
109
|
const notificationTotal = '10'
|
|
109
110
|
const ordersUrl = '/orders'
|
|
111
|
+
const companyName = 'PT Toyota Motor Manufacturing Indonesia'
|
|
110
112
|
const subscriptionUrl = 'https://www.kompas.id/berlangganan/v2'
|
|
111
113
|
// const subscriptionUrl = 'https://www.kompas.cloud/berlangganan/v2'
|
|
112
114
|
const readLaterUrl = ''
|
|
@@ -156,6 +158,7 @@
|
|
|
156
158
|
.logout_url=${logoutUrl}
|
|
157
159
|
.read_later_url=${readLaterUrl}
|
|
158
160
|
.manage_account_url=${manageAccountUrl}
|
|
161
|
+
.company_name=${companyName}
|
|
159
162
|
sidebarTopSpacing="49"
|
|
160
163
|
.notification_url=${notificationUrl}
|
|
161
164
|
.notification_total=${notificationTotal}
|
|
@@ -188,7 +191,11 @@
|
|
|
188
191
|
)
|
|
189
192
|
}
|
|
190
193
|
|
|
191
|
-
|
|
194
|
+
function getInitialUserName(name) {
|
|
195
|
+
return name
|
|
196
|
+
? name.charAt(0)
|
|
197
|
+
: ''
|
|
198
|
+
}
|
|
192
199
|
|
|
193
200
|
function handleInput(e) {
|
|
194
201
|
try {
|
|
@@ -214,7 +221,16 @@
|
|
|
214
221
|
<button @click=${() => handleTemplateClick('tidakBerlangganan')}>Tidak berlangganan</button>
|
|
215
222
|
</div>
|
|
216
223
|
<textarea @input=${handleInput} .value=${JSON.stringify(userData, null, 2)} style="width: 100%; height: 200px; font-family: monospace;"></textarea>
|
|
217
|
-
|
|
224
|
+
<div style="max-width: 300px;">
|
|
225
|
+
<kompasid-header-account-profile
|
|
226
|
+
.userInitialName=${getInitialUserName(userData?.userName)}
|
|
227
|
+
.userData=${userData}
|
|
228
|
+
.theme=${headerTheme}
|
|
229
|
+
.company_name=${companyName}
|
|
230
|
+
.manage_account_url=${manageAccountUrl}
|
|
231
|
+
></kompasid-header-account-profile>
|
|
232
|
+
</div>
|
|
233
|
+
`,
|
|
218
234
|
document.getElementById('controller-container')
|
|
219
235
|
)
|
|
220
236
|
}
|
package/demo/paywall.html
CHANGED
|
@@ -38,8 +38,9 @@
|
|
|
38
38
|
import { html, render } from 'lit'
|
|
39
39
|
import '../dist/src/components/kompasid-paywall/KompasPaywall.js'
|
|
40
40
|
import '../dist/src/components/kompasid-metered-paywall/KompasMeteredPaywall.js'
|
|
41
|
+
import '../dist/src/components/kompasid-paywall-modal-register/KompasPaywallModalRegister.js'
|
|
41
42
|
|
|
42
|
-
const type = '
|
|
43
|
+
const type = 'proMiningArticle'
|
|
43
44
|
const theme = ''
|
|
44
45
|
const paywallLocation = 'paywall_location'
|
|
45
46
|
const paywallSubscriptionId = 'testId'
|
|
@@ -52,7 +53,7 @@
|
|
|
52
53
|
const trackerContentCategories = 'content_categories'
|
|
53
54
|
const trackerUserType = 'user_type'
|
|
54
55
|
const trackerContentTags = 'english|bonjour'
|
|
55
|
-
const trackerContentPublishedDate = '
|
|
56
|
+
const trackerContentPublishedDate = '2026-02-27 08:00:12'
|
|
56
57
|
const trackerContentVariant = 'testa'
|
|
57
58
|
const trackerContentPublisher = 'publisher'
|
|
58
59
|
const subscriptionStatus = 'subscription_status'
|
|
@@ -4,6 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|
|
4
4
|
import { cva } from 'class-variance-authority';
|
|
5
5
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
6
6
|
import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
|
|
7
|
+
import { addGoogleFonts } from '../../utils/googleFont.js';
|
|
7
8
|
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
8
9
|
import { getHeaderTheme } from '../../utils/api/getHeaderTheme.js';
|
|
9
10
|
import '../kompasid-header-account-profile/KompasHeaderAccountProfile.js';
|
|
@@ -21,6 +22,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
21
22
|
this.logout_url = '';
|
|
22
23
|
this.manage_account_url = '';
|
|
23
24
|
this.read_later_url = '';
|
|
25
|
+
this.company_name = '';
|
|
24
26
|
this.userData = {};
|
|
25
27
|
this.sidebarTopSpacing = 0;
|
|
26
28
|
this.subscriptionUrl = '';
|
|
@@ -123,6 +125,8 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
123
125
|
.userInitialName=${this.getInitialUserName()}
|
|
124
126
|
.userData=${this.formattedUserData}
|
|
125
127
|
.subscriptionUrl=${this.subscriptionUrl}
|
|
128
|
+
.company_name=${this.company_name}
|
|
129
|
+
.manage_account_url=${this.manage_account_url}
|
|
126
130
|
paywall_location=${this.paywall_location}
|
|
127
131
|
paywall_subscription_package=${this.paywall_subscription_package}
|
|
128
132
|
paywall_subscription_id=${this.paywall_subscription_id}
|
|
@@ -155,6 +159,7 @@ let KompasHeaderAccount = class KompasHeaderAccount extends LitElement {
|
|
|
155
159
|
super.connectedCallback();
|
|
156
160
|
this.isShowSidebar = false;
|
|
157
161
|
this.themeList = await getHeaderTheme();
|
|
162
|
+
addGoogleFonts(['pt-sans']);
|
|
158
163
|
if (typeof this.userData === 'string') {
|
|
159
164
|
this.formattedUserData = JSON.parse(this.userData);
|
|
160
165
|
}
|
|
@@ -271,6 +276,9 @@ __decorate([
|
|
|
271
276
|
__decorate([
|
|
272
277
|
property({ type: String })
|
|
273
278
|
], KompasHeaderAccount.prototype, "read_later_url", void 0);
|
|
279
|
+
__decorate([
|
|
280
|
+
property({ type: String })
|
|
281
|
+
], KompasHeaderAccount.prototype, "company_name", void 0);
|
|
274
282
|
__decorate([
|
|
275
283
|
property({ type: Object })
|
|
276
284
|
], KompasHeaderAccount.prototype, "userData", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { cva } from 'class-variance-authority'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2.5px;\n right: -2.5px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .icon-xs svg {\n width: 11px;\n height: 12px;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n @state() themeList: any = null\n\n formattedUserData: User = {} as User\n\n /**\n * Props default\n */\n @property({ type: String }) logout_url = ''\n @property({ type: String }) manage_account_url = ''\n @property({ type: String }) read_later_url = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: String }) theme: 'default' | 'primary' = 'default'\n /**\n * Props For Grace Period and Tracker\n */\n @property({ type: String }) paywall_location = '' // belum tau terpakai dimana\n @property({ type: String }) paywall_subscription_package = '' // belum tau terpakai dimana\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0 // belum tau terpakai dimana\n @property({ type: Number }) paywall_position = 0 // belum tau terpakai dimana\n @property({ type: String }) tracker_page_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_id = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_title = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_categories = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_user_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_subscription_status = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_page_domain = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_metered_wall_type = '' // belum tau terpakai dimana\n @property({ type: Number }) tracker_metered_wall_balance = 0 // belum tau terpakai dimana\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private setTheme(param: any): String {\n if (!this.themeList) return 'text-grey-100'\n const cvaFn = cva('', { variants: this.themeList })\n\n return cvaFn(param)\n }\n\n private account() {\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-3 w-3\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex rounded-full h-6 w-6 items-center justify-center relative ${this.setTheme(\n { background: this.theme }\n )}\"\n >\n <span\n class=\"capitalize text-xxs font-bold ${this.setTheme({\n text: this.theme,\n })}\"\n >\n ${this.getInitialUserName()}\n </span>\n ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-1 icon-xs ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'} ${this.setTheme({ icon: this.theme })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .manage_account_url=${this.manage_account_url}\n .logout_url=${this.logout_url}\n .read_later_url=${this.read_later_url}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n this.themeList = await getHeaderTheme()\n\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasHeaderAccount.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account/KompasHeaderAccount.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { cva } from 'class-variance-authority'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport { addGoogleFonts } from '../../utils/googleFont.js'\nimport { User } from './types.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { getHeaderTheme } from '../../utils/api/getHeaderTheme.js'\nimport '../kompasid-header-account-profile/KompasHeaderAccountProfile.js'\nimport '../kompasid-header-account-help-center/KompasHeaderAccountHelpCenter.js'\nimport '../kompasid-header-account-menu/KompasHeaderAccountMenu.js'\n\n@customElement('kompasid-header-account')\nexport class KompasHeaderAccount extends LitElement {\n static styles = [\n css`\n :host {\n font-family: 'PT Sans', sans-serif;\n }\n .header {\n background-color: #0356a8;\n }\n .account-profile {\n overflow-y: auto;\n }\n\n .header-account-help-center--item {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 0.75rem;\n }\n\n .header-account-help-center--content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n margin-left: 1rem;\n line-height: 1.5rem;\n }\n\n .header-account--membership-icon {\n position: absolute;\n bottom: -2.5px;\n right: -2.5px;\n }\n\n .header-account--notification-indicator {\n position: absolute;\n top: 0;\n height: 0.5rem;\n width: 0.5rem;\n background-color: #f6ad55;\n border-radius: 50%;\n right: -0.563rem;\n top: -0.281rem;\n }\n\n .icon-xs svg {\n width: 11px;\n height: 12px;\n }\n\n .header-account-sidebar {\n width: 19rem;\n background-color: #edf2f7;\n box-shadow: 0px 0.125rem 0.25rem rgba(0, 0, 0, 0.1);\n display: flex;\n flex-direction: column;\n font-family: 'PT Sans', sans-serif;\n font-size: 0.875rem;\n }\n .z-index-max {\n z-index: 99999;\n }\n\n /* Custom Scrollbar for header */\n /* width */\n ::-webkit-scrollbar {\n width: 4px;\n }\n\n /* Track */\n ::-webkit-scrollbar-track {\n background: transparent;\n }\n\n /* Handle */\n ::-webkit-scrollbar-thumb {\n background: #0356a8;\n border-radius: 100px;\n }\n\n /* Handle on hover */\n ::-webkit-scrollbar-thumb:hover {\n background: #0356a8;\n }\n `,\n TWStyles,\n ]\n\n @state() isShowSidebar: boolean = false\n @state() themeList: any = null\n\n formattedUserData: User = {} as User\n\n /**\n * Props default\n */\n @property({ type: String }) logout_url = ''\n @property({ type: String }) manage_account_url = ''\n @property({ type: String }) read_later_url = ''\n @property({ type: String }) company_name = ''\n @property({ type: Object }) userData = {}\n @property({ type: Number }) sidebarTopSpacing = 0\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: String }) theme: 'default' | 'primary' = 'default'\n /**\n * Props For Grace Period and Tracker\n */\n @property({ type: String }) paywall_location = '' // belum tau terpakai dimana\n @property({ type: String }) paywall_subscription_package = '' // belum tau terpakai dimana\n @property({ type: Number }) paywall_subscription_id = 0\n @property({ type: Number }) paywall_subscription_price = 0 // belum tau terpakai dimana\n @property({ type: Number }) paywall_position = 0 // belum tau terpakai dimana\n @property({ type: String }) tracker_page_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_id = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_title = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_categories = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_content_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_user_type = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_subscription_status = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_page_domain = '' // belum tau terpakai dimana\n @property({ type: String }) tracker_metered_wall_type = '' // belum tau terpakai dimana\n @property({ type: Number }) tracker_metered_wall_balance = 0 // belum tau terpakai dimana\n\n private toggleSidebar() {\n this.isShowSidebar = !this.isShowSidebar\n }\n\n private getInitialUserName() {\n return this.formattedUserData?.userName\n ? this.formattedUserData.userName.charAt(0)\n : ''\n }\n\n private setTheme(param: any): String {\n if (!this.themeList) return 'text-grey-100'\n const cvaFn = cva('', { variants: this.themeList })\n\n return cvaFn(param)\n }\n\n private account() {\n const membershipIcon = () => {\n if (!this.formattedUserData?.isMembership) return html``\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-3 w-3\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n return html`\n <button @click=${this.toggleSidebar} class=\"cursor-pointer \">\n <div class=\"flex flex-row items-center self-center\">\n ${!this.getInitialUserName()\n ? html`<div\n class=\"bg-grey-300 rounded-full h-6 w-6 animate-pulse\"\n ></div>`\n : html`\n <div\n class=\"flex rounded-full h-6 w-6 items-center justify-center relative ${this.setTheme(\n { background: this.theme }\n )}\"\n >\n <span\n class=\"capitalize text-xxs font-bold ${this.setTheme({\n text: this.theme,\n })}\"\n >\n ${this.getInitialUserName()}\n </span>\n ${membershipIcon()}\n </div>\n `}\n <div\n class=\"ml-1 icon-xs ${this.isShowSidebar\n ? 'chevron-down'\n : 'rotate-180'} ${this.setTheme({ icon: this.theme })}\"\n >\n ${unsafeSVG(getFontAwesomeIcon('fas', 'chevron-up'))}\n </div>\n </div>\n </button>\n `\n }\n\n private accountSidebar() {\n return html`\n <nav\n class=\"w-screen fixed right-0 top-0 bottom-0\"\n @keyup=\"${this.onkeyup}\"\n @click=${this.toggleSidebar}\n >\n <div\n class=\"bg-grey-100 pb-20 pt-0 shadow-lg w-76 z-index-max ml-auto\"\n style=${`margin-top: ${this.sidebarTopSpacing}px;height:100vh;overflow-y:auto`}\n @keyup=\"${this.onkeyup}\"\n @click=${(ev: any) => ev.stopPropagation()}\n >\n <kompasid-header-account-profile\n .userInitialName=${this.getInitialUserName()}\n .userData=${this.formattedUserData}\n .subscriptionUrl=${this.subscriptionUrl}\n .company_name=${this.company_name}\n .manage_account_url=${this.manage_account_url}\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this.paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this.tracker_metered_wall_balance}\n ></kompasid-header-account-profile>\n <div class=\"pl-4 pr-3 py-4 text-left\">\n <kompasid-header-account-menu\n .manage_account_url=${this.manage_account_url}\n .logout_url=${this.logout_url}\n .read_later_url=${this.read_later_url}\n ></kompasid-header-account-menu>\n <kompasid-header-account-help-center></kompasid-header-account-help-center>\n </div>\n </div>\n </nav>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n this.isShowSidebar = false\n this.themeList = await getHeaderTheme()\n addGoogleFonts(['pt-sans'])\n\n if (typeof this.userData === 'string') {\n this.formattedUserData = JSON.parse(this.userData)\n } else if (typeof this.userData === 'object' && this.userData !== null) {\n // If userData is already an object, you might not need to parse it.\n // You can assign it directly to formattedUserData:\n this.formattedUserData = this.userData as User\n }\n }\n\n render() {\n return html`\n ${this.account()} ${this.isShowSidebar ? this.accountSidebar() : ''}\n `\n }\n}\n"]}
|
|
@@ -9,6 +9,8 @@ export declare class KompasHeaderAccountProfile extends LitElement {
|
|
|
9
9
|
userInitialName: string;
|
|
10
10
|
userData: User;
|
|
11
11
|
subscriptionUrl: string;
|
|
12
|
+
company_name: string;
|
|
13
|
+
manage_account_url: string;
|
|
12
14
|
openFrom: string;
|
|
13
15
|
/**
|
|
14
16
|
* Props For Grace Period Tracker
|
|
@@ -35,6 +37,7 @@ export declare class KompasHeaderAccountProfile extends LitElement {
|
|
|
35
37
|
formatDate(date: Date | string): string;
|
|
36
38
|
private renderSkeletonLoading;
|
|
37
39
|
private renderProfileContent;
|
|
40
|
+
clickToManageAccount(): void;
|
|
38
41
|
connectedCallback(): Promise<void>;
|
|
39
42
|
render(): import("lit-html").TemplateResult<1>;
|
|
40
43
|
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { LitElement, html, css, nothing } from 'lit';
|
|
3
3
|
import { format, addDays, differenceInDays } from 'date-fns';
|
|
4
4
|
import { id } from 'date-fns/locale/id';
|
|
5
5
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
6
|
+
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
6
7
|
import { TWStyles } from '../../../tailwind/tailwind.js';
|
|
8
|
+
import { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js';
|
|
7
9
|
import '../kompasid-grace-period/KompasGracePeriod.js';
|
|
8
10
|
let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitElement {
|
|
9
11
|
constructor() {
|
|
@@ -14,6 +16,8 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
|
|
|
14
16
|
this.userInitialName = '';
|
|
15
17
|
this.userData = {};
|
|
16
18
|
this.subscriptionUrl = '';
|
|
19
|
+
this.company_name = '';
|
|
20
|
+
this.manage_account_url = '';
|
|
17
21
|
this.openFrom = '';
|
|
18
22
|
/**
|
|
19
23
|
* Props For Grace Period Tracker
|
|
@@ -158,13 +162,52 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
|
|
|
158
162
|
${result}
|
|
159
163
|
</p>`;
|
|
160
164
|
};
|
|
165
|
+
/**
|
|
166
|
+
* Kompeni Element
|
|
167
|
+
*/
|
|
168
|
+
const kompeniTemplate = () => html ` <div
|
|
169
|
+
class="flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs max-w-[190px] font-sans leading-none"
|
|
170
|
+
>
|
|
171
|
+
<div class="w-5 h-5 flex items-center justify-center flex-shrink-0">
|
|
172
|
+
${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}
|
|
173
|
+
</div>
|
|
174
|
+
<p class="truncate">${this.company_name}</p>
|
|
175
|
+
<div
|
|
176
|
+
class="absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block"
|
|
177
|
+
>
|
|
178
|
+
<div
|
|
179
|
+
class="bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5"
|
|
180
|
+
>
|
|
181
|
+
${this.company_name}
|
|
182
|
+
<svg
|
|
183
|
+
width="16"
|
|
184
|
+
height="12"
|
|
185
|
+
viewBox="0 0 24 13"
|
|
186
|
+
class="text-grey-600 absolute left-[80%] -top-[11px]"
|
|
187
|
+
>
|
|
188
|
+
<polygon
|
|
189
|
+
points="3,15 12,3 21,15"
|
|
190
|
+
fill="currentColor"
|
|
191
|
+
stroke="currentColor"
|
|
192
|
+
stroke-width="4"
|
|
193
|
+
stroke-linejoin="round"
|
|
194
|
+
/>
|
|
195
|
+
</svg>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
</div>`;
|
|
161
199
|
return html `
|
|
162
200
|
<div
|
|
163
201
|
class="active-info flex flex-col items-start leading-none text-left font-sans"
|
|
164
202
|
>
|
|
165
203
|
<div class="flex flex-row items-center gap-4">
|
|
166
204
|
<div
|
|
167
|
-
|
|
205
|
+
@click=${() => this.clickToManageAccount()}
|
|
206
|
+
@keydown=${() => this.clickToManageAccount()}
|
|
207
|
+
class="flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative select-none ${this
|
|
208
|
+
.manage_account_url
|
|
209
|
+
? 'cursor-pointer'
|
|
210
|
+
: ''}"
|
|
168
211
|
>
|
|
169
212
|
<span class="capitalize text-2xl text-grey-100 font-bold">
|
|
170
213
|
${this.userInitialName}
|
|
@@ -173,10 +216,21 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
|
|
|
173
216
|
</div>
|
|
174
217
|
|
|
175
218
|
<div class="flex flex-col text-left">
|
|
176
|
-
<
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
219
|
+
<div
|
|
220
|
+
@click=${() => this.clickToManageAccount()}
|
|
221
|
+
@keydown=${() => this.clickToManageAccount()}
|
|
222
|
+
class="select-none"
|
|
223
|
+
>
|
|
224
|
+
<p
|
|
225
|
+
class="capitalize font-bold text-base ${this.manage_account_url
|
|
226
|
+
? 'text-blue-600 cursor-pointer'
|
|
227
|
+
: 'text-grey-600'}"
|
|
228
|
+
>
|
|
229
|
+
${this.userData.userName}
|
|
230
|
+
</p>
|
|
231
|
+
${activeInfoTemplate()}
|
|
232
|
+
</div>
|
|
233
|
+
${this.company_name ? kompeniTemplate() : nothing}
|
|
180
234
|
</div>
|
|
181
235
|
</div>
|
|
182
236
|
|
|
@@ -210,6 +264,11 @@ let KompasHeaderAccountProfile = class KompasHeaderAccountProfile extends LitEle
|
|
|
210
264
|
</div>
|
|
211
265
|
`;
|
|
212
266
|
}
|
|
267
|
+
clickToManageAccount() {
|
|
268
|
+
if (this.manage_account_url) {
|
|
269
|
+
window.location.href = this.manage_account_url;
|
|
270
|
+
}
|
|
271
|
+
}
|
|
213
272
|
async connectedCallback() {
|
|
214
273
|
super.connectedCallback();
|
|
215
274
|
}
|
|
@@ -231,6 +290,18 @@ KompasHeaderAccountProfile.styles = [
|
|
|
231
290
|
bottom: -2px;
|
|
232
291
|
right: -2px;
|
|
233
292
|
}
|
|
293
|
+
|
|
294
|
+
.tooltip::after {
|
|
295
|
+
content: '';
|
|
296
|
+
position: absolute;
|
|
297
|
+
width: 24px;
|
|
298
|
+
height: 16px;
|
|
299
|
+
background-color: #333333;
|
|
300
|
+
/* Memotong kotak menjadi segitiga */
|
|
301
|
+
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
|
302
|
+
/* Menghaluskan sudut potongan */
|
|
303
|
+
border-radius: 4px;
|
|
304
|
+
}
|
|
234
305
|
`,
|
|
235
306
|
TWStyles,
|
|
236
307
|
];
|
|
@@ -243,6 +314,12 @@ __decorate([
|
|
|
243
314
|
__decorate([
|
|
244
315
|
property({ type: String })
|
|
245
316
|
], KompasHeaderAccountProfile.prototype, "subscriptionUrl", void 0);
|
|
317
|
+
__decorate([
|
|
318
|
+
property({ type: String })
|
|
319
|
+
], KompasHeaderAccountProfile.prototype, "company_name", void 0);
|
|
320
|
+
__decorate([
|
|
321
|
+
property({ type: String })
|
|
322
|
+
], KompasHeaderAccountProfile.prototype, "manage_account_url", void 0);
|
|
246
323
|
__decorate([
|
|
247
324
|
property({ type: String })
|
|
248
325
|
], KompasHeaderAccountProfile.prototype, "openFrom", void 0);
|
package/dist/src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: String }) openFrom = ''\n /**\n * Props For Grace Period Tracker\n */\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 = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date | string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /**\n * Subs Button Element\n */\n const subscribeButton = () => {\n if (this.userData.isMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom || 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\n </button>\n </div>\n `\n }\n /**\n * membership icon element, show if isMebership has truthy value\n */\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /**\n * Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate) + 1 // differenceInDays + 1 jika tanggal bertepatan di hari yang sama\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft >= 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n return html`\n <div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <p class=\"capitalize font-bold text-base text-blue-600\">\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"KompasHeaderAccountProfile.js","sourceRoot":"","sources":["../../../../src/components/kompasid-header-account-profile/KompasHeaderAccountProfile.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, nothing } from 'lit'\nimport { format, addDays, differenceInDays } from 'date-fns'\nimport { id } from 'date-fns/locale/id'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\nimport { TWStyles } from '../../../tailwind/tailwind.js'\nimport { User } from '../kompasid-header-account/types.js'\nimport { getFontAwesomeIcon } from '../../utils/fontawesome-setup.js'\nimport '../kompasid-grace-period/KompasGracePeriod.js'\n\n@customElement('kompasid-header-account-profile')\nexport class KompasHeaderAccountProfile extends LitElement {\n static styles = [\n css`\n .header-account--membership-icon {\n position: absolute;\n bottom: -2px;\n right: -2px;\n }\n\n .tooltip::after {\n content: '';\n position: absolute;\n width: 24px;\n height: 16px;\n background-color: #333333;\n /* Memotong kotak menjadi segitiga */\n clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n /* Menghaluskan sudut potongan */\n border-radius: 4px;\n }\n `,\n TWStyles,\n ]\n\n /**\n * Props\n */\n @property({ type: String }) userInitialName = ''\n @property({ type: Object }) userData = {} as User\n @property({ type: String }) subscriptionUrl = ''\n @property({ type: String }) company_name = ''\n @property({ type: String }) manage_account_url = ''\n @property({ type: String }) openFrom = ''\n /**\n * Props For Grace Period Tracker\n */\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 = 0\n @property({ type: String }) tracker_page_type = ''\n @property({ type: String }) tracker_content_id = ''\n @property({ type: String }) tracker_content_title = ''\n @property({ type: String }) tracker_content_categories = ''\n @property({ type: String }) tracker_content_type = ''\n @property({ type: String }) tracker_user_type = ''\n @property({ type: String }) tracker_subscription_status = ''\n @property({ type: String }) tracker_page_domain = ''\n @property({ type: String }) tracker_metered_wall_type = ''\n @property({ type: Number }) tracker_metered_wall_balance = 0\n\n /**\n * State\n */\n @state() private maxGracePeriod = 7\n\n formatDate(date: Date | string) {\n return format(new Date(date), 'dd MMM yyyy', { locale: id })\n }\n\n private renderSkeletonLoading() {\n return html`\n <div>\n <div class=\"flex flex-row mb-5 items-center gap-4 leading-none\">\n <div\n class=\"bg-grey-300 py-5 rounded-full h-16 w-16 animate-pulse\"\n ></div>\n <div class=\"flex flex-col text-left w-40 gap-y-2\">\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n <div class=\"h-3 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n <div>\n <div class=\"h-6 rounded-sm w-full bg-grey-300 animate-pulse\"></div>\n </div>\n </div>\n `\n }\n\n private renderProfileContent() {\n /**\n * Subs Button Element\n */\n const subscribeButton = () => {\n if (this.userData.isMembership) {\n return html``\n }\n const handleSubscribe = () => {\n const openFromValue = this.openFrom || 'Sidebar_Menu'\n window.location.href = `${this.subscriptionUrl}?open_from=${openFromValue}`\n }\n\n return html`\n <div class=\"w-full\">\n <button\n @click=${handleSubscribe}\n class=\"w-full rounded-lg px-4 py-3 mt-4 h-10 flex justify-center items-center bg-brand-1 text-grey-100 font-bold text-base focus:outline-none\"\n >\n Berlangganan Sekarang\n </button>\n </div>\n `\n }\n /**\n * membership icon element, show if isMebership has truthy value\n */\n const membershipIcon = () => {\n if (!this.userData?.isMembership) {\n return html``\n }\n\n return html`\n <div>\n <img\n class=\"header-account--membership-icon h-6 w-6\"\n src=\"https://cdn-www.kompas.id/global-header/crown-royal-blue-60.svg\"\n alt=\"membership-crown-icon\"\n />\n </div>\n `\n }\n\n /**\n * Active Info Element\n */\n\n const activeInfoTemplate = () => {\n const { isGracePeriod, totalGracePeriod, expired } = this.userData\n\n let result = html`Tidak Berlangganan` // default\n let endGracePeriodDate = ''\n\n const nowDate = new Date()\n const isoDateString = expired.replace(' ', 'T')\n const expiredDate = new Date(isoDateString)\n const subsDaysLeft: number = differenceInDays(expiredDate, nowDate) + 1 // differenceInDays + 1 jika tanggal bertepatan di hari yang sama\n\n const gracePeriodCard = () => {\n if (isGracePeriod) {\n const totalGraceSubs =\n this.maxGracePeriod - Math.max(totalGracePeriod, 0)\n endGracePeriodDate = this.formatDate(\n addDays(\n new Date(),\n totalGracePeriod > this.maxGracePeriod ? 0 : totalGraceSubs\n )\n )\n }\n const label = 'Periode Masa Tenggang'\n return html`\n <div class=\"text-orange-500 gracePeriodCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${endGracePeriodDate}</p>\n </div>\n `\n }\n\n const lessThan3daysCard = () => {\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"lessThan3daysCard\">\n <span> ${label} </span>\n <p class=\"font-bold\">Berakhir ${subsDaysLeft} hari lagi</p>\n </div>\n `\n }\n\n const moreThan3daysCard = () => {\n const formattedExpired = this.formatDate(expired)\n const label = 'Aktif Berlangganan'\n return html`\n <div class=\"moreThan3daysCard\">\n <span>${label}</span>\n <p class=\"font-bold\">hingga ${formattedExpired}</p>\n </div>\n `\n }\n\n if (isGracePeriod && totalGracePeriod > 0) {\n result = gracePeriodCard()\n } else if (subsDaysLeft >= 0 && subsDaysLeft <= 3) {\n result = lessThan3daysCard()\n } else if (subsDaysLeft > 3) {\n result = moreThan3daysCard()\n }\n\n return html`<p class=\"text-sm text-grey-600 ${subsDaysLeft}-days-left\">\n ${result}\n </p>`\n }\n\n /**\n * Kompeni Element\n */\n const kompeniTemplate = () => html` <div\n class=\"flex relative group bg-[#FFF8D6] text-yellow-700 gap-1 p-2 mt-2 rounded items-center justify-center text-xs max-w-[190px] font-sans leading-none\"\n >\n <div class=\"w-5 h-5 flex items-center justify-center flex-shrink-0\">\n ${unsafeSVG(getFontAwesomeIcon('fa', 'building-circle-check', 13, 10))}\n </div>\n <p class=\"truncate\">${this.company_name}</p>\n <div\n class=\"absolute px-2 top-full -right-[5%] w-max max-w-[300px] mt-1 hidden group-hover:block\"\n >\n <div\n class=\"bg-grey-600 text-white text-sm font-sans p-4 rounded-lg relative leading-5\"\n >\n ${this.company_name}\n <svg\n width=\"16\"\n height=\"12\"\n viewBox=\"0 0 24 13\"\n class=\"text-grey-600 absolute left-[80%] -top-[11px]\"\n >\n <polygon\n points=\"3,15 12,3 21,15\"\n fill=\"currentColor\"\n stroke=\"currentColor\"\n stroke-width=\"4\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>`\n\n return html`\n <div\n class=\"active-info flex flex-col items-start leading-none text-left font-sans\"\n >\n <div class=\"flex flex-row items-center gap-4\">\n <div\n @click=${() => this.clickToManageAccount()}\n @keydown=${() => this.clickToManageAccount()}\n class=\"flex bg-brand-1 flex-shrink-0 p-5 rounded-full h-16 w-16 items-center justify-center relative select-none ${this\n .manage_account_url\n ? 'cursor-pointer'\n : ''}\"\n >\n <span class=\"capitalize text-2xl text-grey-100 font-bold\">\n ${this.userInitialName}\n </span>\n ${membershipIcon()}\n </div>\n\n <div class=\"flex flex-col text-left\">\n <div\n @click=${() => this.clickToManageAccount()}\n @keydown=${() => this.clickToManageAccount()}\n class=\"select-none\"\n >\n <p\n class=\"capitalize font-bold text-base ${this.manage_account_url\n ? 'text-blue-600 cursor-pointer'\n : 'text-grey-600'}\"\n >\n ${this.userData.userName}\n </p>\n ${activeInfoTemplate()}\n </div>\n ${this.company_name ? kompeniTemplate() : nothing}\n </div>\n </div>\n\n ${this.userData?.isGracePeriod\n ? html` <div class=\"mt-4 kompasid-grace-period\">\n <kompasid-grace-period\n totalGracePeriod=${this.userData.totalGracePeriod}\n isColumn=\"true\"\n isShowButton=\"true\"\n isBackgroundOnContentOnly=\"true\"\n paywall_location=${this.paywall_location}\n paywall_subscription_package=${this\n .paywall_subscription_package}\n paywall_subscription_id=${this.paywall_subscription_id}\n paywall_subscription_price=${this.paywall_subscription_price}\n paywall_position=${this.paywall_position}\n tracker_page_type=${this.tracker_page_type}\n tracker_content_id=${this.tracker_content_id}\n tracker_content_title=${this.tracker_content_title}\n tracker_content_categories=${this.tracker_content_categories}\n tracker_content_type=${this.tracker_content_type}\n tracker_user_type=${this.tracker_user_type}\n tracker_subscription_status=${this.tracker_subscription_status}\n tracker_page_domain=${this.tracker_page_domain}\n tracker_metered_wall_type=${this.tracker_metered_wall_type}\n tracker_metered_wall_balance=${this\n .tracker_metered_wall_balance}\n ></kompasid-grace-period>\n </div>`\n : subscribeButton()}\n </div>\n `\n }\n clickToManageAccount() {\n if (this.manage_account_url) {\n window.location.href = this.manage_account_url\n }\n }\n\n override async connectedCallback() {\n super.connectedCallback()\n }\n\n render() {\n return html`\n <div class=\"flex flex-shrink-0 flex-col p-4\">\n ${!this.userData\n ? this.renderSkeletonLoading()\n : this.renderProfileContent()}\n </div>\n <hr class=\"border-grey-300 mx-4\" />\n `\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Product {\n title: string\n percentage: number\n price: number\n priceSlice: number\n discountPrice: number\n savingPrice: number\n saveLabel: string\n periode: string\n isHighlight: boolean\n isButtonSolid: boolean\n url: string\n package: string\n subscriptionId: string\n position: number\n}\nexport interface Metered {\n maxQuota: number\n label: string\n maxQuotaMessage: string\n url: string\n}\nexport interface PaymentImage {\n name: string\n link: string\n}\nexport interface Registration {\n img: string\n title: string\n subtitle: string\n label: string\n}\nexport interface Informations {\n title: string\n description: Array<string>\n register: {\n img: string\n title: string\n subtitle: string\n label: string\n }\n}\nexport interface FreeTrial {\n packageText: string\n desktopText: string\n mobileText: string\n}\nexport interface SwgContentData {\n duration: string\n price: string\n description: string\n}\n\nexport interface SwgContent {\n introductory: SwgContentData\n default: SwgContentData\n}\n\nexport interface Packages {\n title: string\n memberships: Array<Product>\n swgEnable: boolean\n freeTrial: FreeTrial\n swgContent: SwgContent\n}\n\nexport interface ctaPaywall {\n show: boolean\n text: string\n url: string\n}\n\nexport interface PaywallProduct {\n informations: {\n title: string\n excerpt: string\n description: Array<string>\n register: Registration\n meterred: Metered\n cta: ctaPaywall\n typeVariant: string\n }\n packages: Packages\n payment: {\n desktop: Array<PaymentImage>\n mobile: Array<PaymentImage>\n ekstension: Array<PaymentImage>\n }\n}\nexport type PaywallType =\n | 'proMiningArticle'\n | 'proMiningOutlook'\n | 'epaper'\n | 'reguler'\n | 'audio'\n | 'custom'\n\nexport interface Contextual {\n variant: string\n tags: string[]\n articleAgeTreshold: number\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kompasid-paywall/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface Product {\n title: string\n percentage: number\n price: number\n priceSlice: number\n discountPrice: number\n savingPrice: number\n saveLabel: string\n labelPackage: string\n periode: string\n isHighlight: boolean\n isButtonSolid: boolean\n url: string\n package: string\n subscriptionId: string\n position: number\n}\nexport interface Metered {\n maxQuota: number\n label: string\n maxQuotaMessage: string\n url: string\n}\nexport interface PaymentImage {\n name: string\n link: string\n}\nexport interface Registration {\n img: string\n title: string\n subtitle: string\n label: string\n}\nexport interface Informations {\n title: string\n description: Array<string>\n register: {\n img: string\n title: string\n subtitle: string\n label: string\n }\n}\nexport interface FreeTrial {\n packageText: string\n desktopText: string\n mobileText: string\n}\nexport interface SwgContentData {\n duration: string\n price: string\n description: string\n}\n\nexport interface SwgContent {\n introductory: SwgContentData\n default: SwgContentData\n}\n\nexport interface Packages {\n title: string\n memberships: Array<Product>\n swgEnable: boolean\n freeTrial: FreeTrial\n swgContent: SwgContent\n}\n\nexport interface ctaPaywall {\n show: boolean\n text: string\n url: string\n}\n\nexport interface PaywallProduct {\n informations: {\n title: string\n excerpt: string\n description: Array<string>\n register: Registration\n meterred: Metered\n cta: ctaPaywall\n typeVariant: string\n }\n packages: Packages\n payment: {\n desktop: Array<PaymentImage>\n mobile: Array<PaymentImage>\n ekstension: Array<PaymentImage>\n }\n}\nexport type PaywallType =\n | 'proMiningArticle'\n | 'proMiningOutlook'\n | 'epaper'\n | 'reguler'\n | 'audio'\n | 'custom'\n\nexport interface Contextual {\n variant: string\n tags: string[]\n articleAgeTreshold: number\n}\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
2
|
import { PaywallProduct, Packages, PaywallType } from '../kompasid-paywall/types.js';
|
|
3
|
+
import '../kompasid-paywall-modal-register/KompasPaywallModalRegister.js';
|
|
3
4
|
export declare class KompasIdPaywallBody extends LitElement {
|
|
4
5
|
static styles: import("lit").CSSResult[];
|
|
5
6
|
/**
|
|
@@ -12,6 +12,7 @@ import { redirectToLogin } from '../../utils/cta.js';
|
|
|
12
12
|
import { customFetch } from '../../utils/customFetch.js';
|
|
13
13
|
import { getCookie } from '../../utils/getCookies.js';
|
|
14
14
|
import { getLoginGuest } from '../../utils/api/getLoginGuest.js';
|
|
15
|
+
import '../kompasid-paywall-modal-register/KompasPaywallModalRegister.js';
|
|
15
16
|
let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
16
17
|
/**
|
|
17
18
|
* Getter
|
|
@@ -424,6 +425,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
424
425
|
});
|
|
425
426
|
}
|
|
426
427
|
sendDataLayeronButtonBuyPackage(name, id, price, position) {
|
|
428
|
+
var _a, _b;
|
|
427
429
|
const gtmParams = {
|
|
428
430
|
event: 'subscribe_button_clicked',
|
|
429
431
|
paywall_location: this.paywall_location,
|
|
@@ -436,6 +438,10 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
436
438
|
page_domain: this.tracker_page_domain || 'Kompas.id',
|
|
437
439
|
metered_wall_type: this.tracker_metered_wall_type || 'HP',
|
|
438
440
|
metered_wall_balance: this.tracker_metered_wall_balance,
|
|
441
|
+
content_tags: this.tracker_content_tags || '',
|
|
442
|
+
content_published_date: this.tracker_content_published_date || '',
|
|
443
|
+
content_variant: this.tracker_content_variant || '',
|
|
444
|
+
variant: ((_b = (_a = this.paywallData) === null || _a === void 0 ? void 0 : _a.informations) === null || _b === void 0 ? void 0 : _b.typeVariant) || '',
|
|
439
445
|
};
|
|
440
446
|
if (this.type !== 'epaper') {
|
|
441
447
|
gtmParams.content_title = this.tracker_content_title;
|
|
@@ -692,7 +698,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
692
698
|
}
|
|
693
699
|
renderPackage(product, isHighlight, isButtonSolid) {
|
|
694
700
|
const { isDark } = this;
|
|
695
|
-
const containerClass = `px-4 flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 min-h-[68px]
|
|
701
|
+
const containerClass = `px-4 py-4 flex flex-wrap items-center justify-between rounded-lg md:mx-0 w-full max-w-xs md:max-w-sm md:w-3/5 min-h-[68px]
|
|
696
702
|
${isDark ? ' bg-grey-600' : ' bg-white'}
|
|
697
703
|
${isHighlight ? 'outline-yellow-400 outline-2 outline mt-2' : ''} relative`;
|
|
698
704
|
const textColorClass = isDark ? 'text-dark-7' : 'text-grey-600';
|
|
@@ -722,6 +728,12 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
722
728
|
return html `
|
|
723
729
|
<div class="${containerClass}">
|
|
724
730
|
<div class="flex flex-col gap-1">
|
|
731
|
+
<span
|
|
732
|
+
class="${product.labelPackage
|
|
733
|
+
? 'block text-grey-500 text-xs font-sans leading-none'
|
|
734
|
+
: 'hidden'}"
|
|
735
|
+
>${product.labelPackage}</span
|
|
736
|
+
>
|
|
725
737
|
<div class="flex items-baseline">
|
|
726
738
|
<h5 class="text-base font-bold text-orange-400 leading-none">
|
|
727
739
|
${formatRupiah(product.price)}
|
|
@@ -781,6 +793,7 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
781
793
|
`;
|
|
782
794
|
}
|
|
783
795
|
packagesSection(data) {
|
|
796
|
+
const isPro = this.type === 'proMiningArticle' || this.type === 'proMiningOutlook';
|
|
784
797
|
return html `
|
|
785
798
|
<div
|
|
786
799
|
class="flex flex-col w-full items-center gap-2 md:gap-3 mt-4 md:mt-5"
|
|
@@ -788,6 +801,14 @@ let KompasIdPaywallBody = class KompasIdPaywallBody extends LitElement {
|
|
|
788
801
|
${data.memberships.map(item => this.renderPackage(item, item.isHighlight, item.isButtonSolid))}
|
|
789
802
|
${this.freeTrialPackageSection()} ${this.freeTrialPopUp()}
|
|
790
803
|
${this.packages.swgEnable ? this.swgPackageSection() : nothing}
|
|
804
|
+
${isPro
|
|
805
|
+
? html `
|
|
806
|
+
<kompasid-paywall-modal-register
|
|
807
|
+
class="w-full max-w-xs md:max-w-sm"
|
|
808
|
+
>
|
|
809
|
+
</kompasid-paywall-modal-register>
|
|
810
|
+
`
|
|
811
|
+
: nothing}
|
|
791
812
|
</div>
|
|
792
813
|
`;
|
|
793
814
|
}
|