@saasquatch/mint-components 1.15.0-115 → 1.15.0-117

package/dist/esm/sqm-reward-exchange-list.entry.js

@@ -0,0 +1,1014 @@
+import { r as registerInstance, h as h$1, i as Host } from './index-bfb7f924.js';
+import './global-c7169457.js';
+import { u as useReducer, i as useState, j as useEffect, k as useRef, o as h } from './dom-context-hooks.module-01c1b885.js';
+import { d as dist, J, $ as $e, w as wn, o as Qe, i as isDemo } from './index.module-83586215.js';
+import './GoogleFonts-e3a7f82a.js';
+import './jss-preset-default.esm-c36417f8.js';
+import './JSS-8c381d8b.js';
+import './mixins-acc245cc.js';
+import { g as getProps } from './utils-93e14db3.js';
+import { c as cjs } from './cjs-e829b75b.js';
+import './copy-text-view-3129fb22.js';
+import { p as demoRewardExchange, R as RewardExchangeView } from './RewardExchangeListData-11c043e3.js';
+import { p as parseStates } from './parseStates-ed75e224.js';
+
+// canvas-confetti v1.4.0 built on 2021-03-10T12:32:33.488Z
+var module = {};
+
+// source content
+(function main(global, module, isWorker, workerSize) {
+  var canUseWorker = !!(
+    global.Worker &&
+    global.Blob &&
+    global.Promise &&
+    global.OffscreenCanvas &&
+    global.OffscreenCanvasRenderingContext2D &&
+    global.HTMLCanvasElement &&
+    global.HTMLCanvasElement.prototype.transferControlToOffscreen &&
+    global.URL &&
+    global.URL.createObjectURL);
+
+  function noop() {}
+
+  // create a promise if it exists, otherwise, just
+  // call the function directly
+  function promise(func) {
+    var ModulePromise = module.exports.Promise;
+    var Prom = ModulePromise !== void 0 ? ModulePromise : global.Promise;
+
+    if (typeof Prom === 'function') {
+      return new Prom(func);
+    }
+
+    func(noop, noop);
+
+    return null;
+  }
+
+  var raf = (function () {
+    var TIME = Math.floor(1000 / 60);
+    var frame, cancel;
+    var frames = {};
+    var lastFrameTime = 0;
+
+    if (typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function') {
+      frame = function (cb) {
+        var id = Math.random();
+
+        frames[id] = requestAnimationFrame(function onFrame(time) {
+          if (lastFrameTime === time || lastFrameTime + TIME - 1 < time) {
+            lastFrameTime = time;
+            delete frames[id];
+
+            cb();
+          } else {
+            frames[id] = requestAnimationFrame(onFrame);
+          }
+        });
+
+        return id;
+      };
+      cancel = function (id) {
+        if (frames[id]) {
+          cancelAnimationFrame(frames[id]);
+        }
+      };
+    } else {
+      frame = function (cb) {
+        return setTimeout(cb, TIME);
+      };
+      cancel = function (timer) {
+        return clearTimeout(timer);
+      };
+    }
+
+    return { frame: frame, cancel: cancel };
+  }());
+
+  var getWorker = (function () {
+    var worker;
+    var prom;
+    var resolves = {};
+
+    function decorate(worker) {
+      function execute(options, callback) {
+        worker.postMessage({ options: options || {}, callback: callback });
+      }
+      worker.init = function initWorker(canvas) {
+        var offscreen = canvas.transferControlToOffscreen();
+        worker.postMessage({ canvas: offscreen }, [offscreen]);
+      };
+
+      worker.fire = function fireWorker(options, size, done) {
+        if (prom) {
+          execute(options, null);
+          return prom;
+        }
+
+        var id = Math.random().toString(36).slice(2);
+
+        prom = promise(function (resolve) {
+          function workerDone(msg) {
+            if (msg.data.callback !== id) {
+              return;
+            }
+
+            delete resolves[id];
+            worker.removeEventListener('message', workerDone);
+
+            prom = null;
+            done();
+            resolve();
+          }
+
+          worker.addEventListener('message', workerDone);
+          execute(options, id);
+
+          resolves[id] = workerDone.bind(null, { data: { callback: id }});
+        });
+
+        return prom;
+      };
+
+      worker.reset = function resetWorker() {
+        worker.postMessage({ reset: true });
+
+        for (var id in resolves) {
+          resolves[id]();
+          delete resolves[id];
+        }
+      };
+    }
+
+    return function () {
+      if (worker) {
+        return worker;
+      }
+
+      if (!isWorker && canUseWorker) {
+        var code = [
+          'var CONFETTI, SIZE = {}, module = {};',
+          '(' + main.toString() + ')(this, module, true, SIZE);',
+          'onmessage = function(msg) {',
+          '  if (msg.data.options) {',
+          '    CONFETTI(msg.data.options).then(function () {',
+          '      if (msg.data.callback) {',
+          '        postMessage({ callback: msg.data.callback });',
+          '      }',
+          '    });',
+          '  } else if (msg.data.reset) {',
+          '    CONFETTI.reset();',
+          '  } else if (msg.data.resize) {',
+          '    SIZE.width = msg.data.resize.width;',
+          '    SIZE.height = msg.data.resize.height;',
+          '  } else if (msg.data.canvas) {',
+          '    SIZE.width = msg.data.canvas.width;',
+          '    SIZE.height = msg.data.canvas.height;',
+          '    CONFETTI = module.exports.create(msg.data.canvas);',
+          '  }',
+          '}',
+        ].join('\n');
+        try {
+          worker = new Worker(URL.createObjectURL(new Blob([code])));
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          typeof console !== undefined && typeof console.warn === 'function' ? console.warn('🎊 Could not load worker', e) : null;
+
+          return null;
+        }
+
+        decorate(worker);
+      }
+
+      return worker;
+    };
+  })();
+
+  var defaults = {
+    particleCount: 50,
+    angle: 90,
+    spread: 45,
+    startVelocity: 45,
+    decay: 0.9,
+    gravity: 1,
+    drift: 0,
+    ticks: 200,
+    x: 0.5,
+    y: 0.5,
+    shapes: ['square', 'circle'],
+    zIndex: 100,
+    colors: [
+      '#26ccff',
+      '#a25afd',
+      '#ff5e7e',
+      '#88ff5a',
+      '#fcff42',
+      '#ffa62d',
+      '#ff36ff'
+    ],
+    // probably should be true, but back-compat
+    disableForReducedMotion: false,
+    scalar: 1
+  };
+
+  function convert(val, transform) {
+    return transform ? transform(val) : val;
+  }
+
+  function isOk(val) {
+    return !(val === null || val === undefined);
+  }
+
+  function prop(options, name, transform) {
+    return convert(
+      options && isOk(options[name]) ? options[name] : defaults[name],
+      transform
+    );
+  }
+
+  function onlyPositiveInt(number){
+    return number < 0 ? 0 : Math.floor(number);
+  }
+
+  function randomInt(min, max) {
+    // [min, max)
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+
+  function toDecimal(str) {
+    return parseInt(str, 16);
+  }
+
+  function colorsToRgb(colors) {
+    return colors.map(hexToRgb);
+  }
+
+  function hexToRgb(str) {
+    var val = String(str).replace(/[^0-9a-f]/gi, '');
+
+    if (val.length < 6) {
+        val = val[0]+val[0]+val[1]+val[1]+val[2]+val[2];
+    }
+
+    return {
+      r: toDecimal(val.substring(0,2)),
+      g: toDecimal(val.substring(2,4)),
+      b: toDecimal(val.substring(4,6))
+    };
+  }
+
+  function getOrigin(options) {
+    var origin = prop(options, 'origin', Object);
+    origin.x = prop(origin, 'x', Number);
+    origin.y = prop(origin, 'y', Number);
+
+    return origin;
+  }
+
+  function setCanvasWindowSize(canvas) {
+    canvas.width = document.documentElement.clientWidth;
+    canvas.height = document.documentElement.clientHeight;
+  }
+
+  function setCanvasRectSize(canvas) {
+    var rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+  }
+
+  function getCanvas(zIndex) {
+    var canvas = document.createElement('canvas');
+
+    canvas.style.position = 'fixed';
+    canvas.style.top = '0px';
+    canvas.style.left = '0px';
+    canvas.style.pointerEvents = 'none';
+    canvas.style.zIndex = zIndex;
+
+    return canvas;
+  }
+
+  function ellipse(context, x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
+    context.save();
+    context.translate(x, y);
+    context.rotate(rotation);
+    context.scale(radiusX, radiusY);
+    context.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
+    context.restore();
+  }
+
+  function randomPhysics(opts) {
+    var radAngle = opts.angle * (Math.PI / 180);
+    var radSpread = opts.spread * (Math.PI / 180);
+
+    return {
+      x: opts.x,
+      y: opts.y,
+      wobble: Math.random() * 10,
+      velocity: (opts.startVelocity * 0.5) + (Math.random() * opts.startVelocity),
+      angle2D: -radAngle + ((0.5 * radSpread) - (Math.random() * radSpread)),
+      tiltAngle: Math.random() * Math.PI,
+      color: opts.color,
+      shape: opts.shape,
+      tick: 0,
+      totalTicks: opts.ticks,
+      decay: opts.decay,
+      drift: opts.drift,
+      random: Math.random() + 5,
+      tiltSin: 0,
+      tiltCos: 0,
+      wobbleX: 0,
+      wobbleY: 0,
+      gravity: opts.gravity * 3,
+      ovalScalar: 0.6,
+      scalar: opts.scalar
+    };
+  }
+
+  function updateFetti(context, fetti) {
+    fetti.x += Math.cos(fetti.angle2D) * fetti.velocity + fetti.drift;
+    fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity;
+    fetti.wobble += 0.1;
+    fetti.velocity *= fetti.decay;
+    fetti.tiltAngle += 0.1;
+    fetti.tiltSin = Math.sin(fetti.tiltAngle);
+    fetti.tiltCos = Math.cos(fetti.tiltAngle);
+    fetti.random = Math.random() + 5;
+    fetti.wobbleX = fetti.x + ((10 * fetti.scalar) * Math.cos(fetti.wobble));
+    fetti.wobbleY = fetti.y + ((10 * fetti.scalar) * Math.sin(fetti.wobble));
+
+    var progress = (fetti.tick++) / fetti.totalTicks;
+
+    var x1 = fetti.x + (fetti.random * fetti.tiltCos);
+    var y1 = fetti.y + (fetti.random * fetti.tiltSin);
+    var x2 = fetti.wobbleX + (fetti.random * fetti.tiltCos);
+    var y2 = fetti.wobbleY + (fetti.random * fetti.tiltSin);
+
+    context.fillStyle = 'rgba(' + fetti.color.r + ', ' + fetti.color.g + ', ' + fetti.color.b + ', ' + (1 - progress) + ')';
+    context.beginPath();
+
+    if (fetti.shape === 'circle') {
+      context.ellipse ?
+        context.ellipse(fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI) :
+        ellipse(context, fetti.x, fetti.y, Math.abs(x2 - x1) * fetti.ovalScalar, Math.abs(y2 - y1) * fetti.ovalScalar, Math.PI / 10 * fetti.wobble, 0, 2 * Math.PI);
+    } else {
+      context.moveTo(Math.floor(fetti.x), Math.floor(fetti.y));
+      context.lineTo(Math.floor(fetti.wobbleX), Math.floor(y1));
+      context.lineTo(Math.floor(x2), Math.floor(y2));
+      context.lineTo(Math.floor(x1), Math.floor(fetti.wobbleY));
+    }
+
+    context.closePath();
+    context.fill();
+
+    return fetti.tick < fetti.totalTicks;
+  }
+
+  function animate(canvas, fettis, resizer, size, done) {
+    var animatingFettis = fettis.slice();
+    var context = canvas.getContext('2d');
+    var animationFrame;
+    var destroy;
+
+    var prom = promise(function (resolve) {
+      function onDone() {
+        animationFrame = destroy = null;
+
+        context.clearRect(0, 0, size.width, size.height);
+
+        done();
+        resolve();
+      }
+
+      function update() {
+        if (isWorker && !(size.width === workerSize.width && size.height === workerSize.height)) {
+          size.width = canvas.width = workerSize.width;
+          size.height = canvas.height = workerSize.height;
+        }
+
+        if (!size.width && !size.height) {
+          resizer(canvas);
+          size.width = canvas.width;
+          size.height = canvas.height;
+        }
+
+        context.clearRect(0, 0, size.width, size.height);
+
+        animatingFettis = animatingFettis.filter(function (fetti) {
+          return updateFetti(context, fetti);
+        });
+
+        if (animatingFettis.length) {
+          animationFrame = raf.frame(update);
+        } else {
+          onDone();
+        }
+      }
+
+      animationFrame = raf.frame(update);
+      destroy = onDone;
+    });
+
+    return {
+      addFettis: function (fettis) {
+        animatingFettis = animatingFettis.concat(fettis);
+
+        return prom;
+      },
+      canvas: canvas,
+      promise: prom,
+      reset: function () {
+        if (animationFrame) {
+          raf.cancel(animationFrame);
+        }
+
+        if (destroy) {
+          destroy();
+        }
+      }
+    };
+  }
+
+  function confettiCannon(canvas, globalOpts) {
+    var isLibCanvas = !canvas;
+    var allowResize = !!prop(globalOpts || {}, 'resize');
+    var globalDisableForReducedMotion = prop(globalOpts, 'disableForReducedMotion', Boolean);
+    var shouldUseWorker = canUseWorker && !!prop(globalOpts || {}, 'useWorker');
+    var worker = shouldUseWorker ? getWorker() : null;
+    var resizer = isLibCanvas ? setCanvasWindowSize : setCanvasRectSize;
+    var initialized = (canvas && worker) ? !!canvas.__confetti_initialized : false;
+    var preferLessMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion)').matches;
+    var animationObj;
+
+    function fireLocal(options, size, done) {
+      var particleCount = prop(options, 'particleCount', onlyPositiveInt);
+      var angle = prop(options, 'angle', Number);
+      var spread = prop(options, 'spread', Number);
+      var startVelocity = prop(options, 'startVelocity', Number);
+      var decay = prop(options, 'decay', Number);
+      var gravity = prop(options, 'gravity', Number);
+      var drift = prop(options, 'drift', Number);
+      var colors = prop(options, 'colors', colorsToRgb);
+      var ticks = prop(options, 'ticks', Number);
+      var shapes = prop(options, 'shapes');
+      var scalar = prop(options, 'scalar');
+      var origin = getOrigin(options);
+
+      var temp = particleCount;
+      var fettis = [];
+
+      var startX = canvas.width * origin.x;
+      var startY = canvas.height * origin.y;
+
+      while (temp--) {
+        fettis.push(
+          randomPhysics({
+            x: startX,
+            y: startY,
+            angle: angle,
+            spread: spread,
+            startVelocity: startVelocity,
+            color: colors[temp % colors.length],
+            shape: shapes[randomInt(0, shapes.length)],
+            ticks: ticks,
+            decay: decay,
+            gravity: gravity,
+            drift: drift,
+            scalar: scalar
+          })
+        );
+      }
+
+      // if we have a previous canvas already animating,
+      // add to it
+      if (animationObj) {
+        return animationObj.addFettis(fettis);
+      }
+
+      animationObj = animate(canvas, fettis, resizer, size , done);
+
+      return animationObj.promise;
+    }
+
+    function fire(options) {
+      var disableForReducedMotion = globalDisableForReducedMotion || prop(options, 'disableForReducedMotion', Boolean);
+      var zIndex = prop(options, 'zIndex', Number);
+
+      if (disableForReducedMotion && preferLessMotion) {
+        return promise(function (resolve) {
+          resolve();
+        });
+      }
+
+      if (isLibCanvas && animationObj) {
+        // use existing canvas from in-progress animation
+        canvas = animationObj.canvas;
+      } else if (isLibCanvas && !canvas) {
+        // create and initialize a new canvas
+        canvas = getCanvas(zIndex);
+        document.body.appendChild(canvas);
+      }
+
+      if (allowResize && !initialized) {
+        // initialize the size of a user-supplied canvas
+        resizer(canvas);
+      }
+
+      var size = {
+        width: canvas.width,
+        height: canvas.height
+      };
+
+      if (worker && !initialized) {
+        worker.init(canvas);
+      }
+
+      initialized = true;
+
+      if (worker) {
+        canvas.__confetti_initialized = true;
+      }
+
+      function onResize() {
+        if (worker) {
+          // TODO this really shouldn't be immediate, because it is expensive
+          var obj = {
+            getBoundingClientRect: function () {
+              if (!isLibCanvas) {
+                return canvas.getBoundingClientRect();
+              }
+            }
+          };
+
+          resizer(obj);
+
+          worker.postMessage({
+            resize: {
+              width: obj.width,
+              height: obj.height
+            }
+          });
+          return;
+        }
+
+        // don't actually query the size here, since this
+        // can execute frequently and rapidly
+        size.width = size.height = null;
+      }
+
+      function done() {
+        animationObj = null;
+
+        if (allowResize) {
+          global.removeEventListener('resize', onResize);
+        }
+
+        if (isLibCanvas && canvas) {
+          document.body.removeChild(canvas);
+          canvas = null;
+          initialized = false;
+        }
+      }
+
+      if (allowResize) {
+        global.addEventListener('resize', onResize, false);
+      }
+
+      if (worker) {
+        return worker.fire(options, size, done);
+      }
+
+      return fireLocal(options, size, done);
+    }
+
+    fire.reset = function () {
+      if (worker) {
+        worker.reset();
+      }
+
+      if (animationObj) {
+        animationObj.reset();
+      }
+    };
+
+    return fire;
+  }
+
+  module.exports = confettiCannon(null, { useWorker: true, resize: true });
+  module.exports.create = confettiCannon;
+}((function () {
+  if (typeof window !== 'undefined') {
+    return window;
+  }
+
+  if (typeof self !== 'undefined') {
+    return self;
+  }
+
+  return this || {};
+})(), module, false));
+
+// end source content
+
+const confetti = module.exports;
+var create = module.exports.create;
+
+const GET_EXCHANGE_LIST = dist.gql `
+  query getExchangeList {
+    viewer {
+      ... on User {
+        visibleRewardExchangeItems(limit: 20, offset: 0) {
+          data {
+            key
+            name
+            description
+            imageUrl
+            available
+            unavailableReasonCode
+            ruleType
+            sourceUnit
+            sourceValue
+            prettySourceValue
+            sourceMinValue
+            prettySourceMinValue
+            sourceMaxValue
+            prettySourceMaxValue
+            destinationMinValue
+            prettyDestinationMinValue
+            destinationMaxValue
+            prettyDestinationMaxValue
+            globalRewardKey
+            destinationUnit
+            steps {
+              sourceValue
+              prettySourceValue
+              destinationValue
+              prettyDestinationValue
+              available
+              globalRewardKey
+              unavailableReasonCode
+              rewardInput
+            }
+          }
+          totalCount
+        }
+      }
+    }
+  }
+`;
+const EXCHANGE = dist.gql `
+  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
+    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
+      reward {
+        id
+        fuelTankCode
+      }
+    }
+  }
+`;
+function useRewardExchangeList(props) {
+  var _a, _b, _c, _d, _e;
+  const [exchangeState, setExchangeState] = useReducer((state, next) => ({
+    ...state,
+    ...next,
+  }), {
+    selectedItem: undefined,
+    selectedStep: undefined,
+    redeemStage: "chooseReward",
+    amount: 0,
+    exchangeError: false,
+  });
+  const [open, setOpen] = useState(false);
+  const { selectedItem, selectedStep, redeemStage, amount, exchangeError } = exchangeState;
+  const user = J();
+  const [exchange, { data: exchangeResponse, loading: exchangeLoading, errors },] = $e(EXCHANGE);
+  const { data, loading, refetch, errors: queryError, } = wn(GET_EXCHANGE_LIST, {}, !(user === null || user === void 0 ? void 0 : user.jwt));
+  useEffect(() => {
+    var _a, _b;
+    if ((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.id) {
+      setExchangeState({ redeemStage: "success", exchangeError: false });
+    }
+    if (!!errors) {
+      setExchangeState({ exchangeError: true });
+    }
+  }, [exchangeResponse, errors]);
+  const canvasRef = useRef();
+  useEffect(() => {
+    if (!canvasRef.current)
+      return;
+    const canvas = canvasRef.current;
+    canvas.confetti =
+      canvas.confetti || confetti.create(canvas, { resize: true });
+    canvas.confetti();
+  }, [canvasRef.current]);
+  const { refresh } = Qe();
+  async function exchangeReward() {
+    if (!selectedItem)
+      return;
+    let exchangeVariables = {
+      accountId: user === null || user === void 0 ? void 0 : user.accountId,
+      userId: user.id,
+    };
+    switch (selectedItem.ruleType) {
+      case "FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedItem.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+        };
+        break;
+      case "STEPPED_FIXED_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: selectedStep.sourceValue,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedStep.globalRewardKey,
+        };
+        break;
+      case "VARIABLE_GLOBAL_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: amount,
+            unit: selectedItem.sourceUnit,
+          },
+          globalRewardKey: selectedItem.globalRewardKey,
+          rewardInput: selectedStep.rewardInput,
+        };
+        break;
+      case "VARIABLE_CREDIT_REWARD":
+        exchangeVariables = {
+          ...exchangeVariables,
+          redeemCreditInput: {
+            amount: amount,
+            unit: selectedItem.sourceUnit,
+          },
+          rewardInput: {
+            type: "CREDIT",
+            unit: selectedItem.destinationUnit,
+            assignedCredit: selectedStep.destinationValue,
+          },
+        };
+        break;
+      default:
+        exchangeVariables = {
+          ...exchangeVariables,
+          ...selectedStep.rewardInput,
+        };
+    }
+    await exchange({ exchangeRewardInput: exchangeVariables });
+    refresh();
+  }
+  const resetState = (refresh) => {
+    refresh && refetch();
+    setExchangeState({
+      amount: 0,
+      selectedStep: undefined,
+      selectedItem: undefined,
+      exchangeError: false,
+      redeemStage: "chooseReward",
+    });
+  };
+  function setStage(stage) {
+    setExchangeState({ redeemStage: stage });
+  }
+  function copyFuelTankCode() {
+    var _a, _b;
+    navigator.clipboard.writeText((_b = (_a = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _a === void 0 ? void 0 : _a.reward) === null || _b === void 0 ? void 0 : _b.fuelTankCode);
+    setOpen(true);
+    setTimeout(() => setOpen(false), 1000);
+  }
+  return {
+    states: {
+      content: {
+        text: props,
+      },
+      selectedItem,
+      redeemStage,
+      amount,
+      selectedStep,
+      exchangeError,
+      queryError: !!queryError,
+      loading: loading || exchangeLoading,
+      open,
+      noExchangeOptions: ((_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.visibleRewardExchangeItems.totalCount) === 0,
+    },
+    data: {
+      exchangeList: (_c = (_b = data === null || data === void 0 ? void 0 : data.viewer) === null || _b === void 0 ? void 0 : _b.visibleRewardExchangeItems) === null || _c === void 0 ? void 0 : _c.data,
+      fuelTankCode: (_e = (_d = exchangeResponse === null || exchangeResponse === void 0 ? void 0 : exchangeResponse.exchangeReward) === null || _d === void 0 ? void 0 : _d.reward) === null || _e === void 0 ? void 0 : _e.fuelTankCode,
+    },
+    callbacks: {
+      exchangeReward,
+      setExchangeState,
+      setStage,
+      resetState,
+      copyFuelTankCode,
+    },
+    refs: {
+      canvasRef,
+    },
+  };
+}
+
+const SqmRewardExchangeList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ignored = true;
+    /**
+     * Error message shown when reward is not available
+     *
+     * @uiName Not available error
+     * @uiWidget textArea
+     */
+    this.notAvailableError = "{unavailableReasonCode, select, US_TAX {US Tax limit} INSUFFICIENT_REDEEMABLE_CREDIT {{sourceValue} required} AVAILABILITY_PREDICATE {Not available} other {{unavailableReasonCode}} }";
+    /**
+     * @uiName Choose reward progress title
+     */
+    this.chooseRewardTitle = "Rewards";
+    /**
+     * @uiName Choose amount progress title
+     */
+    this.chooseAmountTitle = "Select";
+    /**
+     * @uiName Confirmation progress title
+     */
+    this.confirmationTitle = "Confirm";
+    /**
+     * @uiName Reward title text
+     */
+    this.rewardTitle = "Choose a reward";
+    /**
+     * @uiName Cancel button text
+     */
+    this.cancelText = "Cancel";
+    /**
+     * @uiName Back button text
+     */
+    this.backText = "Back";
+    /**
+     * @uiName Continue button text
+     */
+    this.continueText = "Continue";
+    /**
+     * Displayed on the reward selection page.
+     * @uiName Continue to confirmation button text
+     */
+    this.continueToConfirmationText = "Continue to confirmation";
+    /**
+     * @uiName Redeem button text
+     */
+    this.redeemText = "Redeem";
+    /**
+     * Displayed as the header for the confirmation page.
+     *
+     * @uiName Confirmation title text
+     */
+    this.redeemTitle = "Confirm and redeem";
+    /**
+     * Displayed on the success screen when a user successfully exchanges for a reward.
+     *
+     * @uiName Redemption success message
+     * @uiWidget textArea
+     */
+    this.redemptionSuccessText = "Redeemed {sourceValue} for {destinationValue}";
+    /**
+     * Displayed on the reward exchange cards.
+     *
+     * @uiName Reward exchange amount text
+     * @uiWidget textArea
+     */
+    this.sourceAmountMessage = "{ruleType, select, FIXED_GLOBAL_REWARD {{sourceValue}} other {{sourceMinValue} to {sourceMaxValue}}}";
+    /**
+     * Shown when a user copies a fuel tank code
+     *
+     * @uiName Tooltip text
+     */
+    this.tooltipText = "Copied";
+    /**
+     * @uiName Done text
+     */
+    this.doneText = "Done";
+    /**
+     * @uiName Select amount text
+     * @uiWidget textArea
+     */
+    this.selectText = "Select amount to receive";
+    /**
+     * Shown if an error occurs when loading the reward exchange.
+     *
+     * @uiName Reward list error message
+     * @uiWidget textArea
+     */
+    this.queryError = "Unable to load reward exchange list. Please try again";
+    /**
+     * Shown if an error occurs during the reward exchange.
+     *
+     * @uiName Redemption error message
+     * @uiWidget textArea
+     */
+    this.redemptionError = "An error occured trying to redeem this reward. Please try again";
+    /**
+     * @uiName Not enough error message
+     * @uiWidget textArea
+     */
+    this.notEnoughError = "Not enough {sourceUnit} to redeem for this reward";
+    /**
+     * @uiName Reward redeemed text
+     */
+    this.rewardRedeemedText = "Reward redeemed";
+    /**
+     * @uiName Promo code text
+     */
+    this.promoCode = "Promo Code";
+    /**
+     * Set the number of placeholder cards to be shown in loading state.
+     *
+     * @uiName Loading cards
+     */
+    this.skeletonCardNum = 8;
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Reward row title
+     */
+    this.rewardNameTitle = "Reward";
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Reward amount row title
+     */
+    this.rewardAmountTitle = "Reward Amount";
+    /**
+     * Shown in the confirmation state.
+     *
+     * @uiName Cost row title
+     */
+    this.costTitle = "Cost to Redeem";
+    /**
+     * @componentState { "title": "Choose reward", "props": { "redeemStage": "chooseReward" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Reward details", "props": { "redeemStage": "chooseAmount" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Confirm exchange", "props": { "redeemStage": "confirmation" }, "dependencies": ["sqm-reward-exchange-list"] }
+     * @componentState { "title": "Exchange successful", "props": { "redeemStage": "success" }, "dependencies": ["sqm-reward-exchange-list"] }
+     */
+    this.stateController = "{}";
+    h(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const props = {
+      ...getProps(this),
+      empty: h$1(EmptySlot, null),
+    };
+    const { states, data, callbacks, refs } = isDemo()
+      ? useRewardExchangeListDemo(props)
+      : useRewardExchangeList(props);
+    return (h$1(Host, { style: { display: "contents" } }, h$1(RewardExchangeView, { states: states, data: data, callbacks: callbacks, refs: refs })));
+  }
+  static get assetsDirs() { return ["assets"]; }
+};
+function EmptySlot() {
+  return (h$1("slot", { name: "empty" }, h$1("sqm-empty", { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_exchange2.png", emptyStateHeader: "Redeem rewards", emptyStateText: "Use your points to redeem rewards once they become available" })));
+}
+function useRewardExchangeListDemo(props) {
+  const states = parseStates(props.stateController);
+  const formatted = Object.keys(states).reduce((prev, key) => key === "reward-exchange-list"
+    ? { ...prev, ...states[key] }
+    : { ...prev, [`${key}_stateController`]: states[key] }, {});
+  return cjs({
+    states: {
+      content: {
+        text: props,
+      },
+      redeemStage: "chooseReward",
+      amount: 0,
+      selectedStep: undefined,
+      selectedItem: undefined,
+      open: false,
+      exchangeError: false,
+      queryError: false,
+      loading: false,
+      noExchangeOptions: false,
+    },
+    data: {
+      // shareCode: "SHARECODE123",
+      exchangeList: demoRewardExchange.data.exchangeList,
+    },
+    callbacks: {
+      exchangeReward: () => { },
+      setExchangeState: (_) => { },
+      setStage: (_) => { },
+      resetState: () => { },
+      copyFuelTankCode: () => { },
+    },
+    refs: {
+      canvasRef: {},
+    },
+  }, props.demoData || formatted || {}, { arrayMerge: (_, a) => a });
+}
+
+export { SqmRewardExchangeList as sqm_reward_exchange_list };