Merge pull request kodadot#10629 from Jarsen136/issue-10623

fix: remove modal close on random clicks
hassnian · Jul 18, 2024 · ff87389 · ff87389
2 parents e3bcd80 + 238e5e4
commit ff87389
Show file tree

Hide file tree

Showing 12 changed files with 16 additions and 166 deletions.
diff --git a/components/collection/HeroButtons.vue b/components/collection/HeroButtons.vue
@@ -81,14 +81,10 @@
         </NeoDropdown>
       </div>
     </div>
-    <NeoModal :value="QRModalActive" @close="QRModalActive = false">
-      <div class="card" data-testid="hero-share-qrcode-modal">
-        <header class="card-header">
-          <p class="card-header-title">{{ collection?.name }}</p>
-        </header>
-        <div class="card-content">
-          <QRCode :text="currentCollectionUrl" />
-        </div>
+    <NeoModal :value="QRModalActive" header="" @close="QRModalActive = false">
+      <NeoModalHead :title="collection?.name" @close="QRModalActive = false" />
+      <div class="card-content" data-testid="hero-share-qrcode-modal">
+        <QRCode :text="currentCollectionUrl" />
       </div>
     </NeoModal>
   </div>
@@ -101,6 +97,7 @@ import {
   NeoDropdownItem,
   NeoIcon,
   NeoModal,
+  NeoModalHead,
 } from '@kodadot1/brick'
 import { useCollectionMinimal } from '@/components/collection/utils/useCollectionDetails'
 import { hasOperationsDisabled } from '@/utils/prefix'

diff --git a/components/collection/drop/AddFundsModal.vue b/components/collection/drop/AddFundsModal.vue
@@ -1,7 +1,6 @@
 <template>
   <NeoModal
     :value="modelValue"
-    :can-cancel="['outside', 'escape']"
     content-class="add-funds-modal !w-[unset]"
     @close="onClose">
     <ModalBody

diff --git a/components/collection/drop/modal/PaidMint.vue b/components/collection/drop/modal/PaidMint.vue
@@ -1,8 +1,5 @@
 <template>
-  <NeoModal
-    :value="modelValue"
-    :can-cancel="isSigningStep ? false : ['outside', 'escape']"
-    @close="close">
+  <NeoModal :value="modelValue" @close="close">
     <ModalBody
       :title="title"
       :scrollable="false"

diff --git a/components/collection/unlockable/UnlockableLoader.vue b/components/collection/unlockable/UnlockableLoader.vue
diff --git a/components/common/autoTeleport/AutoTeleportModal.vue b/components/common/autoTeleport/AutoTeleportModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <NeoModal
-    :value="isModalActive"
-    :can-cancel="canCancel"
-    class="z-[1000]"
-    @close="onClose">
+  <NeoModal :value="isModalActive" class="z-[1000]" @close="onClose">
     <div class="sm:w-[25rem]">
       <ModalBody
         :title="$i18n.t('autoTeleport.signTransactions')"
@@ -215,10 +211,6 @@ const autoteleportFinalized = computed(() =>
     : hasCompletedActionPreSteps.value,
 )
 
-const canCancel = computed(() =>
-  autoteleportFinalized.value ? ['outside', 'escape'] : false,
-)
-
 const btnLabel = computed<string>(() => {
   if (!hasActions.value && isBalanceCheckCompleted.value) {
     return $i18n.t('redirect.continue')

diff --git a/components/common/autoTeleport/AutoTeleportWelcomeModal.vue b/components/common/autoTeleport/AutoTeleportWelcomeModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <NeoModal
-    :value="isModalActive"
-    :can-cancel="['outside', 'escape']"
-    class="z-[1000]"
-    @close="onClose">
+  <NeoModal :value="isModalActive" class="z-[1000]" @close="onClose">
     <div class="sm:w-[40rem]">
       <header class="py-5 pl-6 pr-5 flex justify-between items-center">
         <span class="capitalize text-[1.6rem] font-bold">

diff --git a/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue b/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue
@@ -1,7 +1,6 @@
 <template>
   <NeoModal
     :value="isModalActive"
-    :can-cancel="['outside', 'escape']"
     class="z-[1000]"
     content-class="!w-[unset]"
     @close="onClose">

diff --git a/components/common/successfulModal/SuccessfulModal.vue b/components/common/successfulModal/SuccessfulModal.vue
@@ -1,8 +1,5 @@
 <template>
-  <NeoModal
-    :value="isModalActive"
-    :can-cancel="['outside', 'escape']"
-    @close="onClose">
+  <NeoModal :value="isModalActive" @close="onClose">
     <ModalBody :title="$t('success')" @close="onClose">
       <SuccessfulModalBody
         :tx-hash="txHash"

diff --git a/components/drops/CreateCalendarEventModal.vue b/components/drops/CreateCalendarEventModal.vue
@@ -1,8 +1,5 @@
 <template>
-  <NeoModal
-    :value="isModalActive"
-    :can-cancel="['outside', 'escape']"
-    @close="onClose">
+  <NeoModal :value="isModalActive" @close="onClose">
     <ModalBody :title="$t('drops.createACalendarEvent')" @close="onClose">
       <p class="capitalize">
         {{ title }}

diff --git a/components/shared/TransactionLoader.vue b/components/shared/TransactionLoader.vue
@@ -102,7 +102,7 @@ const props = withDefaults(
     isMobile?: boolean
   }>(),
   {
-    canCancel: true,
+    canCancel: false,
     isMobile: false,
   },
 )

diff --git a/libs/ui/src/components/NeoModal/NeoModal.vue b/libs/ui/src/components/NeoModal/NeoModal.vue
@@ -45,7 +45,7 @@ const props = withDefaults(
   }>(),
   {
     destroyOnHide: true,
-    canCancel: true,
+    canCancel: false,
     fullScreen: false,
     contentClass: '',
     rootClass: '',

diff --git a/tests/e2e/share.spec.ts b/tests/e2e/share.spec.ts
@@ -49,7 +49,10 @@ test('Share Button on Collection', async ({ page, Commands, baseURL }) => {
     await shareBtn.click()
     await page.getByTestId('hero-share-QR-dropdown').first().click()
     await expect(page.getByTestId('hero-share-qrcode-modal')).toBeVisible()
-    await page.keyboard.press('Escape')
+    await page
+      .getByTestId('modal-close-button')
+      .and(page.locator(':visible'))
+      .click()
   })
   //Twitter
   await test.step('Clicks on twitter and verify URL', async () => {