webs-sdk 0.14.2 → 0.14.3

package/dist/components/SpinningWheel/SpinningWheel.jsx

@@ -1,744 +0,0 @@
-"use strict";
-"use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SpinningWheel = SpinningWheel;
-const react_1 = __importStar(require("react"));
-const react_2 = require("motion/react");
-const config_1 = require("./config");
-function SpinningWheel({ config, onResult, onError, canSpin = true, alreadySpunToday = false, theme = 'womantoday', userId, websiteId, apiBaseUrl = '/api/spin2win' }) {
-    const [isSpinning, setIsSpinning] = (0, react_1.useState)(false);
-    const [rotation, setRotation] = (0, react_1.useState)(0);
-    const [result, setResult] = (0, react_1.useState)(null);
-    const [showConfetti, setShowConfetti] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)(null);
-    const [hasSpunToday, setHasSpunToday] = (0, react_1.useState)(alreadySpunToday);
-    const [isCheckingStatus, setIsCheckingStatus] = (0, react_1.useState)(true);
-    const wheelRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const checkSpinStatus = async () => {
-            try {
-                const response = await fetch(`${apiBaseUrl}/status`, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        w: websiteId,
-                        u: userId
-                    })
-                });
-                if (!response.ok) {
-                    throw new Error(`Status API error: ${response.status}`);
-                }
-                const data = await response.json();
-                if (data.success === false || data.allow === false) {
-                    setHasSpunToday(true);
-                }
-                else {
-                    setHasSpunToday(false);
-                }
-            }
-            catch (err) {
-                console.error('Error checking spin status:', err);
-            }
-            finally {
-                setIsCheckingStatus(false);
-            }
-        };
-        checkSpinStatus();
-    }, [userId, websiteId, apiBaseUrl]);
-    const currentTheme = config_1.wheelThemes[theme];
-    const imgIndicator = currentTheme.indicatorAsset;
-    const imgFrame = currentTheme.borderAsset;
-    const imgPortions = currentTheme.wheelPortionsAsset;
-    const textFont = currentTheme.fonts.text;
-    const uiFont = currentTheme.fonts.ui;
-    const wheelSegments = [
-        {
-            id: 0,
-            reward_title: 'Oops',
-            reward_description: 'Nice try! Come back tomorrow for another chance',
-            reward_type: 'try-again',
-            reward_value: null,
-            color: '#FFDCDC'
-        },
-        {
-            id: 1,
-            reward_title: 'R10',
-            reward_description: 'Airtime prize',
-            reward_type: 'real',
-            reward_value: 10,
-            color: '#FE9595'
-        },
-        {
-            id: 2,
-            reward_title: 'Oops',
-            reward_description: 'So close! Try again tomorrow',
-            reward_type: 'boost',
-            reward_value: null,
-            color: '#FFDCDC'
-        },
-        {
-            id: 3,
-            reward_title: 'R10',
-            reward_description: 'Airtime prize',
-            reward_type: 'real',
-            reward_value: 10,
-            color: '#FE9595'
-        },
-        {
-            id: 4,
-            reward_title: 'Oops',
-            reward_description: 'Nice try! Come back tomorrow for another chance',
-            reward_type: 'try-again',
-            reward_value: null,
-            color: '#FFDCDC'
-        },
-        {
-            id: 5,
-            reward_title: 'R20',
-            reward_description: 'Airtime prize',
-            reward_type: 'real',
-            reward_value: 20,
-            color: '#FE9595'
-        },
-        {
-            id: 6,
-            reward_title: 'Oops',
-            reward_description: 'So close! Try again tomorrow',
-            reward_type: 'boost',
-            reward_value: null,
-            color: '#FFDCDC'
-        },
-        {
-            id: 7,
-            reward_title: 'R20',
-            reward_description: 'Airtime prize',
-            reward_type: 'real',
-            reward_value: 20,
-            color: '#FE9595'
-        },
-    ];
-    const segmentAngle = 360 / wheelSegments.length;
-    const spin = async () => {
-        if (isSpinning || !canSpin || hasSpunToday)
-            return;
-        setIsSpinning(true);
-        setResult(null);
-        setShowConfetti(false);
-        setError(null);
-        try {
-            const resultResponse = await fetch(`${apiBaseUrl}/throw-result`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    u: userId,
-                    w: websiteId
-                })
-            });
-            if (!resultResponse.ok) {
-                throw new Error(`Result API error: ${resultResponse.status}`);
-            }
-            const resultData = await resultResponse.json();
-            if (!resultData.success || resultData.segmentId === undefined) {
-                throw new Error('Invalid result from server');
-            }
-            const winningSegment = wheelSegments.find(s => s.id === resultData.segmentId);
-            if (!winningSegment) {
-                throw new Error(`Invalid segment ID: ${resultData.segmentId}`);
-            }
-            const imageAlignmentOffset = -22.5;
-            const segmentCenterAngle = (winningSegment.id * segmentAngle) + (segmentAngle / 2) + imageAlignmentOffset;
-            const randomOffset = (Math.random() - 0.5) * 20;
-            const randomSpins = Math.floor(Math.random() * 3) + 3;
-            const targetAngle = 360 - (segmentCenterAngle + randomOffset);
-            const totalRotation = rotation + (randomSpins * 360) + targetAngle;
-            setRotation(totalRotation);
-            setTimeout(async () => {
-                setIsSpinning(false);
-                try {
-                    const response = await fetch(`${apiBaseUrl}/throw`, {
-                        method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            u: userId,
-                            w: websiteId,
-                            result: {
-                                id: winningSegment.id,
-                                text: winningSegment.reward_title
-                            }
-                        })
-                    });
-                    if (!response.ok) {
-                        throw new Error(`API error: ${response.status}`);
-                    }
-                    const data = await response.json();
-                    if (data.success === false) {
-                        throw new Error('Spin was not successful');
-                    }
-                    setHasSpunToday(true);
-                    setTimeout(() => {
-                        setResult(winningSegment);
-                        onResult === null || onResult === void 0 ? void 0 : onResult(winningSegment);
-                        if (winningSegment.reward_type === 'real') {
-                            setShowConfetti(true);
-                        }
-                    }, 500);
-                }
-                catch (err) {
-                    const error = err instanceof Error ? err : new Error('Unknown error occurred');
-                    setError(error);
-                    onError === null || onError === void 0 ? void 0 : onError(error);
-                    setHasSpunToday(true);
-                }
-            }, 3000);
-        }
-        catch (err) {
-            setIsSpinning(false);
-            const error = err instanceof Error ? err : new Error('Failed to get spin result');
-            setError(error);
-            onError === null || onError === void 0 ? void 0 : onError(error);
-        }
-    };
-    return (<div className="flex flex-col items-center gap-8 p-8">
-      
-      {result && (<react_2.motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center" onClick={() => setResult(null)}>
-          <react_2.motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="absolute inset-0 bg-black/40" style={{ backdropFilter: 'blur(16px)' }}/>
-          
-          {showConfetti && (<div className="absolute inset-0 pointer-events-none overflow-hidden">
-              {[...Array(30)].map((_, i) => (<react_2.motion.div key={i} className="absolute w-3 h-3 rounded-full" style={{
-                        background: ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'][i % 5],
-                        left: '50%',
-                        top: '50%',
-                    }} initial={{ scale: 0, x: 0, y: 0, opacity: 1 }} animate={{
-                        scale: [0, 1, 0.5],
-                        x: (Math.random() - 0.5) * 800,
-                        y: (Math.random() - 0.5) * 800,
-                        opacity: [1, 1, 0],
-                    }} transition={{
-                        duration: 2,
-                        delay: i * 0.03,
-                        ease: "easeOut"
-                    }}/>))}
-            </div>)}
-          
-          <react_2.motion.div initial={{ opacity: 0, scale: 0.8, y: 50 }} animate={{ opacity: 1, scale: 1, y: 0 }} transition={{ duration: 0.4, ease: "easeOut", delay: 0.1 }} onClick={(e) => e.stopPropagation()} style={{
-                position: 'relative',
-                zIndex: 10,
-                backgroundColor: '#FFFFFF',
-                borderRadius: '24px',
-                width: '392px',
-                maxWidth: '90%',
-                padding: '0 24px',
-                boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)'
-            }}>
-            <button onClick={() => setResult(null)} style={{
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                padding: '20px',
-                background: 'transparent',
-                border: 'none',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px'
-            }} aria-label="Close">
-              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M1 1L9 9M9 1L1 9" stroke="#6D6665" strokeWidth="2" strokeLinecap="round"/>
-              </svg>
-            </button>
-
-            <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: '16px',
-                paddingTop: '60px',
-                paddingBottom: '60px'
-            }}>
-              {result.reward_type === 'real' ? (<>
-                  <react_2.motion.div initial={{ scale: 0, rotate: -180 }} animate={{ scale: 1, rotate: 0 }} transition={{ delay: 0.3, type: "spring", stiffness: 200, damping: 10 }}>
-                    <img src="/spin2win/assets/Icon-Celebrate@2x.png" alt="Celebrate" style={{ width: '105px', height: '105px' }}/>
-                  </react_2.motion.div>
-                  
-                  <react_2.motion.h3 initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.5 }} style={{
-                    fontFamily: uiFont,
-                    fontWeight: 700,
-                    fontSize: '26.25px',
-                    lineHeight: '1.2em',
-                    letterSpacing: '0.9%',
-                    textAlign: 'center',
-                    color: '#6D6665',
-                    margin: 0
-                }}>
-                    You won {result.reward_title}!
-                  </react_2.motion.h3>
-                  
-                  <react_2.motion.p initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.7 }} style={{
-                    fontFamily: uiFont,
-                    fontWeight: 500,
-                    fontSize: '16px',
-                    lineHeight: '1.32em',
-                    textAlign: 'center',
-                    color: '#6D6665',
-                    margin: 0
-                }}>
-                    The money will be sent to your Vodacom account. Processing may take up to 24 hours.
-                  </react_2.motion.p>
-                </>) : (<>
-                  <react_2.motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3, type: "spring", stiffness: 200, damping: 10 }}>
-                    <img src="/spin2win/assets/Icon-Sad@2x.png" alt="Sad" style={{ width: '105px', height: '105px' }}/>
-                  </react_2.motion.div>
-                  
-                  <react_2.motion.h3 initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.5 }} style={{
-                    fontFamily: uiFont,
-                    fontWeight: 700,
-                    fontSize: '26.25px',
-                    lineHeight: '1.2em',
-                    letterSpacing: '0.9%',
-                    textAlign: 'center',
-                    color: '#6D6665',
-                    margin: 0
-                }}>
-                    Oops... so close!
-                  </react_2.motion.h3>
-                  
-                  <react_2.motion.p initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.7 }} style={{
-                    fontFamily: uiFont,
-                    fontWeight: 500,
-                    fontSize: '16px',
-                    lineHeight: '1.32em',
-                    textAlign: 'center',
-                    color: '#6D6665',
-                    margin: 0
-                }}>
-                    No cash reward this time, but you can try again tomorrow!
-                  </react_2.motion.p>
-                </>)}
-            </div>
-          </react_2.motion.div>
-        </react_2.motion.div>)}
-
-      
-      {error && (<react_2.motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center" onClick={() => setError(null)}>
-          <react_2.motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="absolute inset-0 bg-black/40" style={{ backdropFilter: 'blur(16px)' }}/>
-          
-          <react_2.motion.div initial={{ opacity: 0, scale: 0.8, y: 50 }} animate={{ opacity: 1, scale: 1, y: 0 }} transition={{ duration: 0.4, ease: "easeOut", delay: 0.1 }} onClick={(e) => e.stopPropagation()} style={{
-                position: 'relative',
-                zIndex: 10,
-                backgroundColor: '#FFFFFF',
-                borderRadius: '24px',
-                width: '392px',
-                maxWidth: '90%',
-                padding: '0 24px',
-                boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)'
-            }}>
-            <button onClick={() => setError(null)} style={{
-                position: 'absolute',
-                top: 0,
-                right: 0,
-                padding: '20px',
-                background: 'transparent',
-                border: 'none',
-                cursor: 'pointer',
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px'
-            }} aria-label="Close">
-              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M1 1L9 9M9 1L1 9" stroke="#6D6665" strokeWidth="2" strokeLinecap="round"/>
-              </svg>
-            </button>
-
-            <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: '16px',
-                paddingTop: '60px',
-                paddingBottom: '60px'
-            }}>
-              <react_2.motion.div initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: 0.3, type: "spring", stiffness: 200, damping: 10 }}>
-                <img src="/spin2win/assets/Icon-Warning@2x.png" alt="Warning" style={{ width: '105px', height: '105px' }}/>
-              </react_2.motion.div>
-              
-              <react_2.motion.h3 initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.5 }} style={{
-                fontFamily: uiFont,
-                fontWeight: 700,
-                fontSize: '26.25px',
-                lineHeight: '1.2em',
-                letterSpacing: '0.9%',
-                textAlign: 'center',
-                color: '#595959',
-                margin: 0
-            }}>
-                Something went wrong
-              </react_2.motion.h3>
-              
-              <react_2.motion.p initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.7 }} style={{
-                fontFamily: uiFont,
-                fontWeight: 500,
-                fontSize: '16px',
-                lineHeight: '1.37em',
-                textAlign: 'center',
-                color: '#595959',
-                margin: 0
-            }}>
-                Your spin was registered, but we couldn't process the payment right now.
-                <br />
-                Please contact support if the issue persists.
-              </react_2.motion.p>
-            </div>
-          </react_2.motion.div>
-        </react_2.motion.div>)}
-      
-      
-      <div className="flex flex-col items-center max-w-md" style={{ gap: '24px' }}>
-        {!result && !isSpinning ? (<>
-            <h1 style={{
-                fontFamily: uiFont,
-                fontSize: '32px',
-                fontWeight: 700,
-                lineHeight: '1.25em',
-                color: currentTheme.colors.heading,
-                margin: 0
-            }}>
-              {config.copy.headline}
-            </h1>
-            <p style={{
-                fontFamily: uiFont,
-                fontSize: '16px',
-                fontWeight: 400,
-                lineHeight: '1.5em',
-                textAlign: 'center',
-                color: '#3f3f3f',
-                margin: 0
-            }}>
-              {config.copy.subcopy}
-            </p>
-          </>) : isSpinning ? (<>
-            <h1 style={{
-                fontFamily: uiFont,
-                fontSize: '32px',
-                fontWeight: 700,
-                lineHeight: '1.25em',
-                color: currentTheme.colors.heading,
-                margin: 0
-            }}>
-              {config.copy.spinningHeadline}
-            </h1>
-            <p style={{
-                fontFamily: uiFont,
-                fontSize: '16px',
-                fontWeight: 400,
-                lineHeight: '1.5em',
-                textAlign: 'center',
-                color: '#6D6665',
-                margin: 0
-            }}>
-              {config.copy.spinningSubcopy}
-            </p>
-          </>) : null}
-      </div>
-
-      
-      <div className="relative w-[400px] h-[400px]" style={{
-            filter: 'drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.15))'
-        }}>
-        
-        <react_2.motion.div ref={wheelRef} className="absolute left-[1.39%] top-[1.44%] w-[97.17%] h-[97.17%] z-5" style={{
-            filter: 'drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1))',
-            willChange: 'transform',
-            backfaceVisibility: 'hidden',
-            WebkitFontSmoothing: 'antialiased'
-        }} animate={{ rotate: rotation }} transition={{ duration: 3, ease: "easeOut" }}>
-          <img src={imgPortions} alt="" className="w-full h-full object-contain" style={{
-            imageRendering: 'auto',
-            backfaceVisibility: 'hidden',
-            transform: 'translateZ(0)'
-        }}/>
-        </react_2.motion.div>
-
-        
-        <react_2.motion.div className="absolute left-[1.39%] top-[1.44%] w-[97.17%] h-[97.17%] z-10" style={{
-            willChange: 'transform',
-            backfaceVisibility: 'hidden',
-            WebkitFontSmoothing: 'antialiased'
-        }} animate={{ rotate: rotation }} transition={{ duration: 3, ease: "easeOut" }}>
-          <div className="absolute inset-0">
-            
-            <div className="absolute flex left-1/2 -translate-x-1/2 items-center justify-center" style={{ top: '8%' }}>
-              <div className="flex flex-col gap-0.5 items-center" style={{ transform: 'rotate(0deg)' }}>
-                <div className="text-center" style={{
-            fontFamily: textFont,
-            fontWeight: 600,
-            fontSize: '30px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.primary
-        }}>
-                  Oops
-                </div>
-              </div>
-            </div>
-
-            
-            <div className="absolute flex items-center justify-center" style={{ top: '18%', right: '18%' }}>
-              <div className="flex flex-col gap-[7px] items-center" style={{ transform: 'rotate(45deg)' }}>
-                <div className="text-center" style={{
-            fontFamily: textFont,
-            fontWeight: 600,
-            fontSize: '30px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.primary
-        }}>
-                  R10
-                </div>
-                <div className="text-center" style={{
-            fontFamily: uiFont,
-            fontWeight: 600,
-            fontSize: '28px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.secondary
-        }}>
-                  💰
-                </div>
-              </div>
-            </div>
-
-            
-            <div className="absolute flex items-center justify-center" style={{ top: '50%', right: '2%', transform: 'translateY(-50%)' }}>
-              <div className="flex flex-col gap-0.5 items-center" style={{ transform: 'rotate(90deg)' }}>
-                <div className="text-center" style={{
-            fontFamily: textFont,
-            fontWeight: 600,
-            fontSize: '30px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.primary
-        }}>
-                  Oops
-                </div>
-              </div>
-            </div>
-
-            
-            <div className="absolute flex items-center justify-center" style={{ bottom: '18%', right: '18%' }}>
-              <div className="flex flex-col gap-[7px] items-center" style={{ transform: 'rotate(135deg)' }}>
-                <div className="text-center" style={{
-            fontFamily: textFont,
-            fontWeight: 600,
-            fontSize: '30px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.primary
-        }}>
-                  R10
-                </div>
-                <div className="text-center" style={{
-            fontFamily: uiFont,
-            fontWeight: 600,
-            fontSize: '28px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.secondary
-        }}>
-                  💰
-                </div>
-              </div>
-            </div>
-
-            
-            <div className="absolute flex left-1/2 -translate-x-1/2 items-center justify-center" style={{ bottom: '8%' }}>
-              <div className="flex flex-col gap-0.5 items-center" style={{ transform: 'rotate(180deg)' }}>
-                <div className="text-center" style={{
-            fontFamily: textFont,
-            fontWeight: 600,
-            fontSize: '30px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.primary
-        }}>
-                  Oops
-                </div>
-              </div>
-            </div>
-
-            
-            <div className="absolute flex items-center justify-center" style={{ bottom: '18%', left: '18%' }}>
-              <div className="flex flex-col gap-[7px] items-center" style={{ transform: 'rotate(-135deg)' }}>
-                <div className="text-center" style={{
-            fontFamily: textFont,
-            fontWeight: 600,
-            fontSize: '30px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.primary
-        }}>
-                  R20
-                </div>
-                <div className="text-center" style={{
-            fontFamily: uiFont,
-            fontWeight: 600,
-            fontSize: '28px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.secondary
-        }}>
-                  💰
-                </div>
-              </div>
-            </div>
-
-            
-            <div className="absolute flex items-center justify-center" style={{ top: '50%', left: '2%', transform: 'translateY(-50%)' }}>
-              <div className="flex flex-col gap-0.5 items-center" style={{ transform: 'rotate(-90deg)' }}>
-                <div className="text-center" style={{
-            fontFamily: textFont,
-            fontWeight: 600,
-            fontSize: '30px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.primary
-        }}>
-                  Oops
-                </div>
-              </div>
-            </div>
-
-            
-            <div className="absolute flex items-center justify-center" style={{ top: '18%', left: '18%' }}>
-              <div className="flex flex-col gap-[7px] items-center" style={{ transform: 'rotate(-45deg)' }}>
-                <div className="text-center" style={{
-            fontFamily: textFont,
-            fontWeight: 600,
-            fontSize: '30px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.primary
-        }}>
-                  R20
-                </div>
-                <div className="text-center" style={{
-            fontFamily: uiFont,
-            fontWeight: 600,
-            fontSize: '28px',
-            lineHeight: '1.2em',
-            color: currentTheme.colors.text.secondary
-        }}>
-                  💰
-                </div>
-              </div>
-            </div>
-          </div>
-        </react_2.motion.div>
-
-        
-        <div className="absolute inset-0 z-15 pointer-events-none">
-          <img src={imgFrame} alt="" className="w-full h-full object-contain" style={{
-            filter: 'drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1))',
-            imageRendering: 'auto',
-            backfaceVisibility: 'hidden',
-            transform: 'translateZ(0)'
-        }}/>
-        </div>
-
-        
-        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-20" style={{ marginTop: '-15px' }}>
-          <react_2.motion.div className="w-[120px] h-[120px] relative" style={{
-            filter: 'drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15))'
-        }} animate={isSpinning ? { scale: [1, 1.15, 1] } : {}} transition={{
-            duration: 0.5,
-            repeat: isSpinning ? Infinity : 0,
-            ease: "easeInOut"
-        }}>
-            <img src={imgIndicator} alt="" className="w-full h-full object-contain" style={{
-            imageRendering: 'auto',
-            backfaceVisibility: 'hidden',
-            transform: 'translateZ(0)'
-        }}/>
-            <img src="/spin2win/assets/circle-inner-56586a.png" alt="" className="absolute object-contain" style={{
-            width: '60px',
-            height: '60px',
-            left: '48%',
-            top: '60%',
-            transform: 'translate(-50%, -50%) translateZ(0)',
-            imageRendering: 'auto',
-            backfaceVisibility: 'hidden'
-        }}/>
-          </react_2.motion.div>
-        </div>
-      </div>
-      
-      <div className="flex flex-col items-center gap-4" style={{ width: '70%', maxWidth: '1200px' }}>
-        {!isCheckingStatus && (<button onClick={spin} disabled={isSpinning || !canSpin || hasSpunToday} style={{
-                fontFamily: uiFont,
-                fontWeight: 700,
-                fontSize: '14px',
-                lineHeight: '1.32em',
-                letterSpacing: '0.5%',
-                color: '#FFFFFF',
-                backgroundColor: currentTheme.colors.button,
-                borderRadius: '40px',
-                padding: '10px 15px',
-                border: 'none',
-                cursor: isSpinning || !canSpin || hasSpunToday ? 'not-allowed' : 'pointer',
-                opacity: isSpinning || !canSpin || hasSpunToday ? 0.5 : 1,
-                transition: 'all 0.2s ease'
-            }} onMouseEnter={(e) => {
-                if (!isSpinning && canSpin && !hasSpunToday) {
-                    e.currentTarget.style.transform = 'scale(1.05)';
-                }
-            }} onMouseLeave={(e) => {
-                e.currentTarget.style.transform = 'scale(1)';
-            }}>
-            {isSpinning ? 'SPINNING...' : 'SPIN THE WHEEL!'}
-          </button>)}
-      </div>
-      
-      <p style={{
-            fontFamily: uiFont,
-            fontWeight: 400,
-            fontSize: '16px',
-            lineHeight: '1.5em',
-            textAlign: 'center',
-            color: '#B6B2B2',
-            margin: 0,
-            padding: '0 20px',
-            marginTop: '60px'
-        }}>
-        Cash prizes are transferred to the Vodacom account linked to your profile. Please make sure your account details are up to date to receive cash prizes.
-      </p>
-    </div>);
-}
-exports.default = SpinningWheel;
-//# sourceMappingURL=SpinningWheel.jsx.map