@7365admin1/layer-common 3.2.8-staging.202 → 3.2.8-staging.204

package/components/ClientSubscriptionForm.vue

@@ -0,0 +1,527 @@
+<template>
+  <div class="overlay" @click.self="close">
+    <div class="sub-dialog" role="dialog" aria-modal="true" aria-labelledby="sub-dialog-title">
+
+      <!-- ===== HEADER ===== -->
+      <div class="sub-head">
+        <h3 id="sub-dialog-title">
+          {{ isEdit ? 'Edit subscription' : 'Set up subscription' }}
+        </h3>
+        <p class="sub-sub">{{ clientName }}</p>
+      </div>
+
+      <!-- ===== BODY ===== -->
+      <div class="sub-body">
+
+        <p v-if="loading" class="sub-loading">Loading this client's subscription…</p>
+
+        <template v-else>
+          <!--
+            One message at a time, and always a sentence a person can act on.
+            The API's own refusals are written for a reader, so when the server
+            says no this is exactly what the server said.
+          -->
+          <p v-if="problem" class="sub-error" role="alert">{{ problem }}</p>
+
+          <!-- Plan -->
+          <div class="sub-field">
+            <label for="sub-plan">Plan</label>
+            <select id="sub-plan" v-model="values.plan" :disabled="saving">
+              <option value="">Choose a plan</option>
+              <option v-for="p in plans" :key="p._id" :value="p._id">
+                {{ planOptionLabel(p) }}
+              </option>
+            </select>
+            <span v-if="!plansLoading && plans.length === 0" class="sub-hint">
+              No active plans exist yet, so there is nothing to put this client on.
+            </span>
+          </div>
+
+          <!-- Charging -->
+          <fieldset class="sub-field">
+            <legend>Charging</legend>
+            <label class="sub-radio">
+              <input
+                type="radio"
+                name="billingMode"
+                :value="BILLING_COMPLIMENTARY"
+                v-model="values.billingMode"
+                :disabled="saving"
+              />
+              <span>
+                <strong>Complimentary (not charged)</strong>
+                <em>Free use, with a real start and end date Seven365 monitors.</em>
+              </span>
+            </label>
+            <label class="sub-radio">
+              <input
+                type="radio"
+                name="billingMode"
+                :value="BILLING_PAID"
+                v-model="values.billingMode"
+                :disabled="saving"
+              />
+              <span>
+                <strong>Paying</strong>
+                <em>Charged the monthly value below. Payment is taken by Red Dot, not here.</em>
+              </span>
+            </label>
+          </fieldset>
+
+          <!-- Dates: native pickers, because the browser already has one -->
+          <div class="sub-row">
+            <div class="sub-field">
+              <label for="sub-start">Start date</label>
+              <input id="sub-start" v-model="values.startDate" type="date" :disabled="saving" />
+            </div>
+            <div class="sub-field">
+              <label for="sub-end">End date</label>
+              <input id="sub-end" v-model="values.endDate" type="date" :disabled="saving" />
+              <span class="sub-hint">Required. Every client has one, free or not.</span>
+            </div>
+          </div>
+
+          <!--
+            WHAT THIS MEANS FOR THIS CLIENT. A plan is priced per site, per
+            month, so the person is shown the arithmetic already done: the
+            per-site price, this client's live site count, and the monthly
+            value that comes out of the two.
+          -->
+          <div class="sub-value">
+            <div class="sub-value-line">
+              <span class="sub-value-label">Monthly value</span>
+              <span class="sub-value-figure" :class="{ 'is-free': isComplimentary }">
+                {{ formatMoney(monthly) }}
+                <span v-if="isComplimentary" class="sub-free-badge">not charged — complimentary</span>
+              </span>
+            </div>
+            <p class="sub-value-working">
+              {{ workingLine }}
+            </p>
+            <p v-if="siteCount === 0" class="sub-hint">
+              This client has no sites yet, so the monthly value is
+              {{ formatMoney(0) }} until sites are added.
+            </p>
+            <!-- Owner decision 5: switching a client from free to paying is an
+                 ordinary change of state, so it is worth naming when it is
+                 about to happen rather than letting it pass silently. -->
+            <p v-if="wasComplimentary && !isComplimentary" class="sub-hint sub-hint-strong">
+              This changes {{ clientName }} from complimentary to paying.
+            </p>
+            <p v-if="isEdit && changedValue" class="sub-hint sub-hint-strong">
+              Monthly value changes from {{ formatMoney(originalMonthly) }} to
+              {{ formatMoney(monthly) }}.
+            </p>
+          </div>
+        </template>
+      </div>
+
+      <!-- ===== FOOTER ===== -->
+      <div class="sub-actions">
+        <button class="btn-cancel" :disabled="saving" @click="close">Cancel</button>
+        <button class="btn-save" :disabled="saving || loading" @click="save">
+          <span v-if="saving" class="spinner spinner-light" />
+          <span v-else>{{ isEdit ? 'Save changes' : 'Set up subscription' }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * SET UP A CLIENT'S SUBSCRIPTION, OR CHANGE THE ONE THEY HAVE.
+ *
+ * The same four questions either way, so there is one form and not two: which
+ * plan, complimentary or paying, from when, until when. Editing simply arrives
+ * with the answers already filled in.
+ *
+ * It talks to the three staff-only console endpoints
+ * (`/api/subscriptions/console/:id`, where `:id` is the CLIENT'S organisation).
+ * It cannot suspend or reactivate anybody - that is Phase 3, and the edit
+ * endpoint does not accept a status, so there is deliberately no control here
+ * that could set one. It takes no card details and calls no payment gateway:
+ * Red Dot is the payment provider and none of that belongs on a staff screen.
+ */
+import { computed, onMounted, reactive, ref } from 'vue'
+import useSubscription from '../composables/useSubscription'
+import useSubscriptionPlan from '../composables/useSubscriptionPlan'
+import {
+  BILLING_COMPLIMENTARY,
+  BILLING_PAID,
+  buildConsolePayload,
+  formatMoney,
+  formValuesFrom,
+  monthlyValue,
+  planOptionLabel,
+  readApiError,
+  validateConsoleSubscription,
+  type TPlanOption,
+} from '../utils/subscription-form'
+
+const props = defineProps<{
+  /** The client's organisation id - what `:id` on the console routes means. */
+  orgId: string
+  clientName?: string
+  /** The live site count the Client List already fetched. Never typed in. */
+  siteCount?: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'cancel'): void
+  (e: 'saved', message: string): void
+}>()
+
+const {
+  getConsoleSubscriptionByOrgId,
+  setUpConsoleSubscription,
+  updateConsoleSubscription,
+} = useSubscription()
+const { getAll: getPlans } = useSubscriptionPlan()
+
+const plans = ref<TPlanOption[]>([])
+const plansLoading = ref(true)
+const loading = ref(true)
+const saving = ref(false)
+const problem = ref('')
+
+const existing = ref<Record<string, any> | null>(null)
+const values = reactive(formValuesFrom(null))
+const originalValues = reactive(formValuesFrom(null))
+
+const clientName = computed(() => props.clientName || 'this client')
+const siteCount = computed(() => Number(props.siteCount ?? 0))
+const isEdit = computed(() => Boolean(existing.value?._id))
+const isComplimentary = computed(() => values.billingMode === BILLING_COMPLIMENTARY)
+const wasComplimentary = computed(
+  () => isEdit.value && originalValues.billingMode === BILLING_COMPLIMENTARY,
+)
+
+const selectedPlan = computed(
+  () => plans.value.find(p => String(p._id) === String(values.plan)) ?? null,
+)
+const monthly = computed(() =>
+  isComplimentary.value ? 0 : monthlyValue(selectedPlan.value, siteCount.value),
+)
+const originalMonthly = computed(() => {
+  if (originalValues.billingMode === BILLING_COMPLIMENTARY) return 0
+  const plan = plans.value.find(p => String(p._id) === String(originalValues.plan))
+  return monthlyValue(plan, siteCount.value)
+})
+const changedValue = computed(() => originalMonthly.value !== monthly.value)
+
+/** The arithmetic, spelled out, so nobody has to work it out or trust it blind. */
+const workingLine = computed(() => {
+  const sites = siteCount.value
+  const plural = sites === 1 ? 'site' : 'sites'
+  if (!selectedPlan.value) return `${sites} ${plural}. Choose a plan to see the monthly value.`
+
+  const price = formatMoney(Number(selectedPlan.value.price ?? 0))
+  const gross = formatMoney(monthlyValue(selectedPlan.value, sites))
+
+  return isComplimentary.value
+    ? `${price} per site, per month x ${sites} ${plural} = ${gross} - waived while this client is complimentary.`
+    : `${price} per site, per month x ${sites} ${plural} = ${gross}.`
+})
+
+async function load() {
+  // The plan list and the client's current record are independent reads, so
+  // they go together rather than one after the other.
+  const [planResult, subResult] = await Promise.allSettled([
+    getPlans({ limit: 100, status: 'active' }),
+    getConsoleSubscriptionByOrgId(props.orgId),
+  ])
+
+  if (planResult.status === 'fulfilled') {
+    const res: any = planResult.value
+    plans.value = res?.items ?? res?.data?.items ?? []
+  } else {
+    problem.value = readApiError(
+      planResult.reason,
+      'The plan list could not be loaded, so there is nothing to choose from yet. Try again in a moment.',
+    )
+  }
+  plansLoading.value = false
+
+  if (subResult.status === 'fulfilled') {
+    // A client with no subscription is answered as 200 with null. That is the
+    // state most clients are in, not an error - it just means "set one up".
+    existing.value = (subResult.value as any) ?? null
+  } else {
+    problem.value = readApiError(
+      subResult.reason,
+      'This client\'s subscription could not be read. Try again in a moment.',
+    )
+  }
+
+  Object.assign(values, formValuesFrom(existing.value))
+  Object.assign(originalValues, formValuesFrom(existing.value))
+  loading.value = false
+}
+
+async function save() {
+  problem.value = ''
+
+  const payload = buildConsolePayload(values, plans.value, siteCount.value)
+  const refusal = validateConsoleSubscription(payload, plans.value)
+  if (refusal) {
+    problem.value = refusal
+    return
+  }
+
+  saving.value = true
+  try {
+    if (isEdit.value) {
+      await updateConsoleSubscription(props.orgId, payload)
+      emit('saved', 'Subscription updated.')
+    } else {
+      await setUpConsoleSubscription(props.orgId, payload)
+      emit('saved', 'Subscription set up.')
+    }
+  } catch (error: any) {
+    problem.value = readApiError(
+      error,
+      'That could not be saved. Check the details and try again.',
+    )
+  } finally {
+    saving.value = false
+  }
+}
+
+function close() {
+  if (saving.value) return
+  emit('cancel')
+}
+
+onMounted(load)
+</script>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--scrim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 16px;
+}
+
+.sub-dialog {
+  background: var(--card);
+  border-radius: 12px;
+  width: 100%;
+  max-width: 520px;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: var(--shadow-modal);
+}
+
+.sub-head {
+  padding: 20px 24px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.sub-head h3 {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+  margin: 0;
+}
+.sub-sub {
+  font-size: 13px;
+  color: var(--text2);
+  margin: 4px 0 0;
+}
+
+.sub-body {
+  padding: 18px 24px 4px;
+}
+.sub-loading {
+  font-size: 13px;
+  color: var(--text2);
+  margin: 8px 0 18px;
+}
+
+.sub-error {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--err);
+  background: var(--err-bg);
+  border: 1px solid var(--err-border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin: 0 0 16px;
+}
+
+.sub-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 16px;
+  border: none;
+  padding: 0;
+  min-width: 0;
+}
+.sub-field label,
+.sub-field legend {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text2);
+  padding: 0;
+}
+.sub-field select,
+.sub-field input[type="date"] {
+  height: 38px;
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card);
+  color: var(--text);
+  font-size: 13px;
+  padding: 0 10px;
+}
+.sub-field select:disabled,
+.sub-field input:disabled {
+  opacity: 0.6;
+}
+
+.sub-hint {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text2);
+}
+.sub-hint-strong {
+  color: var(--text);
+  font-weight: 600;
+}
+
+.sub-radio {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+}
+.sub-radio input {
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+.sub-radio strong {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+}
+.sub-radio em {
+  display: block;
+  font-style: normal;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text2);
+  margin-top: 2px;
+}
+
+.sub-row {
+  display: flex;
+  gap: 14px;
+}
+.sub-row .sub-field {
+  flex: 1 1 0;
+}
+
+.sub-value {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px 14px;
+  margin-bottom: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.sub-value-line {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+.sub-value-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text2);
+}
+.sub-value-figure {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--text);
+  text-align: right;
+}
+.sub-value-figure.is-free {
+  color: var(--text2);
+}
+.sub-free-badge {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text2);
+  margin-top: 2px;
+}
+.sub-value-working {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text2);
+  margin: 0;
+}
+
+.sub-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 24px 20px;
+}
+.btn-cancel {
+  padding: 9px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card);
+  color: var(--text2);
+  cursor: pointer;
+}
+.btn-cancel:hover:not(:disabled) { background: var(--hover); }
+.btn-save {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 150px;
+  padding: 9px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
+  cursor: pointer;
+}
+.btn-save:hover:not(:disabled) { opacity: 0.88; }
+.btn-cancel:disabled,
+.btn-save:disabled { opacity: 0.7; cursor: not-allowed; }
+
+.spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 1.5px solid rgba(255,255,255,0.5);
+  border-top-color: var(--card);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+@media (max-width: 520px) {
+  .sub-row { flex-direction: column; gap: 0; }
+}
+</style>

