From 0b75e92cf72431c22cbbeae886454a6dd0f0e6f4 Mon Sep 17 00:00:00 2001
From: Ariunzaya <91462097+ariunzayarin@users.noreply.github.com>
Date: Tue, 19 Sep 2023 17:05:29 +0800
Subject: [PATCH] fix(integration): messenger form select (#4620)

---
 .../erxes-ui/src/components/step/styles.ts    |  3 ++-
 .../src/forms/components/List.tsx             |  3 ++-
 .../src/forms/components/Row.tsx              |  3 +++
 .../containers/messenger/AddOns.tsx           | 22 ++++++++++++++++---
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/erxes-ui/src/components/step/styles.ts b/packages/erxes-ui/src/components/step/styles.ts
index 41bc9dcf516..d8d349e22ba 100644
--- a/packages/erxes-ui/src/components/step/styles.ts
+++ b/packages/erxes-ui/src/components/step/styles.ts
@@ -168,7 +168,8 @@ const StepContent = styledTS<{ direction?: string; fullWidth?: boolean }>(
 )`
   width: ${props =>
     props.direction === 'vertical' ? 'calc(100% - 35px)' : '100%'};
-  height: 100%;
+  height: ${props =>
+    props.direction === 'vertical' ? 'calc(100% - 35px)' : 'calc(100% - 55px)'};
   margin-left: ${props => props.direction && 'auto'};
  overflow: ${props => props.fullWidth && 'hidden'};
 `;
diff --git a/packages/plugin-inbox-ui/src/forms/components/List.tsx b/packages/plugin-inbox-ui/src/forms/components/List.tsx
index f0c0be41205..9457199c9ee 100644
--- a/packages/plugin-inbox-ui/src/forms/components/List.tsx
+++ b/packages/plugin-inbox-ui/src/forms/components/List.tsx
@@ -180,6 +180,7 @@ class List extends React.Component<Props, {}> {
               <SortHandler sortField={'createdDate'} label={__('Created at')} />
             </th>
             {isEnabled('tags') && <th>{__('Tags')}</th>}
+            <th>{__('Flow type')}</th>
             <th>{__('Actions')}</th>
           </tr>
         </thead>
@@ -212,7 +213,7 @@ class List extends React.Component<Props, {}> {
             }
           />
         }
-        hasBorder
+        hasBorder={true}
       />
     );
   }
diff --git a/packages/plugin-inbox-ui/src/forms/components/Row.tsx b/packages/plugin-inbox-ui/src/forms/components/Row.tsx
index 6d6a2d067a4..3cf1a945007 100644
--- a/packages/plugin-inbox-ui/src/forms/components/Row.tsx
+++ b/packages/plugin-inbox-ui/src/forms/components/Row.tsx
@@ -241,6 +241,9 @@ class Row extends React.Component<Props> {
             <Tags tags={tags} limit={2} />
           </td>
         )}
+        <td>
+          <Label>{integration.leadData.loadType}</Label>
+        </td>
         <td>
           <ActionButtons>
             {this.manageAction(integration)}
diff --git a/packages/plugin-inbox-ui/src/settings/integrations/containers/messenger/AddOns.tsx b/packages/plugin-inbox-ui/src/settings/integrations/containers/messenger/AddOns.tsx
index 285d98776b2..79b36a623b7 100644
--- a/packages/plugin-inbox-ui/src/settings/integrations/containers/messenger/AddOns.tsx
+++ b/packages/plugin-inbox-ui/src/settings/integrations/containers/messenger/AddOns.tsx
@@ -32,17 +32,29 @@ type Props = {
 type FinalProps = {
   knowledgeBaseTopicsQuery: TopicsQueryResponse;
   leadIntegrationsQuery: IntegrationsQueryResponse;
+  leadIntegrationsTotalCountQuery: any;
 } & IRouterProps &
   Props;
 
 class KnowledgeBaseContainer extends React.Component<FinalProps> {
   render() {
-    const { knowledgeBaseTopicsQuery, leadIntegrationsQuery } = this.props;
+    const {
+      knowledgeBaseTopicsQuery,
+      leadIntegrationsQuery,
+      leadIntegrationsTotalCountQuery
+    } = this.props;
 
     if (knowledgeBaseTopicsQuery.loading) {
       return <Spinner objective={true} />;
     }
 
+    if (leadIntegrationsTotalCountQuery?.integrationsTotalCount) {
+      leadIntegrationsQuery.refetch({
+        perPage:
+          leadIntegrationsTotalCountQuery?.integrationsTotalCount?.byKind?.lead
+      });
+    }
+
     const topics = knowledgeBaseTopicsQuery.knowledgeBaseTopics || [];
     const leads = leadIntegrationsQuery.integrations || [];
 
@@ -56,16 +68,20 @@ class KnowledgeBaseContainer extends React.Component<FinalProps> {
   }
 }
 
-export default withProps<Props>(
+export default withProps<FinalProps>(
   compose(
     graphql<Props, TopicsQueryResponse>(gql(kbQueries.knowledgeBaseTopics), {
       name: 'knowledgeBaseTopicsQuery'
     }),
+    graphql<{}>(gql(queries.integrationTotalCount), {
+      name: 'leadIntegrationsTotalCountQuery'
+    }),
     graphql<Props, IntegrationsQueryResponse>(gql(queries.integrations), {
       name: 'leadIntegrationsQuery',
       options: () => ({
         variables: {
-          kind: 'lead'
+          kind: 'lead',
+          perPage: 20
         }
       })
     }),