159 lines
4.3 KiB
Vue
159 lines
4.3 KiB
Vue
<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>
|
|
<div class="text-body-1 mb-5">
|
|
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.
|
|
</div>
|
|
<VBtn
|
|
variant="tonal"
|
|
@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 Vuexy's approved payment providers."
|
|
class="mb-6"
|
|
>
|
|
<VCardText>
|
|
<h6 class="text-h6 mb-5">
|
|
Default
|
|
</h6>
|
|
<div class="my-class mb-5">
|
|
<div class="d-flex justify-space-between align-center mb-6">
|
|
<div class="rounded paypal-logo">
|
|
<img
|
|
:src="paypal"
|
|
alt="Pixinvent"
|
|
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-4">
|
|
<div>
|
|
<div
|
|
class="text-body-2 mb-2"
|
|
style="min-inline-size: 220px;"
|
|
>
|
|
Provider
|
|
</div>
|
|
<h6 class="text-h6">
|
|
PayPal
|
|
</h6>
|
|
</div>
|
|
|
|
<div>
|
|
<div
|
|
class="text-body-2 mb-2"
|
|
style="min-inline-size: 220px;"
|
|
>
|
|
Status
|
|
</div>
|
|
<VChip
|
|
color="warning"
|
|
size="small"
|
|
label
|
|
>
|
|
Inactive
|
|
</VChip>
|
|
</div>
|
|
|
|
<div>
|
|
<div
|
|
class="text-body-2 mb-2"
|
|
style="min-inline-size: 220px;"
|
|
>
|
|
Transaction Fee
|
|
</div>
|
|
<h6 class="text-h6">
|
|
2.99%
|
|
</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<VBtn
|
|
variant="tonal"
|
|
@click="isAddPaymentMethodsDialogVisible = !isAddPaymentMethodsDialogVisible"
|
|
>
|
|
Add Payment Methods
|
|
</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>
|
|
|
|
<VBtn
|
|
variant="tonal"
|
|
:append-icon="$vuetify.display.smAndUp ? 'tabler-chevron-down' : ''"
|
|
>
|
|
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="tonal"
|
|
>
|
|
Discard
|
|
</VBtn>
|
|
<VBtn color="primary">
|
|
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>
|