From a835387fb5fe05e6f2badf45f1489efa62e98d77 Mon Sep 17 00:00:00 2001 From: tvijay-akamai Date: Mon, 16 Mar 2026 16:56:23 +0530 Subject: [PATCH 1/3] fix: [UIE-10338] marketplace fixes --- .../MultipleIPInput/MultipleIPInput.tsx | 2 +- .../MarketplaceLanding/MarketplaceLanding.tsx | 15 +++++++-- .../ContactSalesDrawer.test.tsx | 13 +++++--- .../ProductDetails/ContactSalesDrawer.tsx | 32 ++++++++++++++++--- 4 files changed, 50 insertions(+), 12 deletions(-) diff --git a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx index f8ca08ba0e9..014edfbc914 100644 --- a/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx +++ b/packages/manager/src/components/MultipleIPInput/MultipleIPInput.tsx @@ -68,7 +68,7 @@ export interface MultipeIPInputProps { /** * Text displayed on the button. */ - buttonText?: string; + buttonText?: React.ReactNode; /** * Whether the first input field can be removed. diff --git a/packages/manager/src/features/Marketplace/MarketplaceLanding/MarketplaceLanding.tsx b/packages/manager/src/features/Marketplace/MarketplaceLanding/MarketplaceLanding.tsx index 243968ea691..af2ed7b3d51 100644 --- a/packages/manager/src/features/Marketplace/MarketplaceLanding/MarketplaceLanding.tsx +++ b/packages/manager/src/features/Marketplace/MarketplaceLanding/MarketplaceLanding.tsx @@ -199,7 +199,7 @@ export const MarketplaceLanding = () => { }} /> - + { value={searchQuery ?? ''} /> - + updateSearchParam('category', selected?.label) } options={categoryOptions} placeholder="Category" renderOption={renderAutocompleteOption('category')} + slotProps={{ + listbox: { + sx: { + maxHeight: '50vh', + }, + }, + }} textFieldProps={{ hideLabel: true, }} @@ -236,10 +244,11 @@ export const MarketplaceLanding = () => { } /> - + updateSearchParam('type', selected?.label) } diff --git a/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.test.tsx b/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.test.tsx index 7be2c175605..6124bcc28db 100644 --- a/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.test.tsx +++ b/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.test.tsx @@ -83,7 +83,7 @@ describe('ContactSalesDrawer', () => { const noOfEmails = getAllByTestId('domain-transfer-input').length; if (noOfEmails < 2) { const addEmailButton = getByText( - 'Add a second, additional email address' + 'Click to add a second, additional email address' ); expect(addEmailButton).toBeVisible(); } @@ -94,7 +94,9 @@ describe('ContactSalesDrawer', () => { ); - const addEmailButton = getByText('Add a second, additional email address'); + const addEmailButton = getByText( + 'Click to add a second, additional email address' + ); fireEvent.click(addEmailButton); expect(getAllByTestId('domain-transfer-input')).toHaveLength(2); @@ -105,7 +107,9 @@ describe('ContactSalesDrawer', () => { ); - const addEmailButton = getByText('Add a second, additional email address'); + const addEmailButton = getByText( + 'Click to add a second, additional email address' + ); fireEvent.click(addEmailButton); let additionalEmailInputs = queryAllByTestId('domain-transfer-input'); @@ -316,7 +320,8 @@ describe('ContactSalesDrawer', () => { fireEvent.click(consentCheckbox); - expect(getByText('Submit')).toBeEnabled(); + // Submit should still be disabled because required fields (region, phone) are not filled + expect(getByText('Submit')).toBeDisabled(); }); it('expands the terms and conditions when the "Show details" button is clicked', async () => { diff --git a/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx b/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx index d84e49d66a9..a58c0c9ff70 100644 --- a/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx +++ b/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.tsx @@ -11,6 +11,7 @@ import { InputAdornment, LinkButton, Notice, + PlusSignIcon, Stack, TextField, Typography, @@ -124,6 +125,17 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => { }); const tcConsent = watch('tc_consent_given'); + const countryCode = watch('country_code'); + const phone = watch('phone'); + + const isSubmitDisabled = + isSubmitting || + !tcConsent || + !countryCode || + !phone || + !!errors.country_code || + !!errors.phone || + !!errors.phone_country_code; const dialingCodeFilterOptions = createFilterOptions({ ignoreCase: true, @@ -138,6 +150,7 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => { const handleFormReset = () => { reset(); setSelectedCountry(null); + setSelectedPhoneCountry(defaultCountry); }; const onSubmit = handleSubmit(async (values) => { @@ -212,7 +225,16 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => { return ( // Using MultipleIPInput component for additional emails since it allows for easy addition and removal of multiple entries, and it can display individual error messages for each email address. + + Click to add a second, additional email address + + } className={ field.value?.length === MAX_ADDITIONAL_EMAILS ? classes.hideAddEmailButton @@ -265,6 +287,7 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => { } keepSearchEnabledOnMobile label="Region" + noOptionsText="No regions match your search" onBlur={field.onBlur} onChange={(_event, country) => { setSelectedCountry(country); @@ -337,6 +360,7 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => { option.label === value.label } label="Phone Number" + noOptionsText="No country codes match your search" onBlur={field.onBlur} onChange={(_, country) => { setSelectedPhoneCountry(country); @@ -625,11 +649,11 @@ export const ContactSalesDrawer = (props: ContactSalesDrawerProps) => { primaryButtonProps={{ 'data-pendo-id': 'Cloud Marketplace Contact Sales-Submit', label: 'Submit', - disabled: isSubmitting || !tcConsent, + disabled: isSubmitDisabled, type: 'submit', tooltipText: - 'Please agree to share your information with the partner to proceed.', - alwaysShowTooltip: !tcConsent, + 'Please complete all required fields and agree to share your information with the partner to proceed', + alwaysShowTooltip: isSubmitDisabled, }} secondaryButtonProps={{ 'data-pendo-id': 'Cloud Marketplace Contact Sales-Cancel', From ca62067d61627d15364f4499f9b20d7e9a68e18d Mon Sep 17 00:00:00 2001 From: tvijay-akamai Date: Mon, 16 Mar 2026 17:16:05 +0530 Subject: [PATCH 2/3] fix: [UIE-10338] added changeset --- packages/manager/.changeset/pr-13498-fixed-1782319675458.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/manager/.changeset/pr-13498-fixed-1782319675458.md diff --git a/packages/manager/.changeset/pr-13498-fixed-1782319675458.md b/packages/manager/.changeset/pr-13498-fixed-1782319675458.md new file mode 100644 index 00000000000..faf46176c4a --- /dev/null +++ b/packages/manager/.changeset/pr-13498-fixed-1782319675458.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Fixed +--- + +Marketplace Fixes: Improved texts and tooltips. Changed submit enable behavior in contact sales form ([#13498](https://github.com/linode/manager/pull/13498)) From 5145bc3e72d4edd5e58d18c204087f7e21a7235f Mon Sep 17 00:00:00 2001 From: tvijay-akamai Date: Tue, 17 Mar 2026 13:42:19 +0530 Subject: [PATCH 3/3] fix: [UIE-10338] fixed unit tests --- .../ProductDetails/ContactSalesDrawer.test.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.test.tsx b/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.test.tsx index 6124bcc28db..74523559fd7 100644 --- a/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.test.tsx +++ b/packages/manager/src/features/Marketplace/ProductDetails/ContactSalesDrawer.test.tsx @@ -180,18 +180,17 @@ describe('ContactSalesDrawer', () => { expect(selectedRegion).toHaveValue('United States Of America'); }); - it('shows an error message if a region is not selected on form submission', async () => { - const { getByText, queryByText } = renderWithTheme( + it('shows an error message if a region is not selected on blur', async () => { + const { getByTestId, queryByText } = renderWithTheme( ); - const tc_consentCheckbox = screen - .getByTestId('tc-consent-checkbox') - .querySelector('input') as HTMLInputElement; - fireEvent.click(tc_consentCheckbox); + const regionInput = getByTestId('region-autocomplete').querySelector( + 'input' + ) as HTMLInputElement; - const submitButton = getByText('Submit'); - fireEvent.click(submitButton); + fireEvent.focus(regionInput); + fireEvent.blur(regionInput); await waitFor(() => { expect(queryByText('Please select your region')).toBeVisible();