'use strict';

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

const index = require('./index-3e5ae956.js');
const formatUSD = require('./formatUSD-65108a08.js');

const invoiceAmount = ({ beforeHTML = "<h1>What is the total invoice amount on the invoice?</h1>", label = "Invoice Amount", name = "invoiceAmount", value = null, } = {}) => ({
  name,
  beforeHTML,
  fields: [
    {
      label,
      labelPosition: "stacked",
      inputMode: "decimal",
      placeholder: "0",
      required: true,
      name: "amount",
      type: "number",
      step: "0.01",
      value,
    },
  ],
});

const receiptEmail = ({ name = "receiptEmail", beforeHTML = "<h1>Where can we send an invoice receipt to?</h1>", value = null, placeholder = "Enter an Email Address", } = {}) => ({
  name,
  beforeHTML,
  fields: [
    {
      label: "Receipt Email Address",
      labelPosition: "stacked",
      name: "email",
      clearInput: true,
      placeholder,
      value,
    },
  ],
});

const paymentMethod = ({ name = "paymentMethod", beforeHTML = "<h1>What is the method of payment?</h1>", value = null, placeholder = "Select a Payment Method", } = {}) => ({
  name,
  beforeHTML,
  fields: [
    {
      label: "Payment Method",
      labelPosition: "stacked",
      name: "method",
      type: "select",
      value,
      placeholder,
      options: [
        {
          label: "Card",
          value: "card",
        },
        {
          label: "Check",
          value: "check",
        },
      ],
    },
  ],
});

const payCard = ({ name = "payCard", beforeHTML = `<h1>Please enter card details for payment processing.</h1><floodteam-pay-card></floodteam-pay-card>`, } = {}) => ({
  name,
  beforeHTML,
});

const payCheck = ({ name = "payCheck", amount = 0, beforeHTML = `<h1>Upload front and back images of your check</h1><floodteam-pay-check amount="${amount}"></floodteam-pay-check>`, } = {}) => ({
  name,
  beforeHTML,
});

const confirmCardPayment = ({ amount = 0, email = "", last4 = "", expirationMonth = 0, expirationYear = 0, brand = "", name = "confirmCardPayment", beforeHTML = `<div class="ion-text-left">
  <h1>Confirm Payment Details</h1>
  <p>You will receive a receipt to confirm payment processing.</p>
  <div class="confirm-card">
    <span>
      <small>Invoice Amount</small>
      <p>${formatUSD.formatUSD(amount)}</p>
    </span>   
    <span>
      <small>Invoice Email</small>
      <p>${email}</p>
    </span>
    <span>
      <small>Card Number</small>
      <p>*** *** *** ${last4}</p>
    </span>
    <div style="display:flex; gap: 1rem; justify-content: space-between;">
      <span>
        <small>Expiration Date</small>
        <p>${expirationMonth}/${expirationYear}</p>
      </span>
      <span>
        <small>Brand</small>
        <p>${brand}</p>
      </span>
    </div>
  </div>
</div>`, } = {}) => ({
  name,
  beforeHTML,
});

