-
Notifications
You must be signed in to change notification settings - Fork 13
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 #147 from dimak1/feat/info-modal
Add Modal for Account Setup Help
- Loading branch information
Showing
14 changed files
with
244 additions
and
16 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <script setup lang="ts"> | ||
| const { t } = useTranslation() | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="flex flex-col" data-test-id="contact-info"> | ||
| <div class="contact-info-detail d:items-center"> | ||
| <UIcon name="i-mdi-phone" class="m:w-[20px] m:mt-1" /> | ||
| <span>{{ t('bcrosContactInfo.tollFree.label') }} | ||
| <a :href="`tel:${t('bcrosContactInfo.tollFree.value')}`"> | ||
| {{ t('bcrosContactInfo.tollFree.value') }} | ||
| </a> | ||
| </span> | ||
| </div> | ||
| <div class="contact-info-detail items-center"> | ||
| <UIcon name="i-mdi-phone" /> | ||
| <span>{{ t('bcrosContactInfo.local.label') }} | ||
| <a :href="`tel:${t('bcrosContactInfo.local.value')}`"> | ||
| {{ t('bcrosContactInfo.local.value') }} | ||
| </a> | ||
| </span> | ||
| </div> | ||
| <div class="contact-info-detail items-center"> | ||
| <UIcon name="i-mdi-email" /> | ||
| <span>{{ t('bcrosContactInfo.email.label') }} | ||
| <a :href="`mailto:${t('bcrosContactInfo.email.value')}`"> | ||
| {{ t('bcrosContactInfo.email.value') }} | ||
| </a> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .contact-info-detail { | ||
| @apply flex space-x-2; | ||
| } | ||
| a { | ||
| @apply break-keep whitespace-nowrap; | ||
| } | ||
| .iconify { | ||
| @apply bg-bcGovColor-nonClickable; | ||
| } | ||
| </style> |
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,86 @@ | ||
| <script setup lang="ts"> | ||
| import BcrosContactInfo from '~/components/common/BcrosContactInfo.vue' | ||
| const { t } = useTranslation() | ||
| const isOpen = ref(false) | ||
| const props = defineProps<{ | ||
| header: string | ||
| openButtonLabel?: string | ||
| openButtonIcon?: string | ||
| hideContactInfo?: boolean | ||
| }>() | ||
| const { header, hideContactInfo = false, openButtonLabel, openButtonIcon = 'i-mdi-help-circle-outline' } = props | ||
| const handleCloseModal = () => { | ||
| isOpen.value = false | ||
| } | ||
| // allow ESC to close the modal | ||
| defineShortcuts({ | ||
| escape: { | ||
| usingInput: true, | ||
| whenever: [isOpen], | ||
| handler: () => { | ||
| isOpen.value = false | ||
| } | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div data-test-id="info-modal-container"> | ||
| <UButton | ||
| v-if="openButtonLabel" | ||
| data-test-id="info-modal-open-button" | ||
| class="p-0 text-base" | ||
| variant="ghost" | ||
| :label="openButtonLabel" | ||
| :leading-icon="openButtonIcon" | ||
| :ui="{ variant: { ghost: 'hover:bg-transparent' } }" | ||
| @click="isOpen = true" | ||
| /> | ||
| <UModal | ||
| v-model="isOpen" | ||
| prevent-close | ||
| data-test-id="info-modal" | ||
| :ui="{ | ||
| container: 'items-center', | ||
| base: 'p-10', | ||
| overlay: { background: 'bg-black/60' }, | ||
| width: 'w-[660px]', | ||
| rounded: 'rounded-md' | ||
| }" | ||
| > | ||
| <div class="flex justify-between mb-11"> | ||
| <BcrosTypographyH2 :text="header" class="pt-0 pb-0" data-test-id="info-modal-header" /> | ||
| <UButton | ||
| color="gray" | ||
| variant="ghost" | ||
| icon="i-mdi-close" | ||
| class="p-0" | ||
| size="xl" | ||
| @click="isOpen = false" | ||
| /> | ||
| </div> | ||
|
|
||
| <div data-test-id="info-modal-default-slot"> | ||
| <slot /> | ||
| </div> | ||
|
|
||
| <BcrosContactInfo v-if="!hideContactInfo" /> | ||
|
|
||
| <div | ||
| class="flex justify-center mt-10" | ||
| data-test-id="info-modal-action-buttons" | ||
| > | ||
| <BcrosButtonsPrimary | ||
| :label="t('common.baseModal.closeButtonLabel')" | ||
| :action="() => handleCloseModal()" | ||
| /> | ||
| </div> | ||
| </UModal> | ||
| </div> | ||
| </template> |
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
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
4 changes: 2 additions & 2 deletions
4
strr-web/pages/success/[registrationId]/invoice/[paymentId].vue
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,55 @@ | ||
| import { mountSuspended } from '@nuxt/test-utils/runtime' | ||
| import InfoModal from '~/components/common/InfoModal.vue' | ||
|
|
||
| const { t } = useTranslation() | ||
|
|
||
| const MODAL_HEADER = 'Main Header' | ||
| const MODAL_OPEN_LABEL = 'Open Modal' | ||
|
|
||
| describe('Base Modal Tests', () => { | ||
| it('should render modal with its components and content', async () => { | ||
| const wrapper = await mountSuspended(InfoModal, { | ||
| props: { | ||
| header: MODAL_HEADER, | ||
| openButtonLabel: MODAL_OPEN_LABEL | ||
| }, | ||
| slots: { | ||
| default: () => '<div>Main Content</div>' | ||
| } | ||
| }) | ||
|
|
||
| expect(wrapper.exists()).toBeTruthy() | ||
|
|
||
| // check H2 header | ||
| expect(wrapper.find('[data-test-id="info-modal-header"]').exists()).toBeFalsy() | ||
|
|
||
| // check open modal button label | ||
| const openModalButton = wrapper.find('[data-test-id="info-modal-open-button"]') | ||
| expect(openModalButton.exists()).toBeTruthy() | ||
| expect(openModalButton.text()).toBe(MODAL_OPEN_LABEL) | ||
|
|
||
| // modal is not open | ||
| expect(document.querySelector('[data-test-id="info-modal"]')).toBeFalsy() | ||
|
|
||
| openModalButton.trigger('click') | ||
| await nextTick() | ||
|
|
||
| const modal = document.querySelector('[data-test-id="info-modal"]') | ||
|
|
||
| // modal is open | ||
| expect(modal).toBeTruthy() | ||
|
|
||
| const modalHeader = modal?.querySelector('[data-test-id="info-modal-header"]')?.innerHTML | ||
| expect(modalHeader).toContain(MODAL_HEADER) | ||
|
|
||
| const modalDefaultSlot = modal?.querySelector('[data-test-id="info-modal-default-slot"]')?.innerHTML | ||
| expect(modalDefaultSlot).toContain('Main Content') | ||
|
|
||
| const modalContactInfo = modal?.querySelector('[data-test-id="contact-info"]')?.innerHTML | ||
| expect(modalContactInfo).toContain(t('bcrosContactInfo.tollFree.value')) | ||
|
|
||
| const modalActions = modal?.querySelector('[data-test-id="info-modal-action-buttons"]')?.innerHTML | ||
| expect(modalActions).toBeTruthy() | ||
| expect(modalActions).toContain(t('common.baseModal.closeButtonLabel')) | ||
| }) | ||
| }) |