import { ax as ItemInfo, ak as ItemHelper, a2 as EcomPath, C as Container, a as Ctx, ar as AppType, a3 as Dialog, t, a4 as DialogBody, j as Alert, h as AlertType, T as Trans, a5 as DialogFooter, f as Button, Q as ButtonType, N as ButtonStyle, a7 as ItemType, F as FeUtils, g as AccPath, L as Loading, i as CommonError, ap as EntitlementType, E as ErrorHelper, A as ArrowIcon, e as ArrowIconStyles, U as UrlUtils, O as OverrideCSS } from "./index.js";
import { c as classNames } from "./reactSlick.js";
import React__default from "react";
import { Link, NavLink, Switch, Route, Redirect } from "react-router-dom";
import { a as ItemImageTag } from "./ItemHelper.js";
import { P as Pagination } from "./Pagination.js";
import { w as withPropsGuard } from "./WithPropsGuard.js";
import { d as defaultItemImage } from "./default-item-image.js";
var gameImagePlaceholder = "data:image/svg+xml;base64, ";
const gameItem = "gameItem _gameItem_0d250";
const imageContainer = "imageContainer _imageContainer_734e9";
const title = "title _title_7e2b3";
var styles$2 = {
  gameItem,
  imageContainer,
  title
};
const GameItemSnapShot = ({ item }) => {
  return /* @__PURE__ */ React__default.createElement("div", {
    className: styles$2.gameItem
  }, /* @__PURE__ */ React__default.createElement("div", {
    className: styles$2.imageContainer
  }, /* @__PURE__ */ React__default.createElement("img", {
    alt: item.title,
    src: gameImagePlaceholder,
    loading: "lazy"
  })), /* @__PURE__ */ React__default.createElement("div", {
    className: styles$2.title
  }, item.title));
};
const GameItemImpl = ({ item }) => {
  if (!item)
    return null;
  const itemCoverImageUrl = ItemHelper.getFilteredImageUrlByTag(item.images, ItemImageTag.productCover) || gameImagePlaceholder;
  return /* @__PURE__ */ React__default.createElement("div", {
    className: styles$2.gameItem
  }, /* @__PURE__ */ React__default.createElement(Link, {
    to: EcomPath.GameItem.makePath({
      itemId: item.itemId
    })
  }, /* @__PURE__ */ React__default.createElement("div", {
    className: styles$2.imageContainer
  }, /* @__PURE__ */ React__default.createElement("img", {
    alt: item.title,
    src: itemCoverImageUrl,
    loading: "lazy"
  })), /* @__PURE__ */ React__default.createElement("div", {
    className: styles$2.title
  }, item.title)));
};
const GameItem = ({ item }) => {
  if (!item)
    return null;
  const itemInfoParseResult = ItemInfo.safeParse(item);
  return itemInfoParseResult.success ? /* @__PURE__ */ React__default.createElement(GameItemImpl, {
    item: itemInfoParseResult.data
  }) : /* @__PURE__ */ React__default.createElement(GameItemSnapShot, {
    item
  });
};
const purchasedItemsListWrapper = "purchasedItemsListWrapper _purchasedItemsListWrapper_3aad9";
const myGameList = "myGameList _myGameList_06cb2";
const noGame = "noGame _noGame_65733";
const errorContainer = "errorContainer _errorContainer_93e5b";
const sidebarContainer = "sidebarContainer _sidebarContainer_6ae75";
const myGamesSubSection = "myGamesSubSection _myGamesSubSection_6ed23";
var purchasedItemsListStyles = {
  purchasedItemsListWrapper,
  myGameList,
  noGame,
  errorContainer,
  sidebarContainer,
  myGamesSubSection
};
class PurchasedItemsListLogic extends Container {
  constructor(props) {
    super();
    this.props = props;
    this.state = {
      isFetching: false,
      gameList: [],
      gameItems: null,
      error: null,
      codeItems: null
    };
    this.sdk = Ctx.getAppState().getSdk();
  }
  async init() {
    await this.fetchGames();
  }
  async fetchGames() {
    try {
      if (this.state.isFetching)
        return;
      await this.setState({
        isFetching: true,
        error: null
      });
      if (!this.props.userId)
        return;
      const { userId, limit } = this.props;
      const result = await this.sdk.Platform.Entitlement().getEntitlements({
        userId,
        queryParams: { appType: AppType.enum.GAME, offset: 0, limit }
      });
      if (result.error)
        throw result.error;
      const gameList = result.response.data.data;
      const gameItems = /* @__PURE__ */ new Map();
      if (!gameList)
        return;
      await Promise.all(gameList.map(async (appEntitlement) => {
        const { itemId, itemSnapshot } = appEntitlement;
        if (itemId) {
          const item = await this.fetchItem(itemId);
          const gameItem2 = item || itemSnapshot && itemSnapshot;
          if (gameItem2) {
            gameItems.set(itemId, gameItem2);
          }
        }
      }));
      this.setState({
        gameList,
        gameItems
      });
    } catch (error) {
      this.setState({ error });
    } finally {
      this.setState({ isFetching: false });
    }
  }
  async fetchItem(itemId) {
    const result = await this.sdk.Platform.Item().getItemsByItemIdLocale({ itemId });
    if (result.error)
      return null;
    return result.response.data;
  }
}
var Component = {};
var toggleSelection = function() {
  var selection = document.getSelection();
  if (!selection.rangeCount) {
    return function() {
    };
  }
  var active = document.activeElement;
  var ranges = [];
  for (var i = 0; i < selection.rangeCount; i++) {
    ranges.push(selection.getRangeAt(i));
  }
  switch (active.tagName.toUpperCase()) {
    case "INPUT":
    case "TEXTAREA":
      active.blur();
      break;
    default:
      active = null;
      break;
  }
  selection.removeAllRanges();
  return function() {
    selection.type === "Caret" && selection.removeAllRanges();
    if (!selection.rangeCount) {
      ranges.forEach(function(range) {
        selection.addRange(range);
      });
    }
    active && active.focus();
  };
};
var deselectCurrent = toggleSelection;
var clipboardToIE11Formatting = {
  "text/plain": "Text",
  "text/html": "Url",
  "default": "Text"
};
var defaultMessage = "Copy to clipboard: #{key}, Enter";
function format(message) {
  var copyKey = (/mac os x/i.test(navigator.userAgent) ? "\u2318" : "Ctrl") + "+C";
  return message.replace(/#{\s*key\s*}/g, copyKey);
}
function copy(text, options) {
  var debug, message, reselectPrevious, range, selection, mark, success = false;
  if (!options) {
    options = {};
  }
  debug = options.debug || false;
  try {
    reselectPrevious = deselectCurrent();
    range = document.createRange();
    selection = document.getSelection();
    mark = document.createElement("span");
    mark.textContent = text;
    mark.style.all = "unset";
    mark.style.position = "fixed";
    mark.style.top = 0;
    mark.style.clip = "rect(0, 0, 0, 0)";
    mark.style.whiteSpace = "pre";
    mark.style.webkitUserSelect = "text";
    mark.style.MozUserSelect = "text";
    mark.style.msUserSelect = "text";
    mark.style.userSelect = "text";
    mark.addEventListener("copy", function(e) {
      e.stopPropagation();
      if (options.format) {
        e.preventDefault();
        if (typeof e.clipboardData === "undefined") {
          debug && console.warn("unable to use e.clipboardData");
          debug && console.warn("trying IE specific stuff");
          window.clipboardData.clearData();
          var format2 = clipboardToIE11Formatting[options.format] || clipboardToIE11Formatting["default"];
          window.clipboardData.setData(format2, text);
        } else {
          e.clipboardData.clearData();
          e.clipboardData.setData(options.format, text);
        }
      }
      if (options.onCopy) {
        e.preventDefault();
        options.onCopy(e.clipboardData);
      }
    });
    document.body.appendChild(mark);
    range.selectNodeContents(mark);
    selection.addRange(range);
    var successful = document.execCommand("copy");
    if (!successful) {
      throw new Error("copy command was unsuccessful");
    }
    success = true;
  } catch (err) {
    debug && console.error("unable to copy using execCommand: ", err);
    debug && console.warn("trying IE specific stuff");
    try {
      window.clipboardData.setData(options.format || "text", text);
      options.onCopy && options.onCopy(window.clipboardData);
      success = true;
    } catch (err2) {
      debug && console.error("unable to copy using clipboardData: ", err2);
      debug && console.error("falling back to prompt");
      message = format("message" in options ? options.message : defaultMessage);
      window.prompt(message, text);
    }
  } finally {
    if (selection) {
      if (typeof selection.removeRange == "function") {
        selection.removeRange(range);
      } else {
        selection.removeAllRanges();
      }
    }
    if (mark) {
      document.body.removeChild(mark);
    }
    reselectPrevious();
  }
  return success;
}
var copyToClipboard = copy;
Object.defineProperty(Component, "__esModule", {
  value: true
});
Component.CopyToClipboard = void 0;
var _react = _interopRequireDefault(React__default);
var _copyToClipboard = _interopRequireDefault(copyToClipboard);
function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { "default": obj };
}
function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function _typeof2(obj2) {
      return typeof obj2;
    };
  } else {
    _typeof = function _typeof2(obj2) {
      return obj2 && typeof Symbol === "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
    };
  }
  return _typeof(obj);
}
function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);
  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly)
      symbols = symbols.filter(function(sym) {
        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
      });
    keys.push.apply(keys, symbols);
  }
  return keys;
}
function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    if (i % 2) {
      ownKeys(source, true).forEach(function(key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(source).forEach(function(key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }
  return target;
}
function _objectWithoutProperties(source, excluded) {
  if (source == null)
    return {};
  var target = _objectWithoutPropertiesLoose(source, excluded);
  var key, i;
  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0)
        continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key))
        continue;
      target[key] = source[key];
    }
  }
  return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null)
    return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0)
      continue;
    target[key] = source[key];
  }
  return target;
}
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}
function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor)
      descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}
