@tender-cash/agent-sdk-react 0.3.6 → 1.0.0

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,17 +167,23 @@ 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;
 }
+interface StartPaymentParams {
+    referenceId: string;
+    amount: number;
+    paymentExpirySeconds?: number;
+}
+interface TenderAgentRef {
+    initiatePayment: (params: StartPaymentParams) => void;
+    dismiss: () => void;
+}
 interface PaymentChain {
     _id: string;
     name: string;
@@ -214,4 +219,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.0",
     "repository": "git://github.com/tender-cash/agent-sdk-react.git",
     "description": "",
     "author": "Tender",

package/readme.md

@@ -27,66 +27,54 @@ 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.
+For more control over the modal, use the `TenderAgentSdk` component with a ref. This allows you to programmatically initiate and dismiss the payment modal.
 
 ```jsx
-import React, { useState } from 'react';
+import { useRef } from 'react';
 import '@tender-cash/agent-sdk-react/dist/style.css'; // Don't forget styles!
-import { TenderAgentSdk, onFinishResponse } from '@tender-cash/agent-sdk-react';
+import { TenderAgentSdk, TenderAgentRef, onFinishResponse } from '@tender-cash/agent-sdk-react';
 
 function PaymentComponent() {
-  const [showSdk, setShowSdk] = useState(false);
-  const [sdkResponse, setSdkResponse] = useState<onFinishResponse | null>(null);
+  const tenderRef = useRef<TenderAgentRef>(null);
 
-  // --- Configuration ---
+  // --- Static 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
   };
 
+  const handleOpenModal = () => {
+    tenderRef.current?.initiatePayment({
+      amount: 150.00,
+      referenceId: 'unique-payment-reference-123',
+      paymentExpirySeconds: 1800,
+    });
+  };
+
+  const handleDismissModal = () => {
+    tenderRef.current?.dismiss();
+  };
+
   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>
-      )}
+      <button onClick={handleOpenModal}>
+        Pay ${amount.toFixed(2)} {fiatCurrency}
+      </button>
+      <button onClick={handleDismissModal}>
+        Close Modal
+      </button>
+
+      <TenderAgentSdk
+        ref={tenderRef}
+        accessId={accessId}
+        fiatCurrency={fiatCurrency}
+        env={environment}
+        onEventResponse={handleEventResponse}
+      />
     </div>
   );
 }
@@ -94,15 +82,54 @@ function PaymentComponent() {
 export default PaymentComponent;
 ```
 
-## Component Props (`TenderAgentProps`)
+## API Reference
+
+### `TenderAgentSdk` Component with Ref
+
+The `TenderAgentSdk` component can be used with a ref to programmatically control the modal.
+
+**Ref Methods (`TenderAgentRef`):**
+
+| Method              | Description                                              |
+|---------------------|----------------------------------------------------------|
+| `initiatePayment()` | Initiates a payment and opens the payment modal          |
+| `dismiss()`         | Closes/dismisses the payment modal                       |
+
+**Example:**
+```typescript
+import { useRef } from 'react';
+import { TenderAgentSdk, TenderAgentRef } from '@tender-cash/agent-sdk-react';
+
+const tenderRef = useRef<TenderAgentRef>(null);
+
+// Open modal
+tenderRef.current?.initiatePayment({
+  amount: 150.00,
+  referenceId: 'unique-payment-reference-123',
+  paymentExpirySeconds: 1800,
+});
+
+// Close modal
+tenderRef.current?.dismiss();
+
+// Render component
+<TenderAgentSdk
+  ref={tenderRef}
+  accessId="YOUR_ACCESS_ID"
+  fiatCurrency="USD"
+  env="test"
+/>;
+```
+
+### Component Props (`TenderAgentProps`)
+
+The `TenderAgentSdk` component (when used directly) accepts the following configuration 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).     |
+| `env`            | `"test"` \| `"live"` \| `"local"`          | Yes      | The environment to use (`"test"` for testing, `"live"` for production, `"local"` for local development). |
 | `onEventResponse`| `(data: onFinishResponse) => void`          | No       | Optional callback function triggered on payment completion or status change. |
 
 ## Callback Data (`onFinishResponse`)