@cardql/react
Version:
CardQL SDK for React web applications with hooks and context providers
542 lines (535 loc) • 15.7 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
CardQLProvider: () => CardQLProvider,
PaymentForm: () => PaymentForm,
useAccount: () => useAccount,
useAccounts: () => useAccounts,
useApp: () => useApp,
useApps: () => useApps,
useCardQL: () => useCardQL,
useCardQLApi: () => useCardQLApi,
useCardQLClient: () => useCardQLClient,
useCreateAccount: () => useCreateAccount,
useCreateApp: () => useCreateApp,
useCreateCustomer: () => useCreateCustomer,
useCreateLedger: () => useCreateLedger,
useCreateMerchant: () => useCreateMerchant,
useCreatePayment: () => useCreatePayment,
useCustomer: () => useCustomer,
useCustomers: () => useCustomers,
useDeleteAccount: () => useDeleteAccount,
useDeleteApp: () => useDeleteApp,
useDeleteCustomer: () => useDeleteCustomer,
useDeleteLedger: () => useDeleteLedger,
useDeleteMerchant: () => useDeleteMerchant,
useDeletePayment: () => useDeletePayment,
useLedger: () => useLedger,
useLedgers: () => useLedgers,
useMerchant: () => useMerchant,
useMerchants: () => useMerchants,
useMutation: () => useMutation,
usePayment: () => usePayment,
usePayments: () => usePayments,
useQuery: () => useQuery,
useUpdateAccount: () => useUpdateAccount,
useUpdateApp: () => useUpdateApp,
useUpdateCustomer: () => useUpdateCustomer,
useUpdateLedger: () => useUpdateLedger,
useUpdateMerchant: () => useUpdateMerchant,
useUpdatePayment: () => useUpdatePayment
});
module.exports = __toCommonJS(index_exports);
__reExport(index_exports, require("@cardql/core"), module.exports);
// src/context.tsx
var import_react = require("react");
var import_core = require("@cardql/core");
var import_jsx_runtime = require("react/jsx-runtime");
var CardQLContext = (0, import_react.createContext)(void 0);
function CardQLProvider({ config, children }) {
const cardql = (0, import_react.useMemo)(() => new import_core.CardQL(config), [config]);
const value = (0, import_react.useMemo)(
() => ({
cardql,
config
}),
[cardql, config]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardQLContext.Provider, { value, children });
}
function useCardQL() {
const context = (0, import_react.useContext)(CardQLContext);
if (context === void 0) {
throw new Error("useCardQL must be used within a CardQLProvider");
}
return context;
}
function useCardQLClient() {
const { cardql } = useCardQL();
return cardql;
}
function useCardQLApi() {
const { cardql } = useCardQL();
return cardql.api;
}
// src/hooks/useQuery.ts
var import_react2 = require("react");
function useQuery(query, variables, options = {}) {
const cardql = useCardQLClient();
const [data, setData] = (0, import_react2.useState)(void 0);
const [loading, setLoading] = (0, import_react2.useState)(true);
const [error, setError] = (0, import_react2.useState)(null);
const {
enabled = true,
refetchOnMount = true,
refetchInterval,
onSuccess,
onError
} = options;
const intervalRef = (0, import_react2.useRef)();
const mountedRef = (0, import_react2.useRef)(true);
const fetchData = (0, import_react2.useCallback)(async () => {
if (!enabled) return;
setLoading(true);
setError(null);
try {
const result = await cardql.client.requestWithRetry(query, variables);
if (mountedRef.current) {
setData(result);
setLoading(false);
onSuccess?.(result);
}
} catch (err) {
if (mountedRef.current) {
setError(err);
setLoading(false);
onError?.(err);
}
}
}, [cardql, query, variables, enabled, onSuccess, onError]);
const refetch = (0, import_react2.useCallback)(async () => {
await fetchData();
}, [fetchData]);
const refresh = (0, import_react2.useCallback)(async () => {
setData(void 0);
await fetchData();
}, [fetchData]);
(0, import_react2.useEffect)(() => {
if (enabled && refetchOnMount) {
fetchData();
}
}, [enabled, refetchOnMount, fetchData]);
(0, import_react2.useEffect)(() => {
if (refetchInterval && enabled) {
intervalRef.current = setInterval(fetchData, refetchInterval);
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}
}, [refetchInterval, enabled, fetchData]);
(0, import_react2.useEffect)(() => {
return () => {
mountedRef.current = false;
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, []);
return {
data,
loading,
error,
refetch,
refresh
};
}
// src/hooks/useMutation.ts
var import_react3 = require("react");
function useMutation(mutation, options = {}) {
const cardql = useCardQLClient();
const [data, setData] = (0, import_react3.useState)(void 0);
const [loading, setLoading] = (0, import_react3.useState)(false);
const [error, setError] = (0, import_react3.useState)(null);
const { onSuccess, onError, onSettled } = options;
const mutateAsync = (0, import_react3.useCallback)(
async (variables) => {
setLoading(true);
setError(null);
try {
const result = await cardql.client.requestWithRetry(
mutation,
variables
);
setData(result);
setLoading(false);
onSuccess?.(result, variables);
onSettled?.(result, null, variables);
return result;
} catch (err) {
setError(err);
setLoading(false);
onError?.(err, variables);
onSettled?.(void 0, err, variables);
throw err;
}
},
[cardql, mutation, onSuccess, onError, onSettled]
);
const mutate = (0, import_react3.useCallback)(
async (variables) => {
try {
return await mutateAsync(variables);
} catch (err) {
return Promise.reject(err);
}
},
[mutateAsync]
);
const reset = (0, import_react3.useCallback)(() => {
setData(void 0);
setError(null);
setLoading(false);
}, []);
return {
data,
loading,
error,
mutate,
mutateAsync,
reset
};
}
// src/hooks/useCardQL.ts
var import_core2 = require("@cardql/core");
function useAccounts(options) {
return useQuery(import_core2.GET_ACCOUNTS, void 0, options);
}
function useAccount(accountID, options) {
return useQuery(
import_core2.GET_ACCOUNT,
{ accountID },
options
);
}
function useCreateAccount(options) {
return useMutation(
import_core2.CREATE_ACCOUNT,
options
);
}
function useUpdateAccount(options) {
return useMutation(
import_core2.UPDATE_ACCOUNT,
options
);
}
function useDeleteAccount(options) {
return useMutation(
import_core2.DELETE_ACCOUNT,
options
);
}
function useApps(options) {
return useQuery(import_core2.GET_APPS, void 0, options);
}
function useApp(id, options) {
return useQuery(import_core2.GET_APP, { id }, options);
}
function useCreateApp(options) {
return useMutation(import_core2.CREATE_APP, options);
}
function useUpdateApp(options) {
return useMutation(import_core2.UPDATE_APP, options);
}
function useDeleteApp(options) {
return useMutation(
import_core2.DELETE_APP,
options
);
}
function useCustomers(options) {
return useQuery(import_core2.GET_CUSTOMERS, void 0, options);
}
function useCustomer(id, options) {
return useQuery(import_core2.GET_CUSTOMER, { id }, options);
}
function useCreateCustomer(options) {
return useMutation(
import_core2.CREATE_CUSTOMER,
options
);
}
function useUpdateCustomer(options) {
return useMutation(
import_core2.UPDATE_CUSTOMER,
options
);
}
function useDeleteCustomer(options) {
return useMutation(
import_core2.DELETE_CUSTOMER,
options
);
}
function useMerchants(options) {
return useQuery(import_core2.GET_MERCHANTS, void 0, options);
}
function useMerchant(id, options) {
return useQuery(import_core2.GET_MERCHANT, { id }, options);
}
function useCreateMerchant(options) {
return useMutation(
import_core2.CREATE_MERCHANT,
options
);
}
function useUpdateMerchant(options) {
return useMutation(
import_core2.UPDATE_MERCHANT,
options
);
}
function useDeleteMerchant(options) {
return useMutation(
import_core2.DELETE_MERCHANT,
options
);
}
function usePayments(options) {
return useQuery(import_core2.GET_PAYMENTS, void 0, options);
}
function usePayment(id, options) {
return useQuery(import_core2.GET_PAYMENT, { id }, options);
}
function useCreatePayment(options) {
return useMutation(
import_core2.CREATE_PAYMENT,
options
);
}
function useUpdatePayment(options) {
return useMutation(
import_core2.UPDATE_PAYMENT,
options
);
}
function useDeletePayment(options) {
return useMutation(
import_core2.DELETE_PAYMENT,
options
);
}
function useLedgers(options) {
return useQuery(import_core2.GET_LEDGERS, void 0, options);
}
function useLedger(id, options) {
return useQuery(import_core2.GET_LEDGER, { id }, options);
}
function useCreateLedger(options) {
return useMutation(
import_core2.CREATE_LEDGER,
options
);
}
function useUpdateLedger(options) {
return useMutation(
import_core2.UPDATE_LEDGER,
options
);
}
function useDeleteLedger(options) {
return useMutation(
import_core2.DELETE_LEDGER,
options
);
}
// src/components/PaymentForm.tsx
var import_react4 = require("react");
var import_jsx_runtime2 = require("react/jsx-runtime");
function PaymentForm({
merchantID,
userID,
onSuccess,
onError,
className = "",
disabled = false
}) {
const [formData, setFormData] = (0, import_react4.useState)({
amount: "",
currency: "USD",
description: ""
});
const createPayment = useCreatePayment({
onSuccess: (data) => {
onSuccess?.(data.createPayment);
setFormData({
amount: "",
currency: "USD",
description: ""
});
},
onError: (error) => {
onError?.(error);
}
});
const handleSubmit = async (e) => {
e.preventDefault();
if (!formData.amount || !formData.currency) {
onError?.(new Error("Amount and currency are required"));
return;
}
const paymentInput = {
amount: formData.amount,
currency: formData.currency,
merchantID,
userID,
description: formData.description || void 0
};
try {
await createPayment.mutateAsync(paymentInput);
} catch (error) {
}
};
const handleInputChange = (field, value) => {
setFormData((prev) => ({
...prev,
[field]: value
}));
};
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"form",
{
onSubmit: handleSubmit,
className: `cardql-payment-form ${className}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cardql-form-field", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "amount", children: "Amount" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"input",
{
id: "amount",
type: "number",
step: "0.01",
min: "0",
value: formData.amount,
onChange: (e) => handleInputChange("amount", e.target.value),
placeholder: "0.00",
required: true,
disabled: disabled || createPayment.loading
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cardql-form-field", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "currency", children: "Currency" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
"select",
{
id: "currency",
value: formData.currency,
onChange: (e) => handleInputChange("currency", e.target.value),
required: true,
disabled: disabled || createPayment.loading,
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "USD", children: "USD" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "EUR", children: "EUR" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "GBP", children: "GBP" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "CAD", children: "CAD" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "AUD", children: "AUD" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "JPY", children: "JPY" })
]
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cardql-form-field", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { htmlFor: "description", children: "Description (Optional)" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"input",
{
id: "description",
type: "text",
value: formData.description,
onChange: (e) => handleInputChange("description", e.target.value),
placeholder: "Payment description",
disabled: disabled || createPayment.loading
}
)
] }),
createPayment.error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cardql-error", children: [
"Error: ",
createPayment.error.message
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
type: "submit",
disabled: disabled || createPayment.loading || !formData.amount || !formData.currency,
className: "cardql-submit-button",
children: createPayment.loading ? "Processing..." : "Create Payment"
}
)
]
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
CardQLProvider,
PaymentForm,
useAccount,
useAccounts,
useApp,
useApps,
useCardQL,
useCardQLApi,
useCardQLClient,
useCreateAccount,
useCreateApp,
useCreateCustomer,
useCreateLedger,
useCreateMerchant,
useCreatePayment,
useCustomer,
useCustomers,
useDeleteAccount,
useDeleteApp,
useDeleteCustomer,
useDeleteLedger,
useDeleteMerchant,
useDeletePayment,
useLedger,
useLedgers,
useMerchant,
useMerchants,
useMutation,
usePayment,
usePayments,
useQuery,
useUpdateAccount,
useUpdateApp,
useUpdateCustomer,
useUpdateLedger,
useUpdateMerchant,
useUpdatePayment,
...require("@cardql/core")
});