@rpg-engine/long-bow 0.8.131 → 0.8.134

package/package.json

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

package/src/components/Store/PaymentMethodModal.tsx

@@ -0,0 +1,219 @@
+import React, { useCallback, useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+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;
+}
+
+type PaymentMethod = 'dc' | 'card';
+
+export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
+  dcBalance,
+  onPayWithDC,
+  onPayWithCard,
+  onClose,
+}) => {
+  const [selected, setSelected] = useState<PaymentMethod>('card');
+
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const handleConfirm = useCallback(() => {
+    if (selected === 'dc') {
+      onPayWithDC();
+    } else {
+      onPayWithCard();
+    }
+  }, [selected, onPayWithDC, onPayWithCard]);
+
+  return (
+    <ModalPortal>
+      <Overlay onPointerDown={onClose} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onTouchStart={stopPropagation as React.TouchEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Header>
+            <Title>How would you like to pay?</Title>
+            <CloseButton onPointerDown={onClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <Options>
+            <RadioOption
+              $selected={selected === 'card'}
+              onPointerDown={() => setSelected('card')}
+            >
+              <RadioCircle $selected={selected === 'card'} />
+              <OptionText>
+                <OptionLabel>Credit Card</OptionLabel>
+                <OptionSub>Stripe secure checkout</OptionSub>
+              </OptionText>
+            </RadioOption>
+
+            <RadioOption
+              $selected={selected === 'dc'}
+              onPointerDown={() => setSelected('dc')}
+            >
+              <RadioCircle $selected={selected === 'dc'} />
+              <OptionText>
+                <OptionLabel>Definya Coin</OptionLabel>
+                <OptionSub>{dcBalance.toLocaleString()} DC available</OptionSub>
+              </OptionText>
+            </RadioOption>
+          </Options>
+
+          <ConfirmRow>
+            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={handleConfirm}>
+              Confirm
+            </Button>
+          </ConfirmRow>
+        </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: 20px 24px 24px;
+  min-width: 300px;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: auto;
+  animation: scaleIn 0.15s ease-out;
+
+  @keyframes scaleIn {
+    from { transform: scale(0.85); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Title = styled.h3`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.7rem;
+  color: #fef08a;
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
+const Options = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const RadioOption = styled.div<{ $selected: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.15)')};
+  border-radius: 6px;
+  background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'transparent')};
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: #f59e0b;
+  }
+`;
+
+const RadioCircle = styled.div<{ $selected: boolean }>`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.4)')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #f59e0b;
+    opacity: ${({ $selected }) => ($selected ? 1 : 0)};
+    transition: opacity 0.15s;
+  }
+`;
+
+const OptionText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+`;
+
+const OptionLabel = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  color: #ffffff;
+`;
+
+const OptionSub = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.55);
+`;
+
+const ConfirmRow = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+`;

package/src/components/Store/Store.tsx

@@ -27,6 +27,7 @@ export interface IStoreProps {
   onShowHistory?: () => void;
   onShowWallet?: () => void;
   walletLabel?: string;
+  packsTabLabel?: string;
   userAccountType: UserAccountTypes;
   loading?: boolean;
   error?: string;
@@ -58,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>(() => {
@@ -171,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)}

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}