azirid-react 0.10.4 → 0.11.0

package/dist/index.cjs

@@ -119,6 +119,7 @@ var SUFFIXES = {
   checkout: "billing/checkout",
   billingPortal: "billing/portal",
   invoices: "billing/invoices",
+  uploadTransferProof: "billing/upload-proof",
   submitTransferProof: "billing/transfer-proof",
   transferProofs: "billing/transfer-proofs",
   payphoneConfirm: "billing/payphone/confirm",
@@ -1164,7 +1165,7 @@ var LoginForm = react.forwardRef(
     submitText: submitTextProp,
     footer,
     forgotPassword,
-    showSocialButtons = true,
+    showSocialButtons = false,
     labels,
     defaultValues
   }, ref) => {
@@ -1350,7 +1351,7 @@ var SignupForm = react.forwardRef(
     logo: logoProp,
     submitText: submitTextProp,
     footer,
-    showSocialButtons = true,
+    showSocialButtons = false,
     labels
   }, ref) => {
     const msg = useMessages();
@@ -3245,6 +3246,81 @@ function usePayButton({
     error: currentError
   };
 }
+function useUploadTransferProof(options) {
+  const client = useAccessClient();
+  const [isUploading, setIsUploading] = react.useState(false);
+  const [publicUrl, setPublicUrl] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const upload = react.useCallback(
+    async (file) => {
+      setIsUploading(true);
+      setError(null);
+      try {
+        const presigned = await client.post(
+          client.paths.uploadTransferProof,
+          {
+            contentType: file.type,
+            fileSize: file.size
+          }
+        );
+        const uploadRes = await fetch(presigned.uploadUrl, {
+          method: "PUT",
+          headers: { "Content-Type": file.type },
+          body: file
+        });
+        if (!uploadRes.ok) {
+          throw new Error(`Upload failed: ${uploadRes.status}`);
+        }
+        setPublicUrl(presigned.publicUrl);
+        options?.onSuccess?.(presigned);
+        return presigned;
+      } catch (err) {
+        const error2 = err instanceof Error ? err : new Error("Upload failed");
+        setError(error2);
+        options?.onError?.(error2);
+        throw error2;
+      } finally {
+        setIsUploading(false);
+      }
+    },
+    [client, options]
+  );
+  const reset = react.useCallback(() => {
+    setPublicUrl(null);
+    setError(null);
+    setIsUploading(false);
+  }, []);
+  return react.useMemo(
+    () => ({ upload, isUploading, publicUrl, error, reset }),
+    [upload, isUploading, publicUrl, error, reset]
+  );
+}
+function useSubmitTransferProof(options) {
+  const client = useAccessClient();
+  const queryClient = reactQuery.useQueryClient();
+  const mutation = reactQuery.useMutation({
+    mutationFn: (data) => client.post(client.paths.submitTransferProof, data),
+    onSuccess: (data) => {
+      void queryClient.invalidateQueries({ queryKey: ["transferProofs"] });
+      options?.onSuccess?.(data);
+    },
+    onError: options?.onError
+  });
+  const submit = react.useCallback(
+    (data) => {
+      mutation.mutate(data);
+    },
+    [mutation]
+  );
+  return react.useMemo(() => ({ ...mutation, submit }), [mutation, submit]);
+}
+function useTransferProofs() {
+  const client = useAccessClient();
+  return reactQuery.useQuery({
+    queryKey: ["transferProofs"],
+    queryFn: () => client.get(client.paths.transferProofs)
+  });
+}
 var PROVIDER_LABELS3 = {
   STRIPE: { en: "Credit/Debit Card", es: "Tarjeta de cr\xE9dito/d\xE9bito" },
   PAYPAL: { en: "PayPal", es: "PayPal" },
@@ -3344,89 +3420,366 @@ function ProviderModal({
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: modalStyles.cancelButton, onClick: onClose, children: labels?.cancel ?? "Cancel" })
   ] }) });
 }
