moein/panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Moein Moradi
2025-08-04 16:33:07 +03:30
commit f798e8e35c
9595 changed files with 1208683 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
resources/js/views/apps/ecommerce/settings/SettingsPayment.vue Normal file
View File

@@ -0,0 +1,158 @@
<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>