feat: transaction close confirmation modal (#1654)

* wip * wip * fix: expose modal inside index * fix: prevent click bubbling on child elements * test: close confirmation tests * fix: include major class on component * test: modal window tests * test: prevet closing when button clicked * feat: check for state change to close * refactor: tests * fix: change eventbus on menu dropdown * fix: class selection. Co-Authored-By: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com> * fix: remove modal confirmation reference * fix: remove mousedown event * fix: mousedown events * refactor: close confirm modal buttons Co-authored-by: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com> Co-authored-by: Brian Faust <faustbrian@users.noreply.github.com>
ArkEcosystem · Feb 24, 2020 · 38b3ba4 · 38b3ba4
1 parent 7f8d87a
commit 38b3ba4
Show file tree

Hide file tree

Showing 11 changed files with 361 additions and 3 deletions.
diff --git a/__tests__/unit/components/Modal/ModalCloseConfirmation.spec.js b/__tests__/unit/components/Modal/ModalCloseConfirmation.spec.js
@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils'
+import useI18nGlobally from '../../__utils__/i18n'
+import { ModalCloseConfirmation } from '@/components/Modal'
+
+const i18n = useI18nGlobally()
+
+let wrapper
+beforeEach(() => {
+  wrapper = shallowMount(ModalCloseConfirmation, {
+    i18n
+  })
+})
+
+describe('ModalCloseConfirmation', () => {
+  describe('render popup', () => {
+    it('should render the close confirmation modal', () => {
+      expect(wrapper.isVueInstance()).toBeTrue()
+    })
+  })
+
+  describe('close modal capabilities', () => {
+    describe('cancel event', () => {
+      it('should emit a cancel event when clicks the cancel buttom', () => {
+        const mask = wrapper.find('.ModalCloseConfirmation__cancel-button')
+        mask.trigger('click')
+        expect(wrapper.emitted('cancel')).toBeTruthy()
+      })
+
+      it('should emit a cancel event when clicks the mask', () => {
+        const mask = wrapper.find('.ModalCloseConfirmation__mask')
+        mask.trigger('click')
+        expect(wrapper.emitted('cancel')).toBeTruthy()
+      })
+
+      it('should not emit a cancel event when pressing inside the modal', () => {
+        const modal = wrapper.find('.ModalCloseConfirmation__container')
+        modal.trigger('click')
+        expect(wrapper.emitted('cancel')).toBeFalsy()
+      })
+    })
+
+    describe('confirm event', () => {
+      it('should emit a confirm event when clicks the confirm buttom', () => {
+        const mask = wrapper.find('.ModalCloseConfirmation__confirm-button')
+        mask.trigger('click')
+        expect(wrapper.emitted('confirm')).toBeTruthy()
+      })
+    })
+  })
+})
diff --git a/__tests__/unit/components/Modal/ModalWindow.spec.js b/__tests__/unit/components/Modal/ModalWindow.spec.js
@@ -1,5 +1,8 @@
 import { mount } from '@vue/test-utils'
 import ModalWindow from '@/components/Modal'
+import useI18nGlobally from '../../__utils__/i18n'
+
+const i18n = useI18nGlobally()
 
 const stubs = {
   Portal: '<div><slot/></div>'
@@ -63,6 +66,104 @@ describe('ModalWindow', () => {
     })
   })
 
