tabexseriescomponents 0.2.1279 → 0.2.1281

package/dist/index.cjs.js

@@ -62314,6 +62314,33 @@ var Newsletterfooter = function Newsletterfooter(props) {
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: 'https://tabex-co.com/storage/StaticImages/mastercard.png',
     className: "".concat(footerStyles.payimg)
+  })), sectionproperties.showtamara == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(footerStyles.payimgcont),
+    style: {
+      width: '70px',
+      height: '40px'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: 'https://tabex-co.com/storage/StaticImages/tamara.png',
+    className: "".concat(footerStyles.payimg)
+  })), sectionproperties.showtabby == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(footerStyles.payimgcont),
+    style: {
+      width: '70px',
+      height: '40px'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: 'https://tabex-co.com/storage/StaticImages/tabby.png',
+    className: "".concat(footerStyles.payimg)
+  })), sectionproperties.showapplepay == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(footerStyles.payimgcont),
+    style: {
+      width: '100px',
+      height: '40px'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: 'https://tabex-co.com/storage/StaticImages/applepay.png',
+    className: "".concat(footerStyles.payimg)
   })), sectionproperties.showinstapay == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(footerStyles.payimgcont),
     style: {
@@ -74633,6 +74660,255 @@ var MapsSection = function MapsSection(props) {
   }))));
 };
 
