@rpg-engine/long-bow 0.8.7 → 0.8.9

package/src/components/Store/CartView.tsx

@@ -0,0 +1,271 @@
+import React, { useState } from 'react';
+import { FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
+import styled from 'styled-components';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { IStoreItem } from './StoreTypes';
+
+interface ICartViewProps {
+  cartItems: { item: IStoreItem; quantity: number }[];
+  onRemoveFromCart: (itemKey: string) => void;
+  onClose: () => void;
+  onPurchase: () => Promise<boolean>;
+  atlasJSON: Record<string, any>;
+  atlasIMG: string;
+}
+
+export const CartView: React.FC<ICartViewProps> = ({
+  cartItems,
+  onRemoveFromCart,
+  onClose,
+  onPurchase,
+  atlasJSON,
+  atlasIMG,
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const total = cartItems.reduce(
+    (sum, cartItem) => sum + cartItem.item.price * cartItem.quantity,
+    0
+  );
+
+  const formatPrice = (price: number) => price.toFixed(2);
+
+  const handlePurchase = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const success = await onPurchase();
+
+      if (!success) {
+        setError('Purchase failed. Please try again.');
+      }
+    } catch (err) {
+      setError('An error occurred during purchase. Please try again.');
+      console.error('Purchase error:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container>
+      <Header>
+        <Title>Shopping Cart</Title>
+        <CloseButton onPointerDown={onClose}>
+          <FaTimes />
+        </CloseButton>
+      </Header>
+
+      <CartItems>
+        {cartItems.length === 0 ? (
+          <EmptyCart>Your cart is empty</EmptyCart>
+        ) : (
+          cartItems.map(cartItem => (
+            <CartItemRow key={cartItem.item.key}>
+              <ItemIconContainer>
+                <SpriteFromAtlas
+                  atlasJSON={atlasJSON}
+                  atlasIMG={atlasIMG}
+                  spriteKey={cartItem.item.texturePath}
+                  width={32}
+                  height={32}
+                  imgScale={2}
+                  centered
+                />
+              </ItemIconContainer>
+              <ItemDetails>
+                <ItemName>{cartItem.item.name}</ItemName>
+                <ItemInfo>
+                  <span>${formatPrice(cartItem.item.price)}</span>
+                  <span>×</span>
+                  <span>{cartItem.quantity}</span>
+                  <span>=</span>
+                  <span>
+                    ${formatPrice(cartItem.item.price * cartItem.quantity)}
+                  </span>
+                </ItemInfo>
+              </ItemDetails>
+
+              <CTAButton
+                icon={<FaTrash />}
+                onClick={e => {
+                  e.stopPropagation();
+                  onRemoveFromCart(cartItem.item.key);
+                }}
+              />
+            </CartItemRow>
+          ))
+        )}
+      </CartItems>
+
+      <Footer>
+        <TotalInfo>
+          <TotalRow>
+            <span>Total:</span>
+            <span>${formatPrice(total)}</span>
+          </TotalRow>
+          {error && <ErrorMessage>{error}</ErrorMessage>}
+        </TotalInfo>
+        <CTAButton
+          icon={<FaShoppingBag />}
+          label={isLoading ? 'Processing...' : 'Complete Purchase'}
+          onClick={handlePurchase}
+          fullWidth
+          disabled={cartItems.length === 0 || isLoading}
+        />
+      </Footer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 1.5rem;
+  padding: 1.5rem;
+`;
+
+const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const Title = styled.h2`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 1rem;
+  color: #ffffff;
+  margin: 0;
+`;
+
+const CloseButton = styled.div`
+  padding: 0.5rem;
+  min-width: unset;
+  width: 42px;
+  height: 42px;
+  display: flex;
+  font-size: 1.5rem;
+  align-items: center;
+  color: white;
+  justify-content: center;
+`;
+
+const CartItems = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  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`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #ffffff;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.875rem;
+  opacity: 0.7;
+`;
+
+const CartItemRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+`;
+
+const ItemIconContainer = styled.div`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 4px;
+`;
+
+const ItemDetails = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const ItemName = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.875rem;
+  color: #ffffff;
+`;
+
+const ItemInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: #fef08a;
+`;
+
+const Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+`;
+
+const TotalInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+`;
+
+const TotalRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.875rem;
+  color: #ffffff;
+
+  span:last-child {
+    color: #fef08a;
+  }
+`;
+
+const ErrorMessage = styled.div`
+  color: #ef4444;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
+  text-align: center;
+`;

package/src/components/Store/Store.tsx

@@ -1,63 +1,91 @@
-import { ItemType } from '@rpg-engine/shared';
+import { ItemRarities, ItemSubType, ItemType } from '@rpg-engine/shared';
 import React, { useMemo, useState } from 'react';
+import { FaShoppingCart } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
-import { SearchBar } from '../shared/SearchBar/SearchBar';
-
-import { StoreTabContent } from './StoreTabContent';
-import { IStoreItem, IStoreProps } from './StoreTypes';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { CartView } from './CartView';
+import { useStoreCart } from './hooks/useStoreCart';
+import { StoreItemsSection } from './sections/StoreItemsSection';
+import { StorePacksSection } from './sections/StorePacksSection';
+import { StoreItemDetails } from './StoreItemDetails';
+import { IItemPack, IStoreItem, IStoreProps } from './StoreTypes';
 
 export const Store: React.FC<IStoreProps> = ({
   items,
+  packs = [],
   atlasJSON,
   atlasIMG,
   onPurchase,
-  userGold,
   userAccountType,
   loading = false,
   error,
-  initialSearchQuery = '',
   onClose,
 }) => {
-  const [activeTab, setActiveTab] = useState('all');
-  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
+  const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
+  const [activeTab, setActiveTab] = useState('premium');
+  const {
+    cartItems,
+    handleAddToCart,
+    handleRemoveFromCart,
+    handlePurchase: handleCartPurchase,
+    openCart,
+    closeCart,
+    getTotalItems,
+    getTotalPrice,
+    isCartOpen,
+  } = useStoreCart();
+
+  const handleAddPackToCart = (pack: IItemPack) => {
+    const packItem: IStoreItem = {
+      _id: pack.key,
+      key: pack.key,
+      name: pack.title,
+      price: pack.priceUSD,
+      texturePath: pack.image.default || pack.image.src,
+      textureKey: pack.image.default || pack.image.src,
+      type: ItemType.Consumable,
+      subType: ItemSubType.Other,
+      description: pack.description || '',
+      fullDescription: pack.description || '',
+      textureAtlas: 'items',
+      weight: 0,
+      rarity: ItemRarities.Common,
+      allowedEquipSlotType: [],
+      isEquipable: false,
+      isStackable: false,
+      isTwoHanded: false,
+      hasUseWith: false,
+      maxStackSize: 1,
+      isUsable: false,
+      isStorable: true,
+      isSolid: false,
+      isItemContainer: false,
+    };
+    handleAddToCart(packItem, 1);
+  };
 
   const filterItems = (
     itemsToFilter: IStoreItem[],
-    type: ItemType | 'premium' | 'all'
+    type: 'items' | 'premium'
   ): IStoreItem[] => {
     return itemsToFilter.filter(item => {
-      const matchesSearch = item.name
-        .toLowerCase()
-        .includes(searchQuery.toLowerCase());
-
-      if (!matchesSearch) return false;
-
-      switch (type) {
-        case ItemType.Weapon:
-          return item.type === ItemType.Weapon;
-        case ItemType.Consumable:
-          return item.type === ItemType.Consumable;
-        case 'premium':
-          return item.requiredAccountType?.length ?? 0 > 0;
-        default:
-          return true;
+      if (type === 'premium') {
+        return item.requiredAccountType?.length ?? 0 > 0;
       }
+      return true;
     });
   };
 
-  // Memoize filtered items for each tab to prevent unnecessary recalculations
   const filteredItems = useMemo(
     () => ({
-      all: filterItems(items, 'all'),
-      weapons: filterItems(items, ItemType.Weapon),
-      consumables: filterItems(items, ItemType.Consumable),
+      items: filterItems(items, 'items'),
       premium: filterItems(items, 'premium'),
     }),
-    [items, searchQuery]
+    [items]
   );
 
   if (loading) {
@@ -70,62 +98,37 @@ export const Store: React.FC<IStoreProps> = ({
 
   const tabs = [
     {
-      id: 'all',
-      title: 'All',
+      id: 'premium',
+      title: 'Premium',
       content: (
-        <StoreTabContent
-          items={filteredItems.all}
-          atlasJSON={atlasJSON}
-          atlasIMG={atlasIMG}
-          onPurchase={onPurchase}
-          userGold={userGold}
-          userAccountType={userAccountType}
-          tabId="all"
+        <StorePacksSection
+          packs={packs.filter(pack => pack.priceUSD >= 9.99)}
+          onAddToCart={handleAddPackToCart}
+          onSelectPack={setSelectedPack}
         />
       ),
     },
     {
-      id: 'weapons',
-      title: 'Weapons',
+      id: 'packs',
+      title: 'Packs',
       content: (
-        <StoreTabContent
-          items={filteredItems.weapons}
-          atlasJSON={atlasJSON}
-          atlasIMG={atlasIMG}
-          onPurchase={onPurchase}
-          userGold={userGold}
-          userAccountType={userAccountType}
-          tabId="weapons"
+        <StorePacksSection
+          packs={packs.filter(pack => pack.priceUSD < 9.99)}
+          onAddToCart={handleAddPackToCart}
+          onSelectPack={setSelectedPack}
         />
       ),
     },
     {
-      id: 'consumables',
-      title: 'Consumables',
+      id: 'items',
+      title: 'Items',
       content: (
-        <StoreTabContent
-          items={filteredItems.consumables}
+        <StoreItemsSection
+          items={filteredItems.items}
+          onAddToCart={handleAddToCart}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
-          onPurchase={onPurchase}
-          userGold={userGold}
           userAccountType={userAccountType}
-          tabId="consumables"
-        />
-      ),
-    },
-    {
-      id: 'premium',
-      title: 'Premium',
-      content: (
-        <StoreTabContent
-          items={filteredItems.premium}
-          atlasJSON={atlasJSON}
-          atlasIMG={atlasIMG}
-          onPurchase={onPurchase}
-          userGold={userGold}
-          userAccountType={userAccountType}
-          tabId="premium"
         />
       ),
     },
@@ -135,29 +138,82 @@ export const Store: React.FC<IStoreProps> = ({
     <DraggableContainer
       title="Store"
       onCloseButton={onClose}
-      width="800px"
+      width="850px"
       minWidth="600px"
+      height="auto"
       type={RPGUIContainerTypes.Framed}
+      cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails']"
     >
-      <Container>
-        <SearchContainer>
-          <StyledSearchBar
-            value={searchQuery}
-            onChange={setSearchQuery}
-            placeholder="Search items..."
-          />
-        </SearchContainer>
-        <InternalTabs
-          tabs={tabs}
-          activeTextColor="#000000"
-          activeColor="#fef08a"
-          inactiveColor="#6b7280"
-          borderColor="#f59e0b"
-          hoverColor="#fef3c7"
-          activeTab={activeTab}
-          onTabChange={setActiveTab}
+      {isCartOpen ? (
+        <CartView
+          cartItems={cartItems}
+          onRemoveFromCart={handleRemoveFromCart}
+          onClose={closeCart}
+          onPurchase={async () => {
+            await handleCartPurchase(onPurchase);
+            return true;
+          }}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+        />
+      ) : selectedPack ? (
+        <StoreItemDetails
+          item={{
+            ...selectedPack,
+            name: selectedPack.title,
+            texturePath: selectedPack.image.default || selectedPack.image.src,
+          }}
+          imageUrl={selectedPack.image}
+          onBack={() => setSelectedPack(null)}
+          onAddToCart={() => handleAddPackToCart(selectedPack)}
         />
-      </Container>
+      ) : (
+        <Container>
+          <TopBar>
+            <CartButton>
+              <CTAButton
+                icon={<FaShoppingCart />}
+                label={`${getTotalItems()} items ($${getTotalPrice().toFixed(
+                  2
+                )})`}
+                onClick={openCart}
+              />
+            </CartButton>
+          </TopBar>
+          <MainContent>
+            <InternalTabs
+              tabs={tabs}
+              activeTextColor="#000000"
+              activeColor="#fef08a"
+              inactiveColor="#6b7280"
+              borderColor="#f59e0b"
+              hoverColor="#fef3c7"
+              activeTab={activeTab}
+              onTabChange={setActiveTab}
+            />
+          </MainContent>
+          {cartItems.length > 0 && (
+            <Footer>
+              <CartSummary>
+                <CartInfo>
+                  <span>Items in cart:</span>
+                  <span>{getTotalItems()}</span>
+                </CartInfo>
+                <CartInfo>
+                  <span>Total:</span>
+                  <span>${getTotalPrice().toFixed(2)}</span>
+                </CartInfo>
+              </CartSummary>
+              <CTAButton
+                icon={<FaShoppingCart />}
+                label={`Proceed to Checkout ($${getTotalPrice().toFixed(2)})`}
+                onClick={openCart}
+                fullWidth
+              />
+            </Footer>
+          )}
+        </Container>
+      )}
     </DraggableContainer>
   );
 };
@@ -166,17 +222,64 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  min-height: 400px;
+  height: 100%;
   gap: 1rem;
-  padding: 1rem;
 `;
 
-const SearchContainer = styled.div`
+const TopBar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 1rem;
   padding: 0 1rem;
+  flex-shrink: 0;
 `;
 
-const StyledSearchBar = styled(SearchBar)`
-  width: 100%;
+const CartButton = styled.div`
+  min-width: fit-content;
+`;
+
+const MainContent = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+
+  .rpgui-tabs-content {
+    flex: 1;
+    overflow-y: auto;
+    padding-right: 0.5rem;
+  }
+`;
+
+const Footer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border-top: 2px solid #f59e0b;
+  background: rgba(0, 0, 0, 0.2);
+  flex-shrink: 0;
+`;
+
+const CartSummary = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const CartInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: #ffffff;
+
+  span:last-child {
+    color: #fef08a;
+  }
 `;
 
 const LoadingMessage = styled.div`