[#3600] display all components in catalog (#3602)

* displaying all components

* catalog fix finished

* small fix

* viber svg fix

* last fixes

frontend/control-center/src/components/ChannelAvatar/index.tsx

@@ -6,10 +6,13 @@ import {ReactComponent as FacebookAvatar} from 'assets/images/icons/facebookMess
 import {ReactComponent as AiryAvatar} from 'assets/images/icons/airyLogo.svg';
 import {ReactComponent as InstagramAvatar} from 'assets/images/icons/instagramLogoFilled.svg';
 import {ReactComponent as TwilioAvatar} from 'assets/images/icons/twilioLogo.svg';
-import {ReactComponent as ViberAvatar} from 'assets/images/icons/viberLogoFilled.svg';
+import {ReactComponent as ViberAvatar} from 'assets/images/icons/viber.svg';
 import {ReactComponent as ZendeskAvatar} from 'assets/images/icons/zendeskLogo.svg';
 import {ReactComponent as DialogflowAvatar} from 'assets/images/icons/dialogflowLogo.svg';
 import {ReactComponent as SalesforceAvatar} from 'assets/images/icons/salesforceLogo.svg';
+import {ReactComponent as CongnigyAvatar} from 'assets/images/icons/congnigyLogo.svg';
+import {ReactComponent as RasaAvatar} from 'assets/images/icons/rasaLogo.svg';
+import {ReactComponent as AmeliaAvatar} from 'assets/images/icons/ameliaLogo.svg';
 
 import {Channel, Source} from 'model';
 import styles from './index.module.scss';
@@ -61,6 +64,12 @@ export const getChannelAvatar = (source: string) => {
     case Source.salesforce:
     case 'Salesforce':
       return <SalesforceAvatar />;
+    case 'Congnigy':
+      return <CongnigyAvatar />;
+    case 'Rasa':
+      return <RasaAvatar />;
+    case 'Amelia':
+      return <AmeliaAvatar />;
     default:
       return <AiryAvatar />;
   }

frontend/control-center/src/pages/Catalog/CatalogCard/index.module.scss

@@ -42,6 +42,7 @@
 
     svg {
       height: 55px;
+      max-width: 85px;
       fill: var(--color-text-contrast);
     }
   }

frontend/control-center/src/pages/Catalog/CatalogCard/index.tsx

