Merge pull request #973 from MakePrisms/fix/unify-offer-gift-card-pattern

refactor: unify offer and gift card rendering patterns

Author: gudnuf

app/features/gift-cards/gift-cards.tsx

@@ -16,8 +16,8 @@ import {
 import { DiscoverGiftCards } from './discover-gift-cards';
 import { EmptyState } from './empty-state';
 import { GiftCardItem } from './gift-card-item';
-import { OfferItem } from './offer-item';
 import {
+  getCardByUrl,
   getGiftCardImageByUrl,
   useDiscoverGiftCards,
 } from './use-discover-cards';
@@ -97,7 +97,12 @@ export function GiftCards() {
                         : undefined,
                     }}
                   >
-                    <OfferItem account={account} />
+                    <GiftCardItem
+                      account={account}
+                      image={getCardByUrl(account.mintUrl)?.image}
+                      hideOverlayContent
+                      className="w-full max-w-none"
+                    />
                   </button>
                 ))}
               </div>

app/features/gift-cards/offer-card-images.ts

@@ -17,7 +17,8 @@ import { MoneyWithConvertedAmount } from '~/features/shared/money-with-converted
 import { useBuildLinkWithSearchParams } from '~/hooks/use-search-params-link';
 import { LinkWithViewTransition } from '~/lib/transitions';
 import { CARD_WIDTH } from './card-stack-constants';
