@windrun-huaiin/third-ui 31.3.6 → 31.4.0

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}

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

@@ -0,0 +1,283 @@
+'use client';
+
+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,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { dialogThemedOverlayClass } from '../alert-dialog/dialog-styles';
+import { MoneyPriceInteractive } from './money-price-interactive';
+import type {
+  InitUserContext,
+  MoneyPriceConfig,
+  MoneyPriceData,
+} from './money-price-types';
+
+export interface OpenPricingModalOptions {
+  billingType?: string;
+}
+
+export interface PricingModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  data: MoneyPriceData;
+  config: MoneyPriceConfig;
+  billingType?: string;
+  checkoutApiEndpoint?: string;
+  customerPortalApiEndpoint?: string;
+  enableClerkModal?: boolean;
+  enabledBillingTypes?: string[];
+  mobileBillingSwitchBehavior?: 'sticky' | 'static';
+  enableSubscriptionUpgrade?: boolean;
+  initUserContext?: InitUserContext;
+  isInitLoading?: boolean;
+}
+
+export interface PricingModalProviderProps
+  extends Omit<PricingModalProps, 'open' | 'onOpenChange' | 'billingType'> {
+  children: ReactNode;
+  pricingContextEndpoint?: string;
+}
+
+interface PricingModalContextValue {
+  openPricingModal: (options?: OpenPricingModalOptions) => void;
+  closePricingModal: () => void;
+  isPricingModalOpen: boolean;
+}
+
+const emptyInitUserContext: InitUserContext = {
+  fingerprintId: null,
+  xUser: null,
+  xCredit: null,
+  xSubscription: null,
+  isClerkAuthenticated: false,
+};
+
+const PricingModalContext = createContext<PricingModalContextValue | null>(null);
+
+function normalizeEnabledBillingTypes(
+  data: MoneyPriceData,
+  enabledBillingTypes: string[] | undefined,
+) {
+  const availableKeys = data.billingSwitch.options.map((option) => option.key);
+  const configuredKeys = enabledBillingTypes?.length ? enabledBillingTypes : availableKeys;
+
+  return Array.from(
+    new Set(
+      configuredKeys
+        .map((billingType) => billingType.trim())
+        .filter((billingType) => availableKeys.includes(billingType)),
+    ),
+  );
+}
+
+function resolveBillingType({
+  data,
+  enabledBillingTypes,
+  requestedBillingType,
+}: {
+  data: MoneyPriceData;
+  enabledBillingTypes?: string[];
+  requestedBillingType?: string;
+}) {
+  const enabledKeys = normalizeEnabledBillingTypes(data, enabledBillingTypes);
+
+  if (requestedBillingType && enabledKeys.includes(requestedBillingType)) {
+    return requestedBillingType;
+  }
+
+  if (enabledKeys.includes(data.billingSwitch.defaultKey)) {
+    return data.billingSwitch.defaultKey;
+  }
+
+  return enabledKeys[0] ?? data.billingSwitch.options[0]?.key;
+}
+
+export function PricingModal({
+  open,
+  onOpenChange,
+  data,
+  config,
+  billingType,
+  checkoutApiEndpoint,
+  customerPortalApiEndpoint,
+  enableClerkModal = false,
+  enabledBillingTypes,
+  mobileBillingSwitchBehavior,
+  enableSubscriptionUpgrade = true,
+  initUserContext,
+  isInitLoading = false,
+}: PricingModalProps) {
+  const resolvedBillingType = useMemo(
+    () =>
+      resolveBillingType({
+        data,
+        enabledBillingTypes,
+        requestedBillingType: billingType,
+      }),
+    [billingType, data, enabledBillingTypes],
+  );
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      {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">
+                  {data.title}
+                </span>
+                {data.subtitle ? (
+                  <span className="text-sm font-medium text-slate-500 dark:text-slate-300">
+                    {data.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={() => onOpenChange(false)}
+            >
+              <XIcon className="h-6 w-6" />
+            </button>
+          </AlertDialogHeader>
+          <div className="max-h-[60vh] overflow-y-auto px-4 pt-2 pb-6 sm:max-h-[80vh]">
+            <div className="mx-auto w-full">
+              <MoneyPriceInteractive
+                key={resolvedBillingType ?? 'default'}
+                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}
+              />
+            </div>
+          </div>
+        </AlertDialogContent>
+      ) : null}
+    </AlertDialog>
+  );
+}
+
+export function PricingModalProvider({
+  children,
+  pricingContextEndpoint,
+  initUserContext: initUserContextProp,
+  isInitLoading: isInitLoadingProp = false,
+  ...modalProps
+}: PricingModalProviderProps) {
+  const [open, setOpen] = useState(false);
+  const [requestedBillingType, setRequestedBillingType] = useState<string | undefined>();
+  const [loadedInitUserContext, setLoadedInitUserContext] = useState<InitUserContext>(
+    initUserContextProp ?? emptyInitUserContext,
+  );
+  const [isContextLoading, setIsContextLoading] = useState(false);
+  const loadedContextRef = useRef(!!initUserContextProp);
+
+  useEffect(() => {
+    if (initUserContextProp) {
+      loadedContextRef.current = true;
+      setLoadedInitUserContext(initUserContextProp);
+    }
+  }, [initUserContextProp]);
+
+  const loadPricingContext = useCallback(async () => {
+    if (!pricingContextEndpoint || loadedContextRef.current) {
+      return;
+    }
+
+    setIsContextLoading(true);
+    try {
+      const response = await fetch(pricingContextEndpoint, {
+        credentials: 'same-origin',
+      });
+
+      if (!response.ok) {
+        return;
+      }
+
+      const nextContext = (await response.json()) as InitUserContext;
+      loadedContextRef.current = true;
+      setLoadedInitUserContext(nextContext);
+    } catch (error) {
+      console.warn('[PricingModalProvider] Failed to load pricing context', error);
+    } finally {
+      setIsContextLoading(false);
+    }
+  }, [pricingContextEndpoint]);
+
+  const openPricingModal = useCallback(
+    (options?: OpenPricingModalOptions) => {
+      setRequestedBillingType(options?.billingType);
+      setOpen(true);
+      void loadPricingContext();
+    },
+    [loadPricingContext],
+  );
+
+  const closePricingModal = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      openPricingModal,
+      closePricingModal,
+      isPricingModalOpen: open,
+    }),
+    [closePricingModal, open, openPricingModal],
+  );
+
+  return (
+    <PricingModalContext.Provider value={contextValue}>
+      {children}
+      <PricingModal
+        {...modalProps}
+        open={open}
+        onOpenChange={setOpen}
+        billingType={requestedBillingType}
+        initUserContext={initUserContextProp ?? loadedInitUserContext}
+        isInitLoading={isInitLoadingProp || isContextLoading}
+      />
+    </PricingModalContext.Provider>
+  );
+}
+
+export function usePricingModal() {
+  const context = useContext(PricingModalContext);
+
+  if (!context) {
+    throw new Error('usePricingModal must be used within PricingModalProvider.');
+  }
+
+  return context;
+}