@rpg-engine/long-bow 0.8.7 → 0.8.9

package/src/components/Store/StoreItemDetails.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { FaArrowLeft, FaCartPlus } from 'react-icons/fa';
+import styled from 'styled-components';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { IItemPack, IStoreItem } from './StoreTypes';
+
+interface IStoreItemDetailsProps {
+  item: IStoreItem | (IItemPack & { name: string; texturePath: string });
+  imageUrl: string | { src: string; default?: string };
+  onBack: () => void;
+  onAddToCart: (item: IStoreItem) => void;
+}
+
+export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
+  item,
+  onBack,
+  onAddToCart,
+  imageUrl,
+}) => {
+  const getImageSrc = () => {
+    if (!imageUrl) return '/placeholder-thumbnail.png';
+    if (typeof imageUrl === 'string') return imageUrl;
+    return (
+      (imageUrl as { default?: string; src: string }).default ||
+      (imageUrl as { src: string }).src
+    );
+  };
+
+  return (
+    <Container>
+      <Header>
+        <BackButton onClick={onBack}>
+          <FaArrowLeft />
+          <span>Back</span>
+        </BackButton>
+      </Header>
+
+      <Content>
+        <DetailsGrid>
+          <ItemIcon>
+            <img src={getImageSrc()} alt={item.name} />
+          </ItemIcon>
+          <ItemInfo>
+            <ItemName>{item.name}</ItemName>
+            <ItemPrice>
+              ${'priceUSD' in item ? item.priceUSD : item.price}
+            </ItemPrice>
+            <Description>{item.description}</Description>
+          </ItemInfo>
+        </DetailsGrid>
+
+        <Actions>
+          <CTAButton
+            icon={<FaCartPlus />}
+            label="Add to Cart"
+            onClick={() => onAddToCart(item as IStoreItem)}
+            fullWidth
+          />
+        </Actions>
+      </Content>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  height: 100%;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+`;
+
+const BackButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: none;
+  border: none;
+  color: #ffffff;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.875rem;
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: opacity 0.2s;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;
+
+const Content = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  overflow-y: auto;
+`;
+
+const DetailsGrid = styled.div`
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 2rem;
+  align-items: start;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const ItemIcon = styled.div`
+  width: 100%;
+  aspect-ratio: 1;
+  background: rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  border-radius: 4px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+`;
+
+const ItemInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+const ItemName = styled.h2`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 1.25rem;
+  color: #fef08a;
+`;
+
+const ItemPrice = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 1rem;
+  color: #fef08a;
+`;
+
+const Description = styled.p`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #ffffff;
+`;
+
+const Actions = styled.div`
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+`;

package/src/components/Store/StoreItemRow.tsx

@@ -1,8 +1,9 @@
 import { UserAccountTypes } from '@rpg-engine/shared';
 import React, { useState } from 'react';
+import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
-import { Button, ButtonTypes } from '../Button';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { IStoreItem } from './StoreTypes';
 
@@ -10,8 +11,7 @@ interface IStoreItemRowProps {
   item: IStoreItem;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
-  onPurchase: (item: IStoreItem, quantity: number) => void;
-  userGold: number;
+  onAddToCart: (item: IStoreItem, quantity: number) => void;
   userAccountType: UserAccountTypes;
 }
 
@@ -19,50 +19,37 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   item,
   atlasJSON,
   atlasIMG,
-  onPurchase,
-  userGold,
+  onAddToCart,
   userAccountType,
 }) => {
   const [quantity, setQuantity] = useState(1);
 
   const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = parseInt(e.target.value) || 1;
-    setQuantity(Math.min(Math.max(1, value), item.stock));
+    setQuantity(Math.min(Math.max(1, value), 99));
   };
 
   const handleBlur = () => {
     if (quantity < 1) setQuantity(1);
-    if (quantity > item.stock) setQuantity(item.stock);
+    if (quantity > 99) setQuantity(99);
   };
 
