@windrun-huaiin/third-ui 7.5.0 → 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 +24 -1
  2. package/dist/main/money-price/money-price-interactive.mjs +25 -2
  3. package/package.json +1 -1
  4. package/src/main/money-price/money-price-interactive.tsx +26 -3
package/dist/main/money-price/money-price-interactive.js CHANGED
@@ -17,7 +17,17 @@ 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
  // 确定用户状态
@@ -210,6 +220,19 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
210
220
  }, []);
211
221
  // State for button portals
212
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]);
213
236
  // 处理月付/年付切换和 tooltip 功能
214
237
  React.useEffect(() => {
215
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,7 +15,17 @@ 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
  // 确定用户状态
@@ -208,6 +218,19 @@ function MoneyPriceInteractive({ data, config, upgradeApiEndpoint, signInPath })
208
218
  }, []);
209
219
  // State for button portals
210
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]);
211
234
  // 处理月付/年付切换和 tooltip 功能
212
235
  useEffect(() => {
213
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.5.0",
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;
@@ -239,6 +248,20 @@ export function MoneyPriceInteractive({
239
248
  // State for button portals
240
249
  const [buttonPortals, setButtonPortals] = useState<React.ReactElement[]>([]);
241
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
+
242
265
  // 处理月付/年付切换和 tooltip 功能
243
266
  useEffect(() => {
244
267
  const monthlyButton = document.querySelector('[data-billing-button="monthly"]') as HTMLButtonElement;