/* global React, useLang, I18N_lookup, TypedHeadline */ const { useMemo, useState, useCallback, useEffect, useRef } = React; // ============ Precios ============ // Hero, packs prearmados, calculadora del plan Basic, cómo funciona y bloque Enterprise. // Textos en pricing.* (pricing_messages.py → i18n-messages.js). Los precios viven acá como // números y se formatean con el locale del idioma activo. // Formulario POST multipart → window.FORSVAR_CONTACT_FORM_ENDPOINT (/api/contact, contact-config.js). // /api/contact sólo acepta nombre/email/asunto/msg: el resto del pedido viaja dentro de msg. const MIN_MONTHLY = 490; const CONTACT_EMAIL = "contacto@forsvar.io"; const LOCALES = { es: "es-UY", en: "en-US", pt: "pt-BR" }; // Módulos de Actividad digital y Transacciones (mismos precios por evento). const EVENT_GROUPS = (prod) => [ { g: "dev", items: [ { id: "sdk", p: 0.0100, def: true }, { id: "geo", p: 0.0045 }, { id: "graph", p: 0.0021 } ] }, { g: "risk", items: [ { id: "tree", p: 0.0100, def: true }, { id: "case", p: 0.0009 } ] }, { g: "ai", items: [{ id: "ml", p: 0.0050 }] }, { g: "rf", items: [{ id: "rf", p: 0.0010 }] }, { g: "anom", items: [{ id: "anom", p: 0.0045, key: "pricing.mod." + prod + ".anom" }] } ]; // Precios USD por unidad: Onboarding, columna "1 - 999" de la tabla de pricing; Actividad // digital y Transacciones, columna "10.000 - 49.999". const PRODUCTS = [ { key: "onb", dec: 2, max: 10000, step: 10, def: 900, modNs: "onb", free: 3, groups: [ { g: "idv", items: [ { id: "ocr", p: 0.30, def: true }, { id: "live", p: 0.20, def: true }, { id: "m11", p: 0.10, def: true }, { id: "m1n", p: 0.20 }, { id: "gov", p: 0.20 }, { id: "wl", p: 0.15 } ] }, { g: "scr", items: [ { id: "aml", p: 0.05 }, { id: "adv", p: 0.05 }, { id: "email", p: 0.10 } ] }, { g: "dev", items: [ { id: "sdk", p: 0.10 }, { id: "geo", p: 0.05 }, { id: "graph", p: 0.05 } ] }, { g: "risk", items: [ { id: "mx", p: 0.10 }, { id: "tree", p: 0.10 }, { id: "case", p: 0.02 } ] }, { g: "anom", items: [{ id: "anom", p: 0.10 }] } ] }, { key: "dig", dec: 4, max: 50000, step: 500, def: 5000, modNs: "ev", free: 3, chips: 2, groups: EVENT_GROUPS("dig") }, { key: "trx", dec: 4, max: 50000, step: 500, def: 10000, modNs: "ev", free: 4, chips: 3, groups: EVENT_GROUPS("trx") } ]; PRODUCTS.forEach((P) => { P.items = [].concat(...P.groups.map((g) => g.items)); P.items.forEach((it) => { if (!it.key) it.key = "pricing.mod." + P.modNs + "." + it.id; }); }); // Packs prearmados: configuran servicios y módulos; el volumen sale de la regla de abajo. const PACKS = { screening: { price: 0.05, unit: "onb", items: 4, mods: { onb: ["aml"] } }, kyc: { price: 0.60, unit: "onb", items: 3, mods: { onb: ["ocr", "live", "m11"] } }, compliance: { price: 0.70, unit: "onb", items: 3, mods: { onb: ["ocr", "live", "m11", "aml", "adv"] } }, onb_full: { price: 1.87, unit: "onb", items: 4, mods: { onb: "all" } }, dig_basic: { price: 0.021, unit: "dig", items: 4, mods: { dig: ["sdk", "tree", "case"] } }, fraude: { price: 0.015, unit: "trx", items: 2, mods: { trx: ["tree", "ml"] } }, trx_full: { price: 0.038, unit: "trx", items: 5, mods: { trx: "all" } }, custom: { items: 4, mods: { onb: ["ocr", "live", "m11"], dig: ["sdk", "tree"], trx: ["sdk", "tree"] } } }; const PACK_ORDER = ["screening", "kyc", "compliance", "onb_full", "dig_basic", "fraude", "trx_full", "custom"]; // Países del formulario (ISO 3166-1 alfa-2). El nombre lo pone Intl.DisplayNames en el idioma activo; // Latinoamérica primero porque es el mercado principal. const COUNTRIES_LATAM = ["AR", "BO", "BR", "CL", "CO", "CR", "CU", "DO", "EC", "GT", "HN", "MX", "NI", "PA", "PE", "PR", "PY", "SV", "UY", "VE"]; const COUNTRIES_REST = ("AD AE AF AG AI AL AM AO AQ AS AT AU AW AX AZ BA BB BD BE BF BG BH BI BJ BL BM BN BQ BS BT BV BW BY BZ " + "CA CC CD CF CG CH CI CK CM CN CV CW CX CY CZ DE DJ DK DM DZ EE EG EH ER ES ET FI FJ FK FM FO FR GA GB GD GE GF GG GH GI GL " + "GM GN GP GQ GR GS GU GW GY HK HM HR HT HU ID IE IL IM IN IO IQ IR IS IT JE JM JO JP KE KG KH KI KM KN KP KR KW KY KZ LA LB " + "LC LI LK LR LS LT LU LV LY MA MC MD ME MF MG MH MK ML MM MN MO MP MQ MR MS MT MU MV MW MY MZ NA NC NE NF NG NL NO NP NR NU " + "NZ OM PF PG PH PK PL PM PN PS PT PW QA RE RO RS RU RW SA SB SC SD SE SG SH SI SJ SK SL SM SN SO SR SS ST SX SY SZ TC TD TF " + "TG TH TJ TK TL TM TN TO TR TT TV TW TZ UA UG UM US UZ VA VC VG VI VN VU WF WS XK YE YT ZA ZM ZW").split(" "); function countryNamer(lang) { let dn = null; try { dn = new Intl.DisplayNames([LOCALES[lang] || LOCALES.es], { type: "region" }); } catch (_) { /* navegador sin DisplayNames */ } return (code) => { try { return (dn && dn.of(code)) || code; } catch (_) { return code; } }; } function countryOptions(lang) { const name = countryNamer(lang); const loc = LOCALES[lang] || LOCALES.es; const sorted = (codes) => codes.map((c) => ({ c, n: name(c) })).sort((x, y) => x.n.localeCompare(y.n, loc)); return { latam: sorted(COUNTRIES_LATAM), rest: sorted(COUNTRIES_REST) }; } // Rangos del formulario Enterprise (umbrales numéricos; el texto sale de i18n). const RANGES = { onb: [1000, 10000, 50000, 100000], dig: [10000, 50000, 200000, 1000000], trx: [50000, 200000, 500000, 1000000] }; function initialCalc() { const s = {}; PRODUCTS.forEach((P) => { s[P.key] = { on: true, mods: P.items.filter((it) => it.def).map((it) => it.id), v: P.def, text: String(P.def), over: false }; }); return s; } function unitPrice(P, mods) { const sum = P.items.filter((it) => mods.indexOf(it.id) > -1).reduce((a, it) => a + it.p, 0); return Math.round(sum * 100000) / 100000; } // Cálculo puro del pack: costo por servicio, total y ajuste al mínimo de la cuenta. function computePricing(calc) { let raw = 0; const res = {}; PRODUCTS.forEach((P) => { const c = calc[P.key]; const u = unitPrice(P, c.mods); const active = c.on && u > 0; const cost = active ? u * c.v : 0; res[P.key] = { on: c.on, active, u, v: c.v, cost }; raw += cost; }); const actives = PRODUCTS.filter((P) => res[P.key].active); return { res, raw, total: Math.max(MIN_MONTHLY, raw), actives: actives.length, // Ajuste al mínimo en dólares enteros: con 489,97 no se muestra un "+ USD 0". adj: Math.round(Math.max(0, MIN_MONTHLY - raw)), below: actives.filter((P) => res[P.key].cost < MIN_MONTHLY).length }; } // Volumen sugerido de un pack de un solo servicio: lo que entra en los USD 490 del plan Basic. function suggestedVolume(P, mods) { const u = unitPrice(P, mods); return u > 0 ? Math.min(P.max, Math.max(1, Math.floor(MIN_MONTHLY / u + 1e-9))) : P.def; } // "**negrita**" → . Evita meter HTML en los mensajes. function rich(text) { return String(text).split("**").map((part, i) => (i % 2 ? {part} : part)); } function fill(text, vars) { return String(text).replace(/\{(\w+)\}/g, (m, k) => (k in vars ? vars[k] : m)); } function useFormat(lang) { return useMemo(() => { const loc = LOCALES[lang] || LOCALES.es; const int = (n) => Math.round(n).toLocaleString(loc); return { int, usd0: (n) => "USD " + int(n), usdU: (n, dec) => "USD " + n.toLocaleString(loc, { minimumFractionDigits: dec, maximumFractionDigits: dec }), usdP: (n) => "USD " + n.toLocaleString(loc, { minimumFractionDigits: 2, maximumFractionDigits: 4 }) }; }, [lang]); } // Monto que se anima entre valores (respeta prefers-reduced-motion). function Amount({ value, format }) { const [shown, setShown] = useState(value); const from = useRef(value); useEffect(() => { const start = from.current; from.current = value; if (start === value || window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setShown(value); return; } const t0 = performance.now(); let raf; const step = (t) => { const k = Math.min(1, (t - t0) / 380); setShown(start + (value - start) * (1 - Math.pow(1 - k, 3))); if (k < 1) raf = requestAnimationFrame(step); }; raf = requestAnimationFrame(step); return () => cancelAnimationFrame(raf); }, [value]); return <>{format(shown)}; } // Checkbox con estado "parcial" (seleccionar todo de un grupo o de un servicio). function TriCheck({ checked, indeterminate, onChange, ariaLabel }) { const ref = useRef(null); useEffect(() => { if (ref.current) ref.current.indeterminate = indeterminate; }, [indeterminate]); return ; } const Check = ({ stroke = "currentColor", w = 2.2 }) => ( ); const BoxCheck = () => ; const Info = () => ( ); const ICONS = { onb: , dig: , trx: }; const FACT_ICONS = [ , , , ]; // --- Hero --- function PricingHero({ fmt }) { const { t, lang } = useLang(); const facts = [fmt.usdP(0.70), fmt.usdP(0.01), fmt.usd0(MIN_MONTHLY), fmt.usd0(0)]; const segments = useMemo(() => [ { type: "text", value: t("pricing.hero.h1a") + " " + t("pricing.hero.h1b") }, { type: "underline", value: t("pricing.hero.h1hl") }, { type: "text", value: t("pricing.hero.h1c") } ], [lang, t]); return (
{t("pricing.hero.kicker")}