-  const incrementQuantity = (amount = 1) => {
-    setQuantity(prev => Math.min(prev + amount, item.stock));
+  const incrementQuantity = () => {
+    setQuantity(prev => Math.min(prev + 1, 99));
   };
 
-  const decrementQuantity = (amount = 1) => {
-    setQuantity(prev => Math.max(1, prev - amount));
+  const decrementQuantity = () => {
+    setQuantity(prev => Math.max(1, prev - 1));
   };
 
-  const canAfford = userGold >= item.price * quantity;
   const hasRequiredAccount =
     !item.requiredAccountType?.length ||
     item.requiredAccountType.includes(userAccountType);
 
-  const renderAccountTypeIndicator = () => {
-    if (!item.requiredAccountType?.length) return null;
-
-    return (
-      <span>
-        {item.requiredAccountType
-          .map(type => {
-            const typeName = String(type).toLowerCase();
-            return typeName.includes('premium')
-              ? typeName.replace('premium', '')
-              : typeName;
-          })
-          .join('/')}
-      </span>
-    );
+  const handleAddToCart = () => {
+    if (!hasRequiredAccount) return;
+    onAddToCart(item, quantity);
+    setQuantity(1); // Reset quantity after adding to cart
   };
 
   return (
@@ -81,16 +68,14 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
 
       <ItemDetails>
         <ItemName>{item.name}</ItemName>
-        <ItemPrice>
-          Price: {item.price} gold {renderAccountTypeIndicator()}
-        </ItemPrice>
+        <ItemPrice>${item.price}</ItemPrice>
       </ItemDetails>
 
       <Controls>
         <ArrowsContainer>
           <SelectArrow
             direction="left"
-            onPointerDown={() => decrementQuantity()}
+            onPointerDown={decrementQuantity}
             size={24}
           />
 
@@ -100,24 +85,23 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
             onChange={handleQuantityChange}
             onBlur={handleBlur}
             min={1}
-            max={item.stock}
+            max={99}
             className="rpgui-input"
           />
 
           <SelectArrow
             direction="right"
-            onPointerDown={() => incrementQuantity()}
+            onPointerDown={incrementQuantity}
             size={24}
           />
         </ArrowsContainer>
 
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          disabled={!canAfford || !hasRequiredAccount}
-          onClick={() => onPurchase(item, quantity)}
-        >
-          Purchase
-        </Button>
+        <CTAButton
+          icon={<FaCartPlus />}
+          label="Add"
+          onClick={handleAddToCart}
+          disabled={!hasRequiredAccount}
+        />
       </Controls>
     </ItemWrapper>
   );

package/src/components/Store/StoreTypes.ts

@@ -2,20 +2,54 @@ import { IItem, UserAccountTypes } from '@rpg-engine/shared';
 
 export interface IStoreItem extends Omit<IItem, 'canSell'> {
   price: number;
-  stock: number;
   requiredAccountType?: UserAccountTypes[];
-  canSell: boolean;
+  key: string;
+  name: string;
+  texturePath: string;
+}
+
+export interface ICartItem {
+  item: IStoreItem;
+  quantity: number;
+}
+
+export interface IItemPack {
+  key: string;
+  title: string;
+  description: string;
+  priceUSD: number;
+  image: {
+    src: string;
+    default?: string;
+  };
 }
 
 export interface IStoreProps {
   items: IStoreItem[];
+  packs?: IItemPack[];
   atlasJSON: Record<string, any>;
   atlasIMG: string;
-  onPurchase: (item: IStoreItem, quantity: number) => void;
-  userGold: number;
+  onPurchase: (purchase: IPurchase) => void;
   userAccountType: UserAccountTypes;
   loading?: boolean;
   error?: string;
   initialSearchQuery?: string;
   onClose?: () => void;
 }
+
+export enum PurchaseType {
+  PremiumAccount = 'PremiumAccount',
+  Item = 'Item',
+  Pack = 'Pack',
+}
+
+export interface IPurchaseUnit {
+  purchaseKey: string;
+  qty: number;
+  type: PurchaseType;
+  name: string; // Adding name for better identification
+}
+
+export interface IPurchase {
+  purchases: IPurchaseUnit[];
+}

package/src/components/Store/hooks/useStoreCart.ts

@@ -0,0 +1,121 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  ICartItem,
+  IItemPack,
+  IPurchase,
+  IPurchaseUnit,
+  IStoreItem,
+  PurchaseType,
+} from '../StoreTypes';
+
+interface IUseStoreCart {
+  cartItems: ICartItem[];
+  isCartOpen: boolean;
+  handleAddToCart: (item: IStoreItem, quantity: number) => void;
+  handleRemoveFromCart: (itemKey: string) => void;
+  handlePurchase: (onPurchase: (purchase: IPurchase) => void) => void;
+  openCart: () => void;
+  closeCart: () => void;
+  getTotalItems: () => number;
+  getTotalPrice: () => number;
+}
+
+export const useStoreCart = (): IUseStoreCart => {
+  const [cartItems, setCartItems] = useState<ICartItem[]>([]);
+  const [isCartOpen, setIsCartOpen] = useState(false);
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  const handleAddToCart = (item: IStoreItem, quantity: number) => {
+    setCartItems(prevItems => {
+      const existingItem = prevItems.find(
+        cartItem => cartItem.item.key === item.key
+      );
+
+      if (existingItem) {
+        return prevItems.map(cartItem =>
+          cartItem.item.key === item.key
+            ? {
+                ...cartItem,
+                quantity: Math.min(cartItem.quantity + quantity, 99),
+              }
+            : cartItem
+        );
+      }
+
+      return [...prevItems, { item, quantity }];
+    });
+  };
+
+  const handleRemoveFromCart = (itemKey: string) => {
+    setCartItems(prevItems =>
+      prevItems.filter(cartItem => cartItem.item.key !== itemKey)
+    );
+  };
+
+  const handlePurchase = (onPurchase: (purchase: IPurchase) => void) => {
+    const purchaseUnits: IPurchaseUnit[] = cartItems.map(cartItem => {
+      const isPack =
+        'priceUSD' in cartItem.item &&
+        typeof cartItem.item.priceUSD === 'number';
+
+      if (isPack) {
+        const packItem = cartItem.item as IStoreItem & IItemPack;
+        return {
+          purchaseKey: packItem.key,
+          qty: cartItem.quantity,
+          type: PurchaseType.Pack,
+          name: packItem.title,
+        };
+      }
+
+      return {
+        purchaseKey: cartItem.item.key,
+        qty: cartItem.quantity,
+        type: PurchaseType.Item,
+        name: cartItem.item.name,
+      };
+    });
+
+    const purchase: IPurchase = {
+      purchases: purchaseUnits,
+    };
+
+    onPurchase(purchase);
+
+    if (isMounted.current) {
+      setCartItems([]);
+      setIsCartOpen(false);
+    }
+  };
+
+  const openCart = () => setIsCartOpen(true);
+  const closeCart = () => setIsCartOpen(false);
+
+  const getTotalItems = () =>
+    cartItems.reduce((sum, item) => sum + item.quantity, 0);
+
+  const getTotalPrice = () =>
+    Number(
+      cartItems
+        .reduce((sum, item) => sum + item.item.price * item.quantity, 0)
+        .toFixed(2)
+    );
+
+  return {
+    cartItems,
+    isCartOpen,
+    handleAddToCart,
+    handleRemoveFromCart,
+    handlePurchase,
+    openCart,
+    closeCart,
+    getTotalItems,
+    getTotalPrice,
+  };
+};

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

@@ -0,0 +1,52 @@
+import { UserAccountTypes } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
+import { StoreItemRow } from '../StoreItemRow';
+import { IStoreItem } from '../StoreTypes';
+
+interface IStoreItemsSectionProps {
+  items: IStoreItem[];
+  onAddToCart: (item: IStoreItem, quantity: number) => void;
+  atlasJSON: Record<string, any>;
+  atlasIMG: string;
+  userAccountType?: UserAccountTypes;
+}
+
+export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
+  items,
+  onAddToCart,
+  atlasJSON,
+  atlasIMG,
+  userAccountType,
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredItems = items.filter(item =>
+    item.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const renderStoreItem = (item: IStoreItem) => (
+    <StoreItemRow
+      item={item}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      onAddToCart={onAddToCart}
+      userAccountType={userAccountType || UserAccountTypes.Free}
+    />
+  );
+
+  return (
+    <ScrollableContent
+      items={filteredItems}
+      renderItem={renderStoreItem}
+      emptyMessage="No items available."
+      searchOptions={{
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: 'Search items...',
+      }}
+      layout="list"
+      maxHeight="400px"
+    />
+  );
+};

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

@@ -0,0 +1,89 @@
+import React, { useCallback, useMemo, useState } from 'react';
+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 { IItemPack } from '../StoreTypes';
+
+interface IStorePacksSectionProps {
+  packs: IItemPack[];
+  onAddToCart: (pack: IItemPack) => void;
+  onSelectPack?: (pack: IItemPack) => void;
+}
+
+export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
+  packs,
+  onAddToCart,
+  onSelectPack,
+}) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const renderPackFooter = useCallback(
+    (pack: IItemPack) => (
+      <FooterContainer>
+        <Price>${pack.priceUSD}</Price>
+        <CTAButton
+          icon={<FaCartPlus />}
+          label="Add"
+          onClick={e => {
+            e.stopPropagation();
+            onAddToCart(pack);
+          }}
+        />
+      </FooterContainer>
+    ),
+    [onAddToCart]
+  );
+
+  const renderPack = useCallback(
+    (pack: IItemPack) => (
+      <ShoppingCardHorizontal
+        key={pack.key}
+        title={pack.title}
+        description={pack.description}
+        imageUrl={pack.image}
+        footer={renderPackFooter(pack)}
+        onClick={() => onSelectPack?.(pack)}
+      />
+    ),
+    [onSelectPack, renderPackFooter]
+  );
+
+  const filteredPacks = useMemo(
+    () =>
+      packs.filter(pack =>
+        pack.title.toLowerCase().includes(searchQuery.toLowerCase())
+      ),
+    [packs, searchQuery]
+  );
+
+  return (
+    <ScrollableContent
+      items={filteredPacks}
+      renderItem={renderPack}
+      emptyMessage="No packs available."
+      searchOptions={{
+        value: searchQuery,
+        onChange: setSearchQuery,
+        placeholder: 'Search packs...',
+      }}
+      layout="grid"
+      gridColumns={2}
+      maxHeight="420px"
+    />
+  );
+};
+
+const FooterContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+`;
+
+const Price = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  color: #fef08a;
+`;