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

package/components/ClientDetailForm.vue

@@ -70,177 +70,64 @@
     </section>
 
     <!-- ===== SUBSCRIPTION INFORMATION ===== -->
+    <!--
+      READ-ONLY on purpose. This section used to offer six dropdowns and two
+      date boxes that looked editable and saved nothing: the plan list was two
+      invented names, and Start / End were always blank because nothing ever
+      loaded them. It now shows what the client's record actually says, using
+      the same wording as the Client List. Setting or changing a subscription is
+      a separate piece of work with a real endpoint behind it.
+    -->
     <section class="section">
-      <h3>Subscription Information</h3>
-
-      <div class="row">
-        <div class="field">
-          <label>Subscription plan type</label>
-          <div class="select-wrap">
-            <select v-model="form.planType">
-              <option v-for="opt in PLAN_TYPE_OPTIONS" :key="opt" :value="opt">
-                {{ opt }}
-              </option>
-            </select>
-            <svg class="chevron" viewBox="0 0 10 6" fill="none">
-              <path
-                d="M1 1l4 4 4-4"
-                stroke="currentColor"
-                stroke-width="1.4"
-                stroke-linecap="round"
-              />
-            </svg>
-          </div>
-        </div>
-        <div class="field">
-          <label>Auto Renewal</label>
-          <div class="select-wrap">
-            <select v-model="form.autoRenewal">
-              <option
-                v-for="opt in AUTO_RENEWAL_OPTIONS"
-                :key="opt"
-                :value="opt"
-              >
-                {{ opt }}
-              </option>
-            </select>
-            <svg class="chevron" viewBox="0 0 10 6" fill="none">
-              <path
-                d="M1 1l4 4 4-4"
-                stroke="currentColor"
-                stroke-width="1.4"
-                stroke-linecap="round"
-              />
-            </svg>
-          </div>
-        </div>
+      <div class="section-head">
+        <h3>Subscription Information</h3>
+        <!--
+          The values stay read-only - they are what the client's record says.
+          Changing them is a real form with real rules behind it, so this opens
+          that rather than pretending a dropdown here would save anything.
+        -->
+        <button class="btn-manage-sub" @click="$emit('manage-subscription')">
+          {{ subscription.state === 'none' ? 'Set up subscription' : 'Edit subscription' }}
+        </button>
       </div>
 
-      <div class="row">
-        <div class="field">
-          <label>Billing Cycle</label>
-          <div class="select-wrap">
-            <select v-model="form.billingCycle" @change="onBillingCycleChange">
-              <option
-                v-for="opt in BILLING_CYCLE_OPTIONS"
-                :key="opt"
-                :value="opt"
-              >
-                {{ opt }}
-              </option>
-            </select>
-            <svg class="chevron" viewBox="0 0 10 6" fill="none">
-              <path
-                d="M1 1l4 4 4-4"
-                stroke="currentColor"
-                stroke-width="1.4"
-                stroke-linecap="round"
-              />
-            </svg>
+      <p v-if="subscription.state === 'none'" class="sub-none">
+        No subscription set up for this client yet.
+      </p>
+
+      <template v-else>
+        <div class="row">
+          <div class="field">
+            <label>Subscription</label>
+            <p
+              class="read-value"
+              :class="{ 'needs-attention': subscription.needsAttention }"
+            >
+              {{ subscription.label }}
+            </p>
           </div>
-        </div>
-        <div class="field">
-          <label>Status</label>
-          <div class="select-wrap">
-            <select v-model="form.status">
-              <option v-for="opt in STATUS_OPTIONS" :key="opt" :value="opt">
-                {{ opt }}
-              </option>
-            </select>
-            <svg class="chevron" viewBox="0 0 10 6" fill="none">
-              <path
-                d="M1 1l4 4 4-4"
-                stroke="currentColor"
-                stroke-width="1.4"
-                stroke-linecap="round"
-              />
-            </svg>
+          <div class="field">
+            <label>Billing Cycle</label>
+            <p class="read-value">{{ subscription.billingCycle }}</p>
           </div>
         </div>
-      </div>
 
