@rpg-engine/long-bow 0.8.129 → 0.8.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.129",
+  "version": "0.8.131",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Store/Store.tsx

@@ -1,6 +1,6 @@
 import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
 import React, { ReactNode, useMemo, useState } from 'react';
-import { FaHistory, FaShoppingCart } from 'react-icons/fa';
+import { FaHistory, FaShoppingCart, FaWallet } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
@@ -15,7 +15,7 @@ import { StorePacksSection } from './sections/StorePacksSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
 // Define TabId union type for tab identifiers
-type TabId = 'premium' | 'packs' | 'items';
+type TabId = 'premium' | 'packs' | 'items' | 'wallet';
 
 // Define IStoreProps locally as a workaround
 export interface IStoreProps {
@@ -24,7 +24,9 @@ export interface IStoreProps {
   atlasJSON: any;
   atlasIMG: string;
   onPurchase: (purchase: Partial<IPurchase>) => Promise<boolean>;
-  onShowHistory?: () => void; // Add the new optional prop
+  onShowHistory?: () => void;
+  onShowWallet?: () => void;
+  walletLabel?: string;
   userAccountType: UserAccountTypes;
   loading?: boolean;
   error?: string;
@@ -34,6 +36,7 @@ export interface IStoreProps {
   defaultActiveTab?: TabId;
   textInputItemKeys?: string[];
   customPacksContent?: React.ReactNode;
+  customWalletContent?: React.ReactNode;
 }
 
 export const Store: React.FC<IStoreProps> = ({
@@ -42,7 +45,9 @@ export const Store: React.FC<IStoreProps> = ({
   atlasJSON,
   atlasIMG,
   onPurchase,
-  onShowHistory, // Destructure the new prop
+  onShowHistory,
+  onShowWallet,
+  walletLabel,
   userAccountType,
   loading = false,
   error,
@@ -52,6 +57,7 @@ export const Store: React.FC<IStoreProps> = ({
   defaultActiveTab,
   textInputItemKeys = [],
   customPacksContent,
+  customWalletContent,
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -151,7 +157,7 @@ export const Store: React.FC<IStoreProps> = ({
   const tabIds: TabId[] = tabOrder ?? ['premium', 'packs', 'items'];
   const availableTabIds: TabId[] = tabIds.filter(id => !(hidePremiumTab && id === 'premium'));
 
-  const tabsMap: Record<TabId, { id: TabId; title: string; content: ReactNode }> = {
+  const tabsMap: Record<string, { id: TabId; title: string; content: ReactNode }> = {
     premium: {
       id: 'premium',
       title: 'Premium',
@@ -188,6 +194,11 @@ export const Store: React.FC<IStoreProps> = ({
         />
       ),
     },
+    wallet: {
+      id: 'wallet',
+      title: 'Wallet',
+      content: customWalletContent ?? null,
+    },
   };
 
   const tabs = availableTabIds.map(id => tabsMap[id]);
@@ -235,7 +246,7 @@ export const Store: React.FC<IStoreProps> = ({
       ) : (
         <Container>
           <TopBar>
-            <HistoryButton>
+            <LeftButtons>
               {onShowHistory && (
                 <CTAButton
                   icon={<FaHistory />}
@@ -243,7 +254,14 @@ export const Store: React.FC<IStoreProps> = ({
                   onClick={onShowHistory}
                 />
               )}
-            </HistoryButton>
+              {onShowWallet && (
+                <CTAButton
+                  icon={<FaWallet />}
+                  label={walletLabel ?? 'DC Wallet'}
+                  onClick={onShowWallet}
+                />
+              )}
+            </LeftButtons>
             <CartButton>
               <CTAButton
                 icon={<FaShoppingCart />}
@@ -309,7 +327,9 @@ const TopBar = styled.div`
   margin-top: 0.5rem;
 `;
 
-const HistoryButton = styled.div`
+const LeftButtons = styled.div`
+  display: flex;
+  gap: 0.5rem;
   min-width: fit-content;
   margin-right: auto;
 `;

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

@@ -4,7 +4,6 @@ import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
-import { ShoppingCardHorizontal } from '../../shared/ShoppingCart/CartCardHorizontal';
 import { usePackFiltering } from '../../../hooks/usePackFiltering';
 
 interface IStorePacksSectionProps {
@@ -18,39 +17,39 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   onAddToCart,
   onSelectPack,
 }) => {
-  const { searchQuery, setSearchQuery, filteredPacks } = usePackFiltering(
-    packs
-  );
+  const { searchQuery, setSearchQuery, filteredPacks } = usePackFiltering(packs);
 
-  const renderPackFooter = useCallback(
-    (pack: IItemPack) => (
-      <FooterContainer>
-        <Price>${pack.priceUSD}</Price>
-        <CTAButton
-          icon={<FaCartPlus />}
-          label="Add"
-          onClick={e => {
-            e.stopPropagation();
-            onAddToCart(pack);
-          }}
-        />
-      </FooterContainer>
-    ),
-    [onAddToCart]
-  );
+  const getImageSrc = (imageUrl: IItemPack['image']): string => {
+    if (typeof imageUrl === 'string') return imageUrl;
+    return imageUrl.default || imageUrl.src;
+  };
 
   const renderPack = useCallback(
     (pack: IItemPack) => (
-      <ShoppingCardHorizontal
-        key={pack.key}
-        title={pack.title}
-        description={pack.description}
-        imageUrl={pack.image}
-        footer={renderPackFooter(pack)}
-        onClick={() => onSelectPack?.(pack)}
-      />
+      <PackRow key={pack.key} onClick={() => onSelectPack?.(pack)}>
+        <PackIconContainer>
+          <img src={getImageSrc(pack.image)} alt={pack.title} />
+        </PackIconContainer>
+
+        <PackDetails>
+          <PackName>{pack.title}</PackName>
+          <PackPrice>${pack.priceUSD}</PackPrice>
+          {pack.description && <PackDescription>{pack.description}</PackDescription>}
+        </PackDetails>
+
+        <Controls>
+          <CTAButton
+            icon={<FaCartPlus />}
+            label="Add"
+            onClick={e => {
+              e.stopPropagation();
+              onAddToCart(pack);
+            }}
+          />
+        </Controls>
+      </PackRow>
     ),
-    [onSelectPack, renderPackFooter]
+    [onSelectPack, onAddToCart]
   );
 
   return (
@@ -63,22 +62,73 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
         onChange: setSearchQuery,
         placeholder: 'Search packs...',
       }}
-      layout="grid"
-      gridColumns={2}
+      layout="list"
       maxHeight="420px"
     />
   );
 };
 
-const FooterContainer = styled.div`
+const PackRow = styled.div`
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.04);
+  }
+`;
+
+const PackIconContainer = styled.div`
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 `;
 
-const Price = styled.span`
+const PackDetails = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+`;
+
+const PackName = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.6rem;
+  font-size: 0.75rem;
+  color: #ffffff;
+`;
+
+const PackPrice = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.625rem;
   color: #fef08a;
 `;
+
+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;
+`;
+
+const Controls = styled.div`
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+`;