chore: Migrate to next Switch component (#12005)

app/javascript/dashboard/routes/dashboard/settings/automation/AutomationRuleRow.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { computed } from 'vue';
 import { messageStamp } from 'shared/helpers/timeHelper';
 import Button from 'dashboard/components-next/button/Button.vue';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
 
 const props = defineProps({
   automation: {
@@ -19,14 +21,17 @@ const readableDate = date => messageStamp(new Date(date), 'LLL d, yyyy');
 const readableDateWithTime = date =>
   messageStamp(new Date(date), 'LLL d, yyyy hh:mm a');
 
-const toggle = () => {
-  const { id, name, active } = props.automation;
-  emit('toggle', {
-    id,
-    name,
-    status: active,
-  });
-};
+const automationActive = computed({
+  get: () => props.automation.active,
+  set: active => {
+    const { id, name } = props.automation;
+    emit('toggle', {
+      id,
+      name,
+      status: !active,
+    });
+  },
+});
 </script>
 
 <template>
@@ -34,7 +39,7 @@ const toggle = () => {
     <td class="py-4 ltr:pr-4 rtl:pl-4 min-w-[200px]">{{ automation.name }}</td>
     <td class="py-4 ltr:pr-4 rtl:pl-4">{{ automation.description }}</td>
     <td class="py-4 ltr:pr-4 rtl:pl-4">
-      <woot-switch :model-value="automation.active" @input="toggle" />
+      <ToggleSwitch v-model="automationActive" />
     </td>
     <td
       class="py-4 ltr:pr-4 rtl:pl-4 min-w-[12px]"

app/javascript/dashboard/routes/dashboard/settings/inbox/PreChatForm/PreChatFields.vue

@@ -1,8 +1,9 @@
 <script>
 import Draggable from 'vuedraggable';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
 
 export default {
-  components: { Draggable },
+  components: { Draggable, ToggleSwitch },
   props: {
     preChatFields: {
       type: Array,
@@ -45,9 +46,9 @@ export default {
       <tr class="border-b border-n-weak">
         <td class="pre-chat-field"><fluent-icon icon="drag" /></td>
         <td class="pre-chat-field">
-          <woot-switch
+          <ToggleSwitch
             :model-value="item['enabled']"
-            @input="handlePreChatFieldOptions($event, 'enabled', item)"
+            @change="handlePreChatFieldOptions($event, 'enabled', item)"
           />
         </td>
         <td

app/javascript/dashboard/routes/dashboard/settings/profile/NotificationPreferences.vue

@@ -9,13 +9,13 @@ import {
   verifyServiceWorkerExistence,
 } from 'dashboard/helper/pushHelper.js';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
-import FormSwitch from 'v3/components/Form/Switch.vue';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
 import { NOTIFICATION_TYPES } from './constants';
 
 export default {
   components: {
     TableHeaderCell,
-    FormSwitch,
+    ToggleSwitch,
     CheckBox,
   },
   data() {
@@ -284,9 +284,9 @@ export default {
           {{ $t('PROFILE_SETTINGS.FORM.NOTIFICATIONS.BROWSER_PERMISSION') }}
         </span>
       </div>
-      <FormSwitch
-        :model-value="hasEnabledPushPermissions"
-        @update:model-value="onRequestPermissions"
+      <ToggleSwitch
+        v-model="hasEnabledPushPermissions"
+        @change="onRequestPermissions"
       />
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue

@@ -10,6 +10,7 @@ import ReportsFiltersRatings from './Filters/Ratings.vue';
 import subDays from 'date-fns/subDays';
 import { DATE_RANGE_OPTIONS } from '../constants';
 import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
 
 export default {
   components: {
@@ -21,6 +22,7 @@ export default {
     ReportsFiltersInboxes,
     ReportsFiltersTeams,
     ReportsFiltersRatings,
+    ToggleSwitch,
   },
   props: {
     showGroupByFilter: {
@@ -106,11 +108,6 @@ export default {
       return this.validGroupOptions[0];
     },
   },
-  watch: {
-    businessHoursSelected() {
-      this.emitChange();
-    },
-  },
   mounted() {
     this.emitChange();
   },
@@ -224,7 +221,7 @@ export default {
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
       <span>
-        <woot-switch v-model="businessHoursSelected" />
+        <ToggleSwitch v-model="businessHoursSelected" @change="emitChange" />
       </span>
     </div>
   </div>

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportFilters.vue

@@ -5,6 +5,7 @@ import startOfDay from 'date-fns/startOfDay';
 import subDays from 'date-fns/subDays';
 import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
 
 import { GROUP_BY_FILTER } from '../constants';
 const CUSTOM_DATE_RANGE_ID = 5;
@@ -13,6 +14,7 @@ export default {
   components: {
     WootDateRangePicker,
     Thumbnail,
+    ToggleSwitch,
   },
   props: {
     currentFilter: {
@@ -125,9 +127,6 @@ export default {
     groupByFilterItemsList() {
       this.currentSelectedGroupByFilter = this.selectedGroupByFilter;
     },
-    businessHoursSelected() {
-      this.$emit('businessHoursToggle', this.businessHoursSelected);
-    },
   },
   mounted() {
     this.onDateRangeChange();
@@ -140,6 +139,9 @@ export default {
         groupBy: this.groupBy,
       });
     },
+    onBusinessHoursToggle() {
+      this.$emit('businessHoursToggle', this.businessHoursSelected);
+    },
     fromCustomDate(date) {
       return getUnixTime(startOfDay(date));
     },
@@ -303,7 +305,10 @@ export default {
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
       <span>
-        <woot-switch v-model="businessHoursSelected" />
+        <ToggleSwitch
+          v-model="businessHoursSelected"
+          @change="onBusinessHoursToggle"
+        />
       </span>
     </div>
 

app/javascript/dashboard/routes/dashboard/settings/sla/SlaForm.vue

@@ -5,11 +5,13 @@ import validations from './validations';
 import SlaTimeInput from './SlaTimeInput.vue';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import { useVuelidate } from '@vuelidate/core';
+import ToggleSwitch from 'dashboard/components-next/switch/Switch.vue';
 
 export default {
   components: {
     SlaTimeInput,
     NextButton,
+    ToggleSwitch,
   },
   props: {
     selectedResponse: {
@@ -203,7 +205,7 @@ export default {
         <span for="sla_bh" class="text-n-slate-11">
           {{ $t('SLA.FORM.BUSINESS_HOURS.PLACEHOLDER') }}
         </span>
-        <woot-switch id="sla_bh" v-model="onlyDuringBusinessHours" />
+        <ToggleSwitch id="sla_bh" v-model="onlyDuringBusinessHours" />
       </div>
 
       <div class="flex items-center justify-end w-full gap-2 mt-8">