@windrun-huaiin/third-ui 7.4.2 → 7.5.1

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.
Files changed (4) hide show
  1. package/dist/main/money-price/money-price-interactive.js +41 -6
  2. package/dist/main/money-price/money-price-interactive.mjs +42 -7
  3. package/package.json +1 -1
  4. package/src/main/money-price/money-price-interactive.tsx +49 -7
package/dist/main/money-price/money-price-interactive.js CHANGED
@@ -17,25 +17,47 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
17
17
  const fingerprintContext = fingerprintProvider.useFingerprintContextSafe();
18
18
  const { redirectToSignIn, user } = nextjs.useClerk();
19
19
  const router = navigation.useRouter();
20
- const [billingType, setBillingType] = React.useState(data.billingSwitch.defaultKey);
20
+ // 根据用户订阅状态确定初始 billing type
21
+ const getInitialBillingType = React.useCallback(() => {
22
+ var _a;
23
+ // 如果用户有活跃订阅，使用订阅的计费周期
24
+ if (((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _a === void 0 ? void 0 : _a.status) === 'active' && fingerprintContext.xSubscription.priceId) {
25
+ return fingerprintContext.xSubscription.priceId.includes('yearly') ? 'yearly' : 'monthly';
26
+ }
27
+ // 否则使用默认值
28
+ return data.billingSwitch.defaultKey;
29
+ }, [fingerprintContext, data.billingSwitch.defaultKey]);
30
+ const [billingType, setBillingType] = React.useState(getInitialBillingType());
21
31
  const [isProcessing, setIsProcessing] = React.useState(false);
22
32
  const [tooltip, setTooltip] = React.useState({ show: false, content: '', x: 0, y: 0 });
23
33
  // 确定用户状态
24
34
  const getUserState = React.useCallback(() => {
25
- var _a, _b;
26
35
  if (!fingerprintContext)
27
36
  return moneyPriceTypes.UserState.Anonymous;
28
37
  const { xUser, xSubscription } = fingerprintContext;
29
38
  if (!(xUser === null || xUser === void 0 ? void 0 : xUser.clerkUserId))
30
39
  return moneyPriceTypes.UserState.Anonymous;
31
- if (!(xSubscription === null || xSubscription === void 0 ? void 0 : xSubscription.status) || xSubscription.status === 'free')
40
+ if (!(xSubscription === null || xSubscription === void 0 ? void 0 : xSubscription.status) || xSubscription.status !== 'active')
32
41
  return moneyPriceTypes.UserState.FreeUser;
33
- if ((_a = xSubscription.priceName) === null || _a === void 0 ? void 0 : _a.includes('Pro'))
42
+ // 通过 priceId 精确匹配订阅计划
43
+ const userPriceId = xSubscription.priceId;
44
+ if (!userPriceId)
45
+ return moneyPriceTypes.UserState.FreeUser;
46
+ const providerConfig = moneyPriceConfigUtil.getActiveProviderConfig(config);
47
+ // 检查是否为 Pro 计划 (月付或年付)
48
+ const proMonthly = providerConfig.products.pro.plans.monthly.priceId;
49
+ const proYearly = providerConfig.products.pro.plans.yearly.priceId;
50
+ if (userPriceId === proMonthly || userPriceId === proYearly) {
34
51
  return moneyPriceTypes.UserState.ProUser;
35
- if ((_b = xSubscription.priceName) === null || _b === void 0 ? void 0 : _b.includes('Ultra'))
52
+ }
53
+ // 检查是否为 Ultra 计划 (月付或年付)
54
+ const ultraMonthly = providerConfig.products.ultra.plans.monthly.priceId;
55
+ const ultraYearly = providerConfig.products.ultra.plans.yearly.priceId;
56
+ if (userPriceId === ultraMonthly || userPriceId === ultraYearly) {
36
57
  return moneyPriceTypes.UserState.UltraUser;
58
+ }
37
59
  return moneyPriceTypes.UserState.FreeUser;
38
- }, [fingerprintContext]);
60
+ }, [fingerprintContext, config]);
39
61
  // 优化 userContext 使用 useMemo
40
62
  const userContext = React.useMemo(() => {
41
63
  var _a, _b, _c;
@@ -198,6 +220,19 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
198
220
  }, []);
199
221
  // State for button portals
200
222
  const [buttonPortals, setButtonPortals] = React.useState([]);