function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps)
    _defineProperties(Constructor.prototype, protoProps);
  if (staticProps)
    _defineProperties(Constructor, staticProps);
  return Constructor;
}
function _possibleConstructorReturn(self, call) {
  if (call && (_typeof(call) === "object" || typeof call === "function")) {
    return call;
  }
  return _assertThisInitialized(self);
}
function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf2(o2) {
    return o2.__proto__ || Object.getPrototypeOf(o2);
  };
  return _getPrototypeOf(o);
}
function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return self;
}
function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } });
  if (superClass)
    _setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf2(o2, p2) {
    o2.__proto__ = p2;
    return o2;
  };
  return _setPrototypeOf(o, p);
}
function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, { value, enumerable: true, configurable: true, writable: true });
  } else {
    obj[key] = value;
  }
  return obj;
}
var CopyToClipboard$1 = /* @__PURE__ */ function(_React$PureComponent) {
  _inherits(CopyToClipboard2, _React$PureComponent);
  function CopyToClipboard2() {
    var _getPrototypeOf2;
    var _this;
    _classCallCheck(this, CopyToClipboard2);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(CopyToClipboard2)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _defineProperty(_assertThisInitialized(_this), "onClick", function(event) {
      var _this$props = _this.props, text = _this$props.text, onCopy = _this$props.onCopy, children = _this$props.children, options = _this$props.options;
      var elem = _react["default"].Children.only(children);
      var result = (0, _copyToClipboard["default"])(text, options);
      if (onCopy) {
        onCopy(text, result);
      }
      if (elem && elem.props && typeof elem.props.onClick === "function") {
        elem.props.onClick(event);
      }
    });
    return _this;
  }
  _createClass(CopyToClipboard2, [{
    key: "render",
    value: function render() {
      var _this$props2 = this.props;
      _this$props2.text;
      _this$props2.onCopy;
      _this$props2.options;
      var children = _this$props2.children, props = _objectWithoutProperties(_this$props2, ["text", "onCopy", "options", "children"]);
      var elem = _react["default"].Children.only(children);
      return _react["default"].cloneElement(elem, _objectSpread({}, props, {
        onClick: this.onClick
      }));
    }
  }]);
  return CopyToClipboard2;
}(_react["default"].PureComponent);
Component.CopyToClipboard = CopyToClipboard$1;
_defineProperty(CopyToClipboard$1, "defaultProps", {
  onCopy: void 0,
  options: void 0
});
var _require = Component, CopyToClipboard = _require.CopyToClipboard;
CopyToClipboard.CopyToClipboard = CopyToClipboard;
var lib = CopyToClipboard;
const productKeyDialog = "productKeyDialog _productKeyDialog_ba5d2";
const copyClipboard = "copyClipboard _copyClipboard_9e23b";
const productKey = "productKey _productKey_f305a";
const grantedKeyContainer = "grantedKeyContainer _grantedKeyContainer_07a89";
const grantedKey = "grantedKey _grantedKey_e6fec";
const btnCopy = "btnCopy _btnCopy_2a3c0";
const alert = "alert _alert_3cb52";
const productInfoContainer = "productInfoContainer _productInfoContainer_d4323";
const itemName = "itemName _itemName_34352";
const dialogFooter$1 = "dialogFooter _dialogFooter_c2a86";
const btnClose$1 = "btnClose _btnClose_bac98";
var styles$1 = {
  productKeyDialog,
  copyClipboard,
  productKey,
  grantedKeyContainer,
  grantedKey,
  btnCopy,
  alert,
  productInfoContainer,
  itemName,
  dialogFooter: dialogFooter$1,
  btnClose: btnClose$1
};
class ProductKeyDialog extends React__default.Component {
  constructor(props) {
    super(props);
    this.state = {
      isCopied: false
    };
  }
  render() {
    const { selectedProductKey, codeItems, onClose } = this.props;
    const { isCopied } = this.state;
    if (!selectedProductKey || !codeItems)
      return null;
    const getCurrentCodeItem = codeItems.filter((code) => code.itemId === selectedProductKey.itemId);
    const itemCoverImageUrl = ItemHelper.getFilteredImageUrlByTag(getCurrentCodeItem[0].images, ItemImageTag.productCover) || defaultItemImage;
    return /* @__PURE__ */ React__default.createElement(Dialog, {
      title: t("ProductKeyDialog.title"),
      isOpen: true
    }, /* @__PURE__ */ React__default.createElement(DialogBody, null, /* @__PURE__ */ React__default.createElement("div", {
      className: classNames(styles$1.productKeyDialog)
    }, selectedProductKey && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isCopied && /* @__PURE__ */ React__default.createElement(Alert, {
      className: styles$1.alert,
      type: AlertType.success,
      onDismiss: () => this.setState({ isCopied: false })
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "ProductKeyDialog.alert.copied"
    }, "Your key has been copied.")), /* @__PURE__ */ React__default.createElement("div", {
      className: styles$1.productInfoContainer
    }, /* @__PURE__ */ React__default.createElement("img", {
      src: itemCoverImageUrl,
      alt: ItemImageTag.productCover,
      loading: "lazy"
    }), /* @__PURE__ */ React__default.createElement("div", {
      className: styles$1.itemName
    }, selectedProductKey.name)), /* @__PURE__ */ React__default.createElement("div", {
      className: classNames(styles$1.copyClipboard)
    }, /* @__PURE__ */ React__default.createElement("p", {
      className: styles$1.productKey
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "ProductKeyDialog.label.productKey"
    }, "Product Key")), /* @__PURE__ */ React__default.createElement("div", {
      className: styles$1.grantedKeyContainer
    }, /* @__PURE__ */ React__default.createElement("input", {
      readOnly: true,
      type: "text",
      className: styles$1.grantedKey,
      value: selectedProductKey.grantedCode || ""
    }), /* @__PURE__ */ React__default.createElement(lib, {
      text: String(selectedProductKey.grantedCode)
    }, /* @__PURE__ */ React__default.createElement("button", {
      className: classNames("btn btn-primary", styles$1.btnCopy),
      onClick: () => this.setState({ isCopied: true })
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "ProductKeyDialog.button.copy"
    }, "Copy")))))))), /* @__PURE__ */ React__default.createElement(DialogFooter, {
      className: styles$1.dialogFooter
    }, /* @__PURE__ */ React__default.createElement(Button, {
      className: classNames("btn big btn-ghost uppercase"),
      buttonType: ButtonType.TEXT,
      buttonStyle: ButtonStyle.NONE,
      onClick: onClose
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "ProductKeyDialog.button.close"
    }, "Close"))));
  }
}
class PurchasedKeysLogic extends Container {
  constructor(props) {
    super();
    this.fetchItemsList = async () => {
      await this.fetchAllItemList({ itemType: ItemType.enum.CODE }).then((codeItems) => {
        this.setState({ codeItems });
      });
    };
    this.props = props;
    this.state = {
      isFetching: false,
      productKeyList: null,
      error: null,
      selectedProductKey: null,
      codeItems: null
    };
    this.sdk = Ctx.getAppState().getSdk();
  }
  getLimit() {
    const pageSize = 10;
    return this.props.pageSize || pageSize;
  }
  getOffset(page) {
    return page ? (page - 1) * this.getLimit() : 0;
  }
  async init() {
    await this.fetchProductKeys();
    await this.fetchItemsList();
  }
  async fetchAllItemList(query) {
    const limit = 100;
    let hasNext = false;
    let offset = 0;
    let allItems = [];
    do {
      const items = await this.sdk.Platform.Item().fetchItemsByCriteria({ queryParams: { ...query, offset, limit } }).then((result) => {
        var _a;
        if (result.error)
          throw result.error;
        hasNext = !!((_a = result.response.data.paging) == null ? void 0 : _a.next);
        offset += limit;
        return result.response.data.data;
      }).catch((error) => {
        console.error(error);
        hasNext = false;
        return [];
      });
      allItems = allItems.concat(items);
    } while (hasNext);
    return Promise.resolve(allItems);
  }
  async fetchProductKeys() {
    try {
      if (this.state.isFetching)
        return;
      await this.setState({
        isFetching: true,
        productKeyList: null
      });
      if (!this.props.userId)
        return;
      const { userId, page } = this.props;
      const productKeyResult = await this.sdk.Platform.Entitlement().getEntitlements({
        userId,
        queryParams: {
          offset: this.getOffset(page),
          limit: this.getLimit(),
          entitlementClazz: ItemType.enum.CODE
        }
      });
      if (productKeyResult.error)
        throw productKeyResult.error;
      const productKeyList = productKeyResult.response.data;
      this.setState({
        productKeyList
      });
    } catch (error) {
      this.setState({ error });
    } finally {
      this.setState({ isFetching: false });
    }
  }
}
const DEFAULT_KEYS_PAGE_SIZE = 10;
class PurchasedKeysImpl extends React__default.Component {
  constructor(props) {
    var _a;
    super(props);
    this.openProductKeyDialog = (arrayNumber) => {
      const { productKeyList } = this.logic.state;
      const selectedProductKey = (productKeyList == null ? void 0 : productKeyList.data) && productKeyList.data[arrayNumber];
      this.logic.setState({
        selectedProductKey
      });
      this.setState({
        isProductKeyDialogOpen: true
      });
    };
    this.closeProductKeyDialog = () => {
      this.setState({ isProductKeyDialogOpen: false });
    };
    this.renderTableOrder = (productKeyList) => {
      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
        className: "border-gray-80 mb-4 hidden border-b py-2 md:flex"
      }, /* @__PURE__ */ React__default.createElement("div", {
        className: "flex w-1/2 flex-col md:w-4/5 md:flex-row"
      }, /* @__PURE__ */ React__default.createElement("p", {
        className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2"
      }, /* @__PURE__ */ React__default.createElement(Trans, {
        i18nKey: "MyGameList.productKey.table.purchaseDate"
      }, "Purchase Date")), /* @__PURE__ */ React__default.createElement("p", {
        className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2"
      }, /* @__PURE__ */ React__default.createElement(Trans, {
        i18nKey: "MyGameList.productKey.table.name"
      }, "Name")))), (productKeyList == null ? void 0 : productKeyList.data) && productKeyList.data.map((productKey2, index) => {
        const purchasedDate = FeUtils.formatDate(productKey2.grantedAt, "LLLL");
        return /* @__PURE__ */ React__default.createElement("div", {
          className: "border-gray-80 my-6 flex border-b pb-6 md:mb-4 md:mt-0 md:pb-4",
          key: index
        }, /* @__PURE__ */ React__default.createElement("div", {
          className: "flex w-1/2 flex-col md:w-4/5 md:flex-row md:items-center"
        }, /* @__PURE__ */ React__default.createElement("div", {
          className: "text-shite text-sm md:w-1/2"
        }, /* @__PURE__ */ React__default.createElement("p", null, purchasedDate)), /* @__PURE__ */ React__default.createElement("div", {
          className: "mt-4 text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:mt-0 md:w-1/2"
        }, productKey2.name)), /* @__PURE__ */ React__default.createElement("div", {
          className: "flex w-1/2 flex-col items-end md:w-1/5 md:flex-row md:items-center md:text-right"
        }, /* @__PURE__ */ React__default.createElement("button", {
          className: "text-blue-40 text-sm font-medium",
          onClick: () => this.openProductKeyDialog(index)
        }, /* @__PURE__ */ React__default.createElement(Trans, {
          i18nKey: "MyGameList.productKey.table.showKey"
        }, "Show key"))));
      }));
    };
    this.renderPagination = () => {
      const { productKeyList } = this.logic.state;
      if (!productKeyList)
        return;
      const { paging } = productKeyList;
      const hasNext = !!(paging == null ? void 0 : paging.next);
      const hasPrev = !!(paging == null ? void 0 : paging.previous);
      const currentPage = this.props.page;
      return /* @__PURE__ */ React__default.createElement("div", {
        className: "flex justify-center"
      }, /* @__PURE__ */ React__default.createElement(Pagination, {
        next: hasNext && `${AccPath.PurchasedKeys.link}?page=${currentPage + 1}`,
        prev: hasPrev && `${AccPath.PurchasedKeys.link}?page=${currentPage - 1}`
      }));
    };
    const { page } = props;
    const userId = ((_a = Ctx.getAppState().getUser()) == null ? void 0 : _a.userId) || null;
    const pageSize = DEFAULT_KEYS_PAGE_SIZE;
    this.state = {
      isProductKeyDialogOpen: false
    };
    this.logic = new PurchasedKeysLogic({ page, userId, pageSize });
    this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    const { isFetching, productKeyList, error, selectedProductKey, codeItems } = this.logic.state;
    const { isProductKeyDialogOpen } = this.state;
    return /* @__PURE__ */ React__default.createElement("div", null, isFetching && /* @__PURE__ */ React__default.createElement(Loading, {
      className: "mt-6"
    }), !isFetching && error && /* @__PURE__ */ React__default.createElement("div", {
      className: "container mx-auto my-8"
    }, /* @__PURE__ */ React__default.createElement(CommonError, {
      error
    })), !isFetching && (productKeyList == null ? void 0 : productKeyList.data) && productKeyList.data.length > 0 && this.renderTableOrder(productKeyList), !isFetching && (productKeyList == null ? void 0 : productKeyList.data) && productKeyList.data.length === 0 && /* @__PURE__ */ React__default.createElement("div", {
      className: "text-center"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "MyGameList.productKey.notFound"
    }, "Not Found")), !isFetching && productKeyList && this.renderPagination(), isProductKeyDialogOpen && /* @__PURE__ */ React__default.createElement(ProductKeyDialog, {
      onClose: this.closeProductKeyDialog,
      selectedProductKey,
      codeItems
    }));
  }
}
const PurchasedKeys = withPropsGuard(PurchasedKeysImpl, (prevProps, nextProps) => {
  return prevProps.page !== nextProps.page;
});
const purchasedOptionboxDialog = "purchasedOptionboxDialog _purchasedOptionboxDialog_1055c";
const dialogFooter = "dialogFooter _dialogFooter_e0f4f";
const btnClose = "btnClose _btnClose_f1510";
var styles = {
  purchasedOptionboxDialog,
  dialogFooter,
  btnClose
};
class PurchasedOptionboxDialogLogic extends Container {
  constructor(props) {
    super();
    this.props = props;
    this.state = {
      isFetching: false,
      isSubmitting: false,
      isClaimingSuccess: false,
      error: null,
      errorSubmit: null,
      optionboxItem: null,
      itemEntitlementStatus: null
    };
    this.sdk = Ctx.getAppState().getSdk();
  }
  async init() {
    await this.fetchOptionboxItem();
  }
  async fetchOptionboxItem() {
    var _a, _b, _c, _d;
    try {
      if (this.state.isFetching || !this.props.selectedOptionbox)
        return;
      await this.setState({
        isFetching: true,
        optionboxItem: null
      });
      const { selectedOptionbox, userId } = this.props;
      const itemId = selectedOptionbox == null ? void 0 : selectedOptionbox.itemId;
      const region = (_a = selectedOptionbox.itemSnapshot) == null ? void 0 : _a.region;
      if (!region || !itemId || !userId)
        return;
      const fetchCurrentOptionboxItem = await this.sdk.Platform.Item().getItemsByItemIdLocale({ itemId, queryParams: { region } });
      if (fetchCurrentOptionboxItem.error)
        throw fetchCurrentOptionboxItem.error;
      const itemIds = ((_d = (_c = (_b = fetchCurrentOptionboxItem.response.data) == null ? void 0 : _b.optionBoxConfig) == null ? void 0 : _c.boxItems) == null ? void 0 : _d.map(({ itemId: itemId2 }) => itemId2)) || [];
      const fetchItemsByIds = await this.sdk.Platform.Item().getItemsByItemIds({ queryParams: { region, itemIds: itemIds.toString() } });
      if (fetchItemsByIds.error)
        throw fetchItemsByIds.error;
      const entitlementOwnership = await this.sdk.Platform.Entitlement().getEntitlementByItemIds({ userId, queryParams: { ids: itemIds } });
      if (entitlementOwnership.error)
        throw entitlementOwnership.error;
      const itemEntitlementStatus = new Map(entitlementOwnership.response.data.filter((ownership) => !!ownership.itemId).map((ownership) => [ownership.itemId, ownership]));
      this.setState({
        itemEntitlementStatus,
        optionboxItem: fetchItemsByIds.response.data
      });
    } catch (error) {
      this.setState({ error });
    } finally {
      this.setState({ isFetching: false });
    }
  }
  async claimOptionboxItem(itemId) {
    try {
      const { userId, selectedOptionbox } = this.props;
      if (this.state.isSubmitting || !userId || !(selectedOptionbox == null ? void 0 : selectedOptionbox.id))
        return;
      await this.setState({
        isSubmitting: true
      });
      const data = {
        useCount: 1,
        options: [itemId]
      };
      const result = await this.sdk.Platform.Entitlement().claimEntitlement({ userId, entitlementId: selectedOptionbox.id, data });
      if (result.error)
        throw result.error;
      this.setState({ isClaimingSuccess: true });
    } catch (error) {
      this.setState({ errorSubmit: error });
    } finally {
      this.setState({ isSubmitting: false });
    }
  }
}
const CheckMarkIcon = ({ className }) => /* @__PURE__ */ React__default.createElement("i", {
  className
}, /* @__PURE__ */ React__default.createElement("svg", {
  width: 10,
  height: 8,
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M9.362.989a.5.5 0 0 1-.017.706l-5.6 5.334a.5.5 0 0 1-.72-.032l-2.4-2.72a.5.5 0 0 1 .75-.662l2.056 2.331L8.655.971a.5.5 0 0 1 .707.018Z",
  fill: "#fff"
})));
const AlreadyOwnedPermanentItemErrorCode = 31177;
class PurchasedOptionboxDialog extends React__default.Component {
  constructor(props) {
    var _a;
    super(props);
    const { selectedOptionbox } = props;
    const userId = ((_a = Ctx.getAppState().getUser()) == null ? void 0 : _a.userId) || null;
    this.state = {
      selectedItemId: ""
    };
    this.logic = new PurchasedOptionboxDialogLogic({ selectedOptionbox, userId });
    this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  onSelectedItemChange(value) {
    this.setState({ selectedItemId: value });
  }
  onSubmit() {
    const { selectedItemId } = this.state;
    if (!selectedItemId)
      return;
    this.logic.claimOptionboxItem(selectedItemId).then(() => {
      if (this.logic.state.isClaimingSuccess)
        this.props.onClose(true);
    });
  }
  isItemStatusOwned(item) {
    var _a;
    const { itemEntitlementStatus } = this.logic.state;
    if (item.entitlementType === EntitlementType.enum.DURABLE) {
      return !!((_a = itemEntitlementStatus == null ? void 0 : itemEntitlementStatus.get(item.itemId)) == null ? void 0 : _a.owned);
    }
    return false;
  }
  render() {
    const { isFetching, error, optionboxItem, isSubmitting, errorSubmit } = this.logic.state;
    const { selectedItemId } = this.state;
    const errorSubmitCode = ErrorHelper.extractServiceErrorCode(errorSubmit);
    return /* @__PURE__ */ React__default.createElement(Dialog, {
      isOpen: true,
      className: styles.purchasedOptionboxDialog
    }, /* @__PURE__ */ React__default.createElement(DialogBody, null, /* @__PURE__ */ React__default.createElement("div", {
      className: "titleContainer"
    }, /* @__PURE__ */ React__default.createElement("h1", {
      className: "title"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PurchasedItem.optionbox.dialog.title"
    }, "Option Box Items")), /* @__PURE__ */ React__default.createElement("p", {
      className: "titleDescription"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PurchasedItem.optionbox.dialog.description"
    }, "Please select an item that you want to claim."))), errorSubmit && /* @__PURE__ */ React__default.createElement(Alert, {
      type: AlertType.danger,
      className: "my-6"
    }, errorSubmitCode === AlreadyOwnedPermanentItemErrorCode ? /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PurchasedItem.optionbox.dialog.errorAlreadyOwnedItem"
    }, "Sorry! You already own this item. Please select another item.") : /* @__PURE__ */ React__default.createElement(CommonError, {
      error: errorSubmit
    })), isFetching && /* @__PURE__ */ React__default.createElement(Loading, {
      className: "mt-6"
    }), !isFetching && error && /* @__PURE__ */ React__default.createElement("div", {
      className: "container mx-auto my-8"
    }, /* @__PURE__ */ React__default.createElement(CommonError, {
      error
    })), !isFetching && !error && optionboxItem && /* @__PURE__ */ React__default.createElement("div", {
      className: "itemSelection grid grid-cols-4 gap-6"
    }, optionboxItem.map((item, index) => /* @__PURE__ */ React__default.createElement("div", {
      className: classNames("item", { selected: item.itemId === selectedItemId, owned: this.isItemStatusOwned(item) }),
      key: index,
      onClick: () => this.onSelectedItemChange(item.itemId)
    }, /* @__PURE__ */ React__default.createElement("div", {
      className: "itemImage"
    }, /* @__PURE__ */ React__default.createElement("img", {
      alt: "productImage",
      src: ItemHelper.getFilteredImageUrlByTag(item.images, ItemImageTag.productCover) || defaultItemImage,
      loading: "lazy"
    }), /* @__PURE__ */ React__default.createElement("div", {
      className: "ownedLabel"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PurchasedItem.optionbox.dialog.ownedLabel"
    }, "Owned")), /* @__PURE__ */ React__default.createElement("div", {
      className: "selectedMark"
    }, /* @__PURE__ */ React__default.createElement(CheckMarkIcon, null))), /* @__PURE__ */ React__default.createElement("p", {
      className: "itemName"
    }, item.name))))), /* @__PURE__ */ React__default.createElement(DialogFooter, {
      className: styles.dialogFooter
    }, /* @__PURE__ */ React__default.createElement(Button, {
      className: "btn big btn-ghost mr-3 uppercase",
      buttonType: ButtonType.TEXT,
      buttonStyle: ButtonStyle.NONE,
      onClick: () => this.props.onClose(false)
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "common.close"
    }, "Close")), /* @__PURE__ */ React__default.createElement(Button, {
      loadingIndicator: "SPINNER",
      className: "btn btn-primary uppercase",
      onClick: () => this.onSubmit(),
      isLoading: isSubmitting,
      disabled: isSubmitting || !selectedItemId
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "common.claim"
    }, "Claim"))));
  }
}
class PurchasedOptionboxLogic extends Container {
  constructor(props) {
    super();
    this.props = props;
    this.state = {
      isFetching: false,
      optionboxLists: null,
      error: null
    };
    this.sdk = Ctx.getAppState().getSdk();
  }
  getLimit() {
    const pageSize = 10;
    return this.props.pageSize || pageSize;
  }
  getOffset(page) {
    return page ? (page - 1) * this.getLimit() : 0;
  }
  async init() {
    await this.fetchOptionboxLists();
  }
  async fetchOptionboxLists() {
    try {
      if (this.state.isFetching)
        return;
      this.setState({
        isFetching: true,
        optionboxLists: null
      });
      if (!this.props.userId)
        return;
      const { userId, page } = this.props;
      const optionboxResult = await this.sdk.Platform.Entitlement().getEntitlements({
        userId,
        queryParams: {
          offset: this.getOffset(page),
          limit: this.getLimit(),
          entitlementClazz: ItemType.enum.OPTIONBOX
        }
      });
      if (optionboxResult.error)
        throw optionboxResult.error;
      const optionboxLists = optionboxResult.response.data;
      this.setState({
        optionboxLists
      });
    } catch (error) {
      this.setState({ error });
    } finally {
      this.setState({ isFetching: false });
    }
  }
}
const DEFAULT_OPTIONBOX_PAGE_SIZE = 10;
class PurchasedOptionboxImpl extends React__default.Component {
  constructor(props) {
    var _a;
    super(props);
    this.openOptionboxDialog = (arrayNumber) => {
      const { optionboxLists } = this.logic.state;
      const selectedOptionbox = (optionboxLists == null ? void 0 : optionboxLists.data) && optionboxLists.data[arrayNumber];
      if (!selectedOptionbox)
        return;
      this.setState({
        selectedOptionbox
      });
    };
    this.closeOptionboxDialog = (showSuccessClaim) => {
      this.setState({ selectedOptionbox: null });
      if (showSuccessClaim) {
        this.setState({ showSuccessMessage: true });
        this.logic.init();
      }
    };
    this.renderTableOrder = (optionboxList) => {
      var _a2;
      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
        className: "border-gray-80 mb-4 hidden border-b py-2 md:flex"
      }, /* @__PURE__ */ React__default.createElement("div", {
        className: "flex w-1/2 flex-col md:w-4/5 md:flex-row"
      }, /* @__PURE__ */ React__default.createElement("p", {
        className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2"
      }, /* @__PURE__ */ React__default.createElement(Trans, {
        i18nKey: "PurchasedItem.optionbox.table.name"
      }, "Name")), /* @__PURE__ */ React__default.createElement("p", {
        className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2"
      }, /* @__PURE__ */ React__default.createElement(Trans, {
        i18nKey: "PurchasedItem.optionbox.table.count"
      }, "Count")))), (_a2 = optionboxList == null ? void 0 : optionboxList.data) == null ? void 0 : _a2.map((optionbox, index) => {
        return /* @__PURE__ */ React__default.createElement("div", {
          className: "border-gray-80 my-6 flex border-b pb-6 md:mb-4 md:mt-0 md:pb-4",
          key: index
        }, /* @__PURE__ */ React__default.createElement("div", {
          className: "flex w-1/2 flex-col md:w-4/5 md:flex-row md:items-center"
        }, /* @__PURE__ */ React__default.createElement("div", {
          className: "text-sm text-[color:rgb(var(--od-rgb-text))] md:w-1/2"
        }, /* @__PURE__ */ React__default.createElement("p", null, optionbox.name)), /* @__PURE__ */ React__default.createElement("div", {
          className: "mt-4 text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:mt-0 md:w-1/2"
        }, optionbox.useCount)), /* @__PURE__ */ React__default.createElement("div", {
          className: "flex w-1/2 flex-col items-end md:w-1/5 md:flex-row md:items-center md:text-right"
        }, /* @__PURE__ */ React__default.createElement("button", {
          className: "text-blue-40 text-sm font-medium",
          onClick: () => this.openOptionboxDialog(index)
        }, /* @__PURE__ */ React__default.createElement(Trans, {
          i18nKey: "PurchasedItem.optionbox.table.openOptionBox"
        }, "Open Option Box"))));
      }));
    };
    this.renderPagination = () => {
      const { optionboxLists } = this.logic.state;
      if (!optionboxLists)
        return;
      const { paging } = optionboxLists;
      const hasNext = !!(paging == null ? void 0 : paging.next);
      const hasPrev = !!(paging == null ? void 0 : paging.previous);
      const currentPage = this.props.page;
      return /* @__PURE__ */ React__default.createElement("div", {
        className: "flex justify-center"
      }, /* @__PURE__ */ React__default.createElement(Pagination, {
        next: hasNext && `${AccPath.PurchasedKeys.link}?page=${currentPage + 1}`,
        prev: hasPrev && `${AccPath.PurchasedKeys.link}?page=${currentPage - 1}`
      }));
    };
    this.closeSuccessMessage = () => {
      this.setState({ showSuccessMessage: false });
    };
    const { page } = props;
    const userId = ((_a = Ctx.getAppState().getUser()) == null ? void 0 : _a.userId) || null;
    const pageSize = DEFAULT_OPTIONBOX_PAGE_SIZE;
    this.state = {
      selectedOptionbox: null,
      showSuccessMessage: false
    };
    this.logic = new PurchasedOptionboxLogic({ page, userId, pageSize });
    this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    var _a, _b;
    const { isFetching, optionboxLists, error } = this.logic.state;
    const { selectedOptionbox, showSuccessMessage } = this.state;
    return /* @__PURE__ */ React__default.createElement("div", null, showSuccessMessage && /* @__PURE__ */ React__default.createElement(Alert, {
      type: AlertType.success,
      onDismiss: this.closeSuccessMessage,
      className: "mb-6"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PurchasedItem.optionbox.successClaim"
    }, "Successfully claim the item")), isFetching && /* @__PURE__ */ React__default.createElement(Loading, {
      className: "mt-6"
    }), !isFetching && error && /* @__PURE__ */ React__default.createElement("div", {
      className: "container mx-auto my-8"
    }, /* @__PURE__ */ React__default.createElement(CommonError, {
      error
    })), !isFetching && !!((_a = optionboxLists == null ? void 0 : optionboxLists.data) == null ? void 0 : _a.length) && this.renderTableOrder(optionboxLists), !isFetching && !((_b = optionboxLists == null ? void 0 : optionboxLists.data) == null ? void 0 : _b.length) && /* @__PURE__ */ React__default.createElement("div", {
      className: "text-center"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "MyGameList.productKey.notFound"
    }, "Not Found")), !isFetching && optionboxLists && this.renderPagination(), !!selectedOptionbox && /* @__PURE__ */ React__default.createElement(PurchasedOptionboxDialog, {
      selectedOptionbox,
      onClose: (showSuccessClaim) => this.closeOptionboxDialog(showSuccessClaim)
    }));
  }
}
const PurchasedOptionbox = withPropsGuard(PurchasedOptionboxImpl, (prevProps, nextProps) => {
  return prevProps.page !== nextProps.page;
});
const NoGame = () => /* @__PURE__ */ React__default.createElement("p", {
  className: classNames(purchasedItemsListStyles.noGame, OverrideCSS.TITLE_FONT)
}, /* @__PURE__ */ React__default.createElement(Trans, {
  i18nKey: "MyGameList.noGame"
}, "You don't have any games yet."));
class PurchasedItemsList extends React__default.Component {
  constructor(props) {
    var _a;
    super(props);
    this.renderMyGames = () => {
      const { isFetching, gameList, gameItems } = this.logic.state;
      return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !isFetching && gameList && /* @__PURE__ */ React__default.createElement("div", {
        className: purchasedItemsListStyles.myGameList
      }, !!gameList.length && gameItems && gameItems.size ? gameList.map((appEntitlement) => {
        const { itemId } = appEntitlement;
        const item = itemId && gameItems.get(itemId);
        return item ? /* @__PURE__ */ React__default.createElement(GameItem, {
          key: item.itemId,
          item
        }) : null;
      }) : /* @__PURE__ */ React__default.createElement(NoGame, null)));
    };
    this.renderPurchasedItemsSidebar = () => /* @__PURE__ */ React__default.createElement("div", {
      className: purchasedItemsListStyles.sidebarContainer
    }, /* @__PURE__ */ React__default.createElement("div", {
      className: "sidebar"
    }, /* @__PURE__ */ React__default.createElement("nav", {
      className: "navigationDesktop"
    }, /* @__PURE__ */ React__default.createElement(NavLink, {
      exact: true,
      to: AccPath.PurchasedGame.makePath()
    }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "MyGameList.tabs.games"
    }, "Games")), /* @__PURE__ */ React__default.createElement(ArrowIcon, {
      className: classNames("activeArrow", ArrowIconStyles.right)
    })), /* @__PURE__ */ React__default.createElement(NavLink, {
      exact: true,
      to: AccPath.PurchasedKeys.makePath()
    }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "MyGameList.tabs.keys"
    }, "Keys")), /* @__PURE__ */ React__default.createElement(ArrowIcon, {
      className: classNames("activeArrow", ArrowIconStyles.right)
    })), /* @__PURE__ */ React__default.createElement(NavLink, {
      exact: true,
      to: AccPath.PurchasedOptionbox.makePath()
    }, /* @__PURE__ */ React__default.createElement("span", null, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "MyGameList.tabs.optionbox"
    }, "Optionbox")), /* @__PURE__ */ React__default.createElement(ArrowIcon, {
      className: classNames("activeArrow", ArrowIconStyles.right)
    })))), /* @__PURE__ */ React__default.createElement("div", {
      className: "purchasedItemsContainer"
    }, /* @__PURE__ */ React__default.createElement(Switch, null, /* @__PURE__ */ React__default.createElement(Route, {
      exact: true,
      path: AccPath.PurchasedGame.link,
      render: this.renderMyGames
    }), /* @__PURE__ */ React__default.createElement(Route, {
      exact: true,
      path: AccPath.PurchasedKeys.link,
      render: (routeComponentProps) => {
        const page = Number(UrlUtils.silentSearchParamsBuilder(routeComponentProps.location.search).get("page"));
        const hasValidPage = !Number.isNaN(page) && page >= 1;
        if (!hasValidPage) {
          return /* @__PURE__ */ React__default.createElement(Redirect, {
            to: AccPath.PurchasedKeys.withSearchParams({ page: 1 })
          });
        }
        return hasValidPage && /* @__PURE__ */ React__default.createElement(PurchasedKeys, {
          page
        });
      }
    }), /* @__PURE__ */ React__default.createElement(Route, {
      exact: true,
      path: AccPath.PurchasedOptionbox.link,
      render: (routeComponentProps) => {
        const page = Number(UrlUtils.silentSearchParamsBuilder(routeComponentProps.location.search).get("page"));
        const hasValidPage = !Number.isNaN(page) && page >= 1;
        if (!hasValidPage) {
          return /* @__PURE__ */ React__default.createElement(Redirect, {
            to: AccPath.PurchasedOptionbox.withSearchParams({ page: 1 })
          });
        }
        return hasValidPage && /* @__PURE__ */ React__default.createElement(PurchasedOptionbox, {
          page
        });
      }
    }), /* @__PURE__ */ React__default.createElement(Redirect, {
      from: AccPath.PurchasedItems.makePath(),
      to: AccPath.PurchasedGame.makePath()
    }))));
    const { limit } = props;
    const userId = ((_a = Ctx.getAppState().getUser()) == null ? void 0 : _a.userId) || null;
    const logic = new PurchasedItemsListLogic({ userId, limit });
    this.state = {
      isProductKeyDialogOpen: false
    };
    logic.subscribe(() => this.setState({}));
    this.logic = logic;
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    const { isFetching, error, gameList } = this.logic.state;
    return /* @__PURE__ */ React__default.createElement("div", {
      className: purchasedItemsListStyles.purchasedItemsListWrapper
    }, isFetching && /* @__PURE__ */ React__default.createElement(Loading, null), !isFetching && error && /* @__PURE__ */ React__default.createElement("div", {
      className: purchasedItemsListStyles.errorContainer
    }, /* @__PURE__ */ React__default.createElement(CommonError, {
      error
    })), !isFetching && gameList && this.renderPurchasedItemsSidebar());
  }
}
export { GameItem as G, NoGame as N, PurchasedItemsList as P, purchasedItemsListStyles as p };
