Genarrative/apps/ai-game-creator-shell/src/features/app-shell/AccountWallet.tsx

import { PlatformMudPointWalletEntry } from '../../../../../packages/shared/src/components/PlatformMudPointWalletEntry';
import { PlatformProfileRechargeModal } from '../../../../../packages/shared/src/components/PlatformProfileRechargeModal';
import { PlatformProfileWalletLedgerModal } from '../../../../../packages/shared/src/components/PlatformProfileWalletLedgerModal';
import { ThemedModal } from '../../components/modal/ThemedModal';
import type { AccountWalletController } from './useAccountWallet';

export function AccountWalletBar({
  controller,
}: {
  controller: AccountWalletController;
}) {
  return (
    <div className="launcher-account-bar" aria-label="账户资产">
      <PlatformMudPointWalletEntry
        balance={
          controller.mudPointBalance?.totalPoints ??
          controller.legacyWalletBalance
        }
        breakdown={controller.mudPointBalance}
        isLoading={controller.mudPointBalanceStatus === 'loading'}
        error={controller.mudPointBalanceError || null}
        onRequestDetails={() => void controller.onWalletBalanceMayHaveChanged()}
        onRecharge={controller.openRecharge}
        onOpenLedger={controller.openWalletLedger}
        onRedeemCode={controller.openRedeemCode}
      />
    </div>
  );
}

export function AccountWalletDialogs({
  controller,
}: {
  controller: AccountWalletController;
}) {
  return (
    <>
      {controller.rechargeOpen ? (
        <PlatformProfileRechargeModal
          center={controller.rechargeModalCenter}
          isLoading={controller.rechargeLoading}
          error={controller.rechargeError}
          submittingProductId={controller.submittingRechargeProductId}
          nativePayment={controller.nativeRechargePayment}
          membershipQuote={controller.membershipQuote}
          isLoadingMembershipQuote={controller.membershipQuoteLoading}
          membershipQuoteError={controller.membershipQuoteError}
          onClose={controller.closeRecharge}
          onRetry={() => void controller.loadRechargeCenter()}
          onBuy={(product) => void controller.buyRechargeProduct(product)}
          onRequestMembershipQuote={(plan) =>
            void controller.requestMembershipQuote(plan)
          }
          onSubmitMembershipCheckout={(plan, cycleKind) =>
            controller.submitMembershipCheckout(plan, cycleKind)
          }
          onConfirmNativePayment={() =>
            void controller.confirmNativeRechargePayment()
          }
          onCloseNativePayment={() => controller.setNativeRechargePayment(null)}
        />
      ) : null}
      {controller.walletLedgerOpen ? (
        <PlatformProfileWalletLedgerModal
          ledger={controller.walletLedger}
          fallbackBalance={
            controller.mudPointBalance?.totalPoints ??
            controller.legacyWalletBalance ??
            0
          }
          isLoading={controller.walletLedgerLoading}
          error={controller.walletLedgerError}
          onClose={() => controller.setWalletLedgerOpen(false)}
          onRetry={() => void controller.loadWalletLedger()}
        />
      ) : null}
      <ThemedModal
        open={controller.redeemCodeOpen}
        ariaLabel="兑换码"
        onClose={controller.closeRedeemCode}
        panelClassName="launcher-redeem-modal"
      >
        <header className="launcher-redeem-modal-header">
          <strong>兑换码</strong>
          <button
            type="button"
            onClick={controller.closeRedeemCode}
            aria-label="关闭兑换码"
          >
            ×
          </button>
        </header>
        <form
          className="launcher-redeem-modal-form"
          onSubmit={(event) => {
            event.preventDefault();
            void controller.redeemCode();
          }}
        >
          <input
            value={controller.redeemCodeInput}
            onChange={(event) =>
              controller.setRedeemCodeInput(event.target.value)
            }
            placeholder="输入兑换码"
            aria-label="兑换码"
            autoFocus
          />
          {controller.redeemCodeError ? (
            <p role="alert">{controller.redeemCodeError}</p>
          ) : null}
          {controller.redeemCodeSuccess ? (
            <p role="status">{controller.redeemCodeSuccess}</p>
          ) : null}
          <button
            type="submit"
            disabled={
              controller.redeemCodeLoading || !controller.redeemCodeInput.trim()
            }
          >
            {controller.redeemCodeLoading ? '兑换中' : '兑换'}
          </button>
        </form>
      </ThemedModal>
    </>
  );
}