upcoming: [UIE-9826] - Add reusable Product Selection Card component for Marketplace

[pmakode-akamai]

Description 📝

Add reusable Product Card component for Marketplace

Changes 🔄

• Add reusable Product Card component for Marketplace
• Add unit tests
• Update the feature folder structure to keep Landing-related files together in the new MarketplaceLanding directory

Scope 🚢

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

Target release date 🗓️

N/A

Preview 📷

Note

Logos shown in the preview are used only as examples for testing. The actual product logos will be provided by the API

Light Mode	Dark Mode

How to test 🧪

Prerequisites

• Enable MarketplaceV2 feature flag

• Use the below example usage code in the MarketplaceLanding component for testing (use actual sample data or hardcoded values):

  Example usage code

    <Grid container spacing={2}>
      {products?.map((product) => {
        const partner = partnersMap.get(product.partner_id);
        const type = typesMap.get(product.type_id);
  
        return (
          <ProductSelectionCard
            companyName={partner?.name}
            description={product.short_description}
            key={product.id}
            logoUrl={
              partner?.[
                theme.name === 'light'
                  ? 'logo_url_light_mode'
                  : 'logo_url_dark_mode'
              ] ?? ''
            }
            onClick={() =>
              navigate({ to: `/cloud-marketplace/catalog/${product.id}` })
            }
            productName={product.name}
            productTag={product.tile_tag}
            type={type?.name}
          />
        );
      })}
    </Grid>            
  

Verification steps

• Verify that the Product Card component looks as per the UX Figma designs
• Verify that logos of 48px × 48px OR 96px × 48px display correctly
• Verify that the Product Card component is clickable
• Ensure all tests pass successfully

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

[tvijay-akamai]

Let's confirm with davyd if we need to truncate the description received from api here at UI.

[linode-gh-bot]

Cloud Manager UI test results

🎉 860 passing tests on test run #10 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	860 Passing	11 Skipped	47m 30s