|
@@ -73,6 +73,22 @@
|
|
|
|
|
|
|
|
<q-separator class="q-my-lg" />
|
|
<q-separator class="q-my-lg" />
|
|
|
|
|
|
|
|
|
|
+ <div class="payment-summary q-mb-lg">
|
|
|
|
|
+ <div class="row items-center justify-between q-mb-xs">
|
|
|
|
|
+ <span class="summary-label">{{ $t('dashboard_client.pending_schedules.detail_value') }}</span>
|
|
|
|
|
+ <span class="summary-value">{{ formatCurrency(baseAmount) }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="row items-center justify-between q-mb-xs">
|
|
|
|
|
+ <span class="summary-label">{{ $t('dashboard_client.pending_schedules.detail_service_fee') }}</span>
|
|
|
|
|
+ <span class="summary-value">{{ formatCurrency(selectedPlatformFee) }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <q-separator class="q-my-sm" />
|
|
|
|
|
+ <div class="row items-center justify-between">
|
|
|
|
|
+ <span class="summary-total-label">{{ $t('dashboard_client.pending_schedules.detail_total') }}</span>
|
|
|
|
|
+ <span class="summary-total-value">{{ formatCurrency(selectedTotal) }}</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
<div class="row items-center q-mb-lg">
|
|
<div class="row items-center q-mb-lg">
|
|
|
<q-checkbox v-model="agreedToTerms" color="primary" keep-color />
|
|
<q-checkbox v-model="agreedToTerms" color="primary" keep-color />
|
|
|
<span class="terms-text">
|
|
<span class="terms-text">
|
|
@@ -105,6 +121,8 @@ import { useI18n } from 'vue-i18n'
|
|
|
import { userStore } from 'src/stores/user'
|
|
import { userStore } from 'src/stores/user'
|
|
|
import { usePaymentStore } from 'src/stores/payment'
|
|
import { usePaymentStore } from 'src/stores/payment'
|
|
|
import { getClientPaymentMethods } from 'src/api/clientPaymentMethod'
|
|
import { getClientPaymentMethods } from 'src/api/clientPaymentMethod'
|
|
|
|
|
+import { formatCurrency } from 'src/helpers/utils'
|
|
|
|
|
+import { usePaymentPlatformFees } from 'src/composables/usePaymentPlatformFees'
|
|
|
import ProfilePaymentAddDialog from 'src/components/profile/ProfilePaymentAddDialog.vue'
|
|
import ProfilePaymentAddDialog from 'src/components/profile/ProfilePaymentAddDialog.vue'
|
|
|
import SchedulePaymentPixDialog from './SchedulePaymentPixDialog.vue'
|
|
import SchedulePaymentPixDialog from './SchedulePaymentPixDialog.vue'
|
|
|
import SchedulePaymentProcessingDialog from './SchedulePaymentProcessingDialog.vue'
|
|
import SchedulePaymentProcessingDialog from './SchedulePaymentProcessingDialog.vue'
|
|
@@ -114,10 +132,6 @@ const props = defineProps({
|
|
|
type: Object,
|
|
type: Object,
|
|
|
required: true,
|
|
required: true,
|
|
|
},
|
|
},
|
|
|
- total: {
|
|
|
|
|
- type: Number,
|
|
|
|
|
- required: true,
|
|
|
|
|
- },
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
defineEmits([...useDialogPluginComponent.emits])
|
|
defineEmits([...useDialogPluginComponent.emits])
|
|
@@ -127,12 +141,19 @@ const $q = useQuasar()
|
|
|
const { t } = useI18n()
|
|
const { t } = useI18n()
|
|
|
const store = userStore()
|
|
const store = userStore()
|
|
|
const paymentStore = usePaymentStore()
|
|
const paymentStore = usePaymentStore()
|
|
|
|
|
+const { platformFees, loadPlatformFees } = usePaymentPlatformFees()
|
|
|
|
|
|
|
|
const selectedMethod = ref(null)
|
|
const selectedMethod = ref(null)
|
|
|
const agreedToTerms = ref(false)
|
|
const agreedToTerms = ref(false)
|
|
|
const paymentMethods = ref([])
|
|
const paymentMethods = ref([])
|
|
|
const loadingCards = ref(false)
|
|
const loadingCards = ref(false)
|
|
|
|
|
|
|
|
|
|
+const baseAmount = computed(() => Number(props.schedule.total_amount) || 0)
|
|
|
|
|
+const selectedPaymentType = computed(() => selectedMethod.value === 'pix' ? 'pix' : 'credit_card')
|
|
|
|
|
+const selectedPlatformFeeRate = computed(() => platformFees.value[selectedPaymentType.value] ?? platformFees.value.pix)
|
|
|
|
|
+const selectedPlatformFee = computed(() => parseFloat((baseAmount.value * selectedPlatformFeeRate.value).toFixed(2)))
|
|
|
|
|
+const selectedTotal = computed(() => parseFloat((baseAmount.value + selectedPlatformFee.value).toFixed(2)))
|
|
|
|
|
+
|
|
|
const addressTypeLabel = computed(() => {
|
|
const addressTypeLabel = computed(() => {
|
|
|
const type = props.schedule.address?.address_type
|
|
const type = props.schedule.address?.address_type
|
|
|
if (!type) return ''
|
|
if (!type) return ''
|
|
@@ -158,6 +179,12 @@ const loadCards = async () => {
|
|
|
loadingCards.value = true
|
|
loadingCards.value = true
|
|
|
try {
|
|
try {
|
|
|
paymentMethods.value = await getClientPaymentMethods(store.user?.client_id)
|
|
paymentMethods.value = await getClientPaymentMethods(store.user?.client_id)
|
|
|
|
|
+ const selectedCardId = String(selectedMethod.value || '').replace('card_', '')
|
|
|
|
|
+ const hasSelectedCard = paymentMethods.value.some((card) => String(card.id) === selectedCardId)
|
|
|
|
|
+
|
|
|
|
|
+ if (selectedMethod.value !== 'pix' && !hasSelectedCard) {
|
|
|
|
|
+ selectedMethod.value = paymentMethods.value.length > 0 ? `card_${paymentMethods.value[0].id}` : 'pix'
|
|
|
|
|
+ }
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
console.error(e)
|
|
console.error(e)
|
|
|
} finally {
|
|
} finally {
|
|
@@ -177,7 +204,7 @@ const openAddCard = () => {
|
|
|
const openPixPayment = () => {
|
|
const openPixPayment = () => {
|
|
|
$q.dialog({
|
|
$q.dialog({
|
|
|
component: SchedulePaymentPixDialog,
|
|
component: SchedulePaymentPixDialog,
|
|
|
- componentProps: { schedule: props.schedule, total: props.total },
|
|
|
|
|
|
|
+ componentProps: { schedule: props.schedule, total: selectedTotal.value },
|
|
|
}).onOk(() => {
|
|
}).onOk(() => {
|
|
|
onDialogOK()
|
|
onDialogOK()
|
|
|
})
|
|
})
|
|
@@ -192,13 +219,15 @@ const onConfirm = () => {
|
|
|
|
|
|
|
|
$q.dialog({
|
|
$q.dialog({
|
|
|
component: SchedulePaymentProcessingDialog,
|
|
component: SchedulePaymentProcessingDialog,
|
|
|
- componentProps: { schedule: props.schedule, clientPaymentMethodId },
|
|
|
|
|
|
|
+ componentProps: { schedule: props.schedule, clientPaymentMethodId, total: selectedTotal.value },
|
|
|
}).onOk(() => {
|
|
}).onOk(() => {
|
|
|
onDialogOK()
|
|
onDialogOK()
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
|
|
+ loadPlatformFees().catch(() => {})
|
|
|
|
|
+
|
|
|
if (paymentStore.getValidPixPayment(props.schedule.id)) {
|
|
if (paymentStore.getValidPixPayment(props.schedule.id)) {
|
|
|
openPixPayment()
|
|
openPixPayment()
|
|
|
return
|
|
return
|
|
@@ -253,6 +282,24 @@ onMounted(() => {
|
|
|
margin-top: 2px;
|
|
margin-top: 2px;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+.payment-summary {
|
|
|
|
|
+ border: 1px solid #e0e0e0;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ background: #fff;
|
|
|
|
|
+ padding: 12px 16px;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.summary-label,
|
|
|
|
|
+.summary-value {
|
|
|
|
|
+ color: #5a5a6a;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.summary-total-label,
|
|
|
|
|
+.summary-total-value {
|
|
|
|
|
+ color: #3a3a4a;
|
|
|
|
|
+ font-weight: 700;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.saved-card-box {
|
|
.saved-card-box {
|
|
|
border: 1.5px solid #e0e0e0;
|
|
border: 1.5px solid #e0e0e0;
|
|
|
border-radius: 12px;
|
|
border-radius: 12px;
|