feat: sponsor purchases status update

[santipalenque]

https://app.clickup.com/t/86b66n5k8

Summary by CodeRabbit

• New Features

  • Added purchase approval/rejection capability for sponsors through an interactive status selector
  • Updated system permissions to support payment operations

• Documentation

  • Added user-facing message confirming successful status updates

• Tests

  • Added comprehensive test suite validating purchase status management, dropdown behavior, and approval/rejection workflows

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR extends sponsor purchase management by introducing API-driven approval/rejection capabilities. New Redux thunks call payment endpoints to approve or reject invoices, the UI dispatches these based on status selection, and a reducer updates the purchase list state accordingly. Includes translations, constants, and comprehensive test coverage.

Changes

Cohort / File(s)	Summary
Configuration .env.example	Added payment/write OAuth scope to PURCHASES_API_SCOPES.
Redux Actions src/actions/sponsor-purchases-actions.js	Added approveSponsorPurchase and rejectSponsorPurchase async thunks that invoke payment endpoints (/approve, /cancel), dispatch status-updated actions, handle loading/success/error states, and introduced SPONSOR_PURCHASE_STATUS_UPDATED action type.
Internationalization src/i18n/en.json	Added status_updated translation key with message "Status updated successfully." under sponsor purchase settings.
Constants src/utils/constants.js	Corrected PURCHASE_STATUS.CANCELLED spelling from "Cancelled" to "Canceled" and added new PURCHASE_METHODS object with CARD and INVOICE values.
State Management src/reducers/sponsors/sponsor-page-purchase-list-reducer.js	Added SPONSOR_PURCHASE_STATUS_UPDATED reducer case to update purchase status in state by payment_id.
Component src/pages/sponsors/sponsor-purchases-tab/index.js	Integrated approveSponsorPurchase and rejectSponsorPurchase thunks; restricted status dropdown visibility to INVOICE + PENDING purchases; replaced status handler to dispatch appropriate thunk based on selected status.
Tests src/pages/sponsors/sponsor-purchases-tab/__tests__/sponsor-purchases-list.test.js	Added comprehensive test suite validating conditional rendering, dropdown behavior, thunk invocation for status changes, error handling, and grid refresh logic (pagination, search, sorting).

Sequence Diagram

sequenceDiagram
    actor User
    participant Component as SponsorPurchasesTab
    participant Redux as Redux<br/>(Actions/Reducers)
    participant API as Payment API
    participant Store as Store State

    User->>Component: Select new status in dropdown
    Component->>Redux: Dispatch approveSponsorPurchase<br/>or rejectSponsorPurchase
    
    Redux->>Redux: Dispatch startLoading()
    Redux->>API: PUT/DELETE /payments/{id}/approve<br/>or /cancel with access_token
    
    alt Success
        API-->>Redux: 200 OK
        Redux->>Store: Dispatch SPONSOR_PURCHASE_STATUS_UPDATED<br/>{ paymentId, status }
        Redux->>Redux: Dispatch snackbarSuccessHandler<br/>(translated message)
    else Failure
        API-->>Redux: Error response
        Redux->>Redux: Log console error
    end
    
    Redux->>Redux: Dispatch stopLoading()
    Redux->>Component: Update with new state
    Component->>User: Re-render with updated<br/>purchase status

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• feat: sponsor purchases tab #757 — Introduces the initial sponsor purchases feature that this PR extends with approve/reject thunks, status-update action/reducer, and tests.
• feat: sponsor media upload tab #783 — Modifies PURCHASE_STATUS constant in src/utils/constants.js, which overlaps with this PR's correction to the CANCELLED value spelling.

Suggested reviewers

• smarcet
• tomrndom

Poem

🐰 With whiskers twitched and code in place,
We guide each payment through its race,
Approve, reject with thunks so bright,
Status flows from morning to night,
Our tests hop forth through every case,
Purchase kingdom finds its grace! 🎉

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: sponsor purchases status update' accurately and concisely describes the primary change—adding status update functionality for sponsor purchases across actions, components, reducers, and tests.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/sponsor-purchases-tab-actions

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

src/actions/sponsor-purchases-actions.js (1)

139-160: Same pattern as approveSponsorPurchase — verify action dispatch timing.

The rejectSponsorPurchase thunk follows the same pattern. Ensure the deleteRequest helper dispatches the success action only after the API call succeeds.

Consider replacing .catch(console.log) with .catch(console.error) for clearer error logging.

🔧 Minor improvement for error logging

     .then(() => {
       dispatch(
         snackbarSuccessHandler({
           title: T.translate("general.success"),
           html: T.translate("edit_sponsor.purchase_tab.status_updated")
         })
       );
     })
-    .catch(console.log) // need to catch promise reject
+    .catch(console.error) // need to catch promise reject
     .finally(() => {
       dispatch(stopLoading());
     });

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/actions/sponsor-purchases-actions.js` around lines 139 - 160, The thunk
rejectSponsorPurchase currently passes a success action into deleteRequest which
may be dispatched prematurely; instead ensure the
SPONSOR_PURCHASE_STATUS_UPDATED action is only dispatched after the API call
resolves — either by (a) updating deleteRequest to dispatch the provided action
only on successful response, or (b) removing the action argument and dispatching
createAction(SPONSOR_PURCHASE_STATUS_UPDATED)({ paymentId, status:
PURCHASE_STATUS.CANCELLED }) inside the .then() of rejectSponsorPurchase (same
pattern as approveSponsorPurchase); also replace .catch(console.log) with
.catch(console.error) to improve error logging.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/actions/sponsor-purchases-actions.js`:
- Around line 139-160: The thunk rejectSponsorPurchase currently passes a
success action into deleteRequest which may be dispatched prematurely; instead
ensure the SPONSOR_PURCHASE_STATUS_UPDATED action is only dispatched after the
API call resolves — either by (a) updating deleteRequest to dispatch the
provided action only on successful response, or (b) removing the action argument
and dispatching createAction(SPONSOR_PURCHASE_STATUS_UPDATED)({ paymentId,
status: PURCHASE_STATUS.CANCELLED }) inside the .then() of rejectSponsorPurchase
(same pattern as approveSponsorPurchase); also replace .catch(console.log) with
.catch(console.error) to improve error logging.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 53ff5707-d634-4f0a-a24b-9c1d5dbbebb7

📥 Commits

Reviewing files that changed from the base of the PR and between e471e62 and 506dcc6.

📒 Files selected for processing (7)

• .env.example
• src/actions/sponsor-purchases-actions.js
• src/i18n/en.json
• src/pages/sponsors/sponsor-purchases-tab/__tests__/sponsor-purchases-list.test.js
• src/pages/sponsors/sponsor-purchases-tab/index.js
• src/reducers/sponsors/sponsor-page-purchase-list-reducer.js
• src/utils/constants.js