fix: [UIE-10338] marketplace fixes (#13498)

* fix: [UIE-10338] marketplace fixes

* fix: [UIE-10338] added changeset

* fix: [UIE-10338] fixed unit tests

Author: tvijay-akamai

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

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.

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

@@ -199,7 +199,7 @@ export const MarketplaceLanding = () => {
         }}
       />
       <Grid container mb={3} spacing={2}>
-        <Grid size={{ xs: 12, sm: 12, md: 7 }}>
+        <Grid size={{ xs: 12, sm: 12, md: 6 }}>
           <DebouncedSearchTextField
             clearable
             debounceTime={250}
@@ -218,16 +218,24 @@ export const MarketplaceLanding = () => {
             value={searchQuery ?? ''}
           />
         </Grid>
-        <Grid size={{ xs: 12, sm: 6, md: 2.5 }}>
+        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
           <Autocomplete
             data-pendo-id="Cloud Marketplace Catalog-Category"
             label="Category"
+            noOptionsText="No categories match your search"
             onChange={(_, selected) =>
               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 = () => {
             }
           />
         </Grid>
-        <Grid size={{ xs: 12, sm: 6, md: 2.5 }}>
+        <Grid size={{ xs: 12, sm: 6, md: 3 }}>
           <Autocomplete
             data-pendo-id="Cloud Marketplace Catalog-Type"
             label="Type"
+            noOptionsText="No types match your search"
             onChange={(_, selected) =>
               updateSearchParam('type', selected?.label)
             }

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', () => {
       <ContactSalesDrawer {...mockProps} />
     );
 
-    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', () => {
       <ContactSalesDrawer {...mockProps} />
     );
 
-    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');
@@ -176,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(
       <ContactSalesDrawer {...mockProps} />
     );
 
-    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();
@@ -316,7 +319,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 () => {

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.
                 <MultipleIPInput
-                  buttonText="Add a second, additional email address"
+                  buttonText={
+                    <>
+                      <PlusSignIcon
+                        height={12}
+                        style={{ marginRight: 4 }}
+                        width={12}
+                      />
+                      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',