fix: [UIE-10240] - Bug fixes and add route to Contact Sales drawer (#13398)

* fix: [UIE-10240] fixed bug and added route to contact sales drawer

* Fix paddings, routings and avoid typecasting

* fix pendo ids for contact sales drawer

* fix: [UIE-10240] minor content fixes

---------

Co-authored-by: pmakode-akamai <pmakode@akamai.com>
Co-authored-by: hrao <hrao@akamai.com>

Author: 3 people

packages/manager/src/features/Marketplace/MarketplaceLanding/MarketplaceLanding.tsx

@@ -147,9 +147,8 @@ export const MarketplaceLanding = () => {
   return (
     <Box
       sx={(theme) => ({
-        px: {
-          sm: theme.spacingFunction(16),
-          xs: theme.spacingFunction(12),
+        [theme.breakpoints.down('md')]: {
+          px: theme.spacingFunction(8),
         },
         // Adjust Breadcrumb's marginLeft on screens < md to keep it aligned with the Products
         '& [data-qa-entity-header]': {

packages/manager/src/features/Marketplace/MarketplaceLanding/ProductSelectionCard.tsx

@@ -87,27 +87,22 @@ export const ProductSelectionCard = React.memo(
           {truncate(description, 200)}
         </Typography>,
         // Type chip (as last element with absolute positioning at bottom)
-        ...(type
-          ? [
-              <Box
-                key="category"
-                sx={(theme) => ({
-                  bottom: theme.spacingFunction(16),
-                  left: theme.spacingFunction(20),
-                  position: 'absolute',
-                })}
-              >
-                <Chip
-                  label={type}
-                  sx={(theme) => ({
-                    backgroundColor:
-                      theme.tokens.alias.Background.Informativesubtle,
-                    fontSize: theme.tokens.font.FontSize.Xxxs,
-                  })}
-                />
-              </Box>,
-            ]
-          : []),
+        <Box
+          key="type"
+          sx={(theme) => ({
+            bottom: theme.spacingFunction(16),
+            left: theme.spacingFunction(20),
+            position: 'absolute',
+          })}
+        >
+          <Chip
+            label={type}
+            sx={(theme) => ({
+              backgroundColor: theme.tokens.alias.Background.Informativesubtle,
+              fontSize: theme.tokens.font.FontSize.Xxxs,
+            })}
+          />
+        </Box>,
       ],
       [companyName, description, type]
     );

packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx

@@ -292,8 +292,7 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => {
                     hideLabel: true,
                     inputRef: field.ref,
                     inputProps: {
-                      'data-pendo-id':
-                        'Cloud Marketplace Contact Sales-Region-Input',
+                      'data-pendo-id': 'Cloud Marketplace Contact Sales-Region',
                     },
                     InputProps: {
                       startAdornment: selectedCountry && (
@@ -382,7 +381,7 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => {
                       inputRef: field.ref,
                       inputProps: {
                         'data-pendo-id':
-                          'Cloud Marketplace Contact Sales Phone number-Code-Input',
+                          'Cloud Marketplace Contact Sales-Country Code',
                       },
                       InputProps: {
                         startAdornment: selectedPhoneCountry && (
@@ -423,7 +422,7 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => {
                         slotProps={{
                           htmlInput: {
                             'data-pendo-id':
-                              'Cloud Marketplace Contact Sales Phone number-Number',
+                              'Cloud Marketplace Contact Sales-Phone Number',
                           },
                         }}
                         type="tel"

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

@@ -7,7 +7,7 @@ import {
   Typography,
 } from '@linode/ui';
 import { useTheme } from '@mui/material/styles';
-import { useParams } from '@tanstack/react-router';
+import { useMatchRoute, useNavigate, useParams } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -38,7 +38,12 @@ export const ProductDetails = () => {
     from: '/cloud-marketplace/catalog/$productId',
   });
   const theme = useTheme();
-  const [openContactSales, setOpenContactSales] = React.useState(false);
+  const navigate = useNavigate();
+  const matchRoute = useMatchRoute();
+
+  const isContactSalesOpen = Boolean(
+    matchRoute({ to: '/cloud-marketplace/catalog/$productId/contact-sales' })
+  );
 
   const product = React.useMemo(() => getProductById(productId), [productId]);
 
@@ -67,9 +72,19 @@ export const ProductDetails = () => {
   // Tab content is optional. If not present for this product, we still show the page.
   const details = getProductTabDetails(productId);
 
-  // Contact sales handler placeholder - will be implemented in a future ticket
+  // Contact sales handler - navigates to contact-sales URL to open drawer
   const handleContactSales = () => {
-    setOpenContactSales(true);
+    navigate({
+      params: { productId },
+      to: '/cloud-marketplace/catalog/$productId/contact-sales',
+    });
+  };
+
+  const handleCloseContactSales = () => {
+    navigate({
+      params: { productId },
+      to: '/cloud-marketplace/catalog/$productId',
+    });
   };
 
   return (
@@ -82,7 +97,13 @@ export const ProductDetails = () => {
         },
       })}
     >
-      <DocumentTitleSegment segment={`${product.name} - Details`} />
+      <DocumentTitleSegment
+        segment={
+          isContactSalesOpen
+            ? `${product.name} - Contact Sales`
+            : `${product.name} - Details`
+        }
+      />
       <LandingHeader
         breadcrumbProps={{
           crumbOverrides: [
@@ -99,11 +120,8 @@ export const ProductDetails = () => {
               label: 'Catalog',
               position: 2,
             },
-            {
-              label: product.name,
-              position: 3,
-            },
           ],
+          labelTitle: product.name,
           pathname: `/cloud-marketplace/catalog/${productId}`,
         }}
       />
@@ -237,10 +255,8 @@ export const ProductDetails = () => {
           )}
         </ProductDetailsContainer>
         <ContactSalesDrawer
-          onClose={() => {
-            setOpenContactSales(false);
-          }}
-          open={openContactSales}
+          onClose={handleCloseContactSales}
+          open={isContactSalesOpen}
           partnerName={product.partner.name}
           productName={product.name}
         />

packages/manager/src/features/Marketplace/ProductDetails/pages/cambria-stream.ts

@@ -10,7 +10,7 @@ Together, Cambria Stream and Cambria Cluster are well suited to enterprise envir
 ### **Key features**
 
 * **Scalable live encoding and packaging:** Encode and package live streams using modern formats including HLS, DASH, and CMAF, scaling horizontally to meet channel and event demand.
-* **High-performance file transcoding:** Transcode professional video formats including AVC, HEVC, HDR, and broadcast mezzanine inputs with consistent quality and predictable throughput**.**
+* **High-performance file transcoding:** Transcode professional video formats including AVC, HEVC, HDR, and broadcast mezzanine inputs with consistent quality and predictable throughput.
 * **Cloud, on-prem, and hybrid deployment:** Run the same software across customer-managed infrastructure, public cloud, or hybrid environments without architectural changes or retooling.
 * **Containerised and Kubernetes-ready:** Deploy using Docker and orchestrate at scale with Kubernetes for automated scheduling, resiliency, and efficient resource utilisation.
 * **Centralised orchestration and load balancing:** Use Cambria Cluster to distribute jobs, monitor nodes, and balance workloads across multiple transcoding instances and locations.