import { L as M } from "./LinkedAccountsErrorAlert-4afd92c0.mjs";
import { H as y, ar as _, U as b, a as d, j as f, h, i as U, az as D, D as P, T as c, p as A, q as w, f as p, a3 as T, a1 as v, aK as O, A as K, t as g, u as F, aL as B, aM as R, ag as C, y as N, a7 as S, L as z, ay as u, aN as W } from "./index-162fd1aa.mjs";
import e from "react";
import { c as I } from "./reactSlick-cb4a2d39.mjs";
import { A as H, b as q, a as j } from "./AccountMainSection-4c35f8d7.mjs";
import { W as G } from "./WarningIcon-c5874dd2.mjs";
import { g as x } from "./PlatformIcon-9c8dca6c.mjs";
import { o as Y, h as V } from "./MockVars-1cf2eb0a.mjs";
import "./dateFns-2367ee5b.mjs";
import "./validator-61879ab7.mjs";
import "./reactPlayer-2f69f369.mjs";
import "react-router-dom";
const X = () => /* @__PURE__ */ e.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ e.createElement(
  "path",
  {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M10 4.375C10.3452 4.375 10.625 4.65482 10.625 5V15C10.625 15.3452 10.3452 15.625 10 15.625C9.65482 15.625 9.375 15.3452 9.375 15V5C9.375 4.65482 9.65482 4.375 10 4.375Z",
    fill: "white"
  }
), /* @__PURE__ */ e.createElement(
  "path",
  {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M15.625 10C15.625 10.3452 15.3452 10.625 15 10.625L5 10.625C4.65482 10.625 4.375 10.3452 4.375 10C4.375 9.65482 4.65482 9.375 5 9.375L15 9.375C15.3452 9.375 15.625 9.65482 15.625 10Z",
    fill: "white"
  }
)), Z = "linkAccountConfirmDialog _linkAccountConfirmDialog_3f24c", $ = "textWarning _textWarning_56377", J = "warningIcon _warningIcon_69453", L = {
  linkAccountConfirmDialog: Z,
  textWarning: $,
  warningIcon: J
};
class Q extends e.Component {
  constructor(t) {
    super(t), this.redirectToThirdPartyLogin = (r) => {
      if (y.isDesktopApp()) {
        _.openExternalBrowser(r);
        return;
      }
      window.location.href = r;
    }, this.loginPlatform = async (r) => {
      var a, i;
      const n = await b.getRedirectUrl(
        d.getAppState().sdkOptions.redirectURI,
        (i = (a = d.getAppState().state.appHistory) == null ? void 0 : a.location) == null ? void 0 : i.pathname
      ), o = d.getAppState().sdkOptions.clientId;
      try {
        this.setState({
          fetchThirdPartyLoginUrlError: null,
          isFetching: !0
        });
        const s = await this.sdk.IAM.User().getThirdPartyURL({
          platformId: r.PlatformId,
          queryParams: { clientId: o, redirectUri: n }
        });
        if (s.error)
          throw s.error;
        this.setState({ isFetched: !0 }), this.redirectToThirdPartyLogin(s.response.data.third_party_url);
      } catch (s) {
        console.error(s), this.setState({ fetchThirdPartyLoginUrlError: s });
      } finally {
        this.setState({ isFetching: !1 });
      }
    }, this.state = {
      fetchThirdPartyLoginUrlError: null,
      isFetching: !1,
      isFetched: !1
    }, this.sdk = d.getAppState().getSdk();
  }
  renderError() {
    const { fetchThirdPartyLoginUrlError: t } = this.state;
    if (t)
      return /* @__PURE__ */ e.createElement(f, { className: "my-6", type: h.danger }, /* @__PURE__ */ e.createElement(U, { error: t }));
  }
  render() {
    const { onCancel: t, platformConfig: r } = this.props, { isFetching: n, isFetched: o } = this.state, { PlatformId: a } = r, i = D.getPlatformName(a);
    return /* @__PURE__ */ e.createElement(
      P,
      {
        className: L.linkAccountConfirmDialog,
        title: /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.confirmLinkDialog.title" }, "Linking to your ", /* @__PURE__ */ e.createElement("span", { className: "capitalize" }, { platformName: i }), " Account"),
        isOpen: !0
      },
      /* @__PURE__ */ e.createElement(A, null, this.renderError(), /* @__PURE__ */ e.createElement("p", { className: "dialogPlatformBodyText" }, o ? /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.confirmLinkDialog.redirecting" }, "Redirecting to the ", /* @__PURE__ */ e.createElement("span", { className: "capitalize" }, { platformName: i }), " login page. Please open your browser to finish the process.") : /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.confirmLinkDialog.linkConfirm" }, "Link to ", /* @__PURE__ */ e.createElement("span", { className: "capitalize" }, { platformName: i }), " Account will allow you to share your profile, game progression, and earned game content with your AccelByte account.", /* @__PURE__ */ e.createElement("div", { className: I("my-4 flex", L.textWarning) }, /* @__PURE__ */ e.createElement("div", { className: "mr-3" }, /* @__PURE__ */ e.createElement(G, { defaultColor: !1, className: L.warningIcon })), /* @__PURE__ */ e.createElement("div", null, "Once you have linked your ", /* @__PURE__ */ e.createElement("span", { className: "capitalize" }, { platformName: i }), " to your AccelByte account, you will not be able to link a different ", /* @__PURE__ */ e.createElement("span", null, { platformName: i }), " account to it")), "You will be redirected to the ", { platformName: i }, " login page to finish the link account process."))),
      /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ e.createElement(p, { className: "btn btn-ghost mr-2 uppercase", buttonType: T.TEXT, buttonStyle: v.NONE, onClick: t }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.linkAccount.modal.action.cancel" }, "Cancel")), !o && /* @__PURE__ */ e.createElement(
        p,
        {
          className: "btn btn-primary uppercase",
          isLoading: n,
          onClick: () => {
            this.loginPlatform(r);
          }
        },
        /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.linkAccount.modal.action.continue" }, "Continue")
      )))
    );
  }
}
class ee extends e.Component {
  constructor(t) {
    super(t), this.fetchThirdPartyLoginConfig = async () => {
      if (!this.state.isFetchingThirdPartyLoginConfig) {
        this.setState({ isFetchingThirdPartyLoginConfig: !0, fetchThirdPartyLoginConfigError: null });
        try {
          const n = await d.getAppState().getSdk().IAM.ThirdPartyCredential().getThirdPartyPlatformInfo();
          if (n.error)
            throw n.error;
          const o = n.response.data.filter(
            (a) => !!O.enum[a.PlatformId] && a.IsActive
          );
          this.setState({ thirdPartyLoginConfig: o });
        } catch (r) {
          console.error(r), this.setState({ fetchThirdPartyLoginConfigError: r });
        } finally {
          this.setState({ isFetchingThirdPartyLoginConfig: !1 });
        }
      }
    }, this.renderPlatformList = () => {
      const { isPreviewMode: r } = this.props, { thirdPartyLoginConfig: n } = this.state, o = r ? Y : n;
      return o.length < 1 ? /* @__PURE__ */ e.createElement("div", { className: "platformBox disabled text-center" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.linkAccount.modal.noPlatformConfig" }, "No third party platform available")) : o.map((a) => {
        const i = this.props.linkedPlatform.has(a.PlatformId);
        return i || !a.IsActive ? null : /* @__PURE__ */ e.createElement(
          "div",
          {
            onClick: () => {
              this.props.openConfirmLinkToPlatformDialog(a);
            },
            role: "button",
            key: a.PlatformId,
            className: "platformBox"
          },
          /* @__PURE__ */ e.createElement("span", { className: "platform flex items-center capitalize" }, x(a.PlatformId)),
          !i && /* @__PURE__ */ e.createElement(K, null),
          i && /* @__PURE__ */ e.createElement("span", { className: "text-green-40 uppercase" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkAccountDialog.linked" }, "Linked"))
        );
      });
    }, this.state = {
      thirdPartyLoginConfig: [],
      isFetchingThirdPartyLoginConfig: !1,
      fetchThirdPartyLoginConfigError: null,
      fetchThirdPartyLoginUrlError: null
    };
  }
  componentDidMount() {
    this.props.isPreviewMode || this.fetchThirdPartyLoginConfig();
  }
  render() {
    const { onClose: t, isPreviewMode: r } = this.props, { isFetchingThirdPartyLoginConfig: n, fetchThirdPartyLoginConfigError: o, fetchThirdPartyLoginUrlError: a } = this.state, i = g("Common.publisherName");
    return /* @__PURE__ */ e.createElement(
      P,
      {
        className: "purchaseDialog",
        title: g("LinkedAccountPage.title"),
        isOpen: !0,
        onClose: () => {
          t && t();
        },
        isPreviewMode: r
      },
      /* @__PURE__ */ e.createElement(A, null, /* @__PURE__ */ e.createElement("div", { className: "dialogPlatformBodyText" }, n && /* @__PURE__ */ e.createElement("div", { className: "text-center" }, /* @__PURE__ */ e.createElement(F, null)), !n && !!o && /* @__PURE__ */ e.createElement("div", { className: "text-center" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.linkAccount.modal.fetchConfigFail" }, "Unable to get third party platform information ", /* @__PURE__ */ e.createElement("br", null), /* @__PURE__ */ e.createElement("a", { role: "button", onClick: this.fetchThirdPartyLoginConfig }, "Try Again"))), !n && !o && /* @__PURE__ */ e.createElement(e.Fragment, null, a && /* @__PURE__ */ e.createElement(f, { className: "mb-6", type: h.danger }, /* @__PURE__ */ e.createElement(U, { error: a })), /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.linkAccountDialog" }, "Select the platform you want to link to your ", { publisherName: i }, " account."), /* @__PURE__ */ e.createElement("div", { className: "dialogPlatformList" }, this.renderPlatformList()))))
    );
  }
}
class te extends e.Component {
  constructor(t) {
    super(t);
  }
  render() {
    const { onCancel: t, onConfirm: r, platformId: n } = this.props, o = D.getPlatformName(n), a = g("Common.publisherName");
    return /* @__PURE__ */ e.createElement(P, { className: "purchaseDialog", title: g("LinkedAccountPage.confirmUnlinkDialog.title"), isOpen: !0 }, /* @__PURE__ */ e.createElement(A, null, /* @__PURE__ */ e.createElement("p", { className: "dialogPlatformBodyText" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.confirmUnlinkDialog.unlinkConfirm" }, "Do you want to unlink your ", /* @__PURE__ */ e.createElement("span", { className: "capitalize" }, { platformName: o }), " account from", { publisherName: a }, "?"))), /* @__PURE__ */ e.createElement(w, null, /* @__PURE__ */ e.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ e.createElement(
      p,
      {
        className: "btn btn-ghost mr-2 uppercase",
        buttonType: T.TEXT,
        buttonStyle: v.NONE,
        onClick: () => {
          t && t();
        }
      },
      /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkAccountPage.cancel" }, "Cancel")
    ), /* @__PURE__ */ e.createElement(
      p,
      {
        className: "btn btn-primary uppercase",
        onClick: () => {
          r && r();
        }
      },
      /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkAccountPage.unlink" }, "Unlink")
    ))));
  }
}
class fe extends e.Component {
  constructor(t) {
    var r;
    super(t), this.getUserDistinctLinkedPlatform = async () => {
      this.userId && await this.linkedAccountsManager.getUserDistinctLinkedPlatform(this.userId);
    }, this.refreshUI = () => {
      this.setState({});
    }, this.linkIfGivenParameter = async (n) => {
      const o = n ? new URL(n).search : window.location.search, a = b.silentSearchParamsBuilder(o).get("requestId"), { appHistory: i } = d.getAppState().state;
      if (this.setState({ isOpenLinkAccountDialog: !1, selectedPlatformToLink: null }), a && this.userId) {
        this.clearAlertStatus();
        try {
          const s = await this.linkedAccountsManager.requestStatus(a);
          s && s.status === B.enum.SUCCESS && (this.setState({ accountLinkingSuccessful: !0 }), this.appState.updateUserCustomAttribute(this.userId, s.payload.platformId));
        } catch (s) {
          this.setState({ accountLinkError: s });
        }
      }
      await this.getUserDistinctLinkedPlatform(), i.replace(i.location.pathname);
    }, this.clearAlertStatus = () => {
      this.linkedAccountsManager.setState({ error: null, accountConflictInformation: null }), this.setState({
        accountUnlinkingSuccessful: !1,
        accountLinkingSuccessful: !1,
        accountUnlinkError: null,
        accountLinkError: null
      });
    }, this.openLinkAccountDialog = () => {
      this.setState({ isOpenLinkAccountDialog: !0 });
    }, this.openConfirmLinkDialog = (n) => {
      this.setState({ selectedPlatformToLink: n });
    }, this.openConfirmUnlinkDialog = (n) => {
      this.setState({ selectedUnlinkAblePlatformName: n });
    }, this.onConfirmUnlinkAccount = async (n) => {
      this.clearAlertStatus();
      try {
        await this.linkedAccountsManager.unLinkAccount(n), this.setState({ accountUnlinkingSuccessful: !0 });
      } catch (o) {
        this.setState({ accountLinkError: o });
      } finally {
        this.setState({ selectedUnlinkAblePlatformName: null }), await this.getUserDistinctLinkedPlatform();
      }
    }, this.renderListPlatform = (n) => {
      const { isPreviewMode: o } = this.props, { platformName: a, details: i } = n, s = i[0].displayName || "", { isLinking: l } = this.linkedAccountsManager.state, E = this.appState.featureFlagsManager.hasFeature(R.isUnlinkAccountEnabled);
      return a ? /* @__PURE__ */ e.createElement("tr", { key: a }, /* @__PURE__ */ e.createElement("td", { className: "text-left font-medium capitalize" }, /* @__PURE__ */ e.createElement("span", { className: "platform flex items-center" }, x(a))), /* @__PURE__ */ e.createElement("td", { className: "text-left" }, !s && /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.connected" }, "Connected"), !!s && /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.connectedTo" }, "Connected to ", { displayName: s })), /* @__PURE__ */ e.createElement("td", { className: "text-right" }, E !== !1 && /* @__PURE__ */ e.createElement(
        "span",
        {
          className: I("action", l && "text-[color:rgb(var(--od-rgb-text),0.65)]"),
          onClick: o ? void 0 : () => {
            l || this.openConfirmUnlinkDialog(a);
          }
        },
        /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountsPage.disconnect" }, "Unlink")
      ))) : null;
    }, this.renderAlerts = () => {
      const { accountUnlinkingSuccessful: n, accountLinkingSuccessful: o, accountLinkError: a, accountUnlinkError: i } = this.state, { error: s, accountConflictInformation: l } = this.linkedAccountsManager.state;
      return o ? /* @__PURE__ */ e.createElement(f, { className: "mb-6", type: h.success, onDismiss: () => this.clearAlertStatus() }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.linkSuccess" }, "Cool! Your account is now linked.")) : n ? /* @__PURE__ */ e.createElement(f, { className: "mb-6", type: h.info, onDismiss: () => this.clearAlertStatus() }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.unlinkSuccess" }, "Your account has been unlinked.")) : s || a || i || l ? (a && C({ eventCategory: "LinkAccountError", eventLabel: N.errorToString(a) }), i && C({
        eventCategory: "UnlinkAccountError",
        eventLabel: N.errorToString(i)
      }), /* @__PURE__ */ e.createElement(
        M,
        {
          error: s || a || i,
          accountConflictInformation: l,
          onDismiss: this.clearAlertStatus
        }
      )) : null;
    }, this.linkedAccountsManager = d.getAppState().linkAccountManager, this.linkedAccountsManager.subscribe(this.refreshUI), this.appState = d.getAppState(), this.userId = (r = d.getAppState().getUser()) == null ? void 0 : r.userId, this.state = {
      isOpenLinkAccountDialog: !1,
      selectedUnlinkAblePlatformName: null,
      selectedPlatformToLink: null,
      accountUnlinkingSuccessful: !1,
      accountLinkingSuccessful: !1,
      accountUnlinkError: null,
      accountLinkError: null,
      platformNamespace: ""
    };
  }
  componentDidMount() {
    var t;
    if ((t = this.props.isPreviewMode) != null && t.isOpenModalLinked)
      return this.setState({
        isOpenLinkAccountDialog: !0
      });
    this.props.isPreviewMode || (this.linkIfGivenParameter(), y.isDesktopApp() && Device.receive(S.OPEN_URL, (r) => {
      this.linkIfGivenParameter(r);
    }));
  }
  componentDidUpdate(t) {
    var r, n;
    ((r = t.isPreviewMode) == null ? void 0 : r.isOpenModalLinked) !== ((n = this.props.isPreviewMode) == null ? void 0 : n.isOpenModalLinked) && this.setState({
      isOpenLinkAccountDialog: !this.state.isOpenLinkAccountDialog
    });
  }
  componentWillUnmount() {
    y.isDesktopApp() && Device.remove(S.OPEN_URL);
  }
  render() {
    const { isPreviewMode: t } = this.props, { isOpenLinkAccountDialog: r, selectedUnlinkAblePlatformName: n, selectedPlatformToLink: o } = this.state, { linkedPlatform: a, isFetching: i, isLinking: s } = this.linkedAccountsManager.state, l = t ? V : a, E = location.pathname.includes("/player-portal/accounts/linked-accounts-modal");
    return /* @__PURE__ */ e.createElement(H, { className: "linkedAccountsPage" }, /* @__PURE__ */ e.createElement(q, null, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountsPage.title" }, "Linked Accounts")), /* @__PURE__ */ e.createElement(j, null, this.renderAlerts(), i && /* @__PURE__ */ e.createElement("div", { className: "flex" }, /* @__PURE__ */ e.createElement(z, { className: "justify-center" })), l && /* @__PURE__ */ e.createElement("table", { className: "w-full" }, /* @__PURE__ */ e.createElement("thead", null, /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("th", { className: "text-left" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountsPage.paymentAccounts.platform" }, "Platform")), /* @__PURE__ */ e.createElement("th", { className: "text-left" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountsPage.paymentAccounts.status" }, "Status")), /* @__PURE__ */ e.createElement("th", null))), /* @__PURE__ */ e.createElement("tbody", { className: "border-gray-80 border-b border-solid" }, l.length >= 0 && l.map((m) => this.renderListPlatform(m)), l && l.length === 0 && /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("td", { colSpan: 3, className: "text-center" }, /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.noLinkedAccount" }, "You have no linked accounts."))))), /* @__PURE__ */ e.createElement(
      p,
      {
        loadingIndicator: "SPINNER",
        disabled: s || !l,
        className: "btn btn-primary connectButtonPlatform",
        isLoading: s,
        onClick: t ? void 0 : this.openLinkAccountDialog
      },
      /* @__PURE__ */ e.createElement(c, { i18nKey: "LinkedAccountPage.btn.LinkAccount" }, "Link Account"),
      /* @__PURE__ */ e.createElement("span", { className: "ml-2" }, /* @__PURE__ */ e.createElement(X, null))
    ), (r || E) && l && /* @__PURE__ */ e.createElement(
      ee,
      {
        openConfirmLinkToPlatformDialog: t != null && t.isOpenModalLinked ? () => null : this.openConfirmLinkDialog,
        onClose: t != null && t.isOpenModalLinked ? () => null : () => this.setState({ isOpenLinkAccountDialog: !1 }),
        linkedPlatform: new Set(
          l.map((m) => {
            switch (!0) {
              case m.platformName === u.enum.steam:
                return u.enum.steamopenid;
              case m.platformName === W.enum.psn:
                return u.enum.ps4web;
              case m.platformName === u.enum.live:
              case m.platformName === u.enum.xblweb:
                return u.enum.xblweb;
              case m.platformName === u.enum.stadia:
              case m.platformName === u.enum.stadiaweb:
                return u.enum.stadiaweb;
              case m.platformName === u.enum.facebook:
                return u.enum.facebook;
              case m.platformName === u.enum.apple:
                return u.enum.apple;
              default:
                return m.platformName;
            }
          }).filter((m) => !!m)
        ),
        isPreviewMode: t == null ? void 0 : t.isOpenModalLinked
      }
    ), n && /* @__PURE__ */ e.createElement(
      te,
      {
        platformId: n,
        onCancel: () => this.setState({ selectedUnlinkAblePlatformName: null }),
        onConfirm: t ? void 0 : () => this.onConfirmUnlinkAccount(n)
      }
    ), o && /* @__PURE__ */ e.createElement(
      Q,
      {
        platformConfig: o,
        onCancel: () => this.setState({ selectedPlatformToLink: null })
      }
    )));
  }
}
export {
  fe as default
};
