@rpg-engine/long-bow 0.8.162 → 0.8.163

package/package.json

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

package/src/components/Store/Store.tsx

@@ -10,6 +10,7 @@ import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { Tabs } from '../shared/Tabs';
+import { LabelPill } from '../shared/LabelPill/LabelPill';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { CartView } from './CartView';
 import { useStoreCart } from './hooks/useStoreCart';
@@ -42,6 +43,7 @@ export interface IStoreProps {
   textInputItemKeys?: string[];
   customPacksContent?: React.ReactNode;
   customWalletContent?: React.ReactNode;
+  packsBadge?: string;
 }
 
 export const Store: React.FC<IStoreProps> = ({
@@ -64,6 +66,7 @@ export const Store: React.FC<IStoreProps> = ({
   customPacksContent,
   customWalletContent,
   packsTabLabel = 'Packs',
+  packsBadge,
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -87,7 +90,7 @@ export const Store: React.FC<IStoreProps> = ({
   const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
   const [currentMetadataItem, setCurrentMetadataItem] = useState<IProductBlueprint | null>(null);
 
-  const handleAddPackToCart = (pack: IItemPack) => {
+  const handleAddPackToCart = (pack: IItemPack, quantity: number = 1) => {
     const packItem: IProductBlueprint = {
       key: pack.key,
       name: pack.title,
@@ -105,7 +108,7 @@ export const Store: React.FC<IStoreProps> = ({
       maxStackSize: 1,
       isUsable: false,
     };
-    handleAddToCart(packItem, 1);
+    handleAddToCart(packItem, quantity);
   };
 
   const filterItems = (
@@ -163,7 +166,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<string, { id: TabId; title: string; icon: ReactNode; content: ReactNode }> = {
+  const tabsMap: Record<string, { id: TabId; title: ReactNode; icon: ReactNode; content: ReactNode }> = {
     premium: {
       id: 'premium',
       title: 'Premium',
@@ -180,7 +183,12 @@ export const Store: React.FC<IStoreProps> = ({
     },
     packs: {
       id: 'packs',
-      title: packsTabLabel,
+      title: packsBadge ? (
+        <TabLabelWithBadge>
+          {packsTabLabel}
+          <LabelPill background="#f59e0b" borderColor="#f59e0b" color="#000">{packsBadge}</LabelPill>
+        </TabLabelWithBadge>
+      ) : packsTabLabel,
       icon: <Gift width={18} height={18} />,
       content: customPacksContent ?? (
         <StorePacksSection
@@ -390,6 +398,13 @@ const CartInfo = styled.div`
   }
 `;
 
+const TabLabelWithBadge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+`;
+
+
 const LoadingMessage = styled.div`
   text-align: center;
   color: ${uiColors.white};

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

@@ -6,20 +6,73 @@ import { CTAButton } from '../../shared/CTAButton/CTAButton';
 import { ItemRowWrapper } from '../../shared/ItemRowWrapper';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
+import { SelectArrow } from '../../Arrow/SelectArrow';
 import { usePackFiltering } from '../../../hooks/usePackFiltering';
+import { useQuantityControl } from '../../../hooks/useQuantityControl';
 
 interface IStorePacksSectionProps {
   packs: IItemPack[];
-  onAddToCart: (pack: IItemPack) => void;
+  onAddToCart: (pack: IItemPack, quantity: number) => void;
   onSelectPack?: (pack: IItemPack) => void;
   atlasJSON?: any;
   atlasIMG?: string;
 }
 
+interface IPackRowItemProps {
+  pack: IItemPack;
+  onAddToCart: (pack: IItemPack, quantity: number) => void;
+  renderPackIcon: (pack: IItemPack) => React.ReactNode;
+}
+
+const PackRowItem: React.FC<IPackRowItemProps> = ({ pack, onAddToCart, renderPackIcon }) => {
+  const { quantity, handleQuantityChange, handleBlur, incrementQuantity, decrementQuantity, resetQuantity } = useQuantityControl();
+
+  const handleAdd = () => {
+    onAddToCart(pack, quantity);
+    resetQuantity();
+  };
+
+  return (
+    <PackRow>
+      <LeftSection>
+        <PackIconContainer>
+          {renderPackIcon(pack)}
+        </PackIconContainer>
+
+        <PackDetails>
+          <PackName>{pack.title}</PackName>
+          <PackPrice>${pack.priceUSD}</PackPrice>
+          {pack.description && <PackDescription>{pack.description}</PackDescription>}
+        </PackDetails>
+      </LeftSection>
+
+      <Controls>
+        <ArrowsContainer>
+          <SelectArrow direction="left" onPointerDown={decrementQuantity} size={24} />
+          <QuantityInput
+            type="number"
+            value={quantity}
+            onChange={handleQuantityChange}
+            onBlur={handleBlur}
+            min={1}
+            max={99}
+            className="rpgui-input"
+          />
+          <SelectArrow direction="right" onPointerDown={incrementQuantity} size={24} />
+        </ArrowsContainer>
+        <CTAButton
+          icon={<FaCartPlus />}
+          label="Add"
+          onClick={handleAdd}
+        />
+      </Controls>
+    </PackRow>
+  );
+};
+
 export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   packs,
   onAddToCart,
-  onSelectPack,
   atlasJSON,
   atlasIMG,
 }) => {
@@ -43,32 +96,14 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
 
   const renderPack = useCallback(
     (pack: IItemPack) => (
-      <PackRow key={pack.key} onClick={() => onSelectPack?.(pack)}>
-        <LeftSection>
-          <PackIconContainer>
-            {renderPackIcon(pack)}
-          </PackIconContainer>
-
-          <PackDetails>
-            <PackName>{pack.title}</PackName>
-            <PackPrice>${pack.priceUSD}</PackPrice>
-            {pack.description && <PackDescription>{pack.description}</PackDescription>}
-          </PackDetails>
-        </LeftSection>
-
-        <Controls>
-          <CTAButton
-            icon={<FaCartPlus />}
-            label="Add"
-            onClick={e => {
-              e.stopPropagation();
-              onAddToCart(pack);
-            }}
-          />
-        </Controls>
-      </PackRow>
+      <PackRowItem
+        key={pack.key}
+        pack={pack}
+        onAddToCart={onAddToCart}
+        renderPackIcon={renderPackIcon}
+      />
     ),
-    [onSelectPack, onAddToCart]
+    [onAddToCart, renderPackIcon]
   );
 
   return (
@@ -87,9 +122,7 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   );
 };
 
-const PackRow = styled(ItemRowWrapper)`
-  cursor: pointer;
-`;
+const PackRow = styled(ItemRowWrapper)``;
 
 const LeftSection = styled.div`
   display: flex;
@@ -144,5 +177,32 @@ const PackDescription = styled.div`
 const Controls = styled.div`
   display: flex;
   align-items: center;
+  gap: 0.5rem;
   flex-shrink: 0;
 `;
+
+const ArrowsContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 120px;
+  height: 42px;
+  justify-content: space-between;
+`;
+
+const QuantityInput = styled.input`
+  width: 40px;
+  text-align: center;
+  margin: 0 auto;
+  font-size: 0.875rem;
+  background: rgba(0, 0, 0, 0.2);
+  color: #ffffff;
+  border: none;
+  padding: 0.25rem;
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`;

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

@@ -237,8 +237,9 @@ export const Default: Story = {
       atlasIMG={itemsAtlasIMG}
       hidePremiumTab={true}
       tabOrder={['items', 'packs']}
-      defaultActiveTab="items"
+      defaultActiveTab="packs"
       textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
+      packsBadge="SAVE"
     />
   ),
 };