sfp_front_vue_diarista_cliente/src/pages/dashboard/DashboardPage.vue

<template>
  <q-page class="dashboard-page bg-page">
    <template v-if="loading">
      <div class="row items-center justify-center full-width bg-surface" style="height: 80vh">
        <q-spinner-dots color="primary" />
      </div>
    </template>
    <template v-else>
      <q-pull-to-refresh color="primary" @refresh="onRefresh">
        <DashboardHeaderBar
          :data="headerBar"
          :notifications="notifications"
        />
        <DashboardRegistrationIncomplete v-if="!registrationComplete" />
        <DashboardSummaryInfos v-else :data="summaryInfos" />
        <DashboardPaymentIncomplete v-if="showPaymentBanner" />
        <DashboardPendingSchedules
          v-if="pendingServicePackages.length > 0"
          :data="pendingServicePackages"
          :type="'servicePackage'"
          progress-class="progress-fill--urgent"
          @view-details="openServicePackagePaymentDialog"
        />
        <DashboardPendingSchedules
          v-if="pendingRequests.length > 0"
          :data="pendingRequests"
          progress-class="progress-fill--loop"
          @cancel="openCancelRequestDialog"
        />
        <DashboardTodaySchedules v-if="todaySchedules.length > 0" :data="todaySchedules" @rate="openRatingDialog" />
        <DashboardScrollAreaSchedules />
        <DashboardClientProposals v-if="clientProposals.length > 0" :data="clientProposals" @refresh-data="reloadDashboard" />
        <DashboardPendingCustomSchedules v-if="customSchedulesNoProposals.length > 0" />
        <DashboardNextSchedules v-if="nextSchedules.length > 0" :data="nextSchedules" @view-details="openNextScheduleDialog" />
        <DashboardLastDoneSchedules v-if="lastDoneSchedules.length > 0" :data="lastDoneSchedules" />
        <DashboardFavoriteProviders v-if="favoriteProviders.length > 0" :data="favoriteProviders" />
        <DashboardProvidersClose v-if="providersClose.length > 0" :data="providersClose" />
      </q-pull-to-refresh>
    </template>
  </q-page>
</template>

