@rpg-engine/long-bow 0.8.171 → 0.8.173

package/dist/stories/Features/store/FeaturedBanner.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stories/Features/store/PurchaseSuccess.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stories/Features/store/StoreBadges.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stories/Features/store/TrustBar.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.171",
+  "version": "0.8.173",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.10.103",
+    "@rpg-engine/shared": "^0.10.109",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Marketplace/BuyPanel.tsx

@@ -192,7 +192,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   const groupedBuyOrders = useMemo(() => {
     const groups = new Map<string, IMarketplaceBuyOrderItem[]>();
     for (const order of visibleBuyOrders) {
-      const key = order.itemBlueprintKey;
+      const key = `${order.itemBlueprintKey}|${order.itemRarity ?? ''}`;
       if (!groups.has(key)) groups.set(key, []);
       groups.get(key)!.push(order);
     }

package/src/components/RPGUI/RPGUIScrollbar.tsx

@@ -14,11 +14,11 @@ const Container = styled.div`
 
   .rpgui-content ::-webkit-scrollbar,
   .rpgui-content::-webkit-scrollbar {
-    width: 25px !important;
+    width: 12px !important;
   }
 
   .rpgui-content ::-webkit-scrollbar-track,
   .rpgui-content::-webkit-scrollbar-track {
-    background-size: 25px 60px !important;
+    background-size: 12px 60px !important;
   }
 `;

package/src/components/Store/CartView.tsx

@@ -1,13 +1,13 @@
 import { IProductBlueprint, MetadataType } from '@rpg-engine/shared';
 import React, { useState } from 'react';
-import { FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
+import { FaCoins, FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
 import styled 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';
-
-
+import { ITrustSignal, TrustBar } from './TrustBar';
+import { PurchaseSuccess } from './PurchaseSuccess';
 
 // Local cart item interface
 interface ICartItem {
@@ -16,13 +16,24 @@ interface ICartItem {
   metadata?: Record<string, any>;
 }
 
-interface ICartViewProps {
+export interface ICartViewProps {
   cartItems: ICartItem[];
   onRemoveFromCart: (itemKey: string) => void;
   onClose: () => void;
   onPurchase: () => Promise<boolean>;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
+  paymentMethodLabel?: string;
+  trustSignals?: ITrustSignal[];
+  onCloseStore?: () => void;
+  /** Called when user taps the "Buy DC" nudge — open wallet/DC purchase flow */
+  onBuyDC?: () => void;
+  /** Fires when user taps the pay button — 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;
 }
 
 const MetadataDisplay: React.FC<{
@@ -52,9 +63,17 @@ export const CartView: React.FC<ICartViewProps> = ({
   onPurchase,
   atlasJSON,
   atlasIMG,
+  paymentMethodLabel,
+  trustSignals,
+  onCloseStore,
+  onBuyDC,
+  onCheckoutStart,
+  onPurchaseSuccess,
+  onPurchaseError,
 }) => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [purchasedItems, setPurchasedItems] = useState<ICartItem[] | null>(null);
 
   const total = cartItems.reduce(
     (sum, cartItem) => sum + cartItem.item.price * cartItem.quantity,
@@ -72,23 +91,56 @@ export const CartView: React.FC<ICartViewProps> = ({
     try {
       setIsLoading(true);
       setError(null);
+      const snapshot = [...cartItems];
+      const trackItems = snapshot.map(ci => ({ key: ci.item.key, name: ci.item.name, quantity: ci.quantity }));
+      onCheckoutStart?.(trackItems, total);
       const success = await onPurchase();
 
-      if (!success) {
-        setError('Purchase failed. Please try again.');
+      if (success) {
+        onPurchaseSuccess?.(trackItems, total);
+        setPurchasedItems(snapshot);
+      } else {
+        const errMsg = 'Purchase failed. Please try again.';
+        onPurchaseError?.(errMsg);
+        setError(errMsg);
       }
     } catch (err) {
-      setError('An error occurred during purchase. Please try again.');
+      const errMsg = 'An error occurred during purchase. Please try again.';
+      onPurchaseError?.(errMsg);
+      setError(errMsg);
       console.error('Purchase error:', err);
     } finally {
       setIsLoading(false);
     }
   };
 
+  // Show DC discount nudge when items have DC pricing and user might benefit
+  const hasDCItems = cartItems.some(ci => (ci.item as any).dcPrice);
+  const showDCNudge = hasDCItems && onBuyDC;
+
+  if (purchasedItems) {
+    return (
+      <PurchaseSuccess
+        items={purchasedItems.map(ci => ({
+          name: ci.item.name,
+          texturePath: ci.item.texturePath,
+          quantity: ci.quantity,
+          metadataType: ci.item.metadataType,
+          metadata: ci.metadata,
+        }))}
+        totalPrice={purchasedItems.reduce((s, ci) => s + ci.item.price * ci.quantity, 0)}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        onContinueShopping={onClose}
+        onClose={onCloseStore ?? onClose}
+      />
+    );
+  }
+
   return (
     <Container>
       <Header>
-        <Title>Shopping Cart</Title>
+        <Title>Shopping Cart ({cartItems.reduce((s, ci) => s + ci.quantity, 0)})</Title>
         <CloseButton onPointerDown={onClose}>
           <FaTimes />
         </CloseButton>
@@ -154,9 +206,20 @@ export const CartView: React.FC<ICartViewProps> = ({
       </CartItems>
 
       <Footer>
+        {showDCNudge && (
+          <DCNudge onPointerDown={onBuyDC}>
+            <FaCoins />
+            <span>Save more with DC — volume discounts available</span>
+            <DCNudgeLink>Buy DC →</DCNudgeLink>
+          </DCNudge>
+        )}
+
+        <TrustBar signals={trustSignals} />
+
         <TotalInfo>
+          <OrderSummaryLabel>Order Summary</OrderSummaryLabel>
           <TotalRow>
-            <span>Total:</span>
+            <span>Subtotal:</span>
             <span>${formatPrice(total)}</span>
           </TotalRow>
           {dcTotal > 0 && (
@@ -165,11 +228,21 @@ export const CartView: React.FC<ICartViewProps> = ({
               <span>{dcTotal.toLocaleString()} DC</span>
             </TotalRow>
           )}
+          <TotalRow $isTotal>
+            <span>Total:</span>
+            <span>${formatPrice(total)}</span>
+          </TotalRow>
+          {paymentMethodLabel && (
+            <PaymentMethodRow>
+              <span>Paying with:</span>
+              <span>{paymentMethodLabel}</span>
+            </PaymentMethodRow>
+          )}
           {error && <ErrorMessage>{error}</ErrorMessage>}
         </TotalInfo>
         <CTAButton
           icon={<FaShoppingBag />}
-          label={isLoading ? 'Processing...' : 'Complete Purchase'}
+          label={isLoading ? 'Processing...' : `Pay $${formatPrice(total)}`}
           onClick={handlePurchase}
           fullWidth
           disabled={cartItems.length === 0 || isLoading}
@@ -221,26 +294,6 @@ const CartItems = styled.div`
   flex: 1;
   min-height: 200px;
   padding-right: 0.5rem;
-
-  /* Custom scrollbar styling */
-  &::-webkit-scrollbar {
-    width: 8px;
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.3);
-    }
-  }
-
-  /* Firefox scrollbar styling */
-  scrollbar-width: thin;
-  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.2);
 `;
 
 const EmptyCart = styled.div`
@@ -310,20 +363,77 @@ const TotalInfo = styled.div`
   gap: 0.5rem;
 `;
 
-const TotalRow = styled.div`
+const OrderSummaryLabel = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem;
+  color: rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
+`;
+
+const TotalRow = styled.div<{ $isTotal?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   font-family: 'Press Start 2P', cursive;
-  font-size: 1rem;
-  color: #ffffff;
+  font-size: ${p => p.$isTotal ? '1rem' : '0.75rem'};
+  color: ${p => p.$isTotal ? '#ffffff' : 'rgba(255,255,255,0.7)'};
+  ${p => p.$isTotal && `
+    padding-top: 0.5rem;
+    border-top: 1px solid rgba(255,255,255,0.15);
+    margin-top: 0.25rem;
+  `}
 
   span:last-child {
     color: #fef08a;
   }
 `;
 
+const PaymentMethodRow = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.5);
+  margin-top: 0.25rem;
+
+  span:last-child {
+    color: rgba(255, 255, 255, 0.8);
+  }
+`;
+
+const DCNudge = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: rgba(245, 158, 11, 0.1);
+  border: 1px solid rgba(245, 158, 11, 0.3);
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.45rem;
+  color: #fbbf24;
+  transition: background 0.15s;
+
+  &:hover {
+    background: rgba(245, 158, 11, 0.18);
+  }
+
+  svg { flex-shrink: 0; font-size: 0.7rem; }
+  span { flex: 1; }
+`;
+
+const DCNudgeLink = styled.span`
+  color: #f59e0b;
+  white-space: nowrap;
+  text-decoration: underline;
+`;
+
 const ErrorMessage = styled.div`
   color: #ef4444;
   font-size: 0.875rem;

package/src/components/Store/CountdownTimer.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import styled, { keyframes } from 'styled-components';
+
+export interface ICountdownTimerProps {
+  endsAt: string;
+  onExpired?: () => void;
+  size?: 'small' | 'default';
+}
+
+interface ITimeLeft {
+  days: number;
+  hours: number;
+  minutes: number;
+  seconds: number;
+  expired: boolean;
+}
+
+function calcTimeLeft(endsAt: string): ITimeLeft {
+  const diff = new Date(endsAt).getTime() - Date.now();
+  if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0, expired: true };
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((diff % (1000 * 60)) / 1000);
+  return { days, hours, minutes, seconds, expired: false };
+}
+
+export const CountdownTimer: React.FC<ICountdownTimerProps> = ({ endsAt, onExpired, size = 'default' }) => {
+  const [timeLeft, setTimeLeft] = useState<ITimeLeft>(() => calcTimeLeft(endsAt));
+
+  useEffect(() => {
+    if (timeLeft.expired) {
+      onExpired?.();
+      return;
+    }
+    const id = setInterval(() => {
+      const next = calcTimeLeft(endsAt);
+      setTimeLeft(next);
+      if (next.expired) {
+        clearInterval(id);
+        onExpired?.();
+      }
+    }, 1000);
+    return () => clearInterval(id);
+  }, [endsAt, onExpired]);
+
+  if (timeLeft.expired) {
+    return <ExpiredLabel $size={size}>EXPIRED</ExpiredLabel>;
+  }
+
+  const parts: string[] = [];
+  if (timeLeft.days > 0) parts.push(`${timeLeft.days}d`);
+  parts.push(`${String(timeLeft.hours).padStart(2, '0')}h`);
+  parts.push(`${String(timeLeft.minutes).padStart(2, '0')}m`);
+  if (timeLeft.days === 0) parts.push(`${String(timeLeft.seconds).padStart(2, '0')}s`);
+
+  return (
+    <TimerLabel $size={size}>
+      ⏱ {parts.join(' ')}
+    </TimerLabel>
+  );
+};
+
+const pulse = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+`;
+
+const baseLabel = `
+  font-family: 'Press Start 2P', cursive;
+  display: inline-flex;
+  align-items: center;
+`;
+
+const TimerLabel = styled.span<{ $size: 'small' | 'default' }>`
+  ${baseLabel}
+  font-size: ${p => p.$size === 'small' ? '0.45rem' : '0.6rem'};
+  color: #fbbf24;
+  animation: ${pulse} 2s ease-in-out infinite;
+`;
+
+const ExpiredLabel = styled.span<{ $size: 'small' | 'default' }>`
+  ${baseLabel}
+  font-size: ${p => p.$size === 'small' ? '0.45rem' : '0.6rem'};
+  color: #6b7280;
+`;

package/src/components/Store/FeaturedBanner.tsx

@@ -0,0 +1,270 @@
+import React from 'react';
+import { FaBolt } from 'react-icons/fa';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { LabelPill } from '../shared/LabelPill/LabelPill';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { CountdownTimer } from './CountdownTimer';
+
+export interface IFeaturedItem {
+  key: string;
+  name: string;
+  description?: string;
+  imageUrl?: string | { src: string; default?: string };
+  texturePath?: string;
+  price: number;
+  originalPrice?: number;
+  endsAt?: string;
+  badge?: string;
+}
+
+export interface IFeaturedBannerProps {
+  items: IFeaturedItem[];
+  atlasJSON?: any;
+  atlasIMG?: string;
+  onSelectItem: (item: IFeaturedItem) => void;
+  onQuickBuy?: (item: IFeaturedItem) => void;
+}
+
+const BADGE_COLORS: Record<string, { bg: string; border: string; color: string }> = {
+  SALE:      { bg: uiColors.orange,      border: uiColors.orange,     color: '#fff' },
+  NEW:       { bg: uiColors.green,       border: uiColors.green,      color: '#fff' },
+  LIMITED:   { bg: uiColors.cardinal,    border: uiColors.cardinal,   color: '#fff' },
+  POPULAR:   { bg: uiColors.navyBlue,    border: uiColors.navyBlue,   color: '#fff' },
+  EVENT:     { bg: uiColors.purple,      border: uiColors.purple,     color: '#fff' },
+};
+
+function getImageSrc(imageUrl?: string | { src: string; default?: string }): string | undefined {
+  if (!imageUrl) return undefined;
+  if (typeof imageUrl === 'string') return imageUrl;
+  return imageUrl.default || imageUrl.src;
+}
+
+export const FeaturedBanner: React.FC<IFeaturedBannerProps> = ({
+  items,
+  atlasJSON,
+  atlasIMG,
+  onSelectItem,
+  onQuickBuy,
+}) => {
+  if (!items.length) return null;
+
+  return (
+    <BannerWrapper>
+      <BannerHeader>
+        <FaBolt />
+        <span>FEATURED OFFERS</span>
+      </BannerHeader>
+      <CardsRow>
+        {items.map(item => {
+          const badgeStyle = item.badge ? (BADGE_COLORS[item.badge.toUpperCase()] ?? BADGE_COLORS.SALE) : null;
+          const imgSrc = getImageSrc(item.imageUrl);
+          const canUseAtlas = atlasJSON && atlasIMG && item.texturePath && atlasJSON?.frames?.[item.texturePath];
+
+          return (
+            <FeaturedCard key={item.key} onClick={() => onSelectItem(item)}>
+              <CardImageArea>
+                {canUseAtlas ? (
+                  <SpriteFromAtlas
+                    atlasJSON={atlasJSON}
+                    atlasIMG={atlasIMG}
+                    spriteKey={item.texturePath!}
+                    width={72}
+                    height={72}
+                    imgScale={2}
+                    centered
+                  />
+                ) : imgSrc ? (
+                  <img src={imgSrc} alt={item.name} />
+                ) : (
+                  <PlaceholderIcon>?</PlaceholderIcon>
+                )}
+                {badgeStyle && (
+                  <BadgeOverlay>
+                    <LabelPill
+                      background={badgeStyle.bg}
+                      borderColor={badgeStyle.border}
+                      color={badgeStyle.color}
+                    >
+                      {item.badge}
+                    </LabelPill>
+                  </BadgeOverlay>
+                )}
+              </CardImageArea>
+
+              <CardBody>
+                <CardName>{item.name}</CardName>
+                {item.description && <CardDesc>{item.description}</CardDesc>}
+
+                <PriceRow>
+                  {item.originalPrice != null && (
+                    <OriginalPrice>${item.originalPrice.toFixed(2)}</OriginalPrice>
+                  )}
+                  <CurrentPrice $onSale={item.originalPrice != null}>
+                    ${item.price.toFixed(2)}
+                  </CurrentPrice>
+                </PriceRow>
+
+                {item.endsAt && (
+                  <CountdownTimer endsAt={item.endsAt} size="small" />
+                )}
+              </CardBody>
+
+              <CardActions onClick={e => e.stopPropagation()}>
+                {onQuickBuy && (
+                  <CTAButton
+                    icon={<FaBolt />}
+                    label="Buy Now"
+                    onClick={() => onQuickBuy(item)}
+                  />
+                )}
+              </CardActions>
+            </FeaturedCard>
+          );
+        })}
+      </CardsRow>
+    </BannerWrapper>
+  );
+};
+
+const BannerWrapper = styled.div`
+  padding: 0.5rem 1rem 0.75rem;
+  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
+  background: linear-gradient(180deg, rgba(245, 158, 11, 0.06) 0%, transparent 100%);
+`;
+
+const BannerHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem;
+  color: #f59e0b;
+  margin-bottom: 0.6rem;
+
+  svg { font-size: 0.7rem; }
+`;
+
+const CardsRow = styled.div`
+  display: flex;
+  gap: 0.75rem;
+  overflow-x: auto;
+  padding-bottom: 0.25rem;
+
+  @media (max-width: 950px) {
+    flex-direction: column;
+    overflow-x: unset;
+  }
+`;
+
+const FeaturedCard = styled.div`
+  flex: 0 0 auto;
+  width: 200px;
+  display: flex;
+  flex-direction: column;
+  background: rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(245, 158, 11, 0.35);
+  border-radius: 6px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.15s;
+
+  &:hover {
+    border-color: #f59e0b;
+    transform: translateY(-2px);
+  }
+
+  @media (max-width: 950px) {
+    width: 100%;
+    flex-direction: row;
+  }
+`;
+
+const CardImageArea = styled.div`
+  position: relative;
+  width: 100%;
+  height: 88px;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  @media (max-width: 950px) {
+    width: 88px;
+    height: 88px;
+  }
+`;
+
+const BadgeOverlay = styled.div`
+  position: absolute;
+  top: 4px;
+  left: 4px;
+`;
+
+const PlaceholderIcon = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 1.5rem;
+  color: rgba(255,255,255,0.2);
+`;
+
+const CardBody = styled.div`
+  padding: 0.5rem 0.6rem 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  flex: 1;
+`;
+
+const CardName = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const CardDesc = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.45rem;
+  color: rgba(255,255,255,0.6);
+  line-height: 1.4;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+
+const PriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+`;
+
+const OriginalPrice = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.45rem;
+  color: rgba(255,255,255,0.4);
+  text-decoration: line-through;
+`;
+
+const CurrentPrice = styled.span<{ $onSale: boolean }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  color: ${p => p.$onSale ? '#4ade80' : '#fef08a'};
+`;
+
+const CardActions = styled.div`
+  padding: 0.4rem 0.6rem 0.6rem;
+  display: flex;
+  gap: 0.4rem;
+  justify-content: flex-end;
+`;