@rpg-engine/long-bow 0.8.171 → 0.8.173

package/src/components/Store/sections/StoreItemsSection.tsx

@@ -4,7 +4,7 @@ import {
   UserAccountTypes,
   ItemType,
 } from '@rpg-engine/shared';
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
@@ -12,6 +12,7 @@ import { StoreItemRow } from '../StoreItemRow';
 import { SegmentedToggle } from '../../shared/SegmentedToggle';
 import { SearchBar } from '../../shared/SearchBar/SearchBar';
 import { useStoreFiltering } from '../../../hooks/useStoreFiltering';
+import { IStoreBadge } from '../StoreBadges';
 
 interface IStoreItemsSectionProps {
   items: IProductBlueprint[];
@@ -20,19 +21,29 @@ interface IStoreItemsSectionProps {
     quantity: number,
     metadata?: Record<string, any>
   ) => void;
+  onQuickBuy?: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
   userAccountType?: UserAccountTypes;
   textInputItemKeys?: string[];
+  itemBadges?: Record<string, { badges?: IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
+  /** Fires when an item row becomes visible. Passes item and its 0-based position. */
+  onItemView?: (item: IProductBlueprint, position: number) => void;
+  /** Fires when the category filter changes. Passes new category and item count. */
+  onCategoryChange?: (category: string, itemsShown: number) => void;
 }
 
 export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   items,
   onAddToCart,
+  onQuickBuy,
   atlasJSON,
   atlasIMG,
   userAccountType,
   textInputItemKeys = [],
+  itemBadges = {},
+  onItemView,
+  onCategoryChange,
 }) => {
   const {
     searchQuery,
@@ -43,7 +54,14 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
     filteredItems,
   } = useStoreFiltering(items);
 
+  // Fire category change event when the filter changes
+  useEffect(() => {
+    onCategoryChange?.(selectedCategory, filteredItems.length);
+  }, [selectedCategory, filteredItems.length]);
+
   const renderStoreItem = (item: IProductBlueprint) => {
+    const meta = itemBadges[item.key];
+    const position = filteredItems.indexOf(item);
     // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return (
@@ -66,8 +84,12 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           onAddToCart={onAddToCart}
+          onQuickBuy={onQuickBuy}
           userAccountType={userAccountType || UserAccountTypes.Free}
           showTextInput
+          onView={onItemView}
+          positionInList={position}
+          {...meta}
         />
       );
     }
@@ -79,7 +101,11 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
         atlasJSON={atlasJSON}
         atlasIMG={atlasIMG}
         onAddToCart={onAddToCart}
+        onQuickBuy={onQuickBuy}
         userAccountType={userAccountType || UserAccountTypes.Free}
+        onView={onItemView}
+        positionInList={position}
+        {...meta}
       />
     );
   };

package/src/components/Store/sections/StorePacksSection.tsx

@@ -1,6 +1,6 @@
 import { IItemPack } from '@rpg-engine/shared';
