Merge pull request #11165 from hassnian/issue-9790-1

feat: Offramp modal replace confirmation

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -91,6 +91,7 @@
 
     <OnRampModal
       v-model="onRampActive"
+      no-overlap
       @close="onRampActive = false"
     />
   </div>

components/shared/OnRampModal.vue

@@ -1,26 +1,17 @@
 <template>
-  <NeoModalExtend
-    v-model:active="isModalActive"
+  <NeoModal
+    :value="isModalActive"
     class="neo-modal"
     data-testid="on-ramp-modal"
+    append-to-body
+    :no-overlap="noOverlap"
     @close="onClose"
   >
-    <div class="w-[unset] lg:w-[25rem]">
-      <div class="border-b border-grey flex items-center justify-between px-6">
-        <p class="py-5 text-base font-bold">
-          {{ $t('general.chooseProvider') }}
-        </p>
-
-        <NeoButton
-          variant="text"
-          no-shadow
-          icon="xmark"
-          size="medium"
-          class="cross"
-          @click="onClose"
-        />
-      </div>
-      <div class="px-6 py-3">
+    <ModalBody
+      :title="$t('general.chooseProvider')"
+      @close="onClose"
+    >
+      <div>
         <div class="mb-4 flex">
           <NeoCheckbox
             v-model="agreeTos"
@@ -78,13 +69,14 @@
           >
         </div>
       </div>
-    </div>
-  </NeoModalExtend>
+    </ModalBody>
+  </NeoModal>
 </template>
 
 <script setup lang="ts">
-import { NeoButton, NeoCheckbox, NeoModalExtend } from '@kodadot1/brick'
+import { NeoCheckbox, NeoModal } from '@kodadot1/brick'
 import type { ChainVM } from '@kodadot1/static'
+import ModalBody from '@/components/shared/modals/ModalBody.vue'
 
 enum Provider {
   TRANSAK,
@@ -94,6 +86,7 @@ enum Provider {
 const emit = defineEmits(['close'])
 const props = defineProps<{
   modelValue: boolean
+  noOverlap?: boolean
 }>()
 
 const { accountId } = useAuth()

composables/useModalManager.ts

@@ -0,0 +1,38 @@
+const modals = ref(new Map<symbol, Ref>())
+
+type ModalRef = Ref<{ isActive: boolean }>
+
+export default function (modalRef: Ref) {
+  const targetModals = ref<ModalRef[]>([])
+  const symbol = Symbol()
+
+  const otherModals = computed(() => {
+    return Array.from(modals.value.keys())
+      .filter(modal => modal !== symbol)
+      .map(modal => modals.value.get(modal)) as ModalRef[]
+  })
+
+  const closeOthers = () => {
+    for (const modal of otherModals.value) {
+      if (modal.value?.isActive) {
+        modal.value.isActive = false
+        targetModals.value?.push(modal)
+      }
+    }
+  }
+
+  const openClosed = () => {
+    for (const modal of targetModals.value) {
+      modal.value.isActive = true
+    }
+    targetModals.value = []
+  }
+
+  onMounted(() => modals.value.set(symbol, modalRef))
+  onUnmounted(() => modals.value.delete(symbol))
+
+  return {
+    closeOthers,
+    openClosed,
+  }
+}

libs/ui/src/components/NeoModal/NeoModal.vue

@@ -5,6 +5,7 @@
     v-bind="$attrs"
   >
     <o-modal
+      ref="modal"
       v-model:active="isModalActive"
       class="neo-modal"
       :class="{ 'append-to-body': appendToBody }"
@@ -34,6 +35,7 @@ import { computed } from 'vue'
 import { useVModel } from '@vueuse/core'
 import { OModal } from '@oruga-ui/oruga-next'
 
+const emit = defineEmits(['close'])
 const props = withDefaults(
   defineProps<{
     value: boolean
@@ -47,6 +49,7 @@ const props = withDefaults(
     maxHeight?: string | number
     mobileBreakpoint?: string
     appendToBody?: boolean
+    noOverlap?: boolean
   }>(),
   {
     destroyOnHide: true,
@@ -62,7 +65,10 @@ const props = withDefaults(
   },
 )
 
-const emit = defineEmits(['close'])
+const modal = ref()
+
+const isModalActive = useVModel(props, 'value')
+const { closeOthers, openClosed } = useModalManager(modal)
 
 const maxHeight = computed(() => {
   if (typeof props.maxHeight === 'number') {
@@ -71,8 +77,6 @@ const maxHeight = computed(() => {
   return props.maxHeight
 })
 
-const isModalActive = useVModel(props, 'value')
-
 const contentClassName = computed(() => {
   if (Array.isArray(props.contentClass)) {
     return [...props.contentClass]
@@ -82,6 +86,17 @@ const contentClassName = computed(() => {
 const updateClose = () => {
   emit('close', false)
 }
+
+if (props.noOverlap) {
+  watch(() => props.value, (value) => {
+    if (value) {
+      closeOthers()
+    }
+    else {
+      openClosed()
+    }
+  })
+}
 </script>
 
 <style lang="scss">