@rpg-engine/long-bow 0.8.171 → 0.8.172

package/src/components/Store/StoreBadges.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { LabelPill } from '../shared/LabelPill/LabelPill';
+import { CountdownTimer } from './CountdownTimer';
+
+export type StoreBadgeType = 'popular' | 'bestSeller' | 'limited' | 'new' | 'sale' | 'event';
+
+export interface IStoreBadge {
+  type: StoreBadgeType;
+  label?: string;
+}
+
+export interface IStoreBadgesProps {
+  badges?: IStoreBadge[];
+  buyCount?: number;
+  viewersCount?: number;
+  saleEndsAt?: string;
+}
+
+const BADGE_CONFIG: Record<StoreBadgeType, { bg: string; border: string; color: string; defaultLabel: string }> = {
+  popular:    { bg: uiColors.navyBlue,  border: uiColors.navyBlue,  color: '#fff', defaultLabel: 'Popular' },
+  bestSeller: { bg: uiColors.darkYellow, border: uiColors.darkYellow, color: '#000', defaultLabel: 'Best Seller' },
+  limited:    { bg: uiColors.cardinal,  border: uiColors.cardinal,  color: '#fff', defaultLabel: 'Limited' },
+  new:        { bg: uiColors.green,     border: uiColors.green,     color: '#fff', defaultLabel: 'New' },
+  sale:       { bg: uiColors.orange,    border: uiColors.orange,    color: '#fff', defaultLabel: 'Sale' },
+  event:      { bg: uiColors.purple,    border: uiColors.purple,    color: '#fff', defaultLabel: 'Event' },
+};
+
+export const StoreBadges: React.FC<IStoreBadgesProps> = ({ badges, buyCount, viewersCount, saleEndsAt }) => {
+  const hasContent =
+    (badges && badges.length > 0) ||
+    (buyCount && buyCount > 0) ||
+    (viewersCount && viewersCount > 1) ||
+    saleEndsAt;
+
+  if (!hasContent) return null;
+
+  return (
+    <BadgesRow>
+      {badges?.map((badge, i) => {
+        const cfg = BADGE_CONFIG[badge.type];
+        return (
+          <LabelPill key={i} background={cfg.bg} borderColor={cfg.border} color={cfg.color}>
+            {badge.label ?? cfg.defaultLabel}
+          </LabelPill>
+        );
+      })}
+
+      {buyCount && buyCount > 0 && (
+        <LabelPill
+          background="rgba(99,102,241,0.25)"
+          borderColor="rgba(99,102,241,0.5)"
+          color="#a5b4fc"
+        >
+          {buyCount} bought
+        </LabelPill>
+      )}
+
+      {viewersCount && viewersCount > 1 && (
+        <ViewersPill>
+          <LabelPill
+            background="rgba(14,121,178,0.25)"
+            borderColor="rgba(14,121,178,0.5)"
+            color="#7dd3fc"
+          >
+            {viewersCount} viewing
+          </LabelPill>
+        </ViewersPill>
+      )}
+
+      {saleEndsAt && (
+        <CountdownTimer endsAt={saleEndsAt} size="small" />
+      )}
+    </BadgesRow>
+  );
+};
+
+const pulse = keyframes`
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+`;
+
+const BadgesRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.3rem;
+  margin-top: 0.2rem;
+`;
+
+const ViewersPill = styled.span`
+  animation: ${pulse} 2s ease-in-out infinite;
+`;

package/src/components/Store/StoreCharacterSkinRow.tsx

@@ -10,6 +10,7 @@ import { SelectArrow } from '../Arrow/SelectArrow';
 import { ICharacterProps } from '../Character/CharacterSelection';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { SimpleTooltip } from '../shared/SimpleTooltip';
 import { useCharacterSkinNavigation } from '../../hooks/useCharacterSkinNavigation';
 
 interface IStoreCharacterSkinRowProps {
@@ -22,6 +23,7 @@ interface IStoreCharacterSkinRowProps {
     metadata?: Record<string, any>
   ) => void;
   userAccountType: UserAccountTypes;
+  originalPrice?: number;
 }
 
 export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
@@ -30,6 +32,7 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
   atlasIMG,
   onAddToCart,
   userAccountType,
+  originalPrice,
 }) => {
   // Get available characters from metadata
   const availableCharacters: ICharacterProps[] =
@@ -117,7 +120,45 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
             />
           </SelectedSkinNav>
         )}
-        <ItemPrice>${item.price}</ItemPrice>
+        <PriceRow>
+          {originalPrice != null && (
+            <OriginalPrice style={{ display: 'flex', alignItems: 'center' }}>
+              {(item.currency as string) === 'DC' ? (
+                  <>
+                    <DCCoinWrapper $scale={0.8}>
+                      <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={0.8} />
+                    </DCCoinWrapper>
+                    {originalPrice.toLocaleString()}
+                  </>
+                ) : `$${originalPrice.toFixed(2)}`}
+            </OriginalPrice>
+          )}
+          {(item.currency as string) === 'DC' ? (
+            <ItemPrice $onSale={originalPrice != null} style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+              <DCCoinWrapper>
+                <SimpleTooltip content="Definya Coin" direction="top">
+                  <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={1} />
+                </SimpleTooltip>
+              </DCCoinWrapper>
+              {item.price.toLocaleString()}
+            </ItemPrice>
+          ) : (
+            <ItemPrice $onSale={originalPrice != null} style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+              ${item.price.toFixed(2)}
+              {(item as any).dcPrice ? (
+                  <>
+                    <span style={{ margin: '0 4px' }}>·</span>
+                    <DCCoinWrapper $scale={0.9}>
+                      <SimpleTooltip content="Definya Coin" direction="top">
+                        <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={0.9} />
+                      </SimpleTooltip>
+                    </DCCoinWrapper>
+                    {((item as any).dcPrice as number).toLocaleString()}
+                  </>
+                ) : ''}
+            </ItemPrice>
+          )}
+        </PriceRow>
       </ItemDetails>
       <Controls>
         <CTAButton
@@ -125,6 +166,7 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
           label="Add"
           onClick={handleAddToCart}
           disabled={!hasRequiredAccount}
+          pulse
         />
       </Controls>
     </ItemWrapper>
@@ -134,52 +176,91 @@ export const StoreCharacterSkinRow: React.FC<IStoreCharacterSkinRowProps> = ({
 const ItemWrapper = styled.div<{ $isHighlighted: boolean }>`
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  background: ${props =>
-    props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent'};
-  border-left: ${props =>
-    props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent'};
-
-  &:last-child {
-    border-bottom: none;
+  gap: 1rem;
+  padding: 0.6rem 0.8rem;
+  margin-bottom: 6px;
+  background: ${props => props.$isHighlighted ? 'linear-gradient(to right, rgba(255, 215, 0, 0.15), rgba(0, 0, 0, 0.4))' : 'linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.25))'};
+  border: 1px solid ${props => props.$isHighlighted ? 'rgba(255, 215, 0, 0.4)' : 'rgba(255, 255, 255, 0.1)'};
+  border-radius: 8px;
+  border-left: 4px solid ${props => props.$isHighlighted ? '#fbbf24' : 'rgba(255, 255, 255, 0.2)'};
+  box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.2);
+  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  position: relative;
+  overflow: hidden;
+
+  /* Subtle inner glow for premium feel */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background: ${p => p.$isHighlighted ? 'linear-gradient(to right, rgba(255, 215, 0, 0.2), rgba(0, 0, 0, 0.5))' : 'linear-gradient(to right, rgba(245, 158, 11, 0.15), rgba(0, 0, 0, 0.4))'};
+    border-color: ${p => p.$isHighlighted ? 'rgba(255, 215, 0, 0.6)' : 'rgba(245, 158, 11, 0.3)'};
+    border-left-color: ${p => p.$isHighlighted ? '#fcd34d' : '#f59e0b'};
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
+    transform: scale(1.01) translateY(-1px);
+    z-index: 10;
   }
 `;
 
 const ItemIconContainer = styled.div`
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
   padding: 4px;
+  box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
 `;
 
 const ItemDetails = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.35rem;
 `;
 
 const ItemName = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: #ffffff;
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
 `;
 
-const SelectedSkin = styled.div`
+const PriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.15rem 0;
+`;
+
+const OriginalPrice = styled.span`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.5rem;
-  color: #fef08a;
+  font-size: 0.5625rem;
+  color: #9ca3af !important;
+  text-decoration: line-through;
+  text-shadow: none !important;
+`;
+
+const ItemPrice = styled.div<{ $onSale?: boolean }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6875rem;
+  color: ${p => p.$onSale ? '#4ade80' : '#fbbf24'};
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
 `;
 
-const ItemPrice = styled.div`
+const SelectedSkin = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.625rem;
-  color: #fef08a;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.7);
 `;
 
 const Controls = styled.div`
@@ -189,6 +270,16 @@ const Controls = styled.div`
   min-width: fit-content;
 `;
 
+const DCCoinWrapper = styled.span<{ $scale?: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: ${p => p.$scale ? `${-0.6 * p.$scale}rem` : '-0.6rem'};
+  left: ${p => p.$scale ? `${-0.5 * p.$scale}rem` : '-0.5rem'};
+  margin-right: 0.3rem;
+`;
+
 // Styled arrow override for inline nav arrows
 const SkinNavArrow = styled(SelectArrow)`
   position: static;

package/src/components/Store/StoreItemRow.tsx

@@ -1,12 +1,14 @@
 import { IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
-import React, { useState } from 'react';
-import { FaCartPlus } from 'react-icons/fa';
+import React, { useEffect, useState } from 'react';
+import { FaBolt, FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { ItemRowWrapper } from '../shared/ItemRowWrapper';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { SimpleTooltip } from '../shared/SimpleTooltip';
 import { useQuantityControl } from '../../hooks/useQuantityControl';
+import { IStoreBadge, StoreBadges } from './StoreBadges';
 
 interface IStoreItemRowProps {
   item: IProductBlueprint;
@@ -17,9 +19,18 @@ interface IStoreItemRowProps {
     quantity: number,
     metadata?: Record<string, any>
   ) => void;
+  onQuickBuy?: (item: IProductBlueprint, quantity: number, metadata?: Record<string, any>) => void;
   userAccountType: UserAccountTypes;
   showTextInput?: boolean;
   textInputPlaceholder?: string;
+  badges?: IStoreBadge[];
+  buyCount?: number;
+  viewersCount?: number;
+  saleEndsAt?: string;
+  originalPrice?: number;
+  /** Fires once on mount — use for store_item_viewed analytics. */
+  onView?: (item: IProductBlueprint, position: number) => void;
+  positionInList?: number;
 }
 
 export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
@@ -27,11 +38,23 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   atlasJSON,
   atlasIMG,
   onAddToCart,
+  onQuickBuy,
   userAccountType,
   showTextInput = false,
   textInputPlaceholder = item.inputPlaceholder,
+  badges,
+  buyCount,
+  viewersCount,
+  saleEndsAt,
+  originalPrice,
+  onView,
+  positionInList = 0,
 }) => {
   const [textInputValue, setTextInputValue] = useState('');
+
+  useEffect(() => {
+    onView?.(item, positionInList);
+  }, []);
   const {
     quantity,
     handleQuantityChange,
@@ -56,6 +79,17 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
     }
   };
 
+  const handleQuickBuy = () => {
+    if (!hasRequiredAccount || !onQuickBuy) return;
+    if (showTextInput) {
+      onQuickBuy(item, 1, { inputValue: textInputValue });
+      setTextInputValue('');
+    } else {
+      onQuickBuy(item, quantity);
+      resetQuantity();
+    }
+  };
+
   return (
     <ItemRowWrapper $isHighlighted={item.store?.isHighlighted || false}>
       <LeftSection>
@@ -73,11 +107,52 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
 
         <ItemDetails>
           <ItemName>{item.name}</ItemName>
-          <ItemPrice>
-            ${item.price}
-            {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
-          </ItemPrice>
+          <PriceRow>
+            {originalPrice != null && (
+              <OriginalPrice style={{ display: 'flex', alignItems: 'center' }}>
+                {(item.currency as string) === 'DC' ? (
+                  <>
+                    <DCCoinWrapper $scale={0.8}>
+                      <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={0.8} />
+                    </DCCoinWrapper>
+                    {originalPrice.toLocaleString()}
+                  </>
+                ) : `$${originalPrice.toFixed(2)}`}
+              </OriginalPrice>
+            )}
+            {(item.currency as string) === 'DC' ? (
+              <ItemPrice $onSale={originalPrice != null} style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+                <DCCoinWrapper>
+                  <SimpleTooltip content="Definya Coin" direction="top">
+                    <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={1} />
+                  </SimpleTooltip>
+                </DCCoinWrapper>
+                {item.price.toLocaleString()}
+              </ItemPrice>
+            ) : (
+              <ItemPrice $onSale={originalPrice != null} style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+                ${item.price.toFixed(2)}
+                {(item as any).dcPrice ? (
+                  <>
+                    <span style={{ margin: '0 4px' }}>·</span>
+                    <DCCoinWrapper $scale={0.9}>
+                      <SimpleTooltip content="Definya Coin" direction="top">
+                        <SpriteFromAtlas atlasIMG={atlasIMG} atlasJSON={atlasJSON} spriteKey="others/definya-coin.png" imgScale={0.9} />
+                      </SimpleTooltip>
+                    </DCCoinWrapper>
+                    {((item as any).dcPrice as number).toLocaleString()}
+                  </>
+                ) : ''}
+              </ItemPrice>
+            )}
+          </PriceRow>
           <ItemDescription>{item.description}</ItemDescription>
+          <StoreBadges
+            badges={badges}
+            buyCount={buyCount}
+            viewersCount={viewersCount}
+            saleEndsAt={saleEndsAt}
+          />
         </ItemDetails>
       </LeftSection>
 
@@ -117,11 +192,23 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
           </ArrowsContainer>
         ) : null}
 
+        {onQuickBuy && (
+          <CTAButton
+            icon={<FaBolt />}
+            label="Buy"
+            onClick={handleQuickBuy}
+            disabled={!hasRequiredAccount}
+            iconColor="#fff"
+            textColor="#fff"
+            pulse
+          />
+        )}
         <CTAButton
           icon={<FaCartPlus />}
           label="Add"
           onClick={handleAddToCartInternal}
           disabled={!hasRequiredAccount}
+          pulse
         />
       </Controls>
     </ItemRowWrapper>
@@ -131,51 +218,82 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
 const LeftSection = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 1rem;
   flex: 1;
   min-width: 0;
 `;
 
 const ItemIconContainer = styled.div`
-  width: 32px;
-  height: 32px;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 6px;
   padding: 4px;
+  box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
 `;
 
 const ItemDetails = styled.div`
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.35rem;
 `;
 
 const ItemName = styled.div`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   color: #ffffff;
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
 `;
 
-const ItemPrice = styled.div`
+const PriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.15rem 0;
+`;
+
+const OriginalPrice = styled.span`
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.625rem;
-  color: #fef08a;
+  font-size: 0.5625rem;
+  color: #9ca3af !important;
+  text-decoration: line-through;
+  text-shadow: none !important;
+`;
+
+const ItemPrice = styled.div<{ $onSale?: boolean }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6875rem;
+  color: ${p => p.$onSale ? '#4ade80' : '#fbbf24'};
+  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
 `;
 
 const ItemDescription = styled.div`
   font-family: 'Press Start 2P', cursive;
   font-size: 0.625rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.85);
   line-height: 1.4;