223
+ // 当 fingerprint context 变化时，更新 billing type 以匹配用户的订阅状态
224
+ React.useEffect(() => {
225
+ const newBillingType = getInitialBillingType();
226
+ if (newBillingType !== billingType) {
227
+ setBillingType(newBillingType);
228
+ // 延迟执行以确保 DOM 已渲染
229
+ setTimeout(() => {
230
+ updatePriceDisplay(newBillingType);
231
+ updateButtonStyles(newBillingType);
232
+ updateDiscountInfo(newBillingType);
233
+ }, 0);
234
+ }
235
+ }, [fingerprintContext, getInitialBillingType, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
201
236
  // 处理月付/年付切换和 tooltip 功能
202
237
  React.useEffect(() => {
203
238
  const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
package/dist/main/money-price/money-price-interactive.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import { __awaiter } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_rollup@4.46.2_tslib@2.8.1_typescript@5.9.2/node_modules/tslib/tslib.es6.mjs';
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
4
  import { useClerk } from '@clerk/nextjs';
5
- import { useState, useCallback, useMemo, useEffect } from 'react';
5
+ import { useCallback, useState, useMemo, useEffect } from 'react';
6
6
  import { useFingerprintContextSafe } from '../../clerk/fingerprint/fingerprint-provider.mjs';
7
7
  import { cn } from '@windrun-huaiin/lib/utils';
8
8
  import { useRouter } from 'next/navigation';
@@ -15,25 +15,47 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
15
15
  const fingerprintContext = useFingerprintContextSafe();
16
16
  const { redirectToSignIn, user } = useClerk();
17
17
  const router = useRouter();
18
- const [billingType, setBillingType] = useState(data.billingSwitch.defaultKey);
18
+ // 根据用户订阅状态确定初始 billing type
19
+ const getInitialBillingType = useCallback(() => {
20
+ var _a;
21
+ // 如果用户有活跃订阅，使用订阅的计费周期
22
+ if (((_a = fingerprintContext === null || fingerprintContext === void 0 ? void 0 : fingerprintContext.xSubscription) === null || _a === void 0 ? void 0 : _a.status) === 'active' && fingerprintContext.xSubscription.priceId) {
23
+ return fingerprintContext.xSubscription.priceId.includes('yearly') ? 'yearly' : 'monthly';
24
+ }
25
+ // 否则使用默认值
26
+ return data.billingSwitch.defaultKey;
27
+ }, [fingerprintContext, data.billingSwitch.defaultKey]);
28
+ const [billingType, setBillingType] = useState(getInitialBillingType());
19
29
  const [isProcessing, setIsProcessing] = useState(false);
20
30
  const [tooltip, setTooltip] = useState({ show: false, content: '', x: 0, y: 0 });
21
31
  // 确定用户状态
22
32
  const getUserState = useCallback(() => {
23
- var _a, _b;
24
33
  if (!fingerprintContext)
25
34
  return UserState.Anonymous;
26
35
  const { xUser, xSubscription } = fingerprintContext;
27
36
  if (!(xUser === null || xUser === void 0 ? void 0 : xUser.clerkUserId))
28
37
  return UserState.Anonymous;
29
- if (!(xSubscription === null || xSubscription === void 0 ? void 0 : xSubscription.status) || xSubscription.status === 'free')
38
+ if (!(xSubscription === null || xSubscription === void 0 ? void 0 : xSubscription.status) || xSubscription.status !== 'active')
30
39
  return UserState.FreeUser;
31
- if ((_a = xSubscription.priceName) === null || _a === void 0 ? void 0 : _a.includes('Pro'))
40
+ // 通过 priceId 精确匹配订阅计划
41
+ const userPriceId = xSubscription.priceId;
42
+ if (!userPriceId)
43
+ return UserState.FreeUser;
44
+ const providerConfig = getActiveProviderConfig(config);
45
+ // 检查是否为 Pro 计划 (月付或年付)
46
+ const proMonthly = providerConfig.products.pro.plans.monthly.priceId;
47
+ const proYearly = providerConfig.products.pro.plans.yearly.priceId;
48
+ if (userPriceId === proMonthly || userPriceId === proYearly) {
32
49
  return UserState.ProUser;
33
- if ((_b = xSubscription.priceName) === null || _b === void 0 ? void 0 : _b.includes('Ultra'))
50
+ }
51
+ // 检查是否为 Ultra 计划 (月付或年付)
52
+ const ultraMonthly = providerConfig.products.ultra.plans.monthly.priceId;
53
+ const ultraYearly = providerConfig.products.ultra.plans.yearly.priceId;
54
+ if (userPriceId === ultraMonthly || userPriceId === ultraYearly) {
34
55
  return UserState.UltraUser;
56
+ }
35
57
  return UserState.FreeUser;
36
- }, [fingerprintContext]);
58
+ }, [fingerprintContext, config]);
37
59
  // 优化 userContext 使用 useMemo
38
60
  const userContext = useMemo(() => {
39
61
  var _a, _b, _c;
@@ -196,6 +218,19 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
196
218
  }, []);
197
219
  // State for button portals
198
220
  const [buttonPortals, setButtonPortals] = useState([]);
221
+ // 当 fingerprint context 变化时，更新 billing type 以匹配用户的订阅状态
222
+ useEffect(() => {
223
+ const newBillingType = getInitialBillingType();
224
+ if (newBillingType !== billingType) {
225
+ setBillingType(newBillingType);
226
+ // 延迟执行以确保 DOM 已渲染
227
+ setTimeout(() => {
228
+ updatePriceDisplay(newBillingType);
229
+ updateButtonStyles(newBillingType);
230
+ updateDiscountInfo(newBillingType);
231
+ }, 0);
232
+ }
233
+ }, [fingerprintContext, getInitialBillingType, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
199
234
  // 处理月付/年付切换和 tooltip 功能
200
235
  useEffect(() => {
201
236
  const monthlyButton = document.querySelector('[data-billing-button="monthly"]');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@windrun-huaiin/third-ui",
3
- "version": "7.4.2",
3
+ "version": "7.5.1",
4
4
  "description": "Third-party integrated UI components for windrun-huaiin projects",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
package/src/main/money-price/money-price-interactive.tsx CHANGED
@@ -23,9 +23,18 @@ export function MoneyPriceInteractive({
23
23
  const fingerprintContext = useFingerprintContextSafe();
24
24
  const { redirectToSignIn, user } = useClerk();
25
25
  const router = useRouter();
26
- const [billingType, setBillingType] = useState<'monthly' | 'yearly'>(
27
- data.billingSwitch.defaultKey as 'monthly' | 'yearly'
28
- );
26
+
27
+ // 根据用户订阅状态确定初始 billing type
28
+ const getInitialBillingType = useCallback((): 'monthly' | 'yearly' => {
29
+ // 如果用户有活跃订阅，使用订阅的计费周期
30
+ if (fingerprintContext?.xSubscription?.status === 'active' && fingerprintContext.xSubscription.priceId) {
31
+ return fingerprintContext.xSubscription.priceId.includes('yearly') ? 'yearly' : 'monthly';
32
+ }
33
+ // 否则使用默认值
34
+ return data.billingSwitch.defaultKey as 'monthly' | 'yearly';
35
+ }, [fingerprintContext, data.billingSwitch.defaultKey]);
36
+
37
+ const [billingType, setBillingType] = useState<'monthly' | 'yearly'>(getInitialBillingType());
29
38
  const [isProcessing, setIsProcessing] = useState(false);
30
39
  const [tooltip, setTooltip] = useState<{
31
40
  show: boolean;
@@ -40,11 +49,30 @@ export function MoneyPriceInteractive({
40
49
  const { xUser, xSubscription } = fingerprintContext;
41
50
 
42
51
  if (!xUser?.clerkUserId) return UserState.Anonymous;
43
- if (!xSubscription?.status || xSubscription.status === 'free') return UserState.FreeUser;
44
- if (xSubscription.priceName?.includes('Pro')) return UserState.ProUser;
45
- if (xSubscription.priceName?.includes('Ultra')) return UserState.UltraUser;
52
+ if (!xSubscription?.status || xSubscription.status !== 'active') return UserState.FreeUser;
53
+
54
+ // 通过 priceId 精确匹配订阅计划
55
+ const userPriceId = xSubscription.priceId;
56
+ if (!userPriceId) return UserState.FreeUser;
57
+
58
+ const providerConfig = getActiveProviderConfig(config);
59
+
60
+ // 检查是否为 Pro 计划 (月付或年付)
61
+ const proMonthly = providerConfig.products.pro.plans.monthly.priceId;
62
+ const proYearly = providerConfig.products.pro.plans.yearly.priceId;
63
+ if (userPriceId === proMonthly || userPriceId === proYearly) {
64
+ return UserState.ProUser;
65
+ }
66
+
67
+ // 检查是否为 Ultra 计划 (月付或年付)
68
+ const ultraMonthly = providerConfig.products.ultra.plans.monthly.priceId;
69
+ const ultraYearly = providerConfig.products.ultra.plans.yearly.priceId;
70
+ if (userPriceId === ultraMonthly || userPriceId === ultraYearly) {
71
+ return UserState.UltraUser;
72
+ }
73
+
46
74
  return UserState.FreeUser;
47
- }, [fingerprintContext]);
75
+ }, [fingerprintContext, config]);
48
76
 
49
77
  // 优化 userContext 使用 useMemo
50
78
  const userContext = useMemo<UserContext>(() => {
@@ -220,6 +248,20 @@ export function MoneyPriceInteractive({
220
248
  // State for button portals
221
249
  const [buttonPortals, setButtonPortals] = useState<React.ReactElement[]>([]);
222
250
 
251
+ // 当 fingerprint context 变化时，更新 billing type 以匹配用户的订阅状态
252
+ useEffect(() => {
253
+ const newBillingType = getInitialBillingType();
254
+ if (newBillingType !== billingType) {
255
+ setBillingType(newBillingType);
256
+ // 延迟执行以确保 DOM 已渲染
257
+ setTimeout(() => {
258
+ updatePriceDisplay(newBillingType);
259
+ updateButtonStyles(newBillingType);
260
+ updateDiscountInfo(newBillingType);
261
+ }, 0);
262
+ }
263
+ }, [fingerprintContext, getInitialBillingType, billingType, updatePriceDisplay, updateButtonStyles, updateDiscountInfo]);
264
+
223
265
  // 处理月付/年付切换和 tooltip 功能
224
266
  useEffect(() => {
225
267
  const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLButtonElement;