intrpay-payments 1.0.0

package/README.md

@@ -0,0 +1,91 @@
+# intrpay-payment-package
+
+A lightweight React drawer component with an embedded iframe for payment integration.
+
+## Installation
+
+```bash
+npm install intrpay-payment-package
+```
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import { PaymentDrawer } from "intrpay-payment-package";
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Open Payment</button>
+
+      <PaymentDrawer
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        paymentLinkId="your-payment-link-id"
+        params={{
+          amount: 99.99,
+          firstName: "John",
+          lastName: "Doe",
+          email: "john@example.com",
+        }}
+      />
+    </>
+  );
+}
+```
+
+## Props
+
+### PaymentDrawerProps
+
+| Prop                  | Type                | Default   | Description                                |
+| --------------------- | ------------------- | --------- | ------------------------------------------ |
+| `isOpen`              | `boolean`           | required  | Whether the drawer is open                 |
+| `onClose`             | `() => void`        | required  | Callback when the drawer should close      |
+| `paymentLinkId`       | `string`            | required  | Payment link ID                            |
+| `params`              | `PaymentParams`     | -         | Payment parameters (see below)             |
+| `width`               | `string \| number`  | `400`     | Width of the drawer                        |
+| `position`            | `'left' \| 'right'` | `'right'` | Position of the drawer                     |
+| `showOverlay`         | `boolean`           | `true`    | Whether to show overlay backdrop           |
+| `closeOnOverlayClick` | `boolean`           | `true`    | Whether clicking overlay closes the drawer |
+| `zIndex`              | `number`            | `1000`    | Z-index for the drawer                     |
+
+### PaymentParams
+
+| Param             | Type                          | Description                           |
+| ----------------- | ----------------------------- | ------------------------------------- |
+| `amount`          | `number`                      | Payment amount                        |
+| `firstName`       | `string`                      | Customer's first name                 |
+| `lastName`        | `string`                      | Customer's last name                  |
+| `email`           | `string`                      | Customer's email                      |
+| `phone`           | `string`                      | Customer's phone number               |
+| `companyName`     | `string`                      | Company name                          |
+| `showContactForm` | `boolean`                     | Whether to show the contact form      |
+| `currency`        | `string`                      | Currency code (e.g., 'USD', 'EUR')    |
+| `reference`       | `string`                      | Custom reference/order ID             |
+| `redirectUrl`     | `string`                      | Redirect URL after successful payment |
+| `[key: string]`   | `string \| number \| boolean` | Additional custom parameters          |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the library
+npm run build
+
+# Watch mode
+npm run dev
+
+# Lint
+npm run lint
+npm run lint:fix
+```
+
+## License
+
+ISC

package/dist/index.cjs

