Ship loyalty club and form builder so production pull gets the new screens.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/views/LeadFormPublicView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref } from 'vue';
 import { useRoute } from 'vue-router';
 import axios from 'axios';
 import type { PublicLeadFormDto, SubmitLeadFormResponse } from '@mento/shared';
@@ -12,9 +12,12 @@ const done = ref(false);
 const thankYou = ref('');
 const form = ref<PublicLeadFormDto | null>(null);
 const values = reactive<Record<string, string>>({});
-
 const token = String(route.params.token || '');
 
+const coverUrl = computed(() =>
+  form.value?.coverPath || (form.value?.hasCover ? `/api/public/forms/${token}/cover` : ''),
+);
+
 async function load() {
   loading.value = true;
   error.value = '';
@@ -22,6 +25,7 @@ async function load() {
     const { data } = await axios.get<PublicLeadFormDto>(`/api/public/forms/${token}`);
     form.value = data;
     for (const field of data.fields) {
+      if (field.fieldType === 'heading') continue;
       values[field.key] = values[field.key] ?? '';
     }
   } catch {
@@ -32,6 +36,17 @@ async function load() {
   }
 }
 
+function setMulti(key: string, option: string, on: boolean) {
+  const cur = new Set((values[key] || '').split(',').map((s) => s.trim()).filter(Boolean));
+  if (on) cur.add(option);
+  else cur.delete(option);
+  values[key] = [...cur].join(', ');
+}
+
+function hasMulti(key: string, option: string) {
+  return (values[key] || '').split(',').map((s) => s.trim()).includes(option);
+}
+
 async function submit() {
   if (!form.value) return;
   saving.value = true;
@@ -43,16 +58,12 @@ async function submit() {
     );
     thankYou.value = data.thankYouMessage || 'ثبت شد. متشکریم.';
     done.value = true;
-    if (data.redirectUrl) {
-      window.location.assign(data.redirectUrl);
-    }
+    if (data.redirectUrl) window.location.assign(data.redirectUrl);
   } catch (e) {
     if (axios.isAxiosError(e)) {
       const msg = (e.response?.data as { message?: string | string[] })?.message;
       error.value = Array.isArray(msg) ? msg.join('، ') : (msg ?? 'ارسال ناموفق بود');
-    } else {
-      error.value = 'ارسال ناموفق بود';
-    }
+    } else error.value = 'ارسال ناموفق بود';
   } finally {
     saving.value = false;
   }
@@ -64,10 +75,15 @@ onMounted(load);
 <template>
   <main class="shell">
     <div class="panel">
+      <div v-if="coverUrl" class="cover" :style="{ background: form?.submitColor || '#14b8a6' }">
+        <img :src="coverUrl" alt="" />
+      </div>
+      <div v-else class="cover" :style="{ background: form?.submitColor || '#14b8a6' }" />
+
       <header>
-        <p class="brand">منتو</p>
         <h1 v-if="form">{{ form.name }}</h1>
-        <h1 v-else>فرم سرنخ</h1>
+        <h1 v-else>فرم</h1>
+        <p v-if="form?.description">{{ form.description }}</p>
       </header>
 
       <p v-if="loading" class="muted">در حال بارگذاری…</p>
@@ -79,26 +95,72 @@ onMounted(load);
       </div>
 
       <form v-else-if="form" class="fields" @submit.prevent="submit">
-        <label v-for="field in form.fields" :key="field.key">
-          {{ field.label }}
-          <span v-if="field.required" class="req">*</span>
-          <textarea
-            v-if="field.fieldType === 'textarea'"
-            v-model="values[field.key]"
-            rows="4"
-            :required="field.required"
-          />
-          <input
-            v-else
-            v-model="values[field.key]"
-            :type="field.fieldType === 'email' ? 'email' : field.fieldType === 'phone' ? 'tel' : 'text'"
-            :required="field.required"
-          />
-        </label>
+        <template v-for="field in form.fields" :key="field.key">
+          <p v-if="field.fieldType === 'heading'" class="heading">{{ field.label }}</p>
+          <label v-else>
+            {{ field.label }}
+            <span v-if="field.required" class="req">*</span>
+            <textarea
+              v-if="field.fieldType === 'textarea'"
+              v-model="values[field.key]"
+              rows="4"
+              :placeholder="field.placeholder || ''"
+              :required="field.required"
+            />
+            <select
+              v-else-if="field.fieldType === 'select'"
+              v-model="values[field.key]"
+              :required="field.required"
+            >
+              <option value="">{{ field.placeholder || 'انتخاب کنید' }}</option>
+              <option v-for="o in field.options" :key="o" :value="o">{{ o }}</option>
+            </select>
+            <div v-else-if="field.fieldType === 'radio'" class="opts">
+              <label v-for="o in field.options" :key="o">
+                <input v-model="values[field.key]" type="radio" :value="o" :required="field.required" />
+                {{ o }}
+              </label>
+            </div>
+            <div v-else-if="field.fieldType === 'checkbox'" class="opts">
+              <label v-for="o in field.options" :key="o">
+                <input
+                  type="checkbox"
+                  :checked="hasMulti(field.key, o)"
+                  @change="setMulti(field.key, o, ($event.target as HTMLInputElement).checked)"
+                />
+                {{ o }}
+              </label>
+            </div>
+            <div v-else-if="field.fieldType === 'rating'" class="stars">
+              <button
+                v-for="n in 5"
+                :key="n"
+                type="button"
+                :class="{ on: Number(values[field.key]) >= n }"
+                @click="values[field.key] = String(n)"
+              >
+                ★
+              </button>
+            </div>
+            <input
+              v-else
+              v-model="values[field.key]"
+              :type="field.fieldType === 'email' ? 'email' : field.fieldType === 'phone' ? 'tel' : field.fieldType === 'date' ? 'date' : field.fieldType === 'number' ? 'number' : field.fieldType === 'file' ? 'text' : 'text'"
+              :placeholder="field.placeholder || (field.fieldType === 'file' ? 'نام فایل یا لینک' : '')"
+              :required="field.required"
+            />
+          </label>
+        </template>
         <p v-if="error" class="error">{{ error }}</p>
