import { D as A, t as S, p as N, q as b, f as E, a3 as C, a1 as D, T as s, aP as u, a as m, h as d, i as p, y as _, G as T, j as k, L as v } from "./index-162fd1aa.mjs";
import { C as F } from "./CommonError-0ae83068.mjs";
import e from "react";
import { A as g, b as P, a as f } from "./AccountMainSection-4c35f8d7.mjs";
import { c as w } from "./reactSlick-cb4a2d39.mjs";
import { N as K } from "./NavItemPlaceholder-0cfc6c3b.mjs";
import { q as L } from "./MockVars-1cf2eb0a.mjs";
import "./dateFns-2367ee5b.mjs";
import "./validator-61879ab7.mjs";
import "./reactPlayer-2f69f369.mjs";
import "react-router-dom";
import "./starBgGradient-589e5185.mjs";
import "./CommonError-4ed993c7.mjs";
const I = "skeletonCard _skeletonCard_1c56f", R = {
  skeletonCard: I
}, B = ({ className: a }) => /* @__PURE__ */ e.createElement(g, { className: w(R.skeletonCard, a) }, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(K, null)), /* @__PURE__ */ e.createElement(f, { className: "skeletonBody" })), U = "dialogFooter _dialogFooter_94b60", $ = {
  dialogFooter: U
}, x = ({ isDeleting: a, onClose: l, onDelete: t }) => /* @__PURE__ */ e.createElement(A, { isOpen: !0, onClose: l, title: S("PaymentMethodsPage.dialogTitle") }, /* @__PURE__ */ e.createElement(N, null, "Do you want to delete the selected payment method?"), /* @__PURE__ */ e.createElement(b, { className: $.dialogFooter }, /* @__PURE__ */ e.createElement(
  E,
  {
    disabled: a,
    className: "btn btn-ghost btnCancel uppercase",
    buttonType: C.TEXT,
    buttonStyle: D.NONE,
    onClick: l
  },
  /* @__PURE__ */ e.createElement(s, { i18nKey: "PaymentMethodsPage.dialogCancel" }, "Cancel")
), /* @__PURE__ */ e.createElement(
  E,
  {
    loadingIndicator: "SPINNER",
    disabled: a,
    isLoading: a,
    className: "btn-primary uppercase",
    onClick: t
  },
  /* @__PURE__ */ e.createElement(s, { i18nKey: "PaymentMethodsPage.dialogDelete" }, "Delete")
)));
const O = (a) => {
  switch (a) {
    case u.enum.card:
      return "Card";
    case u.enum.paypal:
      return "Paypal";
    default:
      return "Unknown";
  }
}, H = (a) => a.type === u.enum.card ? `**** **** **** ${a.name.slice(-4)}` : a.name;
class ae extends e.Component {
  constructor(l) {
    super(l), this.fetchPaymentAccounts = () => {
      const { user: t } = m.getUserManager().state;
      t && this.logic.getPaymentAccounts(t.userId).then(() => {
        const { error: n } = this.logic.state;
        n && this.onFetchError(n);
      }).finally(() => this.setState({ isLoading: !1 }));
    }, this.onFetchError = (t) => {
      this.setState({
        alert: {
          type: d.danger,
          element: /* @__PURE__ */ e.createElement(p, { error: t })
        }
      });
    }, this.onDeleteSuccess = () => {
      this.setState({
        alert: {
          type: d.success,
          element: /* @__PURE__ */ e.createElement(s, { i18nKey: "PaymentMethodsPage.deleteSuccess" }, "The selected payment method has been deleted.")
        }
      });
    }, this.onDeleteError = (t) => {
      this.setState({
        alert: {
          type: d.danger,
          element: /* @__PURE__ */ e.createElement(p, { error: t })
        }
      });
    }, this.deletePaymentMethod = async () => {
      const { deletePaymentAccount: t } = this.state, { user: n } = m.getUserManager().state;
      if (!t || !n)
        return;
      await this.logic.delete(n.userId, t);
      const { deleteError: o, deleteSuccess: i } = this.logic.state;
      o && this.onDeleteError(o), i && (this.onDeleteSuccess(), await this.setState({ deletePaymentAccount: null }), await this.fetchPaymentAccounts());
    }, this.shouldRedirect = () => {
      var n;
      const { error: t } = this.logic.state;
      return _.isAxiosError(t) && ((n = t == null ? void 0 : t.response) == null ? void 0 : n.data.errorCode) === T.PAYMENT_METHOD_SAVING_UNSUPPORTED;
    }, this.logic = m.getAppState().paymentMethodManager, this.logic.subscribe(() => this.setState({})), this.state = {
      deletePaymentAccount: null,
      alert: null,
      isLoading: !0
    };
  }
  componentDidMount() {
    if (this.props.isPreviewMode)
      return this.setState({ isLoading: !1 });
    this.fetchPaymentAccounts();
  }
  render() {
    const { deletePaymentAccount: l, alert: t, isLoading: n } = this.state, { isFetching: o, paymentAccounts: i, isDeleting: h, error: M } = this.logic.state, y = this.props.isPreviewMode, r = y ? L : i;
    return this.shouldRedirect() ? /* @__PURE__ */ e.createElement(F, { error: M }) : n ? /* @__PURE__ */ e.createElement(B, null) : /* @__PURE__ */ e.createElement(g, { className: "paymentMethodsPage" }, /* @__PURE__ */ e.createElement(P, null, /* @__PURE__ */ e.createElement(s, { i18nKey: "PaymentMethodsPage.title" }, "Payment Methods")), /* @__PURE__ */ e.createElement(f, null, t && /* @__PURE__ */ e.createElement(
      k,
      {
        type: t.type,
        className: "alert",
        onDismiss: () => {
          this.setState({ alert: null });
        }
      },
      t.element
    ), o && /* @__PURE__ */ e.createElement(v, null, /* @__PURE__ */ e.createElement(s, { i18nKey: "PaymentMethodsPage.loading.message" }, "Loading your saved payment methods...")), r && /* @__PURE__ */ e.createElement("div", { className: "paymentAccountsTable" }, r.length > 0 && /* @__PURE__ */ e.createElement("table", null, /* @__PURE__ */ e.createElement("thead", null, /* @__PURE__ */ e.createElement("tr", null, /* @__PURE__ */ e.createElement("th", null, /* @__PURE__ */ e.createElement(s, { i18nKey: "PaymentMethodPage.paymentAccounts.type" }, "Payment Type")), /* @__PURE__ */ e.createElement("th", { className: "left name" }), /* @__PURE__ */ e.createElement("th", null))), /* @__PURE__ */ e.createElement("tbody", null, r.map((c) => /* @__PURE__ */ e.createElement("tr", { key: `${c.id}` }, /* @__PURE__ */ e.createElement("td", null, O(c.type)), /* @__PURE__ */ e.createElement("td", { className: "name" }, H(c)), /* @__PURE__ */ e.createElement("td", null, /* @__PURE__ */ e.createElement(
      "button",
      {
        disabled: h,
        onClick: y ? void 0 : () => this.setState({ deletePaymentAccount: c })
      },
      /* @__PURE__ */ e.createElement(s, { i18nKey: "PaymentMethodPage.delete.button" }, "Delete")
    )))))), l && /* @__PURE__ */ e.createElement(
      x,
      {
        isDeleting: h,
        onClose: () => this.setState({ deletePaymentAccount: null }),
        onDelete: this.deletePaymentMethod
      }
    ), !r.length && /* @__PURE__ */ e.createElement("div", { className: "noData" }, /* @__PURE__ */ e.createElement(s, { i18nKey: "PaymentMethodPage.paymentAccounts.noData" }, "You have no payment methods saved")))));
  }
}
export {
  O as createReadablePaymentAccountType,
  H as createReadablePaymentName,
  ae as default
};
