Merge pull request #1821 from gradido/1816-Expired-link-are-not-highlighted

1816 expired link are not highlighted

frontend/src/components/TransactionLinks/TransactionLink.spec.js

@@ -44,115 +44,140 @@ describe('TransactionLink', () => {
       expect(wrapper.find('div.transaction-link').exists()).toBeTruthy()
     })
 
-    describe('Copy link to Clipboard', () => {
-      const navigatorClipboard = navigator.clipboard
-      beforeAll(() => {
-        delete navigator.clipboard
-        navigator.clipboard = { writeText: navigatorClipboardMock }
-      })
-      afterAll(() => {
-        navigator.clipboard = navigatorClipboard
+    describe('Link validUntil Date is not valid', () => {
+      it('has no copy link button', () => {
+        expect(wrapper.find('.test-copy-link').exists()).toBe(false)
       })
 
-      describe('copy with success', () => {
-        beforeEach(async () => {
-          navigatorClipboardMock.mockResolvedValue()
-          await wrapper.find('.test-copy-link').trigger('click')
-        })
-        it('should call clipboard.writeText', () => {
-          expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
-            'http://localhost/redeem/c00000000c000000c0000',
-          )
-        })
-        it('toasts success message', () => {
-          expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.link-copied')
-        })
+      it('has no Qr-Code Button ', () => {
+        expect(wrapper.find('.test-qr-code').exists()).toBe(false)
+      })
+
+      it('has delete link button ', () => {
+        expect(wrapper.find('.test-delete-link').exists()).toBe(true)
       })
     })
 
-    describe('qr code modal', () => {
-      let spy
-
-      beforeEach(() => {
+    describe('Link validUntil Date is valid ', () => {
+      beforeEach(async () => {
+        const now = new Date()
         jest.clearAllMocks()
+        await wrapper.setProps({
+          validUntil: `${new Date(now.getFullYear(), now.getMonth(), now.getDate() + 2)}`,
+        })
       })
 
-      describe('with success', () => {
+      describe('Copy link to Clipboard', () => {
+        const navigatorClipboard = navigator.clipboard
+        beforeAll(() => {
+          delete navigator.clipboard
+          navigator.clipboard = { writeText: navigatorClipboardMock }
+        })
+        afterAll(() => {
+          navigator.clipboard = navigatorClipboard
+        })
+
+        describe('copy with success', () => {
+          beforeEach(async () => {
+            navigatorClipboardMock.mockResolvedValue()
+            await wrapper.find('.test-copy-link .dropdown-item').trigger('click')
+          })
+
+          it('should call clipboard.writeText', () => {
+            expect(navigator.clipboard.writeText).toHaveBeenCalledWith(
+              'http://localhost/redeem/c00000000c000000c0000',
+            )
+          })
+          it('toasts success message', () => {
+            expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.link-copied')
+          })
+        })
+      })
+
+      describe('qr code modal', () => {
+        let spy
+
         beforeEach(async () => {
-          spy = jest.spyOn(wrapper.vm.$bvModal, 'show')
-          // spy.mockImplementation(() => Promise.resolve('some value'))
-          // mockAPIcall.mockResolvedValue()
-          await wrapper.find('.test-qr-code').trigger('click')
+          jest.clearAllMocks()
         })
 
-        it('qr-code Modal if show', () => {
-          expect(spy).toBeCalled()
+        describe('with success', () => {
+          beforeEach(async () => {
+            spy = jest.spyOn(wrapper.vm.$bvModal, 'show')
+            // spy.mockImplementation(() => Promise.resolve('some value'))
+            // mockAPIcall.mockResolvedValue()
+            await wrapper.find('.test-qr-code .dropdown-item').trigger('click')
+          })
+
+          it('opens the qr-code Modal', () => {
+            expect(spy).toBeCalled()
+          })
         })
       })
-    })
 
-    describe('delete link', () => {
-      let spy
+      describe('delete link', () => {
+        let spy
 
-      beforeEach(() => {
-        jest.clearAllMocks()
-      })
-
-      describe('with success', () => {
         beforeEach(async () => {
-          spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
-          spy.mockImplementation(() => Promise.resolve('some value'))
-          mockAPIcall.mockResolvedValue()
-          await wrapper.find('.test-delete-link').trigger('click')
+          jest.clearAllMocks()
         })
 
-        it('test Modal if confirm true', () => {
-          expect(spy).toBeCalled()
+        describe('with success', () => {
+          beforeEach(async () => {
+            spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
+            spy.mockImplementation(() => Promise.resolve('some value'))
+            mockAPIcall.mockResolvedValue()
+            await wrapper.find('.test-delete-link .dropdown-item').trigger('click')
+          })
+
+          it('opens the modal ', () => {
+            expect(spy).toBeCalled()
+          })
+
+          it('calls the API', () => {
+            expect(mockAPIcall).toBeCalledWith(
+              expect.objectContaining({
+                mutation: deleteTransactionLink,
+                variables: {
+                  id: 12,
+                },
+              }),
+            )
+          })
+
+          it('toasts a success message', () => {
+            expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.deleted')
+          })
+
+          it('emits reset transaction link list', () => {
+            expect(wrapper.emitted('reset-transaction-link-list')).toBeTruthy()
+          })
         })
 
-        it('calls the API', () => {
-          expect(mockAPIcall).toBeCalledWith(
-            expect.objectContaining({
-              mutation: deleteTransactionLink,
-              variables: {
-                id: 12,
-              },
-            }),
-          )
+        describe('with error', () => {
+          beforeEach(async () => {
+            spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
+            spy.mockImplementation(() => Promise.resolve('some value'))
+            mockAPIcall.mockRejectedValue({ message: 'Something went wrong :(' })
+            await wrapper.find('.test-delete-link .dropdown-item').trigger('click')
+          })
+
+          it('toasts an error message', () => {
+            expect(toastErrorSpy).toBeCalledWith('Something went wrong :(')
+          })
         })
 
-        it('toasts a success message', () => {
-          expect(toastSuccessSpy).toBeCalledWith('gdd_per_link.deleted')
-        })
+        describe('cancel delete', () => {
+          beforeEach(async () => {
+            spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
+            spy.mockImplementation(() => Promise.resolve(false))
+            mockAPIcall.mockResolvedValue()
+            await wrapper.find('.test-delete-link .dropdown-item').trigger('click')
+          })
 
-        it('emits reset transaction link list', () => {
-          expect(wrapper.emitted('reset-transaction-link-list')).toBeTruthy()
-        })
-      })
-
-      describe('with error', () => {
-        beforeEach(async () => {
-          spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
-          spy.mockImplementation(() => Promise.resolve('some value'))
-          mockAPIcall.mockRejectedValue({ message: 'Something went wrong :(' })
-          await wrapper.find('.test-delete-link').trigger('click')
-        })
-
-        it('toasts an error message', () => {
-          expect(toastErrorSpy).toBeCalledWith('Something went wrong :(')
-        })
-      })
-
-      describe('cancel delete', () => {
-        beforeEach(async () => {
-          spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
-          spy.mockImplementation(() => Promise.resolve(false))
-          mockAPIcall.mockResolvedValue()
-          await wrapper.find('.test-delete-link').trigger('click')
-        })
-
-        it('does not call the API', () => {
-          expect(mockAPIcall).not.toBeCalled()
+          it('does not call the API', () => {
+            expect(mockAPIcall).not.toBeCalled()
+          })
         })
       })
     })

frontend/src/components/TransactionLinks/TransactionLink.vue

@@ -1,49 +1,43 @@
 <template>
   <div class="transaction-link gradido-custom-background">
-    <b-row class="mb-2 pt-2 pb-2">
-      <b-col lg="2">
+    <b-row :class="validLink ? '' : 'bg-muted text-light'" class="mb-2 pt-2 pb-2">
+      <b-col cols="1">
         <type-icon color="text-danger" icon="link45deg" class="pt-4 pl-2" />
       </b-col>
-      <b-col lg="9" md="9">
+      <b-col cols="11">
         <b-row>
-          <b-col lg="11" md="10">
+          <b-col>
             <amount-and-name-row :amount="amount" :text="$t('form.amount')" />
             <memo-row :memo="memo" />
-            <date-row :date="validUntil" :diffNow="true" />
+            <date-row :date="validUntil" :diffNow="true" :validLink="validLink" />
             <decay-row :decay="decay" />
           </b-col>
-          <b-col lg="1" md="2" class="text-center text-lg-left qr-button">
-            <b-button
-              @click="$bvModal.show('modalPopover-' + id)"
-              class="p-2 test-qr-code"
-              size="sm"
-            >
-              <b-img src="img/svg/qr-code.svg" width="60" class="filter"></b-img>
-            </b-button>
+          <b-col cols="12" lg="1" md="1" class="text-center text-md-right pr-5 pr-lg-4">
+            <b-dropdown no-caret right aria-expanded="false" size="sm">
+              <template #button-content>
+                <b-icon icon="three-dots-vertical"></b-icon>
+              </template>
+
+              <b-dropdown-item v-if="validLink" class="test-copy-link" @click="copy">
+                <b-icon icon="clipboard"></b-icon>
+                {{ $t('gdd_per_link.copy') }}
+              </b-dropdown-item>
+              <b-dropdown-item
+                v-if="validLink"
+                @click="$bvModal.show('modalPopover-' + id)"
+                class="pt-3 pb-3 test-qr-code"
+              >
+                <b-img src="img/svg/qr-code.svg" width="18" class="filter"></b-img>
+                {{ $t('qrCode') }}
+              </b-dropdown-item>
+              <b-dropdown-item class="test-delete-link" @click="deleteLink()">
+                <b-icon icon="trash"></b-icon>
+                {{ $t('delete') }}
+              </b-dropdown-item>
+            </b-dropdown>
           </b-col>
         </b-row>
       </b-col>
-
-      <b-col lg="1" md="1" class="text-center text-lg-right">
-        <b-button
-          class="p-2 test-copy-link"
-          size="lg"
-          variant="outline-primary"
-          @click="copy"
-          :title="$t('gdd_per_link.copy')"
-        >
-          <b-icon icon="clipboard"></b-icon>
-        </b-button>
-        <br />
-        <b-button
-          class="p-2 mt-3 test-delete-link"
-          size="sm"
-          @click="deleteLink()"
-          :title="$t('delete')"
-        >
-          <b-icon icon="trash"></b-icon>
-        </b-button>
-      </b-col>
     </b-row>
     <b-modal :id="'modalPopover-' + id" ok-only hide-header-close>
       <b-card header-tag="header" footer-tag="footer">
@@ -120,6 +114,9 @@ export default {
     decay() {
       return `${this.amount - this.holdAvailableAmount}`
     },
+    validLink() {
+      return new Date(this.validUntil) > new Date()
+    },
   },
 }
 </script>

frontend/src/components/TransactionRows/DateRow.vue

@@ -3,7 +3,7 @@
     <b-row>
       <b-col cols="5">
         <div class="text-right">
-          {{ diffNow ? $t('gdd_per_link.valid_until') : $t('form.date') }}
+          {{ text }}
         </div>
       </b-col>
       <b-col cols="7">
@@ -27,6 +27,20 @@ export default {
       required: false,
       default: false,
     },
+    validLink: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    text() {
+      if (this.diffNow)
+        return this.validLink
+          ? this.$t('gdd_per_link.validUntil')
+          : this.$t('gdd_per_link.expiredOn')
+      return this.$t('form.date')
+    },
   },
 }
 </script>

frontend/src/locales/de.json

@@ -102,6 +102,7 @@
     "decay-14-day": "Vergänglichkeit für 14 Tage",
     "delete-the-link": "Den Link löschen?",
     "deleted": "Der Link wurde gelöscht!",
+    "expiredOn": "Abgelaufen am",
     "has-account": "Du besitzt bereits ein Gradido Konto?",
     "header": "Gradidos versenden per Link",
     "isFree": "Gradido ist weltweit kostenfrei.",
@@ -121,7 +122,7 @@
     "redeemed-title": "eingelöst",
     "to-login": "Log dich ein",
     "to-register": "Registriere ein neues Konto.",
-    "valid_until": "Gültig bis"
+    "validUntil": "Gültig bis"
   },
   "gdt": {
     "calculation": "Berechnung der Gradido Transform",

frontend/src/locales/en.json

@@ -102,6 +102,7 @@
     "decay-14-day": "Decay for 14 days",
     "delete-the-link": "Delete the link?",
     "deleted": "The link was deleted!",
+    "expiredOn": "Expired on",
     "has-account": "You already have a Gradido account?",
     "header": "Send Gradidos via link",
     "isFree": "Gradido is free of charge worldwide.",
@@ -121,7 +122,7 @@
     "redeemed-title": "redeemed",
     "to-login": "Log in",
     "to-register": "Register a new account.",
-    "valid_until": "Valid until"
+    "validUntil": "Valid until"
   },
   "gdt": {
     "calculation": "Calculation of Gradido Transform",