import { aA as cM, an as Z, ab as aM, C, a as E, au as jM, D as X, t as zM, p as H, j as G, h as W, T as u, q as $, f as h, a3 as q, a1 as MM, ad as b, F as uM, g as T, L as S, i as O, as as TM, y as rM, A as k, e as p, U as V, O as sM } from "./index-162fd1aa.mjs";
import { c as y } from "./reactSlick-cb4a2d39.mjs";
import e from "react";
import { Link as nM, NavLink as Y, Switch as oM, Route as U, Redirect as w } from "react-router-dom";
import { a as d } from "./ItemHelper-37a12c2c.mjs";
import { P as eM } from "./Pagination-a353297b.mjs";
import { w as tM } from "./WithPropsGuard-9dd19ecc.mjs";
import { d as NM } from "./default-item-image-9aab0e29.mjs";
import { k as yM, l as B } from "./MockVars-1cf2eb0a.mjs";
const IM = "data:image/svg+xml;base64, ", EM = "gameItem _gameItem_1b73d", lM = "imageContainer _imageContainer_ceef1", xM = "title _title_8b3c9", x = {
  gameItem: EM,
  imageContainer: lM,
  title: xM
}, AM = ({ item: N }) => /* @__PURE__ */ e.createElement("div", { className: x.gameItem }, /* @__PURE__ */ e.createElement("div", { className: x.imageContainer }, /* @__PURE__ */ e.createElement("img", { alt: N.title, src: IM, loading: "lazy" })), /* @__PURE__ */ e.createElement("div", { className: x.title }, N.title)), OM = ({ item: N }) => {
  if (!N)
    return null;
  const M = Z.getFilteredImageUrlByTag(N.images, d.productCover) || IM;
  return /* @__PURE__ */ e.createElement("div", { className: x.gameItem }, /* @__PURE__ */ e.createElement(
    nM,
    {
      to: aM.GameItem.makePath({
        itemId: N.itemId
      })
    },
    /* @__PURE__ */ e.createElement("div", { className: x.imageContainer }, /* @__PURE__ */ e.createElement("img", { alt: N.title, src: M, loading: "lazy" })),
    /* @__PURE__ */ e.createElement("div", { className: x.title }, N.title)
  ));
}, mM = ({ item: N }) => {
  if (!N)
    return null;
  const M = cM.safeParse(N);
  return M.success ? /* @__PURE__ */ e.createElement(OM, { item: M.data }) : /* @__PURE__ */ e.createElement(AM, { item: N });
}, LM = "purchasedItemsListWrapper _purchasedItemsListWrapper_360f0", dM = "myGameList _myGameList_c2d9b", CM = "noGame _noGame_b7248", SM = "errorContainer _errorContainer_de7b7", QM = "sidebarContainer _sidebarContainer_a9939", kM = "myGamesSubSection _myGamesSubSection_9c9f5", A = {
  purchasedItemsListWrapper: LM,
  myGameList: dM,
  noGame: CM,
  errorContainer: SM,
  sidebarContainer: QM,
  myGamesSubSection: kM
};
class pM extends C {
  constructor(M) {
    super(), this.props = M, this.state = {
      isFetching: !1,
      gameList: [],
      gameItems: null,
      error: null,
      codeItems: null
    }, this.sdk = E.getAppState().getSdk();
  }
  async init() {
    await this.fetchGames();
  }
  async fetchGames() {
    try {
      if (this.state.isFetching || (await this.setState({
        isFetching: !0,
        error: null
      }), !this.props.userId))
        return;
      const { userId: M, limit: t } = this.props, I = await this.sdk.Platform.Entitlement().getEntitlements({
        userId: M,
        queryParams: { appType: jM.enum.GAME, offset: 0, limit: t }
      });
      if (I.error)
        throw I.error;
      const g = I.response.data.data, c = /* @__PURE__ */ new Map();
      if (!g)
        return;
      await Promise.all(
        g.map(async (D) => {
          const { itemId: i, itemSnapshot: a } = D;
          if (i) {
            const z = await this.fetchItem(i) || a && a;
            z && c.set(i, z);
          }
        })
      ), this.setState({
        gameList: g,
        gameItems: c
      });
    } catch (M) {
      this.setState({ error: M });
    } finally {
      this.setState({ isFetching: !1 });
    }
  }
  async fetchItem(M) {
    const t = await this.sdk.Platform.Item().getItemsByItemIdLocale({ itemId: M });
    return t.error ? null : t.response.data;
  }
}
var Q = {}, YM = function() {
  var N = document.getSelection();
  if (!N.rangeCount)
    return function() {
    };
  for (var M = document.activeElement, t = [], I = 0; I < N.rangeCount; I++)
    t.push(N.getRangeAt(I));
  switch (M.tagName.toUpperCase()) {
    case "INPUT":
    case "TEXTAREA":
      M.blur();
      break;
    default:
      M = null;
      break;
  }
  return N.removeAllRanges(), function() {
    N.type === "Caret" && N.removeAllRanges(), N.rangeCount || t.forEach(function(g) {
      N.addRange(g);
    }), M && M.focus();
  };
}, UM = YM, R = {
  "text/plain": "Text",
  "text/html": "Url",
  default: "Text"
}, wM = "Copy to clipboard: #{key}, Enter";
function hM(N) {
  var M = (/mac os x/i.test(navigator.userAgent) ? "⌘" : "Ctrl") + "+C";
  return N.replace(/#{\s*key\s*}/g, M);
}
function bM(N, M) {
  var t, I, g, c, D, i, a = !1;
  M || (M = {}), t = M.debug || !1;
  try {
    g = UM(), c = document.createRange(), D = document.getSelection(), i = document.createElement("span"), i.textContent = N, i.style.all = "unset", i.style.position = "fixed", i.style.top = 0, i.style.clip = "rect(0, 0, 0, 0)", i.style.whiteSpace = "pre", i.style.webkitUserSelect = "text", i.style.MozUserSelect = "text", i.style.msUserSelect = "text", i.style.userSelect = "text", i.addEventListener("copy", function(z) {
      if (z.stopPropagation(), M.format)
        if (z.preventDefault(), typeof z.clipboardData > "u") {
          t && console.warn("unable to use e.clipboardData"), t && console.warn("trying IE specific stuff"), window.clipboardData.clearData();
          var r = R[M.format] || R.default;
          window.clipboardData.setData(r, N);
        } else
          z.clipboardData.clearData(), z.clipboardData.setData(M.format, N);
      M.onCopy && (z.preventDefault(), M.onCopy(z.clipboardData));
    }), document.body.appendChild(i), c.selectNodeContents(i), D.addRange(c);
    var j = document.execCommand("copy");
    if (!j)
      throw new Error("copy command was unsuccessful");
    a = !0;
  } catch (z) {
    t && console.error("unable to copy using execCommand: ", z), t && console.warn("trying IE specific stuff");
    try {
      window.clipboardData.setData(M.format || "text", N), M.onCopy && M.onCopy(window.clipboardData), a = !0;
    } catch (r) {
      t && console.error("unable to copy using clipboardData: ", r), t && console.error("falling back to prompt"), I = hM("message" in M ? M.message : wM), window.prompt(I, N);
    }
  } finally {
    D && (typeof D.removeRange == "function" ? D.removeRange(c) : D.removeAllRanges()), i && document.body.removeChild(i), g();
  }
  return a;
}
var fM = bM;
Object.defineProperty(Q, "__esModule", {
  value: !0
});
Q.CopyToClipboard = void 0;
var m = iM(e), PM = iM(fM);
function iM(N) {
  return N && N.__esModule ? N : { default: N };
}
function L(N) {
  return typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? L = function(t) {
    return typeof t;
  } : L = function(t) {
    return t && typeof Symbol == "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
  }, L(N);
}
function J(N, M) {
  var t = Object.keys(N);
  if (Object.getOwnPropertySymbols) {
    var I = Object.getOwnPropertySymbols(N);
    M && (I = I.filter(function(g) {
      return Object.getOwnPropertyDescriptor(N, g).enumerable;
    })), t.push.apply(t, I);
  }
  return t;
}
function vM(N) {
  for (var M = 1; M < arguments.length; M++) {
    var t = arguments[M] != null ? arguments[M] : {};
    M % 2 ? J(t, !0).forEach(function(I) {
      _(N, I, t[I]);
    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(N, Object.getOwnPropertyDescriptors(t)) : J(t).forEach(function(I) {
      Object.defineProperty(N, I, Object.getOwnPropertyDescriptor(t, I));
    });
  }
  return N;
}
function ZM(N, M) {
  if (N == null)
    return {};
  var t = GM(N, M), I, g;
  if (Object.getOwnPropertySymbols) {
    var c = Object.getOwnPropertySymbols(N);
    for (g = 0; g < c.length; g++)
      I = c[g], !(M.indexOf(I) >= 0) && Object.prototype.propertyIsEnumerable.call(N, I) && (t[I] = N[I]);
  }
  return t;
}
function GM(N, M) {
  if (N == null)
    return {};
  var t = {}, I = Object.keys(N), g, c;
  for (c = 0; c < I.length; c++)
    g = I[c], !(M.indexOf(g) >= 0) && (t[g] = N[g]);
  return t;
}
function WM(N, M) {
  if (!(N instanceof M))
    throw new TypeError("Cannot call a class as a function");
}
function F(N, M) {
  for (var t = 0; t < M.length; t++) {
    var I = M[t];
    I.enumerable = I.enumerable || !1, I.configurable = !0, "value" in I && (I.writable = !0), Object.defineProperty(N, I.key, I);
  }
}
function _M(N, M, t) {
  return M && F(N.prototype, M), t && F(N, t), N;
}
function VM(N, M) {
  return M && (L(M) === "object" || typeof M == "function") ? M : gM(N);
}
function f(N) {
  return f = Object.setPrototypeOf ? Object.getPrototypeOf : function(t) {
    return t.__proto__ || Object.getPrototypeOf(t);
  }, f(N);
}
function gM(N) {
  if (N === void 0)
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  return N;
}
function BM(N, M) {
  if (typeof M != "function" && M !== null)
    throw new TypeError("Super expression must either be null or a function");
  N.prototype = Object.create(M && M.prototype, { constructor: { value: N, writable: !0, configurable: !0 } }), M && P(N, M);
}
function P(N, M) {
  return P = Object.setPrototypeOf || function(I, g) {
    return I.__proto__ = g, I;
  }, P(N, M);
}
function _(N, M, t) {
  return M in N ? Object.defineProperty(N, M, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : N[M] = t, N;
}
var DM = /* @__PURE__ */ function(N) {
  BM(M, N);
  function M() {
    var t, I;
    WM(this, M);
    for (var g = arguments.length, c = new Array(g), D = 0; D < g; D++)
      c[D] = arguments[D];
    return I = VM(this, (t = f(M)).call.apply(t, [this].concat(c))), _(gM(I), "onClick", function(i) {
      var a = I.props, j = a.text, z = a.onCopy, r = a.children, l = a.options, o = m.default.Children.only(r), s = (0, PM.default)(j, l);
      z && z(j, s), o && o.props && typeof o.props.onClick == "function" && o.props.onClick(i);
    }), I;
  }
  return _M(M, [{
    key: "render",
    value: function() {
      var I = this.props;
      I.text, I.onCopy, I.options;
      var g = I.children, c = ZM(I, ["text", "onCopy", "options", "children"]), D = m.default.Children.only(g);
      return m.default.cloneElement(D, vM({}, c, {
        onClick: this.onClick
      }));
    }
  }]), M;
}(m.default.PureComponent);
Q.CopyToClipboard = DM;
_(DM, "defaultProps", {
  onCopy: void 0,
  options: void 0
});
var RM = Q, v = RM.CopyToClipboard;
v.CopyToClipboard = v;
var JM = v;
const FM = "productKeyDialog _productKeyDialog_0fc4e", KM = "copyClipboard _copyClipboard_f67cb", XM = "productKey _productKey_ac3b1", HM = "grantedKeyContainer _grantedKeyContainer_1a707", $M = "grantedKey _grantedKey_45fba", qM = "btnCopy _btnCopy_36a35", Me = "alert _alert_93013", ee = "productInfoContainer _productInfoContainer_3ab1b", te = "itemName _itemName_20497", Ne = "dialogFooter _dialogFooter_d2847", Ie = "btnClose _btnClose_ce77c", n = {
  productKeyDialog: FM,
  copyClipboard: KM,
  productKey: XM,
  grantedKeyContainer: HM,
  grantedKey: $M,
  btnCopy: qM,
  alert: Me,
  productInfoContainer: ee,
  itemName: te,
  dialogFooter: Ne,
  btnClose: Ie
};
class ie extends e.Component {
  constructor(M) {
    super(M), this.state = {
      isCopied: !1
    };
  }
  render() {
    const { selectedProductKey: M, codeItems: t, onClose: I } = this.props, { isCopied: g } = this.state;
    if (!M || !t)
      return null;
    const c = t.filter((i) => i.itemId === M.itemId), D = Z.getFilteredImageUrlByTag(c[0].images, d.productCover) || NM;
    return /* @__PURE__ */ e.createElement(X, { title: zM("ProductKeyDialog.title"), isOpen: !0 }, /* @__PURE__ */ e.createElement(H, null, /* @__PURE__ */ e.createElement("div", { className: y(n.productKeyDialog) }, M && /* @__PURE__ */ e.createElement(e.Fragment, null, g && /* @__PURE__ */ e.createElement(G, { className: n.alert, type: W.success, onDismiss: () => this.setState({ isCopied: !1 }) }, /* @__PURE__ */ e.createElement(u, { i18nKey: "ProductKeyDialog.alert.copied" }, "Your key has been copied.")), /* @__PURE__ */ e.createElement("div", { className: n.productInfoContainer }, /* @__PURE__ */ e.createElement("img", { src: D, alt: d.productCover, loading: "lazy" }), /* @__PURE__ */ e.createElement("div", { className: n.itemName }, M.name)), /* @__PURE__ */ e.createElement("div", { className: y(n.copyClipboard) }, /* @__PURE__ */ e.createElement("p", { className: n.productKey }, /* @__PURE__ */ e.createElement(u, { i18nKey: "ProductKeyDialog.label.productKey" }, "Product Key")), /* @__PURE__ */ e.createElement("div", { className: n.grantedKeyContainer }, /* @__PURE__ */ e.createElement("input", { readOnly: !0, type: "text", className: n.grantedKey, value: M.grantedCode || "" }), /* @__PURE__ */ e.createElement(JM, { text: String(M.grantedCode) }, /* @__PURE__ */ e.createElement("button", { className: y("btn btn-primary", n.btnCopy), onClick: () => this.setState({ isCopied: !0 }) }, /* @__PURE__ */ e.createElement(u, { i18nKey: "ProductKeyDialog.button.copy" }, "Copy")))))))), /* @__PURE__ */ e.createElement($, { className: n.dialogFooter }, /* @__PURE__ */ e.createElement(
      h,
      {
        className: y("btn big btn-ghost uppercase"),
        buttonType: q.TEXT,
        buttonStyle: MM.NONE,
        onClick: I
      },
      /* @__PURE__ */ e.createElement(u, { i18nKey: "ProductKeyDialog.button.close" }, "Close")
    )));
  }
}
class ge extends C {
  constructor(M) {
    super(), this.fetchItemsList = async () => {
      await this.fetchAllItemList({ itemType: b.enum.CODE }).then((t) => {
        this.setState({ codeItems: t });
      });
    }, this.props = M, this.state = {
      isFetching: !1,
      productKeyList: null,
      error: null,
      selectedProductKey: null,
      codeItems: null
    }, this.sdk = E.getAppState().getSdk();
  }
  getLimit() {
    return this.props.pageSize || 10;
  }
  getOffset(M) {
    return M ? (M - 1) * this.getLimit() : 0;
  }
  async init() {
    await this.fetchProductKeys(), await this.fetchItemsList();
  }
  async fetchAllItemList(M) {
    let I = !1, g = 0, c = [];
    do {
      const D = await this.sdk.Platform.Item().fetchItemsByCriteria({ queryParams: { ...M, offset: g, limit: 100 } }).then((i) => {
        var a;
        if (i.error)
          throw i.error;
        return I = !!((a = i.response.data.paging) != null && a.next), g += 100, i.response.data.data;
      }).catch((i) => (console.error(i), I = !1, []));
      c = c.concat(D);
    } while (I);
    return Promise.resolve(c);
  }
  async fetchProductKeys() {
    try {
      if (this.state.isFetching || (await this.setState({
        isFetching: !0,
        productKeyList: null
      }), !this.props.userId))
        return;
      const { userId: M, page: t } = this.props, I = await this.sdk.Platform.Entitlement().getEntitlements({
        userId: M,
        queryParams: {
          offset: this.getOffset(t),
          limit: this.getLimit(),
          entitlementClazz: b.enum.CODE
        }
      });
      if (I.error)
        throw I.error;
      const g = I.response.data;
      this.setState({
        productKeyList: g
      });
    } catch (M) {
      this.setState({ error: M });
    } finally {
      this.setState({ isFetching: !1 });
    }
  }
}
const De = 10;
class ce extends e.Component {
  constructor(M) {
    var c;
    super(M), this.openProductKeyDialog = (D) => {
      const { productKeyList: i } = this.logic.state, a = (i == null ? void 0 : i.data) && i.data[D];
      this.logic.setState({
        selectedProductKey: a
      }), this.setState({
        isProductKeyDialogOpen: !0
      });
    }, this.closeProductKeyDialog = () => {
      this.setState({ isProductKeyDialogOpen: !1 });
    }, this.renderTableOrder = (D) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "border-gray-80 mb-4 hidden border-b py-2 md:flex" }, /* @__PURE__ */ e.createElement("div", { className: "flex w-1/2 flex-col md:w-4/5 md:flex-row" }, /* @__PURE__ */ e.createElement("p", { className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.productKey.table.purchaseDate" }, "Purchase Date")), /* @__PURE__ */ e.createElement("p", { className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.productKey.table.name" }, "Name")))), (D == null ? void 0 : D.data) && D.data.map((i, a) => {
      const j = uM.formatDate(i.grantedAt, "LLLL");
      return /* @__PURE__ */ e.createElement("div", { className: "border-gray-80 my-6 flex border-b pb-6 md:mb-4 md:mt-0 md:pb-4", key: a }, /* @__PURE__ */ e.createElement("div", { className: "flex w-1/2 flex-col md:w-4/5 md:flex-row md:items-center" }, /* @__PURE__ */ e.createElement("div", { className: "text-shite text-sm md:w-1/2" }, /* @__PURE__ */ e.createElement("p", null, j)), /* @__PURE__ */ e.createElement("div", { className: "mt-4 text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:mt-0 md:w-1/2" }, i.name)), /* @__PURE__ */ e.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__ */ e.createElement("button", { className: "text-blue-40 text-sm font-medium", onClick: () => this.openProductKeyDialog(a) }, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.productKey.table.showKey" }, "Show key"))));
    })), this.renderPagination = () => {
      const { productKeyList: D } = this.logic.state;
      if (!D)
        return;
      const { paging: i } = D, a = !!(i != null && i.next), j = !!(i != null && i.previous), z = this.props.page;
      return /* @__PURE__ */ e.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ e.createElement(
        eM,
        {
          next: a && `${T.PurchasedKeys.link}?page=${z + 1}`,
          prev: j && `${T.PurchasedKeys.link}?page=${z - 1}`
        }
      ));
    };
    const { page: t } = M, I = ((c = E.getAppState().getUser()) == null ? void 0 : c.userId) || null, g = De;
    this.state = {
      isProductKeyDialogOpen: !1
    }, this.logic = new ge({ page: t, userId: I, pageSize: g }), this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    const { isFetching: M, productKeyList: t, error: I, selectedProductKey: g, codeItems: c } = this.logic.state, { isProductKeyDialogOpen: D } = this.state;
    return /* @__PURE__ */ e.createElement("div", null, M && /* @__PURE__ */ e.createElement(S, { className: "mt-6" }), !M && I && /* @__PURE__ */ e.createElement("div", { className: "container mx-auto my-8" }, /* @__PURE__ */ e.createElement(O, { error: I })), !M && (t == null ? void 0 : t.data) && t.data.length > 0 && this.renderTableOrder(t), !M && (t == null ? void 0 : t.data) && t.data.length === 0 && /* @__PURE__ */ e.createElement("div", { className: "text-center" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.productKey.notFound" }, "Not Found")), !M && t && this.renderPagination(), D && /* @__PURE__ */ e.createElement(ie, { onClose: this.closeProductKeyDialog, selectedProductKey: g, codeItems: c }));
  }
}
const ae = tM(ce, (N, M) => N.page !== M.page), je = "purchasedOptionboxDialog _purchasedOptionboxDialog_f7709", ze = "dialogFooter _dialogFooter_915a8", ue = "btnClose _btnClose_f913f", K = {
  purchasedOptionboxDialog: je,
  dialogFooter: ze,
  btnClose: ue
};
class Te extends C {
  constructor(M) {
    super(), this.props = M, this.state = {
      isFetching: !1,
      isSubmitting: !1,
      isClaimingSuccess: !1,
      error: null,
      errorSubmit: null,
      optionboxItem: null,
      itemEntitlementStatus: null
    }, this.sdk = E.getAppState().getSdk();
  }
  async init() {
    await this.fetchOptionboxItem();
  }
  async fetchOptionboxItem() {
    var M, t, I, g;
    try {
      if (this.state.isFetching || !this.props.selectedOptionbox)
        return;
      await this.setState({
        isFetching: !0,
        optionboxItem: null
      });
      const { selectedOptionbox: c, userId: D } = this.props, i = c == null ? void 0 : c.itemId, a = (M = c.itemSnapshot) == null ? void 0 : M.region;
      if (!a || !i || !D)
        return;
      const j = await this.sdk.Platform.Item().getItemsByItemIdLocale({ itemId: i, queryParams: { region: a } });
      if (j.error)
        throw j.error;
      const z = ((g = (I = (t = j.response.data) == null ? void 0 : t.optionBoxConfig) == null ? void 0 : I.boxItems) == null ? void 0 : g.map(({ itemId: s }) => s)) || [], r = await this.sdk.Platform.Item().getItemsByItemIds({ queryParams: { region: a, itemIds: z.toString() } });
      if (r.error)
        throw r.error;
      const l = await this.sdk.Platform.Entitlement().getEntitlementByItemIds({ userId: D, queryParams: { ids: z } });
      if (l.error)
        throw l.error;
      const o = new Map(
        l.response.data.filter((s) => !!s.itemId).map((s) => [s.itemId, s])
      );
      this.setState({
        itemEntitlementStatus: o,
        optionboxItem: r.response.data
      });
    } catch (c) {
      this.setState({ error: c });
    } finally {
      this.setState({ isFetching: !1 });
    }
  }
  async claimOptionboxItem(M) {
    try {
      const { userId: t, selectedOptionbox: I } = this.props;
      if (this.state.isSubmitting || !t || !(I != null && I.id))
        return;
      await this.setState({
        isSubmitting: !0
      });
      const g = {
        useCount: 1,
        options: [M]
      }, c = await this.sdk.Platform.Entitlement().claimEntitlement({ userId: t, entitlementId: I.id, data: g });
      if (c.error)
        throw c.error;
      this.setState({ isClaimingSuccess: !0 });
    } catch (t) {
      this.setState({ errorSubmit: t });
    } finally {
      this.setState({ isSubmitting: !1 });
    }
  }
}
const re = ({ className: N }) => /* @__PURE__ */ e.createElement("i", { className: N }, /* @__PURE__ */ e.createElement("svg", { width: 10, height: 8, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ e.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"
  }
))), se = 31177;
class ne extends e.Component {
  constructor(M) {
    var g;
    super(M);
    const { selectedOptionbox: t } = M, I = ((g = E.getAppState().getUser()) == null ? void 0 : g.userId) || null;
    this.state = {
      selectedItemId: ""
    }, this.logic = new Te({ selectedOptionbox: t, userId: I }), this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  onSelectedItemChange(M) {
    this.setState({ selectedItemId: M });
  }
  onSubmit() {
    const { selectedItemId: M } = this.state;
    M && this.logic.claimOptionboxItem(M).then(() => {
      this.logic.state.isClaimingSuccess && this.props.onClose(!0);
    });
  }
  isItemStatusOwned(M) {
    var I;
    const { itemEntitlementStatus: t } = this.logic.state;
    return M.entitlementType === TM.enum.DURABLE ? !!((I = t == null ? void 0 : t.get(M.itemId)) != null && I.owned) : !1;
  }
  render() {
    const { isFetching: M, error: t, optionboxItem: I, isSubmitting: g, errorSubmit: c } = this.logic.state, { selectedItemId: D } = this.state, i = rM.extractServiceErrorCode(c);
    return /* @__PURE__ */ e.createElement(X, { isOpen: !0, className: K.purchasedOptionboxDialog }, /* @__PURE__ */ e.createElement(H, null, /* @__PURE__ */ e.createElement("div", { className: "titleContainer" }, /* @__PURE__ */ e.createElement("h1", { className: "title" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "PurchasedItem.optionbox.dialog.title" }, "Option Box Items")), /* @__PURE__ */ e.createElement("p", { className: "titleDescription" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "PurchasedItem.optionbox.dialog.description" }, "Please select an item that you want to claim."))), c && /* @__PURE__ */ e.createElement(G, { type: W.danger, className: "my-6" }, i === se ? /* @__PURE__ */ e.createElement(u, { i18nKey: "PurchasedItem.optionbox.dialog.errorAlreadyOwnedItem" }, "Sorry! You already own this item. Please select another item.") : /* @__PURE__ */ e.createElement(O, { error: c })), M && /* @__PURE__ */ e.createElement(S, { className: "mt-6" }), !M && t && /* @__PURE__ */ e.createElement("div", { className: "container mx-auto my-8" }, /* @__PURE__ */ e.createElement(O, { error: t })), !M && !t && I && /* @__PURE__ */ e.createElement("div", { className: "itemSelection grid grid-cols-4 gap-6" }, I.map((a, j) => /* @__PURE__ */ e.createElement(
      "div",
      {
        className: y("item", { selected: a.itemId === D, owned: this.isItemStatusOwned(a) }),
        key: j,
        onClick: () => this.onSelectedItemChange(a.itemId)
      },
      /* @__PURE__ */ e.createElement("div", { className: "itemImage" }, /* @__PURE__ */ e.createElement(
        "img",
        {
          alt: "productImage",
          src: Z.getFilteredImageUrlByTag(a.images, d.productCover) || NM,
          loading: "lazy"
        }
      ), /* @__PURE__ */ e.createElement("div", { className: "ownedLabel" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "PurchasedItem.optionbox.dialog.ownedLabel" }, "Owned")), /* @__PURE__ */ e.createElement("div", { className: "selectedMark" }, /* @__PURE__ */ e.createElement(re, null))),
      /* @__PURE__ */ e.createElement("p", { className: "itemName" }, a.name)
    )))), /* @__PURE__ */ e.createElement($, { className: K.dialogFooter }, /* @__PURE__ */ e.createElement(
      h,
      {
        className: "btn big btn-ghost mr-3 uppercase",
        buttonType: q.TEXT,
        buttonStyle: MM.NONE,
        onClick: () => this.props.onClose(!1)
      },
      /* @__PURE__ */ e.createElement(u, { i18nKey: "common.close" }, "Close")
    ), /* @__PURE__ */ e.createElement(
      h,
      {
        loadingIndicator: "SPINNER",
        className: "btn btn-primary uppercase",
        onClick: () => this.onSubmit(),
        isLoading: g,
        disabled: g || !D
      },
      /* @__PURE__ */ e.createElement(u, { i18nKey: "common.claim" }, "Claim")
    )));
  }
}
class oe extends C {
  constructor(M) {
    super(), this.props = M, this.state = {
      isFetching: !1,
      optionboxLists: null,
      error: null
    }, this.sdk = E.getAppState().getSdk();
  }
  getLimit() {
    return this.props.pageSize || 10;
  }
  getOffset(M) {
    return M ? (M - 1) * this.getLimit() : 0;
  }
  async init() {
    await this.fetchOptionboxLists();
  }
  async fetchOptionboxLists() {
    try {
      if (this.state.isFetching || (this.setState({
        isFetching: !0,
        optionboxLists: null
      }), !this.props.userId))
        return;
      const { userId: M, page: t } = this.props, I = await this.sdk.Platform.Entitlement().getEntitlements({
        userId: M,
        queryParams: {
          offset: this.getOffset(t),
          limit: this.getLimit(),
          entitlementClazz: b.enum.OPTIONBOX
        }
      });
      if (I.error)
        throw I.error;
      const g = I.response.data;
      this.setState({
        optionboxLists: g
      });
    } catch (M) {
      this.setState({ error: M });
    } finally {
      this.setState({ isFetching: !1 });
    }
  }
}
const ye = 10;
class Ee extends e.Component {
  constructor(M) {
    var c;
    super(M), this.openOptionboxDialog = (D) => {
      const { optionboxLists: i } = this.logic.state, a = (i == null ? void 0 : i.data) && i.data[D];
      a && this.setState({
        selectedOptionbox: a
      });
    }, this.closeOptionboxDialog = (D) => {
      this.setState({ selectedOptionbox: null }), D && (this.setState({ showSuccessMessage: !0 }), this.logic.init());
    }, this.renderTableOrder = (D) => {
      var i;
      return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "border-gray-80 mb-4 hidden border-b py-2 md:flex" }, /* @__PURE__ */ e.createElement("div", { className: "flex w-1/2 flex-col md:w-4/5 md:flex-row" }, /* @__PURE__ */ e.createElement("p", { className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "PurchasedItem.optionbox.table.name" }, "Name")), /* @__PURE__ */ e.createElement("p", { className: "text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:w-1/2" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "PurchasedItem.optionbox.table.count" }, "Count")))), (i = D == null ? void 0 : D.data) == null ? void 0 : i.map((a, j) => /* @__PURE__ */ e.createElement("div", { className: "border-gray-80 my-6 flex border-b pb-6 md:mb-4 md:mt-0 md:pb-4", key: j }, /* @__PURE__ */ e.createElement("div", { className: "flex w-1/2 flex-col md:w-4/5 md:flex-row md:items-center" }, /* @__PURE__ */ e.createElement("div", { className: "text-sm text-[color:rgb(var(--od-rgb-text))] md:w-1/2" }, /* @__PURE__ */ e.createElement("p", null, a.name)), /* @__PURE__ */ e.createElement("div", { className: "mt-4 text-sm text-[color:rgb(var(--od-rgb-text),0.65)] md:mt-0 md:w-1/2" }, a.useCount)), /* @__PURE__ */ e.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__ */ e.createElement("button", { className: "text-blue-40 text-sm font-medium", onClick: () => this.openOptionboxDialog(j) }, /* @__PURE__ */ e.createElement(u, { i18nKey: "PurchasedItem.optionbox.table.openOptionBox" }, "Open Option Box"))))));
    }, this.renderPagination = () => {
      const { optionboxLists: D } = this.logic.state;
      if (!D)
        return;
      const { paging: i } = D, a = !!(i != null && i.next), j = !!(i != null && i.previous), z = this.props.page;
      return /* @__PURE__ */ e.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ e.createElement(
        eM,
        {
          next: a && `${T.PurchasedKeys.link}?page=${z + 1}`,
          prev: j && `${T.PurchasedKeys.link}?page=${z - 1}`
        }
      ));
    }, this.closeSuccessMessage = () => {
      this.setState({ showSuccessMessage: !1 });
    };
    const { page: t } = M, I = ((c = E.getAppState().getUser()) == null ? void 0 : c.userId) || null, g = ye;
    this.state = {
      selectedOptionbox: null,
      showSuccessMessage: !1
    }, this.logic = new oe({ page: t, userId: I, pageSize: g }), this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    var D, i;
    const { isFetching: M, optionboxLists: t, error: I } = this.logic.state, { selectedOptionbox: g, showSuccessMessage: c } = this.state;
    return /* @__PURE__ */ e.createElement("div", null, c && /* @__PURE__ */ e.createElement(G, { type: W.success, onDismiss: this.closeSuccessMessage, className: "mb-6" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "PurchasedItem.optionbox.successClaim" }, "Successfully claim the item")), M && /* @__PURE__ */ e.createElement(S, { className: "mt-6" }), !M && I && /* @__PURE__ */ e.createElement("div", { className: "container mx-auto my-8" }, /* @__PURE__ */ e.createElement(O, { error: I })), !M && !!((D = t == null ? void 0 : t.data) != null && D.length) && this.renderTableOrder(t), !M && !((i = t == null ? void 0 : t.data) != null && i.length) && /* @__PURE__ */ e.createElement("div", { className: "text-center" }, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.productKey.notFound" }, "Not Found")), !M && t && this.renderPagination(), !!g && /* @__PURE__ */ e.createElement(
      ne,
      {
        selectedOptionbox: g,
        onClose: (a) => this.closeOptionboxDialog(a)
      }
    ));
  }
}
const le = tM(Ee, (N, M) => N.page !== M.page), xe = () => /* @__PURE__ */ e.createElement("p", { className: y(A.noGame, sM.TITLE_FONT) }, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.noGame" }, "You don't have any games yet."));
class pe extends e.Component {
  constructor(M) {
    var c;
    super(M), this.renderMyGames = () => {
      const { isFetching: D, gameList: i, gameItems: a } = this.logic.state, j = this.props.isPreviewMode, z = j ? B : i, r = j ? yM() : a;
      return /* @__PURE__ */ e.createElement(e.Fragment, null, !D && z && /* @__PURE__ */ e.createElement("div", { className: A.myGameList }, z.length && r && r.size ? z.map((l) => {
        const { itemId: o } = l, s = o && r.get(o);
        return s ? /* @__PURE__ */ e.createElement(mM, { key: s.itemId, item: s }) : null;
      }) : /* @__PURE__ */ e.createElement(xe, null)));
    }, this.renderPurchasedItemsSidebar = () => {
      const D = this.props.isPreviewMode;
      return /* @__PURE__ */ e.createElement("div", { className: A.sidebarContainer }, /* @__PURE__ */ e.createElement("div", { className: "sidebar" }, /* @__PURE__ */ e.createElement("nav", { className: "navigationDesktop" }, /* @__PURE__ */ e.createElement(Y, { className: D ? "active" : "", exact: !0, to: T.PurchasedGame.makePath() }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.tabs.games" }, "Games")), /* @__PURE__ */ e.createElement(k, { className: y("activeArrow", p.right) })), /* @__PURE__ */ e.createElement(Y, { exact: !0, to: T.PurchasedKeys.makePath() }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.tabs.keys" }, "Keys")), /* @__PURE__ */ e.createElement(k, { className: y("activeArrow", p.right) })), /* @__PURE__ */ e.createElement(Y, { exact: !0, to: T.PurchasedOptionbox.makePath() }, /* @__PURE__ */ e.createElement("span", null, /* @__PURE__ */ e.createElement(u, { i18nKey: "MyGameList.tabs.optionbox" }, "Optionbox")), /* @__PURE__ */ e.createElement(k, { className: y("activeArrow", p.right) })))), /* @__PURE__ */ e.createElement("div", { className: "purchasedItemsContainer" }, D && this.renderMyGames(), /* @__PURE__ */ e.createElement(oM, null, /* @__PURE__ */ e.createElement(U, { exact: !0, path: T.PurchasedGame.link, render: this.renderMyGames }), /* @__PURE__ */ e.createElement(
        U,
        {
          exact: !0,
          path: T.PurchasedKeys.link,
          render: (i) => {
            const a = Number(V.silentSearchParamsBuilder(i.location.search).get("page")), j = !Number.isNaN(a) && a >= 1;
            return j ? j && /* @__PURE__ */ e.createElement(ae, { page: a }) : /* @__PURE__ */ e.createElement(w, { to: T.PurchasedKeys.withSearchParams({ page: 1 }) });
          }
        }
      ), /* @__PURE__ */ e.createElement(
        U,
        {
          exact: !0,
          path: T.PurchasedOptionbox.link,
          render: (i) => {
            const a = Number(V.silentSearchParamsBuilder(i.location.search).get("page")), j = !Number.isNaN(a) && a >= 1;
            return j ? j && /* @__PURE__ */ e.createElement(le, { page: a }) : /* @__PURE__ */ e.createElement(w, { to: T.PurchasedOptionbox.withSearchParams({ page: 1 }) });
          }
        }
      ), /* @__PURE__ */ e.createElement(w, { from: T.PurchasedItems.makePath(), to: T.PurchasedGame.makePath() }))));
    };
    const { limit: t } = M, I = ((c = E.getAppState().getUser()) == null ? void 0 : c.userId) || null, g = new pM({ userId: I, limit: t });
    this.state = {
      isProductKeyDialogOpen: !1
    }, g.subscribe(() => this.setState({})), this.logic = g;
  }
  componentDidMount() {
    this.props.isPreviewMode || this.logic.init();
  }
  render() {
    const { isFetching: M, error: t, gameList: I } = this.logic.state, c = this.props.isPreviewMode ? B : I;
    return /* @__PURE__ */ e.createElement("div", { className: A.purchasedItemsListWrapper }, M && /* @__PURE__ */ e.createElement(S, null), !M && t && /* @__PURE__ */ e.createElement("div", { className: A.errorContainer }, /* @__PURE__ */ e.createElement(O, { error: t })), !M && c && this.renderPurchasedItemsSidebar());
  }
}
export {
  mM as G,
  xe as N,
  pe as P,
  A as p
};