package/composables/useSubscription.ts

@@ -112,6 +112,43 @@ export default function useSubscription() {
     );
   }
 
+  /**
+   * THE SEVEN365 STAFF CONSOLE. `:id` is the CLIENT'S ORGANISATION id, never a
+   * subscription id - the API reads the organisation from the URL and never
+   * from the body, so these cannot be pointed at another client by accident.
+   *
+   * A separate path from `/api/subscriptions/org/:id` on purpose: that one is
+   * what a client's own subscription screen calls, and locking it to Seven365
+   * staff would have broken them. These three are staff-only on the server.
+   *
+   * No card field, no gateway, no money - Red Dot handles payment.
+   */
+  function getConsoleSubscriptionByOrgId(orgId: string) {
+    return useNuxtApp().$api<Record<string, any> | null>(
+      `/api/subscriptions/console/${orgId}`
+    );
+  }
+
+  function setUpConsoleSubscription(orgId: string, value: Record<string, any>) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/subscriptions/console/${orgId}`,
+      {
+        method: "POST",
+        body: value,
+      }
+    );
+  }
+
+  function updateConsoleSubscription(orgId: string, value: Record<string, any>) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/subscriptions/console/${orgId}`,
+      {
+        method: "PUT",
+        body: value,
+      }
+    );
+  }
+
   function updateSeatsById({
     subscriptionId = "",
     seats = 0,
@@ -146,5 +183,8 @@ export default function useSubscription() {
     initOrgSubscription,
     getByAffiliateId,
     updateSeatsById,
+    getConsoleSubscriptionByOrgId,
+    setUpConsoleSubscription,
+    updateConsoleSubscription,
   };
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.8-staging.202",
+  "version": "3.2.8-staging.204",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",