success to show bot type with component

src/client/js/components/Admin/SlackIntegration/BotTypeCard.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const BotTypeCard = (props) => {
+  const { t } = useTranslation('admin');
+
+  const renderRecommendedBadge = () => {
+    return (
+      <span className="badge badge-info mr-2">
+        {t('admin:slack_integration.selecting_bot_types.recommended')}
+      </span>
+    );
+  };
+
+  return (
+    <div
+      className={`card admin-bot-card mx-3 rounded border-radius-sm shadow ${props.isActive ? 'border-primary' : ''}`}
+      onClick={() => props.handleBotTypeSelect(props.key)}
+      role="button"
+      key={props.key}
+    >
+      <div>
+        <h3 className={`card-header mb-0 py-3
+              ${props.key === 'officialBot' ? 'd-flex align-items-center justify-content-center' : 'text-center'}
+              ${props.isActive ? 'bg-primary text-light' : ''}`}
+        >
+          <span className="mr-2">
+            {props.value.name}
+
+          </span>
+          <span className="supplementary-bot-name mr-2">
+            {props.value.supplementaryBotName}
+          </span>
+
+          {props.key === 'officialBot' ? renderRecommendedBadge() : ''}
+
+          {/* TODO: add an appropriate links by GW-5614 */}
+          <i className={`fa fa-external-link btn-link ${props.isActive ? 'bg-primary text-light' : ''}`} aria-hidden="true"></i>
+        </h3>
+      </div>
+      <div className="card-body p-4">
+        <div className="card-text">
+          <div className="my-2">
+            <div className="d-flex justify-content-between mb-3">
+              {/* TODO add image of difficulties by GW-5638 */}
+              {/* <span>{t('admin:slack_integration.selecting_bot_types.set_up')}</span> */}
+              {/* <span className={`bot-type-disc-${value.setUp}`}>{t(`admin:slack_integration.selecting_bot_types.${value.setUp}`)}</span> */}
+
+
+            </div>
+            <div className="d-flex justify-content-between mb-3">
+              <span>{t('admin:slack_integration.selecting_bot_types.multiple_workspaces_integration')}</span>
+              <img className="bot-type-disc" src={`/images/slack-integration/${props.value.multiWSIntegration}.png`} alt="" />
+            </div>
+            <div className="d-flex justify-content-between">
+              <span>{t('admin:slack_integration.selecting_bot_types.security_control')}</span>
+              <img className="bot-type-disc" src={`/images/slack-integration/${props.value.securityControl}.png`} alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+};
+
+BotTypeCard.propTypes = {
+  // accessToken: PropTypes.string,
+  // onClickDiscardButton: PropTypes.func,
+  // onClickGenerateToken: PropTypes.func,
+  isActive: PropTypes.bool,
+  key: PropTypes.string,
+  value: PropTypes.string,
+  handleBotTypeSelect: PropTypes.func,
+};
+
+export default BotTypeCard;

src/client/js/components/Admin/SlackIntegration/SlackIntegration.jsx

@@ -10,6 +10,7 @@ import OfficialBotSettings from './OfficialBotSettings';
 import CustomBotWithoutProxySettings from './CustomBotWithoutProxySettings';
 import CustomBotWithProxySettings from './CustomBotWithProxySettings';
 import ConfirmBotChangeModal from './ConfirmBotChangeModal';
+import BotTypeCard from './BotTypeCard';
 
 
 const SlackIntegration = (props) => {
@@ -134,20 +135,20 @@ const SlackIntegration = (props) => {
     );
   };
 
-  const renderBotTypeCards = () => {
+  const BotTypeCardOld = () => {
     return (
       Object.entries(botTypes).map(([key, value]) => {
         return (
           <div
-            className={`card admin-bot-card mx-3 rounded border-radius-sm shadow ${currentBotType === key ? 'border-primary' : ''}`}
-            onClick={() => handleBotTypeSelect(key)}
+            className={`card admin-bot-card mx-3 rounded border-radius-sm shadow ${currentBotType ? 'border-primary' : ''}`}
+            onClick={() => handleBotTypeSelect(props.key)}
             role="button"
             key={key}
           >
             <div>
               <h3 className={`card-header mb-0 py-3
               ${key === 'officialBot' ? 'd-flex align-items-center justify-content-center' : 'text-center'}
-              ${currentBotType === `${key}` ? 'bg-primary text-light' : ''}`}
+              ${currentBotType ? 'bg-primary text-light' : ''}`}
               >
                 <span className="mr-2">
                   {value.name}
@@ -160,7 +161,7 @@ const SlackIntegration = (props) => {
                 {key === 'officialBot' ? renderRecommendedBadge() : ''}
 
                 {/* TODO: add an appropriate links by GW-5614 */}
-                <i className={`fa fa-external-link btn-link ${currentBotType === `${key}` ? 'bg-primary text-light' : ''}`} aria-hidden="true"></i>
+                <i className={`fa fa-external-link btn-link ${currentBotType ? 'bg-primary text-light' : ''}`} aria-hidden="true"></i>
               </h3>
             </div>
             <div className="card-body p-4">
@@ -219,7 +220,9 @@ const SlackIntegration = (props) => {
 
         <div className="row my-4">
           <div className="card-deck mx-auto">
-            {renderBotTypeCards()}
+            {Object.entries(botTypes).map(([key, value]) => {
+              return <BotTypeCard isActive={currentBotType === key} key={key} value={value} />;
+            })}
           </div>
         </div>
       </div>