-
+
- {{ $t('site.navbar.my-profil') }}
-
-
- {{ $t('site.navbar.settings') }}
-
-
- {{ $t('site.navbar.activity') }}
-
+
+ {{ $t('site.navbar.my-profil') }}
+
+
+ {{ $t('site.navbar.settings') }}
+
+
+ {{ $t('site.navbar.activity') }}
+
-->
@@ -39,6 +39,7 @@
:gdt-balance="GdtBalance"
:transactions="transactions"
:transactionCount="transactionCount"
+ :pending="pending"
@update-balance="updateBalance"
@update-transactions="updateTransactions"
>
@@ -89,6 +90,7 @@ export default {
transactions: [],
bookedBalance: 0,
transactionCount: 0,
+ pending: true,
}
},
methods: {
@@ -105,6 +107,7 @@ export default {
this.$router.push('/login')
},
async updateTransactions() {
+ this.pending = true
const result = await communityAPI.transactions(this.$store.state.sessionId)
if (result.success) {
this.GdtBalance = Number(result.result.data.gdtSum)
@@ -112,7 +115,9 @@ export default {
this.balance = Number(result.result.data.decay)
this.bookedBalance = Number(result.result.data.balance)
this.transactionCount = result.result.data.count
+ this.pending = false
} else {
+ this.pending = true
// what to do when loading balance fails?
}
},
diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index 1454ada5c..68d91ee98 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -34,30 +34,5 @@ describe('AccountOverview', () => {
it('has a transactions table', () => {
expect(wrapper.find('gdd-table-stub').exists()).toBeTruthy()
})
-
- describe('updateBalance method', () => {
- beforeEach(async () => {
- wrapper.find('gdd-send-stub').vm.$emit('update-balance', {
- ammount: 42,
- })
- await wrapper.vm.$nextTick()
- })
-
- it('emmits updateBalance with correct value', () => {
- expect(wrapper.emitted('update-balance')).toEqual([[42]])
- })
- })
-
- describe('toggleShowList method', () => {
- beforeEach(async () => {
- wrapper.setProps({ showTransactionList: false })
- wrapper.find('gdd-send-stub').vm.$emit('toggle-show-list', true)
- await wrapper.vm.$nextTick()
- })
-
- it('changes the value of property showTransactionList', () => {
- expect(wrapper.vm.showTransactionList).toBeTruthy()
- })
- })
})
})
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index c9d839a3d..97845818b 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -6,20 +6,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
-
+
@@ -28,6 +45,17 @@ import GddStatus from './AccountOverview/GddStatus.vue'
import GddSend from './AccountOverview/GddSend.vue'
import GddTable from './AccountOverview/GddTable.vue'
import GddTableFooter from './AccountOverview/GddTableFooter.vue'
+import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
+import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
+import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
+import communityAPI from '../../apis/communityAPI.js'
+
+const EMPTY_TRANSACTION_DATA = {
+ email: '',
+ amount: 0,
+ memo: '',
+ target_date: '',
+}
export default {
name: 'Overview',
@@ -36,11 +64,16 @@ export default {
GddSend,
GddTable,
GddTableFooter,
+ TransactionForm,
+ TransactionConfirmation,
+ TransactionResult,
},
data() {
return {
- showTransactionList: true,
timestamp: Date.now(),
+ transactionData: EMPTY_TRANSACTION_DATA,
+ error: false,
+ currentTransactionStep: 0,
}
},
props: {
@@ -50,16 +83,35 @@ export default {
default: () => [],
},
transactionCount: { type: Number, default: 0 },
+ pending: {
+ type: Boolean,
+ default: true,
+ },
+ },
+ computed: {
+ showContext() {
+ return this.currentTransactionStep === 0
+ },
},
methods: {
- toggleShowList(bool) {
- this.showTransactionList = bool
+ setTransaction(data) {
+ data.target_date = new Date(Date.now()).toISOString()
+ this.transactionData = { ...data }
+ this.currentTransactionStep = 1
},
- updateBalance(data) {
- this.$emit('update-balance', data.ammount)
+ async sendTransaction() {
+ const result = await communityAPI.send(this.$store.state.sessionId, this.transactionData)
+ if (result.success) {
+ this.error = false
+ this.$emit('update-balance', this.transactionData.amount)
+ } else {
+ this.error = true
+ }
+ this.currentTransactionStep = 2
},
- updateTransactions() {
- this.$emit('update-transactions')
+ onReset() {
+ this.transactionData = EMPTY_TRANSACTION_DATA
+ this.currentTransactionStep = 0
},
},
}
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.spec.js b/frontend/src/views/Pages/AccountOverview/GddSend.spec.js
index d7130aeca..c7005ddf5 100644
--- a/frontend/src/views/Pages/AccountOverview/GddSend.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GddSend.spec.js
@@ -1,29 +1,18 @@
import { mount } from '@vue/test-utils'
import GddSend from './GddSend'
-import Vuex from 'vuex'
const localVue = global.localVue
describe('GddSend', () => {
let wrapper
- const state = {
- user: {
- balance: 1234,
- balance_gdt: 9876,
- },
- }
-
- const store = new Vuex.Store({
- state,
- })
-
const mocks = {
- // $n: jest.fn((n) => n),
$t: jest.fn((t) => t),
- $moment: jest.fn((m) => ({
- format: () => m,
- })),
+ $store: {
+ state: {
+ sessionId: 1234,
+ },
+ },
$i18n: {
locale: jest.fn(() => 'en'),
},
@@ -31,7 +20,7 @@ describe('GddSend', () => {
}
const Wrapper = () => {
- return mount(GddSend, { localVue, store, mocks })
+ return mount(GddSend, { localVue, mocks })
}
describe('mount', () => {
@@ -42,88 +31,5 @@ describe('GddSend', () => {
it('renders the component', () => {
expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
})
-
- describe('warning messages', () => {
- it('has a warning message', () => {
- expect(wrapper.find('div.alert-default').find('span').text()).toBe('form.attention')
- })
- })
-
- describe('transaction form', () => {
- describe('email field', () => {
- it('has an input field of type email', () => {
- expect(wrapper.find('#input-group-1').find('input').attributes('type')).toBe('email')
- })
-
- it('has an envelope icon', () => {
- expect(wrapper.find('#input-group-1').find('svg').attributes('aria-label')).toBe(
- 'envelope',
- )
- })
-
- it('has a label form.receiver', () => {
- expect(wrapper.findAll('div.text-left').at(0).text()).toBe('form.receiver')
- })
-
- it('has a placeholder "E-Mail"', () => {
- expect(wrapper.find('#input-group-1').find('input').attributes('placeholder')).toBe(
- 'E-Mail',
- )
- })
- })
-
- describe('ammount field', () => {
- it('has an input field of type number', () => {
- expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('number')
- })
-
- it('has an GDD text icon', () => {
- expect(wrapper.find('#input-group-2').find('div.h3').text()).toBe('GDD')
- })
-
- it('has a label form.amount', () => {
- expect(wrapper.findAll('div.text-left').at(1).text()).toBe('form.amount')
- })
-
- it('has a placeholder "0.01"', () => {
- expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe(
- '0.01',
- )
- })
- })
-
- describe('message text box', () => {
- it('has an textarea field', () => {
- expect(wrapper.find('#input-group-3').find('textarea').exists()).toBeTruthy()
- })
-
- it('has an chat-right-text icon', () => {
- expect(wrapper.find('#input-group-3').find('svg').attributes('aria-label')).toBe(
- 'chat right text',
- )
- })
-
- it('has a label form.memo', () => {
- expect(wrapper.findAll('div.text-left').at(2).text()).toBe('form.memo')
- })
- })
-
- describe('cancel button', () => {
- it('has a cancel button', () => {
- expect(wrapper.find('button[type="reset"]').exists()).toBeTruthy()
- })
-
- it('has the text "form.cancel"', () => {
- expect(wrapper.find('button[type="reset"]').text()).toBe('form.reset')
- })
-
- it.skip('clears the email field on click', async () => {
- wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
- wrapper.find('button[type="reset"]').trigger('click')
- await wrapper.vm.$nextTick()
- expect(wrapper.vm.form.email).toBeNull()
- })
- })
- })
})
})
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.vue b/frontend/src/views/Pages/AccountOverview/GddSend.vue
index 7c78f993c..cfab0899a 100644
--- a/frontend/src/views/Pages/AccountOverview/GddSend.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddSend.vue
@@ -1,346 +1,18 @@