+  margin-top: 2px;
+`;
+
+const DCCoinWrapper = styled.span<{ $scale?: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: ${p => p.$scale ? `${-0.6 * p.$scale}rem` : '-0.6rem'};
+  left: ${p => p.$scale ? `${-0.5 * p.$scale}rem` : '-0.5rem'};
+  margin-right: 0.3rem;
 `;
 
 const Controls = styled.div`
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.75rem;
   min-width: fit-content;
 `;
 

package/src/components/Store/TrustBar.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { FaHeadset, FaLock, FaRocket } from 'react-icons/fa';
+import styled from 'styled-components';
+
+export interface ITrustSignal {
+  icon?: React.ReactNode;
+  label: string;
+}
+
+export interface ITrustBarProps {
+  signals?: ITrustSignal[];
+}
+
+const DefaultSignals: React.FC = () => (
+  <>
+    <Signal><SignalIcon><FaLock /></SignalIcon><SignalLabel>Secure Payment</SignalLabel></Signal>
+    <Signal><SignalIcon><FaRocket /></SignalIcon><SignalLabel>Instant Delivery</SignalLabel></Signal>
+    <Signal><SignalIcon><FaHeadset /></SignalIcon><SignalLabel>24/7 Support</SignalLabel></Signal>
+  </>
+);
+
+export const TrustBar: React.FC<ITrustBarProps> = ({ signals }) => (
+  <Bar>
+    {signals
+      ? signals.map((s, i) => (
+          <Signal key={i}>
+            {s.icon && <SignalIcon>{s.icon}</SignalIcon>}
+            <SignalLabel>{s.label}</SignalLabel>
+          </Signal>
+        ))
+      : <DefaultSignals />
+    }
+  </Bar>
+);
+
+const Bar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  padding: 0.6rem 1rem;
+  background: rgba(74, 222, 128, 0.06);
+  border: 1px solid rgba(74, 222, 128, 0.2);
+  border-radius: 4px;
+
+  @media (max-width: 950px) {
+    flex-wrap: wrap;
+    gap: 0.6rem;
+  }
+`;
+
+const Signal = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+`;
+
+const SignalIcon = styled.span`
+  color: #4ade80;
+  font-size: 0.7rem;
+  display: flex;
+`;
+
+const SignalLabel = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.45rem;
+  color: rgba(74, 222, 128, 0.85);
+  white-space: nowrap;
+`;