-function TransferModal2({ data, onClose, labels }) {
+var ACCEPTED_FILE_TYPES = "image/png,image/jpeg,image/webp,application/pdf";
+var MAX_FILE_SIZE_MB = 10;
+function TransferModal2({ data, onClose, onProofSubmitted, labels }) {
   const bankDetails = data.bankDetails;
   const plan = data.plan;
   const intent = data.intent;
   const displayAmount = plan ? formatAmount(plan.amount, plan.currency) : intent ? formatAmount(intent.amount, intent.currency) : "";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.card, onClick: (e) => e.stopPropagation(), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h2", { style: modalStyles.title, children: labels?.bankTransfer ?? "Bank Transfer" }),
-    displayAmount && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          textAlign: "center",
-          padding: "16px",
-          backgroundColor: "#f9fafb",
-          borderRadius: "8px",
-          marginBottom: "20px"
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: displayAmount }),
-          plan?.name && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: plan.name }),
-          intent?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: intent.description })
-        ]
-      }
-    ),
-    bankDetails && Object.keys(bankDetails).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          style: {
-            fontSize: "14px",
-            fontWeight: 600,
-            color: "#111827",
-            marginBottom: "8px"
-          },
-          children: "Bank Details"
-        }
-      ),
-      Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          style: {
-            display: "flex",
-            justifyContent: "space-between",
-            padding: "6px 0",
-            borderBottom: "1px solid #f3f4f6",
-            fontSize: "13px"
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280" }, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#111827", fontWeight: 500 }, children: value })
-          ]
-        },
-        key
-      ))
-    ] }),
-    data.transferInstructions && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          padding: "12px",
-          backgroundColor: "#eff6ff",
-          borderRadius: "6px",
-          fontSize: "13px",
-          color: "#1e40af",
-          lineHeight: 1.5,
-          marginBottom: "16px"
-        },
-        children: data.transferInstructions
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "p",
-      {
-        style: {
-          fontSize: "13px",
-          color: "#9ca3af",
-          margin: "12px 0 0 0"
-        },
-        children: "After completing the transfer, submit your proof of payment. Your access will be activated once the transfer is verified."
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: modalStyles.cancelButton, onClick: onClose, children: "Close" })
-  ] }) });
+  const amount = plan?.amount ?? intent?.amount ?? 0;
+  const currency = plan?.currency ?? intent?.currency ?? "USD";
+  const intentId = intent?.id;
+  const [step, setStep] = react.useState("details");
+  const [selectedFile, setSelectedFile] = react.useState(null);
+  const [previewUrl, setPreviewUrl] = react.useState(null);
+  const [errorMessage, setErrorMessage] = react.useState(null);
+  const fileInputRef = react.useRef(null);
+  const { upload, isUploading } = useUploadTransferProof({
+    onError: (err) => {
+      setErrorMessage(err.message);
+      setStep("error");
+    }
+  });
+  const { submit, isPending: isSubmitting } = useSubmitTransferProof({
+    onSuccess: (proof) => {
+      setStep("submitted");
+      onProofSubmitted?.(proof);
+    },
+    onError: (err) => {
+      setErrorMessage(err.message);
+      setStep("error");
+    }
+  });
+  const handleFileSelect = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (file.size > MAX_FILE_SIZE_MB * 1024 * 1024) {
+      setErrorMessage(`File size exceeds ${MAX_FILE_SIZE_MB}MB limit`);
+      return;
+    }
+    setSelectedFile(file);
+    setErrorMessage(null);
+    if (file.type.startsWith("image/")) {
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+    } else {
+      setPreviewUrl(null);
+    }
+  };
+  const handleSubmit = async () => {
+    if (!selectedFile) return;
+    try {
+      setStep("uploading");
+      const result = await upload(selectedFile);
+      setStep("submitting");
+      submit({
+        intentId,
+        fileUrl: result.publicUrl,
+        fileName: selectedFile.name,
+        fileType: selectedFile.type,
+        amount,
+        currency
+      });
+    } catch {
+    }
+  };
+  const handleRetry = () => {
+    setStep("details");
+    setErrorMessage(null);
+  };
+  const isProcessing = isUploading || isSubmitting;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.overlay, onClick: isProcessing ? void 0 : onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: { ...modalStyles.card, maxHeight: "90vh", overflowY: "auto" },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { style: modalStyles.title, children: labels?.bankTransfer ?? "Bank Transfer" }),
+        displayAmount && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              padding: "16px",
+              backgroundColor: "#f9fafb",
+              borderRadius: "8px",
+              marginBottom: "20px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: displayAmount }),
+              plan?.name && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: plan.name }),
+              intent?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: intent.description })
+            ]
+          }
+        ),
+        bankDetails && Object.keys(bankDetails).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "#111827",
+                marginBottom: "8px"
+              },
+              children: labels?.bankDetails ?? "Bank Details"
+            }
+          ),
+          Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                padding: "6px 0",
+                borderBottom: "1px solid #f3f4f6",
+                fontSize: "13px"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#6b7280" }, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#111827", fontWeight: 500 }, children: value })
+              ]
+            },
+            key
+          ))
+        ] }),
+        data.transferInstructions && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              padding: "12px",
+              backgroundColor: "#eff6ff",
+              borderRadius: "6px",
+              fontSize: "13px",
+              color: "#1e40af",
+              lineHeight: 1.5,
+              marginBottom: "16px"
+            },
+            children: data.transferInstructions
+          }
+        ),
+        step === "submitted" ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              textAlign: "center",
+              padding: "20px",
+              backgroundColor: "#f0fdf4",
+              borderRadius: "8px",
+              marginBottom: "16px"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", marginBottom: "8px" }, children: "\u2705" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "16px", fontWeight: 600, color: "#166534" }, children: labels?.proofSubmitted ?? "Proof submitted successfully" }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "13px", color: "#15803d", margin: "8px 0 0 0" }, children: labels?.proofPendingReview ?? "Your payment proof is under review. You will be notified once it is verified." })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: "16px" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                fontWeight: 600,
+                color: "#111827",
+                marginBottom: "8px"
+              },
+              children: labels?.uploadProof ?? "Upload proof of payment"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: ACCEPTED_FILE_TYPES,
+              style: { display: "none" },
+              onChange: handleFileSelect
+            }
+          ),
+          !selectedFile ? /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              style: {
+                width: "100%",
+                padding: "24px 16px",
+                border: "2px dashed #d1d5db",
+                borderRadius: "8px",
+                backgroundColor: "#fafafa",
+                cursor: "pointer",
+                textAlign: "center",
+                fontFamily: "inherit"
+              },
+              onClick: () => fileInputRef.current?.click(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "28px", marginBottom: "8px" }, children: "\u{1F4C4}" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#374151", fontWeight: 500 }, children: labels?.selectFile ?? "Click to select file" }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px" }, children: labels?.acceptedFormats ?? "PNG, JPG, WebP or PDF (max 10MB)" })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                border: "1px solid #e5e7eb",
+                borderRadius: "8px",
+                padding: "12px",
+                backgroundColor: "#fafafa"
+              },
+              children: [
+                previewUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: previewUrl,
+                    alt: "Transfer proof preview",
+                    style: {
+                      width: "100%",
+                      maxHeight: "200px",
+                      objectFit: "contain",
+                      borderRadius: "6px",
+                      marginBottom: "8px"
+                    }
+                  }
+                ),
+                selectedFile.type === "application/pdf" && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      padding: "12px",
+                      backgroundColor: "#fef2f2",
+                      borderRadius: "6px",
+                      marginBottom: "8px"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "24px" }, children: "\u{1F4C4}" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "13px",
+                            color: "#991b1b",
+                            fontWeight: 500,
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap"
+                          },
+                          children: selectedFile.name
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "12px", color: "#6b7280" }, children: [
+                        selectedFile.name,
+                        " (",
+                        (selectedFile.size / 1024 / 1024).toFixed(2),
+                        " MB)"
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          style: {
+                            fontSize: "12px",
+                            color: "#3b82f6",
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            fontFamily: "inherit",
+                            padding: 0
+                          },
+                          onClick: () => {
+                            setSelectedFile(null);
+                            setPreviewUrl(null);
+                            if (fileInputRef.current) fileInputRef.current.value = "";
+                          },
+                          disabled: isProcessing,
+                          children: labels?.changeFile ?? "Change"
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                marginTop: "8px",
+                padding: "8px 12px",
+                backgroundColor: "#fef2f2",
+                borderRadius: "6px",
+                fontSize: "13px",
+                color: "#dc2626"
+              },
+              children: errorMessage
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: {
+                display: "block",
+                width: "100%",
+                marginTop: "12px",
+                padding: "12px",
+                border: "none",
+                borderRadius: "8px",
+                backgroundColor: !selectedFile || isProcessing ? "#d1d5db" : "#111827",
+                color: "#fff",
+                fontSize: "14px",
+                fontWeight: 600,
+                cursor: !selectedFile || isProcessing ? "not-allowed" : "pointer",
+                fontFamily: "inherit"
+              },
+              onClick: handleSubmit,
+              disabled: !selectedFile || isProcessing,
+              children: isUploading ? labels?.uploading ?? "Uploading..." : isSubmitting ? labels?.submitting ?? "Submitting..." : step === "error" ? labels?.retry ?? "Retry" : labels?.submitProof ?? "Submit proof of payment"
+            }
+          ),
+          step === "error" && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              style: {
+                ...modalStyles.cancelButton,
+                marginTop: "8px"
+              },
+              onClick: handleRetry,
+              children: labels?.tryAgain ?? "Try again"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            style: modalStyles.cancelButton,
+            onClick: onClose,
+            disabled: isProcessing,
+            children: step === "submitted" ? labels?.done ?? "Done" : labels?.cancel ?? "Cancel"
+          }
+        )
+      ]
+    }
+  ) });
 }
 function PayButton({
   planId,
@@ -3439,7 +3792,8 @@ function PayButton({
   disabled,
   onSuccess,
   onError,
-  onProviderSelect
+  onProviderSelect,
+  onProofSubmitted
 }) {
   const messages = useMessages();
   const billing = messages?.billing;
@@ -3523,6 +3877,7 @@ function PayButton({
           setShowTransferModal(false);
           onSuccess?.(checkoutData);
         },
+        onProofSubmitted,
         labels: billing
       }
     ),
@@ -4017,32 +4372,6 @@ function usePasskeys(options) {
     loginVerify
   };
 }
-function useSubmitTransferProof(options) {
-  const client = useAccessClient();
-  const queryClient = reactQuery.useQueryClient();
-  const mutation = reactQuery.useMutation({
-    mutationFn: (data) => client.post(client.paths.submitTransferProof, data),
-    onSuccess: (data) => {
-      void queryClient.invalidateQueries({ queryKey: ["transferProofs"] });
-      options?.onSuccess?.(data);
-    },
-    onError: options?.onError
-  });
-  const submit = react.useCallback(
-    (data) => {
-      mutation.mutate(data);
-    },
-    [mutation]
-  );
-  return react.useMemo(() => ({ ...mutation, submit }), [mutation, submit]);
-}
-function useTransferProofs() {
-  const client = useAccessClient();
-  return reactQuery.useQuery({
-    queryKey: ["transferProofs"],
-    queryFn: () => client.get(client.paths.transferProofs)
-  });
-}
 var CONTAINER_ID = "pp-checkout-azirid";
 function usePayphoneCheckout({
   intentId,
@@ -4156,6 +4485,13 @@ function useTransferPayment({
       cancelUrl: responseUrl
     });
   }, [checkout, intentId, responseUrl]);
+  const { upload, isUploading } = useUploadTransferProof({
+    onError: (err) => {
+      setCurrentError(err);
+      setStatus("error");
+      onError?.(err);
+    }
+  });
   const { submit, isPending: isSubmitting } = useSubmitTransferProof({
     onSuccess: (proof) => {
       setStatus("submitted");
@@ -4173,7 +4509,7 @@ function useTransferPayment({
       setStatus("submitting");
       setCurrentError(null);
       submit({
-        planId: checkoutData.intent.id,
+        intentId: checkoutData.intent.id,
         fileUrl: data.fileUrl,
         fileName: data.fileName,
         fileType: data.fileType,
@@ -4184,6 +4520,29 @@ function useTransferPayment({
     },
     [submit, checkoutData]
   );
+  const uploadAndSubmitProof = react.useCallback(
+    async (file, notes) => {
+      if (!checkoutData?.intent) return;
+      setCurrentError(null);
+      try {
+        setStatus("uploading");
+        const result = await upload(file);
+        setStatus("submitting");
+        const intent = checkoutData.intent;
+        submit({
+          intentId: intent.id,
+          fileUrl: result.publicUrl,
+          fileName: file.name,
+          fileType: file.type,
+          amount: intent.amount ?? checkoutData.plan?.amount ?? 0,
+          currency: intent.currency ?? checkoutData.plan?.currency ?? "USD",
+          notes
+        });
+      } catch {
+      }
+    },
+    [upload, submit, checkoutData]
+  );
   const TransferDetails = react.useMemo(() => {
     return function TransferDetailsInner() {
       if (!checkoutData) return null;
@@ -4259,10 +4618,12 @@ function useTransferPayment({
   }, [checkoutData]);
   return {
     TransferDetails,
+    uploadAndSubmitProof,
     submitProof,
     status,
     checkoutData,
     isSubmitting,
+    isUploading,
     error: currentError
   };
 }
@@ -4358,7 +4719,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.10.4";
+var SDK_VERSION = "0.11.0";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;
@@ -4433,5 +4794,6 @@ exports.useTenantMembers = useTenantMembers;
 exports.useTenants = useTenants;
 exports.useTransferPayment = useTransferPayment;
 exports.useTransferProofs = useTransferProofs;
+exports.useUploadTransferProof = useUploadTransferProof;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map