import { b as $, ah as z, p as E, aE as Y, aF as I, j as e, z as L, B as j, aG as F, a5 as b, N as O, aw as G, u as H, a as K, az as Z, aH as J, an as U, h as V, aI as W, Y as q, e as Q, M as X, n as ee, s as se, T as f, K as ae, aJ as le, aK as B, i as te, aL as M } from "./index-c65ca4a4.mjs";
import { F as D } from "./Form-f4ced0f0.mjs";
import { u as re, S as ne } from "./useSortableIndexedList-064b5b13.mjs";
const ce = ({ trialDays: s }) => s ? /* @__PURE__ */ e.jsxs("span", { className: "relative -mr-1 -mt-1 whitespace-nowrap rounded-full px-2.5 py-1.5 text-sm font-semibold leading-none tracking-wide text-grey-900", children: [
  /* @__PURE__ */ e.jsx("span", { className: "absolute inset-0 block rounded-full bg-pink opacity-20" }),
  s,
  " days free"
] }) : null, ie = ({ benefits: s }) => s != null && s.length ? /* @__PURE__ */ e.jsx(e.Fragment, { children: s.map((r) => /* @__PURE__ */ e.jsx("div", { className: "mt-4 w-full text-md leading-snug text-grey-900", children: /* @__PURE__ */ e.jsxs("div", { className: "mb-2.5 flex items-start", children: [
  /* @__PURE__ */ e.jsx(b, { className: "mr-[10px] mt-[3px] !h-3.5 !w-3.5 min-w-[14px] overflow-visible !stroke-[3px]", name: "check" }),
  /* @__PURE__ */ e.jsx("div", { children: r })
] }) }, r)) }) : /* @__PURE__ */ e.jsx("div", { className: "mt-4 w-full text-md leading-snug text-grey-900 opacity-30", children: /* @__PURE__ */ e.jsxs("div", { className: "mb-2.5 flex items-start", children: [
  /* @__PURE__ */ e.jsx(b, { className: "mr-[10px] mt-[3px] !h-3.5 !w-3.5 min-w-[14px] overflow-visible !stroke-[3px]", name: "check" }),
  /* @__PURE__ */ e.jsx("div", { children: "Expert analysis" })
] }) }), oe = ({ discount: s }) => s ? /* @__PURE__ */ e.jsxs("span", { className: "mt-1 text-sm font-semibold leading-none text-pink", children: [
  s,
  "% discount"
] }) : null, de = ({ tier: s, isFreeTier: r }) => {
  const [n, d] = $(!1), { localSettings: w } = z(), N = E(w, ["title"]), h = (s == null ? void 0 : s.name) || "", y = (s == null ? void 0 : s.description) || "", _ = parseFloat((s == null ? void 0 : s.trial_days) || "0"), g = (s == null ? void 0 : s.currency) || "USD", i = g ? Y(g) : "$", k = (s == null ? void 0 : s.benefits) || [], o = I((s == null ? void 0 : s.monthly_price) || 0), t = I((s == null ? void 0 : s.yearly_price) || 0), v = s != null && s.monthly_price && (s != null && s.yearly_price) ? Math.ceil((o * 12 - t) / (o * 12) * 100) : 0;
  return /* @__PURE__ */ e.jsxs("div", { className: "mt-1", children: [
    /* @__PURE__ */ e.jsxs("div", { className: "flex items-baseline justify-between", children: [
      /* @__PURE__ */ e.jsx(L, { className: "pb-2", level: 6, grey: !0, children: r ? "Free membership preview" : "Tier preview" }),
      !r && /* @__PURE__ */ e.jsxs("div", { className: "flex gap-1", children: [
        /* @__PURE__ */ e.jsx(j, { className: `${n === !0 ? "text-grey-500" : "text-grey-900"}`, label: "Monthly", link: !0, onClick: () => d(!1) }),
        /* @__PURE__ */ e.jsx(j, { className: `ml-2 ${n === !0 ? "text-grey-900" : "text-grey-500"}`, label: "Yearly", link: !0, onClick: () => d(!0) })
      ] })
    ] }),
    /* @__PURE__ */ e.jsx("div", { className: "border border-grey-200", children: /* @__PURE__ */ e.jsxs("div", { className: "flex-column relative flex min-h-[200px] w-full max-w-[420px] scale-90 items-start justify-stretch rounded bg-white p-4", children: [
      /* @__PURE__ */ e.jsxs("div", { className: "min-h-[56px] w-full", children: [
        /* @__PURE__ */ e.jsx("h4", { className: `-mt-1 mb-0 w-full break-words text-lg font-semibold leading-tight text-pink ${!h && "opacity-30"}`, children: h || "Bronze" }),
        /* @__PURE__ */ e.jsxs("div", { className: "mt-4 flex w-full flex-row flex-wrap items-end justify-between gap-x-1 gap-y-[10px]", children: [
          /* @__PURE__ */ e.jsxs("div", { className: `flex flex-wrap text-black ${!t && !o && !r && "opacity-30"}`, children: [
            /* @__PURE__ */ e.jsx("span", { className: "self-start text-[2.7rem] font-bold uppercase leading-[1.115]", children: i }),
            /* @__PURE__ */ e.jsx("span", { className: "break-all text-[3.4rem] font-bold leading-none tracking-tight", children: n ? F(t) : F(o) }),
            !r && /* @__PURE__ */ e.jsxs("span", { className: "ml-1 self-end text-[1.5rem] leading-snug text-grey-800", children: [
              "/",
              n ? "year" : "month"
            ] })
          ] }),
          /* @__PURE__ */ e.jsx(ce, { trialDays: _ })
        ] }),
        n && v > 0 && /* @__PURE__ */ e.jsx(oe, { discount: v })
      ] }),
      /* @__PURE__ */ e.jsx("div", { className: "flex-column flex w-full flex-1", children: /* @__PURE__ */ e.jsxs("div", { className: "flex-1", children: [
        /* @__PURE__ */ e.jsx("div", { className: `mt-4 w-full text-[1.55rem] font-semibold leading-snug text-grey-900 ${!y && "opacity-30"}`, children: y || (r ? `Free preview of ${N}` : "Full access to premium content") }),
        /* @__PURE__ */ e.jsx(ie, { benefits: k })
      ] }) })
    ] }) })
  ] });
}, me = ({ tier: s }) => {
  var S;
  const r = (s == null ? void 0 : s.type) === "free", n = H(), { updateRoute: d } = K(), { mutateAsync: w } = Z(), { mutateAsync: N } = J(), [h, y] = U.useState(!!(s != null && s.trial_days)), { localSettings: _ } = z(), g = E(_, ["title"]), [i, k] = $({}), o = (a, l) => (k((p) => ({ ...p, [a]: l })), l), { formState: t, saveState: v, updateForm: c, handleSave: A } = V({
    initialState: {
      ...s || {},
      trial_days: ((S = s == null ? void 0 : s.trial_days) == null ? void 0 : S.toString()) || "",
      currency: (s == null ? void 0 : s.currency) || W[0].isoCode
    },
    onSave: async () => {
      var T;
      const { trial_days: a, currency: l, ...p } = t, x = p;
      x.benefits = (T = x.benefits) == null ? void 0 : T.filter((R) => R), r || (x.currency = l, x.trial_days = parseInt(a)), s != null && s.id ? await w({ ...s, ...x }) : await N(x), n.remove();
    }
  }), u = {
    name: () => o("name", t.name ? void 0 : "You must specify a name"),
    monthly_price: () => t.type !== "free" && o("monthly_price", M(t.monthly_price || 0, t.currency, { allowZero: !1 })),
    yearly_price: () => t.type !== "free" && o("yearly_price", M(t.yearly_price || 0, t.currency, { allowZero: !1 }))
  }, m = re({
    items: t.benefits || [],
    setItems: (a) => c((l) => ({ ...l, benefits: a })),
    blank: "",
    canAddNewItem: (a) => !!a
  }), P = (a) => {
    a.target.checked ? (y(!0), c((l) => ({ ...l, trial_days: s != null && s.trial_days ? s == null ? void 0 : s.trial_days.toString() : "7" }))) : (y(!1), c((l) => ({ ...l, trial_days: "0" })));
  }, C = q(!1);
  return Q(() => {
    C.current && (u.monthly_price(), u.yearly_price()), C.current = !0;
  }, [t.currency]), /* @__PURE__ */ e.jsx(
    X,
    {
      afterClose: () => {
        d("tiers");
      },
      dirty: v === "unsaved",
      okLabel: "Save & close",
      size: "lg",
      testId: "tier-detail-modal",
      title: "Tier",
      stickyFooter: !0,
      onOk: async () => {
        if (ee.remove(), Object.values(u).filter((a) => a()).length) {
          se({
            type: "pageError",
            message: "Can't save tier! One or more fields have errors, please doublecheck you filled all mandatory fields"
          });
          return;
        }
        await A() && d("tiers");
      },
      children: /* @__PURE__ */ e.jsxs("div", { className: "-mb-8 mt-8 flex items-start gap-8", children: [
        /* @__PURE__ */ e.jsxs("div", { className: "flex grow flex-col gap-8", children: [
          /* @__PURE__ */ e.jsxs(D, { marginBottom: !1, title: "Basic", grouped: !0, children: [
            !r && /* @__PURE__ */ e.jsx(
              f,
              {
                autoComplete: "off",
                error: !!i.name,
                hint: i.name,
                placeholder: "Bronze",
                title: "Name",
                value: t.name || "",
                onBlur: () => u.name(),
                onChange: (a) => c((l) => ({ ...l, name: a.target.value }))
              }
            ),
            /* @__PURE__ */ e.jsx(
              f,
              {
                autoComplete: "off",
                placeholder: r ? `Free preview of ${g}` : "Full access to premium content",
                title: "Description",
                value: t.description || "",
                onChange: (a) => c((l) => ({ ...l, description: a.target.value }))
              }
            ),
            !r && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-10 md:flex-row", children: [
              /* @__PURE__ */ e.jsxs("div", { className: "basis-1/2", children: [
                /* @__PURE__ */ e.jsxs("div", { className: "mb-1 flex h-6 items-center justify-between", children: [
                  /* @__PURE__ */ e.jsx(L, { level: 6, children: "Prices" }),
                  /* @__PURE__ */ e.jsx("div", { className: "w-10", children: /* @__PURE__ */ e.jsx(
                    ae,
                    {
                      border: !1,
                      options: le(),
                      selectClassName: "font-medium",
                      selectedOption: t.currency,
                      size: "xs",
                      onSelect: (a) => c((l) => ({ ...l, currency: a }))
                    }
                  ) })
                ] }),
                /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
                  /* @__PURE__ */ e.jsx(
                    B,
                    {
                      error: !!i.monthly_price,
                      hint: i.monthly_price,
                      placeholder: "1",
                      rightPlaceholder: `${t.currency}/month`,
                      title: "Monthly price",
                      valueInCents: t.monthly_price || 0,
                      hideTitle: !0,
                      onBlur: () => u.monthly_price(),
                      onChange: (a) => c((l) => ({ ...l, monthly_price: a }))
                    }
                  ),
                  /* @__PURE__ */ e.jsx(
                    B,
                    {
                      error: !!i.yearly_price,
                      hint: i.yearly_price,
                      placeholder: "10",
                      rightPlaceholder: `${t.currency}/year`,
                      title: "Yearly price",
                      valueInCents: t.yearly_price || 0,
                      hideTitle: !0,
                      onBlur: () => u.yearly_price(),
                      onChange: (a) => c((l) => ({ ...l, yearly_price: a }))
                    }
                  )
                ] })
              ] }),
              /* @__PURE__ */ e.jsxs("div", { className: "basis-1/2", children: [
                /* @__PURE__ */ e.jsx("div", { className: "mb-1 flex h-6 flex-col justify-center", children: /* @__PURE__ */ e.jsx(te, { checked: h, label: "Add a free trial", labelStyle: "heading", onChange: P }) }),
                /* @__PURE__ */ e.jsx(
                  f,
                  {
                    disabled: !h,
                    hint: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
                      "Members will be subscribed at full price once the trial ends. ",
                      /* @__PURE__ */ e.jsx("a", { href: "https://ghost.org/", rel: "noreferrer", target: "_blank", children: "Learn more" })
                    ] }),
                    placeholder: "0",
                    rightPlaceholder: "days",
                    title: "Trial days",
                    value: t.trial_days,
                    hideTitle: !0,
                    onChange: (a) => c((l) => ({ ...l, trial_days: a.target.value.replace(/[^\d]/, "") }))
                  }
                )
              ] })
            ] })
          ] }),
          /* @__PURE__ */ e.jsxs(D, { gap: "none", title: "Benefits", grouped: !0, children: [
            /* @__PURE__ */ e.jsx("div", { className: "-mt-3", children: /* @__PURE__ */ e.jsx(
              ne,
              {
                items: m.items,
                itemSeparator: !1,
                renderItem: ({ id: a, item: l }) => /* @__PURE__ */ e.jsxs("div", { className: "relative flex w-full items-center gap-5", children: [
                  /* @__PURE__ */ e.jsx("div", { className: "absolute left-[-32px] top-[7px] flex h-6 w-6 items-center justify-center bg-white group-hover:hidden", children: /* @__PURE__ */ e.jsx(b, { name: "check", size: "sm" }) }),
                  /* @__PURE__ */ e.jsx(
                    f,
                    {
                      className: "grow border-b border-grey-500 py-2 focus:border-grey-800 group-hover:border-grey-600",
                      value: l,
                      unstyled: !0,
                      onChange: (p) => m.updateItem(a, p.target.value)
                    }
                  ),
                  /* @__PURE__ */ e.jsx(j, { className: "absolute right-0 top-1", icon: "trash", iconColorClass: "opacity-0 group-hover:opacity-100", size: "sm", onClick: () => m.removeItem(a) })
                ] }),
                onMove: m.moveItem
              }
            ) }),
            /* @__PURE__ */ e.jsxs("div", { className: "relative mt-0.5 flex items-center gap-3", children: [
              /* @__PURE__ */ e.jsx(b, { name: "check", size: "sm" }),
              /* @__PURE__ */ e.jsx(
                f,
                {
                  className: "grow",
                  containerClassName: "w-100",
                  placeholder: "Expert analysis",
                  title: "New benefit",
                  value: m.newItem,
                  hideTitle: !0,
                  onChange: (a) => m.setNewItem(a.target.value)
                }
              ),
              /* @__PURE__ */ e.jsx(
                j,
                {
                  className: "absolute right-0 top-1",
                  color: "green",
                  icon: "add",
                  iconColorClass: "text-white",
                  label: "Add",
                  size: "sm",
                  hideLabel: !0,
                  onClick: () => m.addItem()
                }
              )
            ] })
          ] })
        ] }),
        /* @__PURE__ */ e.jsx("div", { className: "sticky top-[94px] hidden shrink-0 basis-[380px] min-[920px]:!visible min-[920px]:!block", children: /* @__PURE__ */ e.jsx(de, { isFreeTier: r, tier: t }) })
      ] })
    }
  );
}, ue = ({ params: s }) => {
  const { data: { tiers: r } = {} } = G();
  let n;
  if (!(s != null && s.id && (n = r == null ? void 0 : r.find(({ id: d }) => d === (s == null ? void 0 : s.id)), !n)))
    return /* @__PURE__ */ e.jsx(me, { tier: n });
}, pe = O.create(ue);
export {
  pe as default
};
//# sourceMappingURL=TierDetailModal-79587d04.mjs.map
