azirid-react 0.9.5 → 0.9.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -0
- package/dist/index.cjs +457 -84
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +48 -9
- package/dist/index.d.ts +48 -9
- package/dist/index.js +456 -85
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2293,18 +2293,21 @@ function loadPayphoneSdk() {
|
|
|
2293
2293
|
});
|
|
2294
2294
|
return loadPromise;
|
|
2295
2295
|
}
|
|
2296
|
-
function
|
|
2297
|
-
|
|
2298
|
-
|
|
2296
|
+
function PayphoneWidgetRenderer({
|
|
2297
|
+
config,
|
|
2298
|
+
responseUrl,
|
|
2299
|
+
containerId,
|
|
2300
|
+
onReady,
|
|
2301
|
+
onError
|
|
2302
|
+
}) {
|
|
2299
2303
|
const initialized = useRef(false);
|
|
2300
2304
|
useEffect(() => {
|
|
2301
2305
|
if (initialized.current) return;
|
|
2302
2306
|
initialized.current = true;
|
|
2303
2307
|
loadPayphoneSdk().then(() => {
|
|
2304
|
-
setLoading(false);
|
|
2305
2308
|
requestAnimationFrame(() => {
|
|
2306
2309
|
if (typeof window.PPaymentButtonBox === "undefined") {
|
|
2307
|
-
|
|
2310
|
+
onError?.(new Error("Payphone SDK failed to initialize"));
|
|
2308
2311
|
return;
|
|
2309
2312
|
}
|
|
2310
2313
|
new window.PPaymentButtonBox({
|
|
@@ -2315,19 +2318,30 @@ function PayphoneModal({ config, successUrl, onClose }) {
|
|
|
2315
2318
|
currency: config.currency,
|
|
2316
2319
|
storeId: config.storeId,
|
|
2317
2320
|
reference: config.reference,
|
|
2318
|
-
responseUrl
|
|
2319
|
-
}).render(
|
|
2321
|
+
responseUrl
|
|
2322
|
+
}).render(containerId);
|
|
2323
|
+
onReady?.();
|
|
2320
2324
|
});
|
|
2321
|
-
}).catch(() => {
|
|
2322
|
-
|
|
2323
|
-
setError("Failed to load Payphone payment widget");
|
|
2325
|
+
}).catch((err) => {
|
|
2326
|
+
onError?.(new Error(err instanceof Error ? err.message : "Failed to load Payphone SDK"));
|
|
2324
2327
|
});
|
|
2325
|
-
}, [config,
|
|
2328
|
+
}, [config, responseUrl, containerId, onReady, onError]);
|
|
2329
|
+
return /* @__PURE__ */ jsx("div", { id: containerId });
|
|
2330
|
+
}
|
|
2331
|
+
function PayphoneModal({ config, successUrl, onClose }) {
|
|
2332
|
+
const [error, setError] = useState(null);
|
|
2326
2333
|
return /* @__PURE__ */ jsx("div", { style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: cardStyle, onClick: (e) => e.stopPropagation(), children: [
|
|
2327
2334
|
/* @__PURE__ */ jsx("h2", { style: titleStyle, children: "Payphone" }),
|
|
2328
|
-
loading && /* @__PURE__ */ jsx("p", { style: messageStyle, children: "Loading payment widget..." }),
|
|
2329
2335
|
error && /* @__PURE__ */ jsx("p", { style: { ...messageStyle, color: "#ef4444" }, children: error }),
|
|
2330
|
-
/* @__PURE__ */ jsx(
|
|
2336
|
+
/* @__PURE__ */ jsx(
|
|
2337
|
+
PayphoneWidgetRenderer,
|
|
2338
|
+
{
|
|
2339
|
+
config,
|
|
2340
|
+
responseUrl: successUrl,
|
|
2341
|
+
containerId: "pp-button-azirid",
|
|
2342
|
+
onError: (err) => setError(err.message)
|
|
2343
|
+
}
|
|
2344
|
+
),
|
|
2331
2345
|
/* @__PURE__ */ jsx("p", { style: warningStyle, children: "Do not close this window until the payment is complete." }),
|
|
2332
2346
|
/* @__PURE__ */ jsx("button", { type: "button", style: cancelStyle, onClick: onClose, children: "Cancel" })
|
|
2333
2347
|
] }) });
|
|
@@ -2893,14 +2907,274 @@ function CheckoutButton({
|
|
|
2893
2907
|
);
|
|
2894
2908
|
}
|
|
2895
2909
|
CheckoutButton.displayName = "CheckoutButton";
|
|
2910
|
+
function usePayphoneConfirm(options) {
|
|
2911
|
+
const client = useAccessClient();
|
|
2912
|
+
return useMutation({
|
|
2913
|
+
mutationFn: (params) => client.post(client.paths.payphoneConfirm, params),
|
|
2914
|
+
onSuccess: options?.onSuccess,
|
|
2915
|
+
onError: options?.onError
|
|
2916
|
+
});
|
|
2917
|
+
}
|
|
2896
2918
|
var PROVIDER_LABELS2 = {
|
|
2919
|
+
STRIPE: "Credit/Debit Card",
|
|
2920
|
+
PAYPAL: "PayPal",
|
|
2921
|
+
PAYPHONE: "Payphone",
|
|
2922
|
+
NUVEI: "Nuvei",
|
|
2923
|
+
MANUAL_TRANSFER: "Bank Transfer"
|
|
2924
|
+
};
|
|
2925
|
+
var PROVIDER_ICONS2 = {
|
|
2926
|
+
STRIPE: "\u{1F4B3}",
|
|
2927
|
+
PAYPAL: "\u{1F17F}\uFE0F",
|
|
2928
|
+
PAYPHONE: "\u{1F4F1}",
|
|
2929
|
+
NUVEI: "\u{1F4B3}",
|
|
2930
|
+
MANUAL_TRANSFER: "\u{1F3E6}"
|
|
2931
|
+
};
|
|
2932
|
+
var PP_CONTAINER_ID = "pp-paybtn-azirid";
|
|
2933
|
+
function usePayButton({
|
|
2934
|
+
intentId,
|
|
2935
|
+
planId,
|
|
2936
|
+
onSuccess,
|
|
2937
|
+
onError
|
|
2938
|
+
}) {
|
|
2939
|
+
const [status, setStatus] = useState("idle");
|
|
2940
|
+
const [selectedProvider, setSelectedProvider] = useState(null);
|
|
2941
|
+
const [checkoutData, setCheckoutData] = useState(null);
|
|
2942
|
+
const [payphoneConfig, setPayphoneConfig] = useState(null);
|
|
2943
|
+
const [currentError, setCurrentError] = useState(null);
|
|
2944
|
+
const payphoneConfirmTriggered = useRef(false);
|
|
2945
|
+
const responseUrl = typeof window !== "undefined" ? window.location.href.split("?")[0] : "";
|
|
2946
|
+
const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams();
|
|
2947
|
+
const callbackId = params.get("id");
|
|
2948
|
+
const callbackClientTxId = params.get("clientTransactionId");
|
|
2949
|
+
const isPayphoneCallback = !!(callbackId && callbackClientTxId);
|
|
2950
|
+
const {
|
|
2951
|
+
data: providerList,
|
|
2952
|
+
isLoading: providersLoading
|
|
2953
|
+
} = usePaymentProviders();
|
|
2954
|
+
const providers = providerList ?? [];
|
|
2955
|
+
useEffect(() => {
|
|
2956
|
+
if (isPayphoneCallback) return;
|
|
2957
|
+
if (providersLoading) {
|
|
2958
|
+
setStatus("loading_providers");
|
|
2959
|
+
} else if (providers.length > 0 && status === "loading_providers") {
|
|
2960
|
+
setStatus("ready");
|
|
2961
|
+
}
|
|
2962
|
+
}, [providersLoading, providers.length, status, isPayphoneCallback]);
|
|
2963
|
+
const { checkout: doCheckout, isPending } = useCheckout({
|
|
2964
|
+
redirectOnSuccess: false,
|
|
2965
|
+
onSuccess: (data) => {
|
|
2966
|
+
setCheckoutData(data);
|
|
2967
|
+
if (data.provider === "PAYPHONE" && data.widgetConfig) {
|
|
2968
|
+
setPayphoneConfig(data.widgetConfig);
|
|
2969
|
+
setStatus("processing");
|
|
2970
|
+
return;
|
|
2971
|
+
}
|
|
2972
|
+
if (data.provider === "MANUAL_TRANSFER") {
|
|
2973
|
+
setStatus("success");
|
|
2974
|
+
onSuccess?.(data);
|
|
2975
|
+
return;
|
|
2976
|
+
}
|
|
2977
|
+
if (data.url) {
|
|
2978
|
+
setStatus("redirecting");
|
|
2979
|
+
window.location.href = data.url;
|
|
2980
|
+
return;
|
|
2981
|
+
}
|
|
2982
|
+
setStatus("success");
|
|
2983
|
+
onSuccess?.(data);
|
|
2984
|
+
},
|
|
2985
|
+
onError: (err) => {
|
|
2986
|
+
setCurrentError(err);
|
|
2987
|
+
setStatus("error");
|
|
2988
|
+
onError?.(err);
|
|
2989
|
+
}
|
|
2990
|
+
});
|
|
2991
|
+
const checkout = useCallback(
|
|
2992
|
+
(provider) => {
|
|
2993
|
+
setSelectedProvider(provider);
|
|
2994
|
+
setStatus("processing");
|
|
2995
|
+
setCurrentError(null);
|
|
2996
|
+
doCheckout({
|
|
2997
|
+
intentId,
|
|
2998
|
+
planId,
|
|
2999
|
+
provider,
|
|
3000
|
+
successUrl: responseUrl,
|
|
3001
|
+
cancelUrl: responseUrl
|
|
3002
|
+
});
|
|
3003
|
+
},
|
|
3004
|
+
[doCheckout, intentId, planId, responseUrl]
|
|
3005
|
+
);
|
|
3006
|
+
const { mutate: confirmPayphone } = usePayphoneConfirm({
|
|
3007
|
+
onSuccess: (data) => {
|
|
3008
|
+
const isConfirmed = data.status === "confirmed" || data.status === "already_confirmed";
|
|
3009
|
+
setStatus(isConfirmed ? "success" : "error");
|
|
3010
|
+
const response = {
|
|
3011
|
+
provider: "PAYPHONE",
|
|
3012
|
+
...checkoutData ?? {}
|
|
3013
|
+
};
|
|
3014
|
+
if (isConfirmed) {
|
|
3015
|
+
onSuccess?.(response);
|
|
3016
|
+
} else {
|
|
3017
|
+
onError?.(new Error("Payment was cancelled"));
|
|
3018
|
+
}
|
|
3019
|
+
},
|
|
3020
|
+
onError: (err) => {
|
|
3021
|
+
setCurrentError(err);
|
|
3022
|
+
setStatus("error");
|
|
3023
|
+
onError?.(err);
|
|
3024
|
+
}
|
|
3025
|
+
});
|
|
3026
|
+
useEffect(() => {
|
|
3027
|
+
if (!isPayphoneCallback || payphoneConfirmTriggered.current) return;
|
|
3028
|
+
payphoneConfirmTriggered.current = true;
|
|
3029
|
+
setSelectedProvider("PAYPHONE");
|
|
3030
|
+
setStatus("processing");
|
|
3031
|
+
confirmPayphone({ id: Number(callbackId), clientTransactionId: callbackClientTxId });
|
|
3032
|
+
}, [isPayphoneCallback, callbackId, callbackClientTxId, confirmPayphone]);
|
|
3033
|
+
const handleSdkError = useCallback(
|
|
3034
|
+
(err) => {
|
|
3035
|
+
setCurrentError(err);
|
|
3036
|
+
setStatus("error");
|
|
3037
|
+
onError?.(err);
|
|
3038
|
+
},
|
|
3039
|
+
[onError]
|
|
3040
|
+
);
|
|
3041
|
+
const ProviderSelector = useMemo(() => {
|
|
3042
|
+
return function ProviderSelectorInner() {
|
|
3043
|
+
if (providers.length === 0 || isPayphoneCallback) return null;
|
|
3044
|
+
return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: providers.map((p) => /* @__PURE__ */ jsxs(
|
|
3045
|
+
"button",
|
|
3046
|
+
{
|
|
3047
|
+
type: "button",
|
|
3048
|
+
style: {
|
|
3049
|
+
display: "flex",
|
|
3050
|
+
alignItems: "center",
|
|
3051
|
+
width: "100%",
|
|
3052
|
+
padding: "12px 16px",
|
|
3053
|
+
border: "1px solid #e5e7eb",
|
|
3054
|
+
borderRadius: "8px",
|
|
3055
|
+
backgroundColor: selectedProvider === p.provider ? "#f3f4f6" : "#fff",
|
|
3056
|
+
cursor: isPending ? "not-allowed" : "pointer",
|
|
3057
|
+
fontSize: "14px",
|
|
3058
|
+
fontWeight: 500,
|
|
3059
|
+
color: "#111827",
|
|
3060
|
+
fontFamily: "inherit"
|
|
3061
|
+
},
|
|
3062
|
+
onClick: () => checkout(p.provider),
|
|
3063
|
+
disabled: isPending,
|
|
3064
|
+
children: [
|
|
3065
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: "20px", marginRight: "12px" }, children: PROVIDER_ICONS2[p.provider] }),
|
|
3066
|
+
/* @__PURE__ */ jsx("span", { children: PROVIDER_LABELS2[p.provider] })
|
|
3067
|
+
]
|
|
3068
|
+
},
|
|
3069
|
+
p.provider
|
|
3070
|
+
)) });
|
|
3071
|
+
};
|
|
3072
|
+
}, [providers, selectedProvider, isPending, checkout, isPayphoneCallback]);
|
|
3073
|
+
const TransferDetails = useMemo(() => {
|
|
3074
|
+
return function TransferDetailsInner() {
|
|
3075
|
+
if (!checkoutData || checkoutData.provider !== "MANUAL_TRANSFER") return null;
|
|
3076
|
+
const bankDetails = checkoutData.bankDetails;
|
|
3077
|
+
const plan = checkoutData.plan;
|
|
3078
|
+
const intent = checkoutData.intent;
|
|
3079
|
+
const displayAmount = plan ? formatAmount(plan.amount, plan.currency) : intent ? formatAmount(intent.amount, intent.currency) : "";
|
|
3080
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
3081
|
+
displayAmount && /* @__PURE__ */ jsxs(
|
|
3082
|
+
"div",
|
|
3083
|
+
{
|
|
3084
|
+
style: {
|
|
3085
|
+
textAlign: "center",
|
|
3086
|
+
padding: "16px",
|
|
3087
|
+
backgroundColor: "#f9fafb",
|
|
3088
|
+
borderRadius: "8px",
|
|
3089
|
+
marginBottom: "20px"
|
|
3090
|
+
},
|
|
3091
|
+
children: [
|
|
3092
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: displayAmount }),
|
|
3093
|
+
plan?.name && /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: plan.name }),
|
|
3094
|
+
intent?.description && /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: intent.description })
|
|
3095
|
+
]
|
|
3096
|
+
}
|
|
3097
|
+
),
|
|
3098
|
+
bankDetails && Object.keys(bankDetails).length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
|
|
3099
|
+
/* @__PURE__ */ jsx(
|
|
3100
|
+
"div",
|
|
3101
|
+
{
|
|
3102
|
+
style: {
|
|
3103
|
+
fontSize: "14px",
|
|
3104
|
+
fontWeight: 600,
|
|
3105
|
+
color: "#111827",
|
|
3106
|
+
marginBottom: "8px"
|
|
3107
|
+
},
|
|
3108
|
+
children: "Bank Details"
|
|
3109
|
+
}
|
|
3110
|
+
),
|
|
3111
|
+
Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxs(
|
|
3112
|
+
"div",
|
|
3113
|
+
{
|
|
3114
|
+
style: {
|
|
3115
|
+
display: "flex",
|
|
3116
|
+
justifyContent: "space-between",
|
|
3117
|
+
padding: "6px 0",
|
|
3118
|
+
borderBottom: "1px solid #f3f4f6",
|
|
3119
|
+
fontSize: "13px"
|
|
3120
|
+
},
|
|
3121
|
+
children: [
|
|
3122
|
+
/* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
|
|
3123
|
+
/* @__PURE__ */ jsx("span", { style: { color: "#111827", fontWeight: 500 }, children: value })
|
|
3124
|
+
]
|
|
3125
|
+
},
|
|
3126
|
+
key
|
|
3127
|
+
))
|
|
3128
|
+
] }),
|
|
3129
|
+
checkoutData.transferInstructions && /* @__PURE__ */ jsx(
|
|
3130
|
+
"div",
|
|
3131
|
+
{
|
|
3132
|
+
style: {
|
|
3133
|
+
padding: "12px",
|
|
3134
|
+
backgroundColor: "#eff6ff",
|
|
3135
|
+
borderRadius: "6px",
|
|
3136
|
+
fontSize: "13px",
|
|
3137
|
+
color: "#1e40af",
|
|
3138
|
+
lineHeight: 1.5
|
|
3139
|
+
},
|
|
3140
|
+
children: checkoutData.transferInstructions
|
|
3141
|
+
}
|
|
3142
|
+
)
|
|
3143
|
+
] });
|
|
3144
|
+
};
|
|
3145
|
+
}, [checkoutData]);
|
|
3146
|
+
const PayphoneWidget = useMemo(() => {
|
|
3147
|
+
return function PayphoneWidgetInner() {
|
|
3148
|
+
if (!payphoneConfig || isPayphoneCallback) return null;
|
|
3149
|
+
return PayphoneWidgetRenderer({
|
|
3150
|
+
config: payphoneConfig,
|
|
3151
|
+
responseUrl,
|
|
3152
|
+
containerId: PP_CONTAINER_ID,
|
|
3153
|
+
onError: handleSdkError
|
|
3154
|
+
});
|
|
3155
|
+
};
|
|
3156
|
+
}, [payphoneConfig, responseUrl, isPayphoneCallback, handleSdkError]);
|
|
3157
|
+
return {
|
|
3158
|
+
providers,
|
|
3159
|
+
checkout,
|
|
3160
|
+
ProviderSelector,
|
|
3161
|
+
TransferDetails,
|
|
3162
|
+
PayphoneWidget,
|
|
3163
|
+
status,
|
|
3164
|
+
selectedProvider,
|
|
3165
|
+
checkoutData,
|
|
3166
|
+
isPending,
|
|
3167
|
+
error: currentError
|
|
3168
|
+
};
|
|
3169
|
+
}
|
|
3170
|
+
var PROVIDER_LABELS3 = {
|
|
2897
3171
|
STRIPE: { en: "Credit/Debit Card", es: "Tarjeta de cr\xE9dito/d\xE9bito" },
|
|
2898
3172
|
PAYPAL: { en: "PayPal", es: "PayPal" },
|
|
2899
3173
|
PAYPHONE: { en: "Payphone", es: "Payphone" },
|
|
2900
3174
|
NUVEI: { en: "Nuvei", es: "Nuvei" },
|
|
2901
3175
|
MANUAL_TRANSFER: { en: "Bank Transfer", es: "Transferencia bancaria" }
|
|
2902
3176
|
};
|
|
2903
|
-
var
|
|
3177
|
+
var PROVIDER_ICONS3 = {
|
|
2904
3178
|
STRIPE: "\u{1F4B3}",
|
|
2905
3179
|
PAYPAL: "\u{1F17F}\uFE0F",
|
|
2906
3180
|
PAYPHONE: "\u{1F4F1}",
|
|
@@ -2973,7 +3247,7 @@ function ProviderModal({
|
|
|
2973
3247
|
return /* @__PURE__ */ jsx("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyles.card, onClick: (e) => e.stopPropagation(), children: [
|
|
2974
3248
|
/* @__PURE__ */ jsx("h2", { style: modalStyles.title, children: labels?.selectPaymentMethod ?? "Select payment method" }),
|
|
2975
3249
|
/* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: providers.map((p) => {
|
|
2976
|
-
const label =
|
|
3250
|
+
const label = PROVIDER_LABELS3[p.provider];
|
|
2977
3251
|
return /* @__PURE__ */ jsxs(
|
|
2978
3252
|
"button",
|
|
2979
3253
|
{
|
|
@@ -2982,7 +3256,7 @@ function ProviderModal({
|
|
|
2982
3256
|
onClick: () => onSelect(p.provider),
|
|
2983
3257
|
disabled: isPending,
|
|
2984
3258
|
children: [
|
|
2985
|
-
/* @__PURE__ */ jsx("span", { style: { fontSize: "20px", marginRight: "12px" }, children:
|
|
3259
|
+
/* @__PURE__ */ jsx("span", { style: { fontSize: "20px", marginRight: "12px" }, children: PROVIDER_ICONS3[p.provider] }),
|
|
2986
3260
|
/* @__PURE__ */ jsx("span", { children: label?.en ?? p.provider })
|
|
2987
3261
|
]
|
|
2988
3262
|
},
|
|
@@ -3093,20 +3367,23 @@ function PayButton({
|
|
|
3093
3367
|
const billing = messages?.billing;
|
|
3094
3368
|
const [showProviderModal, setShowProviderModal] = useState(false);
|
|
3095
3369
|
const [showTransferModal, setShowTransferModal] = useState(false);
|
|
3096
|
-
const
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3370
|
+
const {
|
|
3371
|
+
providers,
|
|
3372
|
+
checkout,
|
|
3373
|
+
checkoutData,
|
|
3374
|
+
PayphoneWidget,
|
|
3375
|
+
isPending,
|
|
3376
|
+
status
|
|
3377
|
+
} = usePayButton({
|
|
3378
|
+
intentId,
|
|
3379
|
+
planId,
|
|
3101
3380
|
onSuccess: (data) => {
|
|
3102
3381
|
if (data.provider === "MANUAL_TRANSFER") {
|
|
3103
|
-
setTransferData(data);
|
|
3104
3382
|
setShowTransferModal(true);
|
|
3105
3383
|
setShowProviderModal(false);
|
|
3106
3384
|
return;
|
|
3107
3385
|
}
|
|
3108
|
-
if (data.provider === "PAYPHONE"
|
|
3109
|
-
setPayphoneData(data);
|
|
3386
|
+
if (data.provider === "PAYPHONE") {
|
|
3110
3387
|
setShowProviderModal(false);
|
|
3111
3388
|
return;
|
|
3112
3389
|
}
|
|
@@ -3124,15 +3401,9 @@ function PayButton({
|
|
|
3124
3401
|
};
|
|
3125
3402
|
const doCheckout = (provider) => {
|
|
3126
3403
|
onProviderSelect?.(provider);
|
|
3127
|
-
checkout(
|
|
3128
|
-
planId,
|
|
3129
|
-
intentId,
|
|
3130
|
-
provider,
|
|
3131
|
-
successUrl,
|
|
3132
|
-
cancelUrl
|
|
3133
|
-
});
|
|
3404
|
+
checkout(provider);
|
|
3134
3405
|
};
|
|
3135
|
-
const isDisabled = disabled || isPending ||
|
|
3406
|
+
const isDisabled = disabled || isPending || status === "loading_providers" || !planId && !intentId;
|
|
3136
3407
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
3137
3408
|
/* @__PURE__ */ jsx(
|
|
3138
3409
|
"button",
|
|
@@ -3166,39 +3437,29 @@ function PayButton({
|
|
|
3166
3437
|
labels: billing
|
|
3167
3438
|
}
|
|
3168
3439
|
),
|
|
3169
|
-
showTransferModal &&
|
|
3440
|
+
showTransferModal && checkoutData && checkoutData.provider === "MANUAL_TRANSFER" && /* @__PURE__ */ jsx(
|
|
3170
3441
|
TransferModal2,
|
|
3171
3442
|
{
|
|
3172
|
-
data:
|
|
3443
|
+
data: checkoutData,
|
|
3173
3444
|
onClose: () => {
|
|
3174
3445
|
setShowTransferModal(false);
|
|
3175
|
-
onSuccess?.(
|
|
3176
|
-
setTransferData(null);
|
|
3446
|
+
onSuccess?.(checkoutData);
|
|
3177
3447
|
},
|
|
3178
3448
|
labels: billing
|
|
3179
3449
|
}
|
|
3180
3450
|
),
|
|
3181
|
-
|
|
3451
|
+
status === "processing" && checkoutData?.provider === "PAYPHONE" && checkoutData.widgetConfig && /* @__PURE__ */ jsx(
|
|
3182
3452
|
PayphoneModal,
|
|
3183
3453
|
{
|
|
3184
|
-
config:
|
|
3454
|
+
config: checkoutData.widgetConfig,
|
|
3185
3455
|
successUrl,
|
|
3186
3456
|
onClose: () => {
|
|
3187
|
-
onSuccess?.(
|
|
3188
|
-
setPayphoneData(null);
|
|
3457
|
+
onSuccess?.(checkoutData);
|
|
3189
3458
|
}
|
|
3190
3459
|
}
|
|
3191
3460
|
)
|
|
3192
3461
|
] });
|
|
3193
3462
|
}
|
|
3194
|
-
function usePayphoneConfirm(options) {
|
|
3195
|
-
const client = useAccessClient();
|
|
3196
|
-
return useMutation({
|
|
3197
|
-
mutationFn: (params) => client.post(client.paths.payphoneConfirm, params),
|
|
3198
|
-
onSuccess: options?.onSuccess,
|
|
3199
|
-
onError: options?.onError
|
|
3200
|
-
});
|
|
3201
|
-
}
|
|
3202
3463
|
function PayphoneCallback({ onSuccess, onError, className, style }) {
|
|
3203
3464
|
const { mutate, isPending, isSuccess, isError, error, data } = usePayphoneConfirm({
|
|
3204
3465
|
onSuccess,
|
|
@@ -3243,41 +3504,6 @@ var subtextStyle = {
|
|
|
3243
3504
|
color: "#6b7280",
|
|
3244
3505
|
margin: 0
|
|
3245
3506
|
};
|
|
3246
|
-
function PayphoneWidgetRenderer({
|
|
3247
|
-
config,
|
|
3248
|
-
responseUrl,
|
|
3249
|
-
containerId,
|
|
3250
|
-
onReady,
|
|
3251
|
-
onError
|
|
3252
|
-
}) {
|
|
3253
|
-
const initialized = useRef(false);
|
|
3254
|
-
useEffect(() => {
|
|
3255
|
-
if (initialized.current) return;
|
|
3256
|
-
initialized.current = true;
|
|
3257
|
-
loadPayphoneSdk().then(() => {
|
|
3258
|
-
requestAnimationFrame(() => {
|
|
3259
|
-
if (typeof window.PPaymentButtonBox === "undefined") {
|
|
3260
|
-
onError?.(new Error("Payphone SDK failed to initialize"));
|
|
3261
|
-
return;
|
|
3262
|
-
}
|
|
3263
|
-
new window.PPaymentButtonBox({
|
|
3264
|
-
token: config.token,
|
|
3265
|
-
clientTransactionId: config.clientTransactionId,
|
|
3266
|
-
amount: config.amount,
|
|
3267
|
-
amountWithoutTax: config.amountWithoutTax,
|
|
3268
|
-
currency: config.currency,
|
|
3269
|
-
storeId: config.storeId,
|
|
3270
|
-
reference: config.reference,
|
|
3271
|
-
responseUrl
|
|
3272
|
-
}).render(containerId);
|
|
3273
|
-
onReady?.();
|
|
3274
|
-
});
|
|
3275
|
-
}).catch((err) => {
|
|
3276
|
-
onError?.(new Error(err instanceof Error ? err.message : "Failed to load Payphone SDK"));
|
|
3277
|
-
});
|
|
3278
|
-
}, [config, responseUrl, containerId, onReady, onError]);
|
|
3279
|
-
return /* @__PURE__ */ jsx("div", { id: containerId });
|
|
3280
|
-
}
|
|
3281
3507
|
var statusConfig = {
|
|
3282
3508
|
ACTIVE: { bg: "#d1fae5", color: "#065f46", label: "Active" },
|
|
3283
3509
|
TRIALING: { bg: "#dbeafe", color: "#1e40af", label: "Trial" },
|
|
@@ -3818,6 +4044,151 @@ function usePayphoneCheckout({
|
|
|
3818
4044
|
}, [widgetConfig, responseUrl, isCallback, handleSdkError]);
|
|
3819
4045
|
return { PayphoneWidget, status, intentId, error: currentError };
|
|
3820
4046
|
}
|
|
4047
|
+
function useTransferPayment({
|
|
4048
|
+
intentId,
|
|
4049
|
+
onSuccess,
|
|
4050
|
+
onProofSubmitted,
|
|
4051
|
+
onError
|
|
4052
|
+
}) {
|
|
4053
|
+
const [status, setStatus] = useState("idle");
|
|
4054
|
+
const [checkoutData, setCheckoutData] = useState(null);
|
|
4055
|
+
const [currentError, setCurrentError] = useState(null);
|
|
4056
|
+
const checkoutTriggered = useRef(false);
|
|
4057
|
+
const responseUrl = typeof window !== "undefined" ? window.location.href.split("?")[0] : "";
|
|
4058
|
+
const { checkout } = useCheckout({
|
|
4059
|
+
redirectOnSuccess: false,
|
|
4060
|
+
onSuccess: (data) => {
|
|
4061
|
+
setCheckoutData(data);
|
|
4062
|
+
setStatus("ready");
|
|
4063
|
+
onSuccess?.(data);
|
|
4064
|
+
},
|
|
4065
|
+
onError: (err) => {
|
|
4066
|
+
setCurrentError(err);
|
|
4067
|
+
setStatus("error");
|
|
4068
|
+
onError?.(err);
|
|
4069
|
+
}
|
|
4070
|
+
});
|
|
4071
|
+
useEffect(() => {
|
|
4072
|
+
if (checkoutTriggered.current) return;
|
|
4073
|
+
checkoutTriggered.current = true;
|
|
4074
|
+
setStatus("loading");
|
|
4075
|
+
checkout({
|
|
4076
|
+
intentId,
|
|
4077
|
+
provider: "MANUAL_TRANSFER",
|
|
4078
|
+
successUrl: responseUrl,
|
|
4079
|
+
cancelUrl: responseUrl
|
|
4080
|
+
});
|
|
4081
|
+
}, [checkout, intentId, responseUrl]);
|
|
4082
|
+
const { submit, isPending: isSubmitting } = useSubmitTransferProof({
|
|
4083
|
+
onSuccess: (proof) => {
|
|
4084
|
+
setStatus("submitted");
|
|
4085
|
+
onProofSubmitted?.(proof);
|
|
4086
|
+
},
|
|
4087
|
+
onError: (err) => {
|
|
4088
|
+
setCurrentError(err);
|
|
4089
|
+
setStatus("error");
|
|
4090
|
+
onError?.(err);
|
|
4091
|
+
}
|
|
4092
|
+
});
|
|
4093
|
+
const submitProof = useCallback(
|
|
4094
|
+
(data) => {
|
|
4095
|
+
if (!checkoutData?.intent) return;
|
|
4096
|
+
setStatus("submitting");
|
|
4097
|
+
setCurrentError(null);
|
|
4098
|
+
submit({
|
|
4099
|
+
planId: checkoutData.intent.id,
|
|
4100
|
+
fileUrl: data.fileUrl,
|
|
4101
|
+
fileName: data.fileName,
|
|
4102
|
+
fileType: data.fileType,
|
|
4103
|
+
amount: data.amount,
|
|
4104
|
+
currency: data.currency,
|
|
4105
|
+
notes: data.notes
|
|
4106
|
+
});
|
|
4107
|
+
},
|
|
4108
|
+
[submit, checkoutData]
|
|
4109
|
+
);
|
|
4110
|
+
const TransferDetails = useMemo(() => {
|
|
4111
|
+
return function TransferDetailsInner() {
|
|
4112
|
+
if (!checkoutData) return null;
|
|
4113
|
+
const bankDetails = checkoutData.bankDetails;
|
|
4114
|
+
const plan = checkoutData.plan;
|
|
4115
|
+
const intent = checkoutData.intent;
|
|
4116
|
+
const displayAmount = plan ? formatAmount(plan.amount, plan.currency) : intent ? formatAmount(intent.amount, intent.currency) : "";
|
|
4117
|
+
return /* @__PURE__ */ jsxs("div", { children: [
|
|
4118
|
+
displayAmount && /* @__PURE__ */ jsxs(
|
|
4119
|
+
"div",
|
|
4120
|
+
{
|
|
4121
|
+
style: {
|
|
4122
|
+
textAlign: "center",
|
|
4123
|
+
padding: "16px",
|
|
4124
|
+
backgroundColor: "#f9fafb",
|
|
4125
|
+
borderRadius: "8px",
|
|
4126
|
+
marginBottom: "20px"
|
|
4127
|
+
},
|
|
4128
|
+
children: [
|
|
4129
|
+
/* @__PURE__ */ jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: displayAmount }),
|
|
4130
|
+
plan?.name && /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: plan.name }),
|
|
4131
|
+
intent?.description && /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: intent.description })
|
|
4132
|
+
]
|
|
4133
|
+
}
|
|
4134
|
+
),
|
|
4135
|
+
bankDetails && Object.keys(bankDetails).length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "16px" }, children: [
|
|
4136
|
+
/* @__PURE__ */ jsx(
|
|
4137
|
+
"div",
|
|
4138
|
+
{
|
|
4139
|
+
style: {
|
|
4140
|
+
fontSize: "14px",
|
|
4141
|
+
fontWeight: 600,
|
|
4142
|
+
color: "#111827",
|
|
4143
|
+
marginBottom: "8px"
|
|
4144
|
+
},
|
|
4145
|
+
children: "Bank Details"
|
|
4146
|
+
}
|
|
4147
|
+
),
|
|
4148
|
+
Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxs(
|
|
4149
|
+
"div",
|
|
4150
|
+
{
|
|
4151
|
+
style: {
|
|
4152
|
+
display: "flex",
|
|
4153
|
+
justifyContent: "space-between",
|
|
4154
|
+
padding: "6px 0",
|
|
4155
|
+
borderBottom: "1px solid #f3f4f6",
|
|
4156
|
+
fontSize: "13px"
|
|
4157
|
+
},
|
|
4158
|
+
children: [
|
|
4159
|
+
/* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
|
|
4160
|
+
/* @__PURE__ */ jsx("span", { style: { color: "#111827", fontWeight: 500 }, children: value })
|
|
4161
|
+
]
|
|
4162
|
+
},
|
|
4163
|
+
key
|
|
4164
|
+
))
|
|
4165
|
+
] }),
|
|
4166
|
+
checkoutData.transferInstructions && /* @__PURE__ */ jsx(
|
|
4167
|
+
"div",
|
|
4168
|
+
{
|
|
4169
|
+
style: {
|
|
4170
|
+
padding: "12px",
|
|
4171
|
+
backgroundColor: "#eff6ff",
|
|
4172
|
+
borderRadius: "6px",
|
|
4173
|
+
fontSize: "13px",
|
|
4174
|
+
color: "#1e40af",
|
|
4175
|
+
lineHeight: 1.5
|
|
4176
|
+
},
|
|
4177
|
+
children: checkoutData.transferInstructions
|
|
4178
|
+
}
|
|
4179
|
+
)
|
|
4180
|
+
] });
|
|
4181
|
+
};
|
|
4182
|
+
}, [checkoutData]);
|
|
4183
|
+
return {
|
|
4184
|
+
TransferDetails,
|
|
4185
|
+
submitProof,
|
|
4186
|
+
status,
|
|
4187
|
+
checkoutData,
|
|
4188
|
+
isSubmitting,
|
|
4189
|
+
error: currentError
|
|
4190
|
+
};
|
|
4191
|
+
}
|
|
3821
4192
|
function useTenants() {
|
|
3822
4193
|
const client = useAccessClient();
|
|
3823
4194
|
return useQuery({
|
|
@@ -3910,8 +4281,8 @@ function usePasswordToggle() {
|
|
|
3910
4281
|
}
|
|
3911
4282
|
|
|
3912
4283
|
// src/index.ts
|
|
3913
|
-
var SDK_VERSION = "0.9.
|
|
4284
|
+
var SDK_VERSION = "0.9.7";
|
|
3914
4285
|
|
|
3915
|
-
export { AuthForm, AziridProvider, BASE_PATHS, CheckoutButton, ForgotPasswordForm, InvoiceList, LoginForm, PATHS, PayButton, PayphoneCallback, PayphoneWidgetRenderer, PricingTable, ReferralCard, ReferralStats, ResetPasswordForm, SDK_VERSION, SignupForm, SubscriptionBadge, buildPaths, changePasswordSchema, cn, createAccessClient, createForgotPasswordSchema, createLoginSchema, createMutationHook, createResetPasswordConfirmSchema, createSignupSchema, en, es, forgotPasswordSchema, isAuthError, loginSchema, magicLinkRequestSchema, magicLinkVerifySchema, passkeyRegisterStartSchema, removeStyles, resetPasswordConfirmSchema, resolveMessages, signupSchema, socialLoginSchema, useAccessClient, useAzirid, useBootstrap, useBranding, useChangePassword, useCheckout, useFormState, useInvoices, useLogin, useLogout, useMagicLink, useMessages, usePasskeys, usePasswordReset, usePasswordToggle, usePaymentProviders, usePayphoneCheckout, usePayphoneConfirm, usePlans, useReferral, useReferralStats, useRefresh, useSession, useSignup, useSocialLogin, useSubmitTransferProof, useSubscription, useSwitchTenant, useTenantMembers, useTenants, useTransferProofs };
|
|
4286
|
+
export { AuthForm, AziridProvider, BASE_PATHS, CheckoutButton, ForgotPasswordForm, InvoiceList, LoginForm, PATHS, PayButton, PayphoneCallback, PayphoneWidgetRenderer, PricingTable, ReferralCard, ReferralStats, ResetPasswordForm, SDK_VERSION, SignupForm, SubscriptionBadge, buildPaths, changePasswordSchema, cn, createAccessClient, createForgotPasswordSchema, createLoginSchema, createMutationHook, createResetPasswordConfirmSchema, createSignupSchema, en, es, forgotPasswordSchema, isAuthError, loginSchema, magicLinkRequestSchema, magicLinkVerifySchema, passkeyRegisterStartSchema, removeStyles, resetPasswordConfirmSchema, resolveMessages, signupSchema, socialLoginSchema, useAccessClient, useAzirid, useBootstrap, useBranding, useChangePassword, useCheckout, useFormState, useInvoices, useLogin, useLogout, useMagicLink, useMessages, usePasskeys, usePasswordReset, usePasswordToggle, usePayButton, usePaymentProviders, usePayphoneCheckout, usePayphoneConfirm, usePlans, useReferral, useReferralStats, useRefresh, useSession, useSignup, useSocialLogin, useSubmitTransferProof, useSubscription, useSwitchTenant, useTenantMembers, useTenants, useTransferPayment, useTransferProofs };
|
|
3916
4287
|
//# sourceMappingURL=index.js.map
|
|
3917
4288
|
//# sourceMappingURL=index.js.map
|