@windrun-huaiin/third-ui 31.3.7 → 31.4.0

package/dist/main/money-price/pricing-modal.mjs

@@ -0,0 +1,105 @@
+"use client";
+import { __rest, __awaiter } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XIcon } from '@windrun-huaiin/base-ui/icons';
+import { themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle } from '@windrun-huaiin/base-ui/ui';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { createContext, useMemo, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { dialogThemedOverlayClass } from '../alert-dialog/dialog-styles.mjs';
+import { MoneyPriceInteractive } from './money-price-interactive.mjs';
+
+const emptyInitUserContext = {
+    fingerprintId: null,
+    xUser: null,
+    xCredit: null,
+    xSubscription: null,
+    isClerkAuthenticated: false,
+};
+const PricingModalContext = createContext(null);
+function normalizeEnabledBillingTypes(data, enabledBillingTypes) {
+    const availableKeys = data.billingSwitch.options.map((option) => option.key);
+    const configuredKeys = (enabledBillingTypes === null || enabledBillingTypes === void 0 ? void 0 : enabledBillingTypes.length) ? enabledBillingTypes : availableKeys;
+    return Array.from(new Set(configuredKeys
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => availableKeys.includes(billingType))));
+}
+function resolveBillingType({ data, enabledBillingTypes, requestedBillingType, }) {
+    var _a, _b;
+    const enabledKeys = normalizeEnabledBillingTypes(data, enabledBillingTypes);
+    if (requestedBillingType && enabledKeys.includes(requestedBillingType)) {
+        return requestedBillingType;
+    }
+    if (enabledKeys.includes(data.billingSwitch.defaultKey)) {
+        return data.billingSwitch.defaultKey;
+    }
+    return (_a = enabledKeys[0]) !== null && _a !== void 0 ? _a : (_b = data.billingSwitch.options[0]) === null || _b === void 0 ? void 0 : _b.key;
+}
+function PricingModal({ open, onOpenChange, data, config, billingType, checkoutApiEndpoint, customerPortalApiEndpoint, enableClerkModal = false, enabledBillingTypes, mobileBillingSwitchBehavior, enableSubscriptionUpgrade = true, initUserContext, isInitLoading = false, }) {
+    const resolvedBillingType = useMemo(() => resolveBillingType({
+        data,
+        enabledBillingTypes,
+        requestedBillingType: billingType,
+    }), [billingType, data, enabledBillingTypes]);
+    return (jsx(AlertDialog, { open: open, onOpenChange: onOpenChange, children: open ? (jsxs(AlertDialogContent, { className: cn('mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10', themeMainBgColor), overlayClassName: dialogThemedOverlayClass, children: [jsxs(AlertDialogHeader, { className: "flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800", children: [jsx(AlertDialogTitle, { asChild: true, children: jsxs("div", { className: "flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white", children: [jsx("span", { className: "text-2xl font-semibold leading-tight", children: data.title }), data.subtitle ? (jsx("span", { className: "text-sm font-medium text-slate-500 dark:text-slate-300", children: data.subtitle })) : null] }) }), jsx("button", { type: "button", className: "rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80", onClick: () => onOpenChange(false), children: jsx(XIcon, { className: "h-6 w-6" }) })] }), jsx("div", { className: "max-h-[60vh] overflow-y-auto px-4 pt-2 pb-6 sm:max-h-[80vh]", children: jsx("div", { className: "mx-auto w-full", children: jsx(MoneyPriceInteractive, { data: data, config: config, checkoutApiEndpoint: checkoutApiEndpoint, customerPortalApiEndpoint: customerPortalApiEndpoint, enableClerkModal: enableClerkModal, enabledBillingTypes: enabledBillingTypes, mobileBillingSwitchBehavior: mobileBillingSwitchBehavior, enableSubscriptionUpgrade: enableSubscriptionUpgrade, initialBillingType: resolvedBillingType, disableAutoDetectBilling: resolvedBillingType === 'onetime', initUserContext: initUserContext, isInitLoading: isInitLoading }, resolvedBillingType !== null && resolvedBillingType !== void 0 ? resolvedBillingType : 'default') }) })] })) : null }));
+}
+function PricingModalProvider(_a) {
+    var { children, pricingContextEndpoint, initUserContext: initUserContextProp, isInitLoading: isInitLoadingProp = false } = _a, modalProps = __rest(_a, ["children", "pricingContextEndpoint", "initUserContext", "isInitLoading"]);
+    const [open, setOpen] = useState(false);
+    const [requestedBillingType, setRequestedBillingType] = useState();
+    const [loadedInitUserContext, setLoadedInitUserContext] = useState(initUserContextProp !== null && initUserContextProp !== void 0 ? initUserContextProp : emptyInitUserContext);
+    const [isContextLoading, setIsContextLoading] = useState(false);
+    const loadedContextRef = useRef(!!initUserContextProp);
+    useEffect(() => {
+        if (initUserContextProp) {
+            loadedContextRef.current = true;
+            setLoadedInitUserContext(initUserContextProp);
+        }
+    }, [initUserContextProp]);
+    const loadPricingContext = useCallback(() => __awaiter(this, void 0, void 0, function* () {
+        if (!pricingContextEndpoint || loadedContextRef.current) {
+            return;
+        }
+        setIsContextLoading(true);
+        try {
+            const response = yield fetch(pricingContextEndpoint, {
+                credentials: 'same-origin',
+            });
+            if (!response.ok) {
+                return;
+            }
+            const nextContext = (yield response.json());
+            loadedContextRef.current = true;
+            setLoadedInitUserContext(nextContext);
+        }
+        catch (error) {
+            console.warn('[PricingModalProvider] Failed to load pricing context', error);
+        }
+        finally {
+            setIsContextLoading(false);
+        }
+    }), [pricingContextEndpoint]);
+    const openPricingModal = useCallback((options) => {
+        setRequestedBillingType(options === null || options === void 0 ? void 0 : options.billingType);
+        setOpen(true);
+        void loadPricingContext();
+    }, [loadPricingContext]);
+    const closePricingModal = useCallback(() => {
+        setOpen(false);
+    }, []);
+    const contextValue = useMemo(() => ({
+        openPricingModal,
+        closePricingModal,
+        isPricingModalOpen: open,
+    }), [closePricingModal, open, openPricingModal]);
+    return (jsxs(PricingModalContext.Provider, { value: contextValue, children: [children, jsx(PricingModal, Object.assign({}, modalProps, { open: open, onOpenChange: setOpen, billingType: requestedBillingType, initUserContext: initUserContextProp !== null && initUserContextProp !== void 0 ? initUserContextProp : loadedInitUserContext, isInitLoading: isInitLoadingProp || isContextLoading }))] }));
+}
+function usePricingModal() {
+    const context = useContext(PricingModalContext);
+    if (!context) {
+        throw new Error('usePricingModal must be used within PricingModalProvider.');
+    }
+    return context;
+}
+
+export { PricingModal, PricingModalProvider, usePricingModal };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "31.3.7",
+  "version": "31.4.0",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "exports": {
     "./clerk": {
@@ -243,9 +243,9 @@
     "tslib": "^2.8.1",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/contracts": "^31.0.0",
+    "@windrun-huaiin/base-ui": "^31.0.1",
     "@windrun-huaiin/lib": "^31.0.3",
-    "@windrun-huaiin/base-ui": "^31.0.1"
+    "@windrun-huaiin/contracts": "^31.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/main/credit/credit-nav-button.tsx

@@ -1,13 +1,8 @@
 'use client';
 
 import { cn } from '@windrun-huaiin/lib/utils';
-import { GemIcon, XIcon } from '@windrun-huaiin/base-ui/icons';
-import { themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
+import { GemIcon } from '@windrun-huaiin/base-ui/icons';
 import {
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
@@ -21,16 +16,16 @@ import {
   useRef,
   useState,
 } from 'react';
-import { MoneyPriceInteractive } from '../money-price/money-price-interactive';
 import { getActiveProviderConfigUtil } from '../money-price/money-price-config-util';
 import type { MoneyPriceData, SubscriptionProductConfig } from '../money-price/money-price-types';
-import { dialogThemedOverlayClass } from '../alert-dialog/dialog-styles';
-import type { CreditPricingContext, PricingModalMode } from './types';
+import { PricingModal } from '../money-price/pricing-modal';
+import type { CreditPricingContext, MobileBillingSwitchBehavior, PricingModalMode } from './types';
 
 interface CreditNavButtonProps {
   locale: string;
   totalBalance: number;
   totalLabel: string;
+  mobileBillingSwitchBehavior?: MobileBillingSwitchBehavior;
   children: React.ReactNode;
 }
 
@@ -38,6 +33,7 @@ export function CreditNavButton({
   locale,
   totalBalance,
   totalLabel,
+  mobileBillingSwitchBehavior,
   children,
 }: CreditNavButtonProps) {
   const [open, setOpen] = useState(false);
@@ -243,7 +239,7 @@ export function CreditNavButton({
         </DropdownMenuContent>
       </DropdownMenu>
       {pricingModal.modalMoneyPriceData && pricingModal.pricingContext ? (
-        <AlertDialog
+        <PricingModal
           open={pricingModal.open}
           onOpenChange={(open) =>
             setPricingModal((prev) => ({
@@ -251,52 +247,15 @@ export function CreditNavButton({
               open,
             }))
           }
-        >
-          <AlertDialogContent
-            className={cn(
-              'mt-5 sm:mt-6 md:mt-10 lg:mt-15 w-[95vw] max-w-[1200px] overflow-hidden border border-slate-200 p-0 shadow-[0_32px_90px_rgba(15,23,42,0.25)] ring-1 ring-black/5 dark:border-white/12 dark:shadow-[0_40px_120px_rgba(0,0,0,0.6)] dark:ring-white/10',
-              themeMainBgColor,
-            )}
-            overlayClassName={dialogThemedOverlayClass}
-          >
-            <AlertDialogHeader className="flex flex-row items-center justify-between border-b border-slate-200 px-6 pt-4 pb-1 dark:border-slate-800">
-              <AlertDialogTitle asChild>
-                <div className="flex flex-wrap items-baseline gap-3 text-slate-900 dark:text-white">
-                  <span className="text-2xl font-semibold leading-tight">
-                    {pricingModal.modalMoneyPriceData.title}
-                  </span>
-                  {pricingModal.modalMoneyPriceData.subtitle ? (
-                    <span className="text-sm font-medium text-slate-500 dark:text-slate-300">
-                      {pricingModal.modalMoneyPriceData.subtitle}
-                    </span>
-                  ) : null}
-                </div>
-              </AlertDialogTitle>
-              <button
-                type="button"
-                className="rounded-full p-2 text-gray-400 transition hover:bg-gray-400 hover:text-gray-400 dark:text-white/80 dark:hover:bg-white/80 dark:hover:text-white/80"
-                onClick={closePricingModal}
-              >
-                <XIcon className="h-6 w-6" />
-              </button>
-            </AlertDialogHeader>
-            <div className="max-h-[60vh] sm:max-h-[80vh] overflow-y-auto px-4 pt-2 pb-6">
-              <div className="mx-auto w-full">
-                <MoneyPriceInteractive
-                  key={pricingModal.mode}
-                  data={pricingModal.modalMoneyPriceData}
-                  config={pricingModal.pricingContext.moneyPriceConfig}
-                  checkoutApiEndpoint={pricingModal.pricingContext.checkoutApiEndpoint}
-                  customerPortalApiEndpoint={pricingModal.pricingContext.customerPortalApiEndpoint}
-                  enableSubscriptionUpgrade={pricingModal.pricingContext.enableSubscriptionUpgrade}
-                  initialBillingType={modalInitialBillingType}
-                  disableAutoDetectBilling={isOnetimeModal}
-                  initUserContext={pricingModal.pricingContext.initUserContext}
-                />
-              </div>
-            </div>
-          </AlertDialogContent>
-        </AlertDialog>
+          data={pricingModal.modalMoneyPriceData}
+          config={pricingModal.pricingContext.moneyPriceConfig}
+          checkoutApiEndpoint={pricingModal.pricingContext.checkoutApiEndpoint}
+          customerPortalApiEndpoint={pricingModal.pricingContext.customerPortalApiEndpoint}
+          mobileBillingSwitchBehavior={mobileBillingSwitchBehavior}
+          enableSubscriptionUpgrade={pricingModal.pricingContext.enableSubscriptionUpgrade}
+          billingType={modalInitialBillingType}
+          initUserContext={pricingModal.pricingContext.initUserContext}
+        />
       ) : null}
     </CreditNavPopoverContext.Provider>
   );

package/src/main/credit/credit-overview-nav-client.tsx

@@ -4,7 +4,7 @@ import { useAuth } from '@clerk/nextjs';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CreditNavButton } from './credit-nav-button';
 import { CreditOverviewClient, type CreditOverviewTranslations } from './credit-overview-client';
-import type { CreditOverviewData } from './types';
+import type { CreditOverviewData, MobileBillingSwitchBehavior } from './types';
 
 export const DEFAULT_CREDIT_OVERVIEW_REFRESH_EVENT = 'windrun-huaiin:credit-overview:refresh';
 
@@ -22,6 +22,11 @@ export interface CreditOverviewNavClientProps {
    * Defaults are handled by the API/payload builder when omitted.
    */
   enabledBillingTypes?: string[];
+  /**
+   * Mobile behavior for the pricing modal billing switch.
+   * Default: 'sticky'.
+   */
+  mobileBillingSwitchBehavior?: MobileBillingSwitchBehavior;
   /**
    * Browser event names that should trigger credit overview reload.
    * Business apps can dispatch these events after credit balance changes.
@@ -97,6 +102,7 @@ export function CreditOverviewNavClient({
   locale,
   endpoint,
   enabledBillingTypes,
+  mobileBillingSwitchBehavior,
   refreshEvents,
   refreshDebounceMs = 300,
 }: CreditOverviewNavClientProps) {
@@ -220,6 +226,7 @@ export function CreditOverviewNavClient({
       locale={locale}
       totalBalance={payload.data.totalBalance}
       totalLabel={payload.totalLabel}
+      mobileBillingSwitchBehavior={mobileBillingSwitchBehavior}
     >
       <CreditOverviewClient
         locale={locale}

package/src/main/credit/index.ts

@@ -16,5 +16,6 @@ export type {
   CreditOverviewData,
   CreditBucket,
   CreditBucketStatus,
+  MobileBillingSwitchBehavior,
   SubscriptionInfo,
 } from './types';

package/src/main/credit/types.ts

@@ -5,6 +5,7 @@ import type {
 } from '../money-price/money-price-types';
 
 export type PricingModalMode = 'subscription' | 'onetime';
+export type MobileBillingSwitchBehavior = 'sticky' | 'static';
 
 export type CreditActionConfig =
   | CreditModalAction

package/src/main/money-price/index.ts

@@ -2,6 +2,11 @@
 
 export { MoneyPriceInteractive } from './money-price-interactive';
 export { MoneyPriceButton } from './money-price-button';
+export {
+  PricingModal,
+  PricingModalProvider,
+  usePricingModal,
+} from './pricing-modal';
 export type {
   MoneyPriceConfig,
   MoneyPriceData,
@@ -17,4 +22,9 @@ export type {
   CreditPackProductConfig,
   UserContext,
 } from './money-price-types';
+export type {
+  OpenPricingModalOptions,
+  PricingModalProps,
+  PricingModalProviderProps,
+} from './pricing-modal';
 export { UserState } from './money-price-types';

package/src/main/money-price/money-price-interactive.tsx

@@ -44,6 +44,7 @@ export function MoneyPriceInteractive({
   customerPortalApiEndpoint,
   enableClerkModal = false,
   enabledBillingTypes,
+  mobileBillingSwitchBehavior = 'static',
   enableSubscriptionUpgrade = true,
   initialBillingType,
   disableAutoDetectBilling = false,
@@ -71,6 +72,7 @@ export function MoneyPriceInteractive({
       return acc;
     }, {});
   }, [billingOptions]);
+  const showBillingSwitch = billingOptions.length > 1;
   const defaultBilling = useMemo<BillingType>(() => {
     const defaultKey = data.billingSwitch.defaultKey;
 
@@ -395,41 +397,49 @@ export function MoneyPriceInteractive({
     return selectedBillingOption.discountText.replace('{percent}', String(discountPercent));
   }, [selectedBillingOption, providerConfig, billingType]);
 
-  // Configure the mobile floating style for BillingTypeButton.
+  // Configure the mobile behavior for BillingTypeButton.
   return (
     <>
-      <div className="flex justify-center mb-6 max-md:sticky max-md:top-30 max-md:z-30 max-md:py-2 max-md:bg-transparent">
-        <div className="inline-flex bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 max-md:w-full max-md:max-w-[340px] max-md:mx-auto shadow-sm" data-billing-switch>
-          {billingOptions.map(option => {
-            const isActive = option.key === billingType;
-            const buttonClasses = isActive
-              ? cn('text-white rounded-full shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass )
-              : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
-            const showBadge = option.key === billingType && !!discountBadgeText;
-
-            return (
-              <div key={option.key} className="relative flex items-center justify-center mx-1">
-                {showBadge && (
-                  <span className="absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap">
-                    {discountBadgeText}
-                  </span>
-                )}
-                <button
-                  className={cn(
-                    'text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[100px] sm:min-w-[120px]',
-                    buttonClasses
+      {showBillingSwitch ? (
+        <div
+          className={cn(
+            'mb-6 flex justify-center',
+            mobileBillingSwitchBehavior === 'sticky' &&
+              'max-md:sticky max-md:top-2 max-md:z-30 max-md:py-2 max-md:bg-transparent',
+          )}
+        >
+          <div className="inline-flex max-w-[calc(100vw-2rem)] bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded-full px-2 py-2 sm:px-3 sm:py-3 shadow-sm" data-billing-switch>
+            {billingOptions.map(option => {
+              const isActive = option.key === billingType;
+              const buttonClasses = isActive
+                ? cn('text-white rounded-full shadow-sm', themeButtonGradientClass, themeButtonGradientHoverClass )
+                : 'text-gray-800 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-100 rounded-full';
+              const showBadge = option.key === billingType && !!discountBadgeText;
+
+              return (
+                <div key={option.key} className="relative flex items-center justify-center mx-1">
+                  {showBadge && (
+                    <span className="absolute z-10 left-1/2 -translate-x-1/2 -top-3 sm:-top-4 translate-y-[-50%] px-3 py-0.5  text-[0.625rem] sm:text-xs rounded-md bg-yellow-100 text-yellow-800 font-semibold shadow-sm whitespace-nowrap">
+                      {discountBadgeText}
+                    </span>
                   )}
-                  type="button"
-                  data-billing-button={option.key}
-                  onClick={() => setUserSelectedBillingType(option.key)}
-                >
-                  {option.name}
-                </button>
-              </div>
-            );
-          })}
+                  <button
+                    className={cn(
+                      'text-sm md:text-base font-medium transition relative text-center z-10 px-2 sm:px-4 py-2 min-w-[88px] min-[360px]:min-w-[100px] sm:min-w-[120px]',
+                      buttonClasses
+                    )}
+                    type="button"
+                    data-billing-button={option.key}
+                    onClick={() => setUserSelectedBillingType(option.key)}
+                  >
+                    {option.name}
+                  </button>
+                </div>
+              );
+            })}
+          </div>
         </div>
-      </div>
+      ) : null}
 
       <div className="w-full">
         <div className="flex flex-wrap justify-center gap-5 md:gap-6 xl:gap-8 w-full max-w-6xl mx-auto">

package/src/main/money-price/money-price-types.ts

@@ -102,6 +102,7 @@ export interface MoneyPriceProps {
   enableClerkModal?: boolean;
   sectionClassName?: string;
   enabledBillingTypes?: string[];
+  mobileBillingSwitchBehavior?: 'sticky' | 'static';
   enableSubscriptionUpgrade?: boolean;
   initUserContext?: InitUserContext;
   initialBillingType?: string;
@@ -115,6 +116,7 @@ export interface MoneyPriceInteractiveProps {
   customerPortalApiEndpoint?: string;
   enableClerkModal?: boolean;
   enabledBillingTypes?: string[];
+  mobileBillingSwitchBehavior?: 'sticky' | 'static';
   enableSubscriptionUpgrade?: boolean;
   initialBillingType?: string;
   disableAutoDetectBilling?: boolean;

package/src/main/money-price/money-price.tsx

@@ -11,6 +11,7 @@ export async function MoneyPrice({
   enableClerkModal = false,
   sectionClassName,
   enabledBillingTypes,
+  mobileBillingSwitchBehavior,
   enableSubscriptionUpgrade = true,
   initUserContext,
   initialBillingType,
@@ -36,6 +37,7 @@ export async function MoneyPrice({
         customerPortalApiEndpoint={customerPortalApiEndpoint}
         enableClerkModal={enableClerkModal}
         enabledBillingTypes={enabledBillingTypes}
+        mobileBillingSwitchBehavior={mobileBillingSwitchBehavior}
         enableSubscriptionUpgrade={enableSubscriptionUpgrade}
         initUserContext={initUserContext}
         initialBillingType={initialBillingType}