-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #159 from pt-kompas-media-nusantara/feat/81062-imp…
…rovement-metered-paywall [Feat] 81062 Create Metered Register Component
- Loading branch information
Showing
10 changed files
with
497 additions
and
127 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
src/components/kompas-metered-register/kompas-metered-register.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| .body { | ||
| position: sticky; | ||
| top: 0; | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .chevron-down { | ||
| transform: rotate(180deg); | ||
| -webkit-transform: rotate(180deg); | ||
| transition: transform 0.2s ease-out; | ||
| } | ||
|
|
||
| .icon { | ||
| @apply h-3 w-3; | ||
|
|
||
| &.lg { | ||
| @apply h-6; | ||
|
|
||
| & svg { | ||
| @apply h-6; | ||
| } | ||
| } | ||
|
|
||
| &-blue-600 { | ||
| @apply text-blue-600; | ||
| & svg { | ||
| @apply fill-current; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @screen sm { | ||
| .banner-opened { | ||
| height: 400px; | ||
| } | ||
| } |
11 changes: 11 additions & 0 deletions
11
src/components/kompas-metered-register/kompas-metered-register.e2e.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { newE2EPage } from '@stencil/core/testing'; | ||
|
|
||
| describe('kompas-metered-register', () => { | ||
| it('renders', async () => { | ||
| const page = await newE2EPage(); | ||
| await page.setContent('<kompas-metered-register></kompas-metered-register>'); | ||
|
|
||
| const element = await page.find('kompas-metered-register'); | ||
| expect(element).toHaveClass('hydrated'); | ||
| }); | ||
| }); |
106 changes: 106 additions & 0 deletions
106
src/components/kompas-metered-register/kompas-metered-register.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| jest.mock('../../../assets/fontawesome-free-5.15.3-web/svgs/solid/chevron-down.svg', () => ({ chevronDown: '' })); | ||
| jest.mock('../../../assets/fontawesome-free-5.15.3-web/svgs/solid/chevron-up.svg', () => ({ chevronUp: '' })); | ||
|
|
||
| import { newSpecPage } from '@stencil/core/testing'; | ||
| import { KompasMeteredRegister } from './kompas-metered-register'; | ||
|
|
||
| describe('kompas-metered-register', () => { | ||
| // countdown-article = 0 or nothing passed | ||
| it('should renders nothing', async () => { | ||
| const page = await newSpecPage({ | ||
| components: [KompasMeteredRegister], | ||
| html: `<kompas-metered-register></kompas-metered-register>`, | ||
| }); | ||
| expect(page.root).toEqualHtml(` | ||
| <kompas-metered-register> | ||
| <mock:shadow-root> | ||
| </mock:shadow-root> | ||
| </kompas-metered-register> | ||
| `); | ||
| }); | ||
|
|
||
| // countdown-article = 1 | ||
| it('should renders content for last article quota', async () => { | ||
| const page = await newSpecPage({ | ||
| components: [KompasMeteredRegister], | ||
| html: `<kompas-metered-register countdown-article=1></kompas-metered-register>`, | ||
| }); | ||
| expect(page.root).toEqualHtml(` | ||
| <kompas-metered-register countdown-article=1> | ||
| <mock:shadow-root> | ||
| <div class="bottom-0 h-full sticky w-full"> | ||
| <div class="bg-blue-100 bottom-0 px-4 py-4 w-full xl:px-0"> | ||
| <div class="flex justify-center lg:max-w-7xl m-auto relative"> | ||
| <div class="flex flex-col"> | ||
| <div class="block gap-8 items-center justify-center lg:flex md:text-lg ml-auto self-center text-grey-600 text-left text-sm"> | ||
| <div class="font-lora mb-3 md:mb-0 md:mt-0 md:px-0 md:text-lg mt-1 pr-14 text-base"> | ||
| <span> | ||
| Ini Adalah | ||
| <b> | ||
| Artikel Gratis Terakhir | ||
| </b> | ||
| Anda. | ||
| <b> | ||
| Daftar Akun untuk Terus Membaca. | ||
| </b> | ||
| </span> | ||
| </div> | ||
| <div class="md:self-center"> | ||
| <button class="bg-green-500 font-bold md:text-base md:w-auto p-1.5 px-5 rounded-md text-grey-100 text-sm w-full"> | ||
| Daftar Akun | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="absolute right-0 top-0.5"> | ||
| <button class="bg-blue-200 p-2.5 rounded-md"> | ||
| <div class="false icon icon-blue-600"></div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </mock:shadow-root> | ||
| </kompas-metered-register> | ||
| `); | ||
| }); | ||
|
|
||
| // countdown-article = 2 ( > 1 ) | ||
| it('should renders content for article quota more than one', async () => { | ||
| const page = await newSpecPage({ | ||
| components: [KompasMeteredRegister], | ||
| html: `<kompas-metered-register countdown-article=2></kompas-metered-register>`, | ||
| }); | ||
| expect(page.root).toEqualHtml(` | ||
| <kompas-metered-register countdown-article=2> | ||
| <mock:shadow-root> | ||
| <div class="bottom-0 h-full sticky w-full"> | ||
| <div class="bg-blue-100 bottom-0 px-4 py-4 w-full xl:px-0"> | ||
| <div class="flex justify-center lg:max-w-7xl m-auto relative"> | ||
| <div class="flex flex-col"> | ||
| <div class="block gap-8 items-center justify-center lg:flex md:text-lg ml-auto self-center text-grey-600 text-left text-sm"> | ||
| <div class="font-lora mb-3 md:mb-0 md:mt-0 md:px-0 md:text-lg mt-1 pr-14 text-base"> | ||
| <b> | ||
| Dukung Jurnalisme Berkualitas dengan Mendaftar Akun Kompas.id. | ||
| </b> | ||
| </div> | ||
| <div class="md:self-center"> | ||
| <button class="bg-green-500 font-bold md:text-base md:w-auto p-1.5 px-5 rounded-md text-grey-100 text-sm w-full"> | ||
| Daftar Akun | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="absolute right-0 top-0.5"> | ||
| <button class="bg-blue-200 p-2.5 rounded-md"> | ||
| <div class="false icon icon-blue-600"></div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </mock:shadow-root> | ||
| </kompas-metered-register> | ||
| `); | ||
| }); | ||
| }); |
131 changes: 131 additions & 0 deletions
131
src/components/kompas-metered-register/kompas-metered-register.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| import { Component, h, State, Prop, Fragment, Host } from '@stencil/core'; | ||
| import chevronUp from '../../../assets/fontawesome-free-5.15.3-web/svgs/solid/chevron-up.svg'; | ||
|
|
||
| @Component({ | ||
| tag: 'kompas-metered-register', | ||
| styleUrl: 'kompas-metered-register.css', | ||
| shadow: true, | ||
| }) | ||
| export class KompasMeteredRegister { | ||
| /** | ||
| * state | ||
| */ | ||
| /** | ||
| * state registerUrl untuk memberikan link kemana user akan dialihkan. | ||
| */ | ||
| @State() registerUrl: string = 'https://account.kompas.cloud/register'; | ||
| @State() isShowBanner: boolean = true; | ||
| @State() isExpandBanner: boolean = false; | ||
| /** | ||
| * prop countdownArticle untuk menghandle sudah berapa artikel gratis yang user baca. | ||
| */ | ||
| @Prop() countdownArticle: number = 0; | ||
|
|
||
| /** | ||
| * mengelola tampilan pada section metered register | ||
| */ | ||
| private bannerContent(): void { | ||
| if (!this.isExpandBanner) { | ||
| return ( | ||
| <Fragment> | ||
| <div class="text-base md:text-lg font-lora mb-3 mt-1 md:mb-0 md:mt-0 pr-14 md:px-0"> | ||
| {this.countdownArticle > 1 ? ( | ||
| <b>Dukung Jurnalisme Berkualitas dengan Mendaftar Akun Kompas.id.</b> | ||
| ) : ( | ||
| <span> | ||
| Ini Adalah <b>Artikel Gratis Terakhir</b> Anda. <b>Daftar Akun untuk Terus Membaca.</b> | ||
| </span> | ||
| )} | ||
| </div> | ||
| <div class="md:self-center">{this.registerButtonTemplate()}</div> | ||
| </Fragment> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <Fragment> | ||
| <div class="flex flex-col-reverse md:flex-row justify-center gap-4 md:gap-8"> | ||
| <div class="flex flex-col justify-evenly text-center md:text-left md:w-5/12 gap-4 md:gap-2"> | ||
| <p class="text-lg md:text-2xl font-lora"> | ||
| {this.countdownArticle > 1 ? ( | ||
| <b>Tertarik dengan Artikel Ini? Daftar untuk Akses Artikel Menarik Lainnya</b> | ||
| ) : ( | ||
| <span> | ||
| Anda Sedang Membaca <b>Artikel Premium Gratis Terakhir</b> dari Kompas.id | ||
| </span> | ||
| )} | ||
| </p> | ||
| <p class="text-sm md:text-base"> | ||
| {this.countdownArticle > 1 ? ( | ||
| <Fragment>Dapatkan akses ke beragam konten dan fitur premium Kompas.id.</Fragment> | ||
| ) : ( | ||
| <Fragment>Ayo daftar akun untuk akses ke beragam artikel dan fitur premium.</Fragment> | ||
| )}{' '} | ||
| Anda juga mendukung jurnalisme berkualitas dengan mendaftar akun. | ||
| </p> | ||
| <div class="md:self-start">{this.registerButtonTemplate()}</div> | ||
| </div> | ||
| <div class="flex justify-center"> | ||
| <img src="https://d3w4qaq4xm1ncv.cloudfront.net/paywall-asset/paywall_ilustrasi3-03_1.png" class="h-40 w-40 md:w-full md:h-full" /> | ||
| </div> | ||
| </div> | ||
| </Fragment> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * template button register | ||
| */ | ||
| private registerButtonTemplate = (): void => { | ||
| return ( | ||
| <button onClick={this.redirectToRegister} class="bg-green-500 p-1.5 w-full md:w-auto rounded-md font-bold text-grey-100 px-5 text-sm md:text-base"> | ||
| Daftar Akun | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| private bannerTemplate = (): void => { | ||
| return ( | ||
| <Fragment> | ||
| <div class="block lg:flex items-center justify-center gap-8 text-grey-600 text-sm md:text-lg self-center text-left ml-auto">{this.bannerContent()}</div> | ||
| </Fragment> | ||
| ); | ||
| }; | ||
|
|
||
| private redirectToRegister = (): void => { | ||
| window.location.href = this.registerUrl; | ||
| }; | ||
|
|
||
| private triggerExpandBanner = (): void => { | ||
| this.isExpandBanner = !this.isExpandBanner; | ||
| }; | ||
|
|
||
| componentWillLoad() { | ||
| const getCountdown = this.countdownArticle; | ||
| if (!getCountdown) { | ||
| this.isShowBanner = false; | ||
| return; | ||
| } | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <Host> | ||
| {this.isShowBanner ? ( | ||
| <div class="sticky bottom-0 w-full h-full"> | ||
| <div class={`w-full bg-blue-100 px-4 xl:px-0 bottom-0 py-4`}> | ||
| <div class="flex lg:max-w-7xl m-auto justify-center relative"> | ||
| <div class="flex flex-col">{this.bannerTemplate()}</div> | ||
| <div class="absolute right-0 top-0.5"> | ||
| <button onClick={this.triggerExpandBanner} class="bg-blue-200 p-2.5 rounded-md "> | ||
| <div class={`icon icon-blue-600 ${this.isExpandBanner && 'chevron-down'}`} innerHTML={chevronUp}></div> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) : null} | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
Oops, something went wrong.