import { a3 as Dialog, t, a4 as DialogBody, a5 as DialogFooter, f as Button, Q as ButtonType, N as ButtonStyle, T as Trans, aL as PaymentAccountType, a as Ctx, h as AlertType, i as CommonError, E as ErrorHelper, q as EcommerceErrorCode, j as Alert, L as Loading } from "./index.js";
import { C as CommonError$1 } from "./CommonError.js";
import React__default from "react";
import { A as AccountMainSection, b as AccountMainSectionHeader, a as AccountMainSectionBody } from "./AccountMainSection.js";
import { c as classNames } from "./reactSlick.js";
import { N as NavItemPlaceholder } from "./NavItemPlaceholder.js";
import "./validator.js";
import "./dateFns.js";
import "./reactPlayer.js";
import "react-router-dom";
import "./starBgGradient.js";
import "./CommonError2.js";
const skeletonCard = "skeletonCard _skeletonCard_49e3a";
var styles$1 = {
  skeletonCard
};
const SkeletonCard = ({ className }) => /* @__PURE__ */ React__default.createElement(AccountMainSection, {
  className: classNames(styles$1.skeletonCard, className)
}, /* @__PURE__ */ React__default.createElement(AccountMainSectionHeader, null, /* @__PURE__ */ React__default.createElement(NavItemPlaceholder, null)), /* @__PURE__ */ React__default.createElement(AccountMainSectionBody, {
  className: "skeletonBody"
}));
const dialogFooter = "dialogFooter _dialogFooter_e9117";
var styles = {
  dialogFooter
};
const DeletePaymentDialog = ({ isDeleting, onClose, onDelete }) => {
  return /* @__PURE__ */ React__default.createElement(Dialog, {
    isOpen: true,
    onClose,
    title: t("PaymentMethodsPage.dialogTitle")
  }, /* @__PURE__ */ React__default.createElement(DialogBody, null, "Do you want to delete the selected payment method?"), /* @__PURE__ */ React__default.createElement(DialogFooter, {
    className: styles.dialogFooter
  }, /* @__PURE__ */ React__default.createElement(Button, {
    disabled: isDeleting,
    className: "btn btn-ghost btnCancel uppercase",
    buttonType: ButtonType.TEXT,
    buttonStyle: ButtonStyle.NONE,
    onClick: onClose
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "PaymentMethodsPage.dialogCancel"
  }, "Cancel")), /* @__PURE__ */ React__default.createElement(Button, {
    loadingIndicator: "SPINNER",
    disabled: isDeleting,
    isLoading: isDeleting,
    className: "btn-primary uppercase",
    onClick: onDelete
  }, /* @__PURE__ */ React__default.createElement(Trans, {
    i18nKey: "PaymentMethodsPage.dialogDelete"
  }, "Delete"))));
};
var PaymentMethodsPage$1 = "";
const createReadablePaymentAccountType = (type) => {
  switch (type) {
    case PaymentAccountType.enum.card:
      return "Card";
    case PaymentAccountType.enum.paypal:
      return "Paypal";
    default:
      return "Unknown";
  }
};
const createReadablePaymentName = (payment) => {
  if (payment.type === PaymentAccountType.enum.card) {
    return `**** **** **** ${payment.name.slice(-4)}`;
  }
  return payment.name;
};
class PaymentMethodsPage extends React__default.Component {
  constructor(props) {
    super(props);
    this.fetchPaymentAccounts = () => {
      const { user } = Ctx.getUserManager().state;
      if (user) {
        this.logic.getPaymentAccounts(user.userId).then(() => {
          const { error } = this.logic.state;
          if (error)
            this.onFetchError(error);
        }).finally(() => this.setState({ isLoading: false }));
      }
    };
    this.onFetchError = (error) => {
      this.setState({
        alert: {
          type: AlertType.danger,
          element: /* @__PURE__ */ React__default.createElement(CommonError, {
            error
          })
        }
      });
    };
    this.onDeleteSuccess = () => {
      this.setState({
        alert: {
          type: AlertType.success,
          element: /* @__PURE__ */ React__default.createElement(Trans, {
            i18nKey: "PaymentMethodsPage.deleteSuccess"
          }, "The selected payment method has been deleted.")
        }
      });
    };
    this.onDeleteError = (error) => {
      this.setState({
        alert: {
          type: AlertType.danger,
          element: /* @__PURE__ */ React__default.createElement(CommonError, {
            error
          })
        }
      });
    };
    this.deletePaymentMethod = async () => {
      const { deletePaymentAccount } = this.state;
      const { user } = Ctx.getUserManager().state;
      if (!deletePaymentAccount || !user)
        return;
      await this.logic.delete(user.userId, deletePaymentAccount);
      const { deleteError, deleteSuccess } = this.logic.state;
      if (deleteError) {
        this.onDeleteError(deleteError);
      }
      if (deleteSuccess) {
        this.onDeleteSuccess();
        await this.setState({ deletePaymentAccount: null });
        await this.fetchPaymentAccounts();
      }
    };
    this.shouldRedirect = () => {
      var _a;
      const { error } = this.logic.state;
      return ErrorHelper.isAxiosError(error) && ((_a = error == null ? void 0 : error.response) == null ? void 0 : _a.data.errorCode) === EcommerceErrorCode.PAYMENT_METHOD_SAVING_UNSUPPORTED;
    };
    this.logic = Ctx.getAppState().paymentMethodManager;
    this.logic.subscribe(() => this.setState({}));
    this.state = {
      deletePaymentAccount: null,
      alert: null,
      isLoading: true
    };
  }
  componentDidMount() {
    this.fetchPaymentAccounts();
  }
  render() {
    const { deletePaymentAccount, alert, isLoading } = this.state;
    const { isFetching, paymentAccounts, isDeleting, error } = this.logic.state;
    if (this.shouldRedirect()) {
      return /* @__PURE__ */ React__default.createElement(CommonError$1, {
        error
      });
    }
    if (isLoading) {
      return /* @__PURE__ */ React__default.createElement(SkeletonCard, null);
    }
    return /* @__PURE__ */ React__default.createElement(AccountMainSection, {
      className: "paymentMethodsPage"
    }, /* @__PURE__ */ React__default.createElement(AccountMainSectionHeader, null, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PaymentMethodsPage.title"
    }, "Payment Methods")), /* @__PURE__ */ React__default.createElement(AccountMainSectionBody, null, alert && /* @__PURE__ */ React__default.createElement(Alert, {
      type: alert.type,
      className: "alert",
      onDismiss: () => {
        this.setState({ alert: null });
      }
    }, alert.element), isFetching && /* @__PURE__ */ React__default.createElement(Loading, null, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PaymentMethodsPage.loading.message"
    }, "Loading your saved payment methods...")), paymentAccounts && /* @__PURE__ */ React__default.createElement("div", {
      className: "paymentAccountsTable"
    }, paymentAccounts.length > 0 && /* @__PURE__ */ React__default.createElement("table", null, /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PaymentMethodPage.paymentAccounts.type"
    }, "Payment Type")), /* @__PURE__ */ React__default.createElement("th", {
      className: "left name"
    }), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, paymentAccounts.map((paymentAccount) => /* @__PURE__ */ React__default.createElement("tr", {
      key: `${paymentAccount.id}`
    }, /* @__PURE__ */ React__default.createElement("td", null, createReadablePaymentAccountType(paymentAccount.type)), /* @__PURE__ */ React__default.createElement("td", {
      className: "name"
    }, createReadablePaymentName(paymentAccount)), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("button", {
      disabled: isDeleting,
      onClick: () => this.setState({ deletePaymentAccount: paymentAccount })
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PaymentMethodPage.delete.button"
    }, "Delete"))))))), deletePaymentAccount && /* @__PURE__ */ React__default.createElement(DeletePaymentDialog, {
      isDeleting,
      onClose: () => this.setState({ deletePaymentAccount: null }),
      onDelete: this.deletePaymentMethod
    }), !paymentAccounts.length && /* @__PURE__ */ React__default.createElement("div", {
      className: "noData"
    }, /* @__PURE__ */ React__default.createElement(Trans, {
      i18nKey: "PaymentMethodPage.paymentAccounts.noData"
    }, "You have no payment methods saved")))));
  }
}
export { createReadablePaymentAccountType, createReadablePaymentName, PaymentMethodsPage as default };