+  describe('close confirmation modal', () => {
+    const options = {
+      stubs,
+      i18n,
+      propsData: {
+        confirmClose: true
+      }
+    }
+
+    describe('render', () => {
+      describe('without changes', () => {
+        it('should not render when click on mask', () => {
+          const wrapper = mount(ModalWindow, options)
+          const mask = wrapper.find('.ModalWindow')
+          mask.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
+        it('should not render when click on close button', () => {
+          const wrapper = mount(ModalWindow, options)
+          const mask = wrapper.find('.ModalWindow__close-button')
+          mask.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
+      })
+      describe('with changes', () => {
+        it('should render when click on mask', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const mask = wrapper.find('.ModalWindow')
+          mask.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeTruthy()
+        })
+
+        it('should render when click on close button', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const mask = wrapper.find('.ModalWindow__close-button')
+          mask.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeTruthy()
+        })
+      })
+    })
+
+    describe('events', () => {
+      describe('close', () => {
+        it('should emit on confirm', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button')
+          confirmButton.trigger('click')
+          expect(wrapper.emitted('close')).toBeTruthy()
+        })
+
+        it('should not emit on cancel', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button')
+          cancelButton.trigger('click')
+          expect(wrapper.emitted('close')).toBeFalsy()
+        })
+      })
+
+      describe('confirm', () => {
+        it('should close the confirmation modal', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button')
+          confirmButton.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
+        it('should close the modal window', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button')
+          confirmButton.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
+      })
+
+      describe('cancel', () => {
+        it('should close the confirmation modal', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button')
+          cancelButton.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
+        it('should not close the modal window', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button')
+          cancelButton.trigger('click')
+          expect(wrapper.contains('.ModalWindow')).toBeTruthy()
+        })
+      })
+    })
+  })
+
   describe('close popup', () => {
     it('should emit a close event when clicks the close button', () => {
       const wrapper = mount(ModalWindow, { stubs })

diff --git a/src/renderer/components/Input/InputAddress.vue b/src/renderer/components/Input/InputAddress.vue
@@ -368,6 +368,9 @@ export default {
 
     updateInputValue (value) {
       this.inputValue = value
+
+      this.$eventBus.emit('change')
+
       // Inform Vuelidate that the value changed
       this.$v.model.$touch()
     },

diff --git a/src/renderer/components/Modal/ModalCloseConfirmation.vue b/src/renderer/components/Modal/ModalCloseConfirmation.vue
@@ -0,0 +1,146 @@
+<template>
+  <div
+    class="ModalCloseConfirmation ModalCloseConfirmation__mask"
+    @click="onBackdropClick"
+  >
+    <div
+      class="ModalCloseConfirmation__container"
+      @click.stop="void 0"
+    >
+      <section class="ModalCloseConfirmation__container__content">
+        <div class="mb-6">
+          <h3
+            v-if="question"
+            class="font-semibold"
+          >
+            {{ question }}
+          </h3>
+
+          <div
+            v-if="note"
+            class="mt-3 text-grey-darker text-lg"
+            :class="{ 'mb-8': note }"
+          >
+            {{ note }}
+          </div>
+        </div>
+
+        <slot />
+
+        <div class="mt-4 flex flex-row">
+          <div class="flex-1">
+            <button
+              class="ModalCloseConfirmation__cancel-button blue-button m-1"
+              @click="emitCancel"
+            >
+              {{ cancelButton }}
+            </button>
+          </div>
+
+          <div class="flex-1 text-right">
+            <button
+              class="ModalCloseConfirmation__confirm-button action-button m-1 px-8 py-4"
+              @click="emitConfirm"
+            >
+              {{ confirmButton }}
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ModalCloseConfirmation',
+
+  props: {
+    cancelButton: {
+      type: String,
+      required: false,
+      default () {
+        return this.$t('MODAL_CLOSE_CONFIRMATION.CANCEL')
+      }
+    },
+    confirmButton: {
+      type: String,
+      required: false,
+      default () {
+        return this.$t('MODAL_CLOSE_CONFIRMATION.CONFIRM')
+      }
+    },
+    containerClasses: {
+      type: String,
+      required: false,
+      default: 'ModalConfirmationClose'
+    },
+    footer: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    note: {
+      type: String,
+      required: false,
+      default: null
+    },
+    question: {
+      type: String,
+      required: false,
+      default () {
+        return this.$t('MODAL_CLOSE_CONFIRMATION.QUESTION')
+      }
+    },
+    title: {
+      type: String,
+      required: false,
+      default () {
+        return this.$t('MODAL_CONFIRMATION.TITLE')
+      }
+    },
+    portalTarget: {
+      type: String,
+      required: false,
+      default: 'modal'
+    }
+  },
+
+  methods: {
+    emitCancel () {
+      this.$emit('cancel')
+    },
+
+    emitConfirm () {
+      this.$emit('confirm')
+    },
+
+    onBackdropClick () {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style lang="postcss" scoped>
+.ModalCloseConfirmation-enter,
+.ModalCloseConfirmation-leave-active {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
+.ModalCloseConfirmation__mask {
+  @apply overflow-hidden p-16 pt-16 bg-theme-modal shadow rounded-lg w-full h-full flex items-center justify-center absolute;
+  position: fixed;
+  z-index: 60;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .5);
+  transition: opacity .3s ease;
+}
+
+.ModalCloseConfirmation__container__content{
+  @apply overflow-hidden p-12 bg-theme-modal shadow rounded-lg flex flex-col inline-block w-auto
+}
+</style>