geoiq-frontend-ui-kit
Version:
This project is a UI kit for GeoIQ's frontend. It's built with React, TypeScript, and Vite.
125 lines (124 loc) • 4.89 kB
JavaScript
import t, { useState as h, useEffect as y } from "react";
import { _Dialog as $ } from "./index.es40.js";
import { Typography as p } from "./index.es19.js";
import { Button as f } from "./index.es9.js";
import { Input as C } from "./index.es11.js";
const R = ["5", "10", "20", "50", ">50"], L = ({
open: o,
onClose: w,
onRequestCredits: g,
onProceedToPayment: E,
dialogClassName: _,
buyCreditsOptions: N = R,
minimumCreditsToBuy: v = 5
}) => {
const [a, l] = h(""), [s, c] = h(""), [m, i] = h(""), b = N.filter((e) => !e.startsWith(">")).map((e) => Number(e)), k = b.length ? Math.max(...b) : 50, r = a.startsWith(">") || Number(a) > k, u = a && !r && Number(a) < v ? `Minimum number of credits is ${v}` : "";
y(() => {
if (r) {
const e = D(s);
i(e);
} else
i("");
}, [s, r]);
const D = (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";
}, O = (e) => {
const n = e.target.value.replace(/\D/g, "");
c(n);
}, P = (e) => {
const n = e.target.value.replace(/\D/g, "");
l(n);
}, W = () => {
const e = a.startsWith(">") ? a.replace(">", "") + "+" : a;
r ? g(e, s) : E ? E(e, s) : g(e, s), d();
}, d = () => {
w(), setTimeout(() => {
c(""), i(""), l("");
}, 100);
};
y(() => {
o || setTimeout(() => {
c(""), i(""), l("");
}, 100);
}, [o]);
const q = r ? `Request ${a}` : `Proceed to Payment ${a} `, S = !a || Number(a) <= 0 || !!u || r && (!!m || !s), x = (e) => e.startsWith(">") ? r : e === a;
return /* @__PURE__ */ t.createElement(
$,
{
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: _
}
)), /* @__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(p, { variant: "h3", className: "text-light-2" }, "How many credits do you need?"), /* @__PURE__ */ t.createElement(p, { variant: "body4", className: "text-light-4" }, /* @__PURE__ */ t.createElement("span", { className: "underline" }, "Note:"), " One credit is needed to unlock a site report.", " ", r ? " Please provide your phone number to make a request" : "")), /* @__PURE__ */ t.createElement("div", { className: "mt-3" }, /* @__PURE__ */ t.createElement(
C,
{
id: "creditValue",
type: "text",
value: a.startsWith(">") ? "" : a,
onChange: P,
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(
f,
{
variant: x(e) ? "primary" : "secondary",
key: e,
className: x(e) ? "w-10" : "w-10 bg-light-2",
size: "sm",
onClick: () => l(e)
},
e
))), r && /* @__PURE__ */ t.createElement("div", { className: "flex flex-col mt-4" }, /* @__PURE__ */ t.createElement(p, { className: "mb-1 text-sm font-medium text-light-2" }, "Phone Number *"), /* @__PURE__ */ t.createElement(
C,
{
id: "phoneNumber",
type: "text",
value: s,
onChange: O,
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(f, { variant: "secondary", onClick: d, title: "Cancel" }), /* @__PURE__ */ t.createElement(
f,
{
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: q,
onClick: W,
disabled: S
}
))
}
);
};
export {
L as RequestCreditsDialog
};
//# sourceMappingURL=index.es2.js.map