azirid-react 0.6.0 → 0.8.0
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 +92 -1
- package/dist/index.cjs +456 -355
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +112 -4
- package/dist/index.d.ts +112 -4
- package/dist/index.js +453 -356
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
package/dist/index.cjs
CHANGED
|
@@ -97,7 +97,8 @@ var SUFFIXES = {
|
|
|
97
97
|
transferProofs: "billing/transfer-proofs",
|
|
98
98
|
payphoneConfirm: "billing/payphone/confirm",
|
|
99
99
|
referralMe: "referrals/me",
|
|
100
|
-
referralStats: "referrals/stats"
|
|
100
|
+
referralStats: "referrals/stats",
|
|
101
|
+
userTenants: "tenants"
|
|
101
102
|
};
|
|
102
103
|
var BASE_PATHS = {
|
|
103
104
|
/** Proxy mode (Next.js): requests go to the same origin via route handler */
|
|
@@ -161,7 +162,7 @@ function createAccessClient(config, appContext) {
|
|
|
161
162
|
return match ? decodeURIComponent(match[1]) : null;
|
|
162
163
|
}
|
|
163
164
|
const sessionPaths = [paths.refresh, paths.bootstrap, paths.logout];
|
|
164
|
-
async function refreshTokensInternal() {
|
|
165
|
+
async function refreshTokensInternal(opts) {
|
|
165
166
|
const reqHeaders = {
|
|
166
167
|
"Content-Type": "application/json",
|
|
167
168
|
...config.headers
|
|
@@ -175,6 +176,9 @@ function createAccessClient(config, appContext) {
|
|
|
175
176
|
if (refreshToken) {
|
|
176
177
|
bodyPayload["rt"] = refreshToken;
|
|
177
178
|
}
|
|
179
|
+
if (opts?.tenantId) {
|
|
180
|
+
bodyPayload["tenantId"] = opts.tenantId;
|
|
181
|
+
}
|
|
178
182
|
const res = await fetch(`${baseUrl}${paths.refresh}`, {
|
|
179
183
|
method: "POST",
|
|
180
184
|
headers: reqHeaders,
|
|
@@ -195,7 +199,11 @@ function createAccessClient(config, appContext) {
|
|
|
195
199
|
if (rt) setRefreshToken(rt);
|
|
196
200
|
if (xc) setCsrfToken(xc);
|
|
197
201
|
}
|
|
198
|
-
function refreshTokens() {
|
|
202
|
+
function refreshTokens(opts) {
|
|
203
|
+
if (opts?.tenantId) {
|
|
204
|
+
return refreshTokensInternal(opts).finally(() => {
|
|
205
|
+
});
|
|
206
|
+
}
|
|
199
207
|
if (refreshPromise) return refreshPromise;
|
|
200
208
|
refreshPromise = refreshTokensInternal().finally(() => {
|
|
201
209
|
refreshPromise = null;
|
|
@@ -303,7 +311,7 @@ function createAccessClient(config, appContext) {
|
|
|
303
311
|
getRefreshToken,
|
|
304
312
|
setCsrfToken,
|
|
305
313
|
getCsrfToken,
|
|
306
|
-
refreshSession: refreshTokens
|
|
314
|
+
refreshSession: (opts) => refreshTokens(opts)
|
|
307
315
|
};
|
|
308
316
|
}
|
|
309
317
|
|
|
@@ -505,6 +513,86 @@ function removeStyles() {
|
|
|
505
513
|
document.getElementById(STYLE_ID)?.remove();
|
|
506
514
|
injected = false;
|
|
507
515
|
}
|
|
516
|
+
function useAuthMutations(deps) {
|
|
517
|
+
const {
|
|
518
|
+
client,
|
|
519
|
+
props,
|
|
520
|
+
setUser,
|
|
521
|
+
setError,
|
|
522
|
+
updateAccessToken,
|
|
523
|
+
saveSessionTokens,
|
|
524
|
+
normalizeToken,
|
|
525
|
+
withAppContext,
|
|
526
|
+
clearSession
|
|
527
|
+
} = deps;
|
|
528
|
+
const queryClient = reactQuery.useQueryClient();
|
|
529
|
+
const loginMutation = reactQuery.useMutation({
|
|
530
|
+
mutationFn: (data) => client.post(client.paths.login, withAppContext(data)),
|
|
531
|
+
onSuccess: (data) => {
|
|
532
|
+
setUser(data.user);
|
|
533
|
+
updateAccessToken(normalizeToken(data));
|
|
534
|
+
saveSessionTokens(data);
|
|
535
|
+
setError(null);
|
|
536
|
+
props.onLoginSuccess?.(data);
|
|
537
|
+
},
|
|
538
|
+
onError: (err) => {
|
|
539
|
+
setError(err.message);
|
|
540
|
+
props.onError?.(err.message);
|
|
541
|
+
}
|
|
542
|
+
});
|
|
543
|
+
const signupMutation = reactQuery.useMutation({
|
|
544
|
+
mutationFn: (data) => {
|
|
545
|
+
const { confirmPassword: _, ...payload } = data;
|
|
546
|
+
return client.post(client.paths.signup, withAppContext({ ...payload }));
|
|
547
|
+
},
|
|
548
|
+
onSuccess: (data) => {
|
|
549
|
+
setUser(data.user);
|
|
550
|
+
updateAccessToken(normalizeToken(data));
|
|
551
|
+
saveSessionTokens(data);
|
|
552
|
+
setError(null);
|
|
553
|
+
props.onSignupSuccess?.(data);
|
|
554
|
+
},
|
|
555
|
+
onError: (err) => {
|
|
556
|
+
setError(err.message);
|
|
557
|
+
props.onError?.(err.message);
|
|
558
|
+
}
|
|
559
|
+
});
|
|
560
|
+
const logoutMutation = reactQuery.useMutation({
|
|
561
|
+
mutationFn: () => client.post(client.paths.logout),
|
|
562
|
+
onSettled: () => {
|
|
563
|
+
clearSession();
|
|
564
|
+
setError(null);
|
|
565
|
+
queryClient.clear();
|
|
566
|
+
props.onLogoutSuccess?.();
|
|
567
|
+
}
|
|
568
|
+
});
|
|
569
|
+
const refreshFn = react.useCallback(async () => {
|
|
570
|
+
try {
|
|
571
|
+
await client.refreshSession();
|
|
572
|
+
updateAccessToken(client.getAccessToken());
|
|
573
|
+
} catch (err) {
|
|
574
|
+
clearSession();
|
|
575
|
+
queryClient.clear();
|
|
576
|
+
props.onSessionExpired?.();
|
|
577
|
+
throw err;
|
|
578
|
+
}
|
|
579
|
+
}, [client, queryClient, props, updateAccessToken, clearSession]);
|
|
580
|
+
const switchTenantFn = react.useCallback(
|
|
581
|
+
async (tenantId) => {
|
|
582
|
+
await client.refreshSession({ tenantId });
|
|
583
|
+
updateAccessToken(client.getAccessToken());
|
|
584
|
+
await queryClient.invalidateQueries({ queryKey: ["azirid-access"] });
|
|
585
|
+
},
|
|
586
|
+
[client, queryClient, updateAccessToken]
|
|
587
|
+
);
|
|
588
|
+
return {
|
|
589
|
+
loginMutation,
|
|
590
|
+
signupMutation,
|
|
591
|
+
logoutMutation,
|
|
592
|
+
refreshFn,
|
|
593
|
+
switchTenantFn
|
|
594
|
+
};
|
|
595
|
+
}
|
|
508
596
|
var AziridContext = react.createContext(null);
|
|
509
597
|
AziridContext.displayName = "AziridContext";
|
|
510
598
|
var ClientContext = react.createContext(null);
|
|
@@ -537,7 +625,6 @@ function AziridProviderInner({
|
|
|
537
625
|
client,
|
|
538
626
|
props
|
|
539
627
|
}) {
|
|
540
|
-
const queryClient = reactQuery.useQueryClient();
|
|
541
628
|
const [user, setUser] = react.useState(null);
|
|
542
629
|
const [accessToken, setAccessToken] = react.useState(null);
|
|
543
630
|
const [error, setError] = react.useState(null);
|
|
@@ -675,57 +762,23 @@ function AziridProviderInner({
|
|
|
675
762
|
(data) => data.at ?? data.accessToken,
|
|
676
763
|
[]
|
|
677
764
|
);
|
|
678
|
-
const
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
const { confirmPassword: _, ...payload } = data;
|
|
695
|
-
return client.post(client.paths.signup, withAppContext({ ...payload }));
|
|
696
|
-
},
|
|
697
|
-
onSuccess: (data) => {
|
|
698
|
-
setUser(data.user);
|
|
699
|
-
updateAccessToken(normalizeToken(data));
|
|
700
|
-
saveSessionTokens(data);
|
|
701
|
-
setError(null);
|
|
702
|
-
props.onSignupSuccess?.(data);
|
|
703
|
-
},
|
|
704
|
-
onError: (err) => {
|
|
705
|
-
setError(err.message);
|
|
706
|
-
props.onError?.(err.message);
|
|
707
|
-
}
|
|
708
|
-
});
|
|
709
|
-
const logoutMutation = reactQuery.useMutation({
|
|
710
|
-
mutationFn: () => client.post(client.paths.logout),
|
|
711
|
-
onSettled: () => {
|
|
712
|
-
clearSession();
|
|
713
|
-
setError(null);
|
|
714
|
-
queryClient.clear();
|
|
715
|
-
props.onLogoutSuccess?.();
|
|
716
|
-
}
|
|
765
|
+
const {
|
|
766
|
+
loginMutation,
|
|
767
|
+
signupMutation,
|
|
768
|
+
logoutMutation,
|
|
769
|
+
refreshFn,
|
|
770
|
+
switchTenantFn
|
|
771
|
+
} = useAuthMutations({
|
|
772
|
+
client,
|
|
773
|
+
props,
|
|
774
|
+
setUser,
|
|
775
|
+
setError,
|
|
776
|
+
updateAccessToken,
|
|
777
|
+
saveSessionTokens,
|
|
778
|
+
normalizeToken,
|
|
779
|
+
withAppContext,
|
|
780
|
+
clearSession
|
|
717
781
|
});
|
|
718
|
-
const refreshFn = react.useCallback(async () => {
|
|
719
|
-
try {
|
|
720
|
-
await client.refreshSession();
|
|
721
|
-
updateAccessToken(client.getAccessToken());
|
|
722
|
-
} catch (err) {
|
|
723
|
-
clearSession();
|
|
724
|
-
queryClient.clear();
|
|
725
|
-
props.onSessionExpired?.();
|
|
726
|
-
throw err;
|
|
727
|
-
}
|
|
728
|
-
}, [client, queryClient, props, updateAccessToken, clearSession]);
|
|
729
782
|
const login = react.useCallback(
|
|
730
783
|
(data) => loginMutation.mutate(data),
|
|
731
784
|
[loginMutation]
|
|
@@ -748,6 +801,7 @@ function AziridProviderInner({
|
|
|
748
801
|
logout,
|
|
749
802
|
clearError,
|
|
750
803
|
refresh: refreshFn,
|
|
804
|
+
switchTenant: switchTenantFn,
|
|
751
805
|
setUser: setUserFn,
|
|
752
806
|
isLoginPending: loginMutation.isPending,
|
|
753
807
|
isSignupPending: signupMutation.isPending,
|
|
@@ -765,6 +819,7 @@ function AziridProviderInner({
|
|
|
765
819
|
logout,
|
|
766
820
|
clearError,
|
|
767
821
|
refreshFn,
|
|
822
|
+
switchTenantFn,
|
|
768
823
|
setUserFn,
|
|
769
824
|
loginMutation,
|
|
770
825
|
signupMutation,
|
|
@@ -1698,6 +1753,20 @@ function ReferralStats({ className, style }) {
|
|
|
1698
1753
|
] });
|
|
1699
1754
|
}
|
|
1700
1755
|
ReferralStats.displayName = "ReferralStats";
|
|
1756
|
+
|
|
1757
|
+
// ../shared/dist/index.js
|
|
1758
|
+
function formatAmount(amount, currency) {
|
|
1759
|
+
try {
|
|
1760
|
+
return new Intl.NumberFormat(void 0, {
|
|
1761
|
+
style: "currency",
|
|
1762
|
+
currency,
|
|
1763
|
+
minimumFractionDigits: 0,
|
|
1764
|
+
maximumFractionDigits: 2
|
|
1765
|
+
}).format(amount / 100);
|
|
1766
|
+
} catch {
|
|
1767
|
+
return `${currency} ${(amount / 100).toFixed(2)}`;
|
|
1768
|
+
}
|
|
1769
|
+
}
|
|
1701
1770
|
function usePlans() {
|
|
1702
1771
|
const client = useAccessClient();
|
|
1703
1772
|
return reactQuery.useQuery({
|
|
@@ -1863,30 +1932,42 @@ var cancelStyle = {
|
|
|
1863
1932
|
cursor: "pointer",
|
|
1864
1933
|
fontFamily: "inherit"
|
|
1865
1934
|
};
|
|
1935
|
+
var styles3 = {
|
|
1936
|
+
featuresList: {
|
|
1937
|
+
listStyle: "none",
|
|
1938
|
+
padding: 0,
|
|
1939
|
+
margin: "0 0 24px 0",
|
|
1940
|
+
flex: 1
|
|
1941
|
+
},
|
|
1942
|
+
featureItem: {
|
|
1943
|
+
display: "flex",
|
|
1944
|
+
alignItems: "center",
|
|
1945
|
+
gap: "8px",
|
|
1946
|
+
padding: "6px 0",
|
|
1947
|
+
fontSize: "14px",
|
|
1948
|
+
color: "#374151"
|
|
1949
|
+
},
|
|
1950
|
+
checkmark: {
|
|
1951
|
+
color: "#10b981",
|
|
1952
|
+
fontSize: "16px",
|
|
1953
|
+
fontWeight: 700,
|
|
1954
|
+
flexShrink: 0
|
|
1955
|
+
}
|
|
1956
|
+
};
|
|
1957
|
+
function PricingFeatureList({ features }) {
|
|
1958
|
+
if (!features || features.length === 0) return null;
|
|
1959
|
+
return /* @__PURE__ */ jsxRuntime.jsx("ul", { style: styles3.featuresList, children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { style: styles3.featureItem, children: [
|
|
1960
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: styles3.checkmark, "aria-hidden": "true", children: "\u2713" }),
|
|
1961
|
+
feature
|
|
1962
|
+
] }, i)) });
|
|
1963
|
+
}
|
|
1964
|
+
PricingFeatureList.displayName = "PricingFeatureList";
|
|
1866
1965
|
var intervalLabels = {
|
|
1867
1966
|
MONTHLY: "/mo",
|
|
1868
1967
|
YEARLY: "/yr",
|
|
1869
1968
|
ONE_TIME: ""
|
|
1870
1969
|
};
|
|
1871
|
-
|
|
1872
|
-
try {
|
|
1873
|
-
return new Intl.NumberFormat(void 0, {
|
|
1874
|
-
style: "currency",
|
|
1875
|
-
currency,
|
|
1876
|
-
minimumFractionDigits: 0,
|
|
1877
|
-
maximumFractionDigits: 2
|
|
1878
|
-
}).format(amount / 100);
|
|
1879
|
-
} catch {
|
|
1880
|
-
return `${currency} ${(amount / 100).toFixed(2)}`;
|
|
1881
|
-
}
|
|
1882
|
-
}
|
|
1883
|
-
var styles3 = {
|
|
1884
|
-
grid: (columns) => ({
|
|
1885
|
-
display: "grid",
|
|
1886
|
-
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
1887
|
-
gap: "24px",
|
|
1888
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
|
|
1889
|
-
}),
|
|
1970
|
+
var styles4 = {
|
|
1890
1971
|
card: (isCurrentPlan) => ({
|
|
1891
1972
|
border: isCurrentPlan ? "2px solid #6366f1" : "1px solid #e5e7eb",
|
|
1892
1973
|
borderRadius: "12px",
|
|
@@ -1937,26 +2018,6 @@ var styles3 = {
|
|
|
1937
2018
|
fontSize: "16px",
|
|
1938
2019
|
color: "#6b7280"
|
|
1939
2020
|
},
|
|
1940
|
-
featuresList: {
|
|
1941
|
-
listStyle: "none",
|
|
1942
|
-
padding: 0,
|
|
1943
|
-
margin: "0 0 24px 0",
|
|
1944
|
-
flex: 1
|
|
1945
|
-
},
|
|
1946
|
-
featureItem: {
|
|
1947
|
-
display: "flex",
|
|
1948
|
-
alignItems: "center",
|
|
1949
|
-
gap: "8px",
|
|
1950
|
-
padding: "6px 0",
|
|
1951
|
-
fontSize: "14px",
|
|
1952
|
-
color: "#374151"
|
|
1953
|
-
},
|
|
1954
|
-
checkmark: {
|
|
1955
|
-
color: "#10b981",
|
|
1956
|
-
fontSize: "16px",
|
|
1957
|
-
fontWeight: 700,
|
|
1958
|
-
flexShrink: 0
|
|
1959
|
-
},
|
|
1960
2021
|
selectButton: (isCurrentPlan) => ({
|
|
1961
2022
|
width: "100%",
|
|
1962
2023
|
padding: "12px 24px",
|
|
@@ -1968,11 +2029,46 @@ var styles3 = {
|
|
|
1968
2029
|
fontWeight: 600,
|
|
1969
2030
|
cursor: isCurrentPlan ? "default" : "pointer",
|
|
1970
2031
|
transition: "background-color 0.15s"
|
|
2032
|
+
})
|
|
2033
|
+
};
|
|
2034
|
+
function PricingCard({
|
|
2035
|
+
plan,
|
|
2036
|
+
isCurrentPlan,
|
|
2037
|
+
isCheckoutPending,
|
|
2038
|
+
onSelect
|
|
2039
|
+
}) {
|
|
2040
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles4.card(isCurrentPlan), children: [
|
|
2041
|
+
isCurrentPlan && /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.currentBadge, children: "Current Plan" }),
|
|
2042
|
+
/* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles4.planName, children: plan.name }),
|
|
2043
|
+
plan.description && /* @__PURE__ */ jsxRuntime.jsx("p", { style: styles4.planDescription, children: plan.description }),
|
|
2044
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles4.priceRow, children: [
|
|
2045
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.priceAmount, children: formatAmount(plan.amount, plan.currency) }),
|
|
2046
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: styles4.priceInterval, children: intervalLabels[plan.interval] })
|
|
2047
|
+
] }),
|
|
2048
|
+
plan.features && plan.features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(PricingFeatureList, { features: plan.features }),
|
|
2049
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2050
|
+
"button",
|
|
2051
|
+
{
|
|
2052
|
+
type: "button",
|
|
2053
|
+
onClick: () => onSelect(plan),
|
|
2054
|
+
disabled: isCurrentPlan || isCheckoutPending,
|
|
2055
|
+
style: {
|
|
2056
|
+
...styles4.selectButton(isCurrentPlan),
|
|
2057
|
+
...isCheckoutPending && !isCurrentPlan ? { opacity: 0.6 } : {}
|
|
2058
|
+
},
|
|
2059
|
+
children: isCurrentPlan ? "Current Plan" : "Subscribe"
|
|
2060
|
+
}
|
|
2061
|
+
)
|
|
2062
|
+
] });
|
|
2063
|
+
}
|
|
2064
|
+
PricingCard.displayName = "PricingCard";
|
|
2065
|
+
var styles5 = {
|
|
2066
|
+
grid: (columns) => ({
|
|
2067
|
+
display: "grid",
|
|
2068
|
+
gridTemplateColumns: `repeat(${columns}, 1fr)`,
|
|
2069
|
+
gap: "24px",
|
|
2070
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
|
|
1971
2071
|
}),
|
|
1972
|
-
skeleton: {
|
|
1973
|
-
backgroundColor: "#f3f4f6",
|
|
1974
|
-
borderRadius: "12px"
|
|
1975
|
-
},
|
|
1976
2072
|
skeletonCard: {
|
|
1977
2073
|
border: "1px solid #e5e7eb",
|
|
1978
2074
|
borderRadius: "12px",
|
|
@@ -2074,8 +2170,8 @@ function ProviderSelectModal({
|
|
|
2074
2170
|
onSelect,
|
|
2075
2171
|
onClose
|
|
2076
2172
|
}) {
|
|
2077
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
2078
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style:
|
|
2173
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.modal, onClick: (e) => e.stopPropagation(), children: [
|
|
2174
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles5.modalTitle, children: "Select payment method" }),
|
|
2079
2175
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: providers.map((p) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2080
2176
|
"button",
|
|
2081
2177
|
{
|
|
@@ -2103,17 +2199,22 @@ function ProviderSelectModal({
|
|
|
2103
2199
|
},
|
|
2104
2200
|
p.provider
|
|
2105
2201
|
)) }),
|
|
2106
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style:
|
|
2202
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: styles5.closeButton, onClick: onClose, children: "Cancel" })
|
|
2107
2203
|
] }) });
|
|
2108
2204
|
}
|
|
2205
|
+
var intervalLabels2 = {
|
|
2206
|
+
MONTHLY: "/mo",
|
|
2207
|
+
YEARLY: "/yr",
|
|
2208
|
+
ONE_TIME: ""
|
|
2209
|
+
};
|
|
2109
2210
|
function TransferModal({
|
|
2110
2211
|
data,
|
|
2111
2212
|
onClose
|
|
2112
2213
|
}) {
|
|
2113
2214
|
const bankDetails = data.bankDetails;
|
|
2114
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
2115
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style:
|
|
2116
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { style:
|
|
2215
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.modal, onClick: (e) => e.stopPropagation(), children: [
|
|
2216
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles5.modalTitle, children: "Manual Transfer" }),
|
|
2217
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: styles5.modalSubtitle, children: [
|
|
2117
2218
|
"Transfer the amount below to subscribe to",
|
|
2118
2219
|
" ",
|
|
2119
2220
|
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: data.plan?.name })
|
|
@@ -2130,7 +2231,7 @@ function TransferModal({
|
|
|
2130
2231
|
},
|
|
2131
2232
|
children: [
|
|
2132
2233
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "32px", fontWeight: 700, color: "#111827" }, children: data.plan ? formatAmount(data.plan.amount, data.plan.currency) : "" }),
|
|
2133
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: data.plan?.interval ?
|
|
2234
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: data.plan?.interval ? intervalLabels2[data.plan.interval] ?? "" : "" })
|
|
2134
2235
|
]
|
|
2135
2236
|
}
|
|
2136
2237
|
),
|
|
@@ -2147,12 +2248,12 @@ function TransferModal({
|
|
|
2147
2248
|
children: "Bank Details"
|
|
2148
2249
|
}
|
|
2149
2250
|
),
|
|
2150
|
-
Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2151
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style:
|
|
2152
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style:
|
|
2251
|
+
Object.entries(bankDetails).filter(([, v]) => v).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.bankDetailRow, children: [
|
|
2252
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.bankDetailLabel, children: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()) }),
|
|
2253
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: styles5.bankDetailValue, children: value })
|
|
2153
2254
|
] }, key))
|
|
2154
2255
|
] }),
|
|
2155
|
-
data.transferInstructions && /* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
2256
|
+
data.transferInstructions && /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.instructions, children: data.transferInstructions }),
|
|
2156
2257
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2157
2258
|
"p",
|
|
2158
2259
|
{
|
|
@@ -2164,7 +2265,7 @@ function TransferModal({
|
|
|
2164
2265
|
children: "After completing the transfer, submit your proof of payment. Your subscription will be activated once the transfer is verified."
|
|
2165
2266
|
}
|
|
2166
2267
|
),
|
|
2167
|
-
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style:
|
|
2268
|
+
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: styles5.closeButton, onClick: onClose, children: "Close" })
|
|
2168
2269
|
] }) });
|
|
2169
2270
|
}
|
|
2170
2271
|
function PricingTable({
|
|
@@ -2215,12 +2316,12 @@ function PricingTable({
|
|
|
2215
2316
|
checkout({ planId: plan.id, provider, successUrl, cancelUrl });
|
|
2216
2317
|
};
|
|
2217
2318
|
if (plansLoading) {
|
|
2218
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...
|
|
2319
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...styles5.grid(columns), ...style }, children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.skeletonCard, children: [
|
|
2219
2320
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2220
2321
|
"div",
|
|
2221
2322
|
{
|
|
2222
2323
|
style: {
|
|
2223
|
-
...
|
|
2324
|
+
...styles5.skeletonLine,
|
|
2224
2325
|
width: "60%",
|
|
2225
2326
|
height: "20px"
|
|
2226
2327
|
}
|
|
@@ -2230,7 +2331,7 @@ function PricingTable({
|
|
|
2230
2331
|
"div",
|
|
2231
2332
|
{
|
|
2232
2333
|
style: {
|
|
2233
|
-
...
|
|
2334
|
+
...styles5.skeletonLine,
|
|
2234
2335
|
width: "80%",
|
|
2235
2336
|
height: "14px"
|
|
2236
2337
|
}
|
|
@@ -2240,7 +2341,7 @@ function PricingTable({
|
|
|
2240
2341
|
"div",
|
|
2241
2342
|
{
|
|
2242
2343
|
style: {
|
|
2243
|
-
...
|
|
2344
|
+
...styles5.skeletonLine,
|
|
2244
2345
|
width: "40%",
|
|
2245
2346
|
height: "36px",
|
|
2246
2347
|
marginTop: "8px"
|
|
@@ -2251,7 +2352,7 @@ function PricingTable({
|
|
|
2251
2352
|
"div",
|
|
2252
2353
|
{
|
|
2253
2354
|
style: {
|
|
2254
|
-
...
|
|
2355
|
+
...styles5.skeletonLine,
|
|
2255
2356
|
width: "90%",
|
|
2256
2357
|
height: "14px"
|
|
2257
2358
|
}
|
|
@@ -2262,7 +2363,7 @@ function PricingTable({
|
|
|
2262
2363
|
"div",
|
|
2263
2364
|
{
|
|
2264
2365
|
style: {
|
|
2265
|
-
...
|
|
2366
|
+
...styles5.skeletonLine,
|
|
2266
2367
|
width: "100%",
|
|
2267
2368
|
height: "44px",
|
|
2268
2369
|
marginTop: "16px"
|
|
@@ -2277,35 +2378,19 @@ function PricingTable({
|
|
|
2277
2378
|
"div",
|
|
2278
2379
|
{
|
|
2279
2380
|
className,
|
|
2280
|
-
style: { ...
|
|
2381
|
+
style: { ...styles5.grid(columns), ...style },
|
|
2281
2382
|
children: sortedPlans.map((plan) => {
|
|
2282
2383
|
const isCurrentPlan = subscription?.planId === plan.id && subscription.status === "ACTIVE";
|
|
2283
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
plan.
|
|
2292
|
-
|
|
2293
|
-
feature
|
|
2294
|
-
] }, i)) }),
|
|
2295
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2296
|
-
"button",
|
|
2297
|
-
{
|
|
2298
|
-
type: "button",
|
|
2299
|
-
onClick: () => handleSelect(plan),
|
|
2300
|
-
disabled: isCurrentPlan || checkoutPending,
|
|
2301
|
-
style: {
|
|
2302
|
-
...styles3.selectButton(isCurrentPlan),
|
|
2303
|
-
...checkoutPending && !isCurrentPlan ? { opacity: 0.6 } : {}
|
|
2304
|
-
},
|
|
2305
|
-
children: isCurrentPlan ? "Current Plan" : "Subscribe"
|
|
2306
|
-
}
|
|
2307
|
-
)
|
|
2308
|
-
] }, plan.id);
|
|
2384
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2385
|
+
PricingCard,
|
|
2386
|
+
{
|
|
2387
|
+
plan,
|
|
2388
|
+
isCurrentPlan,
|
|
2389
|
+
isCheckoutPending: checkoutPending,
|
|
2390
|
+
onSelect: handleSelect
|
|
2391
|
+
},
|
|
2392
|
+
plan.id
|
|
2393
|
+
);
|
|
2309
2394
|
})
|
|
2310
2395
|
}
|
|
2311
2396
|
),
|
|
@@ -2391,126 +2476,62 @@ var PROVIDER_ICONS2 = {
|
|
|
2391
2476
|
NUVEI: "\u{1F4B3}",
|
|
2392
2477
|
MANUAL_TRANSFER: "\u{1F3E6}"
|
|
2393
2478
|
};
|
|
2394
|
-
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
}
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
|
|
2420
|
-
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
|
|
2427
|
-
|
|
2428
|
-
|
|
2429
|
-
|
|
2430
|
-
|
|
2431
|
-
|
|
2432
|
-
|
|
2433
|
-
|
|
2434
|
-
|
|
2435
|
-
|
|
2436
|
-
|
|
2437
|
-
|
|
2438
|
-
|
|
2439
|
-
|
|
2440
|
-
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
}
|
|
2449
|
-
|
|
2450
|
-
onProviderSelect?.(provider);
|
|
2451
|
-
checkout({
|
|
2452
|
-
planId,
|
|
2453
|
-
intentId,
|
|
2454
|
-
provider,
|
|
2455
|
-
successUrl,
|
|
2456
|
-
cancelUrl
|
|
2457
|
-
});
|
|
2458
|
-
};
|
|
2459
|
-
const isDisabled = disabled || isPending || providersLoading || !planId && !intentId;
|
|
2460
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2461
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2462
|
-
"button",
|
|
2463
|
-
{
|
|
2464
|
-
type: "button",
|
|
2465
|
-
className,
|
|
2466
|
-
style: {
|
|
2467
|
-
padding: "10px 24px",
|
|
2468
|
-
fontSize: "14px",
|
|
2469
|
-
fontWeight: 600,
|
|
2470
|
-
color: "#fff",
|
|
2471
|
-
backgroundColor: isDisabled ? "#9ca3af" : "#111827",
|
|
2472
|
-
border: "none",
|
|
2473
|
-
borderRadius: "8px",
|
|
2474
|
-
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
2475
|
-
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
2476
|
-
...style
|
|
2477
|
-
},
|
|
2478
|
-
onClick: handleClick,
|
|
2479
|
-
disabled: isDisabled,
|
|
2480
|
-
children: isPending ? billing?.processing ?? "Processing..." : children ?? (billing?.pay ?? "Pay")
|
|
2481
|
-
}
|
|
2482
|
-
),
|
|
2483
|
-
showProviderModal && providers && providers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2484
|
-
ProviderModal,
|
|
2485
|
-
{
|
|
2486
|
-
providers,
|
|
2487
|
-
isPending,
|
|
2488
|
-
onSelect: doCheckout,
|
|
2489
|
-
onClose: () => setShowProviderModal(false),
|
|
2490
|
-
labels: billing
|
|
2491
|
-
}
|
|
2492
|
-
),
|
|
2493
|
-
showTransferModal && transferData && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2494
|
-
TransferModal2,
|
|
2495
|
-
{
|
|
2496
|
-
data: transferData,
|
|
2497
|
-
onClose: () => {
|
|
2498
|
-
setShowTransferModal(false);
|
|
2499
|
-
setTransferData(null);
|
|
2500
|
-
},
|
|
2501
|
-
labels: billing
|
|
2502
|
-
}
|
|
2503
|
-
),
|
|
2504
|
-
payphoneData?.widgetConfig && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2505
|
-
PayphoneModal,
|
|
2506
|
-
{
|
|
2507
|
-
config: payphoneData.widgetConfig,
|
|
2508
|
-
successUrl,
|
|
2509
|
-
onClose: () => setPayphoneData(null)
|
|
2510
|
-
}
|
|
2511
|
-
)
|
|
2512
|
-
] });
|
|
2513
|
-
}
|
|
2479
|
+
var modalStyles = {
|
|
2480
|
+
overlay: {
|
|
2481
|
+
position: "fixed",
|
|
2482
|
+
inset: 0,
|
|
2483
|
+
backgroundColor: "rgba(0,0,0,0.5)",
|
|
2484
|
+
display: "flex",
|
|
2485
|
+
alignItems: "center",
|
|
2486
|
+
justifyContent: "center",
|
|
2487
|
+
zIndex: 9999,
|
|
2488
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
|
2489
|
+
},
|
|
2490
|
+
card: {
|
|
2491
|
+
backgroundColor: "#fff",
|
|
2492
|
+
borderRadius: "12px",
|
|
2493
|
+
padding: "24px",
|
|
2494
|
+
maxWidth: "420px",
|
|
2495
|
+
width: "90%",
|
|
2496
|
+
boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)"
|
|
2497
|
+
},
|
|
2498
|
+
title: {
|
|
2499
|
+
fontSize: "18px",
|
|
2500
|
+
fontWeight: 700,
|
|
2501
|
+
color: "#111827",
|
|
2502
|
+
margin: "0 0 20px 0",
|
|
2503
|
+
textAlign: "center"
|
|
2504
|
+
},
|
|
2505
|
+
providerButton: {
|
|
2506
|
+
display: "flex",
|
|
2507
|
+
alignItems: "center",
|
|
2508
|
+
width: "100%",
|
|
2509
|
+
padding: "12px 16px",
|
|
2510
|
+
border: "1px solid #e5e7eb",
|
|
2511
|
+
borderRadius: "8px",
|
|
2512
|
+
backgroundColor: "#fff",
|
|
2513
|
+
cursor: "pointer",
|
|
2514
|
+
fontSize: "14px",
|
|
2515
|
+
fontWeight: 500,
|
|
2516
|
+
color: "#111827",
|
|
2517
|
+
transition: "background-color 0.15s",
|
|
2518
|
+
fontFamily: "inherit"
|
|
2519
|
+
},
|
|
2520
|
+
cancelButton: {
|
|
2521
|
+
display: "block",
|
|
2522
|
+
width: "100%",
|
|
2523
|
+
marginTop: "16px",
|
|
2524
|
+
padding: "10px",
|
|
2525
|
+
border: "none",
|
|
2526
|
+
borderRadius: "8px",
|
|
2527
|
+
backgroundColor: "#f3f4f6",
|
|
2528
|
+
color: "#6b7280",
|
|
2529
|
+
fontSize: "14px",
|
|
2530
|
+
fontWeight: 500,
|
|
2531
|
+
cursor: "pointer",
|
|
2532
|
+
fontFamily: "inherit"
|
|
2533
|
+
}
|
|
2534
|
+
};
|
|
2514
2535
|
function ProviderModal({
|
|
2515
2536
|
providers,
|
|
2516
2537
|
isPending,
|
|
@@ -2548,7 +2569,7 @@ function TransferModal2({
|
|
|
2548
2569
|
const bankDetails = data.bankDetails;
|
|
2549
2570
|
const plan = data.plan;
|
|
2550
2571
|
const intent = data.intent;
|
|
2551
|
-
const displayAmount = plan ?
|
|
2572
|
+
const displayAmount = plan ? formatAmount(plan.amount, plan.currency) : intent ? formatAmount(intent.amount, intent.currency) : "";
|
|
2552
2573
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: modalStyles.card, onClick: (e) => e.stopPropagation(), children: [
|
|
2553
2574
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: modalStyles.title, children: labels?.bankTransfer ?? "Bank Transfer" }),
|
|
2554
2575
|
displayAmount && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -2628,62 +2649,114 @@ function TransferModal2({
|
|
|
2628
2649
|
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: modalStyles.cancelButton, onClick: onClose, children: "Close" })
|
|
2629
2650
|
] }) });
|
|
2630
2651
|
}
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2652
|
+
function PayButton({
|
|
2653
|
+
planId,
|
|
2654
|
+
intentId,
|
|
2655
|
+
successUrl,
|
|
2656
|
+
cancelUrl,
|
|
2657
|
+
className,
|
|
2658
|
+
style,
|
|
2659
|
+
children,
|
|
2660
|
+
disabled,
|
|
2661
|
+
onSuccess,
|
|
2662
|
+
onError,
|
|
2663
|
+
onProviderSelect
|
|
2664
|
+
}) {
|
|
2665
|
+
const messages = useMessages();
|
|
2666
|
+
const billing = messages?.billing;
|
|
2667
|
+
const [showProviderModal, setShowProviderModal] = react.useState(false);
|
|
2668
|
+
const [showTransferModal, setShowTransferModal] = react.useState(false);
|
|
2669
|
+
const [transferData, setTransferData] = react.useState(null);
|
|
2670
|
+
const [payphoneData, setPayphoneData] = react.useState(null);
|
|
2671
|
+
const { data: providers, isLoading: providersLoading } = usePaymentProviders();
|
|
2672
|
+
const { checkout, isPending } = useCheckout({
|
|
2673
|
+
redirectOnSuccess: true,
|
|
2674
|
+
onSuccess: (data) => {
|
|
2675
|
+
if (data.provider === "MANUAL_TRANSFER") {
|
|
2676
|
+
setTransferData(data);
|
|
2677
|
+
setShowTransferModal(true);
|
|
2678
|
+
setShowProviderModal(false);
|
|
2679
|
+
} else if (data.provider === "PAYPHONE" && data.widgetConfig) {
|
|
2680
|
+
setPayphoneData(data);
|
|
2681
|
+
setShowProviderModal(false);
|
|
2682
|
+
}
|
|
2683
|
+
onSuccess?.(data);
|
|
2684
|
+
},
|
|
2685
|
+
onError
|
|
2686
|
+
});
|
|
2687
|
+
const handleClick = () => {
|
|
2688
|
+
if (!providers || providers.length === 0) return;
|
|
2689
|
+
if (providers.length === 1) {
|
|
2690
|
+
doCheckout(providers[0].provider);
|
|
2691
|
+
} else {
|
|
2692
|
+
setShowProviderModal(true);
|
|
2693
|
+
}
|
|
2694
|
+
};
|
|
2695
|
+
const doCheckout = (provider) => {
|
|
2696
|
+
onProviderSelect?.(provider);
|
|
2697
|
+
checkout({
|
|
2698
|
+
planId,
|
|
2699
|
+
intentId,
|
|
2700
|
+
provider,
|
|
2701
|
+
successUrl,
|
|
2702
|
+
cancelUrl
|
|
2703
|
+
});
|
|
2704
|
+
};
|
|
2705
|
+
const isDisabled = disabled || isPending || providersLoading || !planId && !intentId;
|
|
2706
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2707
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2708
|
+
"button",
|
|
2709
|
+
{
|
|
2710
|
+
type: "button",
|
|
2711
|
+
className,
|
|
2712
|
+
style: {
|
|
2713
|
+
padding: "10px 24px",
|
|
2714
|
+
fontSize: "14px",
|
|
2715
|
+
fontWeight: 600,
|
|
2716
|
+
color: "#fff",
|
|
2717
|
+
backgroundColor: isDisabled ? "#9ca3af" : "#111827",
|
|
2718
|
+
border: "none",
|
|
2719
|
+
borderRadius: "8px",
|
|
2720
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
2721
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
2722
|
+
...style
|
|
2723
|
+
},
|
|
2724
|
+
onClick: handleClick,
|
|
2725
|
+
disabled: isDisabled,
|
|
2726
|
+
children: isPending ? billing?.processing ?? "Processing..." : children ?? (billing?.pay ?? "Pay")
|
|
2727
|
+
}
|
|
2728
|
+
),
|
|
2729
|
+
showProviderModal && providers && providers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2730
|
+
ProviderModal,
|
|
2731
|
+
{
|
|
2732
|
+
providers,
|
|
2733
|
+
isPending,
|
|
2734
|
+
onSelect: doCheckout,
|
|
2735
|
+
onClose: () => setShowProviderModal(false),
|
|
2736
|
+
labels: billing
|
|
2737
|
+
}
|
|
2738
|
+
),
|
|
2739
|
+
showTransferModal && transferData && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2740
|
+
TransferModal2,
|
|
2741
|
+
{
|
|
2742
|
+
data: transferData,
|
|
2743
|
+
onClose: () => {
|
|
2744
|
+
setShowTransferModal(false);
|
|
2745
|
+
setTransferData(null);
|
|
2746
|
+
},
|
|
2747
|
+
labels: billing
|
|
2748
|
+
}
|
|
2749
|
+
),
|
|
2750
|
+
payphoneData?.widgetConfig && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2751
|
+
PayphoneModal,
|
|
2752
|
+
{
|
|
2753
|
+
config: payphoneData.widgetConfig,
|
|
2754
|
+
successUrl,
|
|
2755
|
+
onClose: () => setPayphoneData(null)
|
|
2756
|
+
}
|
|
2757
|
+
)
|
|
2758
|
+
] });
|
|
2759
|
+
}
|
|
2687
2760
|
function usePayphoneConfirm(options) {
|
|
2688
2761
|
const client = useAccessClient();
|
|
2689
2762
|
return reactQuery.useMutation({
|
|
@@ -2749,7 +2822,7 @@ var statusConfig = {
|
|
|
2749
2822
|
UNPAID: { bg: "#fee2e2", color: "#991b1b", label: "Unpaid" },
|
|
2750
2823
|
INCOMPLETE: { bg: "#f3f4f6", color: "#6b7280", label: "Incomplete" }
|
|
2751
2824
|
};
|
|
2752
|
-
var
|
|
2825
|
+
var styles6 = {
|
|
2753
2826
|
badge: {
|
|
2754
2827
|
display: "inline-flex",
|
|
2755
2828
|
alignItems: "center",
|
|
@@ -2778,7 +2851,7 @@ var styles4 = {
|
|
|
2778
2851
|
function SubscriptionBadge({ className, style }) {
|
|
2779
2852
|
const { data: subscription, isLoading } = useSubscription();
|
|
2780
2853
|
if (isLoading) {
|
|
2781
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { ...
|
|
2854
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className, style: { ...styles6.skeleton, ...style } });
|
|
2782
2855
|
}
|
|
2783
2856
|
if (!subscription) {
|
|
2784
2857
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -2786,7 +2859,7 @@ function SubscriptionBadge({ className, style }) {
|
|
|
2786
2859
|
{
|
|
2787
2860
|
className,
|
|
2788
2861
|
style: {
|
|
2789
|
-
...
|
|
2862
|
+
...styles6.badge,
|
|
2790
2863
|
backgroundColor: "#f3f4f6",
|
|
2791
2864
|
color: "#6b7280",
|
|
2792
2865
|
...style
|
|
@@ -2801,13 +2874,13 @@ function SubscriptionBadge({ className, style }) {
|
|
|
2801
2874
|
{
|
|
2802
2875
|
className,
|
|
2803
2876
|
style: {
|
|
2804
|
-
...
|
|
2877
|
+
...styles6.badge,
|
|
2805
2878
|
backgroundColor: config.bg,
|
|
2806
2879
|
color: config.color,
|
|
2807
2880
|
...style
|
|
2808
2881
|
},
|
|
2809
2882
|
children: [
|
|
2810
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style:
|
|
2883
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: styles6.dot(config.color), "aria-hidden": "true" }),
|
|
2811
2884
|
subscription.plan.name,
|
|
2812
2885
|
" \xB7 ",
|
|
2813
2886
|
config.label
|
|
@@ -2841,19 +2914,7 @@ function formatDate2(dateStr) {
|
|
|
2841
2914
|
return dateStr;
|
|
2842
2915
|
}
|
|
2843
2916
|
}
|
|
2844
|
-
|
|
2845
|
-
try {
|
|
2846
|
-
return new Intl.NumberFormat(void 0, {
|
|
2847
|
-
style: "currency",
|
|
2848
|
-
currency,
|
|
2849
|
-
minimumFractionDigits: 0,
|
|
2850
|
-
maximumFractionDigits: 2
|
|
2851
|
-
}).format(amount / 100);
|
|
2852
|
-
} catch {
|
|
2853
|
-
return `${currency} ${(amount / 100).toFixed(2)}`;
|
|
2854
|
-
}
|
|
2855
|
-
}
|
|
2856
|
-
var styles5 = {
|
|
2917
|
+
var styles7 = {
|
|
2857
2918
|
container: {
|
|
2858
2919
|
border: "1px solid #e5e7eb",
|
|
2859
2920
|
borderRadius: "12px",
|
|
@@ -2922,41 +2983,41 @@ var styles5 = {
|
|
|
2922
2983
|
function InvoiceList({ className, style }) {
|
|
2923
2984
|
const { data: invoices, isLoading } = useInvoices();
|
|
2924
2985
|
if (isLoading) {
|
|
2925
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...
|
|
2926
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
2986
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...styles7.container, ...style }, children: [
|
|
2987
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: styles7.header, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...styles7.skeleton, width: "100px", height: "18px" } }) }),
|
|
2927
2988
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "24px" }, children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2928
2989
|
"div",
|
|
2929
2990
|
{
|
|
2930
|
-
style: { ...
|
|
2991
|
+
style: { ...styles7.skeleton, width: "100%", height: "16px", marginBottom: "16px" }
|
|
2931
2992
|
},
|
|
2932
2993
|
i
|
|
2933
2994
|
)) })
|
|
2934
2995
|
] });
|
|
2935
2996
|
}
|
|
2936
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...
|
|
2937
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
2938
|
-
/* @__PURE__ */ jsxRuntime.jsxs("table", { style:
|
|
2997
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...styles7.container, ...style }, children: [
|
|
2998
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: styles7.header, children: /* @__PURE__ */ jsxRuntime.jsx("h3", { style: styles7.title, children: "Invoices" }) }),
|
|
2999
|
+
/* @__PURE__ */ jsxRuntime.jsxs("table", { style: styles7.table, children: [
|
|
2939
3000
|
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
2940
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { style:
|
|
2941
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { style:
|
|
2942
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { style:
|
|
2943
|
-
/* @__PURE__ */ jsxRuntime.jsx("th", { style:
|
|
3001
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { style: styles7.th, children: "Date" }),
|
|
3002
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { style: styles7.th, children: "Amount" }),
|
|
3003
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { style: styles7.th, children: "Status" }),
|
|
3004
|
+
/* @__PURE__ */ jsxRuntime.jsx("th", { style: styles7.th, children: "Invoice" })
|
|
2944
3005
|
] }) }),
|
|
2945
3006
|
/* @__PURE__ */ jsxRuntime.jsxs("tbody", { children: [
|
|
2946
|
-
(!invoices || invoices.length === 0) && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 4, style:
|
|
3007
|
+
(!invoices || invoices.length === 0) && /* @__PURE__ */ jsxRuntime.jsx("tr", { children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan: 4, style: styles7.emptyRow, children: "No invoices yet." }) }),
|
|
2947
3008
|
invoices?.map((invoice) => {
|
|
2948
3009
|
const sc = statusColors2[invoice.status];
|
|
2949
3010
|
return /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
|
|
2950
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style:
|
|
2951
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style:
|
|
2952
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style:
|
|
2953
|
-
/* @__PURE__ */ jsxRuntime.jsx("td", { style:
|
|
3011
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { style: styles7.td, children: formatDate2(invoice.createdAt) }),
|
|
3012
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { style: styles7.td, children: formatAmount(invoice.amount, invoice.currency) }),
|
|
3013
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { style: styles7.td, children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: styles7.badge(sc.bg, sc.color), children: invoice.status }) }),
|
|
3014
|
+
/* @__PURE__ */ jsxRuntime.jsx("td", { style: styles7.td, children: invoice.invoiceUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2954
3015
|
"a",
|
|
2955
3016
|
{
|
|
2956
3017
|
href: invoice.invoiceUrl,
|
|
2957
3018
|
target: "_blank",
|
|
2958
3019
|
rel: "noopener noreferrer",
|
|
2959
|
-
style:
|
|
3020
|
+
style: styles7.link,
|
|
2960
3021
|
children: "View"
|
|
2961
3022
|
}
|
|
2962
3023
|
) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#d1d5db" }, children: "\u2014" }) })
|
|
@@ -3214,6 +3275,42 @@ function useTransferProofs() {
|
|
|
3214
3275
|
queryFn: () => client.get(client.paths.transferProofs)
|
|
3215
3276
|
});
|
|
3216
3277
|
}
|
|
3278
|
+
function useTenants() {
|
|
3279
|
+
const client = useAccessClient();
|
|
3280
|
+
return reactQuery.useQuery({
|
|
3281
|
+
queryKey: ["azirid-access", "tenants"],
|
|
3282
|
+
queryFn: () => client.get(client.paths.userTenants),
|
|
3283
|
+
enabled: !!client.getAccessToken()
|
|
3284
|
+
});
|
|
3285
|
+
}
|
|
3286
|
+
function useTenantMembers(tenantId) {
|
|
3287
|
+
const client = useAccessClient();
|
|
3288
|
+
return reactQuery.useQuery({
|
|
3289
|
+
queryKey: ["azirid-access", "tenants", tenantId, "members"],
|
|
3290
|
+
queryFn: () => client.get(`${client.paths.userTenants}/${tenantId}/members`),
|
|
3291
|
+
enabled: !!client.getAccessToken() && !!tenantId
|
|
3292
|
+
});
|
|
3293
|
+
}
|
|
3294
|
+
function useSwitchTenant() {
|
|
3295
|
+
const client = useAccessClient();
|
|
3296
|
+
const queryClient = reactQuery.useQueryClient();
|
|
3297
|
+
const switchTenant = async (tenantId) => {
|
|
3298
|
+
await client.refreshSession({ tenantId });
|
|
3299
|
+
await queryClient.invalidateQueries({ queryKey: ["azirid-access"] });
|
|
3300
|
+
};
|
|
3301
|
+
return { switchTenant };
|
|
3302
|
+
}
|
|
3303
|
+
function createMutationHook(config) {
|
|
3304
|
+
return function useGeneratedMutation(options) {
|
|
3305
|
+
const client = useAccessClient();
|
|
3306
|
+
return reactQuery.useMutation({
|
|
3307
|
+
mutationKey: config.mutationKey,
|
|
3308
|
+
mutationFn: (input) => config.mutationFn(client, input),
|
|
3309
|
+
onSuccess: options?.onSuccess,
|
|
3310
|
+
onError: options?.onError
|
|
3311
|
+
});
|
|
3312
|
+
};
|
|
3313
|
+
}
|
|
3217
3314
|
function zodToFieldErrors(zodError) {
|
|
3218
3315
|
return zodError.issues.map((issue) => ({
|
|
3219
3316
|
field: issue.path.join("."),
|
|
@@ -3270,7 +3367,7 @@ function usePasswordToggle() {
|
|
|
3270
3367
|
}
|
|
3271
3368
|
|
|
3272
3369
|
// src/index.ts
|
|
3273
|
-
var SDK_VERSION = "0.
|
|
3370
|
+
var SDK_VERSION = "0.8.0";
|
|
3274
3371
|
|
|
3275
3372
|
exports.AziridProvider = AziridProvider;
|
|
3276
3373
|
exports.BASE_PATHS = BASE_PATHS;
|
|
@@ -3291,6 +3388,7 @@ exports.changePasswordSchema = changePasswordSchema;
|
|
|
3291
3388
|
exports.cn = cn;
|
|
3292
3389
|
exports.createAccessClient = createAccessClient;
|
|
3293
3390
|
exports.createLoginSchema = createLoginSchema;
|
|
3391
|
+
exports.createMutationHook = createMutationHook;
|
|
3294
3392
|
exports.createSignupSchema = createSignupSchema;
|
|
3295
3393
|
exports.en = en;
|
|
3296
3394
|
exports.es = es;
|
|
@@ -3328,6 +3426,9 @@ exports.useSignup = useSignup;
|
|
|
3328
3426
|
exports.useSocialLogin = useSocialLogin;
|
|
3329
3427
|
exports.useSubmitTransferProof = useSubmitTransferProof;
|
|
3330
3428
|
exports.useSubscription = useSubscription;
|
|
3429
|
+
exports.useSwitchTenant = useSwitchTenant;
|
|
3430
|
+
exports.useTenantMembers = useTenantMembers;
|
|
3431
|
+
exports.useTenants = useTenants;
|
|
3331
3432
|
exports.useTransferProofs = useTransferProofs;
|
|
3332
3433
|
//# sourceMappingURL=index.cjs.map
|
|
3333
3434
|
//# sourceMappingURL=index.cjs.map
|