Seazn/profit-planet-frontend
2
2
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add coffee image display in subscription items and optimize status rendering

Browse Source
This commit is contained in:
seaznCode 2026-02-20 21:50:34 +01:00
parent 7526e5c2e5
commit ea12c2ec0b
1 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/profile/subscriptions/page.tsx
View File

@ -91,6 +91,16 @@ export default function ProfileSubscriptionsPage() {
}) })
}, [subscriptions]) }, [subscriptions])
const coffeeImageById = React.useMemo(() => {
const map: Record<string, string> = {}
coffees.forEach((coffee) => {
if (coffee.image) {
map[String(coffee.id)] = coffee.image
}
})
return map
}, [coffees])
if (!hasHydrated || !isAuthReady || !user) { if (!hasHydrated || !isAuthReady || !user) {
return ( return (
<div className="min-h-screen flex items-center justify-center"> <div className="min-h-screen flex items-center justify-center">
@ -271,9 +281,11 @@ export default function ProfileSubscriptionsPage() {
}`} }`}
> >
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<p className="text-sm font-semibold text-gray-900 truncate"> <div className="min-w-0">
{subscription.name || `Subscription #${subscription.id}`} <p className="text-sm font-semibold text-gray-900 truncate">
</p> {subscription.name || `Subscription #${subscription.id}`}
</p>
</div>
<span <span
className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${statusBadgeClass(subscriptionStatus)}`} className={`inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium ${statusBadgeClass(subscriptionStatus)}`}
> >
@ -397,13 +409,29 @@ export default function ProfileSubscriptionsPage() {
</div> </div>
) : ( ) : (
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3"> <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3">
{includedItems.map((item, index) => ( {includedItems.map((item, index) => {
<div key={`${item.coffeeId || 'coffee'}-${index}`} className="rounded-md bg-white/80 border border-gray-200 p-3"> const imageUrl = item.coffeeId ? coffeeImageById[String(item.coffeeId)] : ''
<p className="text-sm font-semibold text-gray-900">{item.coffeeName || `Coffee #${item.coffeeId || index + 1}`}</p> return (
<p className="text-xs text-gray-600 mt-1">Coffee ID: {item.coffeeId || '—'}</p> <div key={`${item.coffeeId || 'coffee'}-${index}`} className="rounded-md bg-white/80 border border-gray-200 p-3">
<p className="text-xs text-gray-600">Packs included: {Number(item.quantity) || 0}</p> <div className="flex items-start justify-between gap-3">
</div> <div className="min-w-0">
))} <p className="text-sm font-semibold text-gray-900">{item.coffeeName || `Coffee #${item.coffeeId || index + 1}`}</p>
<p className="text-xs text-gray-600 mt-1">Coffee ID: {item.coffeeId || '—'}</p>
<p className="text-xs text-gray-600">Packs included: {Number(item.quantity) || 0}</p>
</div>
{imageUrl ? (
<img
src={imageUrl}
alt={item.coffeeName || `Coffee #${item.coffeeId || index + 1}`}
className="h-14 w-14 rounded-md object-cover border border-gray-200 shrink-0"
/>
) : (
<div className="h-14 w-14 rounded-md bg-gray-100 border border-gray-200 shrink-0" />
)}
</div>
</div>
)
})}
</div> </div>
)} )}