画面遷移図と画面設計 — UIとロジックの境界を決める

// ❌ UIが遷移条件と業務ルールを抱えすぎている
function OrderConfirmPage({ user, cart, payment }: Props) {
  async function handleSubmit() {
    if (!user) {
      router.push('/login?redirect=/orders/confirm');
      return;
    }
 
    if (!user.emailVerified) {
      setError('メール認証が必要です');
      return;
    }
 
    if (cart.items.length === 0) {
      router.push('/cart');
      return;
    }
 
    if (!payment || payment.status !== 'valid') {
      router.push('/checkout/payment');
      return;
    }
 
    const result = await createOrder({ cartId: cart.id, paymentId: payment.id });
 
    if (result.status === 'failed') {
      router.push('/checkout/payment?reason=failed');
      return;
    }
 
    router.push(`/orders/${result.orderId}/complete`);
  }
 
  return <button onClick={handleSubmit}>注文を確定する</button>;
}

type OrderConfirmState = {
  user: User | null;
  cart: Cart;
  payment: Payment | null;
};
 
type TransitionResult =
  | { type: 'allow' }
  | { type: 'redirect'; to: string }
  | { type: 'block'; message: string };
 
function canSubmitOrder(state: OrderConfirmState): TransitionResult {
  if (!state.user) {
    return { type: 'redirect', to: '/login?redirect=/orders/confirm' };
  }
 
  if (!state.user.emailVerified) {
    return { type: 'block', message: 'メール認証が必要です' };
  }
 
  if (state.cart.items.length === 0) {
    return { type: 'redirect', to: '/cart' };
  }
 
  if (!state.payment || state.payment.status !== 'valid') {
    return { type: 'redirect', to: '/checkout/payment' };
  }
 
  return { type: 'allow' };
}

function OrderConfirmPage({ user, cart, payment }: Props) {
  async function handleSubmit() {
    const result = canSubmitOrder({ user, cart, payment });
 
    if (result.type === 'redirect') {
      router.push(result.to);
      return;
    }
 
    if (result.type === 'block') {
      setError(result.message);
      return;
    }
 
    const order = await orderService.createOrder({
      cartId: cart.id,
      paymentId: payment!.id,
    });
 
    router.push(`/orders/${order.id}/complete`);
  }
 
  return <button onClick={handleSubmit}>注文を確定する</button>;
}