-import React, { useCallback } from 'react';
-import { FaCartPlus } from 'react-icons/fa';
+import React, { useCallback, useEffect } from 'react';
+import { FaBolt, FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
 import { ItemRowWrapper } from '../../shared/ItemRowWrapper';
@@ -9,29 +9,55 @@ import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableCont
 import { SelectArrow } from '../../Arrow/SelectArrow';
 import { usePackFiltering } from '../../../hooks/usePackFiltering';
 import { useQuantityControl } from '../../../hooks/useQuantityControl';
+import { IStoreBadge, StoreBadges } from '../StoreBadges';
 
 interface IStorePacksSectionProps {
   packs: IItemPack[];
   onAddToCart: (pack: IItemPack, quantity: number) => void;
+  onQuickBuy?: (pack: IItemPack, quantity: number) => void;
   onSelectPack?: (pack: IItemPack) => void;
   atlasJSON?: any;
   atlasIMG?: string;
+  packBadges?: Record<string, { badges?: IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
+  /** Fires once on mount per pack row — use for pack_viewed analytics. */
+  onPackView?: (pack: IItemPack, position: number) => void;
 }
 
 interface IPackRowItemProps {
   pack: IItemPack;
   onAddToCart: (pack: IItemPack, quantity: number) => void;
+  onQuickBuy?: (pack: IItemPack, quantity: number) => void;
   renderPackIcon: (pack: IItemPack) => React.ReactNode;
+  badges?: IStoreBadge[];
+  buyCount?: number;
+  viewersCount?: number;
+  saleEndsAt?: string;
+  originalPrice?: number;
+  onPackView?: (pack: IItemPack, position: number) => void;
+  positionInList?: number;
 }
 
-const PackRowItem: React.FC<IPackRowItemProps> = ({ pack, onAddToCart, renderPackIcon }) => {
+const PackRowItem: React.FC<IPackRowItemProps> = ({
+  pack, onAddToCart, onQuickBuy, renderPackIcon,
+  badges, buyCount, viewersCount, saleEndsAt, originalPrice,
+  onPackView, positionInList = 0,
+}) => {
   const { quantity, handleQuantityChange, handleBlur, incrementQuantity, decrementQuantity, resetQuantity } = useQuantityControl();
 
+  useEffect(() => {
+    onPackView?.(pack, positionInList);
+  }, []);
+
   const handleAdd = () => {
     onAddToCart(pack, quantity);
     resetQuantity();
   };
 
+  const handleQuickBuy = () => {
+    onQuickBuy?.(pack, quantity);
+    resetQuantity();
+  };
+
   return (
     <PackRow>
       <LeftSection>
@@ -41,8 +67,14 @@ const PackRowItem: React.FC<IPackRowItemProps> = ({ pack, onAddToCart, renderPac
 
         <PackDetails>
           <PackName>{pack.title}</PackName>
-          <PackPrice>${pack.priceUSD}</PackPrice>
+          <PackPriceRow>
+            {originalPrice != null && (
+              <PackOriginalPrice>${originalPrice.toFixed(2)}</PackOriginalPrice>
+            )}
+            <PackPrice $onSale={originalPrice != null}>${pack.priceUSD}</PackPrice>
+          </PackPriceRow>
           {pack.description && <PackDescription>{pack.description}</PackDescription>}
+          <StoreBadges badges={badges} buyCount={buyCount} viewersCount={viewersCount} saleEndsAt={saleEndsAt} />
         </PackDetails>
       </LeftSection>
 
@@ -60,11 +92,10 @@ const PackRowItem: React.FC<IPackRowItemProps> = ({ pack, onAddToCart, renderPac
           />
           <SelectArrow direction="right" onPointerDown={incrementQuantity} size={24} />
         </ArrowsContainer>
-        <CTAButton
-          icon={<FaCartPlus />}
-          label="Add"
-          onClick={handleAdd}
-        />
+        {onQuickBuy && (
+          <CTAButton icon={<FaBolt />} label="Buy" onClick={handleQuickBuy} iconColor="#fff" textColor="#fff" />
+        )}
+        <CTAButton icon={<FaCartPlus />} label="Add" onClick={handleAdd} pulse />
       </Controls>
     </PackRow>
   );
@@ -73,8 +104,11 @@ const PackRowItem: React.FC<IPackRowItemProps> = ({ pack, onAddToCart, renderPac
 export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   packs,
   onAddToCart,
+  onQuickBuy,
   atlasJSON,
   atlasIMG,
+  packBadges = {},
+  onPackView,
 }) => {
   const { searchQuery, setSearchQuery, filteredPacks } = usePackFiltering(packs);
 
@@ -95,15 +129,23 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   );
 
   const renderPack = useCallback(
-    (pack: IItemPack) => (
-      <PackRowItem
-        key={pack.key}
-        pack={pack}
-        onAddToCart={onAddToCart}
-        renderPackIcon={renderPackIcon}
-      />
-    ),
-    [onAddToCart, renderPackIcon]
+    (pack: IItemPack) => {
+      const meta = packBadges[pack.key];
+      const position = filteredPacks.indexOf(pack);
+      return (
+        <PackRowItem
+          key={pack.key}
+          pack={pack}
+          onAddToCart={onAddToCart}
+          onQuickBuy={onQuickBuy}
+          renderPackIcon={renderPackIcon}
+          onPackView={onPackView}
+          positionInList={position}
+          {...meta}
+        />
+      );
+    },
+    [onAddToCart, onQuickBuy, renderPackIcon, packBadges, onPackView, filteredPacks]
   );
 
   return (
@@ -127,18 +169,23 @@ const PackRow = styled(ItemRowWrapper)``;
 const LeftSection = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 1.25rem;
   flex: 1;
   min-width: 0;
 `;
 
 const PackIconContainer = styled.div`
-  width: 40px;
-  height: 40px;
+  width: 48px;
+  height: 48px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 4px;
+  box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
 
   img {
     width: 100%;
@@ -151,33 +198,50 @@ const PackDetails = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.4rem;
   min-width: 0;
 `;
 
 const PackName = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.75rem;
+  font-size: 0.875rem;
   color: #ffffff;
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
+  letter-spacing: 0.5px;
+`;
+
+const PackPriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 `;
 
-const PackPrice = styled.div`
+const PackOriginalPrice = styled.span`
   font-family: 'Press Start 2P', cursive;
   font-size: 0.625rem;
-  color: #fef08a;
+  color: rgba(255, 255, 255, 0.5);
+  text-decoration: line-through;
+`;
+
+const PackPrice = styled.div<{ $onSale?: boolean }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: ${p => p.$onSale ? '#4ade80' : '#fbbf24'};
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
 `;
 
 const PackDescription = styled.div`
   font-family: 'Press Start 2P', cursive;
   font-size: 0.625rem;
-  color: rgba(255, 255, 255, 0.7);
-  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.5;
+  margin-top: 2px;
 `;
 
 const Controls = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
   flex-shrink: 0;
 `;
 

package/src/components/shared/CTAButton/CTAButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 
 interface ICTAButtonProps {
   icon: React.ReactNode;
@@ -10,6 +10,7 @@ interface ICTAButtonProps {
   textColor?: string;
   iconColor?: string;
   disabled?: boolean;
+  pulse?: boolean;
 }
 
 export const CTAButton: React.FC<ICTAButtonProps> = ({
@@ -21,6 +22,7 @@ export const CTAButton: React.FC<ICTAButtonProps> = ({
   textColor = '#ffffff',
   iconColor = '#f59e0b',
   disabled = false,
+  pulse = false,
 }) => {
   return (
     <ButtonContainer
@@ -29,6 +31,7 @@ export const CTAButton: React.FC<ICTAButtonProps> = ({
       $fullWidth={fullWidth}
       $disabled={disabled}
       $color={textColor}
+      $pulse={pulse}
     >
       <ButtonContent>
         <IconWrapper $color={iconColor} $disabled={disabled}>
@@ -44,10 +47,24 @@ export const CTAButton: React.FC<ICTAButtonProps> = ({
   );
 };
 
+const pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(245, 158, 11, 0.8), 0 0 10px rgba(245, 158, 11, 0.5) inset;
+    border-color: #fbbf24;
+  }
+  100% {
+    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
+  }
+`;
+
 const ButtonContainer = styled.div<{
   $fullWidth: boolean;
   $disabled: boolean;
   $color: string;
+  $pulse: boolean;
 }>`
   display: inline-flex;
   align-items: center;
@@ -70,6 +87,13 @@ const ButtonContainer = styled.div<{
       justify-content: center;
     `}
 
+  ${props =>
+    props.$pulse &&
+    !props.$disabled &&
+    css`
+      animation: ${pulseAnimation} 2s infinite ease-in-out;
+    `}
+
   &:hover {
     background: ${props =>
       props.$disabled ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.4)'};

package/src/components/shared/CustomScrollbar.ts

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+
+/**
+ * A reusable CSS mixin for a sleek, thin, 4px webkit scrollbar.
+ * Drops the thick native OS scrollbar arrows and housing.
+ */
+export const customScrollbarCSS = css`
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+`;
+
+/**
+ * A basic div wrapper that applies the custom scrollbar style and guarantees overflow-y.
+ */
+export const CustomScrollbarContainer = styled.div`
+  ${customScrollbarCSS}
+  overflow-y: auto;
+  overflow-x: hidden;
+`;

package/src/components/shared/ItemRowWrapper.tsx

@@ -4,19 +4,33 @@ export const ItemRowWrapper = styled.div<{ $isHighlighted?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.6rem 1rem;
-  margin-bottom: 4px;
-  background: ${p => p.$isHighlighted ? 'rgba(255, 215, 0, 0.08)' : 'rgba(0, 0, 0, 0.25)'};
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 6px;
-  border-left: 4px solid ${p => p.$isHighlighted ? '#ffd700' : 'transparent'};
-  transition: all 0.2s ease-in-out;
+  padding: 0.6rem 0.8rem;
+  margin-bottom: 6px;
+  background: ${p => p.$isHighlighted ? 'linear-gradient(to right, rgba(255, 215, 0, 0.15), rgba(0, 0, 0, 0.4))' : 'linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25))'};
+  border: 1px solid ${p => p.$isHighlighted ? 'rgba(255, 215, 0, 0.4)' : 'rgba(255, 255, 255, 0.1)'};
+  border-radius: 8px;
+  border-left: 4px solid ${p => p.$isHighlighted ? '#fbbf24' : 'rgba(255, 255, 255, 0.2)'};
+  box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.2);
+  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  position: relative;
+  overflow: hidden;
+
+  /* Subtle inner glow for premium feel */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    pointer-events: none;
+  }
 
   &:hover {
-    background: rgba(245, 158, 11, 0.08);
-    border-color: rgba(245, 158, 11, 0.2);
-    border-left-color: #f59e0b;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    transform: translateY(-1px);
+    background: ${p => p.$isHighlighted ? 'linear-gradient(to right, rgba(255, 215, 0, 0.2), rgba(0, 0, 0, 0.5))' : 'linear-gradient(to right, rgba(245, 158, 11, 0.15), rgba(0, 0, 0, 0.4))'};
+    border-color: ${p => p.$isHighlighted ? 'rgba(255, 215, 0, 0.6)' : 'rgba(245, 158, 11, 0.3)'};
+    border-left-color: ${p => p.$isHighlighted ? '#fcd34d' : '#f59e0b'};
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
+    transform: scale(1.01) translateY(-1px);
+    z-index: 10;
   }
 `;

package/src/components/shared/ScrollableContent/ScrollableContent.tsx

@@ -127,6 +127,7 @@ const Content = styled.div<{ $gridColumns: number; $maxHeight: string }>`
   overflow-y: auto;
   overflow-x: hidden;
 
+
   &.grid {
     display: grid;
     grid-template-columns: repeat(

package/src/components/shared/SpriteFromAtlas.tsx

@@ -68,7 +68,10 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
       height={height}
       hasHover={grayScale}
       onPointerDown={onPointerDown}
-      style={containerStyle}
+      style={{
+        ...(centered ? { display: 'flex', justifyContent: 'center', alignItems: 'center' } : {}),
+        ...containerStyle
+      }}
     >
       <ImgSprite
         className={`sprite-from-atlas-img ${imgClassname || ''}`}

package/src/index.tsx

@@ -67,10 +67,15 @@ export * from './components/SocialModal/SocialModal';
 export * from './components/Spellbook/Spellbook';
 export * from './components/Stepper';
 export * from './components/Store/CartView';
+export * from './components/Store/CountdownTimer';
+export * from './components/Store/FeaturedBanner';
 export * from './components/Store/hooks/useStoreCart';
 export * from './components/Store/MetadataCollector';
-export * from './components/Store/Store';
 export * from './components/Store/PaymentMethodModal';
+export * from './components/Store/PurchaseSuccess';
+export * from './components/Store/Store';
+export * from './components/Store/StoreBadges';
+export * from './components/Store/TrustBar';
 export * from './components/Table/Table';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';

package/src/stories/Features/store/FeaturedBanner.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import { FeaturedBanner } from '../../../components/Store/FeaturedBanner';
+import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
+import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
+
+const meta = {
+  title: 'Features/Store/FeaturedBanner',
+  component: FeaturedBanner,
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <RPGUIRoot>
+        <div style={{ width: 800 }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof FeaturedBanner>;
+
+export default meta;
+type Story = StoryObj<typeof FeaturedBanner>;
+
+const future = new Date(Date.now() + 2 * 60 * 60 * 1000).toISOString(); // 2 hours from now
+const nearFuture = new Date(Date.now() + 4 * 60 * 1000).toISOString();  // 4 minutes from now
+
+export const Default: Story = {
+  render: () => (
+    <FeaturedBanner
+      items={[
+        {
+          key: 'starter-pack',
+          name: 'Starter Pack',
+          description: 'Everything you need to begin your adventure',
+          price: 4.99,
+          originalPrice: 9.99,
+          badge: 'SALE',
+          endsAt: future,
+        },
+        {
+          key: 'dragon-skin',
+          name: 'Dragon Skin',
+          description: 'Rare dragon warrior appearance',
+          price: 14.99,
+          badge: 'LIMITED',
+          endsAt: nearFuture,
+        },
+        {
+          key: 'gold-pack',
+          name: 'Gold Pack',
+          description: 'Premium content bundle',
+          price: 49.99,
+          badge: 'POPULAR',
+        },
+      ]}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onSelectItem={item => console.log('Selected:', item.key)}
+      onQuickBuy={item => console.log('Quick buy:', item.key)}
+    />
+  ),
+};
+
+export const WithAtlasSprites: Story = {
+  render: () => (
+    <FeaturedBanner
+      items={[
+        {
+          key: 'atlas-item',
+          name: 'Atlas Item',
+          description: 'Rendered from sprite atlas',
+          texturePath: 'items/greater_life_potion.png',
+          price: 7.99,
+          originalPrice: 12.99,
+          badge: 'NEW',
+        },
+      ]}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onSelectItem={item => console.log('Selected:', item.key)}
+    />
+  ),
+};
+
+export const NoQuickBuy: Story = {
+  render: () => (
+    <FeaturedBanner
+      items={[
+        { key: 'item-a', name: 'Item A', price: 5.99, badge: 'EVENT' },
+        { key: 'item-b', name: 'Item B', price: 9.99, originalPrice: 14.99, badge: 'SALE' },
+      ]}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onSelectItem={item => console.log('Selected:', item.key)}
+    />
+  ),
+};
+
+export const SingleItem: Story = {
+  render: () => (
+    <FeaturedBanner
+      items={[
+        {
+          key: 'solo',
+          name: 'Ultimate Bundle',
+          description: 'The most complete pack available — everything in one',
+          price: 99.99,
+          originalPrice: 149.99,
+          badge: 'LIMITED',
+          endsAt: future,
+        },
+      ]}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onSelectItem={item => console.log('Selected:', item.key)}
+      onQuickBuy={item => console.log('Quick buy:', item.key)}
+    />
+  ),
+};