crowd-funder-for-time-pwa/src/components/UsageLimitsSection.vue

<template>
  <section
    id="sectionUsageLimits"
    class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
    aria-labelledby="usageLimitsHeading"
  >
    <h2 id="usageLimitsHeading" class="mb-2 font-bold">Usage Limits</h2>
    <!-- show spinner if loading limits -->
    <div
      v-if="loadingLimits"
      class="text-center"
      role="status"
      aria-live="polite"
    >
      Checking&hellip;
      <font-awesome
        icon="spinner"
        class="fa-spin"
        aria-hidden="true"
      ></font-awesome>
    </div>
    <div class="mb-4 text-center">
      {{ limitsMessage }}
    </div>
    <div v-if="endorserLimits">
      <p class="text-sm">
        You have done
        <b
          >{{ endorserLimits?.doneClaimsThisWeek ?? "?" }} claim{{
            Number(endorserLimits?.doneClaimsThisWeek || 0) === 1 ? "" : "s"
          }}</b
        >
        out of <b>{{ endorserLimits?.maxClaimsPerWeek ?? "?" }}</b> for this
        week. Your claims counter resets at
        <b class="whitespace-nowrap">{{
          readableDate(endorserLimits?.nextWeekBeginDateTime)
        }}</b>
      </p>
      <p class="mt-3 text-sm">
        You have done
        <b
          >{{
            endorserLimits?.doneRegistrationsThisMonth ?? "?"
          }}
          registration{{
            Number(endorserLimits?.doneRegistrationsThisMonth || 0) === 1
              ? ""
              : "s"
          }}</b
        >
        out of
        <b>{{ endorserLimits?.maxRegistrationsPerMonth ?? "?" }}</b> for this
        this month.
        <i>(You cannot register anyone on your first day.)</i>
        Your registration counter resets at
        <b class="whitespace-nowrap">
          {{ readableDate(endorserLimits?.nextMonthBeginDateTime) }}
        </b>
      </p>
      <p class="mt-3 text-sm">
        You have uploaded
        <b
          >{{ imageLimits?.doneImagesThisWeek ?? "?" }} image{{
            Number(imageLimits?.doneImagesThisWeek || 0) === 1 ? "" : "s"
          }}</b
        >
        out of <b>{{ imageLimits?.maxImagesPerWeek ?? "?" }}</b> for this week.
        Your image counter resets at
        <b class="whitespace-nowrap">{{
          readableDate(imageLimits?.nextWeekBeginDateTime)
        }}</b>
      </p>
    </div>
    <button
      class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mt-4"
      @click="recheckLimits"
    >
      Recheck Limits
    </button>
  </section>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-facing-decorator";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

@Component({
  name: "UsageLimitsSection",
  components: {
    FontAwesome: FontAwesomeIcon,
  },
})
export default class UsageLimitsSection extends Vue {
  @Prop({ required: true }) loadingLimits!: boolean;
  @Prop({ required: true }) limitsMessage!: string;
  @Prop({ required: false }) activeDid?: string;
  @Prop({ required: false }) endorserLimits?: any;
  @Prop({ required: false }) imageLimits?: any;
  @Prop({ required: true }) onRecheckLimits!: () => void;

  mounted() {
    // Component mounted
  }

  updated() {
    // Component updated
  }

  readableDate(dateString: string | undefined): string {
    if (!dateString) return "unknown";
    try {
      return new Date(dateString).toLocaleDateString();
    } catch {
      return "unknown";
    }
  }

  recheckLimits() {
    this.onRecheckLimits();
  }
}
</script>