separated official bot

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

@@ -113,9 +113,47 @@ const SlackIntegration = (props) => {
     return <span className={`bot-type-disc-${desc}`}>{t(`admin:slack_integration.selecting_bot_types.${desc}`)}</span>;
   };
 
-  const renderBotTypeCard = () => {
+  const renderBotTypeCard = (botType) => {
     return (
-      <></>
+      <div
+        className={`card admin-bot-card mx-3 rounded border-radius-sm shadow ${currentBotType === 'official-bot' ? 'border-primary' : ''}`}
+        onClick={() => handleBotTypeSelect('official-bot')}
+        role="button"
+      >
+        <div>
+          <h3 className={`card-header mb-0 py-3 text-center ${currentBotType === 'official-bot' ? 'bg-primary text-light' : ''}`}>
+            <span className="mr-2">
+              {t('admin:slack_integration.selecting_bot_types.official_bot')}
+            </span>
+            <span className="badge badge-info mr-2">
+              {t('admin:slack_integration.selecting_bot_types.recommended')}
+            </span>
+            {/* TODO: add an appropriate link by GW-5614 */}
+            <i className={`fa fa-external-link btn-link ${currentBotType === 'official-bot' ? 'bg-primary text-light' : ''}`} aria-hidden="true"></i>
+          </h3>
+        </div>
+        <div className="card-body p-4">
+          <p className="card-text">
+            <div className="text-center">
+              {showBotTypeLevel('for_beginners')}
+            </div>
+            <div className="my-4">
+              <div className="d-flex justify-content-between mb-2">
+                {showBotTypeLabel('set_up')}
+                {showBotTypeDiscription('easy')}
+              </div>
+              <div className="d-flex justify-content-between mb-2">
+                {showBotTypeLabel('multiple_workspaces_integration')}
+                {showBotTypeDiscription('possible')}
+              </div>
+              <div className="d-flex justify-content-between">
+                {showBotTypeLabel('security_control')}
+                {showBotTypeDiscription('impossible')}
+              </div>
+            </div>
+          </p>
+        </div>
+      </div>
     );
   };
 
@@ -148,8 +186,9 @@ const SlackIntegration = (props) => {
 
         <div className="row my-4">
           <div className="card-deck mx-auto">
+            {renderBotTypeCard()}
 
-            <div
+            {/* <div
               className={`card admin-bot-card mx-3 rounded border-radius-sm shadow ${currentBotType === 'official-bot' ? 'border-primary' : ''}`}
               onClick={() => handleBotTypeSelect('official-bot')}
               role="button"
@@ -161,9 +200,9 @@ const SlackIntegration = (props) => {
                   </span>
                   <span className="badge badge-info mr-2">
                     {t('admin:slack_integration.selecting_bot_types.recommended')}
-                  </span>
-                  {/* TODO: add an appropriate link by GW-5614 */}
-                  <i className={`fa fa-external-link btn-link ${currentBotType === 'official-bot' ? 'bg-primary text-light' : ''}`} aria-hidden="true"></i>
+                  </span> */}
+            {/* TODO: add an appropriate link by GW-5614 */}
+            {/* <i className={`fa fa-external-link btn-link ${currentBotType === 'official-bot' ? 'bg-primary text-light' : ''}`} aria-hidden="true"></i>
                 </h3>
               </div>
               <div className="card-body p-4">
@@ -187,7 +226,7 @@ const SlackIntegration = (props) => {
                   </div>
                 </p>
               </div>
-            </div>
+            </div> */}
 
             <div
               className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'custom-bot-without-proxy' ? 'border-primary' : ''}`}