-      <div class="row row-single">
-        <div class="field">
-          <label>Subscription plan</label>
-          <div class="select-wrap">
-            <select v-model="form.subscriptionPlan">
-              <option
-                v-for="opt in subscriptionPlanOptions"
-                :key="opt"
-                :value="opt"
-              >
-                {{ opt }}
-              </option>
-            </select>
-            <svg class="chevron" viewBox="0 0 10 6" fill="none">
-              <path
-                d="M1 1l4 4 4-4"
-                stroke="currentColor"
-                stroke-width="1.4"
-                stroke-linecap="round"
-              />
-            </svg>
+        <div class="row">
+          <div class="field">
+            <label>Start Date</label>
+            <p class="read-value">{{ subscription.start }}</p>
           </div>
-          <p class="hint">
-            Values of dropdown are determined by the list under selected billing
-            cycle.
-          </p>
-        </div>
-      </div>
-
-      <div class="row">
-        <div class="field">
-          <label>Start Date</label>
-          <div class="date-input">
-            <input type="text" :value="form.startDate" disabled />
-            <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
-              <rect
-                x="1"
-                y="3"
-                width="14"
-                height="12"
-                rx="2"
-                stroke="currentColor"
-                stroke-width="1.3"
-              />
-              <path d="M1 7h14" stroke="currentColor" stroke-width="1.3" />
-              <path
-                d="M5 1v3M11 1v3"
-                stroke="currentColor"
-                stroke-width="1.3"
-                stroke-linecap="round"
-              />
-            </svg>
+          <div class="field">
+            <label>End Date</label>
+            <p
+              class="read-value"
+              :class="{ 'needs-attention': subscription.needsAttention }"
+            >
+              {{ subscription.end }}
+            </p>
           </div>
         </div>
-        <div class="field">
-          <label>End Date</label>
-          <div class="date-input">
-            <input type="text" :value="form.endDate" disabled />
-            <svg viewBox="0 0 16 16" fill="none" width="14" height="14">
-              <rect
-                x="1"
-                y="3"
-                width="14"
-                height="12"
-                rx="2"
-                stroke="currentColor"
-                stroke-width="1.3"
-              />
-              <path d="M1 7h14" stroke="currentColor" stroke-width="1.3" />
-              <path
-                d="M5 1v3M11 1v3"
-                stroke="currentColor"
-                stroke-width="1.3"
-                stroke-linecap="round"
-              />
-            </svg>
-          </div>
-        </div>
-      </div>
-      <p class="hint hint-below">
-        Start and end date depend on the billing cycle, and cannot be edited.
-      </p>
+      </template>
     </section>
 
     <!-- ===== INCLUDED APPLICATION ===== -->
@@ -281,6 +168,7 @@
 import { reactive, computed, watch } from 'vue'
 import useOrg from '../composables/useOrg'
 import useCustomerSite from '../composables/useCustomerSite'
+import { describeClientSubscription } from '../utils/client-subscription'
 import useUser from '../composables/useUser'
 
 const {
@@ -356,24 +244,10 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'cancel'): void
   (e: 'submit', payload: Record<string, any>): void
+  (e: 'manage-subscription'): void
 }>()
 
 /* ── CONSTANTS ── */