@@ -45,7 +45,7 @@ export const getDescriptionSourceName = (name: string, displayName: string) => {
 
 const CatalogCard = (props: CatalogCardProps) => {
   const {component, componentInfo, installComponent} = props;
-  const isInstalled = component[componentInfo?.name].installed;
+  const isInstalled = component[componentInfo?.name]?.installed;
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [isInstalling, setIsInstalling] = useState(false);
   const [notification, setNotification] = useState<NotificationModel>(null);

frontend/control-center/src/pages/Catalog/CatalogItemDetails/index.module.scss

@@ -87,6 +87,9 @@
 
 .logoIcon {
   width: 120px;
+  height: 125px;
+  display: flex;
+  align-items: center;
 }
 
 .installButton {

frontend/control-center/src/pages/Catalog/CatalogItemDetails/index.tsx

@@ -159,12 +159,20 @@ const CatalogItemDetails = (props: ConnectedProps<typeof connector>) => {
 
           <section className={styles.detailInfo}>
             <p className={styles.bolded}>{t('price')}:</p>
-            <button key={componentInfo?.price}>{t(componentInfo?.price)}</button>
+            <button key={componentInfo?.price}>
+              {componentInfo?.price === 'REQUEST ACCESS' ? (
+                <a href="mailto:componentsaccess@airy.co" target="_blank" rel="noreferrer">
+                  {t(componentInfo?.price)}
+                </a>
+              ) : (
+                t(componentInfo?.price)
+              )}
+            </button>
           </section>
 
           <section>
             <p className={styles.bolded}>
-              Airy Docs: <br />{' '}
+              Docs: <br />{' '}
               <a href={componentInfo?.docs} target="_blank" rel="noopener noreferrer">
                 {componentInfo?.docs}
               </a>

frontend/control-center/src/pages/Catalog/getRouteForCard.ts

@@ -26,6 +26,13 @@ import {
   CATALOG_DIALOGFLOW_ROUTE,
   CATALOG_ZENDESK_ROUTE,
   CATALOG_SALESFORCE_ROUTE,
+  CATALOG_CONGNIFY_ROUTE,
+  CATALOG_AMELIA_ROUTE,
+  CATALOG_FRONTEND_INBOX_ROUTE,
+  CATALOG_RASA_ROUTE,
+  CATALOG_WEBHOOKS_ROUTE,
+  CATALOG_MOBILE_ROUTE,
+  CATALOG_VIBER_ROUTE,
 } from '../../routes/routes';
 
 export const getConnectedRouteForComponent = (displayName: string) => {
@@ -100,5 +107,19 @@ export const getCatalogProductRouteForComponent = (displayName: string) => {
       return CATALOG_SALESFORCE_ROUTE;
     case 'Zendesk':
       return CATALOG_ZENDESK_ROUTE;
+    case 'Congnigy':
+      return CATALOG_CONGNIFY_ROUTE;
+    case 'Amelia':
+      return CATALOG_AMELIA_ROUTE;
+    case 'Inbox':
+      return CATALOG_FRONTEND_INBOX_ROUTE;
+    case 'Rasa':
+      return CATALOG_RASA_ROUTE;
+    case 'Mobile':
+      return CATALOG_MOBILE_ROUTE;
+    case 'Webhooks':
+      return CATALOG_WEBHOOKS_ROUTE;
+    case 'Viber':
+      return CATALOG_VIBER_ROUTE;
   }
 };

frontend/control-center/src/pages/Catalog/index.tsx

@@ -4,7 +4,7 @@ import {connect, ConnectedProps, useSelector} from 'react-redux';
 import {listComponents} from '../../actions/catalog';
 import {StateModel} from '../../reducers';
 import {setPageTitle} from '../../services';
-import {ComponentInfo, getSourceForComponent} from 'model';
+import {ComponentInfo} from 'model';
 import CatalogCard from './CatalogCard';
 import styles from './index.module.scss';
 
@@ -44,7 +44,7 @@ const Catalog = (props: ConnectedProps<typeof connector>) => {
       <section className={styles.catalogListContainer}>
         {orderedCatalogList &&
           orderedCatalogList.map((infoItem: ComponentInfo) => {
-            if (infoItem?.name && !infoItem.name.includes('viber') && getSourceForComponent(infoItem.name)) {
+            if (infoItem?.name && infoItem?.displayName) {
               return <CatalogCard componentInfo={infoItem} key={infoItem.displayName} />;
             }
           })}

frontend/control-center/src/pages/Connectors/index.tsx

@@ -85,8 +85,7 @@ const Connectors = (props: ConnectedProps<typeof connector>) => {
           <>
             {sourcesInfo.map((infoItem: SourceInfo, index: number) => {
               return (
-                (channelsBySource(infoItem.type).length > 0 &&
-                  components &&
+                (components &&
                   components[infoItem?.configKey] &&
                   isInstalled &&
                   connectors[infoItem.configKey] &&

frontend/control-center/src/pages/Status/ComponentListItem/ItemInfo.tsx

@@ -28,16 +28,6 @@ const mapDispatchToProps = {
 
 const connector = connect(null, mapDispatchToProps);
 
-const formatName = (name: string) => {
-  if (name?.includes('enterprise')) {
-    name = name.replace('enterprise-', '');
-  }
-  if (name?.includes('sources')) {
-    name = name.replace('sources-', '');
-  }
-  return name;
-};
-
 const isConfigurableConnector = (name: string) => {
   let isConfigurable = false;
 
@@ -59,9 +49,7 @@ const ItemInfo = (props: ComponentInfoProps) => {
   const {t} = useTranslation();
 
   const isComponentConfigured =
-    connectors[formatName(itemName)] &&
-    isConfigurableConnector(itemName) &&
-    Object.keys(connectors[formatName(itemName)]).length > 0;
+    connectors[itemName] && isConfigurableConnector(itemName) && Object.keys(connectors[itemName]).length > 0;
 
   //status
   const needsConfig =

frontend/control-center/src/pages/Status/ComponentListItem/index.module.scss

@@ -122,8 +122,6 @@
 }
 
 .enableModalContainerWrapper {
-  width: 50%;
-  height: 70%;
   display: flex;
   flex-direction: column;
   justify-content: center;

frontend/control-center/src/routes/routes.ts

@@ -36,6 +36,13 @@ export const CATALOG_INSTAGRAM_ROUTE = '/catalog/instagram';
 export const CATALOG_DIALOGFLOW_ROUTE = '/catalog/dialogflow';
 export const CATALOG_ZENDESK_ROUTE = '/catalog/zendesk';
 export const CATALOG_SALESFORCE_ROUTE = '/catalog/salesforce';
+export const CATALOG_CONGNIFY_ROUTE = '/catalog/congnify';
+export const CATALOG_AMELIA_ROUTE = '/catalog/amelia';
+export const CATALOG_FRONTEND_INBOX_ROUTE = '/catalog/frontend-inbox';
+export const CATALOG_RASA_ROUTE = '/catalog/rasa';
+export const CATALOG_WEBHOOKS_ROUTE = '/catalog/webhooks';
+export const CATALOG_MOBILE_ROUTE = '/catalog/mobile';
+export const CATALOG_VIBER_ROUTE = '/catalog/viber';
 
 export const INBOX_ROUTE = '/inbox';
 export const INBOX_CONNECTED_ROUTE = '/inbox/connected';