-        <button class="btn" type="submit" :disabled="saving">
-          {{ saving ? 'در حال ارسال…' : 'ارسال' }}
+        <button
+          class="btn"
+          type="submit"
+          :disabled="saving"
+          :style="{ background: form.submitColor || '#14b8a6' }"
+        >
+          {{ saving ? 'در حال ارسال…' : (form.submitLabel || 'ارسال درخواست') }}
         </button>
+        <small>اطلاعات شما محرمانه می‌ماند.</small>
       </form>
     </div>
   </main>
@@ -110,88 +172,32 @@ onMounted(load);
   display: grid;
   place-items: center;
   padding: 1.5rem;
-  background:
-    radial-gradient(circle at top left, rgba(15, 107, 92, 0.12), transparent 30%),
-    linear-gradient(180deg, #f7faf8 0%, #eef2f0 100%);
+  background: #f4f7f8;
 }
-
 .panel {
-  width: min(520px, 100%);
+  width: min(440px, 100%);
   background: #fff;
-  border: 1px solid #d5ddd8;
-  border-radius: 18px;
-  box-shadow: 0 16px 40px rgba(23, 33, 28, 0.08);
-  padding: 1.35rem;
-  display: grid;
-  gap: 1rem;
+  border-radius: 22px;
+  overflow: hidden;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
 }
-
-.brand {
-  margin: 0;
-  color: #0f6b5c;
-  font-weight: 700;
-}
-
-h1 {
-  margin: 0.25rem 0 0;
-  font-size: 1.45rem;
-}
-
-.fields {
-  display: grid;
-  gap: 0.85rem;
-}
-
-label {
-  display: grid;
-  gap: 0.35rem;
-  color: #5b6b63;
-  font-size: 0.92rem;
-}
-
-.req {
-  color: #b42318;
-}
-
-input,
-textarea {
-  border: 1px solid #d5ddd8;
-  border-radius: 12px;
-  padding: 0.75rem 0.9rem;
-  font: inherit;
-  width: 100%;
-}
-
-.btn {
-  border: 0;
-  background: #0f6b5c;
-  color: #fff;
-  border-radius: 12px;
-  padding: 0.85rem 1rem;
-  font: inherit;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.muted {
-  color: #5b6b63;
-}
-
-.error {
-  color: #b42318;
-  margin: 0;
-}
-
-.success {
-  display: grid;
-  gap: 0.4rem;
-  background: #e7f6ef;
-  border-radius: 12px;
-  padding: 1rem;
-}
-
-.success p {
-  margin: 0;
-  color: #5b6b63;
+.cover { height: 110px; }
+.cover img { width: 100%; height: 110px; object-fit: cover; display: block; }
+header, .fields, .success { padding: 1.1rem 1.2rem 1.25rem; display: grid; gap: 0.75rem; }
+h1 { margin: 0; font-size: 1.35rem; }
+header p, .muted, small { margin: 0; color: #64748b; }
+label { display: grid; gap: 0.35rem; color: #475569; font-size: 0.92rem; }
+.req { color: #b42318; }
+input, textarea, select {
+  border: 1px solid #e2e8f0; border-radius: 12px; padding: 0.75rem 0.9rem; font: inherit; width: 100%; background: #f8fafc;
 }
+.btn { border: 0; color: #fff; border-radius: 12px; padding: 0.85rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
+.error { color: #b42318; margin: 0; }
+.success { background: #e7f6ef; }
+.opts { display: grid; gap: 0.35rem; }
+.opts label { display: flex; align-items: center; gap: 0.4rem; }
+.stars { display: flex; gap: 0.25rem; }
+.stars button { border: 0; background: none; font-size: 1.3rem; color: #cbd5e1; cursor: pointer; }
+.stars button.on { color: #eab308; }
+.heading { margin: 0; font-weight: 700; color: #0f172a; }
 </style>