{t("pricing.hero.lead")}

{facts.map((num, i) =>
{FACT_ICONS[i]}
{t("pricing.hero.f" + i + ".pre")}
{num}
{t("pricing.hero.f" + i + ".lbl")}
)}
); } // --- Packs prearmados --- function PricingPacks({ fmt, onPack, onEnterprise }) { const { t } = useLang(); const per = { onb: "pricing.prod.onb.unit", dig: "pricing.prod.dig.unit", trx: "pricing.prod.trx.unit" }; const li = (id, n) => Array.from({ length: n }, (_, i) =>
  • {t("pricing.pack." + id + ".i" + i)}
    • ); return (
    {t("pricing.packs.kicker")}

    {t("pricing.packs.title")}

    {PACK_ORDER.map((id) => { const pk = PACKS[id]; return ( onPack(id)}> {t("pricing.pack." + id + ".k")} {t("pricing.pack." + id + ".n")} {id === "custom" ? {t("pricing.packs.from")}{fmt.usd0(MIN_MONTHLY)}{t("pricing.packs.min_month")} : {fmt.usdP(pk.price)} / {t(per[pk.unit])}}
      {li(id, pk.items)}
    {t("pricing.packs.cta")}     ); })} {t("pricing.pack.enterprise.k")} {t("pricing.pack.enterprise.n")} {t("pricing.packs.custom_price")}
      {li("enterprise", 4)}
    {t("pricing.packs.cta_ent")}
    ); } // --- Card de un servicio de la calculadora --- function ServiceCard({ P, c, r, fmt, setCalc }) { const { t } = useLang(); const [open, setOpen] = useState(false); const title = t("pricing.prod." + P.key + ".title"); const units = t("pricing.prod." + P.key + ".units"); const update = (patch) => setCalc((s) => ({ ...s, [P.key]: { ...s[P.key], ...patch } })); const setMods = (ids, checked) => setCalc((s) => { const cur = s[P.key].mods.filter((id) => ids.indexOf(id) < 0); return { ...s, [P.key]: { ...s[P.key], mods: checked ? cur.concat(ids) : cur } }; }); const setVolume = (v, text, over) => update({ v, text: text == null ? String(v) : text, over: !!over }); const onNumber = (e) => { const text = e.target.value; const n = parseInt(text, 10); if (isNaN(n)) { update({ text }); return; } setVolume(Math.min(P.max, Math.max(1, n)), text, n > P.max); }; const onNumberBlur = () => setVolume(c.v, null, false); const allIds = P.items.map((it) => it.id); const nSel = c.mods.length; const scale = [0, 0.25, 0.5, 0.75, 1].map((k) => fmt.int(k === 0 ? 1 : P.max * k)); const pct = (c.v / P.max) * 100; const showMin = r.active && r.cost < MIN_MONTHLY; const showCap = c.on && (c.v >= P.max || c.over); return (
    {ICONS[P.key]}
    {t("pricing.prod." + P.key + ".kicker")}

    {title}

    {t("pricing.prod." + P.key + ".desc")}

    {P.chips ?
    {Array.from({ length: P.chips }, (_, i) => {t("pricing.prod." + P.key + ".chip" + i)})}
    : null}
    {t("pricing.prod." + P.key + ".unit_label")} {fmt.usdU(c.on ? r.u : 0, P.dec)} {t("pricing.card.unit_sub")}
    {t("pricing.card.month")} {t("pricing.card.per_month")} {fill(t("pricing.card.for_vol"), { n: fmt.int(c.v), units: c.v === 1 ? t("pricing.prod." + P.key + ".unit") : units })}
    {showMin ?
    {rich(t("pricing.card.min_note"))}
    : null}
    setVolume(Math.max(1, +e.target.value))} />
    {scale.map((s, i) => {s})}
    {showCap ?
    {rich(fill(t("pricing.card.cap"), { n: fmt.int(P.max), units }))} {t("pricing.card.cap_link")} →
    : null}
    {P.groups.map((g) => { const ids = g.items.map((it) => it.id); const n = ids.filter((id) => c.mods.indexOf(id) > -1).length; const gName = t("pricing.grp." + g.g); return (

    {gName} {ids.length > 1 ? : null}

    {g.items.map((it) => { const uid = P.key + "-" + it.id; return ( ); })}
    ); })}

    {t("pricing.prod." + P.key + ".free.t")}

      {Array.from({ length: P.free }, (_, i) =>
    • {t("pricing.prod." + P.key + ".free.i" + i)}
      • )}
    ); } // --- Resumen del pack --- function PricingSummary({ pricing, fmt, onWant, summaryRef }) { const { t } = useLang(); const { res, raw, total, actives, below } = pricing; const maxCost = Math.max(1, ...PRODUCTS.map((P) => res[P.key].cost)); let flag = null; if (raw < MIN_MONTHLY) flag = t(actives > 1 ? "pricing.sum.flag_multi" : "pricing.sum.flag_single"); else if (below) flag = t("pricing.sum.flag_below"); return ( ); } // --- Cómo funciona --- function PricingHow() { const { t } = useLang(); return (
    {t("pricing.how.kicker")}

    {t("pricing.how.title")}

    {t("pricing.how.lead")}

    {[0, 1, 2, 3].map((i) =>
    {"0" + (i + 1)}

    {t("pricing.how.s" + i + ".t")}

    {t("pricing.how.s" + i + ".p")}

    )}
    ); } // --- Enterprise + formulario Basic / Enterprise --- function PricingEnterprise({ pricing, fmt, plan, setPlan, prefill, onEnterprise, loadedPack }) { const { t, lang } = useLang(); const [sent, setSent] = useState(""); const [submitting, setSubmitting] = useState(false); const [submitError, setSubmitError] = useState(""); const basic = plan === "basic"; const msgRef = useRef(null); const countries = useMemo(() => countryOptions(lang), [lang]); // "Solicitar cotización" / "Hablar con ventas" precargan el mensaje si está vacío. useEffect(() => { if (prefill && msgRef.current && !msgRef.current.value) msgRef.current.value = t("pricing.form.ent_prefill"); }, [prefill]); const setFieldMessage = useCallback((ev) => { const el = ev.target; if (el.validity.valueMissing) el.setCustomValidity(t("pricing.form.val_missing")); else if (el.type === "email" && el.validity.typeMismatch) el.setCustomValidity(t("pricing.form.val_email")); else el.setCustomValidity(""); }, [t]); const clearFieldMessage = useCallback((ev) => { ev.target.setCustomValidity(""); }, []); const rangeOptions = (key) => { const th = RANGES[key]; const opts = [t("pricing.form.na"), fill(t("pricing.form.upto"), { n: fmt.int(th[0]) })]; for (let i = 1; i < th.length; i++) opts.push(fmt.int(th[i - 1]) + " – " + fmt.int(th[i])); opts.push(fill(t("pricing.form.more"), { n: fmt.int(th[th.length - 1]) })); return opts; }; // El mensaje a ventas va siempre en español, con el pack de la calculadora (no se muestra en el formulario). const buildMessage = (d) => { const es = (k) => I18N_lookup("es", k); const esFmt = (n, dec) => "USD " + n.toLocaleString(LOCALES.es, { minimumFractionDigits: dec, maximumFractionDigits: dec }); const esInt = (n) => Math.round(n).toLocaleString(LOCALES.es); const pack = (loadedPack ? "Pack de partida: " + es("pricing.pack." + loadedPack + ".n") + "\n" : "") + PRODUCTS.map((P) => { const r = pricing.res[P.key]; if (!r.active) return es("pricing.prod." + P.key + ".title") + ": no incluido"; const mods = P.items.filter((it) => pricing.mods[P.key].indexOf(it.id) > -1) .map((it) => " - " + es(it.key) + " (" + esFmt(it.p, P.dec) + ")").join("\n"); return es("pricing.prod." + P.key + ".title") + ": " + esInt(r.v) + " " + es("pricing.prod." + P.key + ".units") + " × " + esFmt(r.u, P.dec) + " = USD " + esInt(r.cost) + "\n" + mods; }).join("\n") + (pricing.adj > 0 ? "\nAjuste al mínimo mensual: + USD " + esInt(pricing.adj) : "") + "\nTotal estimado: USD " + esInt(pricing.total) + "/mes"; return "Plan: " + (basic ? "Basic" : "Enterprise") + "\nEmpresa: " + d.get("empresa") + "\nPaís: " + (d.get("pais") ? countryNamer("es")(d.get("pais")) : "-") + "\nIdioma de la página: " + lang + (basic ? "" : "\nOnboardings/mes: " + d.get("onboardings") + "\nActividad digital/mes: " + d.get("actividad_digital") + "\nTransacciones/mes: " + d.get("transacciones")) + "\n\nMensaje:\n" + (d.get("mensaje") || "(sin mensaje)") + "\n\n--- Pack armado en la calculadora ---\n" + pack; }; const onSubmit = async (e) => { e.preventDefault(); setSubmitError(""); const form = e.currentTarget; const d = new FormData(form); const body = new FormData(); body.append("nombre", d.get("nombre")); body.append("email", d.get("email")); body.append("asunto", "Precios · " + (basic ? "Plan Basic" : "Enterprise") + " · " + d.get("empresa")); body.append("msg", buildMessage(d)); const url = window.FORSVAR_CONTACT_FORM_ENDPOINT || "/api/contact"; setSubmitting(true); try { const res = await fetch(url, { method: "POST", headers: { Accept: "application/json" }, body }); let data = null; try { data = await res.json(); } catch (_) { /* ignore */ } if (!res.ok || !data || !data.ok) throw new Error(data && data.message ? String(data.message) : ""); setSent(String(d.get("email"))); form.reset(); } catch (err) { const reason = err && err.message ? err.message : t("pricing.form.err_net"); setSubmitError(fill(t("pricing.form.err"), { reason })); } finally { setSubmitting(false); } }; return (
    {t("pricing.ent.badge")}
    {t("pricing.ent.price")}

    {t("pricing.ent.sub_a")}{t("pricing.ent.sub_b")}

      {[0, 1, 2, 3, 4, 5].map((i) =>
    • {t("pricing.ent.i" + i)}
      • )}
    {t("pricing.ent.cta")}
    setPlan("basic")} /> setPlan("enterprise")} />

    {t(basic ? "pricing.form.title_basic" : "pricing.form.title_ent")}

    {t(basic ? "pricing.form.sub_basic" : "pricing.form.sub_ent")}

    {basic ?
    {t("pricing.form.pack_k")} {loadedPack ? {fill(t("pricing.form.pack_from"), { name: t("pricing.pack." + loadedPack + ".n") })} : null}
      {PRODUCTS.map((P) => { const r = pricing.res[P.key]; const mods = P.items.filter((it) => pricing.mods[P.key].indexOf(it.id) > -1); return (
    • {t("pricing.prod." + P.key + ".title")}{r.active ? " · " + fmt.int(r.v) + " " + t("pricing.prod." + P.key + ".units") : ""} {r.active ? fmt.usd0(r.cost) : t("pricing.form.pack_off")}
      {r.active ?
      {mods.length === 1 ? t("pricing.form.mods1") : fill(t("pricing.form.mods"), { n: mods.length })}
        {mods.map((it) =>
      • {t(it.key)}
        • )}
      : null}
      • ); })} {pricing.adj > 0 ?
    • {t("pricing.sum.adj")}+ {fmt.usd0(pricing.adj)}
      • : null}
    {t("pricing.form.pack_total")}{fmt.usd0(pricing.total)}{t("pricing.card.per_month")}
    {t("pricing.form.pack_edit")}
    : null} {submitError ?

    {submitError}

    : null}
    {basic ? null : <>
    }