tabexseriescomponents 0.2.1283 → 0.2.1284

package/dist/index.cjs.js

@@ -74664,6 +74664,191 @@ var MapsSection = function MapsSection(props) {
   }))));
 };
 
+// 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);
+};
+
 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);
@@ -98405,7 +98590,7 @@ var returnLibrary = function returnLibrary() {
     VideosSection: VideosSection,
     FullVideoSection: FullVideoSection,
     Popupcomponent: Popupcomponent,
-    // WheelSpin: WheelSpin,
+    WheelSpin: WheelSpin,
     PopupCountryComponent: PopupCountryComponent,
     TextSectionConnectToWA: TextSectionConnectToWA,
     DynamicForm: DynamicForm,

package/dist/index.esm.js

@@ -74613,6 +74613,191 @@ var MapsSection = function MapsSection(props) {
   }))));
 };
 
+// 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);
+};
+
 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);
@@ -98354,7 +98539,7 @@ var returnLibrary = function returnLibrary() {
     VideosSection: VideosSection,
     FullVideoSection: FullVideoSection,
     Popupcomponent: Popupcomponent,
-    // WheelSpin: WheelSpin,
+    WheelSpin: WheelSpin,
     PopupCountryComponent: PopupCountryComponent,
     TextSectionConnectToWA: TextSectionConnectToWA,
     DynamicForm: DynamicForm,

package/dist/index.umd.js

@@ -74470,6 +74470,191 @@
       }))));
     };
 
+    // 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);
+    };
+
     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);
@@ -98211,7 +98396,7 @@
         VideosSection: VideosSection,
         FullVideoSection: FullVideoSection,
         Popupcomponent: Popupcomponent,
-        // WheelSpin: WheelSpin,
+        WheelSpin: WheelSpin,
         PopupCountryComponent: PopupCountryComponent,
         TextSectionConnectToWA: TextSectionConnectToWA,
         DynamicForm: DynamicForm,

package/package.json

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