@cardql/react-native
Version:
CardQL SDK for React Native applications with mobile-optimized features
1,101 lines (1,091 loc) • 33.7 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var index_exports = {};
__export(index_exports, {
CardQLProvider: () => CardQLProvider,
PaymentSheet: () => PaymentSheet,
createStorageKey: () => createStorageKey,
isStorageAvailable: () => isStorageAvailable,
storage: () => storage,
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,
useIsOffline: () => useIsOffline,
useIsOnline: () => useIsOnline,
useLedger: () => useLedger,
useLedgers: () => useLedgers,
useMerchant: () => useMerchant,
useMerchants: () => useMerchants,
useMutation: () => useMutation,
useNetworkStatus: () => useNetworkStatus,
useNetworkType: () => useNetworkType,
useOfflineQueue: () => useOfflineQueue,
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 = __toESM(require("react"));
var import_core = require("@cardql/core");
// src/storage.ts
var MockStorage = class {
data = /* @__PURE__ */ new Map();
async getItem(key) {
return this.data.get(key) || null;
}
async setItem(key, value) {
this.data.set(key, value);
}
async removeItem(key) {
this.data.delete(key);
}
async clear() {
this.data.clear();
}
};
var storage = new MockStorage();
var createStorageKey = (prefix, key) => {
return `${prefix}:${key}`;
};
var isStorageAvailable = () => {
try {
return typeof storage !== "undefined";
} catch {
return false;
}
};
// src/context.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var CardQLContext = (0, import_react.createContext)(void 0);
function CardQLProvider({
config,
children,
enableOfflineMode = false,
enableSecureStorage = true,
apiKeyStorageKey = "cardql_api_key"
}) {
const [isOnline, setIsOnline] = import_react.default.useState(true);
const [finalConfig, setFinalConfig] = import_react.default.useState(config);
(0, import_react.useEffect)(() => {
const initializeConfig = async () => {
if (enableSecureStorage && !config.apiKey) {
try {
const storedApiKey = await storage.getItem(apiKeyStorageKey);
if (storedApiKey) {
setFinalConfig((prev) => ({ ...prev, apiKey: storedApiKey }));
}
} catch (error) {
console.warn("Failed to retrieve stored API key:", error);
}
}
};
initializeConfig();
}, [config.apiKey, enableSecureStorage, apiKeyStorageKey]);
const cardql = (0, import_react.useMemo)(() => new import_core.CardQL(finalConfig), [finalConfig]);
const updateApiKey = async (apiKey) => {
setFinalConfig((prev) => ({ ...prev, apiKey }));
cardql.setApiKey(apiKey);
if (enableSecureStorage) {
try {
await storage.setItem(apiKeyStorageKey, apiKey);
} catch (error) {
console.warn("Failed to store API key:", error);
}
}
};
const clearStoredData = async () => {
if (enableSecureStorage) {
try {
await storage.removeItem(apiKeyStorageKey);
} catch (error) {
console.warn("Failed to clear stored data:", error);
}
}
};
const value = (0, import_react.useMemo)(
() => ({
cardql,
config: finalConfig,
isOnline,
enableOfflineMode,
updateApiKey,
clearStoredData
}),
[
cardql,
finalConfig,
isOnline,
enableOfflineMode,
updateApiKey,
clearStoredData
]
);
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/useNetworkStatus.ts
var import_react2 = require("react");
function useNetworkStatus() {
const [networkStatus, setNetworkStatus] = (0, import_react2.useState)({
isConnected: true,
type: "wifi",
isWifiEnabled: true,
isInternetReachable: true
});
(0, import_react2.useEffect)(() => {
return () => {
};
}, []);
return networkStatus;
}
function useIsOnline() {
const { isConnected } = useNetworkStatus();
return isConnected;
}
function useIsOffline() {
const { isConnected } = useNetworkStatus();
return !isConnected;
}
function useNetworkType() {
const { type } = useNetworkStatus();
return type;
}
// src/hooks/useOfflineQueue.ts
var import_react3 = require("react");
var STORAGE_KEY = "cardql_offline_queue";
function useOfflineQueue(options = {}) {
const {
maxRetries = 3,
retryDelay = 1e3,
storageKey = STORAGE_KEY
} = options;
const cardql = useCardQLClient();
const isOnline = useIsOnline();
const [queue, setQueue] = (0, import_react3.useState)([]);
const [isProcessing, setIsProcessing] = (0, import_react3.useState)(false);
(0, import_react3.useEffect)(() => {
const loadQueue = async () => {
try {
const storedQueue = await storage.getItem(storageKey);
if (storedQueue) {
setQueue(JSON.parse(storedQueue));
}
} catch (error) {
console.warn("Failed to load offline queue:", error);
}
};
loadQueue();
}, [storageKey]);
(0, import_react3.useEffect)(() => {
const saveQueue = async () => {
try {
await storage.setItem(storageKey, JSON.stringify(queue));
} catch (error) {
console.warn("Failed to save offline queue:", error);
}
};
saveQueue();
}, [queue, storageKey]);
(0, import_react3.useEffect)(() => {
if (isOnline && queue.length > 0 && !isProcessing) {
processQueue();
}
}, [isOnline, queue.length, isProcessing]);
const addToQueue = (0, import_react3.useCallback)(async (mutation, variables) => {
const operation = {
id: `${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
mutation,
variables,
timestamp: Date.now(),
retryCount: 0
};
setQueue((prev) => [...prev, operation]);
}, []);
const removeFromQueue = (0, import_react3.useCallback)(async (id) => {
setQueue((prev) => prev.filter((op) => op.id !== id));
}, []);
const processQueue = (0, import_react3.useCallback)(async () => {
if (!isOnline || isProcessing || queue.length === 0) {
return;
}
setIsProcessing(true);
const processedIds = [];
for (const operation of queue) {
try {
await cardql.client.request(operation.mutation, operation.variables);
processedIds.push(operation.id);
} catch (error) {
console.warn("Failed to process queued operation:", error);
setQueue(
(prev) => prev.map(
(op) => op.id === operation.id ? { ...op, retryCount: op.retryCount + 1 } : op
)
);
if (operation.retryCount >= maxRetries) {
processedIds.push(operation.id);
console.warn("Max retries exceeded for operation:", operation.id);
}
await new Promise((resolve) => setTimeout(resolve, retryDelay));
}
}
if (processedIds.length > 0) {
setQueue((prev) => prev.filter((op) => !processedIds.includes(op.id)));
}
setIsProcessing(false);
}, [isOnline, isProcessing, queue, cardql, maxRetries, retryDelay]);
const clearQueue = (0, import_react3.useCallback)(async () => {
setQueue([]);
try {
await storage.removeItem(storageKey);
} catch (error) {
console.warn("Failed to clear queue storage:", error);
}
}, [storageKey]);
return {
queue,
addToQueue,
processQueue,
clearQueue,
removeFromQueue,
isProcessing
};
}
// src/components/PaymentSheet.tsx
var import_react15 = require("react");
var import_react_native = require("react-native");
// ../react/dist/index.mjs
var dist_exports = {};
__export(dist_exports, {
CardQLProvider: () => CardQLProvider2,
PaymentForm: () => PaymentForm,
useAccount: () => useAccount,
useAccounts: () => useAccounts,
useApp: () => useApp,
useApps: () => useApps,
useCardQL: () => useCardQL2,
useCardQLApi: () => useCardQLApi2,
useCardQLClient: () => useCardQLClient2,
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
});
__reExport(dist_exports, require("@cardql/core"));
var import_react4 = require("react");
var import_core2 = require("@cardql/core");
var import_jsx_runtime2 = require("react/jsx-runtime");
var import_react5 = require("react");
var import_react6 = require("react");
var import_core3 = require("@cardql/core");
var import_react7 = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var CardQLContext2 = (0, import_react4.createContext)(void 0);
function CardQLProvider2({ config, children }) {
const cardql = (0, import_react4.useMemo)(() => new import_core2.CardQL(config), [config]);
const value = (0, import_react4.useMemo)(
() => ({
cardql,
config
}),
[cardql, config]
);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CardQLContext2.Provider, { value, children });
}
function useCardQL2() {
const context = (0, import_react4.useContext)(CardQLContext2);
if (context === void 0) {
throw new Error("useCardQL must be used within a CardQLProvider");
}
return context;
}
function useCardQLClient2() {
const { cardql } = useCardQL2();
return cardql;
}
function useCardQLApi2() {
const { cardql } = useCardQL2();
return cardql.api;
}
function useQuery(query, variables, options = {}) {
const cardql = useCardQLClient2();
const [data, setData] = (0, import_react5.useState)(void 0);
const [loading, setLoading] = (0, import_react5.useState)(true);
const [error, setError] = (0, import_react5.useState)(null);
const {
enabled = true,
refetchOnMount = true,
refetchInterval,
onSuccess,
onError
} = options;
const intervalRef = (0, import_react5.useRef)();
const mountedRef = (0, import_react5.useRef)(true);
const fetchData = (0, import_react5.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_react5.useCallback)(async () => {
await fetchData();
}, [fetchData]);
const refresh = (0, import_react5.useCallback)(async () => {
setData(void 0);
await fetchData();
}, [fetchData]);
(0, import_react5.useEffect)(() => {
if (enabled && refetchOnMount) {
fetchData();
}
}, [enabled, refetchOnMount, fetchData]);
(0, import_react5.useEffect)(() => {
if (refetchInterval && enabled) {
intervalRef.current = setInterval(fetchData, refetchInterval);
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}
}, [refetchInterval, enabled, fetchData]);
(0, import_react5.useEffect)(() => {
return () => {
mountedRef.current = false;
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, []);
return {
data,
loading,
error,
refetch,
refresh
};
}
function useMutation(mutation, options = {}) {
const cardql = useCardQLClient2();
const [data, setData] = (0, import_react6.useState)(void 0);
const [loading, setLoading] = (0, import_react6.useState)(false);
const [error, setError] = (0, import_react6.useState)(null);
const { onSuccess, onError, onSettled } = options;
const mutateAsync = (0, import_react6.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_react6.useCallback)(
async (variables) => {
try {
return await mutateAsync(variables);
} catch (err) {
return Promise.reject(err);
}
},
[mutateAsync]
);
const reset = (0, import_react6.useCallback)(() => {
setData(void 0);
setError(null);
setLoading(false);
}, []);
return {
data,
loading,
error,
mutate,
mutateAsync,
reset
};
}
function useAccounts(options) {
return useQuery(import_core3.GET_ACCOUNTS, void 0, options);
}
function useAccount(accountID, options) {
return useQuery(
import_core3.GET_ACCOUNT,
{ accountID },
options
);
}
function useCreateAccount(options) {
return useMutation(
import_core3.CREATE_ACCOUNT,
options
);
}
function useUpdateAccount(options) {
return useMutation(
import_core3.UPDATE_ACCOUNT,
options
);
}
function useDeleteAccount(options) {
return useMutation(
import_core3.DELETE_ACCOUNT,
options
);
}
function useApps(options) {
return useQuery(import_core3.GET_APPS, void 0, options);
}
function useApp(id, options) {
return useQuery(import_core3.GET_APP, { id }, options);
}
function useCreateApp(options) {
return useMutation(import_core3.CREATE_APP, options);
}
function useUpdateApp(options) {
return useMutation(import_core3.UPDATE_APP, options);
}
function useDeleteApp(options) {
return useMutation(
import_core3.DELETE_APP,
options
);
}
function useCustomers(options) {
return useQuery(import_core3.GET_CUSTOMERS, void 0, options);
}
function useCustomer(id, options) {
return useQuery(import_core3.GET_CUSTOMER, { id }, options);
}
function useCreateCustomer(options) {
return useMutation(
import_core3.CREATE_CUSTOMER,
options
);
}
function useUpdateCustomer(options) {
return useMutation(
import_core3.UPDATE_CUSTOMER,
options
);
}
function useDeleteCustomer(options) {
return useMutation(
import_core3.DELETE_CUSTOMER,
options
);
}
function useMerchants(options) {
return useQuery(import_core3.GET_MERCHANTS, void 0, options);
}
function useMerchant(id, options) {
return useQuery(import_core3.GET_MERCHANT, { id }, options);
}
function useCreateMerchant(options) {
return useMutation(
import_core3.CREATE_MERCHANT,
options
);
}
function useUpdateMerchant(options) {
return useMutation(
import_core3.UPDATE_MERCHANT,
options
);
}
function useDeleteMerchant(options) {
return useMutation(
import_core3.DELETE_MERCHANT,
options
);
}
function usePayments(options) {
return useQuery(import_core3.GET_PAYMENTS, void 0, options);
}
function usePayment(id, options) {
return useQuery(import_core3.GET_PAYMENT, { id }, options);
}
function useCreatePayment(options) {
return useMutation(
import_core3.CREATE_PAYMENT,
options
);
}
function useUpdatePayment(options) {
return useMutation(
import_core3.UPDATE_PAYMENT,
options
);
}
function useDeletePayment(options) {
return useMutation(
import_core3.DELETE_PAYMENT,
options
);
}
function useLedgers(options) {
return useQuery(import_core3.GET_LEDGERS, void 0, options);
}
function useLedger(id, options) {
return useQuery(import_core3.GET_LEDGER, { id }, options);
}
function useCreateLedger(options) {
return useMutation(
import_core3.CREATE_LEDGER,
options
);
}
function useUpdateLedger(options) {
return useMutation(
import_core3.UPDATE_LEDGER,
options
);
}
function useDeleteLedger(options) {
return useMutation(
import_core3.DELETE_LEDGER,
options
);
}
function PaymentForm({
merchantID,
userID,
onSuccess,
onError,
className = "",
disabled = false
}) {
const [formData, setFormData] = (0, import_react7.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_runtime3.jsxs)(
"form",
{
onSubmit: handleSubmit,
className: `cardql-payment-form ${className}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cardql-form-field", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: "amount", children: "Amount" }),
/* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)("div", { className: "cardql-form-field", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: "currency", children: "Currency" }),
/* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("option", { value: "USD", children: "USD" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "EUR", children: "EUR" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "GBP", children: "GBP" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "CAD", children: "CAD" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "AUD", children: "AUD" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "JPY", children: "JPY" })
]
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cardql-form-field", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { htmlFor: "description", children: "Description (Optional)" }),
/* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsxs)("div", { className: "cardql-error", children: [
"Error: ",
createPayment.error.message
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"button",
{
type: "submit",
disabled: disabled || createPayment.loading || !formData.amount || !formData.currency,
className: "cardql-submit-button",
children: createPayment.loading ? "Processing..." : "Create Payment"
}
)
]
}
);
}
// src/components/PaymentSheet.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function PaymentSheet({
visible,
onClose,
merchantID,
userID,
onSuccess,
onError,
defaultAmount = "",
defaultCurrency = "USD",
defaultDescription = "",
style,
headerStyle,
inputStyle,
buttonStyle,
buttonTextStyle
}) {
const [formData, setFormData] = (0, import_react15.useState)({
amount: defaultAmount,
currency: defaultCurrency,
description: defaultDescription
});
const createPayment = useCreatePayment({
onSuccess: (data) => {
onSuccess?.(data.createPayment);
onClose();
setFormData({
amount: defaultAmount,
currency: defaultCurrency,
description: defaultDescription
});
},
onError: (error) => {
onError?.(error);
import_react_native.Alert.alert(
"Payment Failed",
error.message || "An error occurred while processing your payment. Please try again.",
[{ text: "OK" }]
);
}
});
const handleSubmit = async () => {
if (!formData.amount || !formData.currency) {
import_react_native.Alert.alert("Missing Information", "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 updateField = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
const currencies = ["USD", "EUR", "GBP", "CAD", "AUD", "JPY"];
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native.Modal,
{
visible,
animationType: "slide",
presentationStyle: "pageSheet",
onRequestClose: onClose,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native.View, { style: [styles.container, style], children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native.View, { style: [styles.header, headerStyle], children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.Text, { style: styles.title, children: "Payment" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.TouchableOpacity, { onPress: onClose, style: styles.closeButton, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.Text, { style: styles.closeButtonText, children: "\u2715" }) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.ScrollView, { style: styles.content, showsVerticalScrollIndicator: false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native.View, { style: styles.form, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native.View, { style: styles.field, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.Text, { style: styles.label, children: "Amount" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native.TextInput,
{
style: [styles.input, inputStyle],
value: formData.amount,
onChangeText: (value) => updateField("amount", value),
placeholder: "0.00",
keyboardType: "decimal-pad",
editable: !createPayment.loading
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native.View, { style: styles.field, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.Text, { style: styles.label, children: "Currency" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native.ScrollView,
{
horizontal: true,
showsHorizontalScrollIndicator: false,
style: styles.currencyContainer,
children: currencies.map((currency) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native.TouchableOpacity,
{
style: [
styles.currencyButton,
formData.currency === currency && styles.currencyButtonActive
],
onPress: () => updateField("currency", currency),
disabled: createPayment.loading,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native.Text,
{
style: [
styles.currencyButtonText,
formData.currency === currency && styles.currencyButtonTextActive
],
children: currency
}
)
},
currency
))
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native.View, { style: styles.field, children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.Text, { style: styles.label, children: "Description (Optional)" }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native.TextInput,
{
style: [styles.input, inputStyle],
value: formData.description,
onChangeText: (value) => updateField("description", value),
placeholder: "Payment description",
multiline: true,
numberOfLines: 2,
editable: !createPayment.loading
}
)
] })
] }) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.View, { style: styles.footer, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_react_native.TouchableOpacity,
{
style: [
styles.submitButton,
buttonStyle,
(!formData.amount || !formData.currency || createPayment.loading) && styles.submitButtonDisabled
],
onPress: handleSubmit,
disabled: !formData.amount || !formData.currency || createPayment.loading,
children: createPayment.loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.ActivityIndicator, { color: "#fff" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native.Text, { style: [styles.submitButtonText, buttonTextStyle], children: "Create Payment" })
}
) })
] })
}
);
}
var styles = import_react_native.StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff"
},
header: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
paddingHorizontal: 20,
paddingVertical: 16,
borderBottomWidth: 1,
borderBottomColor: "#e0e0e0"
},
title: {
fontSize: 18,
fontWeight: "600",
color: "#000"
},
closeButton: {
padding: 8
},
closeButtonText: {
fontSize: 18,
color: "#666"
},
content: {
flex: 1
},
form: {
padding: 20
},
field: {
marginBottom: 20
},
label: {
fontSize: 16,
fontWeight: "500",
color: "#333",
marginBottom: 8
},
input: {
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 8,
paddingHorizontal: 16,
paddingVertical: 12,
fontSize: 16,
backgroundColor: "#fff"
},
currencyContainer: {
flexDirection: "row"
},
currencyButton: {
paddingHorizontal: 16,
paddingVertical: 8,
marginRight: 8,
borderWidth: 1,
borderColor: "#ddd",
borderRadius: 6,
backgroundColor: "#fff"
},
currencyButtonActive: {
backgroundColor: "#007bff",
borderColor: "#007bff"
},
currencyButtonText: {
fontSize: 14,
color: "#333",
fontWeight: "500"
},
currencyButtonTextActive: {
color: "#fff"
},
footer: {
padding: 20,
borderTopWidth: 1,
borderTopColor: "#e0e0e0"
},
submitButton: {
backgroundColor: "#007bff",
paddingVertical: 16,
borderRadius: 8,
alignItems: "center"
},
submitButtonDisabled: {
backgroundColor: "#ccc"
},
submitButtonText: {
color: "#fff",
fontSize: 16,
fontWeight: "600"
}
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
CardQLProvider,
PaymentSheet,
createStorageKey,
isStorageAvailable,
storage,
useAccount,
useAccounts,
useApp,
useApps,
useCardQL,
useCardQLApi,
useCardQLClient,
useCreateAccount,
useCreateApp,
useCreateCustomer,
useCreateLedger,
useCreateMerchant,
useCreatePayment,
useCustomer,
useCustomers,
useDeleteAccount,
useDeleteApp,
useDeleteCustomer,
useDeleteLedger,
useDeleteMerchant,
useDeletePayment,
useIsOffline,
useIsOnline,
useLedger,
useLedgers,
useMerchant,
useMerchants,
useMutation,
useNetworkStatus,
useNetworkType,
useOfflineQueue,
usePayment,
usePayments,
useQuery,
useUpdateAccount,
useUpdateApp,
useUpdateCustomer,
useUpdateLedger,
useUpdateMerchant,
useUpdatePayment,
...require("@cardql/core")
});