feat: refine wallet credit mode detection and improve UI consistency across multiple screens
Some checks failed
lotteryfront CI / build (push) Has been cancelled
Some checks failed
lotteryfront CI / build (push) Has been cancelled
- Updated wallet screens to check both balance and profile for credit funding mode, ensuring consistent credit player detection - Removed currency switcher from hall header and schedule timezone display from draw panel for cleaner UI - Simplified ticket orders status filter to single-select mode with improved visual hierarchy - Added sizes="100vw" attribute to entry and login background images for proper
This commit is contained in:
@@ -13,12 +13,7 @@ import {
|
||||
} from "@/features/draw/draw-status-meta";
|
||||
import type { HallDrawLiveSnapshot } from "@/features/hall/use-hall-draw-live";
|
||||
import { formatSecondsClock } from "@/lib/format-gmt";
|
||||
import { LOTTERY_SCHEDULE_TIMEZONE } from "@/lib/lottery-schedule-timezone";
|
||||
import {
|
||||
formatPlayerInstant,
|
||||
formatLotteryScheduleClock,
|
||||
getBrowserTimeZoneLabel,
|
||||
} from "@/lib/player-datetime";
|
||||
import { formatPlayerInstant } from "@/lib/player-datetime";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { DrawCurrentPayload } from "@/types/api/draw-current";
|
||||
|
||||
@@ -190,7 +185,7 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
|
||||
<div className="flex min-w-0 flex-col items-center justify-center px-2 py-3 text-center">
|
||||
<div className="min-w-0 max-w-full overflow-x-auto">
|
||||
<p className="text-[11px] font-semibold text-slate-500">{t("draw.issueNo")}</p>
|
||||
<p className="whitespace-nowrap text-sm font-black tabular-nums text-[#ff143d]">
|
||||
<p className="whitespace-nowrap text-xs font-black tabular-nums text-[#ff143d] sm:text-sm">
|
||||
{display.draw_no}
|
||||
</p>
|
||||
</div>
|
||||
@@ -214,17 +209,6 @@ export function HallDrawPanel({ drawLive }: { drawLive: HallDrawLiveSnapshot })
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{display.schedule_now ? (
|
||||
<div className="border-t border-[#eef3f9] bg-[#fbfdff] px-3 py-1.5 text-center text-[11px] text-slate-500">
|
||||
{t("draw.scheduleNow", {
|
||||
now: formatLotteryScheduleClock(
|
||||
display.schedule_now,
|
||||
display.schedule_timezone ?? LOTTERY_SCHEDULE_TIMEZONE,
|
||||
),
|
||||
tz: getBrowserTimeZoneLabel(),
|
||||
})}
|
||||
</div>
|
||||
) : null}
|
||||
{blockedUi ? (
|
||||
<div className="flex items-center gap-2 border-t border-red-100 bg-red-50 px-3 py-2 text-xs font-medium text-red-600">
|
||||
<TimerReset className="size-4 shrink-0" aria-hidden />
|
||||
|
||||
@@ -5,7 +5,6 @@ import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { CurrencySwitcher } from "@/components/currency-switcher";
|
||||
import { LanguageSwitcher } from "@/components/language-switcher";
|
||||
import { HallBettingGrid } from "@/features/hall/hall-betting-grid";
|
||||
import { usePlayerStickyTopStyle } from "@/hooks/use-player-sticky-top-style";
|
||||
@@ -35,7 +34,7 @@ export function HallScreen() {
|
||||
<header
|
||||
className={cn(
|
||||
playerPageHeader,
|
||||
"sticky z-20 mb-2 flex min-h-9 items-center gap-2 overflow-visible bg-white/95 pt-2 pb-2 -mx-3 px-3 backdrop-blur",
|
||||
"sticky z-20 mb-2 flex min-h-9 items-center gap-2 overflow-visible bg-white pt-2 pb-2 -mx-3 px-3",
|
||||
)}
|
||||
style={stickyTopStyle}
|
||||
>
|
||||
@@ -50,15 +49,6 @@ export function HallScreen() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<CurrencySwitcher
|
||||
variant="minimal"
|
||||
menuAlign="end"
|
||||
showLabel
|
||||
className={cn(
|
||||
playerHeaderControl,
|
||||
"rounded-full border border-[#e4eaf4] bg-[#f8fafc] [&_button]:h-8 [&_button]:gap-1 [&_button]:px-2 [&_button]:py-0 [&_button]:text-xs [&_button]:font-bold [&_button]:text-[#0b3f96]",
|
||||
)}
|
||||
/>
|
||||
<LanguageSwitcher
|
||||
variant="minimal"
|
||||
menuAlign="end"
|
||||
|
||||
@@ -20,6 +20,7 @@ import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
|
||||
import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useNetworkConnectionStore } from "@/stores/network-connection-store";
|
||||
import { usePlayerSessionStore } from "@/stores/player-session-store";
|
||||
|
||||
const BALANCE_KEY = (currency: string) => ["wallet/balance", currency];
|
||||
|
||||
@@ -62,7 +63,8 @@ export function HallWalletStrip() {
|
||||
}, [isDegraded]);
|
||||
|
||||
const availableMinor = Number(balance?.available_balance ?? balance?.balance ?? 0);
|
||||
const isCreditPlayer = isCreditFundingPlayer(balance);
|
||||
const profile = usePlayerSessionStore((s) => s.profile);
|
||||
const isCreditPlayer = isCreditFundingPlayer(balance) || isCreditFundingPlayer(profile);
|
||||
const balanceMinor = Number(balance?.balance ?? 0);
|
||||
const headlineMinor = isCreditPlayer ? availableMinor : balanceMinor;
|
||||
const transferInLotteryMinor = isCreditPlayer ? availableMinor : balanceMinor;
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import Link from "next/link";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { CalendarRange, Check, ChevronDown, Search } from "lucide-react";
|
||||
import { CalendarRange, ChevronDown, Search } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { getDrawCurrent } from "@/api/draw";
|
||||
@@ -342,8 +342,8 @@ export function TicketOrdersListScreen() {
|
||||
<span className="flex min-w-0 items-center gap-1.5">
|
||||
<span className="shrink-0">{t("orders.status")}</span>
|
||||
{queryStatuses.length ? (
|
||||
<span className="inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-[#0b56b7] px-1 text-[11px] font-black text-white">
|
||||
{queryStatuses.length}
|
||||
<span className="truncate text-[#0b56b7]">
|
||||
{t(`ticketStatus.${queryStatuses[0]}`, { defaultValue: queryStatuses[0] })}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
@@ -353,40 +353,33 @@ export function TicketOrdersListScreen() {
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<PopoverContent align="start" className="w-56 border-[#dce7f7] p-2 shadow-[0_16px_40px_rgba(15,23,42,0.14)]">
|
||||
<div className="space-y-1">
|
||||
<p className="px-1 pb-1 text-[11px] font-bold text-[#32518d]">
|
||||
{t("orders.statusFilter")}
|
||||
</p>
|
||||
<PopoverContent align="start" className="w-56 border-[#dce7f7] p-1.5 shadow-[0_16px_40px_rgba(15,23,42,0.14)]">
|
||||
<div className="space-y-0.5">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex w-full items-center rounded-md px-2 py-1.5 text-left text-[13px] font-semibold transition-colors",
|
||||
queryStatuses.length === 0 ? "bg-[#eaf2ff] text-[#0b56b7]" : "text-[#32518d] hover:bg-[#f8fbff]",
|
||||
)}
|
||||
onClick={() => setQueryStatuses([])}
|
||||
>
|
||||
{t("actions.all", { defaultValue: "全部" })}
|
||||
</button>
|
||||
{STATUS_OPTIONS.map((status) => {
|
||||
const checked = queryStatuses.includes(status);
|
||||
const checked = queryStatuses[0] === status;
|
||||
return (
|
||||
<button
|
||||
key={status}
|
||||
type="button"
|
||||
className={cn(
|
||||
"flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs font-semibold transition-colors",
|
||||
"flex w-full items-center rounded-md px-2 py-1.5 text-left text-[13px] font-semibold transition-colors",
|
||||
checked ? "bg-[#eaf2ff] text-[#0b56b7]" : "text-[#32518d] hover:bg-[#f8fbff]",
|
||||
)}
|
||||
onClick={() => {
|
||||
setQueryStatuses((current) =>
|
||||
current.includes(status)
|
||||
? current.filter((s) => s !== status)
|
||||
: [...current, status],
|
||||
);
|
||||
setQueryStatuses(checked ? [] : [status]);
|
||||
setStatusOpen(false);
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"flex size-3.5 shrink-0 items-center justify-center rounded border",
|
||||
checked
|
||||
? "border-[#0b56b7] bg-[#0b56b7] text-white"
|
||||
: "border-slate-300 bg-white",
|
||||
)}
|
||||
aria-hidden
|
||||
>
|
||||
{checked ? <Check className="size-2.5" strokeWidth={3} /> : null}
|
||||
</span>
|
||||
<span className="truncate">{t(`ticketStatus.${status}`, { defaultValue: status })}</span>
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -368,6 +368,7 @@ export function EntryGate() {
|
||||
src={phase === "success" ? "/entry/image4.png" : "/entry/image1.png"}
|
||||
alt={t("header.backgroundAlt")}
|
||||
fill
|
||||
sizes="100vw"
|
||||
className="object-cover object-center"
|
||||
priority
|
||||
/>
|
||||
|
||||
@@ -151,9 +151,9 @@ export function PlayerLoginScreen(): React.ReactElement {
|
||||
|
||||
return (
|
||||
<div className="relative flex min-h-dvh flex-col bg-white">
|
||||
<div className="relative h-[45vh] min-h-[200px] shrink-0 overflow-hidden bg-red-600">
|
||||
<div className="relative h-[45vh] min-h-[200px] shrink-0 overflow-hidden bg-[#f8fafc]">
|
||||
<div className="pointer-events-none absolute inset-0">
|
||||
<Image src="/entry/image1.png" alt="" fill className="object-cover object-center" priority />
|
||||
<Image src="/entry/image1.png" alt="" fill sizes="100vw" className="object-cover object-center" priority />
|
||||
</div>
|
||||
<div className="absolute left-0 right-0 top-0 z-20 flex items-center px-4 py-3">
|
||||
<LanguageSwitcher variant="header" showFlag={false} />
|
||||
|
||||
@@ -12,6 +12,7 @@ import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
|
||||
import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
|
||||
import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
|
||||
import { formatWalletClientError } from "@/lib/wallet-api-error";
|
||||
import { usePlayerSessionStore } from "@/stores/player-session-store";
|
||||
import { getWalletLogsLastPage, type WalletLogsData } from "@/types/api/wallet-logs";
|
||||
|
||||
const WALLET_LOGS_PAGE_SIZE = 10;
|
||||
@@ -25,7 +26,8 @@ export function WalletLogsScreen() {
|
||||
const [logsLoading, setLogsLoading] = useState(false);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [creditMode, setCreditMode] = useState(false);
|
||||
const profile = usePlayerSessionStore((s) => s.profile);
|
||||
const [creditMode, setCreditMode] = useState(() => isCreditFundingPlayer(profile));
|
||||
const loadMoreRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const fetchPassRef = useRef(true);
|
||||
|
||||
@@ -22,6 +22,7 @@ import { isCreditFundingPlayer } from "@/lib/player-funding-mode";
|
||||
import { formatMinorAsCurrency } from "@/lib/money";
|
||||
import { PLAYER_CURRENCY_CHANGE_EVENT } from "@/lib/player-currency-preference";
|
||||
import { formatWalletClientError } from "@/lib/wallet-api-error";
|
||||
import { usePlayerSessionStore } from "@/stores/player-session-store";
|
||||
import type { WalletBalanceData } from "@/types/api/wallet-balance";
|
||||
import { getWalletLogsLastPage, type WalletLogsData } from "@/types/api/wallet-logs";
|
||||
|
||||
@@ -163,7 +164,8 @@ export function WalletScreen() {
|
||||
|
||||
const hasMore = logs ? logs.page < getWalletLogsLastPage(logs) : false;
|
||||
|
||||
const isCreditPlayer = isCreditFundingPlayer(balance);
|
||||
const profile = usePlayerSessionStore((s) => s.profile);
|
||||
const isCreditPlayer = isCreditFundingPlayer(balance) || isCreditFundingPlayer(profile);
|
||||
const displayMinor = isCreditPlayer
|
||||
? Number(balance?.available_balance ?? 0)
|
||||
: Number(balance?.balance ?? 0);
|
||||
|
||||
Reference in New Issue
Block a user