import { N as NoMatchingGameError } from "./CommonError.js";
import { C as Container, a as Ctx, a2 as ItemType, a0 as EcomPath, F as FeUtils, t, L as Loading, w as LoadingSize, T as Trans, i as CommonError, U as UrlUtils, x as getCurrentLanguage, a1 as AppType, k as UIEvent, l as bgCommon, ab as GameHelper, D as DesktopChecker, ad as ConfigKeys } from "./index.js";
import { c as classNames } from "./reactSlick.js";
import React__default, { Component } from "react";
import { T as Tabs } from "./Tabs.js";
import { P as Pagination } from "./Pagination.js";
import { w as withPropsGuard } from "./WithPropsGuard.js";
import { N as NavItemPlaceholder } from "./NavItemPlaceholder.js";
import { H as HelmetExport } from "./Helmet.js";
import { S as StoreGridItem, e as InAppStore } from "./ItemDetailPurchaseAlert.js";
import { NavLink, Switch, Route, Redirect } from "react-router-dom";
import { A as AppDetailPageLogic, a as AppDetailPageLoadingScreen, b as AppDetailPageError } from "./AppDetailPage.js";
const BundleIcon = ({ className, color = "rgb(var(--od-rgba-text))" }) => /* @__PURE__ */ React__default.createElement("i", {
  className
}, /* @__PURE__ */ React__default.createElement("svg", {
  className: "inline",
  width: "16",
  height: "16",
  viewBox: "0 0 16 16",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ React__default.createElement("mask", {
  id: "mask0",
  "mask-type": "alpha",
  maskUnits: "userSpaceOnUse",
  x: "0",
  y: "0",
  width: "16",
  height: "16"
}, /* @__PURE__ */ React__default.createElement("rect", {
  width: "16",
  height: "16",
  fill: color
})), /* @__PURE__ */ React__default.createElement("g", {
  mask: "url(#mask0)"
}, /* @__PURE__ */ React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M13.096 4.80002C13.148 4.80002 13.148 4.85336 13.148 4.85336C13.2 4.96002 13.2 5.01336 13.2 5.06669V12.5334C13.2 13.44 12.524 14.1334 11.64 14.1334H4.36005C3.47605 14.1334 2.80005 13.44 2.80005 12.5334V5.06669V4.85336C2.85205 4.85336 2.85205 4.80002 2.85205 4.80002C2.90405 4.80002 2.90405 4.74669 2.90405 4.74669L4.46405 2.61336C4.56805 2.45336 4.72405 2.40002 4.88005 2.40002H11.12C11.276 2.40002 11.432 2.45336 11.484 2.61336L13.044 4.74669C13.096 4.74669 13.096 4.80002 13.096 4.80002ZM10.8601 3.4667H5.14006L4.36006 4.53337H11.6401L10.8601 3.4667ZM11.64 13.0667H4.36001C4.04801 13.0667 3.84001 12.8534 3.84001 12.5334V5.60002H12.16V12.5334C12.16 12.8534 11.952 13.0667 11.64 13.0667ZM7.99997 9.8667C9.45597 9.8667 10.6 8.69337 10.6 7.20003C10.6 6.88003 10.392 6.6667 10.08 6.6667C9.76797 6.6667 9.55997 6.88003 9.55997 7.20003C9.55997 8.1067 8.88397 8.80003 7.99997 8.80003C7.11597 8.80003 6.43997 8.1067 6.43997 7.20003C6.43997 6.88003 6.23197 6.6667 5.91997 6.6667C5.60797 6.6667 5.39997 6.88003 5.39997 7.20003C5.39997 8.69337 6.54397 9.8667 7.99997 9.8667Z",
  fill: color
}))));
const GameIcon = ({ className, color = "rgb(var(--od-rgba-text))" }) => /* @__PURE__ */ React__default.createElement("i", {
  className
}, /* @__PURE__ */ React__default.createElement("svg", {
  className: "inline",
  width: "16",
  height: "16",
  viewBox: "0 0 16 16",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ React__default.createElement("mask", {
  id: "mask0",
  "mask-type": "alpha",
  maskUnits: "userSpaceOnUse",
  x: "0",
  y: "0",
  width: "16",
  height: "16"
}, /* @__PURE__ */ React__default.createElement("rect", {
  width: "16",
  height: "16",
  fill: color
})), /* @__PURE__ */ React__default.createElement("g", {
  mask: "url(#mask0)"
}, /* @__PURE__ */ React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M6.98768 0.216141C6.6799 0.0933656 6.33086 0.243348 6.20808 0.551135C6.08531 0.858922 6.23529 1.20796 6.54308 1.33074L8.82009 2.23903C9.15065 2.37089 9.15734 2.83638 8.8307 2.97768L7.63763 3.4938C6.71572 3.89262 6.38503 5.03237 6.9503 5.86269L7.23799 6.28528H5.90966C5.55687 5.9615 5.11018 5.7309 4.60424 5.64169C3.19012 5.39235 1.84161 6.33658 1.59226 7.75071L0.724017 12.6747C0.474668 14.0889 1.41891 15.4374 2.83303 15.6867C4.24716 15.9361 5.59567 14.9918 5.84502 13.5777L5.86132 13.4853H10.1388L10.1551 13.5777C10.4044 14.9918 11.753 15.9361 13.1671 15.6867C14.5812 15.4374 15.5254 14.0889 15.2761 12.6747L14.4079 7.7507C14.1585 6.33657 12.81 5.39233 11.3959 5.64168C10.8899 5.73089 10.4432 5.96149 10.0904 6.28528H8.68968L7.94225 5.18739C7.80093 4.9798 7.88361 4.69487 8.11408 4.59516L9.30715 4.07904C10.6137 3.51383 10.5869 1.65187 9.2647 1.12443L6.98768 0.216141ZM13.2261 7.95907C13.0918 7.19762 12.3657 6.68919 11.6042 6.82345C11.2764 6.88125 10.9968 7.04777 10.7938 7.28006L10.6145 7.48528H5.38557L5.20626 7.28006C5.0033 7.04777 4.72368 6.88127 4.39587 6.82346C3.63441 6.6892 2.90829 7.19763 2.77403 7.95909L1.90579 12.8831C1.77152 13.6446 2.27996 14.3707 3.04141 14.505C3.80286 14.6392 4.52898 14.1308 4.66325 13.3693L4.8544 12.2853H11.1457L11.3369 13.3693C11.4711 14.1308 12.1972 14.6392 12.9587 14.505C13.7202 14.3707 14.2286 13.6446 14.0943 12.8831L13.2261 7.95907ZM5.5361 8.36917H4.66943V9.23584H3.80273V10.1025H4.66943V10.9692H5.5361V10.1025H6.40273V9.23584H5.5361V8.36917ZM11.5291 9.77826C11.9433 9.77826 12.2791 9.44248 12.2791 9.02826C12.2791 8.61405 11.9433 8.27826 11.5291 8.27826C11.1148 8.27826 10.7791 8.61405 10.7791 9.02826C10.7791 9.44248 11.1148 9.77826 11.5291 9.77826ZM10.5254 10.4192C10.5254 10.8334 10.1896 11.1692 9.77539 11.1692C9.36118 11.1692 9.02539 10.8334 9.02539 10.4192C9.02539 10.0049 9.36118 9.66916 9.77539 9.66916C10.1896 9.66916 10.5254 10.0049 10.5254 10.4192Z",
  fill: color
}))));
const OptionboxIcon = ({ className }) => /* @__PURE__ */ React__default.createElement("i", {
  className
}, /* @__PURE__ */ React__default.createElement("svg", {
  className: "inline",
  width: 16,
  height: 16,
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M8.867.4 14.2 3.067c.733.333 1.133 1 1.133 1.733v6.334c0 .8-.466 1.466-1.133 1.8L8.867 15.6c-.267.134-.534.2-.867.2-.267 0-.6-.066-.867-.2L1.8 12.934c-.733-.334-1.133-1.067-1.133-1.8V4.8c0-.733.4-1.4 1.066-1.733L7.067.4c.6-.266 1.266-.266 1.8 0ZM8 1.467c-.067 0-.2 0-.267.066L2.8 4 8 6.6 13.2 4 8.267 1.533C8.2 1.467 8.133 1.467 8 1.467ZM2.333 11.8A.795.795 0 0 1 2 11.2V5.067l5.333 2.666v6.534l-5-2.467Zm6.334 2.467L13.6 11.8c.267-.133.4-.333.4-.6V5.067L8.667 7.733v6.534Z",
  fill: "#B5B5B5"
}), /* @__PURE__ */ React__default.createElement("mask", {
  id: "a",
  style: {
    maskType: "alpha"
  },
  maskUnits: "userSpaceOnUse",
  x: 0,
  y: 0,
  width: 16,
  height: 16
}, /* @__PURE__ */ React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M8.867.4 14.2 3.067c.733.333 1.133 1 1.133 1.733v6.334c0 .8-.466 1.466-1.133 1.8L8.867 15.6c-.267.134-.534.2-.867.2-.267 0-.6-.066-.867-.2L1.8 12.934c-.733-.334-1.133-1.067-1.133-1.8V4.8c0-.733.4-1.4 1.066-1.733L7.067.4c.6-.266 1.266-.266 1.8 0ZM8 1.467c-.067 0-.2 0-.267.066L2.8 4 8 6.6 13.2 4 8.267 1.533C8.2 1.467 8.133 1.467 8 1.467ZM2.333 11.8A.795.795 0 0 1 2 11.2V5.067l5.333 2.666v6.534l-5-2.467Zm6.334 2.467L13.6 11.8c.267-.133.4-.333.4-.6V5.067L8.667 7.733v6.534Z",
  fill: "#fff"
})), /* @__PURE__ */ React__default.createElement("g", {
  mask: "url(#a)"
}, /* @__PURE__ */ React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M0 0h16v16H0V0Z",
  fill: "#B5B5B5"
}))));
const ProductKeyIcon = ({ className }) => /* @__PURE__ */ React__default.createElement("i", {
  className
}, /* @__PURE__ */ React__default.createElement("svg", {
  className: "inline",
  width: "14",
  height: "14",
  viewBox: "0 0 14 14",
  fill: "none",
  xmlns: "http://www.w3.org/2000/svg"
}, /* @__PURE__ */ React__default.createElement("mask", {
  id: "mask0",
  "mask-type": "alpha",
  maskUnits: "userSpaceOnUse",
  x: "0",
  y: "0",
  width: "14",
  height: "14"
}, /* @__PURE__ */ React__default.createElement("rect", {
  width: "14",
  height: "14",
  fill: "#C4C4C4"
})), /* @__PURE__ */ React__default.createElement("g", {
  mask: "url(#mask0)"
}, /* @__PURE__ */ React__default.createElement("path", {
  fillRule: "evenodd",
  clipRule: "evenodd",
  d: "M13.8291 0.170854C14.057 0.39866 14.057 0.768006 13.8291 0.995812L12.629 2.19593C12.6615 2.21732 12.6923 2.2423 12.7208 2.27085L13.7844 3.3344C14.0691 3.61916 14.0691 4.08084 13.7844 4.3656L11.6573 6.49269C11.3725 6.77745 10.9108 6.77745 10.6261 6.49269L9.47917 5.34579L7.35372 7.47124C7.86426 8.15292 8.16667 8.99949 8.16667 9.91669C8.16667 12.1718 6.3385 14 4.08333 14C1.82817 14 0 12.1718 0 9.91669C0 7.66152 1.82817 5.83335 4.08333 5.83335C5.00052 5.83335 5.84709 6.13575 6.52876 6.64629L13.0042 0.170854C13.232 -0.0569515 13.6013 -0.0569515 13.8291 0.170854ZM10.3041 4.52083L11.1417 5.35838L12.65 3.85L11.8959 3.09581C11.8673 3.06726 11.8423 3.03648 11.8209 3.00403L10.3041 4.52083ZM4.08333 7.00002C2.4725 7.00002 1.16667 8.30585 1.16667 9.91669C1.16667 11.5275 2.4725 12.8334 4.08333 12.8334C5.69416 12.8334 7 11.5275 7 9.91669C7 8.30585 5.69416 7.00002 4.08333 7.00002Z",
  fill: "white"
}))));
var SkeletonGameCards$1 = "";
const SkeletonGameCards = ({ numberOfCards }) => {
  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, Array.from(Array(numberOfCards != null ? numberOfCards : 8).keys()).map((num) => /* @__PURE__ */ React__default.createElement("div", {
    className: "storeGridItem",
    key: num
  }, /* @__PURE__ */ React__default.createElement("div", {
    className: "skeletonContainer"
  }), /* @__PURE__ */ React__default.createElement("div", {
    className: "title w-max"
  }, /* @__PURE__ */ React__default.createElement(NavItemPlaceholder, null)), /* @__PURE__ */ React__default.createElement("div", {
    className: "paymentOptions -mb-5 w-max"
  }, /* @__PURE__ */ React__default.createElement(NavItemPlaceholder, null)))));
};
class ItemListingAppManager extends Container {
  constructor(sdk) {
    super();
    this.sdk = sdk;
    this.state = {
      isFetching: false,
      platformItemsList: null,
      currencyMap: null,
      error: null
    };
  }
  getOffset(page) {
    return page ? (page - 1) * this.getLimit() : 0;
  }
  getLimit(pageSize) {
    return pageSize || 16;
  }
  async getItemsByCriteria({
    itemType,
    page,
    country,
    pageSize,
    plan,
    language
  }) {
    try {
      if (this.state.isFetching)
        return;
      await this.setState({
        isFetching: true,
        platformItemsList: null,
        currencyMap: null,
        error: null
      });
      const itemsResult = await this.sdk.Platform.Item().fetchItemsByCriteria({
        queryParams: {
          itemType,
          offset: this.getOffset(page),
          limit: this.getLimit(pageSize),
          region: country,
          language,
          features: plan || void 0
        }
      });
      if (itemsResult.error)
        throw itemsResult.error;
      await this.setState({
        platformItemsList: itemsResult.response.data
      });
    } catch (error) {
      this.setState({ error });
    } finally {
      this.setState({ isFetching: false });
    }
  }
  getCurrencyMap() {
    const { currencyMap } = this.state;
    if (currencyMap)
      return;
    this.sdk.Platform.Currency().getCurrencyMap().then((result) => {
      if (result.error)
        throw result.error;
      this.setState({ currencyMap: result.value });
    }).catch((error) => {
      console.error(error);
    });
  }
}
var OptionboxStore$1 = "";
class OptionboxStore extends React__default.Component {
  constructor(props) {
    super(props);
    this.appStoreLogic = new ItemListingAppManager(Ctx.getAppState().getSdk());
    this.appStoreLogic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    const { page, pageSize, country, language } = this.props;
    this.appStoreLogic.getItemsByCriteria({ page, pageSize, country, language, itemType: ItemType.enum.OPTIONBOX });
    this.appStoreLogic.getCurrencyMap();
  }
  renderOptionboxItems() {
    const { platformItemsList, currencyMap } = this.appStoreLogic.state;
    return /* @__PURE__ */ React__default.createElement("div", {
      className: "optionboxList"
    }, !currencyMap && /* @__PURE__ */ React__default.createElement(SkeletonGameCards, {
      numberOfCards: platformItemsList == null ? void 0 : platformItemsList.data.length
    }), !!platformItemsList && currencyMap && platformItemsList.data.map((item) => /* @__PURE__ */ React__default.createElement(StoreGridItem, {
      key: item.itemId,
      item,
      currencyMap
    })));
  }
  renderOptionboxPagination() {
    const { platformItemsList } = this.appStoreLogic.state;
    if (!platformItemsList)
      return;
    const { paging } = platformItemsList;
    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: "pagination"
    }, /* @__PURE__ */ React__default.createElement(Pagination, {
      next: hasNext && EcomPath.OptionboxList.withSearchParams({
        page: currentPage + 1
      }),
      prev: hasPrev && EcomPath.OptionboxList.withSearchParams({
        page: currentPage - 1
      })
    }));
  }
  render() {
    const { error, isFetching, platformItemsList } = this.appStoreLogic.state;
    return /* @__PURE__ */ React__default.createElement("div", {
      className: "storeContainer"
    }, /* @__PURE__ */ React__default.createElement(HelmetExport, null, /* @__PURE__ */ React__default.createElement("title", null, FeUtils.makeTitleWithAppName(t("OptionboxStore.title")))), isFetching && /* @__PURE__ */ React__default.createElement(Loading, {
      className: LoadingSize.medium
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "OptionboxStore.loading"
    }, "Loading optionbox...")), !isFetching && error && /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CommonError, {
      error
    })), !isFetching && platformItemsList && this.renderOptionboxItems(), !isFetching && platformItemsList && this.renderOptionboxPagination());
  }
}
const OptionboxStoreWithPropsGuard = withPropsGuard(OptionboxStore, (prevProps, nextProps) => {
  return prevProps.country !== nextProps.country;
});
withPropsGuard(({ page, pageSize, language }) => {
  const user = Ctx.getAppState().getUser();
  const country = user && user.country || void 0;
  return /* @__PURE__ */ React__default.createElement(OptionboxStoreWithPropsGuard, {
    page,
    pageSize,
    country,
    language
  });
}, (prevProps, nextProps) => nextProps.page !== prevProps.page || nextProps.language !== prevProps.language);
const AppStore = React__default.lazy(() => import("./AppStore.js"));
const BundleStore = React__default.lazy(() => import("./BundleStore.js"));
const CodeStore = React__default.lazy(() => import("./CodeStore2.js"));
const MultipleGameStore = () => {
  return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Tabs, null, /* @__PURE__ */ React__default.createElement(NavLink, {
    className: "Tab",
    to: EcomPath.GameList.makePath()
  }, /* @__PURE__ */ React__default.createElement(GameIcon, {
    className: "m-2"
  }), /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "StorePage.tabs.apps"
  }, "Games")), /* @__PURE__ */ React__default.createElement(NavLink, {
    className: "Tab",
    to: EcomPath.BundleList.makePath()
  }, /* @__PURE__ */ React__default.createElement(BundleIcon, {
    className: "m-2"
  }), /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "StorePage.tabs.bundles"
  }, "Bundles")), /* @__PURE__ */ React__default.createElement(NavLink, {
    className: "Tab",
    to: EcomPath.CodeList.makePath()
  }, /* @__PURE__ */ React__default.createElement(ProductKeyIcon, {
    className: "m-2"
  }), /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "StorePage.tabs.productKeys"
  }, "Product Keys")), /* @__PURE__ */ React__default.createElement(NavLink, {
    className: "Tab",
    to: EcomPath.OptionboxList.makePath()
  }, /* @__PURE__ */ React__default.createElement(OptionboxIcon, {
    className: "m-2"
  }), /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "StorePage.tabs.optionbox"
  }, "Optionbox"))), /* @__PURE__ */ React__default.createElement("div", {
    className: "gridContainer"
  }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, {
    fallback: /* @__PURE__ */ React__default.createElement(Loading, {
      className: "gridContainerLoading"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "InitialUserFetchPage.notice"
    }))
  }, /* @__PURE__ */ React__default.createElement(Switch, null, /* @__PURE__ */ React__default.createElement(Route, {
    key: "AppStoreContainer",
    exact: true,
    path: EcomPath.GameList.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: EcomPath.GameList.withSearchParams({ page: 1 })
        });
      }
      const plan = UrlUtils.silentSearchParamsBuilder(routeComponentProps.location.search).get("plan") || void 0;
      return hasValidPage && /* @__PURE__ */ React__default.createElement(AppStore, {
        page,
        language: getCurrentLanguage(),
        plan
      });
    }
  }), /* @__PURE__ */ React__default.createElement(Route, {
    key: "BundleStoreContainer",
    exact: true,
    path: EcomPath.BundleList.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: EcomPath.BundleList.withSearchParams({ page: 1 })
        });
      }
      return hasValidPage && /* @__PURE__ */ React__default.createElement(BundleStore, {
        page,
        language: getCurrentLanguage()
      });
    }
  }), /* @__PURE__ */ React__default.createElement(Route, {
    key: "CodeStoreContainer",
    exact: true,
    path: EcomPath.CodeList.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: EcomPath.CodeList.withSearchParams({ page: 1 })
        });
      }
      return hasValidPage && /* @__PURE__ */ React__default.createElement(CodeStore, {
        page,
        language: getCurrentLanguage()
      });
    }
  }), /* @__PURE__ */ React__default.createElement(Route, {
    key: "OptionboxStoreContainer",
    exact: true,
    path: EcomPath.OptionboxList.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: EcomPath.OptionboxList.withSearchParams({ page: 1 })
        });
      }
      return hasValidPage && /* @__PURE__ */ React__default.createElement(OptionboxStore, {
        page,
        language: getCurrentLanguage()
      });
    }
  }), /* @__PURE__ */ React__default.createElement(Redirect, {
    to: EcomPath.GameList.makePath()
  })))));
};
class SingleGameStoreImpl extends Component {
  constructor(props) {
    super(props);
    this.logic = new AppDetailPageLogic(props);
    this.logic.subscribe(() => this.setState({}));
  }
  componentDidMount() {
    this.logic.init();
  }
  render() {
    const { language } = this.props;
    const { appItem, isFetching, error } = this.logic.state;
    if (isFetching)
      return /* @__PURE__ */ React__default.createElement(AppDetailPageLoadingScreen, null);
    if (error)
      return /* @__PURE__ */ React__default.createElement(AppDetailPageError, {
        error
      });
    return /* @__PURE__ */ React__default.createElement("div", {
      className: "pb-6"
    }, /* @__PURE__ */ React__default.createElement(Tabs, null, /* @__PURE__ */ React__default.createElement(NavLink, {
      className: "Tab",
      to: EcomPath.DlcList.makePath()
    }, /* @__PURE__ */ React__default.createElement(GameIcon, {
      className: "icon"
    }), /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "AppDetailPage.dlcStore.heading"
    }, "Expansions")), /* @__PURE__ */ React__default.createElement(NavLink, {
      className: "Tab",
      to: EcomPath.BundleList.makePath()
    }, /* @__PURE__ */ React__default.createElement(BundleIcon, {
      className: "icon"
    }), /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "AppDetailPage.inAppStore.heading"
    }, "Game Store")), /* @__PURE__ */ React__default.createElement(NavLink, {
      className: "Tab",
      to: EcomPath.OptionboxList.makePath()
    }, /* @__PURE__ */ React__default.createElement(OptionboxIcon, {
      className: "m-2"
    }), /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "StorePage.tabs.optionbox"
    }, "Optionbox"))), /* @__PURE__ */ React__default.createElement("div", {
      className: "gridContainer"
    }, /* @__PURE__ */ React__default.createElement(Switch, null, /* @__PURE__ */ React__default.createElement(Route, {
      key: "AppStoreContainer",
      exact: true,
      path: EcomPath.DlcList.link,
      render: () => {
        if (!appItem)
          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
        return /* @__PURE__ */ React__default.createElement(InAppStore, {
          baseItem: appItem,
          itemType: ItemType.enum.APP,
          appType: AppType.enum.DLC,
          language,
          noItemMessage: /* @__PURE__ */ React__default.createElement(Trans, {
            i18nKey: "AppDetailPage.inAppStore.noItem"
          }, "Looks like there aren`t any items for this game yet.")
        });
      }
    }), /* @__PURE__ */ React__default.createElement(Route, {
      key: "BundleStoreContainer",
      exact: true,
      path: EcomPath.BundleList.link,
      render: () => {
        if (!appItem)
          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
        return /* @__PURE__ */ React__default.createElement(InAppStore, {
          baseItem: appItem,
          itemType: ItemType.enum.INGAMEITEM,
          language,
          noItemMessage: /* @__PURE__ */ React__default.createElement(Trans, {
            i18nKey: "AppDetailPage.inAppStore.noItem"
          }, "Looks like there aren`t any items for this game yet.")
        });
      }
    }), /* @__PURE__ */ React__default.createElement(Route, {
      key: "OptionboxStoreContainer",
      exact: true,
      path: EcomPath.OptionboxList.link,
      render: () => {
        if (!appItem)
          return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
        return /* @__PURE__ */ React__default.createElement(InAppStore, {
          baseItem: appItem,
          itemType: ItemType.enum.OPTIONBOX,
          language,
          noItemMessage: /* @__PURE__ */ React__default.createElement(Trans, {
            i18nKey: "AppDetailPage.inAppStore.noItem"
          }, "Looks like there aren`t any items for this game yet.")
        });
      }
    }), /* @__PURE__ */ React__default.createElement(Redirect, {
      to: EcomPath.DlcList.link
    }))));
  }
}
const SingleGameStore = withPropsGuard(({ itemId, language }) => {
  const user = Ctx.getAppState().getUser() || void 0;
  const country = user && user.country || void 0;
  return /* @__PURE__ */ React__default.createElement(SingleGameStoreImpl, {
    itemId,
    country,
    user,
    language
  });
}, (prevProps, nextProps) => prevProps.itemId !== nextProps.itemId || prevProps.language !== nextProps.language);
const StorePage$2 = "StorePage _StorePage_042c4";
var styles = {
  StorePage: StorePage$2
};
class StorePage extends React__default.Component {
  componentDidMount() {
    UIEvent.updateBackground(`url(${bgCommon})`);
  }
  componentWillUnmount() {
    UIEvent.updateBackground(null);
  }
  render() {
    const isSingleGame = Ctx.getAppState().isSingleGame();
    const singleGameItemId = GameHelper.getActiveItemId();
    return /* @__PURE__ */ React__default.createElement("div", {
      className: "storePageBg",
      style: !DesktopChecker.isDesktopApp() ? { backgroundImage: `url(${bgCommon})` } : void 0
    }, /* @__PURE__ */ React__default.createElement("div", {
      className: classNames("container mx-auto px-2", styles.StorePage)
    }, /* @__PURE__ */ React__default.createElement("h2", {
      className: "storePageTitle"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "StorePageTitle"
    }, "Store")), !isSingleGame && /* @__PURE__ */ React__default.createElement(MultipleGameStore, null), isSingleGame && /* @__PURE__ */ React__default.createElement(SingleGameStoreWrapper, {
      itemId: singleGameItemId
    })));
  }
}
function SingleGameStoreWrapper({ itemId }) {
  if (!itemId) {
    const appId = Ctx.getAppState().getConfig(ConfigKeys.APP_ID).data.value;
    return /* @__PURE__ */ React__default.createElement(NoMatchingGameError, {
      appId,
      error: Ctx.getGameState().getGameInfoError(appId),
      isWithBackground: !DesktopChecker.isDesktopApp()
    });
  }
  return /* @__PURE__ */ React__default.createElement(SingleGameStore, {
    itemId,
    language: getCurrentLanguage()
  });
}
var StorePage$1 = /* @__PURE__ */ Object.freeze({
  __proto__: null,
  [Symbol.toStringTag]: "Module",
  "default": StorePage
});
export { ItemListingAppManager as I, SkeletonGameCards as S, StorePage$1 as a };
