chore: Add action to set dark mode from the react-native-widget (#7167)

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/packs/sdk.js

@@ -146,6 +146,12 @@ const runSDK = ({ baseUrl, websiteToken }) => {
       IFrameHelper.sendMessage('set-locale', { locale: localeToBeUsed });
     },
 
+    setColorScheme(darkMode = 'light') {
+      IFrameHelper.sendMessage('set-color-scheme', {
+        darkMode: getDarkMode(darkMode),
+      });
+    },
+
     reset() {
       if (window.$chatwoot.isOpen) {
         IFrameHelper.events.toggleBubble();

app/javascript/widget/App.vue

@@ -117,6 +117,7 @@ export default {
       'setReferrerHost',
       'setWidgetColor',
       'setBubbleVisibility',
+      'setColorScheme',
     ]),
     ...mapActions('conversation', ['fetchOldConversations', 'setUserLastSeen']),
     ...mapActions('campaign', [
@@ -307,6 +308,8 @@ export default {
         } else if (message.event === 'set-locale') {
           this.setLocale(message.locale);
           this.setBubbleLabel();
+        } else if (message.event === 'set-color-scheme') {
+          this.setColorScheme(message.darkMode);
         } else if (message.event === 'toggle-open') {
           this.$store.dispatch('appConfig/toggleWidgetOpen', message.isOpen);
 

app/javascript/widget/store/modules/appConfig.js

@@ -1,5 +1,6 @@
 import {
   SET_BUBBLE_VISIBILITY,
+  SET_COLOR_SCHEME,
   SET_REFERRER_HOST,
   SET_WIDGET_APP_CONFIG,
   SET_WIDGET_COLOR,
@@ -55,6 +56,9 @@ export const actions = {
   setWidgetColor({ commit }, widgetColor) {
     commit(SET_WIDGET_COLOR, widgetColor);
   },
+  setColorScheme({ commit }, darkMode) {
+    commit(SET_COLOR_SCHEME, darkMode);
+  },
   setReferrerHost({ commit }, referrerHost) {
     commit(SET_REFERRER_HOST, referrerHost);
   },
@@ -83,6 +87,9 @@ export const mutations = {
   [SET_BUBBLE_VISIBILITY]($state, hideMessageBubble) {
     $state.hideMessageBubble = hideMessageBubble;
   },
+  [SET_COLOR_SCHEME]($state, darkMode) {
+    $state.darkMode = darkMode;
+  },
 };
 
 export default {

app/javascript/widget/store/modules/specs/appConfig/actions.spec.js

@@ -24,4 +24,11 @@ describe('#actions', () => {
       expect(commit.mock.calls).toEqual([['SET_WIDGET_COLOR', '#eaeaea']]);
     });
   });
+
+  describe('#setColorScheme', () => {
+    it('creates actions for dark mode properly', () => {
+      actions.setColorScheme({ commit }, 'dark');
+      expect(commit.mock.calls).toEqual([['SET_DARK_MODE', 'dark']]);
+    });
+  });
 });

app/javascript/widget/store/modules/specs/appConfig/mutations.spec.js

@@ -24,4 +24,12 @@ describe('#mutations', () => {
       expect(state.widgetColor).toEqual('#00bcd4');
     });
   });
+
+  describe('#SET_COLOR_SCHEME', () => {
+    it('sets dark mode properly', () => {
+      const state = { darkMode: 'light' };
+      mutations.SET_COLOR_SCHEME(state, 'dark');
+      expect(state.darkMode).toEqual('dark');
+    });
+  });
 });

app/javascript/widget/store/types.js

@@ -2,6 +2,7 @@ export const CLEAR_CONVERSATION_ATTRIBUTES = 'CLEAR_CONVERSATION_ATTRIBUTES';
 export const SET_CONVERSATION_ATTRIBUTES = 'SET_CONVERSATION_ATTRIBUTES';
 export const SET_WIDGET_APP_CONFIG = 'SET_WIDGET_APP_CONFIG';
 export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR';
+export const SET_COLOR_SCHEME = 'SET_COLOR_SCHEME';
 export const UPDATE_CONVERSATION_ATTRIBUTES = 'UPDATE_CONVERSATION_ATTRIBUTES';
 export const TOGGLE_WIDGET_OPEN = 'TOGGLE_WIDGET_OPEN';
 export const SET_REFERRER_HOST = 'SET_REFERRER_HOST';