@cimplify/sdk 0.3.5 → 0.4.0

package/dist/react.d.mts

@@ -0,0 +1,59 @@
+import { r as CimplifyElements, C as CimplifyClient, v as ElementsOptions, eh as AuthenticatedData, ef as AddressInfo, eg as PaymentMethodInfo, ej as ElementsCheckoutResult } from './client-Ug3b8v1t.mjs';
+import React, { ReactNode } from 'react';
+
+declare function useElements(): CimplifyElements | null;
+declare function useElementsReady(): boolean;
+interface ElementsProviderProps {
+    client: CimplifyClient;
+    businessId: string;
+    options?: ElementsOptions;
+    children: ReactNode;
+}
+declare function ElementsProvider({ client, businessId, options, children, }: ElementsProviderProps): React.ReactElement;
+interface BaseElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onReady?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+}
+interface AuthElementProps extends BaseElementProps {
+    prefillEmail?: string;
+    onAuthenticated?: (data: AuthenticatedData) => void;
+    onRequiresOtp?: (data: {
+        contactMasked: string;
+    }) => void;
+}
+declare function AuthElement({ className, style, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError, }: AuthElementProps): React.ReactElement | null;
+interface AddressElementProps extends BaseElementProps {
+    mode?: "shipping" | "billing";
+    onChange?: (data: {
+        address: AddressInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function AddressElement({ className, style, mode, onReady, onChange, onError, }: AddressElementProps): React.ReactElement | null;
+interface PaymentElementProps extends BaseElementProps {
+    amount?: number;
+    currency?: string;
+    onChange?: (data: {
+        paymentMethod: PaymentMethodInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function PaymentElement({ className, style, amount, currency, onReady, onChange, onError, }: PaymentElementProps): React.ReactElement | null;
+declare function useCheckout(): {
+    submit: (data: {
+        cart_id: string;
+        order_type?: "delivery" | "pickup" | "dine_in";
+        location_id?: string;
+        scheduled_time?: string;
+        tip_amount?: number;
+        notes?: string;
+    }) => Promise<ElementsCheckoutResult>;
+    isLoading: boolean;
+};
+
+export { AddressElement, AuthElement, ElementsProvider, PaymentElement, useCheckout, useElements, useElementsReady };

package/dist/react.d.ts

@@ -0,0 +1,59 @@
+import { r as CimplifyElements, C as CimplifyClient, v as ElementsOptions, eh as AuthenticatedData, ef as AddressInfo, eg as PaymentMethodInfo, ej as ElementsCheckoutResult } from './client-Ug3b8v1t.js';
+import React, { ReactNode } from 'react';
+
+declare function useElements(): CimplifyElements | null;
+declare function useElementsReady(): boolean;
+interface ElementsProviderProps {
+    client: CimplifyClient;
+    businessId: string;
+    options?: ElementsOptions;
+    children: ReactNode;
+}
+declare function ElementsProvider({ client, businessId, options, children, }: ElementsProviderProps): React.ReactElement;
+interface BaseElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onReady?: () => void;
+    onError?: (error: {
+        code: string;
+        message: string;
+    }) => void;
+}
+interface AuthElementProps extends BaseElementProps {
+    prefillEmail?: string;
+    onAuthenticated?: (data: AuthenticatedData) => void;
+    onRequiresOtp?: (data: {
+        contactMasked: string;
+    }) => void;
+}
+declare function AuthElement({ className, style, prefillEmail, onReady, onAuthenticated, onRequiresOtp, onError, }: AuthElementProps): React.ReactElement | null;
+interface AddressElementProps extends BaseElementProps {
+    mode?: "shipping" | "billing";
+    onChange?: (data: {
+        address: AddressInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function AddressElement({ className, style, mode, onReady, onChange, onError, }: AddressElementProps): React.ReactElement | null;
+interface PaymentElementProps extends BaseElementProps {
+    amount?: number;
+    currency?: string;
+    onChange?: (data: {
+        paymentMethod: PaymentMethodInfo;
+        saveToLink: boolean;
+    }) => void;
+}
+declare function PaymentElement({ className, style, amount, currency, onReady, onChange, onError, }: PaymentElementProps): React.ReactElement | null;
+declare function useCheckout(): {
+    submit: (data: {
+        cart_id: string;
+        order_type?: "delivery" | "pickup" | "dine_in";
+        location_id?: string;
+        scheduled_time?: string;
+        tip_amount?: number;
+        notes?: string;
+    }) => Promise<ElementsCheckoutResult>;
+    isLoading: boolean;
+};
+
+export { AddressElement, AuthElement, ElementsProvider, PaymentElement, useCheckout, useElements, useElementsReady };

package/dist/react.js

@@ -0,0 +1,144 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('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 = react.createContext({
+  elements: null,
+  isReady: false
+});
+function useElements() {
+  return react.useContext(ElementsContext).elements;
+}
+function useElementsReady() {
+  return react.useContext(ElementsContext).isReady;
+}
+function ElementsProvider({
+  client,
+  businessId,
+  options,
+  children
+}) {
+  const [elements, setElements] = react.useState(null);
+  const [isReady, setIsReady] = react.useState(false);
+  react.useEffect(() => {
+    const instance = client.elements(businessId, options);
+    setElements(instance);
+    setIsReady(true);
+    return () => instance.destroy();
+  }, [client, businessId, options]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ElementsContext.Provider, { value: { elements, isReady }, children });
+}
+function AuthElement({
+  className,
+  style,
+  prefillEmail,
+  onReady,
+  onAuthenticated,
+  onRequiresOtp,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.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__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function AddressElement({
+  className,
+  style,
+  mode = "shipping",
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.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__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function PaymentElement({
+  className,
+  style,
+  amount,
+  currency,
+  onReady,
+  onChange,
+  onError
+}) {
+  const containerRef = react.useRef(null);
+  const elementRef = react.useRef(null);
+  const elements = useElements();
+  react.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__ */ jsxRuntime.jsx("div", { ref: containerRef, className, style });
+}
+function useCheckout() {
+  const elements = useElements();
+  const [isLoading, setIsLoading] = react.useState(false);
+  const submit = react.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 };
+}
+
+exports.AddressElement = AddressElement;
+exports.AuthElement = AuthElement;
+exports.ElementsProvider = ElementsProvider;
+exports.PaymentElement = PaymentElement;
+exports.useCheckout = useCheckout;
+exports.useElements = useElements;
+exports.useElementsReady = useElementsReady;

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.5",
+  "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"
   }