@miden-npm/react 2.1.3 → 2.1.5

package/dist/index.cjs

@@ -1700,7 +1700,7 @@ function BaseCard({
   onClose,
   caller = "buzapay"
 }) {
-  return caller === "buzapay" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-1/2", children: [
+  return caller === "buzapay" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2", children: [
     showBackButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseBack, { back: () => onBack?.() }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex gap-2 w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-8 w-full", children: [
@@ -1714,12 +1714,12 @@ function BaseCard({
         "div",
         {
           onClick: onClose,
-          className: "close-icon flex flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500",
+          className: "hidden sm:flex close-icon flex-col items-center justify-center self-start cursor-pointer hover:bg-gray-500",
           children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-white", children: "x" })
         }
       )
     ] })
-  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-1/2", children: [
+  ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "checkout-card-miden w-full h-screen flex flex-col items-center justify-center text-white", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex w-[95%] sm:w-[85%] md:w-[70%] lg:w-[60%] xl:w-1/2", children: [
     showBackButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(BaseBack, { back: () => onBack?.() }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex gap-2 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col gap-8 w-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "bg-white rounded-xl", children }),
@@ -2896,7 +2896,7 @@ function PayByCard({
     cardNo: "required|num_spaces",
     expireDate: "required",
     cvv: "required|numeric",
-    cardPin: ""
+    cardPin: cardType === "Verve" ? "required" : ""
     // optional unless Verve
   };
   const formatAmountHandler = formatAmount(
@@ -3149,11 +3149,11 @@ function PayByCard({
           setIsMakingPayment(false);
           return;
         }
-        if (response && response.message) {
-          setMessage(response.message);
-          onError?.({
-            errorMessage: response.message
-          });
+        if (response && !response.isSuccessful && caller === "miden") {
+          onError?.({ errorMessage: response.responseMessage });
+        }
+        if (response && response.message && caller === "buzapay") {
+          onError?.({ errorMessage: response.message });
         }
         setIsMakingPayment(false);
       } catch (err) {
@@ -3323,7 +3323,7 @@ function PayByCard({
           validationError: billingErrors.address2 ?? ""
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseSelect,
         {
           label: "Select Country",
@@ -3348,8 +3348,8 @@ function PayByCard({
           },
           validationError: billingErrors.country ?? ""
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseSelect,
         {
           label: "Select State",
@@ -3365,8 +3365,8 @@ function PayByCard({
           },
           validationError: billingErrors.state ?? ""
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
           label: "City",
@@ -3380,8 +3380,8 @@ function PayByCard({
           },
           validationError: billingErrors.city ?? ""
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2 sm:col-span-1", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
           label: "Postal Code",
@@ -3395,7 +3395,7 @@ function PayByCard({
           },
           validationError: billingErrors.postalCode ?? ""
         }
-      ),
+      ) }),
       /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "col-span-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         BaseInput,
         {
@@ -3463,10 +3463,10 @@ function PayByCard({
               label: "Card Number",
               required: true,
               rules: ["numeric"],
-              mask: "0000 0000 0000 0000",
+              mask: "0000 0000 0000 0000 000",
               placeholder: "0000 0000 0000 0000",
               value: payForm.cardNo,
-              preventPaste: false,
+              preventPaste: true,
               onChange: (e) => {
                 setPayForm({ ...payForm, cardNo: e });
                 if (payErrors.cardNo)
@@ -3617,11 +3617,19 @@ var PayByTransfer = ({
             caller
           );
           if (response?.isSuccessful) {
-            setPaymentAccountDetails(response);
+            setPaymentAccountDetails(
+              caller === "buzapay" ? response.data : response
+            );
             startTimer();
             setMessage("Virtual account generated successfully for payment.");
             setIsMakingPayment(true);
             setFormIndex(1);
+          } else {
+            setIsMakingPayment(false);
+            setMessage("Payment failed.");
+            onError?.({
+              errorMessage: "Payment failed."
+            });
           }
         } catch (err) {
           setIsMakingPayment(false);
@@ -3643,10 +3651,12 @@ var PayByTransfer = ({
         caller
       );
       if (response?.isSuccessful) {
-        setPaymentReferenceDetails(response.data);
-        const made = response.data?.paymentStatus === "Payment Received";
+        setPaymentReferenceDetails(
+          caller === "buzapay" ? response.data : response
+        );
+        const made = paymentReferenceDetails?.paymentStatus === "Payment Received";
         setPaymentMade(made);
-        const noServerStatus = response.data?.finalTransactionStatus == null || response.data?.paymentStatus == null;
+        const noServerStatus = paymentReferenceDetails?.finalTransactionStatus == null || paymentReferenceDetails?.paymentStatus == null;
         if (noServerStatus) {
           if (isConfirmCall) {
             setMessage("Transaction not confirmed !!");
@@ -3655,7 +3665,7 @@ var PayByTransfer = ({
             setPaymentReferenceStatus("pending");
             onPaymentAuthorized?.({
               paymentId: transactionReference,
-              paymentDate: response?.data?.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+              paymentDate: paymentReferenceDetails?.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
               paymentStatus: "pending",
               message
             });
@@ -3663,18 +3673,18 @@ var PayByTransfer = ({
             setPaymentReferenceStatus("confirmed");
             onPaymentAuthorized?.({
               paymentId: transactionReference,
-              paymentDate: response?.data?.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+              paymentDate: paymentReferenceDetails?.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
               paymentStatus: "confirmed",
               message
             });
           }
-        } else if (response.data?.finalTransactionStatus === "Success" || response.data?.paymentStatus === "Received" || response.data?.paymentStatus === "Payment Received") {
+        } else if (paymentReferenceDetails?.finalTransactionStatus === "Success" || paymentReferenceDetails?.paymentStatus === "Received" || paymentReferenceDetails?.paymentStatus === "Payment Received") {
           setPaymentReferenceStatus("confirmed");
           setIsPaymentConfirmed(true);
           setMessage("Transaction confirmed !!");
           onPaymentAuthorized?.({
             paymentId: transactionReference,
-            paymentDate: response?.data?.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
+            paymentDate: paymentReferenceDetails?.updatedAt ?? (/* @__PURE__ */ new Date()).toISOString(),
             paymentStatus: "confirmed",
             message
           });
@@ -3684,7 +3694,7 @@ var PayByTransfer = ({
         setMessage(response.responseMessage || "");
         onPaymentAuthorized?.({
           paymentId: transactionReference,
-          paymentDate: null,
+          paymentDate: (/* @__PURE__ */ new Date()).toISOString(),
           paymentStatus: "used",
           message
         });
@@ -4433,7 +4443,7 @@ function BzpCheckoutCard({
         {
           className: checkoutState === "SUCCESS" || checkoutState === "USED" && paymentType === "BANK_TRANSFER" ? "col-span-3" : "col-span-2",
           children: [
-            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center justify-between px-12 py-8", children: [
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-6 sm:flex-row sm:items-center justify-between p-6 sm:px-10 sm:py-8", children: [
               paymentObject.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
                 BaseImage,
                 {
@@ -4452,15 +4462,15 @@ function BzpCheckoutCard({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: paymentObject.merchantName }),
-                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy text-right", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-body-2xs font-regular text-sub-copy sm:text-right", children: paymentObject.merchantName }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("p", { className: "text-body-2xs font-regular text-sub-copy sm:text-right", children: [
                   "Pay:",
                   " ",
                   /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-orange-500 font-extrabold", children: formatAmount(paymentObject.amount, paymentObject.currency) })
                 ] })
               ] })
             ] }),
-            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "max-h-[32rem] overflow-y-scroll px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "max-h-[32rem] overflow-y-scroll px-6 sm:px-10 pb-10 pt-2", children: paymentType === "CARD" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
               PayByCard,
               {
                 secretKey,
@@ -4795,7 +4805,7 @@ function MidenCheckoutCard({
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconMidenLogo, {}),
               /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconClose, { color: "black", className: "cursor-pointer" })
             ] }),
-            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "px-14 pt-4 pb-8 flex flex-col gap-6 max-h-[32rem] overflow-y-scroll", children: [
+            checkoutState === "PENDING" && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "px-6 md:px-10 lg:px-14 pt-4 pb-8 flex flex-col gap-6 max-h-[32rem] overflow-y-scroll", children: [
               /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between py-3 px-4 bg-[#F8FDFF] border border-[#DAE4E8] rounded-lg", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                   BaseLabelInfo,