@cardql/react/dist/index.mjs

CardQL SDK for React web applications with hooks and context providers

// src/index.ts
export * from "@cardql/core";

// src/context.tsx
import { createContext, useContext, useMemo } from "react";
import { CardQL } from "@cardql/core";
import { jsx } from "react/jsx-runtime";
var CardQLContext = createContext(void 0);
function CardQLProvider({ config, children }) {
  const cardql = useMemo(() => new CardQL(config), [config]);
  const value = useMemo(
    () => ({
      cardql,
      config
    }),
    [cardql, config]
  );
  return /* @__PURE__ */ jsx(CardQLContext.Provider, { value, children });
}
function useCardQL() {
  const context = 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
import { useState, useEffect, useCallback, useRef } from "react";
function useQuery(query, variables, options = {}) {
  const cardql = useCardQLClient();
  const [data, setData] = useState(void 0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const {
    enabled = true,
    refetchOnMount = true,
    refetchInterval,
    onSuccess,
    onError
  } = options;
  const intervalRef = useRef();
  const mountedRef = useRef(true);
  const fetchData = 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 = useCallback(async () => {
    await fetchData();
  }, [fetchData]);
  const refresh = useCallback(async () => {
    setData(void 0);
    await fetchData();
  }, [fetchData]);
  useEffect(() => {
    if (enabled && refetchOnMount) {
      fetchData();
    }
  }, [enabled, refetchOnMount, fetchData]);
  useEffect(() => {
    if (refetchInterval && enabled) {
      intervalRef.current = setInterval(fetchData, refetchInterval);
      return () => {
        if (intervalRef.current) {
          clearInterval(intervalRef.current);
        }
      };
    }
  }, [refetchInterval, enabled, fetchData]);
  useEffect(() => {
    return () => {
      mountedRef.current = false;
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);
  return {
    data,
    loading,
    error,
    refetch,
    refresh
  };
}

// src/hooks/useMutation.ts
import { useState as useState2, useCallback as useCallback2 } from "react";
function useMutation(mutation, options = {}) {
  const cardql = useCardQLClient();
  const [data, setData] = useState2(void 0);
  const [loading, setLoading] = useState2(false);
  const [error, setError] = useState2(null);
  const { onSuccess, onError, onSettled } = options;
  const mutateAsync = useCallback2(
    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 = useCallback2(
    async (variables) => {
      try {
        return await mutateAsync(variables);
      } catch (err) {
        return Promise.reject(err);
      }
    },
    [mutateAsync]
  );
  const reset = useCallback2(() => {
    setData(void 0);
    setError(null);
    setLoading(false);
  }, []);
  return {
    data,
    loading,
    error,
    mutate,
    mutateAsync,
    reset
  };
}

// src/hooks/useCardQL.ts
import {
  GET_ACCOUNTS,
  GET_ACCOUNT,
  CREATE_ACCOUNT,
  UPDATE_ACCOUNT,
  DELETE_ACCOUNT,
  GET_APPS,
  GET_APP,
  CREATE_APP,
  UPDATE_APP,
  DELETE_APP,
  GET_CUSTOMERS,
  GET_CUSTOMER,
  CREATE_CUSTOMER,
  UPDATE_CUSTOMER,
  DELETE_CUSTOMER,
  GET_MERCHANTS,
  GET_MERCHANT,
  CREATE_MERCHANT,
  UPDATE_MERCHANT,
  DELETE_MERCHANT,
  GET_PAYMENTS,
  GET_PAYMENT,
  CREATE_PAYMENT,
  UPDATE_PAYMENT,
  DELETE_PAYMENT,
  GET_LEDGERS,
  GET_LEDGER,
  CREATE_LEDGER,
  UPDATE_LEDGER,
  DELETE_LEDGER
} from "@cardql/core";
function useAccounts(options) {
  return useQuery(GET_ACCOUNTS, void 0, options);
}
function useAccount(accountID, options) {
  return useQuery(
    GET_ACCOUNT,
    { accountID },
    options
  );
}
function useCreateAccount(options) {
  return useMutation(
    CREATE_ACCOUNT,
    options
  );
}
function useUpdateAccount(options) {
  return useMutation(
    UPDATE_ACCOUNT,
    options
  );
}
function useDeleteAccount(options) {
  return useMutation(
    DELETE_ACCOUNT,
    options
  );
}
function useApps(options) {
  return useQuery(GET_APPS, void 0, options);
}
function useApp(id, options) {
  return useQuery(GET_APP, { id }, options);
}
function useCreateApp(options) {
  return useMutation(CREATE_APP, options);
}
function useUpdateApp(options) {
  return useMutation(UPDATE_APP, options);
}
function useDeleteApp(options) {
  return useMutation(
    DELETE_APP,
    options
  );
}
function useCustomers(options) {
  return useQuery(GET_CUSTOMERS, void 0, options);
}
function useCustomer(id, options) {
  return useQuery(GET_CUSTOMER, { id }, options);
}
function useCreateCustomer(options) {
  return useMutation(
    CREATE_CUSTOMER,
    options
  );
}
function useUpdateCustomer(options) {
  return useMutation(
    UPDATE_CUSTOMER,
    options
  );
}
function useDeleteCustomer(options) {
  return useMutation(
    DELETE_CUSTOMER,
    options
  );
}
function useMerchants(options) {
  return useQuery(GET_MERCHANTS, void 0, options);
}
function useMerchant(id, options) {
  return useQuery(GET_MERCHANT, { id }, options);
}
function useCreateMerchant(options) {
  return useMutation(
    CREATE_MERCHANT,
    options
  );
}
function useUpdateMerchant(options) {
  return useMutation(
    UPDATE_MERCHANT,
    options
  );
}
function useDeleteMerchant(options) {
  return useMutation(
    DELETE_MERCHANT,
    options
  );
}
function usePayments(options) {
  return useQuery(GET_PAYMENTS, void 0, options);
}
function usePayment(id, options) {
  return useQuery(GET_PAYMENT, { id }, options);
}
function useCreatePayment(options) {
  return useMutation(
    CREATE_PAYMENT,
    options
  );
}
function useUpdatePayment(options) {
  return useMutation(
    UPDATE_PAYMENT,
    options
  );
}
function useDeletePayment(options) {
  return useMutation(
    DELETE_PAYMENT,
    options
  );
}
function useLedgers(options) {
  return useQuery(GET_LEDGERS, void 0, options);
}
function useLedger(id, options) {
  return useQuery(GET_LEDGER, { id }, options);
}
function useCreateLedger(options) {
  return useMutation(
    CREATE_LEDGER,
    options
  );
}
function useUpdateLedger(options) {
  return useMutation(
    UPDATE_LEDGER,
    options
  );
}
function useDeleteLedger(options) {
  return useMutation(
    DELETE_LEDGER,
    options
  );
}

// src/components/PaymentForm.tsx
import { useState as useState3 } from "react";
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
function PaymentForm({
  merchantID,
  userID,
  onSuccess,
  onError,
  className = "",
  disabled = false
}) {
  const [formData, setFormData] = useState3({
    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__ */ jsxs(
    "form",
    {
      onSubmit: handleSubmit,
      className: `cardql-payment-form ${className}`,
      children: [
        /* @__PURE__ */ jsxs("div", { className: "cardql-form-field", children: [
          /* @__PURE__ */ jsx2("label", { htmlFor: "amount", children: "Amount" }),
          /* @__PURE__ */ jsx2(
            "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__ */ jsxs("div", { className: "cardql-form-field", children: [
          /* @__PURE__ */ jsx2("label", { htmlFor: "currency", children: "Currency" }),
          /* @__PURE__ */ jsxs(
            "select",
            {
              id: "currency",
              value: formData.currency,
              onChange: (e) => handleInputChange("currency", e.target.value),
              required: true,
              disabled: disabled || createPayment.loading,
              children: [
                /* @__PURE__ */ jsx2("option", { value: "USD", children: "USD" }),
                /* @__PURE__ */ jsx2("option", { value: "EUR", children: "EUR" }),
                /* @__PURE__ */ jsx2("option", { value: "GBP", children: "GBP" }),
                /* @__PURE__ */ jsx2("option", { value: "CAD", children: "CAD" }),
                /* @__PURE__ */ jsx2("option", { value: "AUD", children: "AUD" }),
                /* @__PURE__ */ jsx2("option", { value: "JPY", children: "JPY" })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "cardql-form-field", children: [
          /* @__PURE__ */ jsx2("label", { htmlFor: "description", children: "Description (Optional)" }),
          /* @__PURE__ */ jsx2(
            "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__ */ jsxs("div", { className: "cardql-error", children: [
          "Error: ",
          createPayment.error.message
        ] }),
        /* @__PURE__ */ jsx2(
          "button",
          {
            type: "submit",
            disabled: disabled || createPayment.loading || !formData.amount || !formData.currency,
            className: "cardql-submit-button",
            children: createPayment.loading ? "Processing..." : "Create Payment"
          }
        )
      ]
    }
  );
}
export {
  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
};