upcoming: [UIE-9823] - Implement the Contact Sales Drawer for Marketplace products by harsh-akamai · Pull Request #13368 · linode/manager

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()}

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

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

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

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.

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

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

Fixed in 2660f98

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

Fixed in 2660f98

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?

screenshot

The slotProps help set the width for the options dropdown.
I've used media queries because the drawer width is set to 445px for small screens. Using breakpoints here wouldn't really help once we reach screen sizes less than the drawer width.

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

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

…9823

…to UIE-9823

…button

pmakode-akamai

thanks @harsh-akamai! Since we made the ARAI role prop optional (with no default) in SelectionCard, I think we'll still need to pass role="button" from ProductSelectionCard.tsx just for this case

linode-gh-bot · 2026-02-12T13:59:29Z

Cloud Manager UI test results

🔺 2 failing tests on test run #24 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`2 Failing`	`864 Passing`	`11 Skipped`	`42m 38s`

Details

Failing Tests
	Spec	Test
❌	`rebuild-linode.spec.ts`	Cloud Manager Cypress Tests→rebuild linode » rebuilds a linode from Account StackScript
❌	`timerange-verification.spec.ts`	Cloud Manager Cypress Tests→Integration tests for verifying Cloudpulse custom and preset configurations » should implement and validate custom date/time picker for a specific date and time range

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/rebuild-linode.spec.ts,cypress/e2e/core/cloudpulse/timerange-verification.spec.ts"

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

packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx Show resolved Hide resolved

tvijay-akamai reviewed Feb 8, 2026

View reviewed changes

packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx Show resolved Hide resolved

tvijay-akamai reviewed Feb 8, 2026

View reviewed changes

packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx Show resolved Hide resolved

tvijay-akamai reviewed Feb 9, 2026

View reviewed changes

packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx Show resolved Hide resolved

pmakode-akamai reviewed Feb 10, 2026

View reviewed changes

packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx Show resolved Hide resolved

PR feedback

2660f98

harsh-akamai requested a review from a team as a code owner February 11, 2026 07:29

harsh-akamai requested review from shagufa-akamai and removed request for a team February 11, 2026 07:29

harsh-akamai added 5 commits February 11, 2026 13:41

PR feedback pt 2

86635ef

fixed the phone number validation errors

a81b05c

ux changes

6c1b2c2

fixed failing tests

67b58e0

removed redundant styling

be9967f

harsh-akamai requested review from pmakode-akamai and tvijay-akamai February 12, 2026 06:41

Merge branch 'develop' into UIE-9823

9ee1338

tvijay-akamai approved these changes Feb 12, 2026

View reviewed changes

harsh-akamai added 4 commits February 12, 2026 16:33

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

ad1348a

…9823

Merge branch 'UIE-9823' of https://github.com/harsh-akamai/manager in…

5816ac5

…to UIE-9823

fix for failing unit test case + add pendo id for 'load more offers' …

7c19723

…button

fix comments

6eed2fb

pmakode-akamai approved these changes Feb 12, 2026

View reviewed changes

github-project-automation bot moved this from Review to Approved in Cloud Manager Feb 12, 2026

harsh-akamai added 2 commits February 12, 2026 17:32

add role="button" to ProductSelectionCard

a1117cf

Merge branch 'develop' into UIE-9823

4a14055

harsh-akamai merged commit 833e4cd into linode:develop Feb 12, 2026
34 of 35 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Feb 12, 2026

This was referenced Feb 19, 2026

Release v1.159.0 - release → staging #13416

Closed

Release v1.159.0 - release → staging #13417

Closed

Release v1.159.0 - release → staging #13422

Merged

Release v1.159.0 - staging → master #13429

Merged

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

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!

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!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

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!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pmakode-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

linode-gh-bot commented Feb 12, 2026

Cloud Manager UI test results

🔺 2 failing tests on test run #24 ↗︎

Details

Troubleshooting

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

harsh-akamai commented Feb 5, 2026 •

edited by dwiley-akamai

Loading

tvijay-akamai commented Feb 8, 2026 •

edited

Loading

harsh-akamai Feb 11, 2026 •

edited

Loading