feat: Add flat design for widget (#4065)

app/javascript/widget/App.vue

@@ -12,6 +12,7 @@
       'is-mobile': isMobile,
       'is-widget-right': isRightAligned,
       'is-bubble-hidden': hideMessageBubble,
+      'is-flat-design': isWidgetStyleFlat,
     }"
   >
     <router-view></router-view>
@@ -61,6 +62,7 @@ export default {
       isWidgetOpen: 'appConfig/getIsWidgetOpen',
       messageCount: 'conversation/getMessageCount',
       unreadMessageCount: 'conversation/getUnreadMessageCount',
+      isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
     }),
     isIFrame() {
       return IFrameHelper.isIFrame();

app/javascript/widget/assets/scss/woot.scss

@@ -57,3 +57,30 @@ body {
     padding-left: $space-normal;
   }
 }
+
+.is-flat-design {
+  .chat-bubble {
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+    box-shadow: none;
+  }
+
+  button {
+    border-radius: 0 !important;
+  }
+
+  input {
+    border-radius: 0;
+  }
+
+  .chat-message--input {
+    border-radius: 0 !important;
+    box-shadow: none !important;
+
+    &.is-focused {
+      box-shadow: none !important;
+    }
+  }
+}

app/javascript/widget/components/ChatFooter.vue

@@ -1,7 +1,8 @@
 <template>
   <footer
     v-if="!hideReplyBox"
-    class="shadow-sm rounded-lg bg-white mb-1 z-50 relative"
+    class="shadow-sm bg-white mb-1 z-50 relative"
+    :class="{ 'rounded-lg': !isWidgetStyleFlat }"
   >
     <chat-input-wrap
       :on-send-message="handleSendMessage"
@@ -54,6 +55,7 @@ export default {
       widgetColor: 'appConfig/getWidgetColor',
       getConversationSize: 'conversation/getConversationSize',
       currentUser: 'contacts/getCurrentUser',
+      isWidgetStyleFlat: 'appConfig/isWidgetStyleFlat',
     }),
     textColor() {
       return getContrastingTextColor(this.widgetColor);

app/javascript/widget/components/layouts/ViewWithHeader.vue

@@ -97,7 +97,6 @@ export default {
 @import '~widget/assets/scss/mixins';
 
 .header-wrap {
-  border-radius: $space-normal $space-normal 0 0;
   flex-shrink: 0;
   transition: max-height 300ms;
   z-index: 99;

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

@@ -6,14 +6,15 @@ import {
 } from '../types';
 
 const state = {
-  showPopoutButton: false,
   hideMessageBubble: false,
-  position: 'right',
-  isWebWidgetTriggered: false,
   isCampaignViewClicked: false,
+  isWebWidgetTriggered: false,
   isWidgetOpen: false,
-  widgetColor: '',
+  position: 'right',
   referrerHost: '',
+  showPopoutButton: false,
+  widgetColor: '',
+  widgetStyle: 'standard',
 };
 
 export const getters = {
@@ -23,14 +24,19 @@ export const getters = {
   getIsWidgetOpen: $state => $state.isWidgetOpen,
   getWidgetColor: $state => $state.widgetColor,
   getReferrerHost: $state => $state.referrerHost,
+  isWidgetStyleFlat: $state => $state.widgetStyle === 'flat',
 };
 
 export const actions = {
-  setAppConfig({ commit }, { showPopoutButton, position, hideMessageBubble }) {
+  setAppConfig(
+    { commit },
+    { showPopoutButton, position, hideMessageBubble, widgetStyle = 'rounded' }
+  ) {
     commit(SET_WIDGET_APP_CONFIG, {
-      showPopoutButton: !!showPopoutButton,
-      position: position || 'right',
       hideMessageBubble: !!hideMessageBubble,
+      position: position || 'right',
+      showPopoutButton: !!showPopoutButton,
+      widgetStyle,
     });
   },
   toggleWidgetOpen({ commit }, isWidgetOpen) {
@@ -49,6 +55,7 @@ export const mutations = {
     $state.showPopoutButton = data.showPopoutButton;
     $state.position = data.position;
     $state.hideMessageBubble = data.hideMessageBubble;
+    $state.widgetStyle = data.widgetStyle;
   },
   [TOGGLE_WIDGET_OPEN]($state, isWidgetOpen) {
     $state.isWidgetOpen = isWidgetOpen;