@rpg-engine/long-bow 0.8.177 → 0.8.179

package/package.json

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

package/src/components/Stepper.tsx

@@ -18,6 +18,7 @@ interface IStepperProps {
     onClick: (() => void) | (() => Promise<void>) | ((e: any) => Promise<void>);
   };
   onError?: (message: string) => void;
+  onStepChange?: (stepIndex: number) => void;
   useSideArrows?: boolean; // New prop to control arrow position
   styles?: {
     stepperProgressColor?: string;
@@ -28,6 +29,7 @@ export const Stepper: React.FC<IStepperProps> = ({
   steps,
   finalCTAButton,
   onError,
+  onStepChange: onStepChangeProp,
   useSideArrows = false, // Default to false for backwards compatibility
   styles,
 }) => {
@@ -60,6 +62,7 @@ export const Stepper: React.FC<IStepperProps> = ({
       }
     }
     setCurrentStep(step);
+    onStepChangeProp?.(step);
   };
 
   const renderArrows = () => {

package/src/components/Store/PaymentMethodModal.tsx

@@ -9,17 +9,21 @@ export interface IPaymentMethodModalProps {
   dcRequired?: number;
   onPayWithDC: () => void;
   onPayWithCard: () => void;
+  onPayWithPix: () => void;
   onClose: () => void;
+  showPix?: boolean;
 }
 
-type PaymentMethod = 'dc' | 'card';
+type PaymentMethod = 'dc' | 'card' | 'pix';
 
 export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   dcBalance,
   dcRequired,
   onPayWithDC,
   onPayWithCard,
+  onPayWithPix,
   onClose,
+  showPix = false,
 }) => {
   const [selected, setSelected] = useState<PaymentMethod>('card');
 
@@ -41,10 +45,12 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   const handleConfirm = useCallback(() => {
     if (selected === 'dc' && !dcDisabled) {
       onPayWithDC();
+    } else if (selected === 'pix') {
+      onPayWithPix();
     } else {
       onPayWithCard();
     }
-  }, [selected, dcDisabled, onPayWithDC, onPayWithCard]);
+  }, [selected, dcDisabled, onPayWithDC, onPayWithCard, onPayWithPix]);
 
   const dcSubText =
     dcRequired !== undefined
@@ -79,6 +85,19 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
               </OptionText>
             </RadioOption>
 
+            {showPix && (
+              <RadioOption
+                $selected={selected === 'pix'}
+                onPointerDown={() => setSelected('pix')}
+              >
+                <RadioCircle $selected={selected === 'pix'} />
+                <OptionText>
+                  <OptionLabel>Pix</OptionLabel>
+                  <OptionSub>Instant payment via Pix</OptionSub>
+                </OptionText>
+              </RadioOption>
+            )}
+
             <RadioOption
               $selected={selected === 'dc'}
               $disabled={dcDisabled}

package/src/components/Tutorial/TutorialStepper.tsx

@@ -16,11 +16,12 @@ export interface ITutorialLesson {
 export interface ITutorialStepperProps {
   lessons: ITutorialLesson[];
   onLessonFinish: () => void;
+  onStepChange?: (stepIndex: number) => void;
   imageStyle?: CSSProperties;
 }
 
 export const TutorialStepper = React.memo(
-  ({ lessons, onLessonFinish, imageStyle }: ITutorialStepperProps) => {
+  ({ lessons, onLessonFinish, onStepChange, imageStyle }: ITutorialStepperProps) => {
     const generateLessons = useMemo(
       () =>
         lessons.map((lesson, index) => ({
@@ -74,6 +75,7 @@ export const TutorialStepper = React.memo(
             label: 'Close',
             onClick: onLessonFinish,
           }}
+          onStepChange={onStepChange}
           useSideArrows
         />
       </Container>