@tender-cash/agent-sdk-react 0.3.6 → 1.0.1-beta

package/dist/types/module/_actions/details.d.ts

@@ -13,14 +13,18 @@ declare const fetchPaymentDetailAction: ({ nextScreen, setPageLoading, }: {
         referenceId: string;
     }) => Promise<void>;
     paymentError: {
+        type?: string;
         title: string;
         message: string;
         data: any;
+        isError: boolean;
     } | undefined;
     setPaymentError: import('react').Dispatch<import('react').SetStateAction<{
+        type?: string;
         title: string;
         message: string;
         data: any;
+        isError: boolean;
     } | undefined>>;
     confirmPayment: () => void | Promise<void>;
     cancelPayment: () => void | Promise<void>;

package/dist/types/module/_actions/index.d.ts

@@ -22,9 +22,11 @@ declare const useAgentSdkAction: () => {
     pageLoading: boolean;
     coinFetching: boolean;
     paymentError: {
+        type?: string;
         title: string;
         message: string;
         data: any;
+        isError: boolean;
     } | undefined;
 };
 export default useAgentSdkAction;

package/dist/types/module/index.d.ts

@@ -1,3 +1,3 @@
-import { TenderAgentProps } from './types';
-declare const TenderAgentSdk: ({ referenceId, amount, accessId, accessSecret, env, fiatCurrency, paymentExpirySeconds, onEventResponse }: TenderAgentProps) => import("react/jsx-runtime").JSX.Element;
+import { TenderAgentProps, TenderAgentRef } from './types';
+declare const TenderAgentSdk: import('react').ForwardRefExoticComponent<TenderAgentProps & import('react').RefAttributes<TenderAgentRef>>;
 export default TenderAgentSdk;

package/dist/types/module/lib/utils/index.d.ts

