geoiq-frontend-ui-kit/dist/index2.es.js

This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.

import t, { useState as h, useEffect as C } from "react";
import { _Dialog as R } from "./index41.es.js";
import { Typography as f } from "./index19.es.js";
import { Button as p } from "./index9.es.js";
import { Input as w } from "./index11.es.js";
const j = ["5", "10", "20", "50", ">50"], T = ({
  open: o,
  onClose: _,
  onRequestCredits: g,
  onProceedToPayment: E,
  dialogClassName: k,
  buyCreditsOptions: N = j,
  minimumCreditsToBuy: v = 5,
  requestOnly: D = !1
}) => {
  const [a, l] = h(""), [r, c] = h(""), [m, i] = h(""), x = N.filter((e) => !e.startsWith(">")).map((e) => Number(e)), O = x.length ? Math.max(...x) : 50, b = a.startsWith(">") || Number(a) > O, s = D || b, u = a && !s && Number(a) < v ? `Minimum number of credits is ${v}` : "";
  C(() => {
    if (s) {
      const e = P(r);
      i(e);
    } else
      i("");
  }, [r, s]);
  const P = (e) => {
    if (!e) return "";
    const n = e.startsWith("+91") ? e.substring(3) : e;
    return /^[6-9]\d{9}$/.test(n) ? "" : "Number should start with 6-9 and be 10 digits";
  }, W = (e) => {
    const n = e.target.value.replace(/\D/g, "");
    c(n);
  }, q = (e) => {
    const n = e.target.value.replace(/\D/g, "");
    l(n);
  }, S = () => {
    const e = a.startsWith(">") ? a.replace(">", "") + "+" : a;
    s ? g(e, r) : E ? E(e, r) : g(e, r), d();
  }, d = () => {
    _(), setTimeout(() => {
      c(""), i(""), l("");
    }, 100);
  };
  C(() => {
    o || setTimeout(() => {
      c(""), i(""), l("");
    }, 100);
  }, [o]);
  const $ = s ? `Request ${a}` : `Proceed to Payment ${a} `, M = !a || Number(a) <= 0 || !!u || s && (!!m || !r), y = (e) => e.startsWith(">") ? b : e === a;
  return /* @__PURE__ */ t.createElement(
    R,
    {
      open: o,
      onOpenChange: d,
      onOpenAutoFocus: (e) => e.preventDefault(),
      trigger: null,
      contentClassName: "w-min",
      body: /* @__PURE__ */ t.createElement("div", { className: "w-72 md:w-[570px] flex items-center " }, /* @__PURE__ */ t.createElement("div", { className: "items-center justify-center" }, /* @__PURE__ */ t.createElement(
        "img",
        {
          src: "https://frontend-static-files.geoiq.io/strapi/Group_427319313_e054593ef1/Group_427319313_e054593ef1.svg",
          alt: "lock",
          className: k
        }
      )), /* @__PURE__ */ t.createElement("div", { className: "px-4 py-2 w-72 md:w-[400px]" }, /* @__PURE__ */ t.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ t.createElement(f, { variant: "h3", className: "text-light-2" }, "How many credits do you need?"), /* @__PURE__ */ t.createElement(f, { variant: "body4", className: "text-light-4" }, /* @__PURE__ */ t.createElement("span", { className: "underline" }, "Note:"), " One credit is needed to unlock a site report.", " ", s ? " Please provide your phone number to make a request" : "")), /* @__PURE__ */ t.createElement("div", { className: "mt-3" }, /* @__PURE__ */ t.createElement(
        w,
        {
          id: "creditValue",
          type: "text",
          value: a.startsWith(">") ? "" : a,
          onChange: q,
          className: "h-10",
          placeholder: "Enter number of credits",
          maxLength: 6,
          isError: !!u,
          message: u
        }
      )), /* @__PURE__ */ t.createElement("div", { className: "flex flex-row gap-2 mt-3" }, N.map((e) => /* @__PURE__ */ t.createElement(
        p,
        {
          variant: y(e) ? "primary" : "secondary",
          key: e,
          className: y(e) ? "w-10" : "w-10 bg-light-2",
          size: "sm",
          onClick: () => l(e)
        },
        e
      ))), s && /* @__PURE__ */ t.createElement("div", { className: "flex flex-col mt-4" }, /* @__PURE__ */ t.createElement(f, { className: "mb-1 text-sm font-medium text-light-2" }, "Phone Number *"), /* @__PURE__ */ t.createElement(
        w,
        {
          id: "phoneNumber",
          type: "text",
          value: r,
          onChange: W,
          className: "h-10",
          placeholder: "Enter phone number",
          maxLength: 10,
          isError: !!m,
          message: m
        }
      )))),
      footer: /* @__PURE__ */ t.createElement("div", { className: "flex w-full gap-2 justify-evenly" }, /* @__PURE__ */ t.createElement(p, { variant: "secondary", onClick: d, title: "Cancel" }), /* @__PURE__ */ t.createElement(
        p,
        {
          variant: "primary",
          suffixIcon: /* @__PURE__ */ t.createElement(
            "img",
            {
              src: "https://frontend-static-files.geoiq.io/strapi/navbar_credits_247858e26a.svg",
              width: 16,
              height: 16,
              alt: "coin icon",
              className: "ml-1 mr-2 md:mr-0"
            }
          ),
          title: $,
          onClick: S,
          disabled: M
        }
      ))
    }
  );
};
export {
  T as RequestCreditsDialog
};
//# sourceMappingURL=index2.es.js.map