@cimplify/sdk 0.3.6 → 0.4.0

package/dist/react.mjs

@@ -0,0 +1,136 @@
+import { createContext, useContext, useState, useEffect, useRef, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/react/index.tsx
+
+// src/types/elements.ts
+var ELEMENT_TYPES = {
+  AUTH: "auth",
+  ADDRESS: "address",
+  PAYMENT: "payment"
+};
+var EVENT_TYPES = {
+  READY: "ready",
+  AUTHENTICATED: "authenticated",
+  REQUIRES_OTP: "requires_otp",
+  ERROR: "error",
+  CHANGE: "change"};
+var ElementsContext = createContext({
+  elements: null,
+  isReady: false
+});
+function useElements() {
+  return useContext(ElementsContext).elements;
+}
+function useElementsReady() {
+  return useContext(ElementsContext).isReady;
+}
+function ElementsProvider({
+  client,
+  businessId,
+  options,
+  children
+}) {
+  const [elements, setElements] = useState(null);
+  const [isReady, setIsReady] = useState(false);
+  useEffect(() => {
+    const instance = client.elements(businessId, options);
+    setElements(instance);
+    setIsReady(true);
+    return () => instance.destroy();
+  }, [client, businessId, options]);
+  return /* @__PURE__ */ jsx(ElementsContext.Provider, { value: { elements, isReady }, children });
+}
+function AuthElement({
+  className,
+  style,
+  prefillEmail,
+  onReady,
+  onAuthenticated,
+  onRequiresOtp,
+  onError
+}) {
+  const containerRef = useRef(null);
+  const elementRef = useRef(null);
+  const elements = useElements();
+  useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.AUTH, { prefillEmail });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.AUTHENTICATED, (data) => onAuthenticated?.(data));
+    element.on(EVENT_TYPES.REQUIRES_OTP, (data) => onRequiresOtp?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+}
+function AddressElement({
+  className,
+  style,
+  mode = "shipping",
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = useRef(null);
+  const elementRef = useRef(null);
+  const elements = useElements();
+  useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.ADDRESS, { mode });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.CHANGE, (data) => onChange?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, mode, onReady, onChange, onError]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+}
+function PaymentElement({
+  className,
+  style,
+  amount,
+  currency,
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = useRef(null);
+  const elementRef = useRef(null);
+  const elements = useElements();
+  useEffect(() => {
+    if (!elements || !containerRef.current) return;
+    const element = elements.create(ELEMENT_TYPES.PAYMENT, { amount, currency });
+    elementRef.current = element;
+    element.on(EVENT_TYPES.READY, () => onReady?.());
+    element.on(EVENT_TYPES.CHANGE, (data) => onChange?.(data));
+    element.on(EVENT_TYPES.ERROR, (data) => onError?.(data));
+    element.mount(containerRef.current);
+    return () => element.destroy();
+  }, [elements, amount, currency, onReady, onChange, onError]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+}
+function useCheckout() {
+  const elements = useElements();
+  const [isLoading, setIsLoading] = useState(false);
+  const submit = useCallback(
+    async (data) => {
+      if (!elements) {
+        return { success: false, error: { code: "NO_ELEMENTS", message: "Elements not initialized" } };
+      }
+      setIsLoading(true);
+      try {
+        return await elements.submitCheckout(data);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [elements]
+  );
+  return { submit, isLoading };
+}
+
+export { AddressElement, AuthElement, ElementsProvider, PaymentElement, useCheckout, useElements, useElementsReady };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cimplify/sdk",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Cimplify Commerce SDK for storefronts",
   "keywords": [
     "cimplify",
@@ -20,6 +20,11 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.js"
     }
   },
   "scripts": {
@@ -31,8 +36,18 @@
     "format": "oxfmt . --write",
     "format:check": "oxfmt . --check"
   },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@types/react": "^19.2.7",
     "@typescript/native-preview": "^7.0.0-dev.20260109.1",
+    "react": "^19.2.3",
     "tsup": "^8.5.1",
     "typescript": "5.9.3"
   }