@@ -16,4 +16,5 @@ declare const getRequestSignature: ({ accessId, accessSecret, }: IGetRequestSign
 declare const applyTheme: (theme: ITheme) => void;
 declare const sleep: (milliseconds: number) => void;
 declare const sentenceCase: (str: string) => string;
-export { cn, getRequestSignature, applyTheme, sleep, TENDER_URLS, URL_PATHS, sentenceCase, };
+declare const formatCurrency: (amount: number, currency: string) => string;
+export { cn, getRequestSignature, applyTheme, sleep, TENDER_URLS, URL_PATHS, sentenceCase, formatCurrency, };

package/dist/types/module/screens/info.d.ts

@@ -1,6 +1,8 @@
-declare const InfoScreen: ({ title, message, dataToView, }: {
+declare const InfoScreen: ({ type, title, message, dataToView, isError, }: {
+    type?: string;
     title?: string;
     message?: string;
+    isError?: boolean;
     dataToView?: {
         network: string;
         coin: string;

package/dist/types/module/types.d.ts

@@ -39,7 +39,7 @@ declare enum paymentStatusMap {
 }
 type PaymentTypeProps = "partial" | "complete" | "over" | "pending" | "error";
 type PaymentStatusProps = "partial-payment" | "completed" | "overpayment" | "pending" | "error" | "cancelled";
-type TenderEnvironments = "test" | "live";
+type TenderEnvironments = "test" | "live" | "local";
 interface FormHeaderProps {
     title: string;
     description: string;
@@ -160,7 +160,6 @@ interface onFinishResponse {
 interface ConfigContextType {
     referenceId: string;
     accessId: string;
-    accessSecret: string;
     amount: number;
     fiatCurrency: string;
     env: TenderEnvironments;
@@ -168,16 +167,26 @@ interface ConfigContextType {
     paymentExpirySeconds?: number;
     theme?: "light" | "dark";
     onEventResponse?: (data: onFinishResponse) => void;
+    onClose?: () => void;
 }
 interface TenderAgentProps {
-    referenceId: string;
-    amount: number;
     fiatCurrency: string;
     accessId: string;
-    accessSecret: string;
     env: TenderEnvironments;
-    paymentExpirySeconds?: number;
     onEventResponse?: (data: onFinishResponse) => void;
+    referenceId?: string;
+    amount?: number;
+    paymentExpirySeconds?: number;
+    theme?: "light" | "dark";
+}
+interface StartPaymentParams {
+    referenceId: string;
+    amount: number;
+    paymentExpirySeconds?: number;
+}
+interface TenderAgentRef {
+    initiatePayment: (params: StartPaymentParams) => void;
+    dismiss: () => void;
 }
 interface PaymentChain {
     _id: string;
@@ -214,4 +223,4 @@ interface PaymentCoinsResponse {
     page: number;
     limit: number;
 }
-export { type IAny, type FormHeaderProps, type FormFooterProps, type IPaymentData, type PaymentTypeProps, type PaymentStatusProps, type paymentResponseProps, type paymentDetailsProps, type newPaymentResponse, type Option, type IGetRequestSignatureParam, type IGetRequestSignature, type ITheme, type ConfigContextType, type TenderEnvironments, type TenderAgentProps, type QueueItem, type PaymentCoinsResponse, type PaymentChainResponse, type PaymentCoin, type APIResponse, type APIError, type onFinishResponse, paymentStatusMap, PAYMENT_STAGE, PAYMENT_STATUS, PAYMENT_RESPONSES, PAYMENT_ICONS, };
+export { type IAny, type FormHeaderProps, type FormFooterProps, type IPaymentData, type PaymentTypeProps, type PaymentStatusProps, type paymentResponseProps, type paymentDetailsProps, type newPaymentResponse, type Option, type IGetRequestSignatureParam, type IGetRequestSignature, type ITheme, type ConfigContextType, type TenderEnvironments, type TenderAgentProps, type StartPaymentParams, type TenderAgentRef, type QueueItem, type PaymentCoinsResponse, type PaymentChainResponse, type PaymentCoin, type APIResponse, type APIError, type onFinishResponse, paymentStatusMap, PAYMENT_STAGE, PAYMENT_STATUS, PAYMENT_RESPONSES, PAYMENT_ICONS, };

package/dist/types/types.d.ts

@@ -1,2 +1,2 @@
-import { TenderEnvironments, TenderAgentProps, onFinishResponse } from 'module/types';
-export { type TenderEnvironments, type TenderAgentProps, type onFinishResponse, };
+import { TenderEnvironments, TenderAgentProps, TenderAgentRef, onFinishResponse } from './module/types';
+export { type TenderEnvironments, type TenderAgentProps, type TenderAgentRef, type onFinishResponse, };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@tender-cash/agent-sdk-react",
     "license": "MIT",
-    "version": "0.3.6",
+    "version": "1.0.1-beta",
     "repository": "git://github.com/tender-cash/agent-sdk-react.git",
     "description": "",
     "author": "Tender",

package/readme.md

@@ -19,7 +19,7 @@ npm install @tender-cash/agent-sdk-react
 
 ## Styling
 
-The component requires its CSS file to be imported for proper styling. Import it in your main application entry point (e.g., `src/index.js`, `src/main.tsx`):
+The component uses Shadow DOM to prevent CSS leaks into your application. The styles are automatically injected into the shadow root, so you don't need to import the CSS file manually. However, if you're using the component in a build that doesn't bundle CSS automatically, you can still import it:
 
 ```javascript
 import '@tender-cash/agent-sdk-react/dist/style.css';
@@ -27,83 +27,61 @@ import '@tender-cash/agent-sdk-react/dist/style.css';
 
 ## Usage
 
-Import the `TenderAgentSdk` component and render it within your React application. Pass the required configuration as props.
+Pass all payment parameters directly as props. The modal will automatically open when the component mounts with the required payment parameters.
 
 ```jsx
-import React, { useState } from 'react';
-import '@tender-cash/agent-sdk-react/dist/style.css'; // Don't forget styles!
+import '@tender-cash/agent-sdk-react/dist/style.css';
 import { TenderAgentSdk, onFinishResponse } from '@tender-cash/agent-sdk-react';
 
 function PaymentComponent() {
-  const [showSdk, setShowSdk] = useState(false);
-  const [sdkResponse, setSdkResponse] = useState<onFinishResponse | null>(null);
-
-  // --- Configuration ---
-  const accessId = 'YOUR_ACCESS_ID'; // Replace with your actual Access ID
-  const accessSecret = 'YOUR_ACCESS_SECRET'; // Replace with your actual Access Secret
-  const amount = 150.00; // Amount to charge
-  const fiatCurrency = 'USD'; // Currency code
-  const environment = 'test'; // 'test' or 'live'
-
-  const handlePaymentRequest = () => {
-    setSdkResponse(null);
-    setShowSdk(true);
-  };
-
   const handleEventResponse = (response: onFinishResponse) => {
     console.log('SDK Response:', response);
-    setSdkResponse(response);
-    setShowSdk(false); // Hide the component after response
     // Handle success, partial payment, overpayment, error based on response.status
   };
 
   return (
-    <div>
-      {!showSdk && (
-        <button onClick={handlePaymentRequest}>
-          Pay ${amount.toFixed(2)} {fiatCurrency}
-        </button>
-      )}
-
-      {showSdk && (
-        <div>
-          <TenderAgentSdk
-            accessId={accessId}
-            accessSecret={accessSecret}
-            amount={amount}
-            fiatCurrency={fiatCurrency}
-            env={environment}
-            onEventResponse={handleEventResponse}
-          />
-          <button onClick={() => setShowSdk(false)}>Cancel Payment</button>
-        </div>
-      )}
-
-      {sdkResponse && (
-        <div>
-          <h3>Payment Result:</h3>
-          <p>Status: {sdkResponse.status}</p>
-          <p>Message: {sdkResponse.message}</p>
-          {sdkResponse.data && <pre>{JSON.stringify(sdkResponse.data, null, 2)}</pre>}
-        </div>
-      )}
-    </div>
+    <TenderAgentSdk
+      accessId="YOUR_ACCESS_ID"
+      fiatCurrency="USD"
+      env="test"
+      onEventResponse={handleEventResponse}
+      amount={150.00}
+      referenceId="unique-payment-reference-123"
+      paymentExpirySeconds={1800}
+    />
   );
 }
 
 export default PaymentComponent;
 ```
 
-## Component Props (`TenderAgentProps`)
+**Note:** The modal opens automatically on component mount when `referenceId` and `amount` are provided as props.
+
+## API Reference
+
+### Component Props (`TenderAgentProps`)
+
+The `TenderAgentSdk` component accepts the following props:
 
-| Prop             | Type                                        | Required | Description                                                                 |
-|------------------|---------------------------------------------|----------|-----------------------------------------------------------------------------|
-| `amount`         | `number`                                    | Yes      | The amount to be charged in the specified fiat currency.                    |
-| `fiatCurrency`   | `string`                                    | Yes      | The fiat currency code (e.g., "USD", "EUR").                               |
-| `accessId`       | `string`                                    | Yes      | Your Tender Cash merchant Access ID.                                        |
-| `accessSecret`   | `string`                                    | Yes      | Your Tender Cash merchant Access Secret.                                    |
-| `env`            | `"test"` \| `"live"`                        | Yes      | The environment to use (`"test"` for testing, `"live"` for production).     |
-| `onEventResponse`| `(data: onFinishResponse) => void`          | No       | Optional callback function triggered on payment completion or status change. |
+#### Required Props
+
+| Prop             | Type                                        | Description                                                                 |
+|------------------|---------------------------------------------|-----------------------------------------------------------------------------|
+| `fiatCurrency`   | `string`                                    | The fiat currency code (e.g., "USD", "EUR").                               |
+| `accessId`       | `string`                                    | Your Tender Cash merchant Access ID.                                        |
+| `env`            | `"test"` \| `"live"` \| `"local"`          | The environment to use (`"test"` for testing, `"live"` for production, `"local"` for local development). |
+
+#### Optional Props
+
+| Prop                    | Type                                        | Description                                                                 |
+|-------------------------|---------------------------------------------|-----------------------------------------------------------------------------|
+| `onEventResponse`       | `(data: onFinishResponse) => void`          | Callback function triggered on payment completion or status change.         |
+| `referenceId`           | `string`                                    | Payment reference ID. Required to auto-open the modal.                     |
+| `amount`               | `number`                                    | Payment amount in fiat currency. Required to auto-open the modal.          |
+| `paymentExpirySeconds` | `number`                                    | Payment expiry time in seconds. Optional, defaults to 30 minutes.           |
+| `theme`                | `"light"` \| `"dark"`                       | Theme for the payment modal. Optional, defaults to "light".                 |
+
+**Note:** When `referenceId` and `amount` are provided as props, the modal will automatically open on component mount.
 
 ## Callback Data (`onFinishResponse`)
 
@@ -129,6 +107,13 @@ interface IPaymentData {
 }
 ```
 
+## Features
+
+- **Shadow DOM Isolation**: The component uses Shadow DOM to prevent CSS leaks and conflicts with your application styles.
+- **Auto-Open**: The modal automatically opens when payment parameters are provided.
+- **TypeScript Support**: Full TypeScript definitions included.
+- **Responsive Design**: Works seamlessly on desktop and mobile devices.
+
 ## License
 
 [MIT](./LICENSE)