Background
This PR adds a new feature to the MemberTable component, allowing users to query the subscription status of each member from Chargebee. A new "Status" column has been introduced, and each row contains a "Query Status" button. When clicked, the button triggers an API call to the backend endpoint /user//subscription to retrieve the subscription status from Chargebee. The result is displayed in a modal dialog.
Features Added:
Status Column: Added a new column labeled "Status" to the MemberTable. Each row contains a button that allows querying the Chargebee subscription status of the member.
API Call: Integrated an API call using axios to fetch the subscription status from the backend for a given user. The status (e.g., active, cancelled) is retrieved from Chargebee and displayed.
Modal Dialog: Implemented a modal popup to display the subscription status result when the button is clicked. The modal shows the status of the selected member's subscription.
Code Changes:
MemberTable.jsx:
Added a new column for the subscription status.
Implemented the handleCheckStatus function, which sends a request to the backend API to fetch the subscription status based on the member's ID.
Used the Ant Design Modal component to display the subscription status.
Managed modal visibility and status using React useState.
Testing:
Tested the status query button for multiple members to ensure it correctly triggers the API call and displays the subscription status in the modal.
Handled cases where the API call fails, showing an error message in the modal if the status could not be fetched.
Background This PR adds a new feature to the MemberTable component, allowing users to query the subscription status of each member from Chargebee. A new "Status" column has been introduced, and each row contains a "Query Status" button. When clicked, the button triggers an API call to the backend endpoint /user//subscription to retrieve the subscription status from Chargebee. The result is displayed in a modal dialog.
Features Added: Status Column: Added a new column labeled "Status" to the MemberTable. Each row contains a button that allows querying the Chargebee subscription status of the member. API Call: Integrated an API call using axios to fetch the subscription status from the backend for a given user. The status (e.g., active, cancelled) is retrieved from Chargebee and displayed. Modal Dialog: Implemented a modal popup to display the subscription status result when the button is clicked. The modal shows the status of the selected member's subscription.
Code Changes: MemberTable.jsx: Added a new column for the subscription status. Implemented the handleCheckStatus function, which sends a request to the backend API to fetch the subscription status based on the member's ID. Used the Ant Design Modal component to display the subscription status. Managed modal visibility and status using React useState.
Testing: Tested the status query button for multiple members to ensure it correctly triggers the API call and displays the subscription status in the modal. Handled cases where the API call fails, showing an error message in the modal if the status could not be fetched.