sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardPaymentIncomplete.vue

<template>
  <div class="incomplete-banner q-mx-md q-mb-md" @click="openPayments">
    <div class="row items-center no-wrap q-pa-sm q-px-md">
      <q-icon name="mdi-alert-outline" size="26px" color="primary" class="q-mr-md" />
      <div class="col banner-text text-primary">
        {{ $t('dashboard_client.payment_incomplete_title') }}
      </div>
      <q-btn
        unelevated
        no-caps
        color="primary"
        text-color="white"
        :label="$t('dashboard_client.payment_incomplete_cta')"
        class="q-ml-sm resolver-btn"
      />
    </div>
  </div>
</template>

<script setup>
import { useQuasar } from 'quasar';
import ProfilePaymentsDialog from 'src/components/profile/ProfilePaymentsDialog.vue';

const $q = useQuasar();

const openPayments = () => {
  $q.dialog({ component: ProfilePaymentsDialog });
};
</script>

<style lang="scss" scoped>

@use "src/css/quasar.variables.scss";

.incomplete-banner {
  border-radius: 12px;
  background: $card-incomplete-payments;
  cursor: pointer;
}

.banner-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.resolver-btn {
  border-radius: 20px;
  padding: 0px 4px;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
</style>