@fractalpay/fractalpay-next-dev 0.0.235 → 0.0.236

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface Props$7 {
+interface Props$8 {
     merchantPublicKey: string;
     customerId?: string;
     orderID?: string;
@@ -18,9 +18,9 @@ interface Props$7 {
     sessionToken?: string;
     showSurcharge?: number;
 }
-declare function RequestPayment(props: Props$7): React.JSX.Element;
+declare function RequestPayment(props: Props$8): React.JSX.Element;
 
-interface Props$6 {
+interface Props$7 {
     merchantPublicKey: string;
     customerId?: string;
     orderID?: string;
@@ -36,9 +36,9 @@ interface Props$6 {
     require_3ds?: boolean;
     sessionToken?: string;
 }
-declare function RequestPreAuthPayment(props: Props$6): React.JSX.Element;
+declare function RequestPreAuthPayment(props: Props$7): React.JSX.Element;
 
-type Props$5 = {
+type Props$6 = {
     merchantPublicKey: string;
     customerId?: string;
     orderID?: string;
@@ -51,9 +51,9 @@ type Props$5 = {
     isReader?: boolean;
     sessionToken?: string;
 };
-declare function GetPaymentPage(props: Props$5): React.JSX.Element;
+declare function GetPaymentPage(props: Props$6): React.JSX.Element;
 
-type Props$4 = {
+type Props$5 = {
     merchantPublicKey: string;
     customerId?: string;
     orderID?: string;
@@ -69,15 +69,15 @@ type Props$4 = {
     showButton?: boolean;
     sessionToken?: string;
 };
-declare function PreAuthPayment({ showButton, ...props }: Props$4): React.JSX.Element;
+declare function PreAuthPayment({ showButton, ...props }: Props$5): React.JSX.Element;
 
-type Props$3 = {
+type Props$4 = {
     merchantPublicKey: string;
     customerId?: string;
 };
-declare function AddCardEasyPay(props: Props$3): React.JSX.Element;
+declare function AddCardEasyPay(props: Props$4): React.JSX.Element;
 
-type Props$2 = {
+type Props$3 = {
     session_token: string;
     callback: (resp: any) => void;
     isloading: boolean;
@@ -92,9 +92,9 @@ type Props$2 = {
     inputClass: string;
     isDual?: boolean;
 };
-declare function CardOnFile({ session_token, callback, isloading, onCancel, showChecks, merchantName, signCheckbox, checkedSignCheckbox, onCheckSign, cancelbtnClass, savebtnClass, inputClass, isDual }: Props$2): React.JSX.Element;
+declare function CardOnFile({ session_token, callback, isloading, onCancel, showChecks, merchantName, signCheckbox, checkedSignCheckbox, onCheckSign, cancelbtnClass, savebtnClass, inputClass, isDual }: Props$3): React.JSX.Element;
 
-type Props$1 = {
+type Props$2 = {
     merchantPublicKey: string;
     customerId?: string;
     orderID?: string;
@@ -109,7 +109,30 @@ type Props$1 = {
     allowPartial: boolean;
     cashDiscount?: string;
 };
-declare function PartialPayment(props: Props$1): React.JSX.Element;
+declare function PartialPayment(props: Props$2): React.JSX.Element;
+
+type Props$1 = {
+    session_token: string;
+    surcharge: string;
+    amount: string;
+    submitBtnText?: string;
+    submitBtnClass?: string;
+    customerId?: string;
+    callback: (resp: any) => void;
+    merchantName: string;
+    isPreAuth: boolean;
+    submitBtnIcon?: any;
+    isRequest?: boolean;
+    pass_fee?: boolean;
+    pass_fee_amount?: number | string;
+    bankAmount: string;
+    bankSurcharge?: string;
+    require3ds: boolean;
+    autoTrigger: boolean;
+    isPartial?: boolean;
+    partialRef?: string;
+};
+declare const PaymentWidget: ({ amount, bankAmount, submitBtnText, session_token, customerId, callback, merchantName, isPreAuth, surcharge, submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds, autoTrigger, isPartial, bankSurcharge, partialRef }: Props$1) => React.JSX.Element;
 
 type Props = {
     session_token: string;
@@ -131,7 +154,10 @@ type Props = {
     autoTrigger: boolean;
     isPartial?: boolean;
     partialRef?: string;
+    onSubmit?: (submitFn: () => void) => void;
+    onLoad: boolean;
+    customeCSS?: string;
 };
-declare const PaymentWidget: ({ amount, bankAmount, submitBtnText, session_token, customerId, callback, merchantName, isPreAuth, surcharge, submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds, autoTrigger, isPartial, bankSurcharge, partialRef }: Props) => React.JSX.Element;
+declare const EmbeddedCheckout: ({ amount, bankAmount, submitBtnText, session_token, customerId, callback, merchantName, isPreAuth, surcharge, submitBtnClass, submitBtnIcon, isRequest, pass_fee, pass_fee_amount, require3ds, autoTrigger, isPartial, bankSurcharge, partialRef, onSubmit, onLoad, customeCSS }: Props) => React.JSX.Element;
 
-export { AddCardEasyPay as AddCard, CardOnFile, GetPaymentPage, PartialPayment, PaymentWidget, PreAuthPayment, RequestPayment, RequestPreAuthPayment };
+export { AddCardEasyPay as AddCard, CardOnFile, EmbeddedCheckout, GetPaymentPage, PartialPayment, PaymentWidget, PreAuthPayment, RequestPayment, RequestPreAuthPayment };

package/dist/index.js

@@ -39,7 +39,7 @@ var require_package = __commonJS({
   "package.json"(exports, module) {
     module.exports = {
       name: "@fractalpay/fractalpay-next-dev",
-      version: "0.0.235",
+      version: "0.0.236",
       private: false,
       type: "module",
       scripts: {
@@ -11308,9 +11308,493 @@ var PaymentWidget = ({
     !autoTrigger ? /* @__PURE__ */ jsx35(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx35(ModelContentSky_default, __spreadProps(__spreadValues({ show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
   ] });
 };
+
+// src/app/components/Skysystemz/EmbeddedCheckout.tsx
+import { useEffect as useEffect17, useState as useState12, useMemo as useMemo2 } from "react";
+import axios11 from "axios";
+
+// src/app/components/Skysystemz/EmbeddedCheckoutStyles.tsx
+import { jsx as jsx36 } from "react/jsx-runtime";
+function EmbeddedCheckoutStyles({ extraCustomCSS }) {
+  return /* @__PURE__ */ jsx36("style", { children: `
+
+            .pay-amount-conatiner{
+            margin-top: 20px !important;
+            margin-bottom: 20px !important ;
+        }
+
+            .frac-pay-container.pay-container {
+                grid-template-columns:1fr;
+            }
+
+
+            /* Card */
+.plan-card {
+  width: 100%;
+  font-family: Inter, sans-serif;
+  background: #fff;
+}
+
+/* Header */
+.card-header {
+  padding: 12px 0 0 0;
+}
+
+/* Button */
+.collapse-btn {
+  width: 100%;
+  background: none;
+  border: none;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  font-size: 15px;
+  padding: 0;
+}
+
+/* Arrow */
+.arrow {
+  transition: transform 0.3s ease;
+  height: 8px;
+}
+
+/* Open State */
+.collapse-btn.open .arrow {
+  transform: rotate(180deg); /* Down */
+}
+
+/* Body */
+.card-body {
+  padding: 0;
+}
+
+/* Plan Header */
+.plan-header {
+  font-size: 15px;
+  font-weight: 600;
+}
+
+/* Scrollable List */
+.plan-list {
+  max-height: 200px;
+  overflow-y: auto;
+  padding-right: 6px;
+}
+
+/* Items */
+.plan-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0;
+  font-size: 14px;
+}
+
+/* Badges */
+.badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.badge-included {
+  background: #f1f3f5;
+  color: #495057;
+}
+
+.badge-available {
+  background: #f8f9fa;
+  color: #212529;
+}
+
+/* Helpers */
+.row-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.text-end {
+  text-align: right;
+}
+
+.text-muted {
+  color: #6c757d;
+  font-size: 12px;
+}
+
+.fw-semibold {
+  font-weight: 600;
+}
+
+.mb-2 {
+  margin-bottom: 8px;
+}
+
+/* Divider */
+.divider {
+  height: 1px;
+  background: #e5e7eb;
+  margin: 8px 0;
+}
+
+/* Collapse Animation */
+.collapse {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.collapse.show {
+  max-height: 1000px;
+}
+  .frac-pay-container.pay-container {
+    grid-template-columns:1fr;
+}
+   .frac-payment-form-div .amt-pay-con {
+    padding-right: 0px;
+}
+ .frac-payment-form-div .ach-scrl {
+    padding-right: 0px;
+    gap: 10px;
+    max-height: fit-content !important;
+    min-height: fit-content !important;
+    overflow: hidden !important;
+}
+.frac-payment-form-div .frac-card-bank-radio-main {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    align-self: stretch;
+    border-radius: 14px;
+    border: none;
+    overflow: visible;
+    gap: 10px;
+}
+    .frac-payment-form-div .frac-card-bank-radio {
+    display: flex;
+    padding: 12px 16px;
+    justify-content: space-between;
+    align-items: center;
+    align-self: stretch;
+    width: 50%;
+    border: 1px solid #E0DFE2;
+    border-radius: 10px;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
+}
+   .frac-payment-form-div .frac-card-bank-radio.frac-active {
+    background: #fff;
+    border: 2px solid #004eab !important;
+}
+   
+ .frac-payment-form-div .form-control-frac {
+    border: 1px solid #dee2e6 !important;
+    border-radius: 0.375rem !important;
+    background-color: #F6F6F7;
+    box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
+}
+   .frac-payment-form-div .form-control-frac:focus  {
+        border: 1px solid #004eab !important;
+    }
+    .frac-payment-form-div .card-expiry-new {
+    border: none;
+    gap: 10px;
+}
+ .frac-payment-form-div .exp-date-year-container {
+    gap: 10px;
+    width: 100%;
+}
+ .frac-payment-form-div .card-type-logo-wrap{
+    position: absolute;
+    right: 10px;
+    max-width: 30px;
+}
+    .detials-wrap.detials-wrap-1 {
+    display: flex;
+    flex-wrap: wrap;
+}
+@media screen and (max-width: 1280px) {
+.frac-pay-container.pay-container {
+    grid-template-columns: 1fr;
+    border: none;
+}
+}
+@media screen and (max-width: 899px) {
+.detials-wrap {
+    grid-template-columns: 1fr !important;
+}
+.frac-payment-form-div .exp-date-year-container{
+width: 100%;}
+
+}
+@media screen and (max-width: 575px) {
+.frac-payment-form-div .card-type-logo-wrap{
+max-width: 30px;
+}
+form#ACHPaymentForm .ach-scrl {
+    grid-template-columns: 1fr !important;
+}
+    @media screen and (max-width: 375px) {
+    .frac-payment-form-div .exp-date-year-container {
+    flex-direction: column;
+}
+        .parent-pay-container {
+        padding: 10px;
+    }
+    }
+}
+.box-inner-card-text{
+    display: flex;
+    gap: 0px;
+    flex-direction: column;
+}
+    .box-inner-card-text .frac-payment-type-logo {
+    width: 17px;
+    height: 17px;
+    aspect-ratio: 1/1;
+}
+    .exp-date-year-wrap.form-control-frac input {
+    background: transparent;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    font-weight: 400;
+}
+    .exp-date-year-wrap.form-control-frac {
+    display: flex;
+    gap: 2px;
+}
+ .exp-date-year-wrap input.exp-month {
+    width: 32px;
+}
+    .detials-wrap {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+}
+    .detials-wrap.detials-wrap-2{
+     grid-template-columns: 1fr 1fr; 
+    }
+     form#ACHPaymentForm .ach-scrl {
+    display: grid;
+    grid-gap: 0px 10px;
+    grid-template-columns: 1fr;
+}
+  .plan-list {
+            max-height: 130px;
+            min-height: 130px;
+            overflow-y: auto;
+            padding-right: 6px;
+        }
+        .plan-list::-webkit-scrollbar {
+            width: 3px;
+            background-color: #F5F5F5;
+        }
+        .plan-list::-webkit-scrollbar-thumb {
+            background-color: #35254D;
+        }
+        div#cvv {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top: 0;
+            border-bottom: 0;
+            border-right: 0;
+        }
+            div#exp_year {
+            height: 36px;
+            width: calc(100% + 1px);
+            border-radius: 0;
+            border-top: 0;
+            border-bottom: 0;
+            border-right: 1px solid #dee2e6;
+        }
+            div#exp_month {
+            width: calc(100% + 1px);
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border: 0;
+            border-right: 1px solid #dee2e6;
+        }
+        .exp-date-year-container .form-group {
+            flex: 1;
+        }
+.input-main-wrap-frac{
+margin:0px !important;
+padding:0px !important;
+}
+.toggle-num-wrapper.toggle-num-wrapper-new {
+    border: 1px solid #dee2e6 !important;
+    border-radius: 0.375rem !important;
+    background-color: #F6F6F7;
+    box-shadow: 1px 1px 2px inset rgba(0, 0, 0, 0.1);
+}
+   .toggle-num-wrapper-new div#card_number {
+    padding: 0px 10px;
+    border: none;
+    border-bottom: 1px solid #dee2e6;
+}
+   .toggle-num-wrapper-new .card-crdi.card-expiry-new {
+    padding: 0px 10px;
+}
+   .toggle-num-wrapper-new .input-main-wrap-frac {
+    height: 36px;
+}
+   .toggle-num-wrapper-new:focus {
+    border: 1px solid #004eab !important;
+}
+    .frac-card-title-main {
+    display: flex;
+    align-items: start;
+    gap: 4px;
+    flex-direction: column;
+}
+    .parent-pay-container {
+    padding: 24px;
+    background-color: #ffffff !important;
+    border-radius: 15px;
+    min-width: 300px;
+}
+    ${extraCustomCSS}
+
+            ` });
+}
+
+// src/app/components/Skysystemz/EmbeddedCheckout.tsx
+import { Fragment as Fragment21, jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+var EmbeddedCheckout = ({
+  amount,
+  bankAmount,
+  submitBtnText = "Pay",
+  session_token,
+  customerId,
+  callback,
+  merchantName = "merchant",
+  isPreAuth,
+  surcharge = "0",
+  submitBtnClass,
+  submitBtnIcon,
+  isRequest,
+  pass_fee,
+  pass_fee_amount,
+  require3ds = false,
+  autoTrigger = false,
+  isPartial,
+  bankSurcharge,
+  partialRef,
+  onSubmit,
+  onLoad,
+  customeCSS
+}) => {
+  const [show, setShow] = useState12(false);
+  const [loading, setLoading] = useState12(false);
+  const [childHandleClose, setChildHandleClose] = useState12(() => () => {
+  });
+  const [orderGuid, setOrderGuid] = useState12(null);
+  const [remainingAmount, setRemainingAmount] = useState12(null);
+  const initialCommonProps = useMemo2(
+    () => ({
+      amount,
+      bankAmount,
+      submitBtnText,
+      session_token,
+      customerId,
+      callback,
+      merchantName,
+      isPreAuth,
+      surcharge,
+      submitBtnClass,
+      submitBtnIcon,
+      isRequest,
+      pass_fee,
+      pass_fee_amount,
+      require3ds,
+      autoTrigger,
+      setShow,
+      setHandleCloseRef: setChildHandleClose,
+      isPartial,
+      bankSurcharge,
+      partialRef
+    }),
+    [
+      amount,
+      bankAmount,
+      submitBtnText,
+      session_token,
+      customerId,
+      callback,
+      merchantName,
+      isPreAuth,
+      surcharge,
+      submitBtnClass,
+      submitBtnIcon,
+      isRequest,
+      pass_fee,
+      pass_fee_amount,
+      require3ds,
+      autoTrigger,
+      isPartial,
+      bankSurcharge,
+      partialRef
+    ]
+  );
+  const [commonProps, setCommonProps] = useState12(initialCommonProps);
+  useEffect17(() => {
+    if (show) {
+      setCommonProps(initialCommonProps);
+    }
+  }, [show, initialCommonProps]);
+  const getskyosOrderDetails = async () => {
+    var _a;
+    setLoading(true);
+    try {
+      const res = await axios11.get(
+        `${masterBaseUrl}api/v1/gateway/get-order-details/${session_token}`,
+        { params: { isPartial, partialRef } }
+      );
+      if ((_a = res == null ? void 0 : res.data) == null ? void 0 : _a.result) {
+        const data = res.data.data;
+        if (data == null ? void 0 : data.orderGuid) {
+          setOrderGuid(data == null ? void 0 : data.orderGuid);
+          setRemainingAmount(data == null ? void 0 : data.remainingAmount);
+        }
+        setCommonProps((prev) => __spreadProps(__spreadValues({}, prev), {
+          amount: data.amount,
+          pass_fee_amount: data.pass_fee_amount,
+          pass_fee: data.pass_fee
+        }));
+      }
+    } catch (error) {
+      console.log("error while getting skyosorderdeatils", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect17(() => {
+    if (show && isPartial && partialRef) {
+      getskyosOrderDetails();
+    }
+  }, [show, isPartial, partialRef]);
+  console.log(onLoad, "onLoad");
+  return /* @__PURE__ */ jsxs22(Fragment21, { children: [
+    /* @__PURE__ */ jsx37("link", { href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" }),
+    /* @__PURE__ */ jsx37(DataScript, {}),
+    /* @__PURE__ */ jsx37(FractalTokenizerScript, {}),
+    /* @__PURE__ */ jsx37(SkyChargewidgetstyles, {}),
+    /* @__PURE__ */ jsx37(CardBankRadioStyles, {}),
+    /* @__PURE__ */ jsx37(CustomModal2styles_default, {}),
+    /* @__PURE__ */ jsx37(DataCapScriptLoader, {}),
+    /* @__PURE__ */ jsx37(EmbeddedCheckoutStyles, { extraCustomCSS: customeCSS }),
+    !autoTrigger && /* @__PURE__ */ jsxs22("button", { className: submitBtnClass || "paymentBtn", onClick: () => setShow(true), children: [
+      submitBtnText,
+      submitBtnIcon
+    ] }),
+    !autoTrigger ? /* @__PURE__ */ jsx37(CustomModal2_default, { open: show, onClose: childHandleClose, children: /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount })) }) : /* @__PURE__ */ jsx37(ModelContentSky_default, __spreadProps(__spreadValues({ onLoad, onSubmit, show, loadingPrev: loading }, commonProps), { orderGuid, remainingAmount }))
+  ] });
+};
 export {
   AddCardEasyPay as AddCard,
   CardOnFile,
+  EmbeddedCheckout,
   GetPaymentPage,
   PartialPayment,
   PaymentWidget,