@rpg-engine/long-bow 0.8.171 → 0.8.172

package/src/components/Store/PurchaseSuccess.tsx

@@ -0,0 +1,258 @@
+import { MetadataType } from '@rpg-engine/shared';
+import React from 'react';
+import { FaShoppingBag, FaStar, FaTimes } from 'react-icons/fa';
+import styled, { keyframes } from 'styled-components';
+import characterAtlasJSON from '../../mocks/atlas/entities/entities.json';
+import characterAtlasIMG from '../../mocks/atlas/entities/entities.png';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IPurchaseSuccessItem {
+  name: string;
+  texturePath: string;
+  quantity: number;
+  metadataType?: MetadataType;
+  metadata?: Record<string, any>;
+}
+
+export interface IPurchaseSuccessProps {
+  items: IPurchaseSuccessItem[];
+  totalPrice: number;
+  atlasJSON: Record<string, any>;
+  atlasIMG: string;
+  onContinueShopping: () => void;
+  onClose: () => void;
+}
+
+export const PurchaseSuccess: React.FC<IPurchaseSuccessProps> = ({
+  items,
+  totalPrice,
+  atlasJSON,
+  atlasIMG,
+  onContinueShopping,
+  onClose,
+}) => {
+  return (
+    <Container>
+      <Sparkles aria-hidden>
+        {[...Array(8)].map((_, i) => <Spark key={i} $i={i} />)}
+      </Sparkles>
+
+      <Header>
+        <TrophyArea>
+          <TrophyIcon>
+            <FaStar />
+          </TrophyIcon>
+        </TrophyArea>
+        <Title>PURCHASE COMPLETE!</Title>
+        <Subtitle>Your items are ready</Subtitle>
+      </Header>
+
+      <ItemsList>
+        {items.map((item, i) => {
+          const isCharSkin = item.metadataType === MetadataType.CharacterSkin;
+          const spriteKey = isCharSkin && item.metadata?.selectedSkinTextureKey
+            ? `${item.metadata.selectedSkinTextureKey}/down/standing/0.png`
+            : item.texturePath;
+
+          return (
+            <SuccessItem key={i}>
+              <ItemIconWrap>
+                <SpriteFromAtlas
+                  atlasJSON={isCharSkin ? characterAtlasJSON : atlasJSON}
+                  atlasIMG={isCharSkin ? characterAtlasIMG : atlasIMG}
+                  spriteKey={spriteKey}
+                  width={32}
+                  height={32}
+                  imgScale={2}
+                  centered
+                />
+              </ItemIconWrap>
+              <ItemName>{item.name}</ItemName>
+              {item.quantity > 1 && <ItemQty>×{item.quantity}</ItemQty>}
+            </SuccessItem>
+          );
+        })}
+      </ItemsList>
+
+      <TotalPaid>
+        Paid: <TotalAmount>${totalPrice.toFixed(2)}</TotalAmount>
+      </TotalPaid>
+
+      <Actions>
+        <CTAButton
+          icon={<FaShoppingBag />}
+          label="Continue Shopping"
+          onClick={onContinueShopping}
+          fullWidth
+        />
+        <CloseLink onPointerDown={onClose}>
+          <FaTimes /> Close Store
+        </CloseLink>
+      </Actions>
+    </Container>
+  );
+};
+
+const scaleIn = keyframes`
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+`;
+
+const float = keyframes`
+  0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
+  100% { transform: translateY(-60px) rotate(360deg); opacity: 0; }
+`;
+
+const glowPulse = keyframes`
+  0%, 100% { box-shadow: 0 0 12px rgba(245,158,11,0.5), 0 0 24px rgba(245,158,11,0.2); }
+  50%       { box-shadow: 0 0 24px rgba(245,158,11,0.8), 0 0 48px rgba(245,158,11,0.4); }
+`;
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+  padding: 2rem 1.5rem;
+  overflow: hidden;
+  animation: ${scaleIn} 0.25s ease-out;
+  text-align: center;
+`;
+
+const Sparkles = styled.div`
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+`;
+
+const Spark = styled.div<{ $i: number }>`
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #f59e0b;
+  top: ${p => 30 + (p.$i % 4) * 15}%;
+  left: ${p => 10 + (p.$i * 11) % 80}%;
+  animation: ${float} ${p => 1.5 + (p.$i % 3) * 0.4}s ease-out ${p => p.$i * 0.2}s infinite;
+  opacity: 0;
+`;
+
+const Header = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+`;
+
+const TrophyArea = styled.div`
+  margin-bottom: 0.25rem;
+`;
+
+const TrophyIcon = styled.div`
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(245, 158, 11, 0.15);
+  border: 2px solid #f59e0b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${glowPulse} 2s ease-in-out infinite;
+
+  svg {
+    font-size: 1.75rem;
+    color: #f59e0b;
+  }
+`;
+
+const Title = styled.h2`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.9rem;
+  color: #fef08a;
+  margin: 0;
+  text-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
+`;
+
+const Subtitle = styled.p`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  margin: 0;
+`;
+
+const ItemsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+  max-width: 340px;
+  max-height: 200px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar { width: 4px; background: rgba(0,0,0,0.2); }
+  &::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.3); border-radius: 2px; }
+`;
+
+const SuccessItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  border-radius: 4px;
+`;
+
+const ItemIconWrap = styled.div`
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+`;
+
+const ItemName = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem;
+  color: #fff;
+  flex: 1;
+  text-align: left;
+`;
+
+const ItemQty = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: #fef08a;
+`;
+
+const TotalPaid = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.7);
+`;
+
+const TotalAmount = styled.span`
+  color: #4ade80;
+`;
+
+const Actions = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  max-width: 340px;
+`;
+
+const CloseLink = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.45);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  transition: color 0.15s;
+
+  &:hover { color: rgba(255, 255, 255, 0.7); }
+`;

package/src/components/Store/Store.tsx

@@ -13,6 +13,7 @@ import { Tabs } from '../shared/Tabs';
 import { LabelPill } from '../shared/LabelPill/LabelPill';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { CartView } from './CartView';
+import { FeaturedBanner, IFeaturedItem } from './FeaturedBanner';
 import { useStoreCart } from './hooks/useStoreCart';
 import { MetadataCollector } from './MetadataCollector';
 import { StoreItemsSection } from './sections/StoreItemsSection';
@@ -20,7 +21,7 @@ import { StorePacksSection } from './sections/StorePacksSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
 // Define TabId union type for tab identifiers
-type TabId = 'premium' | 'packs' | 'items' | 'wallet';
+type TabId = 'premium' | 'packs' | 'items' | 'wallet' | 'history';
 
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
@@ -43,9 +44,38 @@ export interface IStoreProps {
   textInputItemKeys?: string[];
   customPacksContent?: React.ReactNode;
   customWalletContent?: React.ReactNode;
+  customHistoryContent?: React.ReactNode;
   packsBadge?: string;
+  featuredItems?: IFeaturedItem[];
+  onQuickBuy?: (item: IProductBlueprint, quantity?: number) => void;
+  itemBadges?: Record<string, { badges?: import('./StoreBadges').IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
+  packBadges?: Record<string, { badges?: import('./StoreBadges').IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
+  /** Fires when an item row becomes visible (on mount). Useful for store_item_viewed analytics. */
+  onItemView?: (item: IProductBlueprint, position: number) => void;
+  /** Fires when a pack row becomes visible (on mount). Useful for pack_viewed analytics. */
+  onPackView?: (pack: IItemPack, position: number) => void;
+  /** Fires when the active store tab changes (e.g. 'items', 'packs', 'premium'). */
+  onTabChange?: (tab: string, itemsShown: number) => void;
+  /** Fires when the category filter changes in the items tab. */
+  onCategoryChange?: (category: string, itemsShown: number) => void;
+  /** Fires when the cart is opened. */
+  onCartOpen?: () => void;
+  /** Fires when any item or pack is added to the cart. */
+  onAddToCart?: (item: IProductBlueprint, quantity: number) => void;
+  /** Fires when an item is removed from the cart. */
+  onRemoveFromCart?: (itemKey: string) => void;
+  /** Fires when the user taps "Pay" — before the purchase resolves. */
+  onCheckoutStart?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
+  /** Fires after a successful purchase. */
+  onPurchaseSuccess?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
+  /** Fires when a purchase fails. */
+  onPurchaseError?: (error: string) => void;
+  /** Called when the DC nudge in CartView is tapped — open the DC purchase flow. */
+  onBuyDC?: () => void;
 }
 
+export type { IFeaturedItem };
+
 export const Store: React.FC<IStoreProps> = ({
   items,
   packs = [],
@@ -65,8 +95,24 @@ export const Store: React.FC<IStoreProps> = ({
   textInputItemKeys = [],
   customPacksContent,
   customWalletContent,
+  customHistoryContent,
   packsTabLabel = 'Packs',
   packsBadge,
+  featuredItems,
+  onQuickBuy,
+  itemBadges,
+  packBadges,
+  onItemView,
+  onPackView,
+  onTabChange,
+  onCategoryChange,
+  onCartOpen,
+  onAddToCart,
+  onRemoveFromCart,
+  onCheckoutStart,
+  onPurchaseSuccess,
+  onPurchaseError,
+  onBuyDC,
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -90,6 +136,21 @@ export const Store: React.FC<IStoreProps> = ({
   const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
   const [currentMetadataItem, setCurrentMetadataItem] = useState<IProductBlueprint | null>(null);
 
+  const handleOpenCart = () => {
+    openCart();
+    onCartOpen?.();
+  };
+
+  const handleAddToCartTracked = (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => {
+    handleAddToCart(item, quantity, metadata);
+    onAddToCart?.(item, quantity);
+  };
+
+  const handleRemoveFromCartTracked = (itemKey: string) => {
+    handleRemoveFromCart(itemKey);
+    onRemoveFromCart?.(itemKey);
+  };
+
   const handleAddPackToCart = (pack: IItemPack, quantity: number = 1) => {
     const packItem: IProductBlueprint = {
       key: pack.key,
@@ -109,6 +170,7 @@ export const Store: React.FC<IStoreProps> = ({
       isUsable: false,
     };
     handleAddToCart(packItem, quantity);
+    onAddToCart?.(packItem, quantity);
   };
 
   const filterItems = (
@@ -163,8 +225,12 @@ export const Store: React.FC<IStoreProps> = ({
   }
 
   // Build tabs dynamically based on props
-  const tabIds: TabId[] = tabOrder ?? ['premium', 'packs', 'items'];
-  const availableTabIds: TabId[] = tabIds.filter(id => !(hidePremiumTab && id === 'premium'));
+  const tabIds: TabId[] = [
+    ...(tabOrder ?? ['premium', 'packs', 'items']),
+    ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
+    ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : [])
+  ];
+  const availableTabIds: TabId[] = Array.from(new Set(tabIds.filter(id => !(hidePremiumTab && id === 'premium'))));
 
   const tabsMap: Record<string, { id: TabId; title: ReactNode; icon: ReactNode; content: ReactNode }> = {
     premium: {
@@ -175,9 +241,31 @@ export const Store: React.FC<IStoreProps> = ({
         <StorePacksSection
           packs={packs.filter(pack => pack.priceUSD >= 9.99)}
           onAddToCart={handleAddPackToCart}
+          onQuickBuy={onQuickBuy ? (pack, qty) => {
+            const bp: IProductBlueprint = {
+              key: pack.key,
+              name: pack.title,
+              description: pack.description || '',
+              price: pack.priceUSD,
+              currency: PaymentCurrency.USD,
+              texturePath: pack.image.default || pack.image.src,
+              type: PurchaseType.Pack,
+              onPurchase: async () => {},
+              itemType: ItemType.Consumable,
+              itemSubType: ItemSubType.Other,
+              rarity: ItemRarities.Common,
+              weight: 0,
+              isStackable: false,
+              maxStackSize: 1,
+              isUsable: false,
+            };
+            onQuickBuy(bp, qty);
+          } : undefined}
           onSelectPack={setSelectedPack}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
+          packBadges={packBadges}
+          onPackView={onPackView}
         />
       ),
     },
@@ -194,9 +282,31 @@ export const Store: React.FC<IStoreProps> = ({
         <StorePacksSection
           packs={hidePremiumTab ? packs : packs.filter(pack => pack.priceUSD < 9.99)}
           onAddToCart={handleAddPackToCart}
+          onQuickBuy={onQuickBuy ? (pack, qty) => {
+            const bp: IProductBlueprint = {
+              key: pack.key,
+              name: pack.title,
+              description: pack.description || '',
+              price: pack.priceUSD,
+              currency: PaymentCurrency.USD,
+              texturePath: pack.image.default || pack.image.src,
+              type: PurchaseType.Pack,
+              onPurchase: async () => {},
+              itemType: ItemType.Consumable,
+              itemSubType: ItemSubType.Other,
+              rarity: ItemRarities.Common,
+              weight: 0,
+              isStackable: false,
+              maxStackSize: 1,
+              isUsable: false,
+            };
+            onQuickBuy(bp, qty);
+          } : undefined}
           onSelectPack={setSelectedPack}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
+          packBadges={packBadges}
+          onPackView={onPackView}
         />
       ),
     },
@@ -207,19 +317,37 @@ export const Store: React.FC<IStoreProps> = ({
       content: (
         <StoreItemsSection
           items={filteredItems.items}
-          onAddToCart={handleAddToCart}
+          onAddToCart={handleAddToCartTracked}
+          onQuickBuy={onQuickBuy ? (item, qty, _meta) => onQuickBuy(item, qty) : undefined}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           userAccountType={userAccountType}
           textInputItemKeys={textInputItemKeys}
+          itemBadges={itemBadges}
+          onItemView={onItemView}
+          onCategoryChange={onCategoryChange}
         />
       ),
     },
     wallet: {
       id: 'wallet',
-      title: 'Wallet',
+      title: walletLabel ?? 'Wallet',
       icon: <Wallet width={18} height={18} />,
-      content: customWalletContent ?? null,
+      content: customWalletContent ?? (
+        <CenteredContent>
+          <CTAButton icon={<FaWallet />} label={`Open ${walletLabel ?? 'Wallet'}`} onClick={onShowWallet} />
+        </CenteredContent>
+      ),
+    },
+    history: {
+      id: 'history',
+      title: 'History',
+      icon: <FaHistory width={18} height={18} />,
+      content: customHistoryContent ?? (
+        <CenteredContent>
+          <CTAButton icon={<FaHistory />} label="Open History" onClick={onShowHistory} />
+        </CenteredContent>
+      ),
     },
   };
 
@@ -243,7 +371,7 @@ export const Store: React.FC<IStoreProps> = ({
       ) : isCartOpen ? (
         <CartView
           cartItems={cartItems}
-          onRemoveFromCart={handleRemoveFromCart}
+          onRemoveFromCart={handleRemoveFromCartTracked}
           onClose={closeCart}
           onPurchase={async () => {
             await handleCartPurchase(onPurchase);
@@ -251,6 +379,10 @@ export const Store: React.FC<IStoreProps> = ({
           }}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
+          onCheckoutStart={onCheckoutStart}
+          onPurchaseSuccess={onPurchaseSuccess}
+          onPurchaseError={onPurchaseError}
+          onBuyDC={onBuyDC}
         />
       ) : selectedPack ? (
         <StoreItemDetails
@@ -265,36 +397,71 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ) : (
         <Container>
-          <TopBar>
-            <LeftButtons>
-              {onShowHistory && (
-                <CTAButton
-                  icon={<FaHistory />}
-                  onClick={onShowHistory}
-                />
-              )}
-              {onShowWallet && (
+          {featuredItems && featuredItems.length > 0 && (
+            <FeaturedBanner
+              items={featuredItems}
+              atlasJSON={atlasJSON}
+              atlasIMG={atlasIMG}
+              onSelectItem={item => {
+                const pack = packs.find(p => p.key === item.key);
+                if (pack) setSelectedPack(pack);
+              }}
+              onQuickBuy={onQuickBuy ? item => {
+                const blueprint = items.find(bp => bp.key === item.key);
+                if (blueprint) onQuickBuy(blueprint, 1);
+                else {
+                  const pack = packs.find(p => p.key === item.key);
+                  if (pack) {
+                    const packBlueprint: IProductBlueprint = {
+                      key: pack.key,
+                      name: pack.title,
+                      description: pack.description || '',
+                      price: pack.priceUSD,
+                      currency: PaymentCurrency.USD,
+                      texturePath: pack.image.default || pack.image.src,
+                      type: PurchaseType.Pack,
+                      onPurchase: async () => {},
+                      itemType: ItemType.Consumable,
+                      itemSubType: ItemSubType.Other,
+                      rarity: ItemRarities.Common,
+                      weight: 0,
+                      isStackable: false,
+                      maxStackSize: 1,
+                      isUsable: false,
+                    };
+                    onQuickBuy(packBlueprint, 1);
+                  }
+                }
+              } : undefined}
+            />
+          )}
+          <MainContent>
+            <HeaderRow>
+              <Tabs
+                options={availableTabIds.map(id => ({ id, label: tabsMap[id]?.title, icon: tabsMap[id]?.icon }))}
+                activeTabId={activeTab}
+                onTabChange={(tabId) => {
+                  const nextTab = tabId as TabId;
+                  setActiveTab(nextTab);
+                  if (onTabChange) {
+                    const itemCount = nextTab === 'items' ? filteredItems.items.length
+                      : nextTab === 'premium' ? filteredItems.premium.length
+                      : nextTab === 'packs' ? packs.length
+                      : 0;
+                    onTabChange(nextTab, itemCount);
+                  }
+                }}
+              />
+              <CartButtonWrapper>
                 <CTAButton
-                  icon={<FaWallet />}
-                  label={walletLabel ?? 'DC Wallet'}
-                  onClick={onShowWallet}
+                  icon={<FaShoppingCart />}
+                  onClick={handleOpenCart}
                 />
-              )}
-            </LeftButtons>
-            <CartButton>
-              <CTAButton
-                icon={<FaShoppingCart />}
-                label={`${getTotalItems()} items ($${getTotalPrice().toFixed(2)})`}
-                onClick={openCart}
-              />
-            </CartButton>
-          </TopBar>
-          <MainContent>
-            <Tabs
-              options={availableTabIds.map(id => ({ id, label: tabsMap[id].title, icon: tabsMap[id].icon }))}
-              activeTabId={activeTab}
-              onTabChange={(tabId) => setActiveTab(tabId as TabId)}
-            />
+                {getTotalItems() > 0 && (
+                  <CartBadge>{getTotalItems()}</CartBadge>
+                )}
+              </CartButtonWrapper>
+            </HeaderRow>
             <TabContent>
               {tabsMap[activeTab]?.content}
             </TabContent>
@@ -314,7 +481,7 @@ export const Store: React.FC<IStoreProps> = ({
               <CTAButton
                 icon={<FaShoppingCart />}
                 label={`Proceed to Checkout ($${getTotalPrice().toFixed(2)})`}
-                onClick={openCart}
+                onClick={handleOpenCart}
                 fullWidth
               />
             </Footer>
@@ -330,29 +497,40 @@ const Container = styled.div`
   flex-direction: column;
   width: 100%;
   height: 100%;
-  gap: 1rem;
+  gap: 0.5rem;
   position: relative;
 `;
 
-const TopBar = styled.div`
+const HeaderRow = styled.div`
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  gap: 1rem;
-  padding: 0 1rem;
-  flex-shrink: 0;
-  margin-top: 0.5rem;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
 `;
 
-const LeftButtons = styled.div`
-  display: flex;
-  gap: 0.5rem;
-  min-width: fit-content;
-  margin-right: auto;
+const CartButtonWrapper = styled.div`
+  position: relative;
+  margin-right: 0.5rem;
+  margin-top: -16px;
 `;
 
-const CartButton = styled.div`
-  min-width: fit-content;
+const CartBadge = styled.div`
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  background: #ef4444; /* red */
+  color: white;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  padding: 4px;
+  border-radius: 50%;
+  border: 2px solid #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  box-sizing: content-box;
 `;
 
 const MainContent = styled.div`
@@ -416,3 +594,11 @@ const ErrorMessage = styled.div`
   color: ${uiColors.red};
   padding: 2rem;
 `;
+
+const CenteredContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 2rem;
+`;