'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-fd2bbf0b.js');
const store = require('./store-f2110833.js');
require('./index-81aa1bcb.js');
require('./getCache-c039a6ae.js');

const epayCss = "floodteam-epay ion-card{overflow:visible}floodteam-epay .hidden{height:0;width:0;opacity:0;pointer-events:none}floodteam-epay floodteam-flip-card .flip-card-inner .badge-top-right{background-color:rgba(0, 0, 0, 0.6);color:#fff;position:absolute;top:0;right:0;padding:5px 10px;border-radius:0 0 0 5px;font-size:0.75em;text-transform:uppercase}floodteam-epay ion-item ion-icon[slot=\"start\"]{margin:auto 10px 10px auto;fill:var(--ion-text-color)}floodteam-epay fireenjin-form#invoice{min-width:100%}floodteam-epay .owed{padding:var(--floodteam-epay-owed-padding, 15px 0 15px 0);transition:opacity 0.3s ease}floodteam-epay .back-button{position:absolute;top:0px;left:0px;z-index:9}floodteam-epay .owed>span,floodteam-epay .owed>p{display:block;margin:0 auto;text-align:center}floodteam-epay .owed>span,floodteam-epay #confirmation h1{margin:0 auto;font-size:2em;font-weight:bold;color:var(\n    --floodteam-epay-money-color,\n    var(--ion-color-success, green)\n  ) !important;line-height:60px;height:60px;transition:0.4s all ease}floodteam-epay .owed>p{letter-spacing:2px;color:var(--ion-text-color) !important}floodteam-epay .confirm-title{margin:0 !important}floodteam-epay #confirmation h1{font-size:1.5em;padding-top:0}floodteam-epay #payments .past{display:block;max-width:500px;width:90%;margin:0 auto}floodteam-epay #payments h2{color:#999 !important;margin:0 15px;padding:5px 5px;font-size:0.9em;border-bottom:2px solid #bbb;display:block;text-align:left}floodteam-epay #payments floodteam-button{display:block;width:100%}floodteam-epay #payments floodteam-fallback{--floodteam-fallback-icon-size:50px;display:block;width:100%;padding:15px 0}floodteam-epay #details{padding:0 30px}floodteam-epay #details label{font-size:0.9em;font-weight:bold;color:#bbb !important;text-align:left}floodteam-epay #details floodteam-grid{padding:15px 0 0 0}floodteam-epay #card{padding:30px 30px 0 30px}floodteam-epay #check{padding:0 30px}floodteam-epay #admin-controls floodteam-button{display:block;width:100%;text-align:center;font-weight:normal;font-size:0.75em}floodteam-epay #confirmation .confirm-title{font-weight:bold;color:var(--ion-color-medium) !important;margin:0 auto 15px}floodteam-epay #confirmation floodteam-thumbs-up{display:block;margin:30px auto}floodteam-epay #confirmation floodteam-error{display:block;width:90%;margin:15px auto 0}floodteam-epay #success p{color:var(--ion-color-medium) !important;font-size:0.8em;font-weight:bold}floodteam-epay floodteam-error .ft-error-wrapper{padding:0 !important}@media only screen and (max-width: 500px){floodteam-epay .back-button{top:3px;left:-15px;z-index:9}floodteam-epay .owed>span{font-size:1.25em !important;line-height:30px;padding-top:20px}floodteam-epay #details{padding:0 10px}floodteam-epay #card{padding:20px 10px 0 10px}floodteam-epay #check{padding:0 10px}}";