@@ -0,0 +1,207 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PaymentDrawer: () => PaymentDrawer
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/PaymentDrawer.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var BASE_URL = "https://pay.intrpay.us";
+var baseParams = {
+  showHeader: false
+};
+function PaymentDrawer({
+  isOpen,
+  onClose,
+  paymentLinkId,
+  params,
+  width = 400,
+  position = "right",
+  showOverlay = true,
+  closeOnOverlayClick = true,
+  zIndex = 1e3
+}) {
+  const iframeUrl = (0, import_react.useMemo)(() => {
+    const url = new URL(`${BASE_URL}/${paymentLinkId}`);
+    const combinedParams = { ...baseParams, ...params };
+    Object.entries(combinedParams).forEach(([key, value]) => {
+      if (value !== void 0 && value !== null && value !== "") {
+        url.searchParams.set(key, String(value));
+      }
+    });
+    return url.toString();
+  }, [paymentLinkId, params]);
+  const handleKeyDown = (0, import_react.useCallback)(
+    (event) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    },
+    [isOpen, onClose]
+  );
+  (0, import_react.useEffect)(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  (0, import_react.useEffect)(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  const handleOverlayClick = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
+  const drawerWidth = typeof width === "number" ? `${width}px` : width;
+  const styles = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      zIndex,
+      opacity: isOpen ? 1 : 0,
+      visibility: isOpen ? "visible" : "hidden",
+      transition: "opacity 0.3s ease, visibility 0.3s ease"
+    },
+    drawer: {
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      [position]: 0,
+      width: drawerWidth,
+      maxWidth: "100%",
+      backgroundColor: "#ffffff",
+      zIndex: zIndex + 1,
+      boxShadow: position === "right" ? "-4px 0 20px rgba(0, 0, 0, 0.15)" : "4px 0 20px rgba(0, 0, 0, 0.15)",
+      transform: isOpen ? "translateX(0)" : `translateX(${position === "right" ? "100%" : "-100%"})`,
+      transition: "transform 0.3s ease",
+      display: "flex",
+      flexDirection: "column"
+    },
+    closeButton: {
+      position: "absolute",
+      top: 12,
+      right: 12,
+      width: 36,
+      height: 36,
+      border: "none",
+      backgroundColor: "#f3f4f6",
+      borderRadius: "50%",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#6b7280",
+      zIndex: 1
+    },
+    content: {
+      flex: 1,
+      overflow: "hidden",
+      paddingTop: 60
+    },
+    iframe: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    showOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: styles.overlay,
+        onClick: handleOverlayClick,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: styles.drawer,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Payment",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              style: styles.closeButton,
+              onClick: onClose,
+              "aria-label": "Close drawer",
+              type: "button",
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "#e5e7eb";
+                e.currentTarget.style.color = "#374151";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "#f3f4f6";
+                e.currentTarget.style.color = "#6b7280";
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "svg",
+                {
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.content, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "iframe",
+            {
+              src: isOpen ? iframeUrl : "about:blank",
+              title: "Payment",
+              style: styles.iframe,
+              allow: "payment; clipboard-write"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaymentDrawer
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/PaymentDrawer.tsx"],"sourcesContent":["export { PaymentDrawer } from './components/PaymentDrawer';\nexport type { PaymentDrawerProps, PaymentParams } from './components/PaymentDrawer';\n","import React, { useEffect, useCallback, useMemo, CSSProperties } from \"react\";\n\nconst BASE_URL = \"https://pay.intrpay.us\";\n\nconst baseParams = {\n  showHeader: false,\n};\n\nexport interface PaymentParams {\n  /** Payment amount */\n  amount?: number;\n  /** Customer's first name */\n  firstName?: string;\n  /** Customer's last name */\n  lastName?: string;\n  /** Customer's email */\n  email?: string;\n  /** Customer's phone number */\n  phone?: string;\n  /** Company name */\n  companyName?: string;\n  /** Whether to show the contact form */\n  showContactForm?: boolean;\n  /** Currency code (e.g., 'USD', 'EUR') */\n  // currency?: string;\n  // /** Custom reference/order ID */\n  // reference?: string;\n  // /** Redirect URL after successful payment */\n  // redirectUrl?: string;\n  // /** Additional custom parameters */\n  // [key: string]: string | number | boolean | undefined;\n}\n\nexport interface PaymentDrawerProps {\n  /** Whether the drawer is open */\n  isOpen: boolean;\n  /** Callback when the drawer should close */\n  onClose: () => void;\n  /** Payment link ID */\n  paymentLinkId: string;\n  /** Payment parameters to pass as URL query params */\n  params?: PaymentParams;\n  /** Width of the drawer (default: 400px) */\n  width?: string | number;\n  /** Position of the drawer */\n  position?: \"left\" | \"right\";\n  /** Whether to show overlay backdrop */\n  showOverlay?: boolean;\n  /** Whether clicking overlay closes the drawer */\n  closeOnOverlayClick?: boolean;\n  /** Z-index for the drawer */\n  zIndex?: number;\n}\n\nexport function PaymentDrawer({\n  isOpen,\n  onClose,\n  paymentLinkId,\n  params,\n  width = 400,\n  position = \"right\",\n  showOverlay = true,\n  closeOnOverlayClick = true,\n  zIndex = 1000,\n}: PaymentDrawerProps) {\n  const iframeUrl = useMemo(() => {\n    const url = new URL(`${BASE_URL}/${paymentLinkId}`);\n\n    // Combine base params with user params (user params override base)\n    const combinedParams = { ...baseParams, ...params };\n\n    Object.entries(combinedParams).forEach(([key, value]) => {\n      if (value !== undefined && value !== null && value !== \"\") {\n        url.searchParams.set(key, String(value));\n      }\n    });\n\n    return url.toString();\n  }, [paymentLinkId, params]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && isOpen) {\n        onClose();\n      }\n    },\n    [isOpen, onClose],\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [handleKeyDown]);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"\";\n    }\n    return () => {\n      document.body.style.overflow = \"\";\n    };\n  }, [isOpen]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlayClick) {\n      onClose();\n    }\n  };\n\n  const drawerWidth = typeof width === \"number\" ? `${width}px` : width;\n\n  const styles: Record<string, CSSProperties> = {\n    overlay: {\n      position: \"fixed\",\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n      zIndex,\n      opacity: isOpen ? 1 : 0,\n      visibility: isOpen ? \"visible\" : \"hidden\",\n      transition: \"opacity 0.3s ease, visibility 0.3s ease\",\n    },\n    drawer: {\n      position: \"fixed\",\n      top: 0,\n      bottom: 0,\n      [position]: 0,\n      width: drawerWidth,\n      maxWidth: \"100%\",\n      backgroundColor: \"#ffffff\",\n      zIndex: zIndex + 1,\n      boxShadow:\n        position === \"right\"\n          ? \"-4px 0 20px rgba(0, 0, 0, 0.15)\"\n          : \"4px 0 20px rgba(0, 0, 0, 0.15)\",\n      transform: isOpen\n        ? \"translateX(0)\"\n        : `translateX(${position === \"right\" ? \"100%\" : \"-100%\"})`,\n      transition: \"transform 0.3s ease\",\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    closeButton: {\n      position: \"absolute\",\n      top: 12,\n      right: 12,\n      width: 36,\n      height: 36,\n      border: \"none\",\n      backgroundColor: \"#f3f4f6\",\n      borderRadius: \"50%\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      color: \"#6b7280\",\n      zIndex: 1,\n    },\n    content: {\n      flex: 1,\n      overflow: \"hidden\",\n      paddingTop: 60,\n    },\n    iframe: {\n      width: \"100%\",\n      height: \"100%\",\n      border: \"none\",\n    },\n  };\n\n  return (\n    <>\n      {showOverlay && (\n        <div\n          style={styles.overlay}\n          onClick={handleOverlayClick}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        style={styles.drawer}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"Payment\"\n      >\n        <button\n          style={styles.closeButton}\n          onClick={onClose}\n          aria-label=\"Close drawer\"\n          type=\"button\"\n          onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {\n            e.currentTarget.style.backgroundColor = \"#e5e7eb\";\n            e.currentTarget.style.color = \"#374151\";\n          }}\n          onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {\n            e.currentTarget.style.backgroundColor = \"#f3f4f6\";\n            e.currentTarget.style.color = \"#6b7280\";\n          }}\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n        <div style={styles.content}>\n          <iframe\n            src={isOpen ? iframeUrl : \"about:blank\"}\n            title=\"Payment\"\n            style={styles.iframe}\n            allow=\"payment; clipboard-write\"\n          />\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PaymentParams {
+    /** Payment amount */
+    amount?: number;
+    /** Customer's first name */
+    firstName?: string;
+    /** Customer's last name */
+    lastName?: string;
+    /** Customer's email */
+    email?: string;
+    /** Customer's phone number */
+    phone?: string;
+    /** Company name */
+    companyName?: string;
+    /** Whether to show the contact form */
+    showContactForm?: boolean;
+}
+interface PaymentDrawerProps {
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Callback when the drawer should close */
+    onClose: () => void;
+    /** Payment link ID */
+    paymentLinkId: string;
+    /** Payment parameters to pass as URL query params */
+    params?: PaymentParams;
+    /** Width of the drawer (default: 400px) */
+    width?: string | number;
+    /** Position of the drawer */
+    position?: "left" | "right";
+    /** Whether to show overlay backdrop */
+    showOverlay?: boolean;
+    /** Whether clicking overlay closes the drawer */
+    closeOnOverlayClick?: boolean;
+    /** Z-index for the drawer */
+    zIndex?: number;
+}
+declare function PaymentDrawer({ isOpen, onClose, paymentLinkId, params, width, position, showOverlay, closeOnOverlayClick, zIndex, }: PaymentDrawerProps): react_jsx_runtime.JSX.Element;
+
+export { PaymentDrawer, type PaymentDrawerProps, type PaymentParams };

package/dist/index.d.ts

@@ -0,0 +1,41 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PaymentParams {
+    /** Payment amount */
+    amount?: number;
+    /** Customer's first name */
+    firstName?: string;
+    /** Customer's last name */
+    lastName?: string;
+    /** Customer's email */
+    email?: string;
+    /** Customer's phone number */
+    phone?: string;
+    /** Company name */
+    companyName?: string;
+    /** Whether to show the contact form */
+    showContactForm?: boolean;
+}
+interface PaymentDrawerProps {
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Callback when the drawer should close */
+    onClose: () => void;
+    /** Payment link ID */
+    paymentLinkId: string;
+    /** Payment parameters to pass as URL query params */
+    params?: PaymentParams;
+    /** Width of the drawer (default: 400px) */
+    width?: string | number;
+    /** Position of the drawer */
+    position?: "left" | "right";
+    /** Whether to show overlay backdrop */
+    showOverlay?: boolean;
+    /** Whether clicking overlay closes the drawer */
+    closeOnOverlayClick?: boolean;
+    /** Z-index for the drawer */
+    zIndex?: number;
+}
+declare function PaymentDrawer({ isOpen, onClose, paymentLinkId, params, width, position, showOverlay, closeOnOverlayClick, zIndex, }: PaymentDrawerProps): react_jsx_runtime.JSX.Element;
+
+export { PaymentDrawer, type PaymentDrawerProps, type PaymentParams };

package/dist/index.js

@@ -0,0 +1,180 @@
+// src/components/PaymentDrawer.tsx
+import { useEffect, useCallback, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var BASE_URL = "https://pay.intrpay.us";
+var baseParams = {
+  showHeader: false
+};
+function PaymentDrawer({
+  isOpen,
+  onClose,
+  paymentLinkId,
+  params,
+  width = 400,
+  position = "right",
+  showOverlay = true,
+  closeOnOverlayClick = true,
+  zIndex = 1e3
+}) {
+  const iframeUrl = useMemo(() => {
+    const url = new URL(`${BASE_URL}/${paymentLinkId}`);
+    const combinedParams = { ...baseParams, ...params };
+    Object.entries(combinedParams).forEach(([key, value]) => {
+      if (value !== void 0 && value !== null && value !== "") {
+        url.searchParams.set(key, String(value));
+      }
+    });
+    return url.toString();
+  }, [paymentLinkId, params]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    },
+    [isOpen, onClose]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  const handleOverlayClick = () => {
+    if (closeOnOverlayClick) {
+      onClose();
+    }
+  };
+  const drawerWidth = typeof width === "number" ? `${width}px` : width;
+  const styles = {
+    overlay: {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      zIndex,
+      opacity: isOpen ? 1 : 0,
+      visibility: isOpen ? "visible" : "hidden",
+      transition: "opacity 0.3s ease, visibility 0.3s ease"
+    },
+    drawer: {
+      position: "fixed",
+      top: 0,
+      bottom: 0,
+      [position]: 0,
+      width: drawerWidth,
+      maxWidth: "100%",
+      backgroundColor: "#ffffff",
+      zIndex: zIndex + 1,
+      boxShadow: position === "right" ? "-4px 0 20px rgba(0, 0, 0, 0.15)" : "4px 0 20px rgba(0, 0, 0, 0.15)",
+      transform: isOpen ? "translateX(0)" : `translateX(${position === "right" ? "100%" : "-100%"})`,
+      transition: "transform 0.3s ease",
+      display: "flex",
+      flexDirection: "column"
+    },
+    closeButton: {
+      position: "absolute",
+      top: 12,
+      right: 12,
+      width: 36,
+      height: 36,
+      border: "none",
+      backgroundColor: "#f3f4f6",
+      borderRadius: "50%",
+      cursor: "pointer",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#6b7280",
+      zIndex: 1
+    },
+    content: {
+      flex: 1,
+      overflow: "hidden",
+      paddingTop: 60
+    },
+    iframe: {
+      width: "100%",
+      height: "100%",
+      border: "none"
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showOverlay && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: styles.overlay,
+        onClick: handleOverlayClick,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: styles.drawer,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Payment",
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: styles.closeButton,
+              onClick: onClose,
+              "aria-label": "Close drawer",
+              type: "button",
+              onMouseEnter: (e) => {
+                e.currentTarget.style.backgroundColor = "#e5e7eb";
+                e.currentTarget.style.color = "#374151";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.backgroundColor = "#f3f4f6";
+                e.currentTarget.style.color = "#6b7280";
+              },
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "24",
+                  height: "24",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                    /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                  ]
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: styles.content, children: /* @__PURE__ */ jsx(
+            "iframe",
+            {
+              src: isOpen ? iframeUrl : "about:blank",
+              title: "Payment",
+              style: styles.iframe,
+              allow: "payment; clipboard-write"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  PaymentDrawer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PaymentDrawer.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useMemo, CSSProperties } from \"react\";\n\nconst BASE_URL = \"https://pay.intrpay.us\";\n\nconst baseParams = {\n  showHeader: false,\n};\n\nexport interface PaymentParams {\n  /** Payment amount */\n  amount?: number;\n  /** Customer's first name */\n  firstName?: string;\n  /** Customer's last name */\n  lastName?: string;\n  /** Customer's email */\n  email?: string;\n  /** Customer's phone number */\n  phone?: string;\n  /** Company name */\n  companyName?: string;\n  /** Whether to show the contact form */\n  showContactForm?: boolean;\n  /** Currency code (e.g., 'USD', 'EUR') */\n  // currency?: string;\n  // /** Custom reference/order ID */\n  // reference?: string;\n  // /** Redirect URL after successful payment */\n  // redirectUrl?: string;\n  // /** Additional custom parameters */\n  // [key: string]: string | number | boolean | undefined;\n}\n\nexport interface PaymentDrawerProps {\n  /** Whether the drawer is open */\n  isOpen: boolean;\n  /** Callback when the drawer should close */\n  onClose: () => void;\n  /** Payment link ID */\n  paymentLinkId: string;\n  /** Payment parameters to pass as URL query params */\n  params?: PaymentParams;\n  /** Width of the drawer (default: 400px) */\n  width?: string | number;\n  /** Position of the drawer */\n  position?: \"left\" | \"right\";\n  /** Whether to show overlay backdrop */\n  showOverlay?: boolean;\n  /** Whether clicking overlay closes the drawer */\n  closeOnOverlayClick?: boolean;\n  /** Z-index for the drawer */\n  zIndex?: number;\n}\n\nexport function PaymentDrawer({\n  isOpen,\n  onClose,\n  paymentLinkId,\n  params,\n  width = 400,\n  position = \"right\",\n  showOverlay = true,\n  closeOnOverlayClick = true,\n  zIndex = 1000,\n}: PaymentDrawerProps) {\n  const iframeUrl = useMemo(() => {\n    const url = new URL(`${BASE_URL}/${paymentLinkId}`);\n\n    // Combine base params with user params (user params override base)\n    const combinedParams = { ...baseParams, ...params };\n\n    Object.entries(combinedParams).forEach(([key, value]) => {\n      if (value !== undefined && value !== null && value !== \"\") {\n        url.searchParams.set(key, String(value));\n      }\n    });\n\n    return url.toString();\n  }, [paymentLinkId, params]);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === \"Escape\" && isOpen) {\n        onClose();\n      }\n    },\n    [isOpen, onClose],\n  );\n\n  useEffect(() => {\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [handleKeyDown]);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"\";\n    }\n    return () => {\n      document.body.style.overflow = \"\";\n    };\n  }, [isOpen]);\n\n  const handleOverlayClick = () => {\n    if (closeOnOverlayClick) {\n      onClose();\n    }\n  };\n\n  const drawerWidth = typeof width === \"number\" ? `${width}px` : width;\n\n  const styles: Record<string, CSSProperties> = {\n    overlay: {\n      position: \"fixed\",\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n      zIndex,\n      opacity: isOpen ? 1 : 0,\n      visibility: isOpen ? \"visible\" : \"hidden\",\n      transition: \"opacity 0.3s ease, visibility 0.3s ease\",\n    },\n    drawer: {\n      position: \"fixed\",\n      top: 0,\n      bottom: 0,\n      [position]: 0,\n      width: drawerWidth,\n      maxWidth: \"100%\",\n      backgroundColor: \"#ffffff\",\n      zIndex: zIndex + 1,\n      boxShadow:\n        position === \"right\"\n          ? \"-4px 0 20px rgba(0, 0, 0, 0.15)\"\n          : \"4px 0 20px rgba(0, 0, 0, 0.15)\",\n      transform: isOpen\n        ? \"translateX(0)\"\n        : `translateX(${position === \"right\" ? \"100%\" : \"-100%\"})`,\n      transition: \"transform 0.3s ease\",\n      display: \"flex\",\n      flexDirection: \"column\",\n    },\n    closeButton: {\n      position: \"absolute\",\n      top: 12,\n      right: 12,\n      width: 36,\n      height: 36,\n      border: \"none\",\n      backgroundColor: \"#f3f4f6\",\n      borderRadius: \"50%\",\n      cursor: \"pointer\",\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      color: \"#6b7280\",\n      zIndex: 1,\n    },\n    content: {\n      flex: 1,\n      overflow: \"hidden\",\n      paddingTop: 60,\n    },\n    iframe: {\n      width: \"100%\",\n      height: \"100%\",\n      border: \"none\",\n    },\n  };\n\n  return (\n    <>\n      {showOverlay && (\n        <div\n          style={styles.overlay}\n          onClick={handleOverlayClick}\n          aria-hidden=\"true\"\n        />\n      )}\n      <div\n        style={styles.drawer}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label=\"Payment\"\n      >\n        <button\n          style={styles.closeButton}\n          onClick={onClose}\n          aria-label=\"Close drawer\"\n          type=\"button\"\n          onMouseEnter={(e: React.MouseEvent<HTMLButtonElement>) => {\n            e.currentTarget.style.backgroundColor = \"#e5e7eb\";\n            e.currentTarget.style.color = \"#374151\";\n          }}\n          onMouseLeave={(e: React.MouseEvent<HTMLButtonElement>) => {\n            e.currentTarget.style.backgroundColor = \"#f3f4f6\";\n            e.currentTarget.style.color = \"#6b7280\";\n          }}\n        >\n          <svg\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n          </svg>\n        </button>\n        <div style={styles.content}>\n          <iframe\n            src={isOpen ? iframeUrl : \"about:blank\"}\n            title=\"Payment\"\n            style={styles.iframe}\n            allow=\"payment; clipboard-write\"\n          />\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "intrpay-payments",
+  "version": "1.0.0",
+  "description": "A package for integrating Intrpay payments into your React application",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "drawer",
+    "iframe",
+    "payment",
+    "component"
+  ],
+  "author": "Intrsync",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0"
+  }
+}