chore(runway): cherry-pick fix(predict): cp-7.62.0 NFL bug fixes for game periods, search highlights, and gameId parsing (#24893)

- fix(predict): cp-7.62.0 NFL bug fixes for game periods, search
highlights, and gameId parsing (#24859)

## **Description**

This PR addresses multiple bugs in the Predict feature related to NFL
game handling:

1. **End Q4 period support**: Added "End Q4" as a valid game period,
which was missing and causing display issues when games reached the end
of the 4th quarter before overtime or final
2. **No highlights when searching**: Fixed an issue where highlighted
markets were still being fetched when a search query was active, which
was unnecessary and could cause UI inconsistencies
3. **gameId type consistency**: Ensured `gameId` is converted to string
when parsing API data to prevent type mismatches in downstream
components

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: N/A

## **Manual testing steps**

```gherkin
Feature: Predict NFL game period display

  Scenario: End Q4 period displays correctly
    Given user is viewing an NFL game that has reached end of Q4
    When the game period updates to "End Q4"
    Then the scoreboard should display the end of quarter state correctly

Feature: Predict search without highlights

  Scenario: Search results don't show highlights
    Given user is on the Predict markets page
    When user enters a search query
    Then highlighted markets should not be fetched or displayed

Feature: Predict game ID parsing

  Scenario: Game IDs are consistently strings
    Given API returns game data with numeric gameId
    When the data is parsed
    Then the gameId should be converted to a string type
```

## **Screenshots/Recordings**

### **Before**

N/A - Bug fixes only

### **After**

N/A - Bug fixes only

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling

guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> - **End Q4 period support**: Adds `"End Q4"` to `PredictGamePeriod`
and treats it as end-of-quarter in `PredictSportScoreboard`, affecting
in-progress/status display.
> - **Search highlights fix**: Updates `PredictController.getMarkets` to
not fetch highlighted markets when `params.q` (search query) is present.
> - **gameId parsing consistency**: Converts `event.gameId` to string in
`gameParser.buildGameData` for consistent IDs.
> - *Minor*: Small unsubscribe cleanup in Polymarket `WebSocketManager`
(variable name to avoid shadowing).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
8b0f01d. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[ef97628](ef97628)

Co-authored-by: Luis Taniça <matallui@gmail.com>

Author: runway-github[bot]

app/components/UI/Predict/components/PredictSportScoreboard/PredictSportScoreboard.tsx

@@ -106,7 +106,8 @@ const PredictSportScoreboard: React.FC<PredictSportScoreboardProps> = ({
 
   const isPreGame = mergedData.status === 'scheduled' || period === 'NS';
   const isHalftime = period === 'HT';
-  const isEndOfQuarter = period === 'End Q1' || period === 'End Q3';
+  const isEndOfQuarter =
+    period === 'End Q1' || period === 'End Q3' || period === 'End Q4';
   const isOvertime = period === 'OT';
   const isFinal =
     mergedData.status === 'ended' || period === 'FT' || period === 'VFT';

app/components/UI/Predict/controllers/PredictController.ts

@@ -501,7 +501,10 @@ export class PredictController extends BaseController<
 
       const isFirstPage = !params.offset || params.offset === 0;
       const shouldFetchHighlights =
-        marketHighlightsFlag.enabled && isFirstPage && params.category;
+        marketHighlightsFlag.enabled &&
+        isFirstPage &&
+        params.category &&
+        !params.q;
 
       if (shouldFetchHighlights) {
         const highlightedMarketIds =

app/components/UI/Predict/providers/polymarket/WebSocketManager.ts

@@ -102,10 +102,10 @@ export class WebSocketManager {
     this.ensureSportsConnection();
 
     return () => {
-      const callbacks = this.gameSubscriptions.get(gameId);
-      if (callbacks) {
-        callbacks.delete(callback);
-        if (callbacks.size === 0) {
+      const _callbacks = this.gameSubscriptions.get(gameId);
+      if (_callbacks) {
+        _callbacks.delete(callback);
+        if (_callbacks.size === 0) {
           this.gameSubscriptions.delete(gameId);
         }
       }

app/components/UI/Predict/types/index.ts

@@ -144,6 +144,7 @@ export type PredictGamePeriod =
   | 'Q3' // Third Quarter
   | 'End Q3' // End of Third Quarter
   | 'Q4' // Fourth Quarter
+  | 'End Q4' // End of Fourth Quarter
   | 'OT' // Overtime
   | 'FT' // Final
   | 'VFT'; // Verified fulltime (when closed=true)

app/components/UI/Predict/utils/gameParser.ts

@@ -173,7 +173,7 @@ export function buildGameData(
   }
 
   return {
-    id: event.gameId,
+    id: String(event.gameId),
     startTime:
       event.startTime ?? event.endDate ?? `${parsedSlug.dateString}T00:00:00Z`,
     status: getGameStatus(event),