feat(04-01): implement MarketplaceCard component and marketplace i18n namespace
- Add marketplace namespace to de.json and en.json with all copywriting contract strings - Add sidebar.search and sidebar.noResults i18n keys - Create MarketplaceCard with icon, name, localized description, category badge, status badge (role="status"), and activate/deactivate button - All 5 unit tests pass (GREEN phase)
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
'use client';
|
||||
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
/**
|
||||
* Props for the MarketplaceCard component.
|
||||
*/
|
||||
export interface MarketplaceCardProps {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: Record<string, string>;
|
||||
icon?: string;
|
||||
category: string;
|
||||
isActive: boolean;
|
||||
isToggling: boolean;
|
||||
onToggle: (id: string, currentlyActive: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Default icon mapping for known module icons.
|
||||
* Renders inline SVG to avoid external icon library dependency.
|
||||
*/
|
||||
function ModuleIcon({ icon }: { icon?: string }) {
|
||||
if (icon === 'Globe') {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-primary"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
|
||||
<path d="M2 12h20" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
// Default puzzle-piece icon for generic modules
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-primary"
|
||||
>
|
||||
<path d="M19.439 7.85c-.049.322.059.648.289.878l1.568 1.568c.47.47.706 1.087.706 1.704s-.235 1.233-.706 1.704l-1.611 1.611a.98.98 0 0 1-.837.276c-.47-.07-.802-.48-.968-.925a2.501 2.501 0 1 0-3.214 3.214c.446.166.855.497.925.968a.979.979 0 0 1-.276.837l-1.61 1.61a2.404 2.404 0 0 1-1.705.707 2.402 2.402 0 0 1-1.704-.706l-1.568-1.568a1.026 1.026 0 0 0-.877-.29c-.493.074-.84.504-1.02.968a2.5 2.5 0 1 1-3.237-3.237c.464-.18.894-.527.967-1.02a1.026 1.026 0 0 0-.289-.877l-1.568-1.568A2.402 2.402 0 0 1 1.998 12c0-.617.236-1.234.706-1.704L4.315 8.685a.98.98 0 0 1 .837-.276c.47.07.802.48.968.925a2.501 2.501 0 1 0 3.214-3.214c-.446-.166-.855-.497-.925-.968a.979.979 0 0 1 .276-.837l1.61-1.61a2.404 2.404 0 0 1 1.705-.707c.617 0 1.234.236 1.704.706l1.568 1.568c.23.23.556.338.877.29.493-.074.84-.504 1.02-.968a2.5 2.5 0 1 1 3.237 3.237c-.464.18-.894.527-.967 1.02Z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Marketplace card showing a module with activation controls.
|
||||
*
|
||||
* Displays module name, localized description, category badge,
|
||||
* status badge, and an activate/deactivate button. Following the
|
||||
* ModuleCard pattern from Phase 3 with marketplace-specific extensions.
|
||||
*/
|
||||
export function MarketplaceCard({
|
||||
id,
|
||||
name,
|
||||
slug,
|
||||
description,
|
||||
icon,
|
||||
category,
|
||||
isActive,
|
||||
isToggling,
|
||||
onToggle,
|
||||
}: MarketplaceCardProps) {
|
||||
const t = useTranslations('marketplace');
|
||||
const locale = (typeof window !== 'undefined' && document.documentElement.lang) || 'de';
|
||||
const localizedDescription = description[locale] || description.en || description.de || '';
|
||||
|
||||
return (
|
||||
<div className="rounded-lg border border-border bg-card p-5 shadow-sm transition-all hover:shadow-md hover:border-primary/30" style={{ minHeight: '180px' }}>
|
||||
{/* Header: icon + name + badges */}
|
||||
<div className="flex items-start gap-3 mb-3">
|
||||
<div className="rounded-md bg-muted p-2.5 shrink-0">
|
||||
<ModuleIcon icon={icon} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="font-semibold text-base leading-tight truncate">{name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
|
||||
{category}
|
||||
</span>
|
||||
<span
|
||||
role="status"
|
||||
className={`rounded-full px-2 py-0.5 text-xs ${
|
||||
isActive
|
||||
? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
|
||||
: 'bg-muted text-muted-foreground'
|
||||
}`}
|
||||
>
|
||||
{isActive ? t('statusActive') : t('statusAvailable')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-muted-foreground line-clamp-2 mb-4">
|
||||
{localizedDescription}
|
||||
</p>
|
||||
|
||||
{/* Footer: action button */}
|
||||
<div className="flex items-center justify-end">
|
||||
<button
|
||||
onClick={() => onToggle(id, isActive)}
|
||||
disabled={isToggling}
|
||||
className={`rounded-md px-3 py-1.5 text-sm font-medium transition-colors disabled:cursor-wait disabled:opacity-50 ${
|
||||
isActive
|
||||
? 'border border-border text-foreground hover:bg-muted'
|
||||
: 'bg-primary text-primary-foreground'
|
||||
}`}
|
||||
>
|
||||
{isToggling ? (
|
||||
<span className="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
||||
) : isActive ? (
|
||||
t('deactivate')
|
||||
) : (
|
||||
t('activate')
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -81,6 +81,8 @@
|
||||
"collapse": "Einklappen",
|
||||
"expand": "Ausklappen",
|
||||
"userPlaceholder": "Benutzer",
|
||||
"search": "Module suchen...",
|
||||
"noResults": "Keine Module gefunden",
|
||||
"categories": {
|
||||
"label": "Kategorien",
|
||||
"empty": "Keine Module"
|
||||
@@ -171,5 +173,34 @@
|
||||
"noResults": "Gib einen Domain-Namen ein um die Verfuegbarkeit zu pruefen",
|
||||
"checking": "Pruefe...",
|
||||
"error": "Fehler bei der Pruefung"
|
||||
},
|
||||
"marketplace": {
|
||||
"title": "Marktplatz",
|
||||
"subtitle": "Entdecken und aktivieren Sie Module fuer Ihren Mandanten",
|
||||
"activate": "Modul aktivieren",
|
||||
"deactivate": "Deaktivieren",
|
||||
"searchPlaceholder": "Module suchen...",
|
||||
"statusAll": "Alle",
|
||||
"statusActive": "Aktiviert",
|
||||
"statusAvailable": "Verfuegbar",
|
||||
"categoryAll": "Alle",
|
||||
"emptyTitle": "Noch keine Module verfuegbar",
|
||||
"emptyBody": "Module werden vom Systemadministrator bereitgestellt. Schauen Sie spaeter noch einmal vorbei.",
|
||||
"filteredEmptyTitle": "Keine Ergebnisse",
|
||||
"filteredEmptyBody": "Versuchen Sie einen anderen Suchbegriff oder aendern Sie die Filter.",
|
||||
"errorLoad": "Module konnten nicht geladen werden. Bitte laden Sie die Seite neu.",
|
||||
"toastActivated": "Modul erfolgreich aktiviert",
|
||||
"toastDeactivated": "Modul erfolgreich deaktiviert",
|
||||
"toastActivateError": "Aktivierung fehlgeschlagen. Bitte versuchen Sie es erneut.",
|
||||
"toastDeactivateError": "Deaktivierung fehlgeschlagen. Bitte versuchen Sie es erneut.",
|
||||
"deactivateDialogTitle": "Modul deaktivieren",
|
||||
"deactivateDialogBody": "Moechten Sie {moduleName} fuer diesen Mandanten deaktivieren? Das Modul wird aus der Seitenleiste entfernt.",
|
||||
"deactivateDialogConfirm": "Deaktivieren",
|
||||
"deactivateDialogCancel": "Abbrechen",
|
||||
"tenantContextLabel": "Mandanten-Kontext",
|
||||
"backToMarketplace": "Zurueck zum Marktplatz",
|
||||
"detailVersion": "Version {version}",
|
||||
"detailStatusActive": "Aktiviert fuer diesen Mandanten",
|
||||
"detailStatusInactive": "Nicht aktiviert"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,6 +81,8 @@
|
||||
"collapse": "Collapse",
|
||||
"expand": "Expand",
|
||||
"userPlaceholder": "User",
|
||||
"search": "Search modules...",
|
||||
"noResults": "No modules found",
|
||||
"categories": {
|
||||
"label": "Categories",
|
||||
"empty": "No modules"
|
||||
@@ -171,5 +173,34 @@
|
||||
"noResults": "Enter a domain name to check availability",
|
||||
"checking": "Checking...",
|
||||
"error": "Error checking domain"
|
||||
},
|
||||
"marketplace": {
|
||||
"title": "Marketplace",
|
||||
"subtitle": "Discover and activate modules for your tenant",
|
||||
"activate": "Activate Module",
|
||||
"deactivate": "Deactivate",
|
||||
"searchPlaceholder": "Search modules...",
|
||||
"statusAll": "All",
|
||||
"statusActive": "Activated",
|
||||
"statusAvailable": "Available",
|
||||
"categoryAll": "All",
|
||||
"emptyTitle": "No modules available yet",
|
||||
"emptyBody": "Modules are provided by the system administrator. Check back later.",
|
||||
"filteredEmptyTitle": "No results",
|
||||
"filteredEmptyBody": "Try a different search term or adjust your filters.",
|
||||
"errorLoad": "Could not load modules. Please reload the page.",
|
||||
"toastActivated": "Module activated successfully",
|
||||
"toastDeactivated": "Module deactivated successfully",
|
||||
"toastActivateError": "Activation failed. Please try again.",
|
||||
"toastDeactivateError": "Deactivation failed. Please try again.",
|
||||
"deactivateDialogTitle": "Deactivate Module",
|
||||
"deactivateDialogBody": "Do you want to deactivate {moduleName} for this tenant? The module will be removed from the sidebar.",
|
||||
"deactivateDialogConfirm": "Deactivate",
|
||||
"deactivateDialogCancel": "Cancel",
|
||||
"tenantContextLabel": "Tenant Context",
|
||||
"backToMarketplace": "Back to Marketplace",
|
||||
"detailVersion": "Version {version}",
|
||||
"detailStatusActive": "Activated for this tenant",
|
||||
"detailStatusInactive": "Not activated"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user