feat(frontend): adds vip qr code modal #3991
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| <script lang="ts"> | ||
| import { Modal, QRCode } from '@dfinity/gix-components'; | ||
| import { isNullish, nonNullish } from '@dfinity/utils'; | ||
| import { onDestroy, onMount } from 'svelte'; | ||
| import IconAstronautHelmet from '$lib/components/icons/IconAstronautHelmet.svelte'; | ||
| import ReceiveCopy from '$lib/components/receive/ReceiveCopy.svelte'; | ||
| import Button from '$lib/components/ui/Button.svelte'; | ||
| import ButtonCloseModal from '$lib/components/ui/ButtonCloseModal.svelte'; | ||
| import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte'; | ||
| import ContentWithToolbar from '$lib/components/ui/ContentWithToolbar.svelte'; | ||
| import SkeletonText from '$lib/components/ui/SkeletonText.svelte'; | ||
| import { VIP_CODE_REGENERATE_INTERVAL_IN_SECONDS } from '$lib/constants/app.constants'; | ||
| import { | ||
| VIP_CODE_REGENERATE_BUTTON, | ||
| VIP_QR_CODE_COPY_BUTTON | ||
| } from '$lib/constants/test-ids.constants'; | ||
| import { authIdentity } from '$lib/derived/auth.derived'; | ||
| import { nullishSignOut } from '$lib/services/auth.services'; | ||
| import { getNewReward } from '$lib/services/reward-code.services'; | ||
| import { i18n } from '$lib/stores/i18n.store'; | ||
| import { modalStore } from '$lib/stores/modal.store'; | ||
| import { replacePlaceholders } from '$lib/utils/i18n.utils'; | ||
|
|
||
| let counter = VIP_CODE_REGENERATE_INTERVAL_IN_SECONDS; | ||
| let countdown: NodeJS.Timeout | undefined; | ||
| const maxRetriesToGetRewardCode = 3; | ||
| let retriesToGetRewardCode = 0; | ||
|
|
||
| let code: string; | ||
| const generateCode = async () => { | ||
| if (isNullish($authIdentity)) { | ||
| await nullishSignOut(); | ||
| return; | ||
| } | ||
|
|
||
| const vipReward = await getNewReward($authIdentity); | ||
| if (nonNullish(vipReward)) { | ||
| code = vipReward.code; | ||
| } else { | ||
| retriesToGetRewardCode++; | ||
| } | ||
| }; | ||
|
|
||
| const regenerateCode = async () => { | ||
| clearInterval(countdown); | ||
|
|
||
| if (retriesToGetRewardCode >= maxRetriesToGetRewardCode) { | ||
| return; | ||
| } | ||
|
|
||
| await generateCode(); | ||
| counter = VIP_CODE_REGENERATE_INTERVAL_IN_SECONDS; | ||
| countdown = setInterval(intervalFunction, 1000); | ||
| }; | ||
|
|
||
| const intervalFunction = async () => { | ||
| counter--; | ||
|
|
||
| if (counter === 0) { | ||
peterpeterparker marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| await regenerateCode(); | ||
| } | ||
| }; | ||
|
|
||
| const onVisibilityChange = () => { | ||
| if (document.hidden) { | ||
| clearInterval(countdown); | ||
| } else { | ||
| countdown = setInterval(intervalFunction, 1000); | ||
| } | ||
| }; | ||
|
|
||
| onMount(regenerateCode); | ||
| onDestroy(() => clearInterval(countdown)); | ||
|
|
||
| let qrCodeUrl; | ||
| $: qrCodeUrl = `${window.location.origin}/?code=${code}`; | ||
peterpeterparker marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </script> | ||
|
|
||
| <svelte:window on:visibilitychange={onVisibilityChange} /> | ||
|
|
||
| <Modal on:nnsClose={modalStore.close}> | ||
| <svelte:fragment slot="title" | ||
| ><span class="text-xl">{$i18n.vip.invitation.text.title}</span> | ||
| </svelte:fragment> | ||
|
|
||
| <ContentWithToolbar> | ||
| <div class="mx-auto mb-4 aspect-square h-80 max-h-[44vh] max-w-full p-4"> | ||
| {#if nonNullish(code)} | ||
| <QRCode value={qrCodeUrl}> | ||
| <div slot="logo" class="flex items-center justify-center rounded-lg bg-white p-2"> | ||
|
There was a problem hiding this comment. shouldn't <div slot="logo" class="mx-auto mb-4 aspect-square h-80 max-h-[44vh] max-w-full p-4">
{#if nonNullish(code)}
<QRCode value={qrCodeUrl}>
<div class="flex items-center justify-center rounded-lg bg-white p-2">There was a problem hiding this comment. @AntonioVentilii No it is a part of the QRCode |
||
| <IconAstronautHelmet /> | ||
| </div> | ||
| </QRCode> | ||
| {/if} | ||
| </div> | ||
|
|
||
| {#if nonNullish(code)} | ||
| <div class="flex items-center justify-between gap-4 rounded-lg bg-brand-subtle px-3 py-2"> | ||
| <output>{qrCodeUrl}</output> | ||
| <ReceiveCopy | ||
| address={qrCodeUrl} | ||
| copyAriaLabel={$i18n.vip.invitation.text.invitation_link_copied} | ||
| testId={VIP_QR_CODE_COPY_BUTTON} | ||
| /> | ||
| </div> | ||
|
|
||
| <span class="mb-4 block w-full pt-3 text-center text-sm text-tertiary"> | ||
|
There was a problem hiding this comment. i think There was a problem hiding this comment. No, it's not default |
||
| {#if 0 >= counter} | ||
| <span class="animate-pulse">{$i18n.vip.invitation.text.generating_new_code}</span> | ||
| {:else} | ||
| {replacePlaceholders($i18n.vip.invitation.text.regenerate_countdown_text, { | ||
| $counter: counter.toString() | ||
| })} | ||
| {/if} | ||
| </span> | ||
| {:else} | ||
| <span class="w-full"><SkeletonText /></span> | ||
| {/if} | ||
|
|
||
| <ButtonGroup styleClass="flex-col sm:flex-row" slot="toolbar"> | ||
|
There was a problem hiding this comment. not really sure about this: we don't do it in any of the modals, nor in any usage of the Buttons... if we are going to change it, better to do it in another PR for all the There was a problem hiding this comment. @AntonioVentilii What exactly do you mean with
I mean like this we just enable to add some custom styling to the element There was a problem hiding this comment. indeed, but why only for this modal? why not for all? There was a problem hiding this comment. It's defined like this in the design. The buttons should swap the alignment if the page gets smaller. To achieve this on this modal we need something like this. There was a problem hiding this comment. still not convinced about this... may you please double-check with design (especially if it's ONLY for this modal)? furthermore, will the "Close" button go up or down when it is vertical (i.e.
There was a problem hiding this comment. @AntonioVentilii @artkorotkikh-dfinity just wrote me that he updated the designs. |
||
| <ButtonCloseModal /> | ||
| <Button | ||
| paddingSmall | ||
| colorStyle="primary" | ||
| type="button" | ||
| fullWidth | ||
| on:click={regenerateCode} | ||
| testId={VIP_CODE_REGENERATE_BUTTON} | ||
| > | ||
| {$i18n.vip.invitation.text.generate_new_link} | ||
| </Button> | ||
| </ButtonGroup> | ||
| </ContentWithToolbar> | ||
| </Modal> | ||
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 |
|---|---|---|
| @@ -1,7 +1,8 @@ | ||
| <script lang="ts"> | ||
| export let testId: string | undefined = undefined; | ||
| export let styleClass = ''; | ||
| </script> | ||
|
|
||
| <div class={`mb-2 flex w-full gap-3 ${styleClass}`} data-tid={testId}> | ||
| <slot /> | ||
| </div> |
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
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
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
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 @@ | ||
| import type { NewVipRewardResponse } from '$declarations/rewards/rewards.did'; | ||
| import * as rewardApi from '$lib/api/reward.api'; | ||
| import VipQrCodeModal from '$lib/components/qr/VipQrCodeModal.svelte'; | ||
| import { | ||
| VIP_CODE_REGENERATE_BUTTON, | ||
| VIP_QR_CODE_COPY_BUTTON | ||
| } from '$lib/constants/test-ids.constants'; | ||
| import * as authStore from '$lib/derived/auth.derived'; | ||
| import { mockIdentity } from '$tests/mocks/identity.mock'; | ||
| import type { Identity } from '@dfinity/agent'; | ||
| import { render, waitFor } from '@testing-library/svelte'; | ||
| import { readable } from 'svelte/store'; | ||
| import { vi } from 'vitest'; | ||
|
|
||
| describe('VipQrCodeModal', () => { | ||
| const qrCodeSelector = `div[data-tid="qr-code"]`; | ||
| const urlSelector = `output`; | ||
| const copyButtonSelector = `button[data-tid=${VIP_QR_CODE_COPY_BUTTON}]`; | ||
| const regenerateButtonSelector = `button[data-tid=${VIP_CODE_REGENERATE_BUTTON}]`; | ||
|
|
||
| const mockAuthStore = (value: Identity | null = mockIdentity) => | ||
| vi.spyOn(authStore, 'authIdentity', 'get').mockImplementation(() => readable(value)); | ||
|
|
||
| const mockedNewRewardResponse: NewVipRewardResponse = { | ||
| VipReward: { | ||
| code: '1234567890' | ||
| } | ||
| }; | ||
|
|
||
| it('should render the vip qr code modal items', async () => { | ||
| mockAuthStore(); | ||
| vi.spyOn(rewardApi, 'getNewVipReward').mockResolvedValue(mockedNewRewardResponse); | ||
|
|
||
| const { container } = render(VipQrCodeModal); | ||
|
|
||
| await waitFor(() => { | ||
| const qrCode: HTMLDivElement | null = container.querySelector(qrCodeSelector); | ||
| const qrCodeURL: HTMLOutputElement | null = container.querySelector(urlSelector); | ||
| const copyButton: HTMLButtonElement | null = container.querySelector(copyButtonSelector); | ||
| const regenerateButton: HTMLButtonElement | null = | ||
| container.querySelector(regenerateButtonSelector); | ||
|
|
||
| if ( | ||
| qrCode === null || | ||
| qrCodeURL === null || | ||
| copyButton === null || | ||
| regenerateButton === null | ||
| ) { | ||
| throw new Error('one of the elements is not yet loaded.'); | ||
| } | ||
|
|
||
| expect(qrCode).toBeInTheDocument(); | ||
|
|
||
| expect(qrCodeURL).toBeInTheDocument(); | ||
| expect(qrCodeURL?.textContent?.includes(mockedNewRewardResponse.VipReward.code)); | ||
|
|
||
| expect(copyButton).toBeInTheDocument(); | ||
|
|
||
| expect(regenerateButton).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| it('should regenerate reward code', async () => { | ||
| const regeneratedNewRewardResponse: NewVipRewardResponse = { | ||
| VipReward: { | ||
| code: '0987654321' | ||
| } | ||
| }; | ||
|
|
||
| mockAuthStore(); | ||
| vi.spyOn(rewardApi, 'getNewVipReward').mockResolvedValue(mockedNewRewardResponse); | ||
|
|
||
| const { container } = render(VipQrCodeModal); | ||
|
|
||
| await waitFor(() => { | ||
| const qrCodeURL: HTMLOutputElement | null = container.querySelector(urlSelector); | ||
| const regenerateButton: HTMLButtonElement | null = | ||
| container.querySelector(regenerateButtonSelector); | ||
|
|
||
| if (qrCodeURL === null || regenerateButton === null) { | ||
| throw new Error('one of the elements is not yet loaded.'); | ||
| } | ||
|
|
||
| expect(qrCodeURL).toBeInTheDocument(); | ||
| expect(qrCodeURL?.textContent?.includes(mockedNewRewardResponse.VipReward.code)); | ||
|
|
||
| expect(regenerateButton).toBeInTheDocument(); | ||
|
|
||
| vi.spyOn(rewardApi, 'getNewVipReward').mockResolvedValue(regeneratedNewRewardResponse); | ||
| regenerateButton.click(); | ||
| }); | ||
|
|
||
| await waitFor(() => { | ||
| const reloadedQrCodeUrl: HTMLOutputElement | null = container.querySelector(urlSelector); | ||
|
|
||
| if ( | ||
| reloadedQrCodeUrl === null || | ||
| !reloadedQrCodeUrl?.textContent?.includes(regeneratedNewRewardResponse.VipReward.code) | ||
| ) { | ||
| throw new Error('reward code not yet reloaded.'); | ||
| } | ||
|
|
||
| expect(reloadedQrCodeUrl?.textContent?.includes(regeneratedNewRewardResponse.VipReward.code)); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
shouldn't the retries be asserted here? With the current implementation, we might indeed prevent any further calls, but the countdown would still proceed. Not a strong opinion, just a thought.