const confirmCheckPayment = ({ checkBack = "", checkFront = "", amount = 0, invoiceAmount = 0, name = "confirmCheckPayment", email = "", method = "", checkAmount = 0, beforeHTML = `<div class="ion-text-left">
              <h1>Confirm and Submit Payment</h1>
              <p>You will receive a receipt to confirm payment processing.</p>
              <div class="confirm-card">
                <h4>Payment Details</h4>
                <div
                  style="display: flex; gap: 0.8rem; justify-content: space-between;">
                  <span>
                    <small>Invoice Amount</small>
                    <p>${formatUSD.formatUSD(invoiceAmount)}</p>
                  </span>
                  <span>
                    <small>Payment Amount</small>
                    <p>${formatUSD.formatUSD(amount)}</p>
                  </span>
                </div>
                <span>
                  <small>Invoice Email</small>
                  <p>${email}</p>
                </span>
                <span>
                  <small>Payment Method</small>
                  <p style="text-transform: capitalize">
                    ${method}
                  </p>
                </span>
              </div>
              <div class="confirm-card">
                <h4>Check Images</h4>
                <div style="display: flex; justify-content: space-around; gap: 1.2rem;">
                  <div
                    class="check-scanner-preview check-front"
                    style="background: url(${checkFront})"
                  >
                    <ion-icon name="checkmark-circle"></ion-icon>
                  </div>
                  <div
                    class="check-scanner-preview check-back"
                    style="background: url(${checkBack})"
                  >
                    <ion-icon name="checkmark-circle"></ion-icon>
                  </div>
                </div>
                <h4>Check Details</h4>
                <div
                  style="display: flex; justify-content: space-between; gap: "1.2rem;"
                >
                  <span>
                    <small>Detected Check Amount</small>
                    <p>${formatUSD.formatUSD(checkAmount)}</p>
                  </span>
                </div>
              </div>
            </div>`, } = {}) => ({
  name,
  beforeHTML,
});

const paymentIntro = ({ name = "paymentIntro", beforeHTML = `<h1>Ready to make a payment?</h1><p style="padding: 2rem; max-width: 400px; color: var(--ion-color-light-shade);">We make payments easy. Pay with a check or credit card on our secure server.</p>`, } = {}) => ({
  name,
  beforeHTML,
});

