add custom bot cards

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

@@ -103,22 +103,6 @@ const SlackIntegration = (props) => {
       break;
   }
 
-  // renderBotTypeDescription(difficulties) {
-  //   let desc = null;
-  //   switch (difficulties) {
-  //     case 'easy':
-  //       desc =  <span>{t('admin:slack_integration.selecting_bot_types.easy')}</span>;
-  //       break;
-  //     case 'normal':
-  //       desc =  <span>{t('admin:slack_integration.selecting_bot_types.normal')}</span>;
-  //       break;
-  //     case 'difficult':
-  //       desc = <span>{t('admin:slack_integration.selecting_bot_types.difficult')}</span>;
-  //       break;
-  //   }
-  // };
-
-
   const showBotTypeLebel = (level) => {
     return <span>{t(`admin:slack_integration.selecting_bot_types.${level}`)}</span>;
   };
@@ -162,14 +146,14 @@ const SlackIntegration = (props) => {
               className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'official-bot' && 'border-primary'}`}
               onClick={() => handleBotTypeSelect('official-bot')}
             >
-              <h3 className={`card-header mb-0 py-2 text-center   ${currentBotType === 'official-bot' && 'bg-primary text-light'}`}>
+              <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.official_bot')}
                 </span>
                 <span className="badge badge-info mr-2">
                   {t('admin:slack_integration.recommended')}
                 </span>
-                <i className="fa fa-external-link btn-link" aria-hidden="true"></i>
+                <i className={`fa fa-external-link btn-link ${currentBotType === 'official-bot' && 'bg-primary text-light'}`} aria-hidden="true"></i>
               </h3>
               <div className="card-body px-4 py-5">
                 <p className="card-text">
@@ -194,7 +178,46 @@ const SlackIntegration = (props) => {
               </div>
             </div>
 
+
+            {/* ここから */}
             <div
+              className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'custom-bot-without-proxy' && 'border-primary'}`}
+              onClick={() => handleBotTypeSelect('custom-bot-without-proxy')}
+            >
+              <h3 className={`card-header mb-0 py-3 text-center   ${currentBotType === 'custom-bot-without-proxy' && 'bg-primary text-light'}`}>
+                <span className="mr-2">
+                  {t('admin:slack_integration.custom_bot_without_proxy')}
+                </span>
+                <i
+                  className={`fa fa-external-link btn-link${currentBotType === 'custom-bot-without-proxy' && 'bg-primary text-light'}`}
+                  aria-hidden="true"
+                >
+                </i>
+              </h3>
+              <div className="card-body px-4 py-5">
+                <p className="card-text">
+                  <div className="text-center">
+                    {showBotTypeLebel('for_beginners')}
+                  </div>
+                  <div className="mt-4">
+                    <div className="d-flex justify-content-between mb-2">
+                      {showBotTypeLabel('set_up_to_take_time')}
+                      {showBotTypeDiscription('easy')}
+                    </div>
+                    <div className="d-flex justify-content-between mb-2">
+                      {showBotTypeLabel('integration_to_multi_workspaces')}
+                      {showBotTypeDiscription('possible')}
+                    </div>
+                    <div className="d-flex justify-content-between">
+                      {showBotTypeLabel('security_control')}
+                      {showBotTypeDiscription('impossible')}
+                    </div>
+                  </div>
+                </p>
+              </div>
+            </div>
+
+            {/* <div
               className={`card admin-bot-card mx-3 py-5 rounded shadow ${currentBotType === 'custom-bot-without-proxy' ? 'border-info' : ''}`}
               onClick={() => handleBotTypeSelect('custom-bot-without-proxy')}
             >
@@ -202,9 +225,42 @@ const SlackIntegration = (props) => {
                 <h5 className="card-title">Custom Bot without proxy</h5>
                 <p className="card-text">セットアップの手間 </p>
               </div>
-            </div>
+            </div> */}
 
             <div
+              className={`card admin-bot-card mx-3 rounded shadow ${currentBotType === 'custom-bot-with-proxy' && 'border-primary'}`}
+              onClick={() => handleBotTypeSelect('custom-bot-with-proxy')}
+            >
+              <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.custom_bot_with_proxy')}
+                </span>
+                <i className={`fa fa-external-link btn-link ${currentBotType === 'official-bot' && 'bg-primary text-light'}`} aria-hidden="true"></i>
+              </h3>
+              <div className="card-body px-4 py-5">
+                <p className="card-text">
+                  <div className="text-center">
+                    {showBotTypeLebel('for_beginners')}
+                  </div>
+                  <div className="mt-4">
+                    <div className="d-flex justify-content-between mb-2">
+                      {showBotTypeLabel('set_up_to_take_time')}
+                      {showBotTypeDiscription('easy')}
+                    </div>
+                    <div className="d-flex justify-content-between mb-2">
+                      {showBotTypeLabel('integration_to_multi_workspaces')}
+                      {showBotTypeDiscription('possible')}
+                    </div>
+                    <div className="d-flex justify-content-between">
+                      {showBotTypeLabel('security_control')}
+                      {showBotTypeDiscription('impossible')}
+                    </div>
+                  </div>
+                </p>
+              </div>
+            </div>
+
+            {/* <div
               className={`card admin-bot-card mx-3 py-5 rounded shadow ${currentBotType === 'custom-bot-with-proxy' ? 'border-info' : ''}`}
               onClick={() => handleBotTypeSelect('custom-bot-with-proxy')}
             >
@@ -212,7 +268,7 @@ const SlackIntegration = (props) => {
                 <h5 className="card-title">Custom Bot with proxy</h5>
                 <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
               </div>
-            </div>
+            </div> */}
 
           </div>
         </div>