@finema/finework-layer 2.0.34 → 2.0.36

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [2.0.36](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.35...2.0.36) (2026-08-19)
+
+### Features
+
+* replace success notification with modal in feedback ticket form ([3368f40](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/3368f40fd726fee9496093fd4c6915535d64868a))
+
+## [2.0.35](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.34...2.0.35) (2026-08-19)
+
+### Features
+
+* translate feedback ticket form from Thai to English ([437b87a](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/437b87a5d75f02c615eeca19595d8f51f5dedcf7))
+
 ## [2.0.34](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/2.0.33...2.0.34) (2026-08-18)
 
 ### Features

package/app/components/FeedbackTicket/Form.vue

@@ -20,7 +20,7 @@
             </div>
             <div>
               <h2 class="text-base font-semibold text-gray-900">
-                แจ้งปัญหา / ขอ Feature
+                Report Issue / Request Feature
               </h2>
               <p class="text-xs text-gray-500">
                 Feedback Ticket
@@ -31,7 +31,7 @@
             <NuxtLink
               :to="routes.feedbackTicket.tickets.to"
               class="flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
-              title="ดูรายการทั้งหมด"
+              title="View all tickets"
               @click="emit('update', false)"
             >
               <Icon
@@ -69,7 +69,7 @@
             class="flex-1 justify-center"
             @click="emit('update', false)"
           >
-            ยกเลิก
+            Cancel
           </Button>
           <Button
             class="flex-1 justify-center"
@@ -77,12 +77,44 @@
             :disabled="!form.meta.value.dirty || addLoader.status.value.isLoading"
             @click="onSubmit"
           >
-            ส่งรายงาน
+            Submit
           </Button>
         </div>
       </div>
     </template>
   </Slideover>
