Merge pull request #1252 from pratikb64/fix/assignment-rule-ui

frontend/src/components/Settings/AssignmentRules/AssigneeRules.vue

@@ -7,7 +7,8 @@
       <span class="text-p-sm text-ink-gray-6">
         {{
           __(
-            'Define who receives the tickets and how they’re distributed among agents.',
+            'Define who receives the {0} and how they’re distributed among agents.',
+            [documentType],
           )
         }}
       </span>
@@ -15,11 +16,19 @@
     <div class="mt-8 flex items-center justify-between gap-2">
       <div>
         <div class="text-base font-medium text-ink-gray-8">
-          {{ __('Ticket Routing') }}
+          {{
+            __('{0} Routing', [
+              assignmentRuleData.documentType == 'CRM Lead'
+                ? __('Lead')
+                : __('Deal'),
+            ])
+          }}
         </div>
         <div class="text-p-sm text-ink-gray-6 mt-1">
           {{
-            __('Choose how tickets are distributed among selected assignees.')
+            __('Choose how {0} are distributed among selected assignees.', [
+              documentType,
+            ])
           }}
         </div>
       </div>
@@ -32,7 +41,7 @@
             >
               <div>
                 {{
-                  ticketRoutingOptions.find(
+                  documentRoutingOptions.find(
                     (option) => option.value == assignmentRuleData.rule,
                   )?.label
                 }}
@@ -45,7 +54,7 @@
               class="p-1 text-ink-gray-7 mt-1 w-48 bg-white shadow-xl rounded"
             >
               <div
-                v-for="option in ticketRoutingOptions"
+                v-for="option in documentRoutingOptions"
                 :key="option.value"
                 class="p-2 cursor-pointer hover:bg-gray-50 text-sm flex items-center justify-between rounded"
                 @click="
@@ -75,7 +84,7 @@
           {{ __('Assignees') }}
         </div>
         <div class="text-p-sm text-ink-gray-6 mt-1">
-          {{ __('Choose who receives the tickets.') }}
+          {{ __('Choose who receives the {0}.', [documentType]) }}
         </div>
       </div>
       <AssigneeSearch @addAssignee="validateAssignmentRule('users')" />
@@ -119,8 +128,13 @@ const { getUser } = usersStore()
 const assignmentRuleData = inject('assignmentRuleData')
 const assignmentRuleErrors = inject('assignmentRuleErrors')
 const validateAssignmentRule = inject('validateAssignmentRule')
+const documentType = computed(() =>
+  assignmentRuleData.value.documentType == 'CRM Lead'
+    ? __('leads')
+    : __('deals'),
+)
 
-const ticketRoutingOptions = [
+const documentRoutingOptions = [
   {
     label: 'Auto-rotate',
     value: 'Round Robin',

frontend/src/components/Settings/AssignmentRules/AssignmentRuleView.vue

@@ -154,7 +154,9 @@
         <div class="flex items-center justify-between gap-6">
           <span class="text-p-sm text-ink-gray-6">
             {{
-              __('Choose which tickets are affected by this assignment rule.')
+              __('Choose which {0} are affected by this assignment rule.', [
+                documentType,
+              ])
             }}
             <a
               class="font-medium underline"
@@ -231,9 +233,9 @@
         <div class="flex items-center justify-between gap-6">
           <span class="text-p-sm text-ink-gray-6">
             {{
-              __(
+              __('Choose which {0} are affected by this un-assignment rule.', [
-                'Choose which tickets are affected by this un-assignment rule.',
+                documentType,
-              )
+              ])
             }}
             <a
               class="font-medium underline"
@@ -340,7 +342,15 @@ import {
   Switch,
   toast,
 } from 'frappe-ui'
-import { onMounted, onUnmounted, ref, inject, watch, provide } from 'vue'
+import {
+  onMounted,
+  onUnmounted,
+  ref,
+  inject,
+  watch,
+  provide,
+  computed,
+} from 'vue'
 import AssignmentRulesSection from './AssignmentRulesSection.vue'
 import AssignmentSchedule from './AssignmentSchedule.vue'
 import AssigneeRules from './AssigneeRules.vue'
@@ -364,6 +374,11 @@ const showConfirmDialog = ref({
 })
 const useNewUI = ref(true)
 const isOldSla = ref(false)
+const documentType = computed(() =>
+  assignmentRuleData.value.documentType == 'CRM Lead'
+    ? __('leads')
+    : __('deals'),
+)
 const deskUrl = `${window.location.origin}/app/assignment-rule/${step.value.data?.name}`
 
 const defaultAssignmentDays = [

frontend/src/components/Settings/AssignmentRules/AssignmentRules.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="px-10 py-8 sticky top-0">
+  <div class="p-8 sticky top-0">
     <div class="flex items-start justify-between">
       <div class="flex flex-col gap-1">
-        <h1 class="text-lg font-semibold text-ink-gray-8">
+        <h1 class="text-xl font-semibold text-ink-gray-8">
           {{ __('Assignment rules') }}
         </h1>
-        <p class="text-p-sm text-ink-gray-6 max-w-md">
+        <p class="text-p-base text-ink-gray-6 max-w-md">
           {{
             __(
-              'Assignment Rules automatically route tickets to the right team members based on predefined conditions.',
+              'Assignment Rules automatically route leads or deals to the right team members based on predefined conditions.',
             )
           }}
         </p>
@@ -22,7 +22,7 @@
       />
     </div>
   </div>
-  <div class="overflow-y-auto px-10 pb-8">
+  <div class="overflow-y-auto px-8 pb-6">
     <AssignmentRulesList />
   </div>
 </template>

frontend/src/components/Settings/EmailTemplate/EditEmailTemplate.vue

@@ -9,7 +9,7 @@
           :label="__(template.name)"
           size="md"
           @click="() => emit('updateStep', 'template-list')"
-          class="text-xl !h-7 font-semibold hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5"
+          class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !pr-0 !max-w-96 !justify-start"
         />
       </div>
       <div class="flex item-center space-x-2 w-3/12 justify-end">

frontend/src/components/Settings/EmailTemplate/NewEmailTemplate.vue

@@ -11,7 +11,7 @@
           "
           size="md"
           @click="() => emit('updateStep', 'template-list')"
-          class="text-xl !h-7 font-semibold hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5"
+          class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !pr-0 !max-w-96 !justify-start"
         />
       </div>
       <div class="flex item-center space-x-2 w-3/12 justify-end">

frontend/src/components/Settings/General/BrandSettings.vue

@@ -9,7 +9,7 @@
           :label="__('Brand settings')"
           size="md"
           @click="() => emit('updateStep', 'general-settings')"
-          class="text-xl !h-7 font-semibold hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5"
+          class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !justify-start"
         />
         <Badge
           v-if="settings.isDirty"

frontend/src/components/Settings/General/CurrencySettings.vue

@@ -9,7 +9,7 @@
           :label="__('Currency & Exchange rate provider')"
           size="md"
           @click="() => emit('updateStep', 'general-settings')"
-          class="text-xl !h-7 font-semibold hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5"
+          class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !justify-start"
         />
         <Badge
           v-if="settings.isDirty"

frontend/src/components/Settings/General/HomeActions.vue

@@ -9,7 +9,7 @@
           :label="__('Home actions')"
           size="md"
           @click="() => emit('updateStep', 'general-settings')"
-          class="text-xl !h-7 font-semibold hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5"
+          class="cursor-pointer hover:bg-transparent focus:bg-transparent focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:none active:bg-transparent active:outline-none active:ring-0 active:ring-offset-0 active:text-ink-gray-5 font-semibold text-xl hover:opacity-70 !pr-0 !max-w-96 !justify-start"
         />
       </div>
       <div class="flex item-center space-x-2 w-3/12 justify-end">