+// import { FetchingContext } from '../../Contexts/FetchingContext';
+// import { FetchingContext } from '../../../FetchingContext/FetchingContext';
+
+var colorTheme = {
+  wheelSegments: ['#ff8a5b', '#f7b801', '#58c4dd', '#7dd87d', '#6c63ff', '#ff5d8f', '#00b894', '#3d405b'],
+  pageGlowStart: '#fff4df',
+  pageGlowMiddle: '#ffe3ec',
+  pageGlowEnd: '#ffffff',
+  floatingButtonStart: '#ffd166',
+  floatingButtonMiddle: '#ff9f1c',
+  floatingButtonEnd: '#ff4d6d',
+  floatingButtonShadow: 'rgba(35, 25, 66, 0.22)',
+  floatingButtonShadowHover: 'rgba(35, 25, 66, 0.28)',
+  floatingButtonRing: 'rgba(255, 255, 255, 0.22)',
+  floatingButtonRingHover: 'rgba(255, 255, 255, 0.28)',
+  floatingButtonDash: 'rgba(255, 255, 255, 0.52)',
+  floatingButtonLabel: '#231942',
+  overlay: 'rgba(24, 18, 43, 0.64)',
+  cardBackground: 'rgba(255, 255, 255, 0.88)',
+  cardShadow: 'rgba(41, 24, 66, 0.16)',
+  closeButtonBackground: '#f4ecff',
+  closeButtonText: '#231942',
+  eyebrowBackground: '#fff3c4',
+  eyebrowText: '#9a6400',
+  headingText: '#231942',
+  bodyText: '#5e548e',
+  pointer: '#ff4d6d',
+  pointerShadow: 'rgba(255, 77, 109, 0.28)',
+  wheelBorder: '#ffffff',
+  wheelOuterShadow: 'rgba(35, 25, 66, 0.18)',
+  wheelInnerRing: 'rgba(255, 255, 255, 0.2)',
+  wheelDash: 'rgba(255, 255, 255, 0.55)',
+  wheelLabelText: '#ffffff',
+  wheelLabelShadow: 'rgba(0, 0, 0, 0.25)',
+  wheelCenterStart: '#231942',
+  wheelCenterEnd: '#5e548e',
+  wheelCenterShadow: 'rgba(35, 25, 66, 0.28)',
+  primaryButtonStart: '#ff4d6d',
+  primaryButtonEnd: '#ff9f1c',
+  primaryButtonShadow: 'rgba(255, 77, 109, 0.24)',
+  primaryButtonShadowHover: 'rgba(255, 77, 109, 0.3)',
+  resultBoxBackground: '#fff7fb',
+  resultBoxBorder: '#ffd6e0',
+  celebrationTop: 'rgba(255, 255, 255, 0.95)',
+  celebrationBottom: 'rgba(255, 240, 229, 0.96)',
+  celebrationAccentStart: '#fff4df',
+  celebrationAccentEnd: '#ffe0f0',
+  celebrationBorder: '#ffd4a8',
+  successBadgeStart: '#ff9f1c',
+  successBadgeEnd: '#ff4d6d',
+  successBadgeText: '#ffffff',
+  successBadgeShadow: 'rgba(255, 77, 109, 0.2)',
+  prizeHighlightStart: '#231942',
+  prizeHighlightEnd: '#5e548e',
+  prizeHighlightText: '#ffffff',
+  prizeHighlightShadow: 'rgba(35, 25, 66, 0.22)',
+  confettiOne: '#ff4d6d',
+  confettiTwo: '#f7b801',
+  confettiThree: '#58c4dd',
+  confettiFour: '#7dd87d'
+};
+
+// const gifts = [
+// { label: '10% OFF', color: colorTheme.wheelSegments[0] },
+// { label: 'Free Shipping', color: colorTheme.wheelSegments[1] },
+// { label: '15% OFF', color: colorTheme.wheelSegments[2] },
+// { label: 'Buy 1 Get 1', color: colorTheme.wheelSegments[3] },
+// { label: '20% OFF', color: colorTheme.wheelSegments[4] },
+// { label: 'Free Gift Box', color: colorTheme.wheelSegments[5] },
+// { label: '$5 Coupon', color: colorTheme.wheelSegments[6] },
+// { label: 'Try Again', color: colorTheme.wheelSegments[7] },
+// ];
+
+var WheelSpin = function WheelSpin(props) {
+  var GeneralAPIMutationContext = props.actions.GeneralAPIMutationContext;
+  var ApplyPromoCodeMutationContext = props.actions.ApplyPromoCodeMutationContext;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    rotation = _useState4[0],
+    setRotation = _useState4[1];
+  var _useState5 = React.useState(null),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    selectedGift = _useState6[0],
+    setSelectedGift = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    isSpinning = _useState8[0],
+    setIsSpinning = _useState8[1];
+  var _useState9 = React.useState(false),
+    _useState0 = _slicedToArray__default["default"](_useState9, 2),
+    showCelebration = _useState0[0],
+    setShowCelebration = _useState0[1];
+  var _useState1 = React.useState([]),
+    _useState10 = _slicedToArray__default["default"](_useState1, 2),
+    gifts = _useState10[0],
+    setgifts = _useState10[1];
+  var segmentAngle = 360 / gifts.length;
+  var wheelBackground = "conic-gradient(".concat(gifts.map(function (gift, index) {
+    var start = index * segmentAngle;
+    var end = start + segmentAngle;
+    return "".concat(gift.spinner_color, " ").concat(start, "deg ").concat(end, "deg");
+  }).join(', '), ")");
+  var handleSpin = function handleSpin() {
+    if (isSpinning) {
+      return;
+    }
+    var randomIndex = Math.floor(Math.random() * gifts.length);
+    var extraTurns = 360 * (5 + Math.floor(Math.random() * 3));
+    var landingAngle = randomIndex * segmentAngle + segmentAngle / 2;
+    var targetRotation = extraTurns + (360 - landingAngle);
+    setIsSpinning(true);
+    setSelectedGift(null);
+    setShowCelebration(false);
+    setRotation(function (previousRotation) {
+      return previousRotation + targetRotation;
+    });
+    window.setTimeout(function () {
+      var chosen_gift = gifts[randomIndex];
+      if (chosen_gift.copounid == 'tryagain') {
+        setIsOpen(false);
+      } else {
+        setSelectedGift(chosen_gift);
+        setIsSpinning(false);
+        setShowCelebration(true);
+        ApplyPromoCodeMutationContext.mutate({
+          couponname: chosen_gift.couponname,
+          functype: 'add'
+        });
+      }
+    }, 5200);
+  };
+  var handleClose = function handleClose() {
+    if (isSpinning) {
+      return;
+    }
+    setIsOpen(false);
+  };
+  var fetchGifts_Api = function fetchGifts_Api() {
+    GeneralAPIMutationContext.mutate({
+      endpointurl: '/fetch_coupons_spinner',
+      // productid: productid,
+      // reviewpayloadobj: reviewpayloadobj,
+      mutateSuccesscallback: function mutateSuccesscallback(data, variables) {
+        if (data.data.status) {
+          var gifts_array_temp = data.data.data;
+          gifts_array_temp.push({
+            copounid: 'tryagain',
+            spinner_color: 'black',
+            description_en: 'Better luck next time'
+          });
+          setgifts(gifts_array_temp);
+          // var data_gifts = data.data.data
+
+          // alert(JSON.stringify(data.data));
+          // NotificationManager.success('', 'Success');
+          // addreviewcallback();
+          // window.location.reload();
+        } else {
+          NotificationManager.warning('', data.data.reason);
+        }
+      }
+    });
+  };
+  var handleOpen = function handleOpen() {
+    fetchGifts_Api();
+    setSelectedGift(null);
+    setRotation(0);
+    setIsSpinning(false);
+    setShowCelebration(false);
+    setIsOpen(true);
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "wheel-spin-section"
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "open-popup-button",
+    onClick: handleOpen,
+    type: "button",
+    "aria-label": "Open lucky wheel"
+  }, "Spin"), isOpen ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "popup-overlay",
+    onClick: handleClose
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "content-card",
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "close-button",
+    onClick: handleClose,
+    disabled: isSpinning,
+    type: "button"
+  }, "\xD7"), !showCelebration ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("h2", null, "Spin the wheel and unlock your surprise gift"), /*#__PURE__*/React__default["default"].createElement("p", null, "Tap the button, watch the wheel rotate, and get a random reward."), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "wheel-stage"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "pointer"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "wheel",
+    style: {
+      transform: "rotate(".concat(rotation, "deg)"),
+      background: wheelBackground
+    }
+  }, gifts.map(function (gift, index) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "label",
+      key: gift.description_en,
+      style: {
+        transform: "rotate(".concat(index * segmentAngle + segmentAngle / 2, "deg)")
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      style: {
+        transform: 'translateX(-50%)'
+      }
+    }, gift.description_en));
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "wheel-center"
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, "WIN")))), /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "spin-button",
+    onClick: handleSpin,
+    disabled: isSpinning,
+    type: "button"
+  }, isSpinning ? 'Spinning...' : 'Spin Now')) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "celebration-card"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "confetti confetti-one"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "confetti confetti-two"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "confetti confetti-three"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "confetti confetti-four"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "success-badge"
+  }, "Congratulations"), /*#__PURE__*/React__default["default"].createElement("h2", null, "You unlocked a special reward"), /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "celebration-copy"
+  }, "Your lucky spin landed on", /*#__PURE__*/React__default["default"].createElement("strong", null, " ", selectedGift.description_en)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "prize-highlight"
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, selectedGift.description_en)), /*#__PURE__*/React__default["default"].createElement("button", {
+    className: "claim-button",
+    onClick: handleClose,
+    type: "button"
+  }, "Awesome")))) : null, /*#__PURE__*/React__default["default"].createElement("style", {
+    jsx: true
+  }, "\n                .wheel-spin-section {\n                    position: relative;\n                    min-height: 0;\n                    padding: 0;\n                    background: none;\n                }\n\n                .open-popup-button {\n                    position: fixed;\n                    right: 18px;\n                    bottom: 24px;\n                    z-index: 9998;\n                    display: inline-flex;\n                    align-items: center;\n                    justify-content: center;\n                    width: 84px;\n                    height: 84px;\n                    border: none;\n                    border-radius: 50%;\n                    padding: 0;\n                    background: radial-gradient(circle at 30% 30%, ".concat(colorTheme.floatingButtonStart, " 0%, ").concat(colorTheme.floatingButtonMiddle, " 34%, ").concat(colorTheme.floatingButtonEnd, " 100%);\n                    color: ").concat(colorTheme.wheelLabelText, ";\n                    font-size: 16px;\n                    font-weight: 800;\n                    cursor: pointer;\n                    box-shadow:\n                        0 18px 30px ").concat(colorTheme.floatingButtonShadow, ",\n                        inset 0 0 0 4px ").concat(colorTheme.floatingButtonRing, ";\n                    transition:\n                        transform 0.2s ease,\n                        box-shadow 0.2s ease;\n                }\n\n                .open-popup-button:hover {\n                    transform: scale(1.04);\n                    box-shadow:\n                        0 22px 36px ").concat(colorTheme.floatingButtonShadowHover, ",\n                        inset 0 0 0 4px ").concat(colorTheme.floatingButtonRingHover, ";\n                }\n\n                .open-popup-button::before {\n                    content: '';\n                    position: absolute;\n                    inset: 8px;\n                    border-radius: 50%;\n                    border: 1px dashed ").concat(colorTheme.floatingButtonDash, ";\n                }\n\n                .open-popup-button::after {\n                    content: '';\n                    position: absolute;\n                    bottom: -28px;\n                    left: 50%;\n                    color: ").concat(colorTheme.floatingButtonLabel, ";\n                    font-size: 11px;\n                    font-weight: 800;\n                    letter-spacing: 0.04em;\n                    white-space: nowrap;\n                    transform: translateX(-50%);\n                }\n\n                .popup-overlay {\n                    position: fixed;\n                    inset: 0;\n                    z-index: 9999;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    padding: 20px;\n                    background: ").concat(colorTheme.overlay, ";\n                    backdrop-filter: blur(8px);\n                }\n\n                .content-card {\n                    position: relative;\n                    width: 100%;\n                    max-width: 560px;\n                    padding: 20px 20px 18px;\n                    border-radius: 28px;\n                    background: ").concat(colorTheme.cardBackground, ";\n                    box-shadow: 0 24px 80px ").concat(colorTheme.cardShadow, ";\n                    text-align: center;\n                    backdrop-filter: blur(12px);\n                    animation: popup-enter 0.3s ease;\n                }\n\n                .close-button {\n                    position: absolute;\n                    top: 16px;\n                    right: 16px;\n                    width: 42px;\n                    height: 42px;\n                    border: none;\n                    border-radius: 50%;\n                    background: ").concat(colorTheme.closeButtonBackground, ";\n                    color: ").concat(colorTheme.closeButtonText, ";\n                    font-size: 24px;\n                    line-height: 1;\n                    cursor: pointer;\n                }\n\n                .close-button:disabled {\n                    cursor: not-allowed;\n                    opacity: 0.6;\n                }\n\n                .eyebrow {\n                    display: inline-block;\n                    margin-bottom: 8px;\n                    padding: 6px 12px;\n                    border-radius: 999px;\n                    background: ").concat(colorTheme.eyebrowBackground, ";\n                    color: ").concat(colorTheme.eyebrowText, ";\n                    font-size: 11px;\n                    font-weight: 700;\n                    letter-spacing: 0.08em;\n                    text-transform: uppercase;\n                }\n\n                h2 {\n                    margin: 0;\n                    color: ").concat(colorTheme.headingText, ";\n                    font-size: clamp(22px, 4vw, 34px);\n                    line-height: 1.08;\n                }\n\n                p {\n                    margin: 8px auto 0;\n                    max-width: 420px;\n                    color: ").concat(colorTheme.bodyText, ";\n                    font-size: 14px;\n                    line-height: 1.45;\n                }\n\n                .wheel-stage {\n                    position: relative;\n                    display: flex;\n                    justify-content: center;\n                    margin: 18px 0 14px;\n                }\n\n                .pointer {\n                    position: absolute;\n                    top: -10px;\n                    left: 50%;\n                    z-index: 3;\n                    width: 0;\n                    height: 0;\n                    border-left: 18px solid transparent;\n                    border-right: 18px solid transparent;\n                    border-top: 34px solid ").concat(colorTheme.pointer, ";\n                    transform: translateX(-50%);\n                    filter: drop-shadow(0 10px 14px ").concat(colorTheme.pointerShadow, ");\n                }\n\n                .wheel {\n                    position: relative;\n                    width: min(78vw, 400px, 52vh);\n                    height: min(78vw, 400px, 52vh);\n                    border: 10px solid ").concat(colorTheme.wheelBorder, ";\n                    border-radius: 50%;\n                    box-shadow:\n                        0 18px 42px ").concat(colorTheme.wheelOuterShadow, ",\n                        inset 0 0 0 10px ").concat(colorTheme.wheelInnerRing, ";\n                    transition: transform 4.8s cubic-bezier(0.18, 0.89, 0.32, 1.08);\n                    overflow: hidden;\n                }\n\n                .wheel::after {\n                    content: '';\n                    position: absolute;\n                    inset: 18px;\n                    border-radius: 50%;\n                    border: 1px dashed ").concat(colorTheme.wheelDash, ";\n                }\n\n                .label {\n                    position: absolute;\n                    inset: 0;\n                    transform-origin: center;\n                }\n\n                .label span {\n                    position: absolute;\n                    top: 16px;\n                    left: 50%;\n                    width: 132px;\n                    padding: 0 6px;\n                    color: ").concat(colorTheme.wheelLabelText, ";\n                    font-size: 11px;\n                    font-weight: 800;\n                    letter-spacing: 0.03em;\n                    text-align: center;\n                    text-shadow: 0 2px 10px ").concat(colorTheme.wheelLabelShadow, ";\n                    white-space: nowrap;\n                }\n\n                .wheel-center {\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    z-index: 2;\n                    display: grid;\n                    place-items: center;\n                    width: 88px;\n                    height: 88px;\n                    border: 7px solid ").concat(colorTheme.wheelBorder, ";\n                    border-radius: 50%;\n                    background: linear-gradient(135deg, ").concat(colorTheme.wheelCenterStart, ", ").concat(colorTheme.wheelCenterEnd, ");\n                    color: ").concat(colorTheme.wheelLabelText, ";\n                    font-size: 22px;\n                    font-weight: 800;\n                    transform: translate(-50%, -50%);\n                    box-shadow: 0 14px 26px ").concat(colorTheme.wheelCenterShadow, ";\n                }\n\n                .spin-button {\n                    border: none;\n                    border-radius: 999px;\n                    padding: 14px 28px;\n                    background: linear-gradient(135deg, ").concat(colorTheme.primaryButtonStart, ", ").concat(colorTheme.primaryButtonEnd, ");\n                    color: ").concat(colorTheme.wheelLabelText, ";\n                    font-size: 15px;\n                    font-weight: 800;\n                    cursor: pointer;\n                    box-shadow: 0 18px 28px ").concat(colorTheme.primaryButtonShadow, ";\n                    transition:\n                        transform 0.2s ease,\n                        box-shadow 0.2s ease,\n                        opacity 0.2s ease;\n                }\n\n                .spin-button:hover {\n                    transform: translateY(-2px);\n                    box-shadow: 0 20px 34px ").concat(colorTheme.primaryButtonShadowHover, ";\n                }\n\n                .spin-button:disabled {\n                    cursor: not-allowed;\n                    opacity: 0.7;\n                    transform: none;\n                }\n\n                .result-box {\n                    margin-top: 12px;\n                    padding: 12px 14px;\n                    border-radius: 16px;\n                    background: ").concat(colorTheme.resultBoxBackground, ";\n                    border: 1px solid ").concat(colorTheme.resultBoxBorder, ";\n                }\n\n                .result-box p {\n                    margin: 0;\n                }\n\n                .celebration-card {\n                    position: relative;\n                    overflow: hidden;\n                    margin-top: 10px;\n                    padding: 22px 18px 18px;\n                    border-radius: 24px;\n                    background:\n                        radial-gradient(circle at top, ").concat(colorTheme.celebrationTop, ", ").concat(colorTheme.celebrationBottom, "),\n                        linear-gradient(135deg, ").concat(colorTheme.celebrationAccentStart, ", ").concat(colorTheme.celebrationAccentEnd, ");\n                    border: 1px solid ").concat(colorTheme.celebrationBorder, ";\n                }\n\n                .success-badge {\n                    display: inline-flex;\n                    align-items: center;\n                    justify-content: center;\n                    margin-bottom: 10px;\n                    padding: 8px 14px;\n                    border-radius: 999px;\n                    background: linear-gradient(135deg, ").concat(colorTheme.successBadgeStart, ", ").concat(colorTheme.successBadgeEnd, ");\n                    color: ").concat(colorTheme.successBadgeText, ";\n                    font-size: 12px;\n                    font-weight: 800;\n                    letter-spacing: 0.06em;\n                    text-transform: uppercase;\n                    box-shadow: 0 14px 24px ").concat(colorTheme.successBadgeShadow, ";\n                }\n\n                .celebration-copy {\n                    max-width: 420px;\n                }\n\n                .prize-highlight {\n                    display: inline-flex;\n                    align-items: center;\n                    justify-content: center;\n                    min-width: 220px;\n                    margin-top: 14px;\n                    padding: 16px 20px;\n                    border-radius: 20px;\n                    background: linear-gradient(135deg, ").concat(colorTheme.prizeHighlightStart, ", ").concat(colorTheme.prizeHighlightEnd, ");\n                    color: ").concat(colorTheme.prizeHighlightText, ";\n                    box-shadow: 0 24px 40px ").concat(colorTheme.prizeHighlightShadow, ";\n                }\n\n                .prize-highlight span {\n                    font-size: 22px;\n                    font-weight: 800;\n                    letter-spacing: 0.02em;\n                }\n\n                .claim-button {\n                    margin-top: 16px;\n                    border: none;\n                    border-radius: 999px;\n                    padding: 14px 28px;\n                    background: linear-gradient(135deg, ").concat(colorTheme.primaryButtonStart, ", ").concat(colorTheme.primaryButtonEnd, ");\n                    color: ").concat(colorTheme.wheelLabelText, ";\n                    font-size: 15px;\n                    font-weight: 800;\n                    cursor: pointer;\n                    box-shadow: 0 18px 28px ").concat(colorTheme.primaryButtonShadow, ";\n                }\n\n                .claim-button:hover {\n                    transform: translateY(-2px);\n                }\n\n                .confetti {\n                    position: absolute;\n                    width: 14px;\n                    height: 14px;\n                    border-radius: 4px;\n                    opacity: 0.9;\n                    animation: float-confetti 2.8s ease-in-out infinite;\n                }\n\n                .confetti-one {\n                    top: 18px;\n                    left: 18px;\n                    background: ").concat(colorTheme.confettiOne, ";\n                    transform: rotate(12deg);\n                }\n\n                .confetti-two {\n                    top: 28px;\n                    right: 40px;\n                    background: ").concat(colorTheme.confettiTwo, ";\n                    animation-delay: 0.25s;\n                    transform: rotate(24deg);\n                }\n\n                .confetti-three {\n                    bottom: 34px;\n                    left: 46px;\n                    background: ").concat(colorTheme.confettiThree, ";\n                    animation-delay: 0.45s;\n                    transform: rotate(42deg);\n                }\n\n                .confetti-four {\n                    right: 22px;\n                    bottom: 44px;\n                    background: ").concat(colorTheme.confettiFour, ";\n                    animation-delay: 0.65s;\n                    transform: rotate(18deg);\n                }\n\n                @media (max-width: 640px) {\n                    .open-popup-button {\n                        right: 12px;\n                        width: 72px;\n                        height: 72px;\n                        font-size: 14px;\n                    }\n\n                    .open-popup-button::after {\n                        bottom: -24px;\n                        font-size: 10px;\n                    }\n\n                    .content-card {\n                        max-width: 92vw;\n                        padding: 48px 14px 16px;\n                        border-radius: 24px;\n                    }\n\n                    .label span {\n                        top: 14px;\n                        width: 100px;\n                        font-size: 9px;\n                    }\n\n                    .wheel-center {\n                        width: 74px;\n                        height: 74px;\n                        font-size: 18px;\n                    }\n\n                    .wheel {\n                        width: min(82vw, 330px, 44vh);\n                        height: min(82vw, 330px, 44vh);\n                    }\n\n                    .prize-highlight {\n                        min-width: 100%;\n                    }\n\n                    .prize-highlight span {\n                        font-size: 20px;\n                    }\n                }\n\n                @keyframes popup-enter {\n                    from {\n                        opacity: 0;\n                        transform: translateY(18px) scale(0.96);\n                    }\n\n                    to {\n                        opacity: 1;\n                        transform: translateY(0) scale(1);\n                    }\n                }\n\n                @keyframes float-confetti {\n                    0%,\n                    100% {\n                        transform: translateY(0) rotate(0deg);\n                    }\n\n                    50% {\n                        transform: translateY(-12px) rotate(18deg);\n                    }\n                }\n            ")));
+};
+
 var css_248z$j = ".Freetext-module_background__oUp-J {\r\n    background-size: cover !important;\r\n    background-position: center !important;\r\n    background-attachment: fixed !important;\r\n    background-repeat: no-repeat !important;\r\n    -webkit-background-size: cover !important;\r\n    -moz-background-size: cover !important;\r\n}\r\n@media (max-width: 800px) {\r\n    .Freetext-module_background__oUp-J {\r\n        background-size: contain !important;\r\n        background-position: center !important;\r\n        background-attachment: initial !important;\r\n        background-repeat: no-repeat !important;\r\n        -webkit-background-size: contain !important;\r\n        -moz-background-size: contain !important;\r\n    }\r\n}\r\n";
 var sectionstyles$2 = {"background":"Freetext-module_background__oUp-J"};
 styleInject(css_248z$j);
@@ -98374,6 +98650,7 @@ var returnLibrary = function returnLibrary() {
     VideosSection: VideosSection,
     FullVideoSection: FullVideoSection,
     Popupcomponent: Popupcomponent,
+    WheelSpin: WheelSpin,
     PopupCountryComponent: PopupCountryComponent,
     TextSectionConnectToWA: TextSectionConnectToWA,
     DynamicForm: DynamicForm,