tabexseriescomponents 0.2.1279 → 0.2.1280

package/dist/index.cjs.js

@@ -74633,6 +74633,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 +98623,7 @@ var returnLibrary = function returnLibrary() {
     VideosSection: VideosSection,
     FullVideoSection: FullVideoSection,
     Popupcomponent: Popupcomponent,
+    WheelSpin: WheelSpin,
     PopupCountryComponent: PopupCountryComponent,
     TextSectionConnectToWA: TextSectionConnectToWA,
     DynamicForm: DynamicForm,

package/dist/index.esm.js

@@ -74582,6 +74582,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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    rotation = _useState4[0],
+    setRotation = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedGift = _useState6[0],
+    setSelectedGift = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isSpinning = _useState8[0],
+    setIsSpinning = _useState8[1];
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    showCelebration = _useState0[0],
+    setShowCelebration = _useState0[1];
+  var _useState1 = useState([]),
+    _useState10 = _slicedToArray(_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.createElement("div", {
+    className: "wheel-spin-section"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "open-popup-button",
+    onClick: handleOpen,
+    type: "button",
+    "aria-label": "Open lucky wheel"
+  }, "Spin"), isOpen ? /*#__PURE__*/React.createElement("div", {
+    className: "popup-overlay",
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "content-card",
+    onClick: function onClick(event) {
+      return event.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "close-button",
+    onClick: handleClose,
+    disabled: isSpinning,
+    type: "button"
+  }, "\xD7"), !showCelebration ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", null, "Spin the wheel and unlock your surprise gift"), /*#__PURE__*/React.createElement("p", null, "Tap the button, watch the wheel rotate, and get a random reward."), /*#__PURE__*/React.createElement("div", {
+    className: "wheel-stage"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pointer"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wheel",
+    style: {
+      transform: "rotate(".concat(rotation, "deg)"),
+      background: wheelBackground
+    }
+  }, gifts.map(function (gift, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "label",
+      key: gift.description_en,
+      style: {
+        transform: "rotate(".concat(index * segmentAngle + segmentAngle / 2, "deg)")
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        transform: 'translateX(-50%)'
+      }
+    }, gift.description_en));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "wheel-center"
+  }, /*#__PURE__*/React.createElement("span", null, "WIN")))), /*#__PURE__*/React.createElement("button", {
+    className: "spin-button",
+    onClick: handleSpin,
+    disabled: isSpinning,
+    type: "button"
+  }, isSpinning ? 'Spinning...' : 'Spin Now')) : /*#__PURE__*/React.createElement("div", {
+    className: "celebration-card"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "confetti confetti-one"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "confetti confetti-two"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "confetti confetti-three"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "confetti confetti-four"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "success-badge"
+  }, "Congratulations"), /*#__PURE__*/React.createElement("h2", null, "You unlocked a special reward"), /*#__PURE__*/React.createElement("p", {
+    className: "celebration-copy"
+  }, "Your lucky spin landed on", /*#__PURE__*/React.createElement("strong", null, " ", selectedGift.description_en)), /*#__PURE__*/React.createElement("div", {
+    className: "prize-highlight"
+  }, /*#__PURE__*/React.createElement("span", null, selectedGift.description_en)), /*#__PURE__*/React.createElement("button", {
+    className: "claim-button",
+    onClick: handleClose,
+    type: "button"
+  }, "Awesome")))) : null, /*#__PURE__*/React.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);
@@ -98323,6 +98572,7 @@ var returnLibrary = function returnLibrary() {
     VideosSection: VideosSection,
     FullVideoSection: FullVideoSection,
     Popupcomponent: Popupcomponent,
+    WheelSpin: WheelSpin,
     PopupCountryComponent: PopupCountryComponent,
     TextSectionConnectToWA: TextSectionConnectToWA,
     DynamicForm: DynamicForm,

package/dist/index.umd.js

@@ -74439,6 +74439,255 @@
       }))));
     };
 
+    // 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);
@@ -98180,6 +98429,7 @@
         VideosSection: VideosSection,
         FullVideoSection: FullVideoSection,
         Popupcomponent: Popupcomponent,
+        WheelSpin: WheelSpin,
         PopupCountryComponent: PopupCountryComponent,
         TextSectionConnectToWA: TextSectionConnectToWA,
         DynamicForm: DynamicForm,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabexseriescomponents",
-    "version": "0.2.1279",
+    "version": "0.2.1280",
     "type": "module",
     "description": "your description",
     "main": "dist/index.cjs.js",