Skip to content

Commit

Permalink
21535 - Disable form when processing EFT refund (bcgov#2938)
Browse files Browse the repository at this point in the history
  • Loading branch information
Jxio authored Jul 26, 2024
1 parent da37429 commit ce99c71
Show file tree
Hide file tree
Showing 4 changed files with 53 additions and 51 deletions.
4 changes: 2 additions & 2 deletions auth-web/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion auth-web/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "auth-web",
"version": "2.6.58",
"version": "2.6.59",
"appName": "Auth Web",
"sbcName": "SBC Common Components",
"private": true,
Expand Down
72 changes: 36 additions & 36 deletions auth-web/src/views/pay/eft/ShortNameRefundView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
persistent-hint
data-test="refundAmount"
:rules="refundAmountRules"
:disabled="isFormDisabled"
/>
</v-row>

Expand All @@ -60,6 +61,7 @@
persistent-hint
data-test="casSupplierNumber"
:rules="casSupplierNumRules"
:disabled="isFormDisabled"
/>
</v-row>

Expand All @@ -75,6 +77,7 @@
persistent-hint
data-test="email"
:rules="emailRules"
:disabled="isFormDisabled"
/>
</v-row>

Expand All @@ -89,6 +92,7 @@
persistent-hint
data-test="staffComment"
:rules="staffCommentRules"
:disabled="isFormDisabled"
/>
</v-row>
</v-col>
Expand All @@ -100,20 +104,27 @@
outlined
class="px-7"
color="primary"
data-test="btn-edit-routing-cancel"
@click="handleCancelOrBack"
data-test="btn-edit-cancel"
:disabled="isLoading"
@click="handleCancelButton"
>
<span>{{ backButtonLabel }}</span>
<span>Cancel</span>
</v-btn>
<v-btn
large
:color="buttonColor"
class="px-8 font-weight-bold"
data-test="btn-edit-routing-done"
:disabled="!isFormValid || isSubmitted"
data-test="btn-edit-done"
:disabled="!isFormValid || isFormDisabled"
@click="submitRefundRequest"
>
<span>{{ buttonText }}</span>
<span v-if="!isLoading">{{ buttonText }}</span>
<v-progress-circular
v-else
indeterminate
color="white"
size="24"
/>
</v-btn>
</v-card-actions>
</v-form>
Expand All @@ -122,7 +133,7 @@
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch } from '@vue/composition-api'
import { computed, defineComponent, reactive, ref, toRefs, watch } from '@vue/composition-api'
import { EftRefundRequest } from '@/models/refund'
import { useOrgStore } from '@/stores/org'
Expand Down Expand Up @@ -150,9 +161,11 @@ export default defineComponent({
casSupplierNum: '',
email: '',
staffComment: '',
isLoading: false,
refundAmountRules: [
v => !!v || 'Refund Amount is required',
v => parseFloat(v) < parseFloat(props.shortNameDetails?.creditsRemaining) || 'Amount must be less than unsettled amount on short name',
v => parseFloat(v) > 0 || 'Refund Amount must be greater than zero',
v => parseFloat(v) <= parseFloat(props.shortNameDetails?.creditsRemaining) || 'Amount must be less than unsettled amount on short name',
v => /^\d+(\.\d{1,2})?$/.test(v) || 'Amounts must be less than 2 decimal places'
],
casSupplierNumRules: [
Expand All @@ -176,34 +189,15 @@ export default defineComponent({
const isFormValid = ref(false)
const buttonText = ref('Submit Refund Request')
const buttonColor = ref('primary')
const backButtonLabel = ref('Cancel')
function handleCancelOrBack () {
if (backButtonLabel.value === 'Cancel') {
clearForm()
} else {
root.$router?.push({
name: 'shortnamedetails',
query: {
shortNameId: props.shortNameDetails.id
}
})
}
}
function clearForm () {
state.refundAmount = undefined
state.casSupplierNum = ''
state.email = ''
state.staffComment = ''
refundForm.value.resetValidation()
state.isSubmitted = false
buttonText.value = 'Submit Refund Request'
buttonColor.value = 'primary'
backButtonLabel.value = 'Cancel'
function handleCancelButton () {
root.$router?.push({
name: 'shortnamedetails'
})
}
async function submitRefundRequest () {
state.isLoading = true
if (refundForm.value.validate()) {
const refundPayload: EftRefundRequest = {
shortNameId: props.shortNameDetails.id,
Expand All @@ -218,15 +212,22 @@ export default defineComponent({
state.isSubmitted = true
buttonText.value = 'Approved'
buttonColor.value = 'green'
backButtonLabel.value = 'Back'
} catch (error) {
state.isSubmitted = false
buttonText.value = 'Failed'
buttonColor.value = 'red'
} finally {
state.isLoading = false
}
} else {
state.isLoading = false
}
}
const isFormDisabled = computed(() => {
return state.isSubmitted || state.isLoading
})
watch(() => state.isSubmitted, (newVal) => {
if (newVal) {
buttonText.value = 'Approved'
Expand All @@ -240,13 +241,12 @@ export default defineComponent({
return {
...toRefs(state),
refundForm,
isFormDisabled,
isFormValid,
clearForm,
submitRefundRequest,
buttonText,
buttonColor,
backButtonLabel,
handleCancelOrBack
handleCancelButton
}
}
})
Expand Down
26 changes: 14 additions & 12 deletions auth-web/tests/unit/views/ShortNameRefundView.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,20 +43,22 @@ describe('ShortNameRefundView.vue', () => {
expect(wrapper.find('[data-test="staffComment"]').exists()).toBe(true)
})

it('clears the form when the cancel button is clicked', async () => {
await wrapper.setData({
refundAmount: 100.00,
casSupplierNum: 'CAS-123',
email: '[email protected]',
staffComment: 'Test comment'
it('return to previous page when cancel button is clicked', async () => {
const router = new VueRouter()
wrapper = mount(ShortNameRefundView, {
propsData: {
shortNameDetails: { shortName: 'TEST', creditsRemaining: '500.0' },
unsettledAmount: '100.0'
},
localVue,
vuetify,
router
})
const push = sinon.stub(wrapper.vm.$router, 'push')

const cancelButton = wrapper.find('[data-test="btn-edit-routing-cancel"]')
await cancelButton.trigger('click')
await wrapper.find('[data-test="btn-edit-cancel"]').trigger('click')

expect(wrapper.vm.$data.refundAmount).toBe(undefined)
expect(wrapper.vm.$data.casSupplierNum).toBe('')
expect(wrapper.vm.$data.email).toBe('')
expect(wrapper.vm.$data.staffComment).toBe('')
expect(push.calledWith({ name: 'shortnamedetails' })).toBe(true)
push.restore()
})
})

0 comments on commit ce99c71

Please sign in to comment.