feat(chatWidget): can change text color of chat from messenger integr…

…ation form
erxes · Aug 10, 2020 · 75e87fa · 75e87fa
1 parent e743aaf
commit 75e87fa
Show file tree

Hide file tree

Showing 19 changed files with 114 additions and 56 deletions.
diff --git a/ui/src/modules/boards/constants.ts b/ui/src/modules/boards/constants.ts
@@ -16,6 +16,19 @@ export const COLORS = [
   '#63D2D6',
   '#F7CE53'
 ];
+
+export const TEXT_COLORS = [
+  '#fff',
+  '#fefefe',
+  '#fafafa',
+  '#ccc',
+  '#ddd',
+  '#888',
+  '#444',
+  '#333',
+  '#222',
+  '#000'
+];
 export const REMINDER_MINUTES = [
   { _id: '0', name: 'At Time of Due Date' },
   { _id: '5', name: '5 Minutes Before' },

diff --git a/ui/src/modules/settings/integrations/components/messenger/Form.tsx b/ui/src/modules/settings/integrations/components/messenger/Form.tsx
@@ -50,6 +50,7 @@ type State = {
   channelIds: string[];
   languageCode: string;
   color: string;
+  textColor: string;
   wallpaper: string;
   notifyCustomer: boolean;
   supporterIds: string[];
@@ -97,6 +98,7 @@ class CreateMessenger extends React.Component<Props, State> {
       languageCode,
       channelIds: channels.map(item => item._id) || [],
       color: uiOptions.color || '#6569DF',
+      textColor: uiOptions.textColor || '#444',
       wallpaper: uiOptions.wallpaper || '1',
       notifyCustomer: configData.notifyCustomer || false,
       requireAuth: configData.requireAuth,
@@ -207,6 +209,7 @@ class CreateMessenger extends React.Component<Props, State> {
       },
       uiOptions: {
         color: this.state.color,
+        textColor: this.state.textColor,
         wallpaper: this.state.wallpaper,
         logo: this.state.logo
       }
@@ -254,6 +257,7 @@ class CreateMessenger extends React.Component<Props, State> {
       onlineHours,
       timezone,
       color,
+      textColor,
       logoPreviewUrl,
       wallpaper,
       brandId,
@@ -295,6 +299,7 @@ class CreateMessenger extends React.Component<Props, State> {
                 <Appearance
                   onChange={this.onChange}
                   color={color}
+                  textColor={textColor}
                   logoPreviewUrl={logoPreviewUrl}
                   wallpaper={wallpaper}
                 />
@@ -393,6 +398,7 @@ class CreateMessenger extends React.Component<Props, State> {
                 isOnline={isOnline}
                 wallpaper={wallpaper}
                 color={color}
+                textColor={textColor}
                 brands={this.props.brands}
                 brandId={brandId}
                 logoPreviewStyle={logoPreviewStyle}

diff --git a/ui/src/modules/settings/integrations/components/messenger/steps/Appearance.tsx b/ui/src/modules/settings/integrations/components/messenger/steps/Appearance.tsx
@@ -1,4 +1,5 @@
 import classnames from 'classnames';
+import { TEXT_COLORS } from 'modules/boards/constants';
 import { ControlLabel } from 'modules/common/components/form';
 import { FlexItem, LeftItem } from 'modules/common/components/step/styles';
 import { __, uploadHandler } from 'modules/common/utils';
@@ -21,16 +22,17 @@ type Props = {
       | 'logo'
       | 'logoPreviewUrl'
       | 'wallpaper'
-      | 'color',
+      | 'color'
+      | 'textColor',
     value: string
   ) => void;
   color: string;
+  textColor: string;
   logoPreviewUrl?: string;
   wallpaper: string;
 };
 
 type State = {
-  color: string;
   wallpaper: string;
   logoPreviewStyle: any;
   logo: object;
@@ -42,7 +44,6 @@ class Appearance extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      color: props.color,
       wallpaper: props.wallpaper,
       logoPreviewStyle: {},
       logo: {},
@@ -86,7 +87,7 @@ class Appearance extends React.Component<Props, State> {
       <BackgroundSelector
         className={selectorClass}
         onClick={onClick}
-        style={{ borderColor: isSelected ? this.state.color : 'transparent' }}
+        style={{ borderColor: isSelected ? this.props.color : 'transparent' }}
       >
         <div className={`background-${value}`} />
       </BackgroundSelector>
@@ -103,27 +104,47 @@ class Appearance extends React.Component<Props, State> {
   }
 
   render() {
-    const onChange = e => this.onChange('color', e.hex);
+    const { color, textColor, onChange } = this.props;
+    const onChangeColor = (key, e) => onChange(key, e.hex);
 
     const popoverContent = (
       <Popover id="color-picker">
-        <TwitterPicker color={this.state.color} onChange={onChange} />
+        <TwitterPicker color={color} onChange={onChangeColor.bind(this, 'color')} triangle="hide" />
+      </Popover>
+    );
+
+    const textColorContent = (
+      <Popover id="text-color-picker">
+        <TwitterPicker color={textColor} onChange={onChangeColor.bind(this, 'textColor')} colors={TEXT_COLORS} triangle="hide" />
       </Popover>
     );
 
     return (
       <FlexItem>
         <LeftItem>
           <SubItem>
-            <ControlLabel>{__('Choose a custom color')}</ControlLabel>
+            <ControlLabel>{__('Choose a background color')}</ControlLabel>
             <OverlayTrigger
               trigger="click"
               rootClose={true}
               placement="bottom-start"
               overlay={popoverContent}
             >
               <ColorPick>
-                <ColorPicker style={{ backgroundColor: this.state.color }} />
+                <ColorPicker style={{ backgroundColor: color }} />
+              </ColorPick>
+            </OverlayTrigger>
+          </SubItem>
+          <SubItem>
+            <ControlLabel>{__('Choose a text color')}</ControlLabel>
+            <OverlayTrigger
+              trigger="click"
+              rootClose={true}
+              placement="bottom-start"
+              overlay={textColorContent}
+            >
+              <ColorPick>
+                <ColorPicker style={{ backgroundColor: textColor }} />
               </ColorPick>
             </OverlayTrigger>
           </SubItem>

diff --git a/ui/src/modules/settings/integrations/components/messenger/widgetPreview/CommonPreview.tsx b/ui/src/modules/settings/integrations/components/messenger/widgetPreview/CommonPreview.tsx
@@ -11,6 +11,7 @@ import WidgetContent from './WidgetContent';
 type Props = {
   teamMembers: IUser[];
   color: string;
+  textColor: string;
   logoPreviewStyle?: any;
   message?: IMessagesItem;
   wallpaper: string;
@@ -27,14 +28,15 @@ type Props = {
 
 class CommonPreview extends React.Component<Props> {
   renderContent() {
-    const { isGreeting, isOnline, color, wallpaper, message } = this.props;
+    const { isGreeting, isOnline, color, textColor, wallpaper, message } = this.props;
 
     if (isGreeting) {
       return <GreetingContent />;
     }
 
     return (
       <WidgetContent
+        textColor={textColor}
         color={color}
         message={message}
         isOnline={isOnline}

diff --git a/ui/src/modules/settings/integrations/components/messenger/widgetPreview/TopBar.tsx b/ui/src/modules/settings/integrations/components/messenger/widgetPreview/TopBar.tsx
@@ -18,6 +18,7 @@ import SupporterComponent from './Supporters';
 
 type Props = {
   color: string;
+  textColor: string;
   message?: IMessagesItem;
   wallpaper: string;
   supporterIds?: string[];
@@ -154,8 +155,10 @@ class TopBar extends React.Component<Props> {
   }
 
   render() {
+    const { color, textColor } = this.props;
+
     return (
-      <ErxesTopbar style={{ backgroundColor: this.props.color }}>
+      <ErxesTopbar style={{ backgroundColor: color, color: textColor  }}>
         {this.renderContent()}
       </ErxesTopbar>
     );

diff --git a/ui/src/modules/settings/integrations/components/messenger/widgetPreview/WidgetContent.tsx b/ui/src/modules/settings/integrations/components/messenger/widgetPreview/WidgetContent.tsx
@@ -14,6 +14,7 @@ import {
 
 type Props = {
   color: string;
+  textColor: string;
   wallpaper: string;
   isOnline?: boolean;
   message?: IMessagesItem;
@@ -29,7 +30,7 @@ class WidgetContent extends React.Component<Props> {
   };
 
   render() {
-    const { color, wallpaper, message, isOnline } = this.props;
+    const { color, wallpaper, message, isOnline, textColor } = this.props;
 
     const backgroundClasses = `background-${wallpaper}`;
 
@@ -45,7 +46,7 @@ class WidgetContent extends React.Component<Props> {
             <ErxesDate>{__('1 hour ago')}</ErxesDate>
           </li>
           <ErxesFromCustomer>
-            <FromCustomer style={{ backgroundColor: color }}>
+            <FromCustomer style={{ backgroundColor: color, color: textColor }}>
               {__('We need your help!')}
             </FromCustomer>
             <ErxesDate>{__('6 minutes ago')}</ErxesDate>

diff --git a/ui/src/modules/settings/integrations/components/messenger/widgetPreview/styles.ts b/ui/src/modules/settings/integrations/components/messenger/widgetPreview/styles.ts
@@ -14,6 +14,7 @@ const ErxesTopbar = styled.div`
   box-shadow: 0 4px 6px 0 ${rgba(colors.colorBlack, 0.1)};
   min-height: 70px;
   display: inline-table;
+  color: ${colors.colorWhite};
 `;
 
 const TopBarIcon = styledTS<{ isLeft: boolean }>(styled.div)`
@@ -24,7 +25,6 @@ const TopBarIcon = styledTS<{ isLeft: boolean }>(styled.div)`
   height: 40px;
   line-height: 40px;
   text-align: center;
-  color: ${colors.colorWhite};
   position: absolute;
   top: 15px;
   left: ${props => props.isLeft && '15px'};
@@ -47,7 +47,7 @@ const ErxesMiddleTitle = styled.div`
   }
 
   span {
-    color: ${rgba(colors.colorWhite, 0.8)};
+    opacity: 0.8;
     font-size: 13px;
   }
 `;
@@ -216,7 +216,7 @@ const Links = styled.div`
   margin-bottom: ${unitSpace};
 
   span {
-    color: ${rgba(colors.colorWhite, 0.7)};
+    opacity: 0.7;
     font-size: 11px;
   }
 `;
@@ -258,7 +258,7 @@ const GreetingInfo = styled.div`
   }
 
   p {
-    color: ${rgba(colors.colorWhite, 0.8)};
+    opacity: 0.8;
     font-size: 13px;
     margin: 0;
   }

diff --git a/ui/src/modules/settings/integrations/types.ts b/ui/src/modules/settings/integrations/types.ts
@@ -79,6 +79,7 @@ export interface IMessengerData {
 
 export interface IUiOptions {
   color?: string;
+  textColor?: string;
   wallpaper?: string;
   logo?: string;
   logoPreviewUrl?: string;

diff --git a/widgets/client/icons/Icons.js b/widgets/client/icons/Icons.js
diff --git a/widgets/client/messenger/components/Message.tsx b/widgets/client/messenger/components/Message.tsx
@@ -18,6 +18,7 @@ type Props = {
   attachments: IAttachment[];
   user?: IUser;
   color?: string;
+  textColor?: string;
   contentType?: string;
   videoCallData?: IVideoCallData;
   toggleVideo: () => void;
@@ -70,15 +71,17 @@ class Message extends React.Component<Props> {
       user,
       content,
       contentType,
-      videoCallData
+      videoCallData,
+      textColor
     } = this.props;
     const messageClasses = classNames("erxes-message", {
       attachment: attachments && attachments.length > 0,
       "from-customer": !user
     });
 
     const messageBackground = {
-      backgroundColor: !user ? color : ""
+      backgroundColor: !user ? color : "",
+      color: !user ? textColor : ''
     };
 
     if (contentType === MESSAGE_TYPES.VIDEO_CALL) {