upcoming: [UIE-9823] - Implement the Contact Sales Drawer for Marketplace products #13368

harsh-akamai · 2026-02-05T03:41:21Z

Description 📝

Implement the Contact Sales Drawer for Marketplace products

Scope 🚢

Upon production release, changes in this PR will be visible to:

All customers
Some customers (e.g. in Beta or Limited Availability)
No customers / Not applicable

Preview 📷

Non Error State	Error State

How to test 🧪

Prerequisites

Verification steps

Turn on the MarketplaceV2 feature flag
Navigate to localhost:3000/cloud-marketplace/catalog/{productName} (or go to the "Partner Referrals" page and click one of the cards)
Click on the "Contact Sales" button
Verify that the form styles stay responsive in different layouts
Ensure the error states are thrown correctly
Click on "Submit" and verify that you get a success or error snackbar

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

All tests and CI checks are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

…lace products

…9823

tvijay-akamai · 2026-02-08T12:32:08Z

The form initializes additional email to ['']. API Spec expects: ["email1@akamai.com"] or omit if empty
What gets sent: ['']. Please check with backend team if this is okay.

tvijay-akamai · 2026-02-08T12:40:39Z

One observation in api spec doc there is a typo API Spec shows: "parner_name": "Akamai" (typo - missing 't'). Please get this corrected from backend team.

tvijay-akamai · 2026-02-08T12:42:33Z

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

+        ? getAPIErrorOrDefault(error)?.[0].reason
+        : "Oops! Something went wrong and we couldn't send your contacts. Please try again in a moment, or refresh the page.";
+      enqueueSnackbar(errorMessage, { variant: 'error' });
+      onClose();


On api error do we need to close the drawer?

The snackbar will only be shown if we close the drawer.

We might not want to close the drawer on API errors since that would require the user to re-enter their details, which isn't ideal. Typically, in CM, we don't close drawers when an API call fails; instead, we usually show an error notification banner within the drawer itself

I also noticed that form data persists when reopening the drawer, but navigating between tabs within the details page resets the form data. I think the drawer should always open with an empty state

tvijay-akamai · 2026-02-08T12:45:32Z

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

