@rpg-engine/long-bow 0.8.130 → 0.8.133

package/package.json

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

package/src/components/Store/PaymentMethodModal.tsx

@@ -0,0 +1,140 @@
+import React, { useCallback } from 'react';
+import { FaCreditCard } from 'react-icons/fa';
+import { GiCrystalBall } from 'react-icons/gi';
+import styled from 'styled-components';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { Button, ButtonTypes } from '../Button';
+
+export interface IPaymentMethodModalProps {
+  dcBalance: number;
+  onPayWithDC: () => void;
+  onPayWithCard: () => void;
+  onClose: () => void;
+}
+
+export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
+  dcBalance,
+  onPayWithDC,
+  onPayWithCard,
+  onClose,
+}) => {
+  const stopPropagation = useCallback((e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  return (
+    <ModalPortal>
+      <Overlay onPointerDown={onClose} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onTouchStart={stopPropagation as React.TouchEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Title>How would you like to pay?</Title>
+
+          <OptionButton onClick={onPayWithDC} className="rpgui-button">
+            <GiCrystalBall />
+            <OptionLabel>
+              <span>Pay with DC</span>
+              <OptionBalance>{dcBalance.toLocaleString()} DC available</OptionBalance>
+            </OptionLabel>
+          </OptionButton>
+
+          <OptionButton onClick={onPayWithCard} className="rpgui-button">
+            <FaCreditCard />
+            <OptionLabel>
+              <span>Pay with Credit Card</span>
+            </OptionLabel>
+          </OptionButton>
+
+          <CancelWrapper>
+            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
+              Cancel
+            </Button>
+          </CancelWrapper>
+        </ModalContent>
+      </ModalContainer>
+    </ModalPortal>
+  );
+};
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  z-index: 1000;
+`;
+
+const ModalContainer = styled.div`
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+  pointer-events: none;
+`;
+
+const ModalContent = styled.div`
+  background: #1a1a2e;
+  border: 2px solid #f59e0b;
+  border-radius: 8px;
+  padding: 24px;
+  min-width: 320px;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: auto;
+  animation: scaleIn 0.2s ease-out;
+
+  @keyframes scaleIn {
+    from { transform: scale(0.85); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
+  }
+`;
+
+const Title = styled.h3`
+  margin: 0 0 8px;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.75rem;
+  color: #fef08a;
+  text-align: center;
+`;
+
+const OptionButton = styled.button`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 14px;
+  cursor: pointer;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+
+  svg {
+    font-size: 1.25rem;
+    flex-shrink: 0;
+  }
+`;
+
+const OptionLabel = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+`;
+
+const OptionBalance = styled.span`
+  font-size: 0.55rem;
+  color: #fef08a;
+  opacity: 0.8;
+`;
+
+const CancelWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+  filter: grayscale(0.6);
+`;

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';
@@ -24,7 +24,10 @@ 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;
+  packsTabLabel?: string;
   userAccountType: UserAccountTypes;
   loading?: boolean;
   error?: string;
@@ -43,7 +46,9 @@ export const Store: React.FC<IStoreProps> = ({
   atlasJSON,
   atlasIMG,
   onPurchase,
-  onShowHistory, // Destructure the new prop
+  onShowHistory,
+  onShowWallet,
+  walletLabel,
   userAccountType,
   loading = false,
   error,
@@ -54,6 +59,7 @@ export const Store: React.FC<IStoreProps> = ({
   textInputItemKeys = [],
   customPacksContent,
   customWalletContent,
+  packsTabLabel = 'Packs',
 }) => {
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
   const [activeTab, setActiveTab] = useState<TabId>(() => {
@@ -167,7 +173,7 @@ export const Store: React.FC<IStoreProps> = ({
     },
     packs: {
       id: 'packs',
-      title: 'Packs',
+      title: packsTabLabel,
       content: customPacksContent ?? (
         <StorePacksSection
           packs={packs.filter(pack => pack.priceUSD < 9.99)}
@@ -242,7 +248,7 @@ export const Store: React.FC<IStoreProps> = ({
       ) : (
         <Container>
           <TopBar>
-            <HistoryButton>
+            <LeftButtons>
               {onShowHistory && (
                 <CTAButton
                   icon={<FaHistory />}
@@ -250,7 +256,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 />}
@@ -316,7 +329,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/StoreItemDetails.tsx

@@ -44,6 +44,7 @@ export const StoreItemDetails: React.FC<IStoreItemDetailsProps> = ({
             <ItemName>{item.name}</ItemName>
             <ItemPrice>
               ${'priceUSD' in item ? item.priceUSD : item.price}
+              {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
             </ItemPrice>
             <Description>{item.description}</Description>
           </ItemInfo>

package/src/components/Store/StoreItemRow.tsx

@@ -71,7 +71,10 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
 
       <ItemDetails>
         <ItemName>{item.name}</ItemName>
-        <ItemPrice>${item.price}</ItemPrice>
+        <ItemPrice>
+          ${item.price}
+          {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
+        </ItemPrice>
         <ItemDescription>{item.description}</ItemDescription>
       </ItemDetails>
 

package/src/index.tsx

@@ -61,6 +61,7 @@ export * from './components/Store/CartView';
 export * from './components/Store/hooks/useStoreCart';
 export * from './components/Store/MetadataCollector';
 export * from './components/Store/Store';
+export * from './components/Store/PaymentMethodModal';
 export * from './components/Table/Table';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';

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

@@ -230,6 +230,8 @@ export const Default: Story = {
         return Promise.resolve(true);
       }}
       onShowHistory={() => console.log('Show History clicked in story')}
+      onShowWallet={() => console.log('DC Wallet clicked in story')}
+      walletLabel="DC Wallet: 1,200"
       onClose={() => console.log('Store closed')}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}