Skip to content

Commit

Permalink
Adding new cart designs (#2505)
Browse files Browse the repository at this point in the history 
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
  • Loading branch information
@annagav @pre-commit-ci
annagav and pre-commit-ci[bot] authored Jan 14, 2025
1 parent f95078c commit b06be05
Show file tree
Hide file tree
Showing 8 changed files with 196 additions and 59 deletions.
16 changes: 8 additions & 8 deletions .yarn/releases/yarn-3.8.7.cjs
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions frontend/public/scss/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
92 changes: 78 additions & 14 deletions frontend/public/scss/product-page/product-details.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -468,17 +468,53 @@ body.new-design {
text-align: left;
}
.enroll-now-free {
font-size: 16px;
padding: 10px 20px;
font-size: 15px;
font-weight: 400;
text-decoration: underline;
text-decoration: none;
box-shadow: none;
border: none;
border: 1px solid #DFE5EC;
background: rgba(3, 21, 45, 0.05);
}
.enroll-now-free:focus-visible {
border-radius: 0;
outline: 2px #28977e solid;
}

form.new-design {
text-align: right !important;

.btn-upgrade {
width: 86%;
padding: 15px 30px;
background-image: none !important;

div.upgrade-btn-text {
display: inline-block;
margin-left: 16px;
}

strong {
font-size: 20px;
line-height: 24.2px;
}

span {
font-size: 18px;
line-height: 21.78px;
}

i.shopping-cart-line-icon {
background-image: url("/static/images/shopping-cart-line.svg");
display: inline-block;
filter: invert(100%) sepia(95%) saturate(0%) hue-rotate(19deg) brightness(103%) contrast(100%);
vertical-align: super;
width: 24px;
height: 24px;
}
}
}

form {
margin-bottom: 0;

Expand All @@ -487,16 +523,18 @@ 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;
padding: 11px 22px;
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 {
border-color: #82192a;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(177, 65, 82, .5);
}
}
}

ul {
Expand Down Expand Up @@ -546,6 +584,10 @@ body.new-design {
padding: 15px;
margin: 0 1px;

div {
padding: 0;
}

div.certificate-pricing-logo {
img {
width: 40px;
Expand All @@ -558,7 +600,9 @@ body.new-design {
font-size: 18px;
margin-bottom: 0;
span.text-danger {
color: #A41E34 !important;
font-size: 15px;
font-weight: 400;
}
}

Expand All @@ -580,15 +624,12 @@ body.new-design {
}

div.upgrade-options-row {
margin: 30px 1px 20px 1px;

margin: 23px 1px 8px 1px;
display: flex;
padding: 0px;
justify-content: space-between;
padding: 0;
justify-content: space-evenly;
align-items: center;
align-self: stretch;

// border-bottom: 1px solid var(--BorderGrey, #DFE5EC);
border: none;

div {
Expand Down Expand Up @@ -771,6 +812,29 @@ body.new-design {
text-decoration: underline;
margin-bottom: 0;

&:hover{
text-decoration: none !important;
}

a {
color: black;
font-weight: 400;

&:hover{
color: $brand-darker-bg;
text-decoration: none !important;
}
}
}
a.finaid-link {
display: block;
color: #03152D;
font-size: 15px;
font-weight: 400;
line-height: 24px;
text-decoration: underline;


&:hover{
text-decoration: none !important;
}
Expand Down
30 changes: 28 additions & 2 deletions frontend/public/scss/top-app-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,13 +125,39 @@ header.site-header {
}
}

.border-left-top-bar {
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;

.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;
Expand Down
2 changes: 1 addition & 1 deletion frontend/public/scss/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
66 changes: 40 additions & 26 deletions frontend/public/src/components/CourseProductDetailEnroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@ import { Modal, ModalBody, ModalHeader } from "reactstrap"

import Loader from "./Loader"
import { routes } from "../lib/urls"
import { getFlexiblePriceForProduct, formatLocalePrice } from "../lib/util"
import {
getFlexiblePriceForProduct,
formatLocalePrice,
checkFeatureFlag
} from "../lib/util"
import { EnrollmentFlaggedCourseRun } from "../flow/courseTypes"
import {
coursesSelector,
Expand Down Expand Up @@ -201,10 +205,10 @@ export class CourseProductDetailEnroll extends React.Component<
<input type="hidden" name="run" value={run ? run.id : ""} />
<button
type="submit"
className="btn enroll-now enroll-now-free"
className="btn enroll-now enroll-now-free btn-gradient-white-to-blue"
disabled={!run || !run.is_enrollable}
>
<strong>Enroll for Free</strong> without a certificate
Enroll for <strong>Free without a certificate</strong>
</button>
</form>
)
Expand All @@ -223,7 +227,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(
Expand All @@ -244,18 +248,21 @@ export class CourseProductDetailEnroll extends React.Component<
course.page &&
course.page.financial_assistance_form_url &&
!run.approved_flexible_price_exists ? (
<p className="financial-assistance-link">
<a
href={
course && course.page && course.page.financial_assistance_form_url
}
>
Need financial assistance?
</a>
</p>
<a
href={
course && course.page && course.page.financial_assistance_form_url
}
className="finaid-link financial-assistance-link"
>
Need financial assistance?
</a>
) : null
const { upgradeEnrollmentDialogVisibility } = this.state
const product = run && run.products ? run.products[0] : null
const newCartDesign = checkFeatureFlag(
"new-cart-design",
currentUser && currentUser.id ? currentUser.id : "anonymousUser"
)
const canUpgrade = !!(run && run.is_upgradable && product)
return upgradableCourseRuns.length > 0 ||
enrollableCourseRuns.length > 1 ? (
Expand Down Expand Up @@ -317,19 +324,22 @@ export class CourseProductDetailEnroll extends React.Component<
<img src="/static/images/certificates/certificate-logo.svg" />
</div>
<p>
Certificate track:{" "}
<strong id="certificate-price-info">
<strong> Certificate track: </strong>
<span id="certificate-price-info">
{product &&
run.is_upgradable &&
formatLocalePrice(getFlexiblePriceForProduct(product))}
</strong>
</span>
<>
<br />
{canUpgrade ? (
<span className="text-danger">
Payment date:{" "}
{formatPrettyDate(moment(run.upgrade_deadline))}
</span>
<>
<span className="text-danger">
Payment due:{" "}
{formatPrettyDate(moment(run.upgrade_deadline))}
</span>
{needFinancialAssistanceLink}
</>
) : (
<strong id="certificate-price-info">
not available
Expand All @@ -342,7 +352,9 @@ export class CourseProductDetailEnroll extends React.Component<
<form
action="/cart/add/"
method="get"
className="text-center"
className={`text-center ${
newCartDesign ? "new-design" : ""
}`}
>
<input
type="hidden"
Expand All @@ -351,20 +363,22 @@ export class CourseProductDetailEnroll extends React.Component<
/>
<button
type="submit"
className="btn btn-upgrade"
className="btn btn-upgrade btn-gradient-red-to-blue"
disabled={!canUpgrade}
>
<strong>Enroll and Pay</strong>
<br />
<span>for the certificate track</span>
<i className="shopping-cart-line-icon" />
<div className="upgrade-btn-text">
<strong>Add to Cart</strong>
<br />
<span>to get a Certificate</span>
</div>
</button>
</form>
</div>
</div>
</>
) : null}
<div className="row upgrade-options-row">
<div>{needFinancialAssistanceLink}</div>
<div>{this.getEnrollmentForm(run)}</div>
</div>
</ModalBody>
Expand Down
Loading

0 comments on commit b06be05

Please sign in to comment.