From 7caf2a14c5dbc34bb609bb95a96f873f67ceb2b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Malfait?= Date: Fri, 26 Jun 2026 16:55:49 +0200 Subject: [PATCH] feat(website): show partner location instead of served regions in marketplace (#22224) ## Context On the partners marketplace, the eyebrow shown below each partner's name (on both the list card and the profile header) displayed the served regions (e.g. `APAC`, `EUROPE`). The partner's actual location was buried in the "Where & how" facts list. The location is more useful at a glance, so this swaps the two. ## Changes **List card (`PartnerCard`)** - The eyebrow below the name now shows the partner's city and country instead of the first served region. **Profile page** - `PartnerProfileHeader`: the eyebrow near the title now shows the real location (city, country). - `PartnerFactsList`: the served regions move into the "Where & how" section as a `Regions` row, taking the place of the now-redundant "Based in" row. The `Regions` chip rows on the card are unchanged. https://claude.ai/code/session_01FQRRfvPpmNsjAAnZeDc5sy --- _Generated by [Claude Code](https://claude.ai/code/session_01FQRRfvPpmNsjAAnZeDc5sy)_ Review in cubic --- .../src/partners-marketplace/PartnerCard.tsx | 15 +++++++++------ .../partners-marketplace/PartnerFactsList.tsx | 18 +++++++----------- .../partners-marketplace/PartnerProfile.tsx | 3 +-- .../PartnerProfileHeader.tsx | 16 ++++++---------- 4 files changed, 23 insertions(+), 29 deletions(-) diff --git a/packages/twenty-website/src/partners-marketplace/PartnerCard.tsx b/packages/twenty-website/src/partners-marketplace/PartnerCard.tsx index a18b75cca6..1fcf64991f 100644 --- a/packages/twenty-website/src/partners-marketplace/PartnerCard.tsx +++ b/packages/twenty-website/src/partners-marketplace/PartnerCard.tsx @@ -29,6 +29,7 @@ import { PartnerMoneyRow } from './PartnerMoneyRow'; import { PARTNER_SCOPE_LABELS } from './partner-scope-labels'; import { SERVED_GEO_LABELS } from './served-geo-labels'; import { SPOKEN_LANGUAGE_LABELS } from './spoken-language-labels'; +import { titleCaseFallback } from './title-case-fallback'; type PartnerCardStyle = CSSProperties & { '--partner-card-index': number; @@ -146,7 +147,7 @@ const LinkedinIconLink = styled(ExternalLink)` } `; -const CountryEyebrow = styled.span` +const LocationEyebrow = styled.span` color: ${semanticColor.inkMuted}; font-family: ${fontFamily('mono')}; font-size: ${fontSize(3)}; @@ -210,10 +211,12 @@ export function PartnerCard({ partner, index }: PartnerCardProps) { // Unprefixed; LocalizedLink (the name link) and the Button add the locale. const profileHref = `/partners/profile/${partner.slug}`; - const firstGeo = partner.region[0]; - const countryLine = firstGeo - ? i18n._(SERVED_GEO_LABELS[firstGeo]).toUpperCase() - : ''; + const locationLine = [ + partner.city, + partner.country ? titleCaseFallback(partner.country) : '', + ] + .filter(Boolean) + .join(', '); const linkedinSafe = isSafeHttpUrl(partner.linkedinUrl); @@ -239,7 +242,7 @@ export function PartnerCard({ partner, index }: PartnerCardProps) { )} - {countryLine} + {locationLine} diff --git a/packages/twenty-website/src/partners-marketplace/PartnerFactsList.tsx b/packages/twenty-website/src/partners-marketplace/PartnerFactsList.tsx index bee6490233..b4094f233e 100644 --- a/packages/twenty-website/src/partners-marketplace/PartnerFactsList.tsx +++ b/packages/twenty-website/src/partners-marketplace/PartnerFactsList.tsx @@ -9,6 +9,7 @@ import { color, fontFamily, fontSize, semanticColor, spacing } from '@/tokens'; import { type MarketplacePartner } from './marketplace-partner'; import { PARTNER_SCOPE_LABELS } from './partner-scope-labels'; +import { SERVED_GEO_LABELS } from './served-geo-labels'; import { SPOKEN_LANGUAGE_LABELS } from './spoken-language-labels'; import { titleCaseFallback } from './title-case-fallback'; @@ -57,23 +58,18 @@ function resolveLabels( } export function PartnerFactsList({ - city, - country, + region, languagesSpoken, partnerScope, }: { - city: MarketplacePartner['city']; - country: MarketplacePartner['country']; + region: MarketplacePartner['region']; languagesSpoken: MarketplacePartner['languagesSpoken']; partnerScope: MarketplacePartner['partnerScope']; }) { const { i18n } = useLingui(); const translate = (descriptor: MessageDescriptor) => i18n._(descriptor); - // Country is a CRM SELECT enum (e.g. "UNITED_STATES"); title-case it. - const locationText = [city, country ? titleCaseFallback(country) : ''] - .filter(Boolean) - .join(', '); + const regionText = resolveLabels(region, SERVED_GEO_LABELS, translate); const languageText = resolveLabels( languagesSpoken, SPOKEN_LANGUAGE_LABELS, @@ -87,10 +83,10 @@ export function PartnerFactsList({ return ( - {locationText && ( + {regionText && ( - {i18n._(msg`Based in`)} - {locationText} + {i18n._(msg`Regions`)} + {regionText} )} {languageText && ( diff --git a/packages/twenty-website/src/partners-marketplace/PartnerProfile.tsx b/packages/twenty-website/src/partners-marketplace/PartnerProfile.tsx index 8b33b0ab9e..2bc3abb0cb 100644 --- a/packages/twenty-website/src/partners-marketplace/PartnerProfile.tsx +++ b/packages/twenty-website/src/partners-marketplace/PartnerProfile.tsx @@ -173,8 +173,7 @@ export function PartnerProfile({ partner }: { partner: MarketplacePartner }) { {i18n._(msg`Where & how`)} diff --git a/packages/twenty-website/src/partners-marketplace/PartnerProfileHeader.tsx b/packages/twenty-website/src/partners-marketplace/PartnerProfileHeader.tsx index aa0c353f88..2a706bd3e4 100644 --- a/packages/twenty-website/src/partners-marketplace/PartnerProfileHeader.tsx +++ b/packages/twenty-website/src/partners-marketplace/PartnerProfileHeader.tsx @@ -1,6 +1,3 @@ -'use client'; - -import { useLingui } from '@lingui/react'; import { styled } from '@linaria/react'; import { @@ -15,7 +12,7 @@ import { import { type MarketplacePartner } from './marketplace-partner'; import { ProfileEyebrow } from './ProfileEyebrow'; -import { SERVED_GEO_LABELS } from './served-geo-labels'; +import { titleCaseFallback } from './title-case-fallback'; const Wrapper = styled.div` display: flex; @@ -56,13 +53,12 @@ export function PartnerProfileHeader({ }: { partner: MarketplacePartner; }) { - const { i18n } = useLingui(); - - // Served regions are the partner's market coverage, not their address. - const eyebrow = partner.region - .map((geo) => i18n._(SERVED_GEO_LABELS[geo])) + const eyebrow = [ + partner.city, + partner.country ? titleCaseFallback(partner.country) : '', + ] .filter(Boolean) - .join(' ยท '); + .join(', '); return (