Merge branch 'develop' into chore-replace-router-mixin

app/javascript/widget/components/PreChat/Form.vue

@@ -7,6 +7,9 @@ import { isEmptyObject } from 'widget/helpers/utils';
 import { getRegexp } from 'shared/helpers/Validators';
 import useReplaceRoute from 'widget/composables/useReplaceRoute';
 import darkModeMixin from 'widget/mixins/darkModeMixin';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import routerMixin from 'widget/mixins/routerMixin';
+import { useDarkMode } from 'widget/composables/useDarkMode';
 import configMixin from 'widget/mixins/configMixin';
 import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
 
@@ -15,7 +18,7 @@ export default {
     CustomButton,
     Spinner,
   },
-  mixins: [darkModeMixin, configMixin],
+  mixins: [configMixin],
   props: {
     options: {
       type: Object,
@@ -25,7 +28,8 @@ export default {
   setup() {
     const { formatMessage } = useMessageFormatter();
     const replaceRoute = useReplaceRoute();
-    return { replaceRoute, formatMessage };
+    const { getThemeClass } = useDarkMode();
+    return { formatMessage, getThemeClass, replaceRoute };
   },
   data() {
     return {
@@ -130,25 +134,28 @@ export default {
       return `mt-1 border rounded w-full py-2 px-3 text-slate-700 outline-none`;
     },
     isInputDarkOrLightMode() {
-      return `${this.$dm('bg-white', 'dark:bg-slate-600')} ${this.$dm(
-        'text-slate-700',
-        'dark:text-slate-50'
-      )}`;
+      return `${this.getThemeClass(
+        'bg-white',
+        'dark:bg-slate-600'
+      )} ${this.getThemeClass('text-slate-700', 'dark:text-slate-50')}`;
     },
     inputBorderColor() {
-      return `${this.$dm('border-black-200', 'dark:border-black-500')}`;
+      return `${this.getThemeClass(
+        'border-black-200',
+        'dark:border-black-500'
+      )}`;
     },
   },
   methods: {
     labelClass(context) {
       const { hasErrors } = context;
       if (!hasErrors) {
-        return `text-xs font-medium ${this.$dm(
+        return `text-xs font-medium ${this.getThemeClass(
           'text-black-800',
           'dark:text-slate-50'
         )}`;
       }
-      return `text-xs font-medium ${this.$dm(
+      return `text-xs font-medium ${this.getThemeClass(
         'text-red-400',
         'dark:text-red-400'
       )}`;
@@ -263,7 +270,7 @@ export default {
       v-if="shouldShowHeaderMessage"
       v-dompurify-html="formatMessage(headerMessage, false)"
       class="mb-4 text-sm leading-5 pre-chat-header-message"
-      :class="$dm('text-black-800', 'dark:text-slate-50')"
+      :class="getThemeClass('text-black-800', 'dark:text-slate-50')"
     />
     <FormulateInput
       v-for="item in enabledPreChatFields"