From 9322112481e6341b6b291d7d44b234434a2f6c9b Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Tue, 5 Sep 2023 21:37:51 +0530
Subject: [PATCH] chore: Improvements to utils to load article in widget
 (#7859)

---
 app/javascript/sdk/sdk.js                     |  4 +--
 app/javascript/widget/api/endPoints.js        |  1 +
 app/javascript/widget/mixins/darkModeMixin.js |  6 ++++
 .../specs/conversation/getters.spec.js        | 29 +++++++++++++++++++
 tailwind.config.js                            |  4 ++-
 5 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/app/javascript/sdk/sdk.js b/app/javascript/sdk/sdk.js
index fd2add3e2e9c..313bbb88af1d 100644
--- a/app/javascript/sdk/sdk.js
+++ b/app/javascript/sdk/sdk.js
@@ -280,8 +280,8 @@ export const SDK_CSS = `
   .woot-widget-holder {
     border-radius: 16px;
     bottom: 104px;
-    height: calc(85% - 64px - 20px);
-    max-height: 590px !important;
+    height: calc(90% - 64px - 20px);
+    max-height: 640px !important;
     min-height: 250px !important;
     width: 400px !important;
  }
diff --git a/app/javascript/widget/api/endPoints.js b/app/javascript/widget/api/endPoints.js
index e8193ee9e5b3..208214bcae66 100755
--- a/app/javascript/widget/api/endPoints.js
+++ b/app/javascript/widget/api/endPoints.js
@@ -97,6 +97,7 @@ const getMostReadArticles = (slug, locale) => ({
   url: `/hc/${slug}/${locale}/articles.json`,
   params: {
     page: 1,
+    sort: 'views',
   },
 });
 
diff --git a/app/javascript/widget/mixins/darkModeMixin.js b/app/javascript/widget/mixins/darkModeMixin.js
index 87d7c8048842..62a2255212a1 100644
--- a/app/javascript/widget/mixins/darkModeMixin.js
+++ b/app/javascript/widget/mixins/darkModeMixin.js
@@ -3,6 +3,12 @@ import { mapGetters } from 'vuex';
 export default {
   computed: {
     ...mapGetters({ darkMode: 'appConfig/darkMode' }),
+    prefersDarkMode() {
+      const isOSOnDarkMode =
+        this.darkMode === 'auto' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches;
+      return isOSOnDarkMode || this.darkMode === 'dark';
+    },
   },
   methods: {
     $dm(light, dark) {
diff --git a/app/javascript/widget/store/modules/specs/conversation/getters.spec.js b/app/javascript/widget/store/modules/specs/conversation/getters.spec.js
index da116fe662a1..71299fe0f70e 100644
--- a/app/javascript/widget/store/modules/specs/conversation/getters.spec.js
+++ b/app/javascript/widget/store/modules/specs/conversation/getters.spec.js
@@ -445,4 +445,33 @@ describe('#getters', () => {
     };
     expect(getters.getMessageCount(state)).toEqual(1);
   });
+
+  it('getLastMessage', () => {
+    const state = {
+      conversations: {
+        1: {
+          id: 1,
+          content: 'Thanks for the help',
+          created_at: 1574075964,
+          message_type: 1,
+        },
+        2: {
+          id: 2,
+          content: 'Yes, It makes sense',
+          created_at: 1574092218,
+          message_type: 1,
+        },
+        3: {
+          id: 3,
+          content: 'Yes, It makes sense',
+          created_at: 1574092218,
+          message_type: 0,
+        },
+      },
+      meta: {
+        userLastSeenAt: 1674075964,
+      },
+    };
+    expect(getters.getLastMessage(state).id).toEqual(3);
+  });
 });
diff --git a/tailwind.config.js b/tailwind.config.js
index 64b4c346c502..89546bc30c19 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,8 +26,8 @@ module.exports = {
   ],
   theme: {
     fontSize: {
-      xxs: '0.625rem',
       ...defaultTheme.fontSize,
+      xxs: '0.625rem',
     },
     colors: {
       transparent: 'transparent',
@@ -127,6 +127,7 @@ module.exports = {
       body: slateDark.slate7,
     },
     keyframes: {
+      ...defaultTheme.keyframes,
       wiggle: {
         '0%': { transform: 'translateX(0)' },
         '15%': { transform: 'translateX(0.375rem)' },
@@ -139,6 +140,7 @@ module.exports = {
       },
     },
     animation: {
+      ...defaultTheme.animation,
       wiggle: 'wiggle 0.5s ease-in-out',
     },
   },