azirid-react 0.9.1 → 0.9.4
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 +10 -17
- package/dist/index.cjs +34 -68
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +34 -68
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -689,7 +689,6 @@ Drop-in pricing grid with checkout flow integrated.
|
|
|
689
689
|
|
|
690
690
|
```tsx
|
|
691
691
|
import { PricingTable } from 'azirid-react'
|
|
692
|
-
|
|
693
692
|
;<PricingTable
|
|
694
693
|
successUrl={`${window.location.origin}/billing?success=true`}
|
|
695
694
|
cancelUrl={`${window.location.origin}/billing`}
|
|
@@ -712,7 +711,6 @@ Flexible payment button with provider selection modal. Supports both plans and p
|
|
|
712
711
|
|
|
713
712
|
```tsx
|
|
714
713
|
import { PayButton } from 'azirid-react'
|
|
715
|
-
|
|
716
714
|
;<PayButton
|
|
717
715
|
planId="plan_123"
|
|
718
716
|
successUrl="/billing?success=true"
|
|
@@ -725,14 +723,15 @@ import { PayButton } from 'azirid-react'
|
|
|
725
723
|
|
|
726
724
|
| Prop | Type | Default | Description |
|
|
727
725
|
| ------------ | ----------------- | ------- | --------------------------------------------- |
|
|
728
|
-
| `planId` | `string` | — | Plan to purchase (use `planId` or `intentId`)
|
|
729
|
-
| `intentId` | `string` | — | Payment intent ID (alternative to `planId`)
|
|
730
|
-
| `successUrl` | `string` | — | **Required.** Redirect URL after success
|
|
731
|
-
| `cancelUrl` | `string` | — | **Required.** Redirect URL on cancel
|
|
732
|
-
| `onSuccess`
|
|
733
|
-
| `onError`
|
|
734
|
-
| `
|
|
735
|
-
| `
|
|
726
|
+
| `planId` | `string` | — | Plan to purchase (use `planId` or `intentId`) |
|
|
727
|
+
| `intentId` | `string` | — | Payment intent ID (alternative to `planId`) |
|
|
728
|
+
| `successUrl` | `string` | — | **Required.** Redirect URL after success |
|
|
729
|
+
| `cancelUrl` | `string` | — | **Required.** Redirect URL on cancel |
|
|
730
|
+
| `onSuccess` | `(data) => void` | — | Called on successful checkout. For `MANUAL_TRANSFER` and `PAYPHONE`, deferred until the user closes the modal |
|
|
731
|
+
| `onError` | `(error) => void` | — | Called on error |
|
|
732
|
+
| `onProviderSelect` | `(provider: string) => void` | — | Called when a provider is selected |
|
|
733
|
+
| `children` | `ReactNode` | — | Button label |
|
|
734
|
+
| `disabled` | `boolean` | — | Disable the button |
|
|
736
735
|
|
|
737
736
|
#### `CheckoutButton`
|
|
738
737
|
|
|
@@ -740,7 +739,6 @@ Simple checkout button for a specific plan.
|
|
|
740
739
|
|
|
741
740
|
```tsx
|
|
742
741
|
import { CheckoutButton } from 'azirid-react'
|
|
743
|
-
|
|
744
742
|
;<CheckoutButton planId="plan_123" successUrl="/billing?success=true" cancelUrl="/billing">
|
|
745
743
|
Subscribe
|
|
746
744
|
</CheckoutButton>
|
|
@@ -752,7 +750,6 @@ Color-coded badge showing the current subscription status.
|
|
|
752
750
|
|
|
753
751
|
```tsx
|
|
754
752
|
import { SubscriptionBadge } from 'azirid-react'
|
|
755
|
-
|
|
756
753
|
;<SubscriptionBadge />
|
|
757
754
|
// Renders: "Pro · Active" (green), "Free · Trialing" (blue), etc.
|
|
758
755
|
```
|
|
@@ -765,7 +762,6 @@ Table of invoices with status badges and download links.
|
|
|
765
762
|
|
|
766
763
|
```tsx
|
|
767
764
|
import { InvoiceList } from 'azirid-react'
|
|
768
|
-
|
|
769
765
|
;<InvoiceList />
|
|
770
766
|
```
|
|
771
767
|
|
|
@@ -934,7 +930,6 @@ Card displaying the referral link with copy button and stats.
|
|
|
934
930
|
|
|
935
931
|
```tsx
|
|
936
932
|
import { ReferralCard } from 'azirid-react'
|
|
937
|
-
|
|
938
933
|
;<ReferralCard
|
|
939
934
|
title="Refer a Friend"
|
|
940
935
|
description="Share your link and earn rewards for each signup."
|
|
@@ -953,7 +948,6 @@ Table showing referral history with status and reward badges.
|
|
|
953
948
|
|
|
954
949
|
```tsx
|
|
955
950
|
import { ReferralStats } from 'azirid-react'
|
|
956
|
-
|
|
957
951
|
;<ReferralStats />
|
|
958
952
|
```
|
|
959
953
|
|
|
@@ -1424,7 +1418,6 @@ Tailwind class merge utility (powered by `clsx` + `tailwind-merge`).
|
|
|
1424
1418
|
|
|
1425
1419
|
```tsx
|
|
1426
1420
|
import { cn } from 'azirid-react'
|
|
1427
|
-
|
|
1428
1421
|
;<div className={cn('bg-white p-4', isActive && 'bg-blue-500')} />
|
|
1429
1422
|
```
|
|
1430
1423
|
|
|
@@ -1522,7 +1515,7 @@ import type {
|
|
|
1522
1515
|
| `SubmitTransferProofData` | Transfer proof payload (`planId`, `fileUrl`, `amount`, ...) |
|
|
1523
1516
|
| `TransferProof` | Transfer proof object (`status`: `PENDING_REVIEW \| APPROVED \| REJECTED`, ...) |
|
|
1524
1517
|
| `PayphoneWidgetConfig` | Payphone widget config (`token`, `storeId`, `amount`, ...) |
|
|
1525
|
-
| `PaymentIntent` | Payment intent
|
|
1518
|
+
| `PaymentIntent` | Payment intent (`amount`, `subtotal?`, `taxRate?`, `taxAmount?`, `reference?`, ...) |
|
|
1526
1519
|
|
|
1527
1520
|
### Referral Types
|
|
1528
1521
|
|
package/dist/index.cjs
CHANGED
|
@@ -679,10 +679,7 @@ function AziridProviderInner({
|
|
|
679
679
|
() => resolveMessages(props.locale ?? "es", props.messages),
|
|
680
680
|
[props.locale, props.messages]
|
|
681
681
|
);
|
|
682
|
-
const brandingValue = react.useMemo(
|
|
683
|
-
() => ({ branding, messages }),
|
|
684
|
-
[branding, messages]
|
|
685
|
-
);
|
|
682
|
+
const brandingValue = react.useMemo(() => ({ branding, messages }), [branding, messages]);
|
|
686
683
|
const isProxyMode = !props.apiUrl;
|
|
687
684
|
const syncUrl = react.useMemo(() => {
|
|
688
685
|
if (props.sessionSyncUrl === false) return null;
|
|
@@ -807,13 +804,7 @@ function AziridProviderInner({
|
|
|
807
804
|
(data) => data.at ?? data.accessToken,
|
|
808
805
|
[]
|
|
809
806
|
);
|
|
810
|
-
const {
|
|
811
|
-
loginMutation,
|
|
812
|
-
signupMutation,
|
|
813
|
-
logoutMutation,
|
|
814
|
-
refreshFn,
|
|
815
|
-
switchTenantFn
|
|
816
|
-
} = useAuthMutations({
|
|
807
|
+
const { loginMutation, signupMutation, logoutMutation, refreshFn, switchTenantFn } = useAuthMutations({
|
|
817
808
|
client,
|
|
818
809
|
props,
|
|
819
810
|
setUser,
|
|
@@ -1874,10 +1865,7 @@ function useReferral() {
|
|
|
1874
1865
|
}
|
|
1875
1866
|
return false;
|
|
1876
1867
|
}, [query.data?.referralUrl]);
|
|
1877
|
-
return react.useMemo(
|
|
1878
|
-
() => ({ ...query, copyToClipboard }),
|
|
1879
|
-
[query, copyToClipboard]
|
|
1880
|
-
);
|
|
1868
|
+
return react.useMemo(() => ({ ...query, copyToClipboard }), [query, copyToClipboard]);
|
|
1881
1869
|
}
|
|
1882
1870
|
var styles = {
|
|
1883
1871
|
card: {
|
|
@@ -2664,16 +2652,12 @@ var intervalLabels2 = {
|
|
|
2664
2652
|
YEARLY: "/yr",
|
|
2665
2653
|
ONE_TIME: ""
|
|
2666
2654
|
};
|
|
2667
|
-
function TransferModal({
|
|
2668
|
-
data,
|
|
2669
|
-
onClose
|
|
2670
|
-
}) {
|
|
2655
|
+
function TransferModal({ data, onClose }) {
|
|
2671
2656
|
const bankDetails = data.bankDetails;
|
|
2672
2657
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styles5.overlay, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: styles5.modal, onClick: (e) => e.stopPropagation(), children: [
|
|
2673
2658
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: styles5.modalTitle, children: "Manual Transfer" }),
|
|
2674
2659
|
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: styles5.modalSubtitle, children: [
|
|
2675
|
-
"Transfer the amount below to subscribe to",
|
|
2676
|
-
" ",
|
|
2660
|
+
"Transfer the amount below to subscribe to ",
|
|
2677
2661
|
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: data.plan?.name })
|
|
2678
2662
|
] }),
|
|
2679
2663
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -2736,9 +2720,7 @@ function PricingTable({
|
|
|
2736
2720
|
const { data: plans, isLoading: plansLoading } = usePlans();
|
|
2737
2721
|
const { data: subscription } = useSubscription();
|
|
2738
2722
|
const { data: providers } = usePaymentProviders();
|
|
2739
|
-
const [transferData, setTransferData] = react.useState(
|
|
2740
|
-
null
|
|
2741
|
-
);
|
|
2723
|
+
const [transferData, setTransferData] = react.useState(null);
|
|
2742
2724
|
const [payphoneData, setPayphoneData] = react.useState(null);
|
|
2743
2725
|
const [pendingPlan, setPendingPlan] = react.useState(null);
|
|
2744
2726
|
const [showProviderModal, setShowProviderModal] = react.useState(false);
|
|
@@ -2758,8 +2740,7 @@ function PricingTable({
|
|
|
2758
2740
|
checkout({ planId, provider, successUrl, cancelUrl });
|
|
2759
2741
|
};
|
|
2760
2742
|
const handleSelect = (plan) => {
|
|
2761
|
-
if (subscription?.planId === plan.id && subscription.status === "ACTIVE")
|
|
2762
|
-
return;
|
|
2743
|
+
if (subscription?.planId === plan.id && subscription.status === "ACTIVE") return;
|
|
2763
2744
|
if (onPlanSelect) {
|
|
2764
2745
|
onPlanSelect(plan);
|
|
2765
2746
|
return;
|
|
@@ -2831,26 +2812,19 @@ function PricingTable({
|
|
|
2831
2812
|
}
|
|
2832
2813
|
const sortedPlans = plans ? [...plans].sort((a, b) => a.sortOrder - b.sortOrder) : [];
|
|
2833
2814
|
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2834
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2835
|
-
"
|
|
2836
|
-
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
|
|
2847
|
-
onSelect: handleSelect
|
|
2848
|
-
},
|
|
2849
|
-
plan.id
|
|
2850
|
-
);
|
|
2851
|
-
})
|
|
2852
|
-
}
|
|
2853
|
-
),
|
|
2815
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...styles5.grid(columns), ...style }, children: sortedPlans.map((plan) => {
|
|
2816
|
+
const isCurrentPlan = subscription?.planId === plan.id && subscription.status === "ACTIVE";
|
|
2817
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2818
|
+
PricingCard,
|
|
2819
|
+
{
|
|
2820
|
+
plan,
|
|
2821
|
+
isCurrentPlan,
|
|
2822
|
+
isCheckoutPending: checkoutPending,
|
|
2823
|
+
onSelect: handleSelect
|
|
2824
|
+
},
|
|
2825
|
+
plan.id
|
|
2826
|
+
);
|
|
2827
|
+
}) }),
|
|
2854
2828
|
showProviderModal && pendingPlan && providers && providers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2855
2829
|
ProviderSelectModal,
|
|
2856
2830
|
{
|
|
@@ -2863,13 +2837,7 @@ function PricingTable({
|
|
|
2863
2837
|
}
|
|
2864
2838
|
}
|
|
2865
2839
|
),
|
|
2866
|
-
transferData && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2867
|
-
TransferModal,
|
|
2868
|
-
{
|
|
2869
|
-
data: transferData,
|
|
2870
|
-
onClose: () => setTransferData(null)
|
|
2871
|
-
}
|
|
2872
|
-
),
|
|
2840
|
+
transferData && /* @__PURE__ */ jsxRuntime.jsx(TransferModal, { data: transferData, onClose: () => setTransferData(null) }),
|
|
2873
2841
|
payphoneData?.widgetConfig && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2874
2842
|
PayphoneModal,
|
|
2875
2843
|
{
|
|
@@ -3018,11 +2986,7 @@ function ProviderModal({
|
|
|
3018
2986
|
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: modalStyles.cancelButton, onClick: onClose, children: labels?.cancel ?? "Cancel" })
|
|
3019
2987
|
] }) });
|
|
3020
2988
|
}
|
|
3021
|
-
function TransferModal2({
|
|
3022
|
-
data,
|
|
3023
|
-
onClose,
|
|
3024
|
-
labels
|
|
3025
|
-
}) {
|
|
2989
|
+
function TransferModal2({ data, onClose, labels }) {
|
|
3026
2990
|
const bankDetails = data.bankDetails;
|
|
3027
2991
|
const plan = data.plan;
|
|
3028
2992
|
const intent = data.intent;
|
|
@@ -3133,9 +3097,12 @@ function PayButton({
|
|
|
3133
3097
|
setTransferData(data);
|
|
3134
3098
|
setShowTransferModal(true);
|
|
3135
3099
|
setShowProviderModal(false);
|
|
3136
|
-
|
|
3100
|
+
return;
|
|
3101
|
+
}
|
|
3102
|
+
if (data.provider === "PAYPHONE" && data.widgetConfig) {
|
|
3137
3103
|
setPayphoneData(data);
|
|
3138
3104
|
setShowProviderModal(false);
|
|
3105
|
+
return;
|
|
3139
3106
|
}
|
|
3140
3107
|
onSuccess?.(data);
|
|
3141
3108
|
},
|
|
@@ -3180,7 +3147,7 @@ function PayButton({
|
|
|
3180
3147
|
},
|
|
3181
3148
|
onClick: handleClick,
|
|
3182
3149
|
disabled: isDisabled,
|
|
3183
|
-
children: isPending ? billing?.processing ?? "Processing..." : children ??
|
|
3150
|
+
children: isPending ? billing?.processing ?? "Processing..." : children ?? billing?.pay ?? "Pay"
|
|
3184
3151
|
}
|
|
3185
3152
|
),
|
|
3186
3153
|
showProviderModal && providers && providers.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -3199,6 +3166,7 @@ function PayButton({
|
|
|
3199
3166
|
data: transferData,
|
|
3200
3167
|
onClose: () => {
|
|
3201
3168
|
setShowTransferModal(false);
|
|
3169
|
+
onSuccess?.(transferData);
|
|
3202
3170
|
setTransferData(null);
|
|
3203
3171
|
},
|
|
3204
3172
|
labels: billing
|
|
@@ -3209,7 +3177,10 @@ function PayButton({
|
|
|
3209
3177
|
{
|
|
3210
3178
|
config: payphoneData.widgetConfig,
|
|
3211
3179
|
successUrl,
|
|
3212
|
-
onClose: () =>
|
|
3180
|
+
onClose: () => {
|
|
3181
|
+
onSuccess?.(payphoneData);
|
|
3182
|
+
setPayphoneData(null);
|
|
3183
|
+
}
|
|
3213
3184
|
}
|
|
3214
3185
|
)
|
|
3215
3186
|
] });
|
|
@@ -3222,12 +3193,7 @@ function usePayphoneConfirm(options) {
|
|
|
3222
3193
|
onError: options?.onError
|
|
3223
3194
|
});
|
|
3224
3195
|
}
|
|
3225
|
-
function PayphoneCallback({
|
|
3226
|
-
onSuccess,
|
|
3227
|
-
onError,
|
|
3228
|
-
className,
|
|
3229
|
-
style
|
|
3230
|
-
}) {
|
|
3196
|
+
function PayphoneCallback({ onSuccess, onError, className, style }) {
|
|
3231
3197
|
const { mutate, isPending, isSuccess, isError, error, data } = usePayphoneConfirm({
|
|
3232
3198
|
onSuccess,
|
|
3233
3199
|
onError
|
|
@@ -3824,7 +3790,7 @@ function usePasswordToggle() {
|
|
|
3824
3790
|
}
|
|
3825
3791
|
|
|
3826
3792
|
// src/index.ts
|
|
3827
|
-
var SDK_VERSION = "0.9.
|
|
3793
|
+
var SDK_VERSION = "0.9.4";
|
|
3828
3794
|
|
|
3829
3795
|
exports.AuthForm = AuthForm;
|
|
3830
3796
|
exports.AziridProvider = AziridProvider;
|