@@ -250,7 +275,10 @@ const PageTemplatePopup = ({ pageTemplate, onClose, onSave, sponsorships }) => {
PageTemplatePopup.propTypes = {
onClose: PropTypes.func.isRequired,
onSave: PropTypes.func.isRequired,
- sponsorships: PropTypes.array
+ sponsorships: PropTypes.array,
+ sponsorshipIds: PropTypes.array,
+ summitId: PropTypes.number,
+ sponsorId: PropTypes.number
};
export default PageTemplatePopup;
diff --git a/src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js b/src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js
index 77d604d3e..dce024f88 100644
--- a/src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js
+++ b/src/pages/sponsors/sponsor-forms-tab/components/add-sponsor-form-template-popup/index.js
@@ -75,18 +75,16 @@ const AddSponsorFormTemplatePopup = ({
});
useEffect(() => {
- if (open) {
- getSponsorForms(
- term,
- currentPage,
- FIVE_PER_PAGE,
- order,
- orderDir,
- false,
- sponsorshipTypeIds
- );
- }
- }, [open]);
+ getSponsorForms(
+ term,
+ currentPage,
+ FIVE_PER_PAGE,
+ order,
+ orderDir,
+ false,
+ sponsorshipTypeIds
+ );
+ }, []);
const handlePageChange = (page) => {
getSponsorForms(
diff --git a/src/pages/sponsors/sponsor-pages-tab/__tests__/sponsor-pages-tab.test.js b/src/pages/sponsors/sponsor-pages-tab/__tests__/sponsor-pages-tab.test.js
new file mode 100644
index 000000000..10d610185
--- /dev/null
+++ b/src/pages/sponsors/sponsor-pages-tab/__tests__/sponsor-pages-tab.test.js
@@ -0,0 +1,222 @@
+import React from "react";
+import userEvent from "@testing-library/user-event";
+import { act, screen, waitFor } from "@testing-library/react";
+import SponsorPagesTab from "../index";
+import { renderWithRedux } from "../../../../utils/test-utils";
+import { DEFAULT_STATE as sponsorPagesDefaultState } from "../../../../reducers/sponsors/sponsor-page-pages-list-reducer";
+import { getSponsorCustomizedPage } from "../../../../actions/sponsor-pages-actions";
+
+// Mocks
+
+jest.mock(
+ "../components/add-sponsor-page-template-popup",
+ () =>
+ function MockAddSponsorPageTemplatePopup({ onClose, onSubmit }) {
+ return (
+
+
+
+
+ );
+ }
+);
+
+jest.mock(
+ "../../../sponsors-global/page-templates/page-template-popup",
+ () =>
+ function MockPageTemplatePopup({ onClose, onSave, pageTemplate }) {
+ return (
+
+ {pageTemplate?.id}
+
+
+
+ );
+ }
+);
+
+jest.mock("../../../../actions/sponsor-pages-actions", () => ({
+ ...jest.requireActual("../../../../actions/sponsor-pages-actions"),
+ getSponsorManagedPages: jest.fn(() => ({ type: "MOCK_ACTION" })),
+ getSponsorCustomizedPages: jest.fn(() => ({ type: "MOCK_ACTION" })),
+ getSponsorCustomizedPage: jest.fn(
+ () => () => Promise.resolve({ id: 1, name: "Test Page" })
+ ),
+ saveSponsorCustomizedPage: jest.fn(() => () => Promise.resolve()),
+ saveSponsorManagedPage: jest.fn(() => () => Promise.resolve()),
+ resetSponsorPage: jest.fn(() => ({ type: "MOCK_ACTION" }))
+}));
+
+// Helpers
+
+const createSponsor = (overrides = {}) => ({
+ id: 1,
+ sponsorships_collection: { sponsorships: [] },
+ ...overrides
+});
+
+const createCustomizedPage = (id, overrides = {}) => ({
+ id,
+ code: `CODE-${id}`,
+ name: `Page ${id}`,
+ is_archived: false,
+ ...overrides
+});
+
+const defaultState = {
+ sponsorPagePagesListState: {
+ ...sponsorPagesDefaultState,
+ managedPages: {
+ pages: [],
+ totalItems: 0,
+ currentPage: 1,
+ perPage: 10,
+ order: "id",
+ orderDir: 1
+ },
+ customizedPages: {
+ pages: [],
+ totalItems: 0,
+ currentPage: 1,
+ perPage: 10,
+ order: "id",
+ orderDir: 1
+ },
+ hideArchived: false,
+ term: ""
+ }
+};
+
+describe("SponsorPagesTab", () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ });
+
+ describe("Component", () => {
+ it("should open page popup when new page button is clicked", async () => {
+ renderWithRedux(
+ ,
+ { initialState: defaultState }
+ );
+
+ const newPageButton = screen.getByText("edit_sponsor.pages_tab.new_page");
+ await act(async () => {
+ await userEvent.click(newPageButton);
+ });
+
+ expect(screen.getByTestId("page-template-popup")).toBeInTheDocument();
+ });
+
+ it("should close page popup and reset form when close is clicked", async () => {
+ renderWithRedux(
+ ,
+ { initialState: defaultState }
+ );
+
+ const newPageButton = screen.getByText("edit_sponsor.pages_tab.new_page");
+ await act(async () => {
+ await userEvent.click(newPageButton);
+ });
+
+ expect(screen.getByTestId("page-template-popup")).toBeInTheDocument();
+
+ const closeButton = screen.getByText("Close");
+ await act(async () => {
+ await userEvent.click(closeButton);
+ });
+
+ expect(
+ screen.queryByTestId("page-template-popup")
+ ).not.toBeInTheDocument();
+ });
+
+ it("should call getSponsorCustomizedPage and open popup when edit is clicked", async () => {
+ renderWithRedux(
+ ,
+ {
+ initialState: {
+ sponsorPagePagesListState: {
+ ...defaultState.sponsorPagePagesListState,
+ customizedPages: {
+ ...defaultState.sponsorPagePagesListState.customizedPages,
+ pages: [createCustomizedPage(1)],
+ totalItems: 1
+ }
+ }
+ }
+ }
+ );
+
+ const editButton = screen.getByTestId("EditIcon").closest("button");
+ await act(async () => {
+ await userEvent.click(editButton);
+ });
+
+ expect(getSponsorCustomizedPage).toHaveBeenCalledWith(1);
+ await waitFor(() => {
+ expect(screen.getByTestId("page-template-popup")).toBeInTheDocument();
+ });
+ });
+
+ it("should refresh customized pages list after save", async () => {
+ const {
+ getSponsorCustomizedPages
+ } = require("../../../../actions/sponsor-pages-actions");
+
+ renderWithRedux(
+ ,
+ {
+ initialState: {
+ sponsorPagePagesListState: {
+ ...defaultState.sponsorPagePagesListState,
+ customizedPages: {
+ ...defaultState.sponsorPagePagesListState.customizedPages,
+ pages: [createCustomizedPage(1)],
+ totalItems: 1
+ }
+ }
+ }
+ }
+ );
+
+ const editButton = screen.getByTestId("EditIcon").closest("button");
+ await act(async () => {
+ await userEvent.click(editButton);
+ });
+
+ await waitFor(() => {
+ expect(screen.getByTestId("page-template-popup")).toBeInTheDocument();
+ });
+
+ const saveButton = screen.getByText("Save");
+ await act(async () => {
+ await userEvent.click(saveButton);
+ });
+
+ await waitFor(() => {
+ expect(getSponsorCustomizedPages).toHaveBeenCalledTimes(2);
+ });
+ expect(
+ screen.queryByTestId("page-template-popup")
+ ).not.toBeInTheDocument();
+ });
+ });
+});
diff --git a/src/pages/sponsors/sponsor-pages-tab/index.js b/src/pages/sponsors/sponsor-pages-tab/index.js
index 5ca762e97..9365f6cc2 100644
--- a/src/pages/sponsors/sponsor-pages-tab/index.js
+++ b/src/pages/sponsors/sponsor-pages-tab/index.js
@@ -26,13 +26,17 @@ import AddIcon from "@mui/icons-material/Add";
import {
getSponsorManagedPages,
getSponsorCustomizedPages,
- saveSponsorManagedPage
+ saveSponsorManagedPage,
+ saveSponsorCustomizedPage,
+ getSponsorCustomizedPage,
+ resetSponsorPage
} from "../../../actions/sponsor-pages-actions";
import CustomAlert from "../../../components/mui/custom-alert";
import SearchInput from "../../../components/mui/search-input";
import MuiTable from "../../../components/mui/table/mui-table";
import { DEFAULT_CURRENT_PAGE } from "../../../utils/constants";
import AddSponsorPageTemplatePopup from "./components/add-sponsor-page-template-popup";
+import PageTemplatePopup from "../../sponsors-global/page-templates/page-template-popup";
const SponsorPagesTab = ({
sponsor,
@@ -41,9 +45,14 @@ const SponsorPagesTab = ({
hideArchived,
managedPages,
customizedPages,
+ summitTZ,
+ currentEditPage,
getSponsorManagedPages,
+ saveSponsorManagedPage,
getSponsorCustomizedPages,
- saveSponsorManagedPage
+ saveSponsorCustomizedPage,
+ getSponsorCustomizedPage,
+ resetSponsorPage
}) => {
const [openPopup, setOpenPopup] = useState(null);
@@ -148,7 +157,11 @@ const SponsorPagesTab = ({
};
const handleUsingTemplate = () => {
- setOpenPopup("template");
+ setOpenPopup("usingTemplate");
+ };
+
+ const handleAddPage = () => {
+ setOpenPopup("pagePopup");
};
const handleArchiveCustomizedPage = (item) =>
@@ -166,7 +179,7 @@ const SponsorPagesTab = ({
};
const handleCustomizedEdit = (item) => {
- console.log("EDIT CUSTOMIZED ", item);
+ getSponsorCustomizedPage(item.id).then(() => setOpenPopup("pagePopup"));
};
const handleCustomizedDelete = (itemId) => {
@@ -194,10 +207,39 @@ const SponsorPagesTab = ({
const handleSaveManagedPageFromTemplate = (entity) => {
saveSponsorManagedPage(entity)
- .then(() => getSponsorManagedPages())
+ .then(() => {
+ const { perPage, order, orderDir } = managedPages;
+ getSponsorManagedPages(
+ term,
+ DEFAULT_CURRENT_PAGE,
+ perPage,
+ order,
+ orderDir
+ );
+ })
.finally(() => setOpenPopup(null));
};
+ const handleSaveCustomizedPage = (entity) => {
+ saveSponsorCustomizedPage(entity)
+ .then(() => {
+ const { perPage, order, orderDir } = customizedPages;
+ getSponsorCustomizedPages(
+ term,
+ DEFAULT_CURRENT_PAGE,
+ perPage,
+ order,
+ orderDir
+ );
+ })
+ .finally(() => setOpenPopup(null));
+ };
+
+ const handleClosePagePopup = () => {
+ resetSponsorPage();
+ setOpenPopup(null);
+ };
+
const baseColumns = (name) => [
{
columnKey: "name",
@@ -242,6 +284,10 @@ const SponsorPagesTab = ({
)
];
+ const sponsorshipIds = sponsor.sponsorships_collection.sponsorships.map(
+ (e) => e.id
+ );
+
return (
console.log("open popup new")}
+ onClick={handleAddPage}
startIcon={}
sx={{ height: "36px" }}
>
@@ -354,7 +400,7 @@ const SponsorPagesTab = ({
/>
- {openPopup === "template" && (
+ {openPopup === "usingTemplate" && (
setOpenPopup(null)}
/>
)}
+
+ {openPopup === "pagePopup" && (
+
+ )}
);
};
@@ -373,5 +431,8 @@ const mapStateToProps = ({ sponsorPagePagesListState }) => ({
export default connect(mapStateToProps, {
getSponsorManagedPages,
saveSponsorManagedPage,
- getSponsorCustomizedPages
+ getSponsorCustomizedPage,
+ getSponsorCustomizedPages,
+ saveSponsorCustomizedPage,
+ resetSponsorPage
})(SponsorPagesTab);
diff --git a/src/reducers/sponsors/sponsor-page-pages-list-reducer.js b/src/reducers/sponsors/sponsor-page-pages-list-reducer.js
index d66631d71..9c7f4eb03 100644
--- a/src/reducers/sponsors/sponsor-page-pages-list-reducer.js
+++ b/src/reducers/sponsors/sponsor-page-pages-list-reducer.js
@@ -16,11 +16,22 @@ import {
REQUEST_SPONSOR_MANAGED_PAGES,
RECEIVE_SPONSOR_MANAGED_PAGES,
RECEIVE_SPONSOR_CUSTOMIZED_PAGES,
- REQUEST_SPONSOR_CUSTOMIZED_PAGES
+ REQUEST_SPONSOR_CUSTOMIZED_PAGES,
+ RECEIVE_SPONSOR_CUSTOMIZED_PAGE,
+ RESET_EDIT_PAGE
} from "../../actions/sponsor-pages-actions";
import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
+import { RECEIVE_GLOBAL_SPONSORSHIPS } from "../../actions/sponsor-forms-actions";
+import { PAGES_MODULE_KINDS } from "../../utils/constants";
-const DEFAULT_STATE = {
+const DEFAULT_PAGE = {
+ code: "",
+ name: "",
+ allowed_add_ons: [],
+ modules: []
+};
+
+export const DEFAULT_STATE = {
managedPages: {
pages: [],
order: "name",
@@ -39,6 +50,13 @@ const DEFAULT_STATE = {
perPage: 10,
totalItems: 0
},
+ currentEditPage: DEFAULT_PAGE,
+ sponsorships: {
+ items: [],
+ currentPage: 0,
+ lastPage: 0,
+ total: 0
+ },
term: "",
hideArchived: false,
summitTZ: ""
@@ -130,9 +148,14 @@ const sponsorPagePagesListReducer = (state = DEFAULT_STATE, action) => {
code: a.code,
name: a.name,
allowed_add_ons: a.allowed_add_ons,
- info_mod: a.modules_count.info_modules_count,
- upload_mod: a.modules_count.media_request_modules_count,
- download_mod: a.modules_count.document_download_modules_count
+ is_archived: a.is_archived,
+ info_mod: a.modules.filter((m) => m.kind === PAGES_MODULE_KINDS.INFO)
+ .length,
+ upload_mod: a.modules.filter((m) => m.kind === PAGES_MODULE_KINDS.MEDIA)
+ .length,
+ download_mod: a.modules.filter(
+ (m) => m.kind === PAGES_MODULE_KINDS.DOCUMENT
+ ).length
}));
return {
@@ -146,6 +169,41 @@ const sponsorPagePagesListReducer = (state = DEFAULT_STATE, action) => {
}
};
}
+ case RECEIVE_SPONSOR_CUSTOMIZED_PAGE: {
+ const customizedPage = payload.response;
+ return { ...state, currentEditPage: customizedPage };
+ }
+ case RESET_EDIT_PAGE: {
+ return { ...state, currentEditPage: DEFAULT_PAGE };
+ }
+ case RECEIVE_GLOBAL_SPONSORSHIPS: {
+ const {
+ current_page: currentPage,
+ last_page: lastPage,
+ total,
+ data
+ } = payload.response;
+
+ const newSponsorships = data.map((s) => ({
+ id: s.id,
+ name: s.type.name
+ }));
+
+ const items =
+ currentPage === 1
+ ? newSponsorships
+ : [...state.sponsorships.items, ...newSponsorships];
+
+ return {
+ ...state,
+ sponsorships: {
+ items,
+ currentPage,
+ lastPage,
+ total
+ }
+ };
+ }
default:
return state;
}