@rpg-engine/long-bow 0.8.171 → 0.8.172

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

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import { PurchaseSuccess } from '../../../components/Store/PurchaseSuccess';
+import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
+import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
+
+const meta = {
+  title: 'Features/Store/PurchaseSuccess',
+  component: PurchaseSuccess,
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <RPGUIRoot>
+        <div style={{ width: 500, background: '#1a1a2e', borderRadius: 8 }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof PurchaseSuccess>;
+
+export default meta;
+type Story = StoryObj<typeof PurchaseSuccess>;
+
+export const Default: Story = {
+  render: () => (
+    <PurchaseSuccess
+      items={[
+        { name: 'Greater Life Potion', texturePath: 'items/greater_life_potion.png', quantity: 3 },
+        { name: 'Angelic Sword', texturePath: 'items/angelic_sword.png', quantity: 1 },
+      ]}
+      totalPrice={19.98}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onContinueShopping={() => console.log('Continue shopping')}
+      onClose={() => console.log('Close store')}
+    />
+  ),
+};
+
+export const SingleItem: Story = {
+  render: () => (
+    <PurchaseSuccess
+      items={[
+        { name: 'Starter Pack', texturePath: 'items/greater_life_potion.png', quantity: 1 },
+      ]}
+      totalPrice={4.99}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onContinueShopping={() => console.log('Continue shopping')}
+      onClose={() => console.log('Close store')}
+    />
+  ),
+};
+
+export const ManyItems: Story = {
+  render: () => (
+    <PurchaseSuccess
+      items={[
+        { name: 'Life Potion', texturePath: 'items/greater_life_potion.png', quantity: 10 },
+        { name: 'Angelic Sword', texturePath: 'items/angelic_sword.png', quantity: 1 },
+        { name: 'Dragon Scale', texturePath: 'items/greater_life_potion.png', quantity: 5 },
+        { name: 'Mana Gem', texturePath: 'items/greater_life_potion.png', quantity: 2 },
+        { name: 'Phoenix Feather', texturePath: 'items/angelic_sword.png', quantity: 1 },
+      ]}
+      totalPrice={74.95}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onContinueShopping={() => console.log('Continue shopping')}
+      onClose={() => console.log('Close store')}
+    />
+  ),
+};

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

@@ -9,6 +9,8 @@ import entitiesAtlasIMG from '../../../mocks/atlas/entities/entities.png';
 import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
 import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
 import { mockItems } from '../../../mocks/informationCenter.mocks';
+import { DCWalletContent } from '../../../components/DCWallet/DCWalletContent';
+import { DCHistoryPanel } from '../../../components/DCWallet/DCHistoryPanel';
 
 const meta = {
   title: 'Features/Store/Store',
@@ -81,6 +83,7 @@ const characterNameChangeItem: IProductBlueprint = {
   textureAtlas: 'items',
   textureKey: 'items/character_customization.png',
   type: PurchaseType.Item,
+  dcPrice: 500,
   onPurchase: async () => { },
   itemType: ItemType.Other,
   itemSubType: ItemSubType.Other,
@@ -104,6 +107,7 @@ const characterSkinItems: IProductBlueprint[] = [
     textureAtlas: 'items',
     textureKey: 'items/character_customization.png',
     type: PurchaseType.Item,
+    dcPrice: 1500,
     onPurchase: async () => { },
     itemType: ItemType.Other,
     itemSubType: ItemSubType.Other,
@@ -132,6 +136,7 @@ const characterSkinItems: IProductBlueprint[] = [
     textureAtlas: 'items',
     textureKey: 'items/premium_character_pack.png',
     type: PurchaseType.Item,
+    dcPrice: 2500,
     onPurchase: async () => { },
     itemType: ItemType.Other,
     itemSubType: ItemSubType.Other,
@@ -229,9 +234,24 @@ export const Default: Story = {
         console.log('Purchase details:', purchase);
         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"
+      customWalletContent={<DCWalletContent 
+        dcBalance={1200}
+        historyData={{ transactions: [], totalPages: 1, currentPage: 1 }}
+        historyLoading={false}
+        onRequestHistory={() => {}}
+        transferLoading={false}
+        transferResult={null}
+        onSendTransfer={() => {}}
+        onClearTransferResult={() => {}}
+        onBuyDC={() => console.log('Buy DC')}
+      />}
+      customHistoryContent={<DCHistoryPanel
+        transactions={[]}
+        totalPages={1}
+        currentPage={1}
+        loading={false}
+        onRequestHistory={() => {}}
+      />}
       onClose={() => console.log('Store closed')}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}
@@ -240,6 +260,22 @@ export const Default: Story = {
       defaultActiveTab="packs"
       textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
       packsBadge="SAVE"
+      onTabChange={(tab, count) => console.log('[tracking] tab_change', { tab, count })}
+      onCategoryChange={(category, count) => console.log('[tracking] category_change', { category, count })}
+      onItemView={(item, position) => console.log('[tracking] item_viewed', { key: item.key, position })}
+      onPackView={(pack, position) => console.log('[tracking] pack_viewed', { key: pack.key, position })}
+      onCartOpen={() => console.log('[tracking] cart_opened')}
+      onAddToCart={(item, qty) => console.log('[tracking] add_to_cart', { key: item.key, qty })}
+      onRemoveFromCart={(key) => console.log('[tracking] remove_from_cart', { key })}
+      onCheckoutStart={(items, total) => console.log('[tracking] checkout_start', { items, total })}
+      onPurchaseSuccess={(items, total) => console.log('[tracking] purchase_success', { items, total })}
+      onPurchaseError={(error) => console.log('[tracking] purchase_error', { error })}
+      itemBadges={{
+        'original-greater-life-potion-0': { originalPrice: 15.00 },
+        'character-name-change': { originalPrice: 15.00 },
+        'skin-character-customization': { originalPrice: 20.00 },
+        'starter-pack': { originalPrice: 9.99 }
+      }}
     />
   ),
 };

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

@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import { StoreBadges } from '../../../components/Store/StoreBadges';
+
+const meta = {
+  title: 'Features/Store/StoreBadges',
+  component: StoreBadges,
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <RPGUIRoot>
+        <div style={{ padding: 16, background: '#1a1a2e', borderRadius: 8 }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof StoreBadges>;
+
+export default meta;
+type Story = StoryObj<typeof StoreBadges>;
+
+const future = new Date(Date.now() + 3 * 60 * 60 * 1000).toISOString();
+
+export const AllBadgeTypes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <StoreBadges badges={[{ type: 'popular' }]} />
+      <StoreBadges badges={[{ type: 'bestSeller' }]} />
+      <StoreBadges badges={[{ type: 'limited' }]} />
+      <StoreBadges badges={[{ type: 'new' }]} />
+      <StoreBadges badges={[{ type: 'sale' }]} />
+      <StoreBadges badges={[{ type: 'event' }]} />
+    </div>
+  ),
+};
+
+export const SocialProof: Story = {
+  render: () => (
+    <StoreBadges
+      badges={[{ type: 'bestSeller' }]}
+      buyCount={142}
+      viewersCount={8}
+    />
+  ),
+};
+
+export const WithCountdown: Story = {
+  render: () => (
+    <StoreBadges
+      badges={[{ type: 'sale' }]}
+      buyCount={37}
+      saleEndsAt={future}
+    />
+  ),
+};
+
+export const MultipleBadges: Story = {
+  render: () => (
+    <StoreBadges
+      badges={[{ type: 'popular' }, { type: 'limited', label: 'Only 3 left!' }]}
+      buyCount={89}
+      viewersCount={12}
+      saleEndsAt={future}
+    />
+  ),
+};
+
+export const CustomLabels: Story = {
+  render: () => (
+    <StoreBadges
+      badges={[
+        { type: 'event', label: 'Halloween Special' },
+        { type: 'limited', label: 'Last 5!' },
+      ]}
+    />
+  ),
+};
+
+export const Empty: Story = {
+  render: () => <StoreBadges />,
+};

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

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { FaShieldAlt, FaTruck, FaUndo } from 'react-icons/fa';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import { TrustBar } from '../../../components/Store/TrustBar';
+
+const meta = {
+  title: 'Features/Store/TrustBar',
+  component: TrustBar,
+  parameters: { layout: 'centered' },
+  decorators: [
+    Story => (
+      <RPGUIRoot>
+        <div style={{ width: 600, padding: 16, background: '#1a1a2e', borderRadius: 8 }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof TrustBar>;
+
+export default meta;
+type Story = StoryObj<typeof TrustBar>;
+
+export const Default: Story = {
+  render: () => <TrustBar />,
+};
+
+export const CustomSignals: Story = {
+  render: () => (
+    <TrustBar
+      signals={[
+        { icon: <FaShieldAlt />, label: 'SSL Encrypted' },
+        { icon: <FaTruck />, label: 'Instant Delivery' },
+        { icon: <FaUndo />, label: 'Money-back Guarantee' },
+      ]}
+    />
+  ),
+};
+
+export const TextOnly: Story = {
+  render: () => (
+    <TrustBar
+      signals={[
+        { label: 'No subscriptions' },
+        { label: 'One-time payment' },
+        { label: 'Cancel anytime' },
+      ]}
+    />
+  ),
+};