@7365admin1/layer-common 4.35.1-staging.384 → 4.36.0

package/components/ClientInvitations.vue

@@ -1,291 +0,0 @@
-<template>
-  <div>
-    <PageHeader
-      title="Client invitations"
-      subtitle="Other organisations asking your company to provide services at their sites."
-    />
-
-    <AppCard class="table-card">
-      <CardToolbar>
-        <template #tabs>
-          <button
-            v-for="t in tabs"
-            :key="t.value"
-            type="button"
-            role="tab"
-            class="app-tab"
-            :class="{ 'app-tab--active': tab === t.value }"
-            :aria-selected="tab === t.value"
-            @click="tab = t.value"
-          >
-            {{ t.label }}<span v-if="counts[t.value]"> ({{ counts[t.value] }})</span>
-          </button>
-        </template>
-      </CardToolbar>
-
-      <div class="pa-4 d-flex flex-column ga-3">
-        <div v-if="loading" class="screen-hint">Loading…</div>
-        <div v-else-if="loadError" class="text-error" role="alert">{{ loadError }}</div>
-        <div v-else-if="!items.length" class="screen-hint">{{ emptyLine }}</div>
-
-        <AppCard
-          v-for="item in items"
-          :key="item._id"
-          class="client-invite"
-          :class="{ 'client-invite--linked': item._id === linked }"
-        >
-          <div class="d-flex align-start ga-3 pa-4">
-            <v-avatar color="primary" variant="tonal" size="44">
-              <v-icon>mdi-office-building-marker-outline</v-icon>
-            </v-avatar>
-            <div class="flex-grow-1">
-              <div class="screen-card-title">
-                {{ item.orgName }} has invited your company to {{ item.siteName }}
-              </div>
-              <div class="screen-hint client-invite__meta">
-                <span v-if="item.service">Services: {{ serviceLabel(item.service) }} · </span>
-                <span v-if="item.invitedByName">Invited by {{ item.invitedByName }} · </span>
-                <span>Sent {{ day(item.createdAt) }}</span>
-              </div>
-            </div>
-            <StatusChip :status="item.status" :label="item.statusLabel" />
-          </div>
-
-          <div class="px-4 pb-4 client-invite__body">
-            {{ stateLine(item) }}
-          </div>
-
-          <!-- Buttons only while the invitation is waiting for an answer. -->
-          <div v-if="item.status === 'pending'" class="d-flex align-center ga-2 px-4 pb-4">
-            <v-btn
-              variant="flat"
-              class="screen-btn-primary"
-              :loading="working[item._id] === 'accept'"
-              :disabled="Boolean(working[item._id])"
-              @click="answer(item, 'accept')"
-            >
-              Accept
-            </v-btn>
-            <v-btn
-              variant="outlined"
-              class="screen-btn-ghost"
-              :loading="working[item._id] === 'decline'"
-              :disabled="Boolean(working[item._id])"
-              @click="answer(item, 'decline')"
-            >
-              Decline
-            </v-btn>
-          </div>
-
-          <div v-else-if="item.status === 'complete'" class="px-4 pb-4">
-            <v-btn
-              v-if="item.needsSiteLink"
-              variant="flat"
-              class="screen-btn-primary"
-              :loading="working[item._id] === 'link'"
-              :disabled="Boolean(working[item._id])"
-              @click="addToSites(item)"
-            >
-              Add {{ item.siteName }} to your Sites
-            </v-btn>
-            <NuxtLink v-else-if="item.onThisOrg" :to="`/org/${org}/sites`">Open Sites</NuxtLink>
-            <NuxtLink
-              v-else-if="item.providerOrgId && item.providerOrgId !== org"
-              :to="`/org/${item.providerOrgId}/sites`"
-            >
-              Open {{ item.providerOrgName || "that company" }}'s Sites
-            </NuxtLink>
-          </div>
-
-          <div v-if="errors[item._id]" class="px-4 pb-4 text-error client-invite__body" role="alert">
-            {{ errors[item._id] }}
-          </div>
-        </AppCard>
-      </div>
-    </AppCard>
-  </div>
-</template>
-
-<script setup lang="ts">
-/**
- * "Client invitations" (owner request 2026-09-24): where a service-provider
- * company answers invitations from its clients, in four tabs, with one plain
- * sentence per card saying what happened. Accept / Decline appear only while
- * an invitation is waiting - an answered one has no buttons at all.
- *
- * Accepting adds the site to the company ON SCREEN (`org`), which is what makes
- * it appear on this company's Sites list and in the service app's site
- * switcher. The server refuses a company the person is not a member of.
- */
-import type { TReceivedServiceProviderInvitation } from "../composables/useServiceProviderInvitation";
-
-const props = defineProps({
-  /** The organisation on screen - the company that accepts. */
-  org: { type: String, required: true },
-});
-
-type Tab = "pending" | "accepted" | "declined" | "expired";
-
-const tabs: Array<{ value: Tab; label: string }> = [
-  { value: "pending", label: "Pending" },
-  { value: "accepted", label: "Accepted" },
-  { value: "declined", label: "Declined" },
-  { value: "expired", label: "Expired" },
-];
-
-const route = useRoute();
-const {
-  getReceivedInvitations,
-  getInvitation,
-  acceptInvitation,
-  declineInvitation,
-  linkInvitationSite,
-} = useServiceProviderInvitation();
-
-const tab = ref<Tab>("pending");
-const items = ref<TReceivedServiceProviderInvitation[]>([]);
-const counts = ref<Record<string, number>>({});
-const loading = ref(false);
-const loadError = ref("");
-const working = reactive<Record<string, string>>({});
-const errors = reactive<Record<string, string>>({});
-
-/** The invitation the bell linked to (`?invite=<id>`), outlined. */
-const linked = computed(() => {
-  const value = String(route.query?.invite ?? "").trim();
-  return /^[a-f0-9]{24}$/i.test(value) ? value : "";
-});
-
-const emptyLine = computed(
-  () =>
-    ({
-      pending: "Nothing is waiting for your answer.",
-      accepted: "You have not accepted any invitations yet.",
-      declined: "You have not declined any invitations.",
-      expired: "No expired or withdrawn invitations.",
-    })[tab.value],
-);
-
-function day(value?: string | null) {
-  if (!value) return "";
-  const d = new Date(value);
-  return Number.isNaN(d.getTime())
-    ? ""
-    : d.toLocaleDateString("en-GB", { day: "numeric", month: "short", year: "numeric" });
-}
-
-/** " on 24 Sep 2026", or nothing when the date is unknown. */
-function on(value?: string | null) {
-  const text = day(value);
-  return text ? ` on ${text}` : "";
-}
-
-function serviceLabel(value: string) {
-  return value.replace(/[-_]/g, " ").replace(/^\w/, (c) => c.toUpperCase());
-}
-
-/** One sentence: where the invitation stands and what, if anything, to do. */
-function stateLine(item: TReceivedServiceProviderInvitation) {
-  switch (item.status) {
-    case "pending":
-      return `Waiting for you. Accepting adds ${item.siteName} to this company's Sites list${
-        item.expireAt ? ` — please answer by ${day(item.expireAt)}` : ""
-      }.`;
-    case "complete":
-      if (item.onThisOrg) {
-        return `Accepted${on(item.answeredAt)} — ${item.siteName} is on your Sites list as a site you serve for ${item.orgName}.`;
-      }
-      if (item.needsSiteLink) {
-        return "This invitation was accepted, but the site wasn't added to your Sites. Add it now.";
-      }
-      if (!item.providerOrgId || item.providerOrgId === props.org) {
-        return `Accepted${on(item.answeredAt)}, but ${item.siteName} is not on this company's Sites list. Please contact Seven365 support so we can add it.`;
-      }
-      return `Accepted${on(item.answeredAt)} for ${
-        item.providerOrgName || "another of your companies"
-      } — the site is on that company's Sites list, not this one's.`;
-    case "declined":
-      return `Declined${on(item.answeredAt)}. ${item.orgName} has been told.`;
-    case "cancelled":
-      return `${item.orgName} withdrew this invitation${on(item.answeredAt)}.`;
-    default:
-      return `This invitation expired${on(item.expireAt)} without an answer. Ask ${item.orgName} to send a new one if you still want this site.`;
-  }
-}
-
-async function load() {
-  loading.value = true;
-  loadError.value = "";
-  try {
-    const res = await getReceivedInvitations({ org: props.org, status: tab.value });
-    items.value = Array.isArray(res?.items) ? res.items : [];
-    counts.value = res?.counts ?? {};
-  } catch (err: any) {
-    items.value = [];
-    loadError.value = err?.data?.message || "Could not load your client invitations. Please try again.";
-  } finally {
-    loading.value = false;
-  }
-}
-
-async function answer(item: TReceivedServiceProviderInvitation, action: "accept" | "decline") {
-  errors[item._id] = "";
-  working[item._id] = action;
-  try {
-    if (action === "accept") await acceptInvitation(item._id, props.org);
-    else await declineInvitation(item._id);
-    // Follow the invitation to the tab it now belongs to (the tab watcher
-    // reloads the list).
-    tab.value = action === "accept" ? "accepted" : "declined";
-  } catch (err: any) {
-    errors[item._id] =
-      err?.data?.message ||
-      (action === "accept" ? "Could not accept this invitation." : "Could not decline this invitation.");
-  } finally {
-    working[item._id] = "";
-  }
-}
-
-/** Accepted but never added to the Sites list: add it now, then show it. */
-async function addToSites(item: TReceivedServiceProviderInvitation) {
-  errors[item._id] = "";
-  working[item._id] = "link";
-  try {
-    await linkInvitationSite(item._id, props.org);
-    await load();
-  } catch (err: any) {
-    errors[item._id] = err?.data?.message || "Could not add this site to your Sites.";
-  } finally {
-    working[item._id] = "";
-  }
-}
-
-// Opened from the bell: start on the tab the linked invitation is in.
-if (linked.value) {
-  try {
-    const one: any = await getInvitation(linked.value, props.org);
-    if (one?.tab && tabs.some((t) => t.value === one.tab)) tab.value = one.tab;
-  } catch {
-    // Not ours or gone: the page still lists the rest.
-  }
-}
-await load();
-watch(tab, load);
-</script>
-
-<style scoped>
-.client-invite--linked {
-  outline: 2px solid rgb(var(--v-theme-primary));
-  outline-offset: 2px;
-}
-
-.client-invite :deep(.screen-card-title) {
-  display: block;
-  line-height: 1.35;
-}
-
-.client-invite__meta,
-.client-invite__body {
-  font-size: var(--fs-cell);
-}
-</style>