let Epay = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.ftEpayShowCommisions = index.createEvent(this, "ftEpayShowCommisions", 7);
    this.fireenjinFetch = index.createEvent(this, "fireenjinFetch", 7);
    this.fireenjinSubmit = index.createEvent(this, "fireenjinSubmit", 7);
    this.slideIndex = [
      "summary",
      "payment",
      "card",
      "check",
      "confirmation",
      "success",
    ];
    this.userPrefersDark = window &&
      window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches
      ? true
      : false;
    /**
     * The amount of money owed
     */
    this.owed = 0;
    /**
     * The total amount of money billed
     */
    this.total = 0;
    /**
     * The list of payments
     */
    this.payments = [];
    this.customer = {};
    this.users = [];
    this.paymentMethod = "card";
    this.disableFetch = false;
    this.isSlidesHidding = false;
    this.isBackShowing = false;
    this.isHeaderHidden = false;
    this.loading = false;
  }
  async onSuccess(event) {
    var _a, _b, _c, _d, _e, _f, _g;
    if (event.detail.endpoint === "findJob") {
      this.customer = ((_c = (_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.job) === null || _c === void 0 ? void 0 : _c.customer)
        ? event.detail.data.job.customer
        : {};
      this.email = ((_e = (_d = store.state.job) === null || _d === void 0 ? void 0 : _d.customer) === null || _e === void 0 ? void 0 : _e.email) ? store.state.job.customer.email : null;
      this.owed = ((_f = store.state.job) === null || _f === void 0 ? void 0 : _f.amountOwed) ? store.state.job.amountOwed : 0;
      this.total = ((_g = store.state.job) === null || _g === void 0 ? void 0 : _g.amountBilled) ? store.state.job.amountBilled : 0;
      this.amount = this.owed;
      setTimeout(async () => {
        await this.sliderEl.updateAutoHeight();
      }, 1000);
    }
    else if (event.detail.endpoint === "addPayment") {
      this.fetchData();
      this.reset();
    }
  }
  async onSubmit() {
    if (this.paymentMethod === "check") {
      await this.payWithCheck();
    }
    else {
      await this.payWithCard();
    }
  }
  onReset() {
    this.goBack();
  }
  onCheckScan(event) {
    if (!event || !event.detail || !event.detail.front) {
      return false;
    }
    this.checkFront = event.detail.front;
    this.checkBack = event.detail.back;
  }
  onInput(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "amount") {
      this.amount = event.target.value ? parseFloat(event.target.value) : null;
    }
    else if (event.target.name === "email") {
      this.email = event.target.value;
    }
    else if (event.target.name === "paymentMethod") {
      this.paymentMethod = event.target.value;
    }
    else if (event.target.name === "paymentType") {
      this.paymentType = event.target.value;
    }
  }
  onFtToggle(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "projected") {
      console.log(event);
    }
  }
  async onSubmitCard(_event) {
    await this.goToConfirmation(event);
  }
  async goToConfirmation(event) {
    this.paymentPayload = event && event.detail ? event.detail : null;
    this.isHeaderHidden = true;
    await this.sliderEl.slideTo(4);
    this.paymentEvent = event;
  }
  async approve() {
    if (this.paymentMethod === "check") {
      try {
        await this.confirmPayment(this.errorCode === 2006
          ? {
            ignore_check_amount_mismatch: true,
          }
          : {});
        this.submitPayment(this.paymentMethod, this.paymentEvent);
      }
      catch (error) {
        console.log("Error taking check payment", error);
      }
    }
    else {
      this.submitPayment(this.paymentMethod, this.paymentEvent);
    }
  }
  submitPayment(type, event) {
    let data = {};
    if (type === "card") {
      data = {
        token: event.detail.token.id,
        amount: this.amount,
        email: this.email,
      };
    }
    else if (type === "check") {
      data = {
        transactionId: event.id ? event.id : null,
        checkNumber: event.check_number ? event.check_number : null,
        amount: this.amount,
        email: this.email,
      };
    }
    else if (type === "manual") {
      data = {
        amount: this.amount,
        email: this.email,
      };
    }
    this.fireenjinSubmit.emit({
      endpoint: "addPayment",
      data: {
        ...data,
        jobId: this.jobId,
        userId: this.userId,
        type,
      },
    });
  }
  onCardError() {
    setTimeout(() => {
      this.updateSlides();
    }, 1000);
  }
  async onSlideChange(event) {
    console.log(event);
    if (!this.sliderEl)
      return;
    await this.setSlide(this.sliderEl.querySelectorAll("ion-slide")[await this.sliderEl.getActiveIndex()].id);
  }
  onCheckError(event) {
    if (!event ||
      !event.detail ||
      !event.detail.error ||
      !event.detail.error.errors ||
      !event.detail.error.errors[0]) {
      return false;
    }
    if (event.detail.error.errors[0].error_code === 2006) {
      this.errorCode = 2006;
      this.error = `The amount you typed doesn't match what the scanner saw (${this.formatUSD(event.detail.error.errors[0].error_data.read_amount)}). Are you sure you wish to proceed?`;
    }
    else {
      this.error = event.detail.error.errors[0].error_message;
    }
    setTimeout(() => {
      this.updateSlides();
    }, 2000);
  }
  async onSubmitCheck(event) {
    this.goToConfirmation(event);
  }
  /**
   * Update the ion-slides height
   */
  async updateSlides() {
    this.sliderEl.updateAutoHeight();
    return this.sliderEl.update();
  }
  async success() {
    await this.sliderEl.slideTo(5);
    this.isBackShowing = false;
    this.checkmarkEl.animating = true;
    setTimeout(async () => {
      await this.reset();
    }, 5000);
  }
  async reset() {
    this.error = null;
    this.paymentPayload = null;
    this.sliderEl.slideTo(0);
    this.amount = 0;
    this.isBackShowing = false;
    this.isHeaderHidden = false;
    this.paymentMethod = null;
    this.paymentEvent = null;
    this.setSubText();
    await this.sliderEl.update();
  }
  /**
   * Confirm a check payment
   */
  async confirmPayment(options = {}) {
    return this.payCheckEl.confirmPayment(options);
  }
  onOwedChange() {
    this.setSubText();
  }
  onTotalChange() {
    this.setSubText();
  }
  componentDidLoad() {
    if (!(index.Build === null || index.Build === void 0 ? void 0 : index.Build.isBrowser))
      return;
    this.setSubText();
    if (this.showSlide) {
      this.setSlide(this.showSlide);
    }
    if (!this.disableFetch) {
      this.fetchData();
    }
  }
  async fetchData() {
    if (this.jobId) {
      this.fireenjinFetch.emit({
        endpoint: "findJob",
        params: {
          id: this.jobId,
          withPayments: true,
          withEfiles: false,
          withUsers: false,
          withSites: false,
          withPayModel: false,
          withPhotos: false,
          withPayables: false,
          withReadings: false,
        },
      });
    }
  }
  async setSlide(name) {
    if (["confirmation", "card", "check", "success"].indexOf(name) >= 0) {
      this.isBackShowing = true;
    }
    else if (name === "confirmation" || name === "success") {
      this.isHeaderHidden = true;
      if (name === "success") {
        await this.success();
      }
    }
    else if (name === "payments") {
      this.isBackShowing = false;
    }
  }
  formatUSD(amount) {
    const formatter = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    });
    return formatter.format(amount);
  }
  setSubText() {
    this.amount = parseFloat(this.owed) || 0;
    this.subText = `${this.calculatePercentPaid()}% paid of ${this.formatUSD(parseFloat(this.total) || 0)} bill`;
  }
  calculatePercentPaid() {
    const decimal = Math.round((this.owed / this.total) * 100);
    const percent = 100 - decimal;
    return typeof percent === "number" && percent !== Infinity && percent > 0
      ? percent
      : 0;
  }
  async takePayment() {
    if (this.isBackShowing)
      return;
    this.isBackShowing = true;
    this.sliderEl.slideNext();
  }
  payWithCard() {
    if (!this.amount ||
      this.amount <= 0 ||
      !this.email ||
      this.email.indexOf("@") === -1) {
      alert("Billee email address and amount being paid are required!");
      return false;
    }
    this.paymentMethod = "card";
    this.subText = `Paying ${this.formatUSD(this.amount)} by card...`;
    this.sliderEl.slideTo(2);
  }
  payWithCheck() {
    if (!this.amount ||
      this.amount <= 0 ||
      !this.email ||
      this.email.indexOf("@") === -1) {
      alert("Billee email address and amount being paid are required!");
      return false;
    }
    this.paymentMethod = "check";
    this.subText = `Paying ${this.formatUSD(this.amount)} by check...`;
    this.sliderEl.slideTo(3);
  }
  payManually() {
    if (!this.amount ||
      this.amount <= 5 ||
      !this.email ||
      this.email.indexOf("@") === -1) {
      alert("Billee email address and amount greater than $5.00 being paid are required!");
      return false;
    }
    this.paymentMethod = "manual";
    this.goToConfirmation(null);
  }
  async goBack() {
    this.loading = false;
    this.error = null;
    const currentSlideIndex = await this.sliderEl.getActiveIndex();
    if (currentSlideIndex === 4) {
      if (this.paymentMethod === "card") {
        await this.sliderEl.slideTo(2);
      }
      else if (this.paymentMethod === "check") {
        await this.sliderEl.slideTo(3);
      }
      else if (this.paymentMethod === "manual") {
        await this.sliderEl.slideTo(1);
      }
    }
    else {
      this.paymentMethod === "check"
        ? await this.sliderEl.slideTo(1)
        : await this.sliderEl.slidePrev();
    }
    this.paymentMethod = null;
    if (currentSlideIndex === 0) {
      this.reset();
    }
    this.isHeaderHidden = false;
  }
  capitalize(s) {
    if (typeof s !== "string")
      return "";
    return s.charAt(0).toUpperCase() + s.slice(1);
  }
  getPaymentTypeCofirmation() {
    if (this.paymentMethod === "card") {
      return `<h4>${this.capitalize(this.paymentPayload &&
        this.paymentPayload.token &&
        this.paymentPayload.token.card &&
        this.paymentPayload.token.card
        ? this.paymentPayload.token.card.brand
        : "")} ${this.paymentPayload &&
        this.paymentPayload.token &&
        this.paymentPayload.token.card &&
        this.paymentPayload.token.card
        ? this.paymentPayload.token.card.funding
        : ""} ending in ${this.paymentPayload &&
        this.paymentPayload.token &&
        this.paymentPayload.token.card &&
        this.paymentPayload.token.card
        ? this.paymentPayload.token.card.last4
        : ""}</h4>`;
    }
    else if (this.paymentMethod === "check") {
      return `<ion-grid><ion-row><ion-col size="6"><img src="${this.checkFront}" style="border-radius: 20px; width:100%; display: block; max-width: 300px;" /></ion-col><ion-col size="6"><img src="${this.checkBack}" style="border-radius: 20px; width:100%; display: block; max-width: 300px;" /></ion-col></ion-row></ion-grid>`;
    }
    else if (this.paymentMethod === "manual") {
      return "<h4>This should be avoided!</h4>";
    }
  }
  getPaymentText(payment) {
    let paymentText = "";
    const paidOn = new Date(payment.createdAt).toLocaleString().split(",")[0];
    if (payment.type === "manual") {
      paymentText = `${this.formatUSD(payment.amount)} manually on ${paidOn}`;
    }
    else if (payment.type === "card") {
      paymentText = `${this.formatUSD(payment.amount)} on ${payment.brand ? payment.brand : ""} card ending in ${payment.ending_in ? payment.ending_in : ""} on ${paidOn}`;
    }
    else if (payment.type === "check") {
      paymentText = `${this.formatUSD(payment.amount)} by check ${payment.check_number ? payment.check_number : ""} on ${paidOn}`;
    }
    return paymentText;
  }
  render() {
    var _a, _b, _c, _d;
    return (index.h("ion-card", null, index.h("div", { class: {
        owed: true,
        hidden: this.isHeaderHidden,
      } }, index.h("span", null, this.formatUSD(this.owed), index.h("small", null, " owed")), index.h("p", null, this.subText)), index.h("ion-slides", { ref: (el) => (this.sliderEl = el), options: {
        autoHeight: true,
        allowTouchMove: false,
        simulateTouch: false,
        autoplay: false,
      }, class: { "hide-slides": this.isSlidesHidding } }, index.h("ion-slide", { id: "payments" }, index.h("ion-grid", null, index.h("ion-row", null, index.h("ion-col", null, index.h("div", { class: "past" }, index.h("h2", null, "Past Payments"), ((_b = (_a = store.state === null || store.state === void 0 ? void 0 : store.state.job) === null || _a === void 0 ? void 0 : _a.payments) === null || _b === void 0 ? void 0 : _b.length) > 0 ? (store.state.job.payments.map((payment) => {
      var _a, _b;
      return (index.h("ion-item", { lines: "none" }, index.h("ion-label", { class: "ion-text-wrap" }, index.h("h4", null, ((_a = payment.user) === null || _a === void 0 ? void 0 : _a.firstName)
        ? payment.user.firstName
        : "", " ", ((_b = payment.user) === null || _b === void 0 ? void 0 : _b.lastName)
        ? payment.user.lastName
        : ""), index.h("p", { style: {
          color: payment.type === "manual"
            ? "var(--ion-color-danger)"
            : "var(--ion-color-success)",
        } }, this.getPaymentText(payment)))));
    })) : (index.h("floodteam-fallback", { icon: "logo-usd", message: "No payments received yet..." }))), index.h("ion-button", { onClick: () => this.takePayment() }, "Pay Now"))))), index.h("ion-slide", { id: "details" }, index.h("fireenjin-form", { id: "invoice", name: "invoice", class: "ion-padding", resetButton: "Back", resetButtonColor: "medium", submitButton: "Next", disableReset: true, disableLoader: true }, index.h("fireenjin-input-amount", { name: "amount", labelPosition: "stacked", label: "Amount on Invoice", value: this.amount }), index.h("fireenjin-input", { name: "email", labelPosition: "stacked", type: "email", label: "Invoice Email", value: this.email }), index.h("fireenjin-select", { lines: "full", labelPosition: "stacked", name: "paymentType", label: "Payment Type", value: null, options: [
        { label: "Self", value: null },
        { label: "Insurance", value: "insurance" },
        { label: "Code Blue", value: "codeblue" },
      ] }), index.h("fireenjin-select", { lines: "full", labelPosition: "stacked", name: "paymentMethod", label: "Payment Method", value: "card", options: [
        { label: "Check", value: "check" },
        { label: "Card", value: "card" },
        { label: "ACH", value: "ach" },
      ] }), index.h("fireenjin-toggle", { lines: "full", name: "send", value: true, label: "Send Invoice", color: "secondary" }))), index.h("ion-slide", { id: "card" }, index.h("floodteam-pay-card", { stripeKey: this.stripeKey, stripeStyle: {
        base: {
          color: this.userPrefersDark ? "#FFFFFF" : "#000000",
          iconSize: "30px",
          iconColor: "#999999",
          lineHeight: "20px",
          fontFamily: '"Work Sans", sans-serif',
          fontSmoothing: "antialiased",
          fontSize: "18px",
          "::placeholder": {
            color: "#999999",
            iconColor: "#999999",
            fontWeight: "normal",
          },
        },
        invalid: {
          color: "#ee6274",
          iconColor: "#ee6274",
        },
      } })), index.h("ion-slide", { id: "check" }, index.h("floodteam-pay-check", { loading: this.loading, ref: (el) => (this.payCheckEl = el), apiKey: this.dadeKey, url: this.dadeUrl, amount: this.amount })), index.h("ion-slide", { id: "confirmation" }, index.h("ion-grid", null, index.h("ion-row", null, index.h("ion-col", null, index.h("p", { class: "confirm-title" }, "Confirm Payment of"), index.h("h1", null, this.formatUSD(this.amount)), this.error && index.h("floodteam-error", { message: this.error }), index.h("ion-list", null, index.h("ion-item", null, index.h("ion-icon", { slot: "start", name: "person" }), index.h("div", null, index.h("p", null, "From"), index.h("h4", null, ((_c = this.customer) === null || _c === void 0 ? void 0 : _c.firstName)
      ? this.customer.firstName
      : "Customer", " ", ((_d = this.customer) === null || _d === void 0 ? void 0 : _d.lastName)
      ? this.customer.lastName
      : "Name"))), index.h("ion-item", null, index.h("ion-icon", { slot: "start", name: "mail" }), index.h("div", null, index.h("p", null, "Send receipt to"), index.h("h4", null, this.email ? this.email : "Customer Email"))), index.h("ion-item", null, index.h("ion-icon", { slot: "start", name: "logo-usd" }), index.h("div", null, index.h("p", null, this.paymentMethod === "manual"
      ? `Paying manually`
      : `Paying with ${this.capitalize(this.paymentMethod)}`), index.h("div", { innerHTML: this.getPaymentTypeCofirmation() }))), index.h("ion-grid", null, index.h("ion-row", { class: "ion-align-items-center" }, index.h("ion-col", { size: "12", class: "ion-align-self-end" }, index.h("ion-button", { onClick: () => this.approve() }, "Approve & Finish"))))))))), index.h("ion-slide", { id: "success" }, index.h("ion-grid", null, index.h("ion-row", null, index.h("ion-col", null, index.h("floodteam-checkmark", { ref: (el) => (this.checkmarkEl = el) }), index.h("p", null, "You're good to go!"))))))));
  }
  get epayEl() { return index.getElement(this); }
  static get watchers() { return {
    "owed": ["onOwedChange"],
    "total": ["onTotalChange"]
  }; }
};
Epay.style = epayCss;

exports.floodteam_epay = Epay;

//# sourceMappingURL=floodteam-epay.cjs.entry.js.map