BF in progress

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

@@ -5,31 +5,99 @@ import { useTranslation } from 'react-i18next';
 const BotTypeCard = (props) => {
   const { t } = useTranslation('admin');
 
+  // const botTypes = {
+  //   officialBot: {
+  //     botType: 'official-bot',
+  //     botTypeCategory: 'official_bot',
+  //     setUp: 'easy',
+  //     multiWSIntegration: 'possible',
+  //     securityControl: 'impossible',
+  //   },
+  //   customBotWithoutProxy: {
+  //     botType: 'custom-bot-without-proxy',
+  //     botTypeCategory: 'custom_bot',
+  //     supplementaryBotName: 'without_proxy',
+  //     setUp: 'normal',
+  //     multiWSIntegration: 'impossible',
+  //     securityControl: 'possible',
+  //   },
+  //   customBotWithProxy: {
+  //     botType: 'custom-bot-with-proxy',
+  //     botTypeCategory: 'custom_bot',
+  //     supplementaryBotName: 'with_proxy',
+  //     setUp: 'hard',
+  //     multiWSIntegration: 'possible',
+  //     securityControl: 'possible',
+  //   },
+  // };
+
+  // async function switchBotDetails(botType) {
+
+  let botDetails = {};
+
+  switch (props.botType) {
+    case 'official-bot':
+      botDetails = {
+        botType: 'official-bot',
+        botTypeCategory: 'official_bot',
+        setUp: 'easy',
+        multiWSIntegration: 'possible',
+        securityControl: 'impossible',
+      };
+      break;
+    case 'customBotWithoutProxy':
+      botDetails = {
+        botType: 'custom-bot-without-proxy',
+        botTypeCategory: 'custom_bot',
+        supplementaryBotName: 'without_proxy',
+        setUp: 'normal',
+        multiWSIntegration: 'impossible',
+        securityControl: 'possible',
+      };
+      break;
+    case 'customBotWithProxy':
+      botDetails = {
+        botType: 'custom-bot-with-proxy',
+        botTypeCategory: 'custom_bot',
+        supplementaryBotName: 'with_proxy',
+        setUp: 'hard',
+        multiWSIntegration: 'possible',
+        securityControl: 'possible',
+      };
+      break;
+    default:
+      botDetails = {
+      };
+      break;
+  }
+  // }
+  // }
+
   return (
     <div
       className={`card admin-bot-card rounded border-radius-sm shadow ${props.isActive ? 'border-primary' : ''}`}
-      onClick={() => props.handleBotTypeSelect(props.value.botType)}
+      onClick={() => props.handleBotTypeSelect(botDetails.botType)}
       role="button"
-      key={props.value.botType}
+      key={props.botType}
     >
       <div>
         <h3 className={`card-header mb-0 py-3
-              ${props.value.botType === 'official-bot' ? 'd-flex align-items-center justify-content-center' : 'text-center'}
+              ${props.botType === 'official-bot' ? 'd-flex align-items-center justify-content-center' : 'text-center'}
               ${props.isActive ? 'bg-primary text-light' : ''}`}
         >
           <span className="mr-2">
-            {t(`admin:slack_integration.selecting_bot_types.${props.value.botTypeCategory}`)}
+            {t(`admin:slack_integration.selecting_bot_types.${botDetails.botTypeCategory}`)}
           </span>
 
           {/* official bot card is shown recommended badge, Custom bot cards are shown supplementary bot name  */}
-          {props.value.botType === 'official-bot'
+          {props.botType === 'official-bot'
           ? (
             <span className="badge badge-info mr-2">
               {t('admin:slack_integration.selecting_bot_types.recommended')}
             </span>
           ) : (
             <span className="supplementary-bot-name mr-2">
-              {t(`admin:slack_integration.selecting_bot_types.${props.value.supplementaryBotName}`)}
+              {t(`admin:slack_integration.selecting_bot_types.${botDetails.supplementaryBotName}`)}
             </span>
           )}
 
@@ -49,11 +117,11 @@ const BotTypeCard = (props) => {
             </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="" />
+              <img className="bot-type-disc" src={`/images/slack-integration/${botDetails.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="" />
+              <img className="bot-type-disc" src={`/images/slack-integration/${botDetails.securityControl}.png`} alt="" />
             </div>
           </div>
         </div>
@@ -65,7 +133,8 @@ const BotTypeCard = (props) => {
 
 BotTypeCard.propTypes = {
   isActive: PropTypes.bool,
-  value: PropTypes.object,
+  botType: PropTypes.array,
+  // value: PropTypes.object,
   handleBotTypeSelect: PropTypes.func,
 };
 

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

@@ -104,31 +104,33 @@ const SlackIntegration = (props) => {
       break;
   }
 
-  const botTypes = {
-    officialBot: {
-      botType: 'official-bot',
-      botTypeCategory: 'official_bot',
-      setUp: 'easy',
-      multiWSIntegration: 'possible',
-      securityControl: 'impossible',
-    },
-    customBotWithoutProxy: {
-      botType: 'custom-bot-without-proxy',
-      botTypeCategory: 'custom_bot',
-      supplementaryBotName: 'without_proxy',
-      setUp: 'normal',
-      multiWSIntegration: 'impossible',
-      securityControl: 'possible',
-    },
-    customBotWithProxy: {
-      botType: 'custom-bot-with-proxy',
-      botTypeCategory: 'custom_bot',
-      supplementaryBotName: 'with_proxy',
-      setUp: 'hard',
-      multiWSIntegration: 'possible',
-      securityControl: 'possible',
-    },
-  };
+  // const botTypes = {
+  //   officialBot: {
+  //     botType: 'official-bot',
+  //     botTypeCategory: 'official_bot',
+  //     setUp: 'easy',
+  //     multiWSIntegration: 'possible',
+  //     securityControl: 'impossible',
+  //   },
+  //   customBotWithoutProxy: {
+  //     botType: 'custom-bot-without-proxy',
+  //     botTypeCategory: 'custom_bot',
+  //     supplementaryBotName: 'without_proxy',
+  //     setUp: 'normal',
+  //     multiWSIntegration: 'impossible',
+  //     securityControl: 'possible',
+  //   },
+  //   customBotWithProxy: {
+  //     botType: 'custom-bot-with-proxy',
+  //     botTypeCategory: 'custom_bot',
+  //     supplementaryBotName: 'with_proxy',
+  //     setUp: 'hard',
+  //     multiWSIntegration: 'possible',
+  //     securityControl: 'possible',
+  //   },
+  // };
+
+  const botTypes = ['officialBot', 'customBotWithoutProxy', 'customBotWithProxy'];
 
   return (
     <>
@@ -159,12 +161,14 @@ const SlackIntegration = (props) => {
 
         <div className="row my-4">
           <div className="card-deck mx-auto">
-            {Object.entries(botTypes).map(([key, value]) => {
+            {/* {Object.entries(botTypes).map(([key, value]) => { */}
+            {botTypes.map((botType) => {
               return (
                 <BotTypeCard
-                  key={value.botType}
-                  isActive={currentBotType === value.botType}
-                  value={value}
+                  key={botType}
+                  botType={botType}
+                  isActive={currentBotType === botType}
+                  // value={value}
                   handleBotTypeSelect={handleBotTypeSelect}
                 />
               );