const PaymentFlow = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.paths = {
      payingCard: () => [
        paymentIntro(),
        invoiceAmount({ value: this.amount }),
        receiptEmail({
          value: this.email,
        }),
        paymentMethod({
          value: this.method,
        }),
        payCard(),
        confirmCardPayment({
          amount: this.amount,
          email: this.email,
          expirationMonth: this.expirationMonth,
          expirationYear: this.expirationYear,
          last4: this.last4,
          brand: this.brand,
        }),
      ],
      payingCheck: () => [
        paymentIntro(),
        invoiceAmount({ value: this.amount }),
        receiptEmail({
          value: this.email,
        }),
        paymentMethod({
          value: this.method,
        }),
        payCheck({
          amount: this.amount,
        }),
        confirmCheckPayment({
          amount: this.amount,
          checkAmount: this.checkAmount,
          checkBack: this.checkBack,
          checkFront: this.checkFront,
          email: this.email,
          method: this.method,
        }),
      ],
    };
    this.user = {};
    this.jobId = undefined;
    this.currentPath = "payingCard";
    this.currentStep = "paymentIntro";
    this.amount = null;
    this.email = null;
    this.method = "card";
    this.checkFront = null;
    this.checkBack = null;
    this.checkAmount = undefined;
    this.last4 = undefined;
    this.expirationMonth = undefined;
    this.expirationYear = undefined;
    this.invoice = undefined;
    this.disableNext = false;
    this.disablePrev = false;
    this.disableSave = true;
    this.steps = [];
    this.currentSlideIndex = 0;
    this.loading = false;
    this.hasEnteredCard = false;
    this.token = undefined;
    this.brand = undefined;
  }
  /**
   * Set the path of the flow
   * @param path The path name to change to
   * @returns A list of steps for the current path
   */
  async setPath(path) {
    var _a, _b, _c, _d;
    this.currentPath = path || this.currentPath;
    this.currentStep =
      ((_d = (_c = (_b = (_a = this.paths) === null || _a === void 0 ? void 0 : _a[this.currentPath]) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[this.currentSlideIndex]) === null || _d === void 0 ? void 0 : _d.name) ||
        null;
    this.steps = this.paths[this.currentPath]();
    return this.steps;
  }
  async onCheckScan(event) {
    var _a, _b;
    this.checkFront = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.front;
    this.checkBack = (_b = event === null || event === void 0 ? void 0 : event.detail) === null || _b === void 0 ? void 0 : _b.back;
    this.setPath();
    if (this.hasCheckScanned())
      this.confirmCheckScan();
  }
  async onChange(event) {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
    console.log(event);
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.name) === "method" && ((_b = event === null || event === void 0 ? void 0 : event.detail) === null || _b === void 0 ? void 0 : _b.value) === "card") {
      this.method = "card";
      this.setPath("payingCard");
    }
    if (((_c = event === null || event === void 0 ? void 0 : event.target) === null || _c === void 0 ? void 0 : _c.name) === "method" && ((_d = event === null || event === void 0 ? void 0 : event.detail) === null || _d === void 0 ? void 0 : _d.value) === "check") {
      this.method = "check";
      this.setPath("payingCheck");
    }
    if (((_e = event === null || event === void 0 ? void 0 : event.target) === null || _e === void 0 ? void 0 : _e.name) === "amount") {
      this.amount =
        (((_f = event === null || event === void 0 ? void 0 : event.target) === null || _f === void 0 ? void 0 : _f.value) && parseFloat((_g = event === null || event === void 0 ? void 0 : event.target) === null || _g === void 0 ? void 0 : _g.value)) || null;
      this.setPath();
    }
    if (((_h = event === null || event === void 0 ? void 0 : event.target) === null || _h === void 0 ? void 0 : _h.name) === "email") {
      this.email = ((_j = event === null || event === void 0 ? void 0 : event.target) === null || _j === void 0 ? void 0 : _j.value) || null;
    }
    if (((_k = event === null || event === void 0 ? void 0 : event.target) === null || _k === void 0 ? void 0 : _k.name) === "card") {
      this.hasEnteredCard = !!((_l = event === null || event === void 0 ? void 0 : event.detail) === null || _l === void 0 ? void 0 : _l.validity);
      this.disableNext = !this.hasEnteredCard;
      if (this.hasEnteredCard) {
        this.flowEl.slideNext();
        const payCardEl = document.querySelector("floodteam-pay-card");
        const { token } = await payCardEl.getCardToken();
        console.log(token);
        this.last4 = (_m = token === null || token === void 0 ? void 0 : token.card) === null || _m === void 0 ? void 0 : _m.last4;
        this.expirationMonth = (_o = token === null || token === void 0 ? void 0 : token.card) === null || _o === void 0 ? void 0 : _o.exp_month;
        this.expirationYear = (_p = token === null || token === void 0 ? void 0 : token.card) === null || _p === void 0 ? void 0 : _p.exp_year;
        this.brand = (_q = token === null || token === void 0 ? void 0 : token.card) === null || _q === void 0 ? void 0 : _q.brand;
        this.token = token === null || token === void 0 ? void 0 : token.id;
        this.setPath();
        this.disableSave = false;
      }
    }
  }
  async onSlideChange(event) {
    var _a, _b, _c, _d;
    this.currentSlideIndex = await event.target.getActiveIndex();
    this.currentStep =
      ((_d = (_c = (_b = (_a = this.paths) === null || _a === void 0 ? void 0 : _a[this.currentPath]) === null || _b === void 0 ? void 0 : _b.call(_a)) === null || _c === void 0 ? void 0 : _c[this.currentSlideIndex]) === null || _d === void 0 ? void 0 : _d.name) ||
        null;
    if (this.currentStep === "payCheck" && !this.hasCheckScanned()) {
      this.disableNext = true;
    }
    if (this.currentStep === "payCard" && !this.hasEnteredCard) {
      this.disableNext = true;
    }
  }
  hasCheckScanned() {
    return (this.checkBack &&
      this.checkFront &&
      ![this.checkBack, this.checkFront].includes("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTc5OC4zMTYgNDgzLjE0MUM4MTIuNTIyIDQ4My4xNDEgODI0LjAzOCA0NzEuNjI1IDgyNC4wMzggNDU3LjQxOUM4MjQuMDM4IDQ0My4yMTMgODEyLjUyMiA0MzEuNjk4IDc5OC4zMTYgNDMxLjY5OEM3ODQuMTExIDQzMS42OTggNzcyLjU5NSA0NDMuMjEzIDc3Mi41OTUgNDU3LjQxOUM3NzIuNTk1IDQ3MS42MjUgNzg0LjExMSA0ODMuMTQxIDc5OC4zMTYgNDgzLjE0MVoiIGZpbGw9IiMyNDczQkIiLz4KPHBhdGggZD0iTTg2OS4wNTEgNDA1Ljk3Nkg4NDUuMzM5Qzg0NC4xMzMgNDA1Ljk3NiA4NDIuNjM4IDQwNS4xOTYgODQxLjQ3MiA0MDMuOTY3TDgzMS4wNDcgMzg3LjUxM0M4MzAuODgyIDM4Ny4yNTIgODMwLjY5OCAzODcuMDAzIDgzMC40OTYgMzg2Ljc2OUM4MjYuODk1IDM4Mi41NjkgODIyLjAyOCAzODAuMjU1IDgxNi44MDQgMzgwLjI1NUg3NzkuODI5Qzc3NC42MDQgMzgwLjI1NSA3NjkuNzM3IDM4Mi41NjkgNzY2LjEzNiAzODYuNzY5Qzc2NS45MzUgMzg3LjAwMyA3NjUuNzUxIDM4Ny4yNTIgNzY1LjU4NiAzODcuNTEzTDc1NS4xNiA0MDMuOTkxQzc1NC4yNjggNDA0Ljk2MyA3NTMuMDE0IDQwNiA3NTEuNjk2IDQwNlY0MDIuNzg1Qzc1MS42OTYgNDAxLjA4IDc1MS4wMTkgMzk5LjQ0NCA3NDkuODEzIDM5OC4yMzhDNzQ4LjYwNyAzOTcuMDMyIDc0Ni45NzEgMzk2LjM1NSA3NDUuMjY2IDM5Ni4zNTVINzM1LjYyQzczMy45MTUgMzk2LjM1NSA3MzIuMjc5IDM5Ny4wMzIgNzMxLjA3MyAzOTguMjM4QzcyOS44NjcgMzk5LjQ0NCA3MjkuMTkgNDAxLjA4IDcyOS4xOSA0MDIuNzg1VjQwNkg3MjcuNTgyQzcyMi40NjcgNDA2LjAwNSA3MTcuNTY0IDQwOC4wNCA3MTMuOTQ3IDQxMS42NTZDNzEwLjMzIDQxNS4yNzMgNzA4LjI5NiA0MjAuMTc3IDcwOC4yOTEgNDI1LjI5MVY1MDIuNDMyQzcwOC4yOTYgNTA3LjU0NyA3MTAuMzMgNTEyLjQ1IDcxMy45NDcgNTE2LjA2N0M3MTcuNTY0IDUxOS42ODMgNzIyLjQ2NyA1MjEuNzE4IDcyNy41ODIgNTIxLjcyM0g4NjkuMDUxQzg3NC4xNjUgNTIxLjcxOCA4NzkuMDY5IDUxOS42ODMgODgyLjY4NiA1MTYuMDY3Qzg4Ni4zMDIgNTEyLjQ1IDg4OC4zMzYgNTA3LjU0NyA4ODguMzQyIDUwMi40MzJWNDI1LjI2N0M4ODguMzM2IDQyMC4xNTMgODg2LjMwMiA0MTUuMjQ5IDg4Mi42ODYgNDExLjYzMkM4NzkuMDY5IDQwOC4wMTYgODc0LjE2NSA0MDUuOTgxIDg2OS4wNTEgNDA1Ljk3NlpNNzk4LjMxNiA0OTYuMDAxQzc5MC42ODYgNDk2LjAwMSA3ODMuMjI2IDQ5My43MzkgNzc2Ljg4MSA0ODkuNDk5Qzc3MC41MzYgNDg1LjI2IDc2NS41OTEgNDc5LjIzNCA3NjIuNjcxIDQ3Mi4xODRDNzU5Ljc1MSA0NjUuMTM0IDc1OC45ODcgNDU3LjM3NiA3NjAuNDc1IDQ0OS44OTJDNzYxLjk2NCA0NDIuNDA4IDc2NS42MzkgNDM1LjUzMyA3NzEuMDM1IDQzMC4xMzdDNzc2LjQzIDQyNC43NDEgNzgzLjMwNSA0MjEuMDY3IDc5MC43ODkgNDE5LjU3OEM3OTguMjc0IDQxOC4wODkgODA2LjAzMSA0MTguODU0IDgxMy4wODEgNDIxLjc3NEM4MjAuMTMxIDQyNC42OTQgODI2LjE1NyA0MjkuNjM5IDgzMC4zOTYgNDM1Ljk4NEM4MzQuNjM2IDQ0Mi4zMjkgODM2Ljg5OSA0NDkuNzg4IDgzNi44OTkgNDU3LjQxOUM4MzYuODg3IDQ2Ny42NDggODMyLjgxOCA0NzcuNDU1IDgyNS41ODUgNDg0LjY4OEM4MTguMzUyIDQ5MS45MjEgODA4LjU0NSA0OTUuOTkgNzk4LjMxNiA0OTYuMDAxVjQ5Ni4wMDFaIiBmaWxsPSIjMjQ3M0JCIi8+CjxwYXRoIGQ9Ik02NTguNTc4IDQ1MEM2NTguNTc4IDQxMi40OTMgNjczLjQ3OCAzNzYuNTIxIDcwMCAzNTBDNzI2LjUyMSAzMjMuNDc4IDc2Mi40OTMgMzA4LjU3OCA4MDAgMzA4LjU3OEM4MzcuNTA3IDMwOC41NzggODczLjQ3OSAzMjMuNDc4IDkwMCAzNTBDOTI2LjUyMiAzNzYuNTIxIDk0MS40MjIgNDEyLjQ5MyA5NDEuNDIyIDQ1MEg5NTBDOTUwIDQxMC4yMTggOTM0LjE5NiAzNzIuMDY0IDkwNi4wNjYgMzQzLjkzNEM4NzcuOTM2IDMxNS44MDQgODM5Ljc4MiAzMDAgODAwIDMwMEM3NjAuMjE4IDMwMCA3MjIuMDY0IDMxNS44MDQgNjkzLjkzNCAzNDMuOTM0QzY2NS44MDQgMzcyLjA2NCA2NTAgNDEwLjIxOCA2NTAgNDUwSDY1OC41NzhaIiBmaWxsPSIjRDFEMkQyIi8+CjxwYXRoIGQ9Ik04MDAgNTkxLjQyMkM3NjIuNTEgNTkxLjM2NSA3MjYuNTcyIDU3Ni40NDcgNzAwLjA2MiA1NDkuOTM4QzY3My41NTMgNTIzLjQyOCA2NTguNjM1IDQ4Ny40OSA2NTguNTc4IDQ1MEg2NTBDNjUwIDQ4OS43ODIgNjY1LjgwNCA1MjcuOTM2IDY5My45MzQgNTU2LjA2NkM3MjIuMDY0IDU4NC4xOTYgNzYwLjIxOCA2MDAgODAwIDYwMEM4MzkuNzgyIDYwMCA4NzcuOTM2IDU4NC4xOTYgOTA2LjA2NiA1NTYuMDY2QzkzNC4xOTYgNTI3LjkzNiA5NTAgNDg5Ljc4MiA5NTAgNDUwSDk0MS40MjJDOTQxLjM2NSA0ODcuNDkgOTI2LjQ0NyA1MjMuNDI4IDg5OS45MzggNTQ5LjkzOEM4NzMuNDI4IDU3Ni40NDcgODM3LjQ5IDU5MS4zNjUgODAwIDU5MS40MjJWNTkxLjQyMloiIGZpbGw9IiMyNDczQkIiLz4KPC9zdmc+Cg=="));
  }
  async confirmCheckScan() {
    var _a, _b;
    try {
      this.loading = true;
      const payCheckEl = document.querySelector("floodteam-pay-check");
      const confirmation = await payCheckEl.confirmPayment();
      this.checkAmount = parseFloat((confirmation === null || confirmation === void 0 ? void 0 : confirmation.amount) || "0");
      this.loading = false;
      this.disableNext = false;
      this.disableSave = false;
      this.setPath();
      this.flowEl.slideNext();
    }
    catch (e) {
      this.loading = false;
      if ((_b = (_a = e === null || e === void 0 ? void 0 : e.message) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, "resubmit")) {
        setTimeout(() => {
          this.confirmCheckScan();
        }, 15000);
      }
      console.log(e);
    }
    setTimeout(() => {
      this.flowEl.updateAutoHeight();
    }, 1000);
  }
  async componentWillLoad() {
    if (!(index.Build === null || index.Build === void 0 ? void 0 : index.Build.isBrowser))
      return;
    await this.setPath();
  }
  render() {
    var _a;
    const unit = 1 / (this.steps.length - 1);
    const progress = unit * this.currentSlideIndex;
    const isLastSlide = this.currentSlideIndex === ((_a = this.steps) === null || _a === void 0 ? void 0 : _a.length) - 1;
    return (index.h(index.Host, { style: {
        display: "block",
        "max-width": "800px",
        margin: "0 auto",
      } }, index.h("ion-progress-bar", { style: {
        width: "80%",
        margin: isLastSlide ? "0 auto" : "30px auto",
        transition: "opacity ease 500ms",
        opacity: isLastSlide ? "0" : "1",
      }, value: progress }), index.h("fireenjin-flow", { ref: (el) => (this.flowEl = el), loading: this.loading, class: "expand", endpoint: "addPayment", steps: this.steps, cacheKey: "floodteam:addPayment", beforeSubmit: async (data) => ({
        ...data,
        jobId: this.jobId || null,
        token: this.token || null,
      }), prevButton: {
        color: "medium",
        fill: "outline",
        label: "Back",
        disabled: this.disablePrev,
      }, nextButton: {
        color: "primary",
        fill: "solid",
        icon: null,
        label: "Next",
        disabled: this.disableNext,
      }, saveButton: {
        color: "success",
        fill: "solid",
        icon: null,
        label: "Save",
        disabled: this.disableSave,
      } }, index.h("div", { class: "ion-padding" }, index.h("h1", { style: { color: "var(--ion-text-color)" } }, "Success!"), index.h("ion-icon", { name: "checkmark-circle", color: "success", style: {
        display: "block",
        margin: "3rem auto",
        height: "150px",
        width: "150px",
      } }), index.h("p", { style: { color: "var(--ion-text-color)" } }, "Payment complete! You should receive a receipt at ", this.email, " ", "with the details."), index.h("p", null, "Thanks for choosing The Flood Team. \uD83D\uDC99"), index.h("ion-button", { color: "primary", class: "enjin-align-center", size: "large", style: {
        margin: "2rem auto",
      }, onClick: () => {
        var _a, _b;
        return history.length
          ? (_a = history === null || history === void 0 ? void 0 : history.back) === null || _a === void 0 ? void 0 : _a.call(history)
          : (_b = location === null || location === void 0 ? void 0 : location.replace) === null || _b === void 0 ? void 0 : _b.call(location, location === null || location === void 0 ? void 0 : location.origin);
      } }, "OK")))));
  }
};

exports.floodteam_payment_flow = PaymentFlow;
