SettingsPayment.vue
4.79 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<script setup>
import { ref } from 'vue'
import paypal from '@images/cards/paypal-primary.png'
const isAddPaymentMethodsDialogVisible = ref(false)
const isPaymentProvidersDialogVisible = ref(false)
</script>
<template>
<div>
<!-- 👉 Payment Providers -->
<VCard
class="mb-6"
title="Payment providers"
>
<VCardText>
<p>
Providers that enable you to accept payment methods at a rate set by the third-party. An additional fee will apply to new orders once you select a plan.
</p>
<VBtn
variant="outlined"
@click="isPaymentProvidersDialogVisible = !isPaymentProvidersDialogVisible"
>
Choose a provider
</VBtn>
</VCardText>
</VCard>
<!-- 👉 Supported Payment Methods -->
<VCard
title="Supported payment methods"
subtitle="Payment methods that are available with one of Materio's approved payment providers."
class="mb-6"
>
<VCardText>
<h6 class="text-h6 mb-5">
Default
</h6>
<div class="rounded bg-var-theme-background pa-5 mb-6">
<div class="d-flex justify-space-between align-center mb-6">
<div class="rounded paypal-logo">
<img
:src="paypal"
alt="Themeselection"
style="padding-block: 6px;padding-inline: 18px;"
>
</div>
<VBtn variant="text">
Activate PayPal
</VBtn>
</div>
<VDivider />
<div class="d-flex justify-space-between flex-wrap mt-6 gap-x-4">
<div>
<div class="text-body-2 mb-2">
Provider
</div>
<h6 class="text-h6">
PayPal
</h6>
</div>
<div>
<div class="text-body-2 mb-2">
Status
</div>
<VChip
color="warning"
size="small"
>
Inactive
</VChip>
</div>
<div>
<div class="text-body-2 mb-2">
Transaction Fee
</div>
<h6 class="text-h6">
2.99%
</h6>
</div>
</div>
</div>
<VBtn
variant="outlined"
@click="isAddPaymentMethodsDialogVisible = !isAddPaymentMethodsDialogVisible"
>
Add Payment Method
</VBtn>
</VCardText>
</VCard>
<!-- 👉 Manual Payment Methods -->
<VCard
title="Manual payment methods"
class="mb-6"
>
<VCardText>
<p>Payments that are made outside your online store. When a customer selects a manual payment method such as cash on delivery, you'll need to approve their order before it can be fulfilled.</p>
<VBtnGroup
v-show="$vuetify.display.smAndUp"
divided
density="compact"
variant="outlined"
color="primary"
>
<VBtn>
Add Manual Payment Methods
</VBtn>
<VBtn>
<VIcon
size="20"
icon="ri-arrow-down-s-line"
/>
<VMenu activator="parent">
<VList>
<VListItem
v-for="(item, index) in ['Create custom payment method', 'Bank Deposit', 'Money Order', 'Cash on Delivery(COD)']"
:key="index"
:value="index"
>
<VListItemTitle>{{ item }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
</VBtn>
</VBtnGroup>
<VBtn
variant="outlined"
class="d-block d-sm-none"
>
Add Manual Payment Methods
<VMenu activator="parent">
<VList>
<VListItem
v-for="(item, index) in ['Create custom payment method', 'Bank Deposit', 'Money Order', 'Cash on Delivery(COD)']"
:key="index"
:value="index"
>
<VListItemTitle>{{ item }}</VListItemTitle>
</VListItem>
</VList>
</VMenu>
</VBtn>
</VCardText>
</VCard>
<div class="d-flex justify-end gap-x-4">
<VBtn
color="secondary"
variant="outlined"
>
Discard
</VBtn>
<VBtn>Save Changes</VBtn>
</div>
</div>
<AddPaymentMethodDialog v-model:is-dialog-visible="isAddPaymentMethodsDialogVisible" />
<PaymentProvidersDialog v-model:is-dialog-visible="isPaymentProvidersDialogVisible" />
</template>
<style lang="scss" scoped>
.paypal-logo {
background-color: #fff;
block-size: 37px;
box-shadow: 0 2px 4px 0 rgba(165, 163, 174, 30%);
inline-size: 58px;
}
</style>