scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-03 04:27:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Muhsin Keloth
2023-05-23 04:04:09 +05:30
committed by GitHub
parent d481b9fbcf
commit 03bbd048a7
6 changed files with 32 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/packs/sdk.js
View File

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

3
app/javascript/widget/App.vue
View File

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

7
app/javascript/widget/store/modules/appConfig.js
View File

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

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

@@ -24,4 +24,11 @@ describe('#actions', () => {
expect(commit.mock.calls).toEqual([['SET_WIDGET_COLOR', '#eaeaea']]); 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']]);
});
});
}); });

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

@@ -24,4 +24,12 @@ describe('#mutations', () => {
expect(state.widgetColor).toEqual('#00bcd4'); 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');
});
});
}); });

1
app/javascript/widget/store/types.js
View File

@@ -2,6 +2,7 @@ export const CLEAR_CONVERSATION_ATTRIBUTES = 'CLEAR_CONVERSATION_ATTRIBUTES';
export const SET_CONVERSATION_ATTRIBUTES = 'SET_CONVERSATION_ATTRIBUTES'; export const SET_CONVERSATION_ATTRIBUTES = 'SET_CONVERSATION_ATTRIBUTES';
export const SET_WIDGET_APP_CONFIG = 'SET_WIDGET_APP_CONFIG'; export const SET_WIDGET_APP_CONFIG = 'SET_WIDGET_APP_CONFIG';
export const SET_WIDGET_COLOR = 'SET_WIDGET_COLOR'; 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 UPDATE_CONVERSATION_ATTRIBUTES = 'UPDATE_CONVERSATION_ATTRIBUTES';
export const TOGGLE_WIDGET_OPEN = 'TOGGLE_WIDGET_OPEN'; export const TOGGLE_WIDGET_OPEN = 'TOGGLE_WIDGET_OPEN';
export const SET_REFERRER_HOST = 'SET_REFERRER_HOST'; export const SET_REFERRER_HOST = 'SET_REFERRER_HOST';