mindboost-rnbo-test-project/pages/settings/_index.vue

<template>
  <div>
    <div class="row justify-content-center">
      <div class="col-12 col-lg-9 col-md-11 col-sm-12 col-xl-8">
        <!-- Header Section -->
        <div class="row">
          <div class="col-12">
            <h1 class="h3 fw-bold text-center pt-3">
              {{ t('Account') }}
            </h1>
          </div>
        </div>

        <!-- Account Details -->
        <div class="border-bottom row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('First Name') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-end text-muted">
              {{ user.first_name }}
            </p>
          </div>
        </div>

        <div class="border-bottom row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Last Name') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-end text-muted">
              {{ user.last_name }}
            </p>
          </div>
        </div>

        <div class="border-bottom row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Language') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-end text-muted">
              {{ user.language == 'de' ? 'German' : 'English' }}
            </p>
          </div>
        </div>

        <div class="border-bottom row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Email') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-end text-muted">
              {{ user.email }}
            </p>
          </div>
        </div>

        <div class="border-bottom row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Password') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-end text-muted">•••••••••</p>
          </div>
        </div>

        <!-- Conditional Manager Details -->
        <div v-if="user.inviter" class="border-bottom row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Manager Name') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-end text-muted">
              {{ user.inviter.first_name ?? '' }} {{ user.inviter.last_name ?? '' }}
            </p>
          </div>
        </div>

        <div v-if="user.inviter" class="border-bottom row mx-0 pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Manager Email') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-end text-muted">
              {{ user.inviter.email ?? '' }}
            </p>
          </div>
        </div>

        <div v-if="user.inviter" class="row pt-4">
          <div class="col-6">
            <p class="fw-bold text-start">
              {{ t('Current Package') }}
            </p>
          </div>
          <div class="col-6">
            <p class="fw-bold text-end text-muted">
              {{ showManagerPlan() }}
            </p>
          </div>
        </div>

        <!-- Logout Button -->
        <div class="account-buttons d-flex justify-content-center pt-5">
          <nuxt-link
            :to="localePath('/settings/editaccount')"
            class="btn btn-primary-custom text-decoration-none"
          >
            {{ t('Edit_') }}
          </nuxt-link>
          <button class="btn fw-bold btn-outline-dark" @click="logoutNow">
            {{ t("Log Out") }}
          </button>
        </div>

        <!-- Subscription Call-to-Action -->
        <div class="row pt-5 pb-4 px-2 mx-0">
          <div
            class="col-12 rounded text-center py-3 py-md-5"
            style="background-image: linear-gradient(40.53deg, #E9A446 6.68%, #E9C046 100%)"
          >
            <h4 class="text-center text-white">
              {{ t("Get another free 30 days") }}
            </h4>
            <h5 class="text-center px-2 px-md-5 text-white pt-2">
              {{ t("You can still use Mindboost for 30 days for free. Subscribe to increase your productivity with Mindboost afterwards.") }}
            </h5>
            <NuxtLink
              disabled
              type="button"
              class="btn px-4 py-2 mt-2 mt-md-3 fs-5"
              style="background-color: white; gap: 10px;"
            >
              {{ t("Subscribe") }}
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useI18n } from 'vue-i18n'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

// Composition API setup
const { t } = useI18n()
const localePath = useLocalePath()
const userStore = useUserStore()
const router = useRouter()

// Computed property for user state
const user = computed(() => userStore.user)

// Logout method
const logoutNow = async () => {
  await userStore.logout()
  try {
    await $axios.post('/api/logout')
  } catch (error) {
    // Handle the error if needed
  }
  router.push(localePath('/auth/login'))
}

function showManagerPlan () {
  if (user.value.inviter.current_subscription_plan === 1) {
    return 'Basic'
  } else if (user.value.inviter.current_subscription_plan === 2) {
    return 'Team'
  } else if (user.value.inviter.current_subscription_plan === 3) {
    return 'Enterprise'
  }

  // this.$toast.success(`Manager already has the ${managerPlan} plan`) // Fixed typo
}
</script>

<style>
.account-buttons {
  gap: 1.5em;
}

@media only screen and (max-width: 576px) {
  .account-buttons {
    flex-direction: column;
    gap: 0.75em;
  }
}
</style>