Skip to content

Commit

Permalink
feat: add sitewidebanner to publisher
Browse files Browse the repository at this point in the history
  • Loading branch information
AfaqShuaib09 committed Dec 19, 2024
1 parent db74a23 commit ef34879
Show file tree
Hide file tree
Showing 5 changed files with 116 additions and 0 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@ NEW_RELIC_APP_ID=null
NEW_RELIC_LICENSE_KEY=null
APP_ID=''
MFE_CONFIG_API_URL=''
SITEWIDE_BANNER_CONTENT = ""
1 change: 1 addition & 0 deletions .env.development
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,4 @@ ADDITIONAL_METADATA_REQUIRED_FIELDS='{}'
IS_NEW_SLUG_FORMAT_ENABLED='false'
MARKETING_SITE_PREVIEW_URL_ROOT=''
COURSE_URL_SLUGS_PATTERN = '{}'
SITEWIDE_BANNER_CONTENT = ""
50 changes: 50 additions & 0 deletions src/components/SitewideBanner/SitewideBanner.test.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from "react";

Check failure on line 1 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

Strings must use singlequote
import { shallow } from "enzyme";

Check failure on line 2 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

Strings must use singlequote
import Cookies from "js-cookie";

Check failure on line 3 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

'js-cookie' should be listed in the project's dependencies. Run 'npm i -S js-cookie' to add it

Check failure on line 3 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

Strings must use singlequote
import { Alert } from "react-bootstrap";

Check failure on line 4 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

'react-bootstrap' should be listed in the project's dependencies. Run 'npm i -S react-bootstrap' to add it

Check failure on line 4 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

Strings must use singlequote
import SitewideBanner from "./index";

Check failure on line 5 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

Strings must use singlequote

describe("SitewideBanner", () => {

Check failure on line 7 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

Strings must use singlequote
it("renders correctly when visible", () => {

Check failure on line 8 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

Strings must use singlequote
const wrapper = shallow(
<SitewideBanner
message="Dummy Message"
type="success"
dismissible={true}

Check failure on line 13 in src/components/SitewideBanner/SitewideBanner.test.jsx

View workflow job for this annotation

GitHub Actions / tests

Value must be omitted for boolean attributes
cookieName="bannerCookie"
cookieExpiryDays={7}
/>
);

expect(wrapper.find(Alert).props().variant).toBe("success");
expect(wrapper.find(Alert).props().dismissible).toBe(true);
const alertContent = wrapper.find(Alert).dive().find("div").first().html();
expect(alertContent).toContain("Dummy Message");
});

it("calls handleDismiss and sets cookie when dismissed", () => {
const setCookieMock = jest.spyOn(Cookies, "set");
const wrapper = shallow(
<SitewideBanner
message="This is a test message"
type="warning"
dismissible={true}
cookieName="bannerCookie"
cookieExpiryDays={7}
/>
);
wrapper.find(Alert).simulate("close");
expect(wrapper.isEmptyRender()).toBe(true);
expect(setCookieMock).toHaveBeenCalledWith("bannerCookie", "true", {
expires: 7,
});
setCookieMock.mockRestore();
});

it("handles non-dismissible banner correctly", () => {
const wrapper = shallow(
<SitewideBanner message="Non-dismissible message" dismissible={false} />
);
expect(wrapper.find(Alert).props().dismissible).toBe(false);
});
});
55 changes: 55 additions & 0 deletions src/components/SitewideBanner/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
import Cookies from "js-cookie";
import { Alert, Container } from "react-bootstrap";

const SitewideBanner = ({ message, type, dismissible, cookieName, cookieExpiryDays }) => {
const [isVisible, setIsVisible] = useState(true);

useEffect(() => {
if (cookieName && Cookies.get(cookieName)) {
setIsVisible(false);
}
}, [cookieName]);

const handleDismiss = () => {
setIsVisible(false);
if (cookieName) {
Cookies.set(cookieName, "true", { expires: cookieExpiryDays });
}
};

if (!isVisible) {
return null;
}

return (
<Alert
variant={type}
dismissible={dismissible}
onClose={handleDismiss}
className="mb-4"
>
<Container>
<div dangerouslySetInnerHTML={{ __html: message }} />

Check warning on line 34 in src/components/SitewideBanner/index.jsx

View workflow job for this annotation

GitHub Actions / tests

Dangerous property 'dangerouslySetInnerHTML' found
</Container>
</Alert>
);
};

SitewideBanner.propTypes = {
message: PropTypes.string.isRequired,
type: PropTypes.oneOf(["primary", "success", "warning", "danger", "info", "secondary", "light", "dark"]),
dismissible: PropTypes.bool,
cookieName: PropTypes.string,
cookieExpiryDays: PropTypes.number,
};

SitewideBanner.defaultProps = {
type: "info",
dismissible: false,
cookieName: null,
cookieExpiryDays: 7,
};

export default SitewideBanner;
9 changes: 9 additions & 0 deletions src/containers/MainApp/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,19 @@ import EditStaffer from '../EditStaffer';
import CreateCollaborator from '../CreateCollaborator';
import EditCollaborator from '../EditCollaborator';
import EditCourse from '../EditCourse';
import SitewideBanner from '../../components/SitewideBanner';


const MainApp = () => (
<div>
<Header />
<SitewideBanner
message={process.env.SITEWIDE_BANNER_CONTENT || ''}
type="primary"
dismissible
cookieName="sitewidebannerDismissed"
cookieExpiryDays={30}
/>
<main>
<Routes>
<Route path="/course-runs/:courseRunKey" element={<CourseRunRedirectComponent />} />
Expand Down

0 comments on commit ef34879

Please sign in to comment.