Skip to content

Commit

Permalink
ENT-4973: Altering modal's scroll, adding course availability dates (#…
Browse files Browse the repository at this point in the history 
…124)

* fix: altering modal's scroll, adding course dates
  • Loading branch information
@kiram15
kiram15 authored Sep 24, 2021
1 parent 1233205 commit d33f651
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 46 deletions.
100 changes: 57 additions & 43 deletions src/components/catalogCourseInfoModal/CatalogCourseInfoModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Launch } from '@edx/paragon/icons';
import messages from './CatalogCourseInfoModal.messages';

function formatDate(start, end) {
const startDate = (new Date(start)).toLocaleDateString();
const endDate = (new Date(end)).toLocaleDateString();
return `${startDate} - ${endDate}`;
}

const CatalogCourseInfoModal = ({
intl,
isOpen,
Expand All @@ -26,7 +32,10 @@ const CatalogCourseInfoModal = ({
partnerLogoImageUrl,
bannerImageUrl,
marketingUrl,
startDate,
endDate,
}) => (

<>
<div>
<ModalDialog
Expand All @@ -38,55 +47,56 @@ const CatalogCourseInfoModal = ({
isFullscreenOnMobile
className="course-info-modal"
>
<ModalDialog.Hero className="course-info-hero">
<ModalDialog.Hero.Background backgroundSrc={bannerImageUrl} />
</ModalDialog.Hero>

<ModalDialog.Header className="course-info-modal-header">

<ModalDialog.Body className="full-body">
<ModalDialog.Hero>
<ModalDialog.Hero.Background className="course-info-hero" backgroundSrc={bannerImageUrl} />
</ModalDialog.Hero>
<Image className="mr-2 partner-logo-thumbnail" src={partnerLogoImageUrl} rounded />

<ModalDialog.Title as="h1" className="course-info-title">
{courseTitle}
</ModalDialog.Title>
<ModalDialog.Title as="h6" className="course-info-partner">
{courseProvider}
</ModalDialog.Title>

<div className="pricing-data-header">
<ModalDialog.Title className="pricing-data-title">
{intl.formatMessage(messages['catalogCourseInfoModal.pricingTitle'])}
<div className="padded-body">
<ModalDialog.Title as="h1" className="course-info-title">
{courseTitle}
</ModalDialog.Title>
<ModalDialog.Title className="pricing-data-price">
{coursePrice}
<ModalDialog.Title as="h6" className="course-info-partner">
{courseProvider}
</ModalDialog.Title>
</div>
</ModalDialog.Header>

<ModalDialog.Body>
<div className="course-info-associated-catalog-header">
<ModalDialog.Title className="associated-catalogs-text">
{intl.formatMessage(messages['catalogCourseInfoModal.associatedCatalogsTitle'])}
</ModalDialog.Title>
<Badge className="padded-catalog" variant="dark">
{intl.formatMessage(messages['catalogCourseInfoModal.aLaCarteBadge'])}
</Badge>
{ courseAssociatedCatalogs.includes(process.env.EDX_FOR_BUSINESS_TITLE) && (
<Badge className="business-catalog padded-catalog" variant="secondary">
{intl.formatMessage(messages['catalogCourseInfoModal.businessBadge'])}
</Badge>
)}
{ courseAssociatedCatalogs.includes(process.env.EDX_FOR_ONLINE_EDU_TITLE) && (
<Badge className="padded-catalog" variant="light">
{intl.formatMessage(messages['catalogCourseInfoModal.educationBadge'])}
<div className="pricing-data-header">
<ModalDialog.Title className="pricing-data-title">
{intl.formatMessage(messages['catalogCourseInfoModal.pricingTitle'])}
</ModalDialog.Title>
<ModalDialog.Title className="pricing-data-price">
{coursePrice}
</ModalDialog.Title>
</div>

<div className="course-info-associated-catalog-header">
<ModalDialog.Title className="associated-catalogs-text">
{intl.formatMessage(messages['catalogCourseInfoModal.associatedCatalogsTitle'])}
</ModalDialog.Title>
<Badge className="padded-catalog" variant="dark">
{intl.formatMessage(messages['catalogCourseInfoModal.aLaCarteBadge'])}
</Badge>
)}
{ courseAssociatedCatalogs.includes(process.env.EDX_FOR_BUSINESS_TITLE) && (
<Badge className="business-catalog padded-catalog" variant="secondary">
{intl.formatMessage(messages['catalogCourseInfoModal.businessBadge'])}
</Badge>
)}
{ courseAssociatedCatalogs.includes(process.env.EDX_FOR_ONLINE_EDU_TITLE) && (
<Badge className="padded-catalog" variant="light">
{intl.formatMessage(messages['catalogCourseInfoModal.educationBadge'])}
</Badge>
)}
</div>
<p className="course-info-description-title">
{intl.formatMessage(messages['catalogCourseInfoModal.courseDescriptionTitle'])}
</p>
<p className="course-info-description-subtitle">
{intl.formatMessage(messages['catalogCourseInfoModal.availabilityMessage'])}
{formatDate(startDate, endDate)}
</p>
{/* eslint-disable-next-line react/no-danger */}
<div dangerouslySetInnerHTML={{ __html: courseDescription }} />
</div>
<p className="course-info-description-title">
{intl.formatMessage(messages['catalogCourseInfoModal.courseDescriptionTitle'])}
</p>
{/* eslint-disable-next-line react/no-danger */}
<div dangerouslySetInnerHTML={{ __html: courseDescription }} />
</ModalDialog.Body>

<ModalDialog.Footer>
Expand Down Expand Up @@ -124,6 +134,8 @@ CatalogCourseInfoModal.defaultProps = {
partnerLogoImageUrl: '',
bannerImageUrl: '',
marketingUrl: '',
startDate: '',
endDate: '',
onClose: () => {},
};

Expand All @@ -139,6 +151,8 @@ CatalogCourseInfoModal.propTypes = {
partnerLogoImageUrl: PropTypes.string,
bannerImageUrl: PropTypes.string,
marketingUrl: PropTypes.string,
startDate: PropTypes.string,
endDate: PropTypes.string,
};

export default injectIntl(CatalogCourseInfoModal);
5 changes: 5 additions & 0 deletions src/components/catalogCourseInfoModal/CatalogCourseInfoModal.messages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,11 @@ const messages = defineMessages({
defaultMessage: 'A la carte course price',
description: 'Title text for the course pricing display.',
},
'catalogCourseInfoModal.availabilityMessage': {
id: 'catalogCourseInfoModal.availabilityMessage',
defaultMessage: 'Availability period: ',
description: 'Start and end dates for course term.',
},
'catalogCourseInfoModal.moreInfoButton': {
id: 'catalogCourseInfoModal.moreInfoButton',
defaultMessage: 'View course details',
Expand Down
11 changes: 11 additions & 0 deletions src/components/catalogCourseInfoModal/CatalogCourseInfoModal.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ const defaultProps = {
courseDescription: descriptionHtml,
partnerLogoImageUrl: '',
bannerImageUrl: '',
startDate: '2021-09-15T16:00:00Z',
endDate: '2022-04-06T16:00:00Z',
intl: {
formatMessage: (header) => header.defaultMessage,
formatDate: () => {},
Expand Down Expand Up @@ -49,6 +51,15 @@ describe('Course info modal works as expected', () => {
expect(screen.queryByText(descriptionText)).toBeInTheDocument();
});

test('test dates format correctly', () => {
render(
<IntlProvider locale="en">
<CatalogCourseInfoModal {...defaultProps} />
</IntlProvider>,
);
expect(screen.getByText('Availability period: 9/15/2021 - 4/6/2022')).toBeInTheDocument();
});

test('modal is hidden when expected', () => {
const defaultPropsCopy = {};
Object.assign(defaultPropsCopy, defaultProps);
Expand Down
6 changes: 6 additions & 0 deletions src/components/catalogSearchResults/CatalogSearchResults.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,8 @@ export const BaseCatalogSearchResults = ({
const [bannerImageUrl, setBannerImageUrl] = useState();
const [associatedCatalogs, setAssociatedCatalogs] = useState();
const [marketingUrl, setMarketingUrl] = useState();
const [startDate, setStartDate] = useState();
const [endDate, setEndDate] = useState();

const rowClicked = (row) => {
const rowPrice = row.original.first_enrollable_paid_seat_price;
Expand All @@ -108,6 +110,8 @@ export const BaseCatalogSearchResults = ({
setDescription(row.original.full_description);
setBannerImageUrl(row.original.original_image_url);
setMarketingUrl(row.original.marketing_url);
setStartDate(row.original.advertised_course_run.start);
setEndDate(row.original.advertised_course_run.end);
open();
};

Expand Down Expand Up @@ -171,6 +175,8 @@ export const BaseCatalogSearchResults = ({
bannerImageUrl={bannerImageUrl}
courseAssociatedCatalogs={associatedCatalogs}
marketingUrl={marketingUrl}
startDate={startDate}
endDate={endDate}
/>
<div>
<DataTable
Expand Down
16 changes: 13 additions & 3 deletions src/components/catalogs/styles/_enterprise_catalogs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@
padding: 0px 16px;
}

.full-body {
padding: 0px !important;
}

.padded-body {
margin: 180px 0 0 24px;
}

.course-info-title {
position: relative;
width: 70% !important;
Expand All @@ -27,6 +35,7 @@
}

.course-info-hero {
background-position: center;
width: 1140px !important;
height: 300px !important;
}
Expand All @@ -35,7 +44,7 @@
position: absolute;
z-index: 1;
left: 2%;
top: -75px;
top: 230px;
width: 15%;
height: 70%;
max-height: 90px;
Expand All @@ -48,8 +57,8 @@

.pricing-data-header {
position: absolute;
right: 0%;
top: 25%;
right: 5%;
top: 52%;
}

.pricing-data-title {
Expand Down Expand Up @@ -83,6 +92,7 @@
font-weight: bold;
font-weight: 700;
font-size: 22px !important;
margin-bottom: 0;
}

.pgn__modal-close-container {
Expand Down

0 comments on commit d33f651

Please sign in to comment.