cloudron-box/dashboard/src/components/CloudronAccount.vue

<script setup>

import { ref, onMounted } from 'vue';
import { Button, Spinner } from 'pankow';
import { prettyDate } from 'pankow/utils';
import Section from '../components/Section.vue';
import SettingsItem from '../components/SettingsItem.vue';
import AppstoreModel from '../models/AppstoreModel.js';
import DashboardModel from '../models/DashboardModel.js';

const appstoreModel = AppstoreModel.create();
const dashboardModel = DashboardModel.create();

const consoleServerOrigin = ref();
const busy = ref(true);
const hasSubscription = ref(false);
const email = ref('');
const emailEncoded = ref('');
const emailVerified = ref(false);
const cloudronId = ref('');
const planId = ref('');
const planName = ref('');
const cancelAt = ref(0);
const status = ref('');

async function refresh() {
  const [error, result] = await appstoreModel.getSubscription();
  if (error) {
    if (error.status === 402) return busy.value = false;  // not yet registered
    if (error.status === 412) return busy.value = false;  // invalid appstore token
    return console.error(error);
  }

  hasSubscription.value = true;
  email.value = result.email;
  emailEncoded.value = encodeURIComponent(result.email);;
  emailVerified.value = result.emailVerified;
  cloudronId.value = result.cloudronId;
  planId.value = result.plan.id;
  planName.value = result.plan.name;
  cancelAt.value = result.cancel_at || 0;
  status.value = result.status;
}

onMounted(async () => {
  const [error, result] = await dashboardModel.config();
  if (error) return console.error(error);

  consoleServerOrigin.value = result.consoleServerOrigin;

  await refresh();
  busy.value = false;
});

</script>

<template>
  <div>
    <Section :title="$t('settings.appstoreAccount.title')">
      <!-- TODO: Show plan info -->

      <div v-if="!busy">
        <div v-if="hasSubscription">
          <p>{{ $t('settings.appstoreAccount.description') }}</p>

          <div class="info-row" v-if="email">
            <div class="info-label">{{ $t('settings.appstoreAccount.email') }}</div>
            <!-- TODO change to setup subscxription -->
            <!-- TODO button is a link to console.cloudron.io/setup-subscription?cloudronId=xxx -->
            <div class="info-value"><a :href="`${consoleServerOrigin}?email=${emailEncoded}`" target="_blank">{{ email }} <i v-show="!emailVerified" class="fas fa-exclamation-triangle text-danger" v-tooltip="$t('settings.appstoreAccount.emailNotVerified')"></i></a></div>
          </div>

          <div class="info-row">
            <div class="info-label">{{ $t('settings.appstoreAccount.cloudronId') }}</div>
            <div class="info-value">{{ cloudronId }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">{{ $t('settings.appstoreAccount.subscription') }}</div>
            <div class="info-value">{{ planName }}</div>
          </div>

          <p class="text-danger" v-show="cancelAt">{{ $t('settings.appstoreAccount.subscriptionEndsAt') }} {{ prettyDate(cancelAt*1000) }}</p>

          <Button :href="`${consoleServerOrigin}/#/claim/${cloudronId}`" target="_blank">
            <span v-if="planName.toLowerCase() === 'free'">{{ $t('settings.appstoreAccount.subscriptionSetupAction') }}</span>
            <span v-else-if="cancelAt">{{ $t('settings.appstoreAccount.subscriptionReactivateAction') }}</span>
            <span v-else>{{ $t('settings.appstoreAccount.subscriptionChangeAction') }}</span>
          </Button>
        </div>

        <div v-else>
          <SettingsItem>
            <div style="display: flex; align-items: center;">
              {{ $t('settings.appstoreAccount.description') }}
            </div>
            <div style="display: flex; align-items: center;">
              <Button :href="`${consoleServerOrigin}/#/claim/${cloudronId}`" target="_blank">{{ $t('settings.appstoreAccount.setupAction') }}</Button>
            </div>
          </SettingsItem>
        </div>
      </div>
      <div v-else>
        <Spinner class="pankow-spinner-large"/>
      </div>
    </Section>
  </div>
</template>