@rpg-engine/long-bow 0.8.67 → 0.8.68

package/package.json

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

package/src/components/Store/Store.tsx

@@ -1,6 +1,6 @@
-import { IItemPack, IStoreItem, IStoreProps, ItemRarities, ItemSubType, ItemType } from '@rpg-engine/shared';
+import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, UserAccountTypes } from '@rpg-engine/shared';
 import React, { useMemo, useState } from 'react';
-import { FaShoppingCart } from 'react-icons/fa';
+import { FaHistory, FaShoppingCart } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
@@ -14,12 +14,27 @@ import { StoreItemsSection } from './sections/StoreItemsSection';
 import { StorePacksSection } from './sections/StorePacksSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
+// Define IStoreProps locally as a workaround
+export interface IStoreProps {
+  items: IStoreItem[];
+  packs?: IItemPack[];
+  atlasJSON: any;
+  atlasIMG: string;
+  onPurchase: (purchase: Partial<IPurchase>) => Promise<boolean>;
+  onShowHistory?: () => void; // Add the new optional prop
+  userAccountType: UserAccountTypes;
+  loading?: boolean;
+  error?: string;
+  onClose?: () => void;
+}
+
 export const Store: React.FC<IStoreProps> = ({
   items,
   packs = [],
   atlasJSON,
   atlasIMG,
   onPurchase,
+  onShowHistory, // Destructure the new prop
   userAccountType,
   loading = false,
   error,
@@ -202,6 +217,15 @@ export const Store: React.FC<IStoreProps> = ({
       ) : (
         <Container>
           <TopBar>
+            <HistoryButton>
+              {onShowHistory && (
+                <CTAButton
+                  icon={<FaHistory />}
+                  label="History"
+                  onClick={onShowHistory}
+                />
+              )}
+            </HistoryButton>
             <CartButton>
               <CTAButton
                 icon={<FaShoppingCart />}
@@ -267,6 +291,11 @@ const TopBar = styled.div`
   margin-top: 0.5rem;
 `;
 
+const HistoryButton = styled.div`
+  min-width: fit-content;
+  margin-right: auto;
+`;
+
 const CartButton = styled.div`
   min-width: fit-content;
 `;

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

@@ -238,9 +238,11 @@ export const Default: Story = {
       items={duplicatedItems}
       packs={mockPacks}
       userAccountType={UserAccountTypes.Free}
-      onPurchase={(purchase: IPurchase) => {
+      onPurchase={(purchase: Partial<IPurchase>) => {
         console.log('Purchase details:', purchase);
+        return Promise.resolve(true);
       }}
+      onShowHistory={() => console.log('Show History clicked in story')}
       onClose={() => console.log('Store closed')}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}