+  return (
+    <Drawer
+      data-testid="contact-sales-drawer"
+      onClose={() => {


Instead of resetting the form onClose which can cause visual glitches if the form resets while the drawer is animating closed. we can use onTransitionExited={() => reset()}

tvijay-akamai · 2026-02-08T12:46:22Z

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

@@ -0,0 +1,590 @@
+import { yupResolver } from '@hookform/resolvers/yup';


No unit tests for ContactSalesDrawer component

tvijay-akamai · 2026-02-08T12:48:58Z

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

+} from '@linode/ui';
+import { createPartnerReferralSchema } from '@linode/validation';
+import { createFilterOptions, Grid } from '@mui/material';
+import { enqueueSnackbar } from 'notistack';


mostly this pattern is follwed in the codebase import { useSnackbar } from 'notistack';
const { enqueueSnackbar } = useSnackbar(); . Direct import works but is inconsistent with codebase conventions.

I believe both the implementations are supported. Importing enqueueSnackBar has been followed in multiple places like here: https://github.com/linode/manager/blob/develop/packages/manager/src/features/Kubernetes/KubernetesClusterDetail/KubeEntityDetailFooter.tsx#L6

tvijay-akamai · 2026-02-08T12:51:22Z

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

+            render={({ field }) => {
+              const emailErrors = errors.additional_emails;
+              return (
+                <MultipleIPInput


Using MultipleIPInput for email addresses works but is semantically confusing. looked like the component was designed for IP addresses. Consider:

Adding a comment explaining this reuse
Or see if there is possibility of MultipleEmailInput wrapper

We did agree that building a custom component for this use case is not justified as of yet. Will add a comment for clarity though

tvijay-akamai · 2026-02-08T12:53:01Z

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

+                <MultipleIPInput
+                  buttonText="Add email address"
+                  className={
+                    field.value?.length === 2


can we use a constant here : MAX_ADDITIONAL_EMAILS = 2

tvijay-akamai · 2026-02-08T12:59:12Z

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

+
+  const {
+    control,
+    formState: { errors, isSubmitting },


When the form is submitted While isSubmitting is used to disable form fields. Is this is correct submitting state. Can we check with ux on this.

tvijay-akamai · 2026-02-08T13:04:18Z

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

+  const { classes } = useStyles();
+  const { onClose, open, partnerName, productName } = props;
+
+  const { data: profile } = useProfile();


Are we sure this data is not asynchronous and will always be available when drawer is opened? Basically do you this we should handle async nature of this data?

The useProfile() api is loaded on login so we will always have the data.

tvijay-akamai · 2026-02-08T13:07:29Z

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

@@ -0,0 +1,590 @@
+import { yupResolver } from '@hookform/resolvers/yup';


Missing Notice for in-form api returned errors

The API needs to send the field parameter in errors if we want to show different error components for in-form errors. Currently, the error response from this api doesn't return this field parameter

tvijay-akamai · 2026-02-09T04:44:57Z

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

+      open={open}
+      title={`Contact ${partnerName} sales`}
+    >
+      <form onSubmit={onSubmit}>


Pendo id's missing on all the elements. Please add attributes as mentioned in figma provided by pendo team.

pmakode-akamai · 2026-02-09T07:31:29Z

packages/manager/src/components/SelectionCard/SelectionCard.tsx

      id={id}
      onClick={handleClick}
      onKeyPress={handleKeyPress}
+      role={role}


Suggested change

role={role}

role={role ?? (onClick ? 'button' : undefined)}

I think it would be better to automatically set role="button" when onClick is provided, rather than requiring consumers to manually pass a role. This helps ensure that clickable cards are exposed as interactive to screen readers by default while still allowing flexibility to override the role when different semantics are needed (for eg., radio-button behavior with onClick)

pmakode-akamai · 2026-02-09T07:31:44Z

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

        heading={productName}
        onClick={onClick}
        renderIcon={renderHeader}
+        role="button"


Suggested change

role="button"

packages/manager/src/components/SelectionCard/SelectionCard.tsx

pmakode-akamai · 2026-02-09T07:59:08Z

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

+          secondaryButtonProps={{
+            label: 'Cancel',
+            onClick: onClose,
+            buttonType: 'outlined',


Suggested change

buttonType: 'outlined',

We should keep the secondary button consistent across CM (without the outlined variant) until outlined styling is handled as the default as part of the CDS migration work

pmakode-akamai · 2026-02-09T08:11:43Z

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

+        ? getAPIErrorOrDefault(error)?.[0].reason
+        : "Oops! Something went wrong and we couldn't send your contacts. Please try again in a moment, or refresh the page.";
+      enqueueSnackbar(errorMessage, { variant: 'error' });
+      onClose();


We might not want to close the drawer on API errors since that would require the user to re-enter their details, which isn't ideal. Typically, in CM, we don't close drawers when an API call fails; instead, we usually show an error notification banner within the drawer itself

I also noticed that form data persists when reopening the drawer, but navigating between tabs within the details page resets the form data. I think the drawer should always open with an empty state

dwiley-akamai

We'll need an Upcoming Features changeset for each package touched

dwiley-akamai · 2026-02-09T17:42:22Z

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

+    }
+  });
+
+  it('renders an removable text field on click of the "Add Email Address" button', async () => {


Suggested change

it('renders an removable text field on click of the "Add Email Address" button', async () => {

it('renders a removable text field on click of the "Add Email Address" button', async () => {

dwiley-akamai · 2026-02-09T17:45:01Z

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

+            Fill the form and our partner&apos;s sales team will reach out to
+            you


Shouldn't this have a period at the end? And maybe something like "Complete the form [...]" would make it sound a bit more formal

This was the phrasing preferred by the tech writing team. Will double check on this

linode-gh-bot · 2026-02-10T12:39:53Z

Cloud Manager UI test results

🔺 1 failing test on test run #12 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`1 Failing`	`865 Passing`	`11 Skipped`	`37m 41s`

Details

Failing Tests
	Spec	Test
❌	`firewall-landing-page.spec.ts`	Cloud Manager Cypress Tests→confirms Firewalls landing page empty state is shown when no Firewalls exist » lists all Firewalls

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/firewalls/firewall-landing-page.spec.ts"

pmakode-akamai · 2026-02-10T12:17:56Z

packages/manager/src/components/SelectionCard/SelectionCard.tsx

   */
  renderVariant?: () => JSX.Element | null;
+  /**
+   * An optional prop to set the  ARIA role of the selection card.


Suggested change

* An optional prop to set the ARIA role of the selection card.

* An optional prop to set the ARIA role of the selection card.

Very minor nit: extra spacing between words

pmakode-akamai · 2026-02-10T12:29:39Z

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

          }}
        >
-          Load More...
+          Load more offers &gt;


We should use chevron-right icon here

pmakode-akamai · 2026-02-10T12:51:27Z

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

+                    slotProps={{
+                      paper: {
+                        sx: {
+                          overflow: 'hidden',
+                          // Set the options width to cover the entire textfield when the drawer is at or above its designed width
+                          width: {
+                            sm: '401px',
+                            xs: '366px',
+                          },
+                          // When the drawer width is less than 445px, expand to drawer width (minus padding offset) on mobile
+                          '@media (max-width: 445px)': {
+                            width: 'calc(100vw - 79px)',
+                          },
+                        },
+                      },
+                    }}


Suggested change

slotProps={{

paper: {

sx: {

overflow: 'hidden',

// Set the options width to cover the entire textfield when the drawer is at or above its designed width

width: {

sm: '401px',

xs: '366px',

},

// When the drawer width is less than 445px, expand to drawer width (minus padding offset) on mobile

'@media (max-width: 445px)': {

width: 'calc(100vw - 79px)',

},

},

},

}}

I don't see any effect from these slotProps styles on the phone number field. We usually avoid using media queries directly like this and prefer breakpoints instead. Since I didn't notice any visible impact from the above, this might not be required at all. Could you double-check?

pmakode-akamai · 2026-02-10T12:53:09Z

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

+                    }}
+                    options={countryList}
+                    placeholder=""
+                    renderOption={({ key, ...props }, option) => (


Looks like this key prop is unused here

pmakode-akamai · 2026-02-10T13:12:23Z

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

+                  }}
+                  title="Additional email addresses"
+                  tooltip="You can add two additional emails"
+                />


Currently, this field doesn't span the full width to align with the other fields. Should we adjust it to match the UX mockups?

pmakode-akamai · 2026-02-10T13:17:27Z

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

+                control={control}
+                name="phone_country_code"
+                render={({ field }) => (
+                  <Autocomplete


Screen.Recording.2026-02-10.at.6.42.44.PM.mov

I noticed a slight pixel shift when hovering over this input field. Could we fix this?

pmakode-akamai · 2026-02-10T14:13:33Z

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

+              control={control}
+              name="country_code"
+              render={({ field }) => (
+                <Autocomplete


I've noticed this console error locally (not on preview link) when region is selected from the list.

Also, this field persists the selected value every time the form is reopened - I believe It should have no value initially when the form is opened.

harsh-akamai added 2 commits February 5, 2026 09:07

upcoming: [UIE-9823] - Implement the Contact Sales Drawer for Marketp…

4d7aaa8

…lace products

label fix

34b1b8a

github-project-automation bot added this to Cloud Manager Feb 5, 2026

github-project-automation bot moved this to Review in Cloud Manager Feb 5, 2026

harsh-akamai self-assigned this Feb 5, 2026

fix for phone field options width

fd5f5e3

harsh-akamai marked this pull request as ready for review February 5, 2026 06:22

harsh-akamai requested a review from a team as a code owner February 5, 2026 06:23

changes in api route

1e037b2

harsh-akamai requested review from pmakode-akamai and tvijay-akamai February 5, 2026 07:36

harsh-akamai added the Marketplace label Feb 5, 2026

harsh-akamai added 5 commits February 5, 2026 13:50

fix form error padding

ac56625

Merge branch 'develop' of https://github.com/linode/manager into UIE-…

58dc6b0

…9823

addressed all linting warnings

39532e2

tiny fix

768d22c

ux fixes

e924995

tvijay-akamai requested a review from abailly-akamai February 6, 2026 12:45

tvijay-akamai reviewed Feb 8, 2026

View reviewed changes

tvijay-akamai reviewed Feb 9, 2026

View reviewed changes

pmakode-akamai reviewed Feb 9, 2026

View reviewed changes

harsh-akamai added 3 commits February 9, 2026 18:13

unit tests + PR feedback

65c964a

selection card role prop edits

5d45776

added more unit test cases

7741ace

dwiley-akamai reviewed Feb 9, 2026

View reviewed changes

harsh-akamai added 3 commits February 10, 2026 17:19

Fixed test case grammar + added pendo ids

d3695e8

Added changeset: Update the validation schema to match the API

9d746e9

Add changeset

98fe1d1

harsh-akamai added the Ready for Review label Feb 10, 2026

pmakode-akamai reviewed Feb 10, 2026

View reviewed changes

		@@ -0,0 +1,590 @@
		import { yupResolver } from '@hookform/resolvers/yup';

	it('renders an removable text field on click of the "Add Email Address" button', async () => {
	it('renders a removable text field on click of the "Add Email Address" button', async () => {

		Fill the form and our partner's sales team will reach out to
		you

	* An optional prop to set the ARIA role of the selection card.
	* An optional prop to set the ARIA role of the selection card.

upcoming: [UIE-9823] - Implement the Contact Sales Drawer for Marketplace products #13368

Are you sure you want to change the base?

upcoming: [UIE-9823] - Implement the Contact Sales Drawer for Marketplace products #13368

Conversation

harsh-akamai commented Feb 5, 2026 • edited by dwiley-akamai Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Scope 🚢

Preview 📷

How to test 🧪

Prerequisites

Verification steps

As an Author, to speed up the review process, I considered 🤔

As an Author, before moving this PR from Draft to Open, I confirmed ✅

Uh oh!

tvijay-akamai commented Feb 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tvijay-akamai commented Feb 8, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dwiley-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Feb 10, 2026

Cloud Manager UI test results

🔺 1 failing test on test run #12 ↗︎

Details

Troubleshooting

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

harsh-akamai commented Feb 5, 2026 •

edited by dwiley-akamai

Loading

tvijay-akamai commented Feb 8, 2026 •

edited

Loading

pmakode-akamai Feb 10, 2026 •

edited

Loading