BillingAddressList.vue
2.91 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<template>
<div class="grid md:grid-cols-2 grid-cols-1 gap-4">
<template v-if="loading">
<div
v-for="i in 4"
:key="i"
class="min-h-[114px] p-4 rounded-lg border border-dashed border-backgroundBorder flex flex-row items-center gap-6"
>
<div class="flex flex-col gap-2 flex-grow">
<VaSkeleton class height="1.5rem" variant="text" width="10rem" />
<div class="flex gap-4">
<VaSkeleton height="3rem" variant="rounded" width="5rem" />
<VaSkeleton :lines="2" variant="text" />
</div>
</div>
</div>
</template>
<template v-else>
<CardListItem
v-for="billingAddress in list"
:key="billingAddress.id"
:billing-address="billingAddress"
@edit="addressToEdit = billingAddress"
@remove="remove(billingAddress)"
/>
<div
class="sm:min-h-[114px] p-4 rounded-lg border border-dashed border-primary flex flex-col sm:flex-row items-start sm:items-center gap-4"
:style="{ backgroundColor: colorToRgba(getColor('primary'), 0.07) }"
>
<div class="flex flex-col gap-2 flex-grow">
<div class="text-lg font-bold leading-relaxed">Important note</div>
<div class="text-secondary text-sm leading-tight">
Please ensure the provided billing address matches the information on file with your financial institution
to avoid any processing delays.
</div>
</div>
<VaButton class="flex-none w-full sm:w-auto" @click="showCreate = true">New address</VaButton>
</div>
</template>
</div>
<AddressCreateModal v-if="showCreate" @close="showCreate = false" />
<AddressUpdateModal v-if="addressToEdit" :billing-address="addressToEdit" @close="addressToEdit = undefined" />
</template>
<script lang="ts" setup>
import CardListItem from './BillingAddressListItem.vue'
import { computed, ref } from 'vue'
import { useModal, useToast } from 'vuestic-ui'
import AddressCreateModal from './BillingAddressCreateModal.vue'
import AddressUpdateModal from './BillingAddressUpdateModal.vue'
import { useBillingAddressesStore } from '../../../../stores/billing-addresses'
import { BillingAddress } from '../../types'
import { useColors } from 'vuestic-ui'
const store = useBillingAddressesStore()
const list = computed(() => store.allBillingAddresses)
const loading = computed(() => store.loading)
const { confirm } = useModal()
const showCreate = ref<boolean>(false)
const addressToEdit = ref<BillingAddress>()
const { init } = useToast()
store.load()
const remove = async (card: BillingAddress) => {
confirm({
message: 'Are you really sure you want to delete this address?',
size: 'small',
maxWidth: '380px',
}).then((ok) => {
if (!ok) return
store.remove(card.id)
init({ message: 'Billing Address has been deleted', color: 'success' })
})
}
const { getColor, colorToRgba } = useColors()
</script>