From a383350e8baf3bb10b076c2167b22d1c5acb72a0 Mon Sep 17 00:00:00 2001 From: Anna Date: Mon, 6 Jan 2025 17:46:18 -0500 Subject: [PATCH 01/10] top bar cart designs --- frontend/public/scss/top-app-bar.scss | 7 ++++++- frontend/public/scss/variables.scss | 2 +- frontend/public/src/components/TopBar.js | 2 +- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/frontend/public/scss/top-app-bar.scss b/frontend/public/scss/top-app-bar.scss index 68bc50c034..0cb2b78d6d 100644 --- a/frontend/public/scss/top-app-bar.scss +++ b/frontend/public/scss/top-app-bar.scss @@ -125,13 +125,18 @@ header.site-header { } } +.border-left-top-bar { + border-left: 1px solid $home-page-border-grey; +} + .full-screen-top-menu { display: block; font-size: 14px; line-height: 21px; .top-nav-link { - padding: 13px 10px 13px 20px; + padding: 2px 10px 2px 20px; + margin: 11px 10px 11px 20px; display: inline-block; color: black; text-decoration: none; diff --git a/frontend/public/scss/variables.scss b/frontend/public/scss/variables.scss index ac7a08cec3..6d52904706 100644 --- a/frontend/public/scss/variables.scss +++ b/frontend/public/scss/variables.scss @@ -31,7 +31,7 @@ $brand-darker-bg: #a31f34; $home-page-header-blue: #03152D; $home-page-grey-text: #6F7175; $home-page-grey-lite: #F0F5F7; -$home-page-border-grey: #DFE5EC; +$home-page-border-grey: #B8C2CC; $home-page-dark-blue: #000C1B; $home-page-video-player-blue: #0C8CE9; $home-page-facebook-blue: #395492; diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js index 4bc6166e79..1dd4a94735 100644 --- a/frontend/public/src/components/TopBar.js +++ b/frontend/public/src/components/TopBar.js @@ -68,7 +68,7 @@ const TopBar = ({ currentUser }: Props) => { Catalog From 7ab9403479f8170338f924b2b58f3bc05bbf52fe Mon Sep 17 00:00:00 2001 From: Anna Date: Wed, 8 Jan 2025 18:31:32 -0500 Subject: [PATCH 02/10] adding shopping cart --- frontend/public/src/components/TopBar.js | 3 ++- static/images/shopping-cart-line.svg | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 static/images/shopping-cart-line.svg diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js index 1dd4a94735..2717240784 100644 --- a/frontend/public/src/components/TopBar.js +++ b/frontend/public/src/components/TopBar.js @@ -65,6 +65,7 @@ const TopBar = ({ currentUser }: Props) => {
{currentUser.is_authenticated ? ( <> + { > Catalog - + ) : ( diff --git a/static/images/shopping-cart-line.svg b/static/images/shopping-cart-line.svg new file mode 100644 index 0000000000..3b65e63951 --- /dev/null +++ b/static/images/shopping-cart-line.svg @@ -0,0 +1 @@ + \ No newline at end of file From ac5c806619bcbc709b6b77f2a31648da6d954b31 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 9 Jan 2025 11:04:20 -0500 Subject: [PATCH 03/10] Adding feature flag --- frontend/public/scss/top-app-bar.scss | 23 +++++++++++++- frontend/public/src/components/TopBar.js | 40 ++++++++++++++++++------ 2 files changed, 53 insertions(+), 10 deletions(-) diff --git a/frontend/public/scss/top-app-bar.scss b/frontend/public/scss/top-app-bar.scss index 0cb2b78d6d..f815ce878a 100644 --- a/frontend/public/scss/top-app-bar.scss +++ b/frontend/public/scss/top-app-bar.scss @@ -129,8 +129,29 @@ header.site-header { border-left: 1px solid $home-page-border-grey; } +.shopping-cart-line { + background-image: url("/static/images/shopping-cart-line.svg"); + width: 21px; + height: 21px; + border: none; + background-color: unset; +} + +#cart-count { + border-radius: 12px; + font-size: 12px; + background: #A9081A; + color: #fff; + padding: 3px 6px; + vertical-align: top; + margin-left: -8px; + margin-top: -14px; + font-weight: 400; +} + .full-screen-top-menu { - display: block; + display: flex; + align-items: center; font-size: 14px; line-height: 21px; diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js index 2717240784..b08464a793 100644 --- a/frontend/public/src/components/TopBar.js +++ b/frontend/public/src/components/TopBar.js @@ -10,6 +10,7 @@ import NotificationContainer from "./NotificationContainer" import type { CurrentUser } from "../flow/authTypes" import MixedLink from "./MixedLink" +import { checkFeatureFlag } from "../lib/util" type Props = { currentUser: CurrentUser, @@ -28,6 +29,7 @@ const TopBar = ({ currentUser }: Props) => { return () => clearTimeout(timeout) }, []) + const newCartDesign = checkFeatureFlag("new-cart-design", currentUser) return (
{showComponent ? ( @@ -65,15 +67,35 @@ const TopBar = ({ currentUser }: Props) => {
{currentUser.is_authenticated ? ( <> - - - Catalog - + {newCartDesign ? + (<> + ) @@ -223,7 +223,7 @@ export class CourseProductDetailEnroll extends React.Component< } renderUpgradeEnrollmentDialog() { - const { courses } = this.props + const { courses, currentUser } = this.props const courseRuns = courses && courses[0] ? courses[0].courseruns : null const enrollableCourseRuns = courseRuns ? courseRuns.filter( @@ -244,18 +244,14 @@ export class CourseProductDetailEnroll extends React.Component< course.page && course.page.financial_assistance_form_url && !run.approved_flexible_price_exists ? ( -

- - Need financial assistance? - -

+ + Need financial assistance? + ) : null const { upgradeEnrollmentDialogVisibility } = this.state const product = run && run.products ? run.products[0] : null + const newCartDesign = checkFeatureFlag("new-cart-design", currentUser) const canUpgrade = !!(run && run.is_upgradable && product) return upgradableCourseRuns.length > 0 || enrollableCourseRuns.length > 1 ? ( @@ -317,19 +313,20 @@ export class CourseProductDetailEnroll extends React.Component<

- Certificate track:{" "} - - {product && + Certificate track:{" "} + {product && run.is_upgradable && formatLocalePrice(getFlexiblePriceForProduct(product))} - <>
{canUpgrade ? ( - - Payment date:{" "} - {formatPrettyDate(moment(run.upgrade_deadline))} - + <> + + Payment due:{" "} + {formatPrettyDate(moment(run.upgrade_deadline))} + + {needFinancialAssistanceLink} + ) : ( not available @@ -364,7 +361,6 @@ export class CourseProductDetailEnroll extends React.Component< ) : null}

-
{needFinancialAssistanceLink}
{this.getEnrollmentForm(run)}
diff --git a/frontend/public/src/components/Header.js b/frontend/public/src/components/Header.js index 4d763ef38a..4ab558d557 100644 --- a/frontend/public/src/components/Header.js +++ b/frontend/public/src/components/Header.js @@ -10,7 +10,7 @@ import TopBar from "./TopBar" type Props = { currentUser: CurrentUser, - location: ?Location + location: ?Location, } const Header = ({ currentUser, location }: Props) => { diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js index b08464a793..09c558c82f 100644 --- a/frontend/public/src/components/TopBar.js +++ b/frontend/public/src/components/TopBar.js @@ -14,7 +14,7 @@ import { checkFeatureFlag } from "../lib/util" type Props = { currentUser: CurrentUser, - location: ?Location + location: ?Location, } const TopBar = ({ currentUser }: Props) => { @@ -30,6 +30,7 @@ const TopBar = ({ currentUser }: Props) => { }, []) const newCartDesign = checkFeatureFlag("new-cart-design", currentUser) + const cartItemCount = 0 return (
{showComponent ? ( @@ -76,7 +77,7 @@ const TopBar = ({ currentUser }: Props) => { )} aria-label="Cart" /> - {cartCount ? {cartCount} : null} + {cartItemCount ? {cartItemCount} : null} { } const mapStateToProps = createStructuredSelector({ - currentUser: currentUserSelector + currentUser: currentUserSelector, }) const mapDispatchToProps = { From d08ea6719db37f0a4c7f1ad4a63afbe5a00cfc0b Mon Sep 17 00:00:00 2001 From: Anna Date: Fri, 10 Jan 2025 07:53:47 -0500 Subject: [PATCH 05/10] little fixes --- frontend/public/scss/common.scss | 1 + .../public/scss/product-page/product-details.scss | 14 +++++--------- .../src/components/CourseProductDetailEnroll.js | 4 ++-- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/frontend/public/scss/common.scss b/frontend/public/scss/common.scss index b534f321ed..846b7d7c9d 100644 --- a/frontend/public/scss/common.scss +++ b/frontend/public/scss/common.scss @@ -354,6 +354,7 @@ button.btn.btn-gradient-red-to-blue:hover, a.btn.btn-gradient-red-to-blue:hover, border-color: $home-page-header-blue; background: $home-page-header-blue !important; color: white !important; + transition: 0.25s; } button.btn.btn-gradient-white-to-blue, a.btn.btn-gradient-white-to-blue { diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss index fcd9e60f19..3aa623f7e7 100644 --- a/frontend/public/scss/product-page/product-details.scss +++ b/frontend/public/scss/product-page/product-details.scss @@ -475,7 +475,6 @@ body.new-design { box-shadow: none; border: 1px solid #DFE5EC; background: rgba(3, 21, 45, 0.05); -; } .enroll-now-free:focus-visible { border-radius: 0; @@ -490,9 +489,9 @@ body.new-design { background-color: #A41E34; color: white; text-align: left; - background-image: url('/static/images/arrow-line-right.png'); - background-position: 90% 50%; - background-repeat: no-repeat; + background-image: url('/static/images/arrow-line-right.png') !important; + background-position: 90% 50% !important; + background-repeat: no-repeat !important; padding: 14px 22px; } .btn-upgrade:focus-visible { @@ -589,15 +588,12 @@ body.new-design { } div.upgrade-options-row { - margin: 30px 1px 5px 1px; - + margin: 23px 1px 8px 1px; display: flex; - padding: 0px; + padding: 0; justify-content: space-evenly; align-items: center; align-self: stretch; - - // border-bottom: 1px solid var(--BorderGrey, #DFE5EC); border: none; div { diff --git a/frontend/public/src/components/CourseProductDetailEnroll.js b/frontend/public/src/components/CourseProductDetailEnroll.js index 052d4b74c3..3c8385d70f 100644 --- a/frontend/public/src/components/CourseProductDetailEnroll.js +++ b/frontend/public/src/components/CourseProductDetailEnroll.js @@ -201,7 +201,7 @@ export class CourseProductDetailEnroll extends React.Component<
From b8f8cb25e40f3a13399de062df53048aef676b55 Mon Sep 17 00:00:00 2001 From: Anna Date: Fri, 10 Jan 2025 11:00:47 -0500 Subject: [PATCH 07/10] format --- .../components/CourseProductDetailEnroll.js | 26 ++++++++---- frontend/public/src/components/Header.js | 2 +- frontend/public/src/components/TopBar.js | 42 ++++++++++--------- frontend/public/src/containers/App.js | 2 +- 4 files changed, 42 insertions(+), 30 deletions(-) diff --git a/frontend/public/src/components/CourseProductDetailEnroll.js b/frontend/public/src/components/CourseProductDetailEnroll.js index 607685d407..1469c5fa73 100644 --- a/frontend/public/src/components/CourseProductDetailEnroll.js +++ b/frontend/public/src/components/CourseProductDetailEnroll.js @@ -11,7 +11,11 @@ import { Modal, ModalBody, ModalHeader } from "reactstrap" import Loader from "./Loader" import { routes } from "../lib/urls" -import {getFlexiblePriceForProduct, formatLocalePrice, checkFeatureFlag} from "../lib/util" +import { + getFlexiblePriceForProduct, + formatLocalePrice, + checkFeatureFlag +} from "../lib/util" import { EnrollmentFlaggedCourseRun } from "../flow/courseTypes" import { coursesSelector, @@ -244,8 +248,12 @@ export class CourseProductDetailEnroll extends React.Component< course.page && course.page.financial_assistance_form_url && !run.approved_flexible_price_exists ? ( - + Need financial assistance? ) : null @@ -313,10 +321,10 @@ export class CourseProductDetailEnroll extends React.Component<

- Certificate track:{" "} + Certificate track: {product && - run.is_upgradable && - formatLocalePrice(getFlexiblePriceForProduct(product))} + run.is_upgradable && + formatLocalePrice(getFlexiblePriceForProduct(product))} <>
{canUpgrade ? ( @@ -339,7 +347,9 @@ export class CourseProductDetailEnroll extends React.Component<

- +
Add to Cart
diff --git a/frontend/public/src/components/Header.js b/frontend/public/src/components/Header.js index 4ab558d557..4d763ef38a 100644 --- a/frontend/public/src/components/Header.js +++ b/frontend/public/src/components/Header.js @@ -10,7 +10,7 @@ import TopBar from "./TopBar" type Props = { currentUser: CurrentUser, - location: ?Location, + location: ?Location } const Header = ({ currentUser, location }: Props) => { diff --git a/frontend/public/src/components/TopBar.js b/frontend/public/src/components/TopBar.js index 09c558c82f..4a479ee1af 100644 --- a/frontend/public/src/components/TopBar.js +++ b/frontend/public/src/components/TopBar.js @@ -14,7 +14,7 @@ import { checkFeatureFlag } from "../lib/util" type Props = { currentUser: CurrentUser, - location: ?Location, + location: ?Location } const TopBar = ({ currentUser }: Props) => { @@ -68,36 +68,38 @@ const TopBar = ({ currentUser }: Props) => {
{currentUser.is_authenticated ? ( <> - {newCartDesign ? - (<> + {newCartDesign ? ( + <>