|
|
@@ -5,20 +5,27 @@
|
|
|
<q-card-section class="column items-center q-pt-lg q-pb-sm">
|
|
|
<q-avatar size="80px" :style="avatarStyle" class="fontbold text-h5 q-mb-sm">
|
|
|
<img v-if="details?.provider_photo" :src="details.provider_photo" />
|
|
|
- <span v-else>{{ schedule.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}</span>
|
|
|
+
|
|
|
+ <span v-else>
|
|
|
+ {{ schedule.provider_name?.slice(0, 2).toUpperCase() ?? '??' }}
|
|
|
+ </span>
|
|
|
</q-avatar>
|
|
|
|
|
|
<div class="provider-name font16 fontbold">
|
|
|
{{ schedule.provider_name }}
|
|
|
+
|
|
|
<span v-if="providerAge !== null" class=" text-grey-6">
|
|
|
{{ '(' + providerAge + ' ' + $t('dashboard_client.next_schedules.provider_age_unit') + ')' }}
|
|
|
</span>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="text-text font12 fontbold">
|
|
|
{{ schedule.address?.district }}
|
|
|
</div>
|
|
|
+
|
|
|
<div v-if="schedule.address" class="font9 fontmedium text-grey-7 q-mt-xs">
|
|
|
<q-icon name="mdi-map-marker" color="text" size="14px" class="q-mr-xs" />
|
|
|
+
|
|
|
{{ formatAddress(schedule.address) }}
|
|
|
</div>
|
|
|
</q-card-section>
|
|
|
@@ -31,6 +38,7 @@
|
|
|
<q-spinner-dots color="primary" size="24px" />
|
|
|
</div>
|
|
|
</template>
|
|
|
+
|
|
|
<template v-else>
|
|
|
<div
|
|
|
v-for="sp in details?.specialities"
|
|
|
@@ -43,12 +51,19 @@
|
|
|
color="primary"
|
|
|
size="12px"
|
|
|
/>
|
|
|
- <span class="text-grey-8 font10 fontmedium q-pl-sm">{{ sp.description }}</span>
|
|
|
+
|
|
|
+ <span class="text-grey-8 font10 fontmedium q-pl-sm">
|
|
|
+ {{ sp.description }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<div v-if="!details?.specialities?.length" class="row items-center q-gutter-x-sm">
|
|
|
- <q-icon name="mdi-check" color="secondary" size="16px" />
|
|
|
- <span class="text-grey-8 font10 fontmedium">{{ $t('dashboard_client.next_schedules.default_service') }}</span>
|
|
|
+ <q-icon color="secondary" name="mdi-check" size="16px" />
|
|
|
+
|
|
|
+ <span class="text-grey-8 font10 fontmedium">
|
|
|
+ {{ $t('dashboard_client.next_schedules.default_service') }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</q-card-section>
|
|
|
@@ -57,27 +72,53 @@
|
|
|
|
|
|
<q-card-section class="q-py-md q-px-lg font12 fontmedium">
|
|
|
<div class="detail-row">
|
|
|
- <span class="detail-label text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_date') }}</span>
|
|
|
- <span class="detail-value">{{ fullDateLabel }}</span>
|
|
|
+ <span class="detail-label text-primary q-pr-sm">
|
|
|
+ {{ $t('dashboard_client.pending_schedules.detail_date') }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span class="detail-value">
|
|
|
+ {{ fullDateLabel }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="detail-row">
|
|
|
- <span class="detail-label text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_time') }}</span>
|
|
|
+ <span class="detail-label text-primary q-pr-sm">
|
|
|
+ {{ $t('dashboard_client.pending_schedules.detail_time') }}
|
|
|
+ </span>
|
|
|
+
|
|
|
<span class="detail-value">
|
|
|
{{ schedule.start_time?.slice(0, 5) }} {{ $t('dashboard_client.next_schedules.to') }} {{ schedule.end_time?.slice(0, 5) }}
|
|
|
</span>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="detail-row">
|
|
|
- <span class="detail-label text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_value') }}</span>
|
|
|
- <span class="detail-value">{{ formatCurrency(schedule.total_amount) }}</span>
|
|
|
+ <span class="detail-label text-primary q-pr-sm">
|
|
|
+ {{ $t('dashboard_client.pending_schedules.detail_value') }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span class="detail-value">
|
|
|
+ {{ formatCurrency(schedule.total_amount) }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="detail-row">
|
|
|
- <span class="detail-label text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_service_fee') }}</span>
|
|
|
- <span class="detail-value">{{ formatCurrency(serviceFee) }}</span>
|
|
|
+ <span class="detail-label text-primary q-pr-sm">
|
|
|
+ {{ $t('dashboard_client.pending_schedules.detail_service_fee') }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span class="detail-value">
|
|
|
+ {{ formatCurrency(serviceFee) }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
|
|
|
<div class="detail-row-total font16 fontbold">
|
|
|
- <span class="detail-label text-primary q-pr-sm">{{ $t('dashboard_client.pending_schedules.detail_total') }}</span>
|
|
|
- <span class="total-value">{{ formatCurrency(total) }}</span>
|
|
|
+ <span class="detail-label text-primary q-pr-sm">
|
|
|
+ {{ $t('dashboard_client.pending_schedules.detail_total') }}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span class="total-value">
|
|
|
+ {{ formatCurrency(total) }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
|
|
|
<q-separator class="q-my-sm divisoria-tracejada" />
|
|
|
@@ -85,11 +126,11 @@
|
|
|
|
|
|
<q-card-section class="q-pt-none q-pb-sm q-px-lg">
|
|
|
<q-btn
|
|
|
- unelevated
|
|
|
- rounded
|
|
|
- no-caps
|
|
|
- color="primary"
|
|
|
class="close-btn full-width"
|
|
|
+ color="primary"
|
|
|
+ no-caps
|
|
|
+ rounded
|
|
|
+ unelevated
|
|
|
:label="$t('dashboard_client.next_schedules.btn_close')"
|
|
|
@click="onDialogCancel"
|
|
|
/>
|
|
|
@@ -98,104 +139,113 @@
|
|
|
<q-card-section class="q-pt-xs q-pb-md text-center">
|
|
|
<div class="row justify-center q-gutter-x-lg">
|
|
|
<q-btn
|
|
|
+ color="grey-7"
|
|
|
flat
|
|
|
no-caps
|
|
|
- color="grey-7"
|
|
|
size="sm"
|
|
|
:label="$t('dashboard_client.pending_schedules.btn_cancel')"
|
|
|
@click="openCancelDialog"
|
|
|
/>
|
|
|
+
|
|
|
<q-btn
|
|
|
+ color="grey-7"
|
|
|
flat
|
|
|
no-caps
|
|
|
- color="grey-7"
|
|
|
size="sm"
|
|
|
:label="$t('dashboard_client.next_schedules.btn_help')"
|
|
|
@click="openHelp"
|
|
|
/>
|
|
|
</div>
|
|
|
</q-card-section>
|
|
|
-
|
|
|
</q-card>
|
|
|
</q-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { computed, onMounted, ref } from 'vue'
|
|
|
-import { useDialogPluginComponent, useQuasar } from 'quasar'
|
|
|
-import { useI18n } from 'vue-i18n'
|
|
|
+import { formatAddress } from 'src/helpers/utils';
|
|
|
import { formatCurrency } from 'src/helpers/utils'
|
|
|
import { getScheduleClienteDetails } from 'src/api/dashboard'
|
|
|
+import { getSchedulePlatformFeeRate } from 'src/helpers/paymentPlatformFees'
|
|
|
+import { useDialogPluginComponent, useQuasar } from 'quasar'
|
|
|
+import { useI18n } from 'vue-i18n'
|
|
|
import { usePaymentPlatformFees } from 'src/composables/usePaymentPlatformFees'
|
|
|
-import ScheduleCancelDialog from './ScheduleCancelDialog.vue'
|
|
|
+
|
|
|
import ProfileHelpDialog from 'src/components/profile/ProfileHelpDialog.vue'
|
|
|
-import { formatAddress } from 'src/helpers/utils';
|
|
|
+import ScheduleCancelDialog from './ScheduleCancelDialog.vue'
|
|
|
|
|
|
const props = defineProps({
|
|
|
- schedule: {
|
|
|
- type: Object,
|
|
|
- required: true
|
|
|
- }
|
|
|
+ schedule: { type: Object, required: true }
|
|
|
})
|
|
|
|
|
|
defineEmits([...useDialogPluginComponent.emits])
|
|
|
|
|
|
const { t } = useI18n()
|
|
|
-const $q = useQuasar()
|
|
|
+const $q = useQuasar()
|
|
|
+
|
|
|
const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent()
|
|
|
|
|
|
-const details = ref(null)
|
|
|
-const loadingDetails = ref(true)
|
|
|
const { platformFees, loadPlatformFees } = usePaymentPlatformFees()
|
|
|
|
|
|
-onMounted(async () => {
|
|
|
- try {
|
|
|
- details.value = await getScheduleClienteDetails(props.schedule.id)
|
|
|
- loadPlatformFees().catch(() => {})
|
|
|
- } catch {
|
|
|
- $q.notify({ message: t('http.errors.failed'), color: 'negative' })
|
|
|
- } finally {
|
|
|
- loadingDetails.value = false
|
|
|
- }
|
|
|
-})
|
|
|
-
|
|
|
-const serviceFee = computed(() => {
|
|
|
- const base = parseFloat(props.schedule.total_amount) || 0
|
|
|
- return parseFloat((base * platformFees.value.pix).toFixed(2))
|
|
|
-})
|
|
|
-
|
|
|
-const total = computed(() => {
|
|
|
- const base = parseFloat(props.schedule.total_amount) || 0
|
|
|
- return parseFloat((base + serviceFee.value).toFixed(2))
|
|
|
-})
|
|
|
-
|
|
|
-const providerAge = computed(() => {
|
|
|
- if (!details.value?.provider_birth_date) return null
|
|
|
- const birth = new Date(details.value.provider_birth_date)
|
|
|
- const today = new Date()
|
|
|
- let age = today.getFullYear() - birth.getFullYear()
|
|
|
- const m = today.getMonth() - birth.getMonth()
|
|
|
- if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
|
|
|
- return age
|
|
|
-})
|
|
|
+const details = ref(null)
|
|
|
+const loadingDetails = ref(true)
|
|
|
|
|
|
const parseLocalDate = (dateStr) => {
|
|
|
if (!dateStr) return null
|
|
|
+
|
|
|
const s = String(dateStr)
|
|
|
+
|
|
|
const iso = s.match(/^(\d{4})-(\d{2})-(\d{2})/)
|
|
|
+
|
|
|
if (iso) return new Date(+iso[1], +iso[2] - 1, +iso[3])
|
|
|
+
|
|
|
const dmy = s.match(/^(\d{2})\/(\d{2})\/(\d{4})/)
|
|
|
+
|
|
|
if (dmy) return new Date(+dmy[3], +dmy[2] - 1, +dmy[1])
|
|
|
+
|
|
|
return null
|
|
|
}
|
|
|
|
|
|
const fullDateLabel = computed(() => {
|
|
|
if (props.schedule.formatted_date) return props.schedule.formatted_date
|
|
|
+
|
|
|
const d = parseLocalDate(props.schedule.date)
|
|
|
+
|
|
|
if (!d) return props.schedule.date ?? ''
|
|
|
+
|
|
|
return d.toLocaleDateString('pt-BR', { day: '2-digit', month: 'long', year: 'numeric' })
|
|
|
})
|
|
|
|
|
|
+const providerAge = computed(() => {
|
|
|
+ if (!details.value?.provider_birth_date) return null
|
|
|
+
|
|
|
+ const birth = new Date(details.value.provider_birth_date)
|
|
|
+
|
|
|
+ const today = new Date()
|
|
|
+
|
|
|
+ let age = today.getFullYear() - birth.getFullYear()
|
|
|
+
|
|
|
+ const m = today.getMonth() - birth.getMonth()
|
|
|
+
|
|
|
+ if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--
|
|
|
+
|
|
|
+ return age
|
|
|
+})
|
|
|
+
|
|
|
+const serviceFee = computed(() => {
|
|
|
+ const base = parseFloat(props.schedule.total_amount) || 0
|
|
|
+
|
|
|
+ const feeRate = getSchedulePlatformFeeRate(props.schedule, 'pix', platformFees.value)
|
|
|
+
|
|
|
+ return parseFloat((base * (feeRate ?? 0)).toFixed(2))
|
|
|
+})
|
|
|
+
|
|
|
+const total = computed(() => {
|
|
|
+ const base = parseFloat(props.schedule.total_amount) || 0
|
|
|
+
|
|
|
+ return parseFloat((base + serviceFee.value).toFixed(2))
|
|
|
+})
|
|
|
+
|
|
|
const avatarColors = [
|
|
|
{ background: '#ffd5df', color: '#932e57' },
|
|
|
{ background: '#d7e8ff', color: '#2158a8' },
|
|
|
@@ -206,14 +256,26 @@ const avatarStyle = computed(() => avatarColors[props.schedule.id % avatarColors
|
|
|
|
|
|
const openCancelDialog = () => {
|
|
|
$q.dialog({
|
|
|
- component: ScheduleCancelDialog,
|
|
|
- componentProps: { schedule: props.schedule }
|
|
|
+ component: ScheduleCancelDialog, componentProps: { schedule: props.schedule }
|
|
|
})
|
|
|
}
|
|
|
|
|
|
const openHelp = () => {
|
|
|
$q.dialog({ component: ProfileHelpDialog })
|
|
|
}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ try {
|
|
|
+ details.value = await getScheduleClienteDetails(props.schedule.id)
|
|
|
+
|
|
|
+ loadPlatformFees().catch(() => {})
|
|
|
+ } catch {
|
|
|
+ $q.notify({ message: t('http.errors.failed'), color: 'negative' })
|
|
|
+ } finally {
|
|
|
+ loadingDetails.value = false
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|