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

<script setup>

const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;

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

const appstoreModel = AppstoreModel.create(API_ORIGIN, localStorage.token);

// TODO maybe support dev.console.cloudron.io
const consoleServerOrigin = 'https://console.cloudron.io';
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('');

onMounted(async () => {
  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);
  }

  console.log(result)

  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;

  busy.value = false;
});

</script>

<template>
  <div>
    <Section :title="$t('settings.appstoreAccount.title')">
      <p>{{ $t('settings.appstoreAccount.description') }}</p>

      <a href="/#/appstore" target="_blank" v-show="!hasSubscription && !busy">{{ $t('settings.appstoreAccount.setupAction') }}</a>

      <div v-show="hasSubscription && !busy">
         <!-- TODO what is `subscription.externalCustomer` ? -->
        <div class="info-row">
          <div class="info-label">{{ $t('settings.appstoreAccount.email') }}</div>
          <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 v-show="!busy" :href="`${consoleServerOrigin}/#/cloudron/${cloudronId}?email=${encodeURIComponent(email)}`" target="_blank">
          <span v-show="planName === 'free'">{{ $t('settings.appstoreAccount.subscriptionSetupAction') }}</span>
          <span v-show="cancelAt">{{ $t('settings.appstoreAccount.subscriptionReactivateAction') }}</span>
          <span v-show="!cancelAt">{{ $t('settings.appstoreAccount.subscriptionChangeAction') }}</span>
        </Button>
      </div>
    </Section>
  </div>
</template>