feat: sponsor purchases tab #757
Conversation
📝 WalkthroughWalkthroughAdds a sponsor purchases feature: new Redux action and reducer, a React tab component to view/manage sponsor purchases, a PURCHASE_STATUS constant, a translation group, a minor .env.example scope update, and wiring of the reducer into the store. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Tab as SponsorPurchasesTab
participant Actions as Redux Actions
participant Store as Redux Store/Reducer
participant API as Purchases API
User->>Tab: mount / interact (search, sort, paginate)
Tab->>Actions: dispatch getSponsorPurchases(term,page,perPage,order,orderDir)
Actions->>Store: dispatch startLoading()
Actions->>Store: dispatch REQUEST_SPONSOR_PURCHASES
Actions->>API: GET /summits/:id/sponsors/:id/purchases?filter[]...&page=...&order=...
API-->>Actions: 200 (purchases, totalCount)
Actions->>Store: dispatch RECEIVE_SPONSOR_PURCHASES (normalized, formatted)
Store-->>Tab: updated purchases, pagination, totals
Actions->>Store: dispatch stopLoading()
User->>Tab: change status (Select for PENDING)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested Reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 Fix all issues with AI agents
In `@src/actions/sponsor-purchases-actions.js`:
- Around line 72-81: The API call initiated via
getRequest(createAction(REQUEST_SPONSOR_PURCHASES),
createAction(RECEIVE_SPONSOR_PURCHASES), ...)(params)(dispatch) currently only
uses .then(), so stopLoading() is never dispatched on errors; update the promise
chain to ensure stopLoading() runs on both success and failure (use .finally()
to dispatch stopLoading() or add a .catch(err => { /* handle or dispatch error
*/ }) that dispatches an error action or logs via authErrorHandler and then
rethrows or returns, followed by .finally(() => dispatch(stopLoading()))),
referencing the getRequest call, authErrorHandler, and stopLoading dispatch in
sponsor-purchases-actions.js.
In `@src/i18n/en.json`:
- Around line 2472-2480: The translation key mismatch: the component
SponsorPurchasesTab calls T.translate("edit_sponsor.purchase_tab.first") but the
i18n defines "purchase_tab.order"; update the component to use the existing key
by replacing uses of T.translate("edit_sponsor.purchase_tab.first") with
T.translate("edit_sponsor.purchase_tab.order") (or alternatively rename the
translation key from "order" to "first" in the en.json), ensuring the change
addresses all occurrences in SponsorPurchasesTab (e.g., the header rendering
near the use of T.translate) so the column header displays correctly.
In `@src/pages/sponsors/edit-sponsor-page.js`:
- Around line 229-231: The SponsorPurchasesTab is receiving unused props
(sponsor and summitId) in the CustomTabPanel; remove these unused props from the
component invocation (change <SponsorPurchasesTab sponsor={entity}
summitId={currentSummit.id} /> to <SponsorPurchasesTab />) and ensure any code
in SponsorPurchasesTab (Redux-connected component) continues to pull sponsor.id
and currentSummit.id from currentSponsorState and currentSummitState;
alternatively, if you intended to pass props through, update the Redux
action/selectors inside SponsorPurchasesTab to accept and use the incoming
sponsor and summitId props (identify code in SponsorPurchasesTab and the actions
it calls to wire props through).
In `@src/pages/sponsors/sponsor-purchases-tab/index.js`:
- Around line 78-80: handleStatusChange currently only receives the new status
(stat) and lacks context about which purchase to update; change its signature to
accept the purchase identifier (e.g., handleStatusChange(purchaseId, stat)) and
update every onChange usage (e.g., in the row render where you map purchases) to
pass the current row's id along with the new status. Inside handleStatusChange
use the purchaseId to call the API/update state for that specific record;
reference the existing handleStatusChange function and the onChange handlers
inside the purchase rows to locate and update the usages.
In `@src/reducers/sponsors/sponsor-page-purchase-list-reducer.js`:
- Around line 24-33: DEFAULT_STATE's order property is inconsistent with the
action default (order = "id") and can cause unexpected sorting; update
DEFAULT_STATE (the object named DEFAULT_STATE in
sponsor-page-purchase-list-reducer.js) to set order: "id" so it matches the
default in sponsor-purchases-actions.js (the action parameter default) to ensure
consistent initial sort behavior.
- Around line 46-54: In the reducer in sponsor-page-purchase-list-reducer.js
remove the orphan property forms: [] from the returned state object (the return
that spreads ...state and sets order, orderDir, currentPage, perPage, term) so
the state shape matches DEFAULT_STATE and other sponsor purchases logic; simply
delete the forms key from that returned object and leave the other properties
unchanged.
- Around line 63-70: The reducer builds purchases from payload.response.data but
maps a.order_number to the property order, while the table expects columnKey
"number"; change the mapping in the purchases creation (inside
payload.response.data.map) to set number: a.order_number (instead of order:
a.order_number) so each item has a "number" property that matches the table
column; keep the rest of the mapped fields (amount, purchased) unchanged.
🧹 Nitpick comments (2)
src/pages/sponsors/sponsor-purchases-tab/index.js (2)
44-46: Consider addinggetSponsorPurchasesto the dependency array.While the current implementation works because
getSponsorPurchasesis a stable action prop, omitting it from the dependency array can trigger ESLint'sreact-hooks/exhaustive-depswarning.Suggested fix
useEffect(() => { getSponsorPurchases(); - }, []); + }, [getSponsorPurchases]);
70-76: Placeholder handlers for Details and Menu actions.These handlers currently only log to console. Are these planned for a follow-up PR, or should they be implemented in this PR?
If these are planned features, would you like me to help generate skeleton implementations or open issues to track this work?
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
.env.examplesrc/actions/sponsor-purchases-actions.jssrc/i18n/en.jsonsrc/pages/sponsors/edit-sponsor-page.jssrc/pages/sponsors/sponsor-purchases-tab/index.jssrc/reducers/sponsors/sponsor-page-purchase-list-reducer.jssrc/store.jssrc/utils/constants.js
🧰 Additional context used
🧬 Code graph analysis (5)
src/pages/sponsors/sponsor-purchases-tab/index.js (2)
src/actions/sponsor-purchases-actions.js (2)
getSponsorPurchases(32-81)getSponsorPurchases(32-81)src/utils/constants.js (4)
DEFAULT_CURRENT_PAGE(73-73)DEFAULT_CURRENT_PAGE(73-73)PURCHASE_STATUS(238-242)PURCHASE_STATUS(238-242)
src/store.js (2)
src/reducers/sponsors/sponsor-page-purchase-list-reducer.js (1)
sponsorPagePurchaseListReducer(35-83)src/reducers/sponsored_projects/sponsored-project-sponsorship-type-supporting-company-reducer.js (1)
sponsoredProjectSponsorshipTypeSupportingCompanyReducer(37-94)
src/actions/sponsor-purchases-actions.js (1)
src/utils/constants.js (6)
DEFAULT_CURRENT_PAGE(73-73)DEFAULT_CURRENT_PAGE(73-73)DEFAULT_PER_PAGE(75-75)DEFAULT_PER_PAGE(75-75)DEFAULT_ORDER_DIR(91-91)DEFAULT_ORDER_DIR(91-91)
src/reducers/sponsors/sponsor-page-purchase-list-reducer.js (2)
src/actions/sponsor-purchases-actions.js (4)
REQUEST_SPONSOR_PURCHASES(29-29)REQUEST_SPONSOR_PURCHASES(29-29)RECEIVE_SPONSOR_PURCHASES(30-30)RECEIVE_SPONSOR_PURCHASES(30-30)src/utils/constants.js (2)
MILLISECONDS_TO_SECONDS(112-112)MILLISECONDS_TO_SECONDS(112-112)
src/pages/sponsors/edit-sponsor-page.js (1)
src/pages/sponsors/sponsor-purchases-tab/index.js (1)
SponsorPurchasesTab(34-196)
🪛 dotenv-linter (4.0.0)
.env.example
[warning] 15-15: [ValueWithoutQuotes] This value needs to be surrounded in quotes
(ValueWithoutQuotes)
🔇 Additional comments (7)
.env.example (1)
15-15: New API scopes look correct.The addition of
my-cart/read,my-cart/write, andpurchases/readscopes aligns with the sponsor purchases feature requirements. The static analysis warning about missing quotes is a pre-existing pattern in this file (other scope variables are also unquoted), so maintaining consistency is reasonable.src/utils/constants.js (1)
237-242: LGTM!The
PURCHASE_STATUSconstant is well-structured and follows the existing patterns in this file. The Title case values are appropriate for direct display in the UI dropdown.src/store.js (1)
169-169: LGTM!The
sponsorPagePurchaseListReduceris correctly imported and wired into the Redux store. The state key naming (sponsorPagePurchaseListState) follows the established convention used by similar reducers likesponsorPageFormsListStateandsponsorPageCartListState.Also applies to: 258-258
src/pages/sponsors/sponsor-purchases-tab/index.js (1)
157-195: Well-structured component layout.The component properly integrates search, pagination, sorting, and the MuiTable. The Grid2 layout for the header with count and search input is clean.
src/actions/sponsor-purchases-actions.js (3)
49-54: Filter logic looks correct.Using
==for exact match on order number and=@for partial match on email/name is appropriate. The comma-separated format correctly creates an OR condition.
32-47: Action creator follows established patterns.The thunk structure, state access, and dispatch flow are consistent with other actions in the codebase.
75-75: No action needed. Thewindow.PURCHASES_API_URLvariable is properly configured insrc/app.js(line 82) where it is initialized from the environment variableprocess.env.PURCHASES_API_URL. This is a standard and correct pattern for application configuration.Likely an incorrect or invalid review comment.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| return getRequest( | ||
| createAction(REQUEST_SPONSOR_PURCHASES), | ||
| createAction(RECEIVE_SPONSOR_PURCHASES), | ||
| `${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/sponsors/${sponsor.id}/purchases`, | ||
| authErrorHandler, | ||
| { order, orderDir, page, perPage, term } | ||
| )(params)(dispatch).then(() => { | ||
| dispatch(stopLoading()); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
Missing error handling for API failures.
The promise chain only has .then() for success. If the request fails, stopLoading() won't be called, potentially leaving the UI in a loading state.
Suggested fix
return getRequest(
createAction(REQUEST_SPONSOR_PURCHASES),
createAction(RECEIVE_SPONSOR_PURCHASES),
`${window.PURCHASES_API_URL}/api/v1/summits/${currentSummit.id}/sponsors/${sponsor.id}/purchases`,
authErrorHandler,
{ order, orderDir, page, perPage, term }
- )(params)(dispatch).then(() => {
- dispatch(stopLoading());
- });
+ )(params)(dispatch)
+ .then(() => {
+ dispatch(stopLoading());
+ })
+ .catch(() => {
+ dispatch(stopLoading());
+ });
};Alternatively, use .finally():
- )(params)(dispatch).then(() => {
- dispatch(stopLoading());
- });
+ )(params)(dispatch).finally(() => {
+ dispatch(stopLoading());
+ });🤖 Prompt for AI Agents
In `@src/actions/sponsor-purchases-actions.js` around lines 72 - 81, The API call
initiated via getRequest(createAction(REQUEST_SPONSOR_PURCHASES),
createAction(RECEIVE_SPONSOR_PURCHASES), ...)(params)(dispatch) currently only
uses .then(), so stopLoading() is never dispatched on errors; update the promise
chain to ensure stopLoading() runs on both success and failure (use .finally()
to dispatch stopLoading() or add a .catch(err => { /* handle or dispatch error
*/ }) that dispatches an error action or logs via authErrorHandler and then
rethrows or returns, followed by .finally(() => dispatch(stopLoading()))),
referencing the getRequest call, authErrorHandler, and stopLoading dispatch in
sponsor-purchases-actions.js.
| const handleStatusChange = (stat) => { | ||
| console.log("STATUS : ", stat); | ||
| }; |
There was a problem hiding this comment.
Status change handler is missing row context.
handleStatusChange only receives the new status value but not which purchase item to update. When the API call is implemented, you'll need the purchase ID to know which record to update.
Suggested fix
- const handleStatusChange = (stat) => {
- console.log("STATUS : ", stat);
+ const handleStatusChange = (row, newStatus) => {
+ console.log("STATUS : ", row, newStatus);
+ // TODO: dispatch action to update purchase status
};And update the onChange handler:
- onChange={(ev) => handleStatusChange(ev.target.value)}
+ onChange={(ev) => handleStatusChange(row, ev.target.value)}Also applies to: 102-121
🤖 Prompt for AI Agents
In `@src/pages/sponsors/sponsor-purchases-tab/index.js` around lines 78 - 80,
handleStatusChange currently only receives the new status (stat) and lacks
context about which purchase to update; change its signature to accept the
purchase identifier (e.g., handleStatusChange(purchaseId, stat)) and update
every onChange usage (e.g., in the row render where you map purchases) to pass
the current row's id along with the new status. Inside handleStatusChange use
the purchaseId to call the API/update state for that specific record; reference
the existing handleStatusChange function and the onChange handlers inside the
purchase rows to locate and update the usages.
| const DEFAULT_STATE = { | ||
| purchases: [], | ||
| order: "order", | ||
| orderDir: 1, | ||
| currentPage: 1, | ||
| lastPage: 1, | ||
| perPage: 10, | ||
| totalCount: 0, | ||
| term: "" | ||
| }; |
There was a problem hiding this comment.
Inconsistent default order value.
The default order: "order" here doesn't match the action's default of order = "id" in sponsor-purchases-actions.js (line 37). This could cause unexpected sorting behavior on initial load if the state's order value is used before the first fetch completes.
Suggested fix
const DEFAULT_STATE = {
purchases: [],
- order: "order",
+ order: "id",
orderDir: 1,📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const DEFAULT_STATE = { | |
| purchases: [], | |
| order: "order", | |
| orderDir: 1, | |
| currentPage: 1, | |
| lastPage: 1, | |
| perPage: 10, | |
| totalCount: 0, | |
| term: "" | |
| }; | |
| const DEFAULT_STATE = { | |
| purchases: [], | |
| order: "id", | |
| orderDir: 1, | |
| currentPage: 1, | |
| lastPage: 1, | |
| perPage: 10, | |
| totalCount: 0, | |
| term: "" | |
| }; |
🤖 Prompt for AI Agents
In `@src/reducers/sponsors/sponsor-page-purchase-list-reducer.js` around lines 24
- 33, DEFAULT_STATE's order property is inconsistent with the action default
(order = "id") and can cause unexpected sorting; update DEFAULT_STATE (the
object named DEFAULT_STATE in sponsor-page-purchase-list-reducer.js) to set
order: "id" so it matches the default in sponsor-purchases-actions.js (the
action parameter default) to ensure consistent initial sort behavior.
| return { | ||
| ...state, | ||
| order, | ||
| orderDir, | ||
| forms: [], | ||
| currentPage: page, | ||
| perPage, | ||
| term | ||
| }; |
There was a problem hiding this comment.
Remove orphan forms property.
forms: [] is not part of DEFAULT_STATE and doesn't appear to be used anywhere in the sponsor purchases flow. This looks like a copy-paste artifact from another reducer.
Suggested fix
return {
...state,
order,
orderDir,
- forms: [],
currentPage: page,
perPage,
term
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| return { | |
| ...state, | |
| order, | |
| orderDir, | |
| forms: [], | |
| currentPage: page, | |
| perPage, | |
| term | |
| }; | |
| return { | |
| ...state, | |
| order, | |
| orderDir, | |
| currentPage: page, | |
| perPage, | |
| term | |
| }; |
🤖 Prompt for AI Agents
In `@src/reducers/sponsors/sponsor-page-purchase-list-reducer.js` around lines 46
- 54, In the reducer in sponsor-page-purchase-list-reducer.js remove the orphan
property forms: [] from the returned state object (the return that spreads
...state and sets order, orderDir, currentPage, perPage, term) so the state
shape matches DEFAULT_STATE and other sponsor purchases logic; simply delete the
forms key from that returned object and leave the other properties unchanged.
| const purchases = payload.response.data.map((a) => ({ | ||
| ...a, | ||
| order: a.order_number, | ||
| amount: `$${amountFromCents(a.raw_amount)}`, | ||
| purchased: moment(a.created * MILLISECONDS_TO_SECONDS).format( | ||
| "YYYY/MM/DD HH:mm a" | ||
| ) | ||
| })); |
There was a problem hiding this comment.
Property name mismatch with table column.
The reducer maps a.order_number to order, but the component's table column uses columnKey: "number". This will cause the order column to display empty values.
Suggested fix
const purchases = payload.response.data.map((a) => ({
...a,
- order: a.order_number,
+ number: a.order_number,
amount: `$${amountFromCents(a.raw_amount)}`,
purchased: moment(a.created * MILLISECONDS_TO_SECONDS).format(
"YYYY/MM/DD HH:mm a"
)
}));🤖 Prompt for AI Agents
In `@src/reducers/sponsors/sponsor-page-purchase-list-reducer.js` around lines 63
- 70, The reducer builds purchases from payload.response.data but maps
a.order_number to the property order, while the table expects columnKey
"number"; change the mapping in the purchases creation (inside
payload.response.data.map) to set number: a.order_number (instead of order:
a.order_number) so each item has a "number" property that matches the table
column; keep the rest of the mapped fields (amount, purchased) unchanged.
santipalenque
force-pushed
the
feature/sponsor-purchases-tab
branch
from
7b6b21e to
516695d
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/pages/sponsors/sponsor-purchases-tab/index.js`:
- Around line 82-87: The tableColumns entry uses columnKey "number" but the
reducer maps the value as order: a.order_number, so the column is empty; change
the column's columnKey from "number" to "order" in the tableColumns array so it
matches the reducer mapping (order: a.order_number) and displays the purchase
order number correctly.
♻️ Duplicate comments (1)
src/pages/sponsors/sponsor-purchases-tab/index.js (1)
78-80: Status change handler still missing row context.This issue was flagged in a previous review. The handler needs the purchase ID/row to know which record to update when the API call is implemented.
🧹 Nitpick comments (2)
src/pages/sponsors/sponsor-purchases-tab/index.js (2)
44-46: Consider addinggetSponsorPurchasesto the dependency array or suppressing the lint warning.The empty dependency array
[]withgetSponsorPurchasesused inside the effect may trigger ESLint'sreact-hooks/exhaustive-depswarning. If the intent is to only fetch once on mount (which is valid here), consider adding a disable comment to clarify intent:useEffect(() => { getSponsorPurchases(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []);
70-76: Stub handlers need implementation.
handleDetailsandhandleMenuare currently just logging to console. Consider adding TODO comments or tracking these for follow-up implementation.Would you like me to open issues to track implementing these handlers?
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
.env.examplesrc/actions/sponsor-purchases-actions.jssrc/i18n/en.jsonsrc/pages/sponsors/edit-sponsor-page.jssrc/pages/sponsors/sponsor-purchases-tab/index.jssrc/reducers/sponsors/sponsor-page-purchase-list-reducer.jssrc/store.jssrc/utils/constants.js
🚧 Files skipped from review as they are similar to previous changes (6)
- .env.example
- src/pages/sponsors/edit-sponsor-page.js
- src/actions/sponsor-purchases-actions.js
- src/i18n/en.json
- src/store.js
- src/reducers/sponsors/sponsor-page-purchase-list-reducer.js
🧰 Additional context used
🧬 Code graph analysis (1)
src/pages/sponsors/sponsor-purchases-tab/index.js (3)
src/actions/sponsor-purchases-actions.js (2)
getSponsorPurchases(32-81)getSponsorPurchases(32-81)src/reducers/sponsors/sponsor-page-purchase-list-reducer.js (2)
currentPage(57-61)purchases(63-70)src/utils/constants.js (4)
DEFAULT_CURRENT_PAGE(73-73)DEFAULT_CURRENT_PAGE(73-73)PURCHASE_STATUS(244-248)PURCHASE_STATUS(244-248)
🔇 Additional comments (2)
src/utils/constants.js (1)
243-248: LGTM!The
PURCHASE_STATUSconstant is well-structured and follows the existing patterns in the file (similar toRSVP_STATUS,ReservationStatusPaid). Using an object with named keys provides good discoverability and avoids magic strings throughout the codebase.src/pages/sponsors/sponsor-purchases-tab/index.js (1)
198-204: LGTM!The Redux connection follows standard patterns. Spreading the entire
sponsorPagePurchaseListStateis appropriate given the component consumes most of the state properties.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| const tableColumns = [ | ||
| { | ||
| columnKey: "number", | ||
| header: T.translate("edit_sponsor.purchase_tab.order"), | ||
| sortable: true | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Check the reducer mapping for purchases data structure
rg -n -A 15 "const purchases" src/reducers/sponsors/sponsor-page-purchase-list-reducer.js | head -40Repository: fntechgit/summit-admin
Length of output: 535
🏁 Script executed:
# Also check if there's any mapping of "order" to "number" in the component or elsewhere
rg -n "columnKey.*number" src/pages/sponsors/sponsor-purchases-tab/index.jsRepository: fntechgit/summit-admin
Length of output: 95
🏁 Script executed:
# Check the purchase list reducer more broadly to understand the data shape
cat src/reducers/sponsors/sponsor-page-purchase-list-reducer.jsRepository: fntechgit/summit-admin
Length of output: 2413
Fix column key mismatch for order number.
The reducer maps order: a.order_number (sponsor-page-purchase-list-reducer.js line 65), but this column uses columnKey: "number". The column will display empty values since the property should be order, not number.
Suggested fix
const tableColumns = [
{
- columnKey: "number",
+ columnKey: "order",
header: T.translate("edit_sponsor.purchase_tab.order"),
sortable: true
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const tableColumns = [ | |
| { | |
| columnKey: "number", | |
| header: T.translate("edit_sponsor.purchase_tab.order"), | |
| sortable: true | |
| }, | |
| const tableColumns = [ | |
| { | |
| columnKey: "order", | |
| header: T.translate("edit_sponsor.purchase_tab.order"), | |
| sortable: true | |
| }, |
🤖 Prompt for AI Agents
In `@src/pages/sponsors/sponsor-purchases-tab/index.js` around lines 82 - 87, The
tableColumns entry uses columnKey "number" but the reducer maps the value as
order: a.order_number, so the column is empty; change the column's columnKey
from "number" to "order" in the tableColumns array so it matches the reducer
mapping (order: a.order_number) and displays the purchase order number
correctly.
https://app.clickup.com/t/86b66n5k1
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.