JSFiddle - React, Tailwind, and code Playground

by Pankaj Patel

JavaScript

const getStepText = (value) =>
  DATA.segmentTextPattern.replace("!variable!", value);
const getPromoCodeText = (value) =>
  DATA.codePromoPattern.replace("!variable!", value);

const stepsTemplate = {
  text: getStepText(DATA.minValue),
  promoCode: getPromoCodeText(DATA.minValue),
  chances: DATA.minValueChances,
  value: DATA.minValue,
};

const stepValue = (DATA.maxValue - DATA.minValue) / (DATA.segmentsNumber - 1);

let restChances = Math.round(
  (100 - DATA.minValueChances + DATA.maxValueChances) / 2
);
const getRestChances = () => Math.round(restChances / 2);

const steps = Array(DATA.segmentsNumber - 1)
  .fill("")
  .reduce(
    (accSteps) => {
      const latestValue = accSteps[accSteps.length - 1].value;
      const currentValue = Math.round(latestValue + stepValue);
      const newStep = {
        text: getStepText(currentValue),
        promoCode: getPromoCodeText(currentValue),
        chances: restChances,
        value: currentValue,
      };
      restChances = getRestChances();
      return [...accSteps, newStep];
    },
    [stepsTemplate]
  );

const storageName = `WheelModal_${UNIQUE_ID}`;
const baseClassName = `WheelModal_${UNIQUE_ID}_`;
const classes = {
  step: `${baseClassName}Step`,
  hide: `${baseClassName}Hide`,
  result: `${baseClassName}Result`,
  triggered: `${baseClassName}Triggered`,
  button: `${baseClassName}Button`,
  wheel: `${baseClassName}Wheel`,
  wheelSegment: `${baseClassName}WheelSegment`,
  input: `${baseClassName}Input`,
  close: `${baseClassName}Close`,
  overlay: `${baseClassName}Overlay`,
  container: `${baseClassName}Container`,
  boldInfos: `${baseClassName}BoldInfos`,
};

const isOnPreviewOrEditor = () => {
  const loc = (window.top || window).location;
  return (
    loc.href.includes('abtasty_editor') ||
    loc.href.includes('ab_project=preview') ||
    loc.href.includes('widget-library/preview/')
  )
}

const getPromoCode = () => {
  const weights = steps.reduce((accumulatedWeights, { chances }) => {
   ...