[JOY (JOY)]

Closes #1530

JOY asked for the product information and specs to sit above the price history and the sellers.

What

Product page order (smartphones/[slug]/page.tsx, shared by every category and the Item pages):

1. hero and scoreboard (unchanged; it holds the variant links or the Item size picker, as before);
2. specs (#specs-section);
3. reviews (#jreviews-section);
4. price history (#pdv-price-history);
5. sellers (#offers-table), with the unknown-size listings group right after them.

Before this change the order after the hero was sellers, price history, specs, then reviews (#1469).

• Jump row:
  • It follows the new order: Thông số, Đánh giá, Lịch sử giá, Nơi bán.
  • It stays where fix(web): the product page jump row sits in a phone's first screen #1518 put it, under the price line, so it is still in the phone's first screen.
• Best price near the top:
  • The price strip in the hero is unchanged and still shows the cheapest offer in the first screen.
  • The "Nơi bán (N)" link in the jump row reaches the full list in one tap.
• The blocks moved as they are; no markup inside them changed.

Tests

• e2e/product-section-order.spec.ts and e2e/item-model/item-product-page.spec.ts assert the new order:
  • the sections' tops are ascending;
  • the jump row hrefs follow the same order.
• core-rate-architecture checks the source order: specs, then <JReviewsSection, then #pdv-price-history, then #offers-table.
• product-above-fold.spec.ts still checks that the whole jump row is in the first screen at 390x844 and 375x812. It needs no change, since the row did not move.
• tsc, eslint and core-rate-architecture pass locally.

Coordination

PR #1534 (#1528, stars) also touches this page, but only the scoreboard and the hero score line, not these sections. Whichever lands second gets a trivial rebase.

Review

To follow in the comments: a fresh-context review and Codex.

🤖 Generated with Claude Code

---

📌 TL;DR

This PR reorders the sections on the smartphone product detail page to prioritize product specifications and reviews over merchant offers and price history, aligning the UI with the new "product-first" design requirement (#1530). It updates the visual layout, navigation jump links, and corresponding E2E and architectural tests to reflect the new sequence.

🎯 Type of Change

• 🚀 New feature
• 🐛 Bugfix
• 🧹 Refactor
• ⚡ Performance
• 📚 Documentation
• ⚙️ CI / Configuration

🔍 Changes Walkthrough

File	Summary of Changes
apps/web/e2e/item-model/item-product-page.spec.ts	Updated the expected section order constant ORDER to match the new layout (Specs → Reviews → History → Offers).
apps/web/e2e/product-section-order.spec.ts	Updated the test description and the ORDER constant to verify the new "specs first" sequence.
apps/web/src/app/[locale]/smartphones/[slug]/page.tsx	Core Change: Moved the #specs-section and #jreviews-section blocks to the top of the content area. Moved #pdv-price-history and #offers-table (including unknown size offers) to the bottom. Updated the nav jump links to reflect the new order.
apps/web/src/server/rate/__tests__/core-rate-architecture.test.ts	Updated the architectural test to assert the new DOM order: #specs-section < <JReviewsSection /> < #pdv-price-history < #offers-table.

📊 Architectural Flow

flowchart TD
    subgraph "Product Detail Page (New Order)"
        A[Price Box / Scoreboard] --> B[Jump Nav]
        B --> C[#specs-section]
        C --> D[#jreviews-section]
        D --> E[#pdv-price-history]
        E --> F[#offers-table]
        F --> G[Unknown Size Offers]
    end
    
    subgraph "Old Order (Removed)"
        H[#offers-table] --> I[#pdv-price-history]
        I --> J[#specs-section]
        J --> K[#jreviews-section]
    end
    
    style C fill:#e1f5fe,stroke:#01579b
    style D fill:#e1f5fe,stroke:#01579b
    style E fill:#fff9c4,stroke:#fbc02d
    style F fill:#fff9c4,stroke:#fbc02d

Loading

[claude]

⚠️ Code review skipped — your organization has no extra usage available to pay for this review.

If your organization's extra usage balance is empty, an organization admin can add extra usage credits at claude.ai/admin-settings/usage. If its monthly spend limit was reached, an admin can raise it on the same page. If neither applies, contact Anthropic support.

Once extra usage is available, someone with write access to this repository can comment @claude review on this pull request to trigger a review.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
rate	Ready	Preview	Oct 31, 2026 3:01am UTC

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 39 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 68b1c2db-fa68-4c6f-afb0-234e7f1dfac6

Commits

Reviewing files that changed from the base of the PR and between 96e5c41 and 1283d38.

Files selected for processing: 5

• apps/web/e2e/item-model/item-product-page.spec.ts
• apps/web/e2e/product-above-fold.spec.ts
• apps/web/e2e/product-section-order.spec.ts
• apps/web/src/app/[locale]/smartphones/[slug]/page.tsx
• apps/web/src/server/rate/__tests__/core-rate-architecture.test.ts

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

[dos]

⏱️ Code Review completed (4 eligible files · 10,854 chars · 1 model call(s) · 1 PR unit(s))

Whole diff with bounded context at base 96e5c41 / head 84b5d49.

✅ CLEAN_PASS: Complete diff reviewed

[dos]

⏱️ Code Review completed (5 eligible files · 12,016 chars · 1 model call(s) · 1 PR unit(s))

Whole diff with bounded context at base 96e5c41 / head 1283d38.

✅ CLEAN_PASS: Complete diff reviewed

[JOY (JOY)]

Review

Fresh-context review of 84b5d49: no significant finding.

• The blocks moved intact: the sorted removed and added lines differ only in comments.
• Nothing on the page depends on the old order:
  • CSS ties to these sections only by id (scroll-margin-top);
  • lazy Item panels load on a size pick, not on scroll;
  • openOnHash and the hash links work by id.
• The E2E specs that touch #offers-table (bait price, seller line, trust badge) select by id, not position.
• Optional: three test titles and comments named the old order. They now name the new one, in 1283d38.

Codex round 1: nothing significant. No second round was needed.

Product note for the PO: on a phone, the "Nơi bán (N)" chip is now last in the jump row, past its right-edge fade, so it takes a swipe to reach. This follows from the #1530 order. The best price stays in the price strip in the first screen.