<script setup>
import DashboardHeaderBar from 'src/components/dashboard/DashboardHeaderBar.vue';
import DashboardSummaryInfos from 'src/components/dashboard/DashboardSummaryInfos.vue';
import DashboardRegistrationIncomplete from 'src/components/dashboard/DashboardRegistrationIncomplete.vue';
import DashboardPaymentIncomplete from 'src/components/dashboard/DashboardPaymentIncomplete.vue';
import DashboardPendingSchedules from 'src/components/dashboard/DashboardPendingSchedules.vue';
import ScheduleAcceptedDialog from 'src/components/dashboard/ScheduleAcceptedDialog.vue';
import ScheduleCancelDialog from 'src/components/dashboard/ScheduleCancelDialog.vue';
import DashboardScrollAreaSchedules from 'src/components/dashboard/DashboardScrollAreaSchedules.vue';
import DashboardNextSchedules from 'src/components/dashboard/DashboardNextSchedules.vue';
import DashboardLastDoneSchedules from 'src/components/dashboard/DashboardLastDoneSchedules.vue';
import DashboardFavoriteProviders from 'src/components/dashboard/DashboardFavoriteProviders.vue';
import DashboardProvidersClose from 'src/components/dashboard/DashboardProvidersClose.vue';
import DashboardTodaySchedules from 'src/components/dashboard/DashboardTodaySchedules.vue';
import FinalSuccesModal from '../schedules/components/FinalSuccesModal.vue';
import DashboardPendingCustomSchedules from 'src/pages/dashboard/components/DashboardPendingCustomSchedules.vue';
import DashboardClientProposals from 'src/pages/dashboard/components/DashboardClientProposals.vue';
import { useRoute, useRouter } from 'vue-router'
import { onMounted, ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { LocalStorage, useQuasar } from 'quasar';
import { dadosDashboard } from 'src/api/dashboard';
import { updateMe } from 'src/api/user';
import { userStore } from 'src/stores/user';
import NextSchedulesDetailsDialog from 'src/components/dashboard/NextSchedulesDetailsDialog.vue';
import ScheduleRatingDialog from 'src/components/dashboard/ScheduleRatingDialog.vue';

const router = useRouter()
const route = useRoute()
const { t } = useI18n();
const $q = useQuasar();
const store = userStore();

const hasPaymentMethods = ref(true);
const headerBar = ref({});
const summaryInfos = ref({});
const pendingSchedules = ref([]);
const pendingServicePackages = ref([]);
const nextSchedules = ref([]);
const clientProposals = ref([]);
const customSchedulesNoProposals = ref([]);
const lastDoneSchedules = ref([]);
const favoriteProviders = ref([]);
const providersClose = ref([]);
const todaySchedules = ref([]);
const notifications = ref([]);
const loading = ref(true);
const registrationComplete = computed(() => store.user?.registration_complete ?? true);
const showPaymentBanner = ref(false);

const successModalKey = ref(
  route.query.success ??
    (router.currentRoute.value.fullPath.includes('showSuccessModal') ? 'custom_schedule' : null),
);

const successModalContents = {
  custom_schedule: null,
  order_sent: () => ({
    titleLine1: t('service_package.sent_title_line1'),
    titleLine2: t('service_package.sent_title_line2'),
    subtitleBefore: t('service_package.sent_subtitle_before'),
    subtitleHighlight: t('service_package.sent_subtitle_highlight'),
    subtitleAfter: t('service_package.sent_subtitle_after'),
  }),
};

const pendingRequests = computed(() => {
  const seenPackages = new Set();

  return pendingSchedules.value.filter((schedule) => {
    if (schedule.status !== 'pending') return false;

    if (!schedule.service_package_id) return true;

    if (seenPackages.has(schedule.service_package_id)) return false;

    seenPackages.add(schedule.service_package_id);

    return true;
  });
});

const openCancelRequestDialog = (schedule) => {
  $q.dialog({
    component: ScheduleCancelDialog,
    componentProps: { schedule },
  }).onDismiss(() => {
    reloadDashboard(false);
  });
};

const openServicePackagePaymentDialog = (servicePackage) => {
  $q.dialog({
    component: ScheduleAcceptedDialog,
    componentProps: { servicePackage }
  }).onOk(() => {
    reloadDashboard();
  });
};

const AUTO_SHOWN_PACKAGES_KEY = "sp_payment_popup_shown_ids";
let autoOpeningPackageDialog = false;

const maybeAutoOpenServicePackagePayment = () => {
  if (autoOpeningPackageDialog) return;

  const shownIds = LocalStorage.getItem(AUTO_SHOWN_PACKAGES_KEY) ?? [];

  const packageToShow = pendingServicePackages.value.find(
    (servicePackage) => !shownIds.includes(servicePackage.id),
  );

  if (!packageToShow) return;

  autoOpeningPackageDialog = true;
  LocalStorage.set(AUTO_SHOWN_PACKAGES_KEY, [...shownIds, packageToShow.id]);

  $q.dialog({
    component: ScheduleAcceptedDialog,
    componentProps: { servicePackage: packageToShow },
  })
    .onOk(() => {
      reloadDashboard();
    })
    .onDismiss(() => {
      autoOpeningPackageDialog = false;
    });
};

const reloadDashboard = async (showLoader = true) => {
  if (showLoader) loading.value = true;
  const response = await dadosDashboard();
  if (response) {
    headerBar.value = response.headerBar;
    summaryInfos.value = response.summaryInfos;
    pendingSchedules.value = response.pendingSchedules ?? [];
    pendingServicePackages.value = response.pendingServicePackages ?? [];
    nextSchedules.value = response.nextSchedules ?? [];
    lastDoneSchedules.value = response.lastDoneSchedules ?? [];
    favoriteProviders.value = response.favoriteProviders ?? [];
    providersClose.value = response.providersClose ?? [];
    clientProposals.value = response.schedulesProposals ?? [];
    customSchedulesNoProposals.value = response.customSchedulesNoProposals ?? [];
    todaySchedules.value = response.todaySchedules ?? [];
    notifications.value = response.notifications ?? [];
    hasPaymentMethods.value = response.has_payment_methods ?? true;
  }
  loading.value = false;

  maybeAutoOpenServicePackagePayment();
};

const maybeOpenSuccessModal = () => {
  if (!successModalKey.value) return;

  if (!(successModalKey.value in successModalContents)) {
    successModalKey.value = null;
    return;
  }

  const buildContent = successModalContents[successModalKey.value];

  successModalKey.value = null;

  $q.dialog({
    component: FinalSuccesModal,
    componentProps: { content: buildContent ? buildContent() : null },
  }).onDismiss(() => {
    router.replace({ path: route.path, query: {} });
  });
};

const onRefresh = async (done) => {
  try {
    await reloadDashboard(false);
  } finally {
    done();
  }
};

const openNextScheduleDialog = (schedule) => {
  $q.dialog({
    component: NextSchedulesDetailsDialog,
    componentProps: { schedule }
  }).onOk(() => {
    reloadDashboard();
  });
};

const openRatingDialog = (schedule) => {
  $q.dialog({
    component: ScheduleRatingDialog,
    componentProps: { schedule }
  }).onOk(() => {
    reloadDashboard()
  })
}

onMounted(async () => {
  await reloadDashboard();
  maybeOpenSuccessModal();

  const isFirstAccess = store.user?.client?.first_access ?? false;
  showPaymentBanner.value = isFirstAccess && !hasPaymentMethods.value;

  if (isFirstAccess) {
    updateMe({ first_access: false }).catch(() => {});
    store.markFirstAccessSeen();
  }
});
</script>

<style scoped>
.dashboard-page {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
</style>