-const PLAN_TYPE_OPTIONS = [
-  'Free (Bundle)',
-  'Paid (Bundle)',
-  'Paid (Custom App)'
-]
-const AUTO_RENEWAL_OPTIONS = ['No', 'Yes']
-const BILLING_CYCLE_OPTIONS = ['Monthly', 'Annually']
-const STATUS_OPTIONS = ['Active', 'Suspend']
-
-// Subscription plan options keyed by billing cycle (annotation from mockup)
-const SUBSCRIPTION_PLAN_BY_CYCLE: Record<string, string[]> = {
-  Monthly: ['Standard Plan', 'Premium Plan'],
-  Annually: ['Standard Plan', 'Premium Plan']
-}
-
 const PHONE_RULES: Record<string, number> = {
   '+60': 9,
   '+61': 9,
@@ -399,31 +273,15 @@ const form = reactive({
   organizationName: '',
   phone: '',
 
-  planType: 'Paid (Bundle)',
-  autoRenewal: 'Yes',
-  billingCycle: 'Monthly',
-  status: 'Active',
-  subscriptionPlan: 'Standard Plan',
-
-  startDate: '',
-  endDate: '',
-
   includedApps: [] as string[],
 
   sites: [] as SiteRow[]
 })
 
 /* ── COMPUTED ── */
-const subscriptionPlanOptions = computed(
-  () => SUBSCRIPTION_PLAN_BY_CYCLE[form.billingCycle] ?? []
-)
-
-/* ── WATCH: keep subscription plan valid when billing cycle changes ── */
-watch(subscriptionPlanOptions, options => {
-  if (!options.includes(form.subscriptionPlan)) {
-    form.subscriptionPlan = options[0] ?? ''
-  }
-})
+// The row the Client List already fetched carries the subscription sub-document,
+// so the drawer says exactly what the list says - no second, disagreeing source.
+const subscription = computed(() => describeClientSubscription(props.client))
 
 watch(
   () => form.name,
@@ -454,10 +312,6 @@ watch([phonePrefix, phoneNumber], ([prefix, value]) => {
 })
 
 /* ── EVENTS ── */
-function onBillingCycleChange() {
-  // Start / End date are derived from billing cycle and are not editable.
-  // Recompute or refetch here as needed once wired to a real API.
-}
 function validateForm() {
   errors.name = ''
   errors.organizationName = ''
@@ -647,6 +501,29 @@ watch(
 .section {
   margin-bottom: 26px;
 }
+.section-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.section-head h3 {
+  margin-bottom: 0;
+}
+.btn-manage-sub {
+  padding: 6px 14px;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid var(--border);
+  border-radius: var(--r-pill);
+  background: var(--card);
+  color: var(--accent-text);
+  cursor: pointer;
+  white-space: nowrap;
+  margin-bottom: 14px;
+}
+.btn-manage-sub:hover { background: var(--hover); }
 .section h3 {
   font-size: 15px;
   font-weight: 700;
@@ -660,10 +537,6 @@ watch(
   gap: 20px;
   margin-bottom: 14px;
 }
-.row-single {
-  grid-template-columns: 1fr;
-}
-
 .field {
   display: flex;
   flex-direction: column;
@@ -697,68 +570,17 @@ watch(
   color: var(--text2);
 }
 
-/* ===== SELECT ===== */
-.select-wrap {
-  position: relative;
-}
-.select-wrap select {
-  width: 100%;
-  height: 38px;
-  border: 1px solid var(--border);
-  border-radius: var(--r-inner);
-  padding: 0 30px 0 12px;
-  font-size: 13px;
+/* ===== READ-ONLY VALUES ===== */
+/* A value the staff member reads rather than edits. */
+.read-value {
+  font-size: 14px;
   color: var(--text);
-  background: var(--card);
-  appearance: none;
-  cursor: pointer;
-  outline: none;
-}
-.select-wrap select:focus {
-  border-color: var(--muted);
-}
-.select-wrap .chevron {
-  position: absolute;
-  right: 11px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 10px;
-  height: 6px;
-  pointer-events: none;
-}
-
-/* ===== DATE ===== */
-.date-input {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.date-input input {
-  width: 100%;
-  height: 38px;
-  border: 1px solid var(--border);
-  border-radius: var(--r-inner);
-  padding: 0 34px 0 12px;
-  font-size: 13px;
-  color: var(--text2);
-  background: var(--bg);
-  outline: none;
-}
-.date-input svg {
-  position: absolute;
-  right: 12px;
-  pointer-events: none;
-}
-
-/* ===== HINT ===== */
-.hint {
-  font-size: 11px;
-  color: var(--text2);
-  line-height: 1.4;
-}
-.hint-below {
-  margin-top: 4px;
+  padding: 10px 0;
+  min-height: 20px;
 }
+.sub-none { font-size: 14px; color: var(--text2); }
+/* Owner decision 8: an end date has passed and somebody has to look at it. */
+.needs-attention { color: var(--warn); font-weight: 500; }
 
 /* ===== INCLUDED APPS ===== */
 .app-list {