-import { OfferItem } from './offer-item';
+import { GiftCardItem } from './gift-card-item';
+import { getCardByUrl } from './use-discover-cards';
 
 function formatExpiryDate(expiresAt: string): string {
   const date = new Date(expiresAt);
@@ -83,7 +84,12 @@ export default function OfferDetails({ accountId }: OfferDetailsProps) {
               className="w-full"
               aria-label={`Close ${offer.name} offer`}
             >
-              <OfferItem account={offer} />
+              <GiftCardItem
+                account={offer}
+                image={getCardByUrl(offer.mintUrl)?.image}
+                hideOverlayContent
+                className="w-full max-w-none"
+              />
             </button>
           </div>
 

app/features/gift-cards/offer-details.tsx

@@ -4,26 +4,39 @@ import compassCoffeeCard from '~/assets/gift-cards/compass.agi.cash.webp';
 import mapleCard from '~/assets/gift-cards/maple.agi.cash.webp';
 import pinkOwlCoffeeCard from '~/assets/gift-cards/pinkowl.agi.cash.webp';
 import pubkeyCard from '~/assets/gift-cards/pubkey.agi.cash.webp';
+import sfFreeCoffeeCard from '~/assets/gift-cards/sf-free-coffee.webp';
 import theShackCard from '~/assets/gift-cards/shack.agi.cash.webp';
 import theEpicurianTraderCard from '~/assets/gift-cards/theepicureantrader.agi.cash.webp';
 import { useAccounts } from '../accounts/account-hooks';
 import {
   type GiftCardConfig,
   JsonGiftCardConfigSchema,
 } from './gift-card-config';
+import {
+  JsonOfferCardConfigSchema,
+  type OfferCardConfig,
+} from './offer-card-config';
+
+export type CardInfo = {
+  url: string;
+  name: string;
+  image: string;
+  addCardDisclaimer?: string;
+};
 
 export type GiftCardInfo = GiftCardConfig & {
   image: string;
 };
 
-const GIFT_CARD_IMAGES: Record<string, string> = {
+const CARD_IMAGES: Record<string, string> = {
   'https://blockandbean.agi.cash': blockAndBeanCard,
   'https://pubkey.agi.cash': pubkeyCard,
   'https://maple.agi.cash': mapleCard,
   'https://compass.agi.cash': compassCoffeeCard,
   'https://pinkowl.agi.cash': pinkOwlCoffeeCard,
   'https://shack.agi.cash': theShackCard,
   'https://theepicureantrader.agi.cash': theEpicurianTraderCard,
+  'http://localhost:8104': sfFreeCoffeeCard,
 };
 
 function loadGiftCardsFromEnv(): GiftCardInfo[] {
@@ -33,11 +46,31 @@ function loadGiftCardsFromEnv(): GiftCardInfo[] {
   // Validated at build time by vite.config.ts — safe to throw here.
   return JsonGiftCardConfigSchema.parse(raw).map((card) => ({
     ...card,
-    image: GIFT_CARD_IMAGES[card.url] ?? '',
+    image: CARD_IMAGES[card.url] ?? '',
   }));
 }
 
+type OfferCardInfo = OfferCardConfig & {
+  image: string;
+};
+
+function loadOfferCardsFromEnv(): OfferCardInfo[] {
+  const raw = import.meta.env.VITE_OFFER_CARDS;
+  if (!raw) return [];
+
+  return JsonOfferCardConfigSchema.parse(raw).map((card) => {
+    const image = CARD_IMAGES[card.url];
+    if (!image) {
+      throw new Error(
+        `Missing image for offer card: ${card.url}. Add an entry to CARD_IMAGES.`,
+      );
+    }
+    return { ...card, image };
+  });
+}
+
 export const GIFT_CARDS: GiftCardInfo[] = loadGiftCardsFromEnv();
+export const OFFER_CARDS: OfferCardInfo[] = loadOfferCardsFromEnv();
 
 /**
  * Returns the gift card image for a given URL, if one exists.
@@ -53,6 +86,18 @@ export function getGiftCardByUrl(url: string): GiftCardInfo | undefined {
   return GIFT_CARDS.find((card) => card.url === url);
 }
 
+/**
+ * Returns card info (image, name, etc.) for a given mint URL,
+ * regardless of whether it's a gift card or offer card.
+ */
+export function getCardByUrl(url: string): CardInfo | undefined {
+  const giftCard = GIFT_CARDS.find((card) => card.url === url);
+  if (giftCard) return giftCard;
+  const offerCard = OFFER_CARDS.find((card) => card.url === url);
+  if (offerCard) return offerCard;
+  return undefined;
+}
+
 /**
  * Returns gift cards that the user has not yet added.
  */

app/features/gift-cards/offer-item.tsx

@@ -29,8 +29,7 @@ import {
 import { getAccountHomePath } from '../accounts/account';
 import { AccountSelector } from '../accounts/account-selector';
 import { GiftCardItem } from '../gift-cards/gift-card-item';
-import { OfferItem } from '../gift-cards/offer-item';
-import { getGiftCardByUrl } from '../gift-cards/use-discover-cards';
+import { getCardByUrl } from '../gift-cards/use-discover-cards';
 import { tokenToMoney } from '../shared/cashu';
 import { getErrorMessage } from '../shared/error';
 import { MoneyWithConvertedAmount } from '../shared/money-with-converted-amount';
@@ -119,7 +118,7 @@ export default function ReceiveToken({
     setReceiveAccount,
     addAndSetReceiveAccount,
   } = useReceiveCashuTokenAccounts(token, preferredReceiveAccountId);
-  const giftCard = getGiftCardByUrl(sourceAccount.mintUrl);
+  const card = getCardByUrl(sourceAccount.mintUrl);
 
   const isReceiveAccountKnown = receiveAccount?.isUnknown === false;
 
@@ -209,21 +208,19 @@ export default function ReceiveToken({
         <div className="absolute top-0 right-0 bottom-0 left-0 mx-auto flex max-w-sm items-center justify-center">
           {claimableToken && receiveAccount ? (
             <div className="w-full max-w-sm px-4">
-              {giftCard ? (
+              {card ? (
                 <div className="flex flex-col items-center gap-3">
                   <GiftCardItem
                     account={sourceAccount}
-                    image={giftCard?.image}
+                    image={card.image}
                     hideOverlayContent
                   />
-                  {giftCard?.addCardDisclaimer && (
+                  {card.addCardDisclaimer && (
                     <p className="text-center text-muted-foreground text-sm">
-                      {giftCard.addCardDisclaimer}
+                      {card.addCardDisclaimer}
                     </p>
                   )}
                 </div>
-              ) : sourceAccount.purpose === 'offer' ? (
-                <OfferItem account={sourceAccount} />
               ) : (
                 <AccountSelector
                   accounts={selectableAccounts}
@@ -310,7 +307,7 @@ export function PublicReceiveCashuToken({ token }: { token: Token }) {
       token,
     });
 
-  const giftCard = getGiftCardByUrl(sourceAccount.mintUrl);
+  const card = getCardByUrl(sourceAccount.mintUrl);
 
   const encodedToken = getEncodedToken(claimableToken ?? token);
 
@@ -376,21 +373,19 @@ export function PublicReceiveCashuToken({ token }: { token: Token }) {
         <div className="absolute top-0 right-0 bottom-0 left-0 mx-auto flex max-w-sm items-center justify-center">
           {claimableToken && sourceAccount.canReceive ? (
             <div className="w-full max-w-sm px-4">
-              {giftCard ? (
+              {card ? (
                 <div className="flex flex-col items-center gap-3">
                   <GiftCardItem
                     account={sourceAccount}
-                    image={giftCard?.image}
+                    image={card.image}
                     hideOverlayContent
                   />
-                  {giftCard?.addCardDisclaimer && (
+                  {card.addCardDisclaimer && (
                     <p className="text-center text-muted-foreground text-sm">
-                      {giftCard.addCardDisclaimer}
+                      {card.addCardDisclaimer}
                     </p>
                   )}
                 </div>
-              ) : sourceAccount.purpose === 'offer' ? (
-                <OfferItem account={sourceAccount} />
               ) : (
                 <AccountSelector
                   accounts={selectableAccounts}