[#3489] component card details on catalog (#3569)

* catalog product page wip

* details wip

* wip

* card details finsihed - small fixes still wip

* wip

* feature finished

* last fix

* fixed styling

* fix

frontend/control-center/src/App.tsx

@@ -33,6 +33,7 @@ import ConnectorTwilioSms from './pages/Connectors/Providers/Twilio/SMS/Connecto
 import ConnectorTwilioWhatsapp from './pages/Connectors/Providers/Twilio/WhatsApp/ConnectorTwilioWhatsapp';
 import ConnectorGoogle from './pages/Connectors/Providers/Google/ConnectorGoogle';
 import ConnectorInstagram from './pages/Connectors/Providers/Instagram/ConnectorInstagram';
+import CatalogProductPage from './pages/Catalog/CatalogItemDetails';
 
 const mapDispatchToProps = {
   getClientConfig,
@@ -79,6 +80,8 @@ const App = (props: ConnectedProps<typeof connector>) => {
             <Route path={`twilio.whatsapp/:channelId`} element={<TwilioWhatsappConnect />} />
             <Route path={`google/:channelId`} element={<GoogleConnect />} />
             <Route path={`instagram/:channelId`} element={<InstagramConnect />} />
+
+            <Route path={`:componentName`} element={<CatalogProductPage />} />
             <Route index element={<Catalog />} />
           </Route>
 

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

@@ -7,7 +7,11 @@ import {installComponent} from '../../../actions/catalog';
 import {useTranslation} from 'react-i18next';
 import {connect, ConnectedProps} from 'react-redux';
 import {getChannelAvatar} from '../../../components/ChannelAvatar';
-import {getConnectedRouteForComponent, getNewChannelRouteForComponent} from './getRouteForCard';
+import {
+  getConnectedRouteForComponent,
+  getNewChannelRouteForComponent,
+  getCatalogProductRouteForComponent,
+} from '../getRouteForCard';
 import styles from './index.module.scss';
 
 type CatalogCardProps = {
@@ -20,6 +24,20 @@ const mapDispatchToProps = {
 
 const connector = connect(null, mapDispatchToProps);
 
+export const availabilityFormatted = (availability: string) => availability.split(',');
+
+export const DescriptionComponent = (props: {description: string}) => {
+  const {description} = props;
+  const {t} = useTranslation();
+  return <>{t(description)}</>;
+};
+
+export const getDescriptionSourceName = (name: string, displayName: string) => {
+  if (displayName.includes('SMS')) return 'twiliosms';
+  if (displayName.includes('WhatsApp')) return 'twilioWhatsapp';
+  return getSourceForComponent(name)?.replace('.', '');
+};
+
 const CatalogCard = (props: CatalogCardProps) => {
   const {componentInfo, installComponent} = props;
   const [isInstalled, setIsInstalled] = useState(componentInfo.installed);
@@ -40,8 +58,6 @@ const CatalogCard = (props: CatalogCardProps) => {
     setIsInstalled(!isInstalled);
   };
 
-  const availabilityFormatted = (availability: string) => availability.split(',');
-
   const CatalogCardButton = () => {
     if (isInstalled) {
       return (
@@ -58,20 +74,11 @@ const CatalogCard = (props: CatalogCardProps) => {
     );
   };
 
-  const DescriptionComponent = (props: {description: string}) => {
-    const {description} = props;
-    const {t} = useTranslation();
-    return <>{t(description)}</>;
-  };
-
-  const getDescriptionSourceName = (name: string, displayName: string) => {
-    if (displayName.includes('SMS')) return 'twiliosms';
-    if (displayName.includes('WhatsApp')) return 'twilioWhatsapp';
-    return getSourceForComponent(name)?.replace('.', '');
-  };
-
   return (
-    <article className={styles.catalogCard}>
+    <article
+      className={styles.catalogCard}
+      onClick={() => navigate(getCatalogProductRouteForComponent(componentInfo.displayName), {state: {componentInfo}})}
+    >
       <section className={styles.cardLogoTitleContainer}>
         <div className={styles.componentLogo}>
           {getChannelAvatar(componentInfo.displayName)}
@@ -82,7 +89,7 @@ const CatalogCard = (props: CatalogCardProps) => {
 
           <p>
             {' '}
-            <span className={styles.bolded}>{t('categories')}</span> {componentInfo.category}{' '}
+            <span className={styles.bolded}>{t('categories')}:</span> {componentInfo.category}{' '}
           </p>
         </div>
       </section>

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

@@ -0,0 +1,183 @@
+@import 'assets/scss/fonts.scss';
+@import 'assets/scss/colors.scss';
+
+.heading {
+  margin-left: 200px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 24px;
+
+  h1 {
+    @include font-l;
+    font-weight: 900;
+    line-height: 24px;
+  }
+
+  p {
+    @include font-base;
+    margin: 5px 0 0 0;
+    color: var(--color-text-gray);
+  }
+}
+
+.componentDescription {
+  padding-left: 30px;
+  h1 {
+    @include font-m;
+    font-weight: 800;
+    margin: 20px 0;
+  }
+
+  p {
+    width: 80%;
+  }
+}
+
+.backButton {
+  text-decoration: none;
+
+  button {
+    background: transparent;
+    color: var(--color-text-contrast);
+  }
+
+  &:hover,
+  &:active,
+  &:visited {
+    text-decoration: underline;
+  }
+}
+
+.linkButtonContainer {
+  @include font-base;
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--color-text-contrast);
+  font-weight: bold;
+
+  &:hover,
+  &:active,
+  &:visited {
+    text-decoration: none;
+    color: var(--color-text-contrast);
+  }
+}
+
+.backIcon {
+  width: 20px;
+  background: transparent;
+  path {
+    fill: var(--color-text-gray);
+  }
+  margin-right: 8px;
+}
+
+.detailsComponentLogo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  margin-top: 20px;
+  padding-right: 16px;
+}
+
+.logoIcon {
+  width: 120px;
+}
+
+.installButton {
+  width: 100%;
+  height: 50px;
+  margin-top: 10px;
+  @include font-base;
+}
+
+.details {
+  p {
+    color: var(--color-text-contrast);
+    @include font-s;
+  }
+
+  button {
+    border: 1px solid var(--color-airy-blue);
+    border-radius: 20px;
+    background: transparent;
+    color: var(--color-airy-blue);
+    padding: 4px 12px;
+    margin-right: 5px;
+    margin-top: 8px;
+  }
+
+  .detailInfo {
+    margin-bottom: 20px;
+  }
+
+  section a,
+  section a:hover,
+  section a:visited,
+  section a:active {
+    color: var(--color-airy-blue);
+    word-break: break-word;
+    hyphens: auto;
+    text-decoration: none;
+    display: inline-block;
+    width: 80%;
+  }
+}
+
+.availability {
+  display: flex;
+  align-items: center;
+  color: var(--color-airy-blue);
+  @include font-s;
+  margin-top: 20px;
+  svg {
+    fill: var(--color-airy-blue);
+    width: 14px;
+    margin-right: 5px;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.bolded {
+  font-weight: 800;
+}
+
+.checkmarkIcon {
+  width: 15%;
+  margin-bottom: 30px;
+  fill: var(--color-soft-green);
+}
+
+.enableModalContainerWrapper {
+  width: 50%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.enableModalContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  @include font-l;
+
+  p {
+    max-width: 70%;
+    text-align: center;
+    margin: 4px 0 20px 0;
+    color: var(--color-text-contrast);
+  }
+}
+
+.headerModal {
+  @include font-xl;
+}