+
+  <Modal
+    v-model:open="isSuccessOpen"
+    :ui="{ content: 'max-w-sm' }"
+  >
+    <template #content>
+      <div class="relative flex flex-col items-center px-6 py-10 text-center">
+        <button
+          class="absolute top-4 right-4 flex size-8 cursor-pointer items-center justify-center rounded-lg text-gray-400 transition hover:bg-gray-100 hover:text-gray-600"
+          type="button"
+          @click="isSuccessOpen = false"
+        >
+          <Icon
+            name="ph:x"
+            class="size-5"
+          />
+        </button>
+        <div class="flex size-20 items-center justify-center rounded-full bg-green-500">
+          <Icon
+            name="ph:check-bold"
+            class="size-10 text-white"
+          />
+        </div>
+        <h3 class="mt-6 text-xl font-bold text-gray-900">
+          Feedback received!
+        </h3>
+        <p class="mt-2 text-sm text-gray-400">
+          Every issue reported makes us better.
+        </p>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script lang="ts" setup>
@@ -103,12 +135,14 @@ defineProps<{
 const addLoader = useFeedbackTicketAddLoader()
 const noti = useNotification()
 
+const isSuccessOpen = ref(false)
+
 const form = useForm({
   validationSchema: toTypedSchema(
     v.object({
-      title: v.pipe(v.string(), v.minLength(1, 'กรุณาระบุหัวข้อ')),
-      description: v.pipe(v.string(), v.minLength(1, 'กรุณาระบุรายละเอียด')),
-      category: v.pipe(v.string(), v.minLength(1, 'กรุณาเลือกประเภท')),
+      title: v.pipe(v.string(), v.minLength(1, 'Please enter a title')),
+      description: v.pipe(v.string(), v.minLength(1, 'Please enter a description')),
+      category: v.pipe(v.string(), v.minLength(1, 'Please select a category')),
       priority: v.optional(v.string(), FeedbackTicketPriority.LOW),
       app: v.nullish(v.string()),
       files: v.nullish(
@@ -133,8 +167,8 @@ const formFields = createFormFields(() => [
     props: {
       form,
       name: 'title',
-      label: 'หัวข้อ',
-      placeholder: 'อธิบายปัญหาหรือ feature ที่ต้องการสั้นๆ',
+      label: 'Title',
+      placeholder: 'Briefly describe the issue or feature you need',
       required: true,
     },
   },
@@ -143,9 +177,9 @@ const formFields = createFormFields(() => [
     class: 'col-span-2',
     props: {
       form,
-      label: 'ระบบ',
+      label: 'App',
       name: 'app',
-      placeholder: 'เลือกระบบ',
+      placeholder: 'Select an app',
       clearable: true,
       options: UserModuleOptions,
     },
@@ -155,8 +189,8 @@ const formFields = createFormFields(() => [
     props: {
       form,
       name: 'category',
-      label: 'ประเภท',
-      placeholder: 'เลือกประเภท',
+      label: 'Category',
+      placeholder: 'Select a category',
       options: FeedbackTicketCategoryOptions,
       required: true,
     },
@@ -166,8 +200,8 @@ const formFields = createFormFields(() => [
     props: {
       form,
       name: 'priority',
-      label: 'ความสำคัญ',
-      placeholder: 'เลือกความสำคัญ',
+      label: 'Priority',
+      placeholder: 'Select a priority',
       options: FeedbackTicketPriorityOptions,
     },
   },
@@ -177,8 +211,8 @@ const formFields = createFormFields(() => [
     props: {
       form,
       name: 'description',
-      label: 'รายละเอียด',
-      placeholder: 'อธิบายปัญหาหรือ feature ที่ต้องการอย่างละเอียด เช่น ขั้นตอนที่ทำให้เกิดปัญหา, ผลลัพธ์ที่ต้องการ',
+      label: 'Description',
+      placeholder: 'Describe the issue or feature in detail, e.g. steps to reproduce, expected result',
       rows: 2,
       required: true,
     },
@@ -189,8 +223,8 @@ const formFields = createFormFields(() => [
     props: {
       form,
       name: 'files',
-      label: 'แนบรูปภาพ (ถ้ามี)',
-      placeholder: 'PNG, JPG, GIF, WEBP (สูงสุด 5MB)',
+      label: 'Attach images (optional)',
+      placeholder: 'PNG, JPG, GIF, WEBP (max 5MB)',
       requestOptions: useRequestOptions().file(FileAppType.COMMON),
       accept: '.jpg,.jpeg,.png,.gif,.webp',
       maxSize: 5120,
@@ -228,9 +262,7 @@ useWatchTrue(
   () => {
     emit('success')
     form.resetForm()
-    noti.success({
-      title: 'ส่งรายงานสำเร็จ ขอบคุณ!',
-    })
+    isSuccessOpen.value = true
   },
 )
 
@@ -238,8 +270,8 @@ useWatchTrue(
   () => addLoader.status.value.isError,
   () => {
     noti.error({
-      title: 'ส่งรายงานไม่สำเร็จ',
-      description: StringHelper.getError(addLoader.status.value.errorData, 'กรุณาลองใหม่ภายหลัง'),
+      title: 'Failed to submit',
+      description: StringHelper.getError(addLoader.status.value.errorData, 'Please try again later'),
     })
   },
 )

package/app/constants/feedback-ticket/priority.ts

@@ -12,7 +12,24 @@ export const FeedbackTicketPriorityLabel: Record<FeedbackTicketPriority, string>
   [FeedbackTicketPriority.LOW]: 'Low',
 }
 
+export const FeedbackTicketPriorityIcon: Record<FeedbackTicketPriority, string> = {
+  [FeedbackTicketPriority.CRITICAL]: 'ph:warning-circle-fill',
+  [FeedbackTicketPriority.HIGH]: 'ph:arrow-up',
+  [FeedbackTicketPriority.MEDIUM]: 'ph:minus',
+  [FeedbackTicketPriority.LOW]: 'ph:arrow-down',
+}
+
+export const FeedbackTicketPriorityColor: Record<FeedbackTicketPriority, 'info' | 'neutral' | 'success' | 'warning' | 'error'> = {
+  [FeedbackTicketPriority.CRITICAL]: 'error',
+  [FeedbackTicketPriority.HIGH]: 'warning',
+  [FeedbackTicketPriority.MEDIUM]: 'info',
+  [FeedbackTicketPriority.LOW]: 'neutral',
+}
+
 export const FeedbackTicketPriorityOptions = Object.entries(FeedbackTicketPriorityLabel).map(([value, label]) => ({
   value,
   label,
+  chip: {
+    color: FeedbackTicketPriorityColor[value as FeedbackTicketPriority],
+  },
 }))

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "2.0.34",
+  "version": "2.0.36",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",