fix(inbox): fix custom field disappearing in inbox right sidebar

packages/erxes-ui/src/components/Box.tsx

@@ -48,7 +48,9 @@ export default class Box extends React.Component<BoxProps, BoxState> {
 
       setConfig(STORAGE_KEY, config);
 
-      return callback && callback();
+      if (!isOpen && callback) {
+        return callback();
+      }
     }
   };
 

packages/plugin-inbox-ui/src/inbox/components/conversationDetail/sidebar/Sidebar.tsx

@@ -1,5 +1,6 @@
 import { BasicInfo, TabContent } from './styles';
 import { TabTitle, Tabs } from '@erxes/ui/src/components/tabs';
+import { isEnabled, loadDynamicComponent } from '@erxes/ui/src/utils/core';
 
 import Box from '@erxes/ui/src/components/Box';
 import CompanySection from '@erxes/ui-contacts/src/companies/components/CompanySection';
@@ -13,7 +14,6 @@ import Sidebar from '@erxes/ui/src/layout/components/Sidebar';
 import WebsiteActivity from '@erxes/ui-contacts/src/customers/components/common/WebsiteActivity';
 import { __ } from 'coreui/utils';
 import asyncComponent from '@erxes/ui/src/components/AsyncComponent';
-import { isEnabled, loadDynamicComponent } from '@erxes/ui/src/utils/core';
 
 const ActionSection = asyncComponent(() =>
   import(
@@ -222,6 +222,7 @@ class Index extends React.Component<IndexProps, IndexState> {
             loading={loading}
             customer={customer}
             isDetail={false}
+            collapseCallback={toggleSection}
           />
           <Box
             title={__('Conversation details')}

packages/plugin-inbox-ui/src/inbox/containers/conversationDetail/Sidebar.tsx

@@ -63,18 +63,27 @@ class Sidebar extends React.Component<FinalProps, State> {
     }
   }
 
+  mergeProperties = () => {
+    const config = getConfig(STORAGE_KEY) || {};
+
+    return Object.entries(config)?.reduce((result, [key, value]) => {
+      const keys = key.replace(/[0-9]+$/, '');
+      result[keys] = keys in result ? result[keys] || value : value;
+
+      return result;
+    }, {});
+  };
+
   getCustomerDetail(customerId?: string) {
     if (!customerId) {
       return null;
     }
 
-    const sectionParams = getConfig(STORAGE_KEY);
-
     this.setState({ loading: true });
 
     client
       .query({
-        query: gql(queries.generateCustomerDetailQuery(sectionParams)),
+        query: gql(queries.generateCustomerDetailQuery(this.mergeProperties())),
         fetchPolicy: 'network-only',
         variables: { _id: customerId }
       })
@@ -99,9 +108,11 @@ class Sidebar extends React.Component<FinalProps, State> {
   render() {
     const { customer, loading } = this.state;
 
+    const mergedProperties = this.mergeProperties();
+
     const taggerRefetchQueries = [
       {
-        query: gql(queries.generateCustomerDetailQuery(getConfig(STORAGE_KEY))),
+        query: gql(queries.generateCustomerDetailQuery(mergedProperties)),
         variables: { _id: customer._id }
       }
     ];

packages/ui-contacts/src/customers/containers/CustomFieldsSection.tsx

@@ -1,23 +1,25 @@
-import GenerateCustomFields from '@erxes/ui-forms/src/settings/properties/components/GenerateCustomFields';
+import * as compose from 'lodash.flowright';
+
+import { EditMutationResponse, ICustomer } from '../types';
+
 import { FIELDS_GROUPS_CONTENT_TYPES } from '@erxes/ui-forms/src/settings/properties/constants';
-import { queries as fieldQueries } from '@erxes/ui-forms/src/settings/properties/graphql';
 import { FieldsGroupsQueryResponse } from '@erxes/ui-forms/src/settings/properties/types';
-import Spinner from '@erxes/ui/src/components/Spinner';
+import GenerateCustomFields from '@erxes/ui-forms/src/settings/properties/components/GenerateCustomFields';
+import React from 'react';
 import Sidebar from '@erxes/ui/src/layout/components/Sidebar';
-import { withProps } from '@erxes/ui/src/utils';
-import { isEnabled } from '@erxes/ui/src/utils/core';
+import Spinner from '@erxes/ui/src/components/Spinner';
+import { queries as fieldQueries } from '@erxes/ui-forms/src/settings/properties/graphql';
 import { gql } from '@apollo/client';
-import * as compose from 'lodash.flowright';
-import React from 'react';
 import { graphql } from '@apollo/client/react/hoc';
-
+import { isEnabled } from '@erxes/ui/src/utils/core';
 import { mutations } from '../graphql';
-import { EditMutationResponse, ICustomer } from '../types';
+import { withProps } from '@erxes/ui/src/utils';
 
 type Props = {
   customer: ICustomer;
   loading?: boolean;
   isDetail: boolean;
+  collapseCallback: () => void;
 };
 
 type FinalProps = {
@@ -31,7 +33,8 @@ const CustomFieldsSection = (props: FinalProps) => {
     customersEdit,
     fieldsGroupsQuery,
     loading,
-    isDetail
+    isDetail,
+    collapseCallback
   } = props;
 
   if (fieldsGroupsQuery && fieldsGroupsQuery.loading) {
@@ -62,7 +65,8 @@ const CustomFieldsSection = (props: FinalProps) => {
     customFieldsData: customer.customFieldsData,
     fieldsGroups: fieldsGroupsQuery ? fieldsGroupsQuery.fieldsGroups : [],
     isDetail,
-    object: customer
+    object: customer,
+    collapseCallback
   };
 
   return <GenerateCustomFields {...updatedProps} />;

packages/ui-forms/src/settings/properties/components/GenerateCustomFields.tsx

@@ -1,6 +1,7 @@
 import { Divider, SidebarContent, SidebarFooter } from '../styles';
 import { IField, ILocationOption } from '@erxes/ui/src/types';
 import { IFieldGroup, LogicParams } from '../types';
+import { getConfig, setConfig } from '@erxes/ui/src/utils/core';
 
 import { Alert } from '@erxes/ui/src/utils';
 import Box from '@erxes/ui/src/components/Box';
@@ -12,6 +13,7 @@ import { ModalTrigger } from '@erxes/ui/src';
 import React from 'react';
 import Sidebar from '@erxes/ui/src/layout/components/Sidebar';
 import Tip from '@erxes/ui/src/components/Tip';
+import _ from 'lodash';
 import { checkLogic } from '../utils';
 
 declare const navigator: any;
@@ -31,6 +33,7 @@ type Props = {
     callback: (error: Error) => void,
     extraValues?: any
   ) => void;
+  collapseCallback: () => void;
 };
 
 type State = {
@@ -39,7 +42,7 @@ type State = {
   extraValues?: any;
   currentLocation: ILocationOption;
 };
-
+const STORAGE_KEY = `erxes_sidebar_section_config`;
 class GenerateGroup extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -52,6 +55,24 @@ class GenerateGroup extends React.Component<Props, State> {
   }
 
   async componentDidMount() {
+    const { fieldGroup, collapseCallback } = this.props;
+
+    if (fieldGroup.alwaysOpen) {
+      const customField = getConfig(STORAGE_KEY) || {};
+
+      if (
+        _.isEmpty(customField) ||
+        !customField[`showCustomFields${fieldGroup.order}`]
+      ) {
+        setConfig(STORAGE_KEY, {
+          ...customField,
+          [`showCustomFields${fieldGroup.order}`]: true
+        });
+        // tslint:disable-next-line:no-unused-expression
+        collapseCallback && collapseCallback();
+      }
+    }
+
     if (this.props.fieldGroup.fields.findIndex(e => e.type === 'map') === -1) {
       return;
     }
@@ -255,7 +276,7 @@ class GenerateGroup extends React.Component<Props, State> {
       <SidebarContent>
         {Array(numberToIterate)
           .fill(0)
-          .map((_, groupDataIndex) => {
+          .map((___, groupDataIndex) => {
             const groupDataValue = groupData[groupDataIndex] || {};
 
             const fieldRenders = fields.map((field, index) => {
@@ -349,7 +370,8 @@ class GenerateGroup extends React.Component<Props, State> {
       fieldGroup,
       fieldsGroups,
       customFieldsData = [],
-      isDetail
+      isDetail,
+      collapseCallback
     } = this.props;
 
     const childGroups = fieldsGroups.filter(
@@ -445,6 +467,7 @@ class GenerateGroup extends React.Component<Props, State> {
           save={this.props.save}
           saveGroup={saveGroup}
           object={this.props.object}
+          collapseCallback={collapseCallback}
         />
       );
     });
@@ -461,7 +484,7 @@ class GenerateGroup extends React.Component<Props, State> {
   };
 
   render() {
-    const { fieldGroup, isDetail } = this.props;
+    const { fieldGroup, isDetail, collapseCallback } = this.props;
     const isVisibleKey = isDetail ? 'isVisibleInDetail' : 'isVisible';
     let extraButtons = <></>;
     const visibleField = fieldGroup.fields.find(el => el.isVisible === true);
@@ -516,8 +539,9 @@ class GenerateGroup extends React.Component<Props, State> {
       <Box
         extraButtons={extraButtons}
         title={fieldGroup.name}
-        name="showCustomFields"
+        name={`showCustomFields${fieldGroup.order}`}
         isOpen={fieldGroup.alwaysOpen}
+        callback={collapseCallback}
       >
         {this.renderContent()}
         {this.renderButtons()}
@@ -534,6 +558,7 @@ type GroupsProps = {
   loading?: boolean;
   object?: any;
   save: (data: { customFieldsData: any }, callback: () => any) => void;
+  collapseCallback: () => void;
 };
 
 class GenerateGroups extends React.Component<GroupsProps> {
@@ -565,7 +590,8 @@ class GenerateGroups extends React.Component<GroupsProps> {
       loading,
       fieldsGroups = [],
       customFieldsData,
-      isDetail
+      isDetail,
+      collapseCallback
     } = this.props;
 
     const groups = fieldsGroups.filter(gro => !gro.parentId);
@@ -638,6 +664,7 @@ class GenerateGroups extends React.Component<GroupsProps> {
           object={this.props.object}
           saveGroup={this.saveGroup}
           save={this.props.save}
+          collapseCallback={collapseCallback}
         />
       );
     });