PaymentCardEdit.stories.ts
1.24 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
import PaymentCardEdit from './PaymentCardEdit.vue'
import { PaymentSystemType, PaymentCard } from '../../types'
export default {
title: 'PaymentCardEdit',
component: PaymentCardEdit,
tags: ['autodocs'],
}
export const Default = () => ({
components: { PaymentCardEdit },
data() {
return {
lastEvent: '',
paymentCard: {
id: '1',
name: 'Main card',
isPrimary: true,
paymentSystem: PaymentSystemType.Visa,
cardNumberMasked: '****1679',
expirationDate: '09/24',
} satisfies PaymentCard,
}
},
template: `
<PaymentCardEdit
:paymentCard="paymentCard"
submitText="Update Card"
@save="lastEvent = 'save'"
@cancel="lastEvent = 'cancel'"
/>
<br>
<p>Last event: <span data-testid>{{ lastEvent }}</span></p>`,
})
export const Empty = () => ({
components: { PaymentCardEdit },
data() {
return {
paymentCard: {
id: '',
name: '',
isPrimary: false,
paymentSystem: PaymentSystemType.Visa,
cardNumberMasked: '',
expirationDate: '',
} satisfies PaymentCard,
}
},
template: `
<PaymentCardEdit
:paymentCard="paymentCard"
submitText="Create Card"
/>`,
})