From e59c7508aa561d37b052b11b7cd3eaa9fb9a680c Mon Sep 17 00:00:00 2001 From: James Kachel Date: Fri, 19 Jan 2024 14:02:22 -0600 Subject: [PATCH] Removes instances where we've feature flagged the new (current) design (#2064) --- cms/templates/product_page.html | 560 ++++++------------ .../public/src/components/AnonymousMenu.js | 24 +- .../src/components/AnonymousMenu_test.js | 6 +- .../components/CourseProductDetailEnroll.js | 295 ++++----- frontend/public/src/components/Header.js | 25 +- .../components/ProgramProductDetailEnroll.js | 24 +- frontend/public/src/components/TopAppBar.js | 73 --- .../public/src/components/TopAppBar_test.js | 39 -- frontend/public/src/components/UserMenu.js | 14 +- .../public/src/components/UserMenu_test.js | 2 +- .../components/forms/EditProfileForm_test.js | 8 +- .../src/containers/ProductDetailEnrollApp.js | 32 +- .../public/src/containers/UpsellCardApp.js | 144 ----- frontend/public/src/entry/header.js | 17 - main/urls.py | 4 +- main/views.py | 14 - main/views_test.py | 13 - 17 files changed, 335 insertions(+), 959 deletions(-) delete mode 100644 frontend/public/src/components/TopAppBar.js delete mode 100644 frontend/public/src/components/TopAppBar_test.js delete mode 100644 frontend/public/src/containers/UpsellCardApp.js diff --git a/cms/templates/product_page.html b/cms/templates/product_page.html index e0af32176f..a610d4e5f3 100644 --- a/cms/templates/product_page.html +++ b/cms/templates/product_page.html @@ -10,413 +10,231 @@ {% block title %}{{ page.title }} | {{ site_name }}{% endblock %} {% block content %} -{% if new_design %} -
-
-
-
- {# Mobile only #} -
- - {% if page.is_program_page %} -
- {{ page.product.program_type }} -
- {% endif %} -

{{ page.title }}

- {# Description field contents are already rendered wrapped in a

tag #} +

+
+
+
+ {# Mobile only #} +
+ + {% if page.is_program_page %} +
+ {{ page.product.program_type }} +
+ {% endif %} +

{{ page.title }}

+ {# Description field contents are already rendered wrapped in a

tag #} -

- {{ page.description | richtext }} -
+
+ {{ page.description | richtext }} +
+
-
-
-
-
- {# Non-Mobile only #} - - {% if page.is_program_page %} -
- {{ page.product.program_type }} -
- {% endif %} -

{{ page.title }}

- {# Description field contents are already rendered wrapped in a

tag #} - -

- {{ page.description | richtext }} -
-
- +
+
+
{# Non-Mobile only #} -
-
-
-
-
- {% if page.video_url %} - {% videojs page %} - {% else %} - - {% endif %} -
+ {% course_list page.product.required_courses %} + {% endif %} -
- {% if page.is_course_page %} - - {% endif %} + {% if page.product.elective_courses %} +

{{ page.product.elective_title }}

- {% if page.is_program_page %} - - {% endif %} - + {% course_list page.product.elective_courses %} + {% endif %} -
-
+ + {% endif %} - {% if page.is_course_page %} -
-
+ {% if page.what_you_learn %}
+

What you'll learn

+ {{ page.what_you_learn |richtext }} +
{% endif %} + {% if page.prerequisites %}
+

Prerequisites

+ {{ page.prerequisites |richtext }} +
{% endif %} + + {% if instructors or page.faculty_members %} +
+
+

{{ page.faculty_section_title }}

+
    + {% if instructors %} + {% for member in instructors %} +
  • +
    + Featured image for {{ member.instructor_name }} +
    +

    + {{ member.instructor_name }} +

    + {% if member.instructor_title %}

    {{ member.instructor_title }}

    {% endif %} +
    {{ member.instructor_bio_short|safe }}
    +
    +
    +
    • + {% endfor %} + {% endif %} +
- {% endif %} -
+ + {% endif %}
- {% if instructors %} - {% for member in instructors %} - - -
-{% else %} -
-
-
-
-
-
-

{{ page.title }}

- {# Description field contents are already rendered wrapped in a

tag #} - {{ page.description | richtext }} - {% if page.course %} - -

- {% endif %} -
-
-
+
+
+
{% if page.video_url %} - - + {% videojs page %} {% else %} {% endif %}
-
-
-
-
-
-
- {% if start_date %} -
-
start date
-
- {{ start_date|date:"F j, Y" }} -
- {% if course_runs|length > 1 %} - - - + +
+ {% if page.is_course_page %} + {% endif %} + + {% if page.is_program_page %} + + {% endif %} + + +
- {% endif %} - {% if page.length %} -
-
length
-
- {{ page.length }} -
-
- {% endif %} - {% if page.effort %} -
-
effort
-
- {{ page.effort }} -
-
- {% endif %} - {% if finaid_price %} -
-
price
-
- - - ${{finaid_price.1}} - - -
-
- {% endif %} - {% if not finaid_price and page.price %} -
-
price
-
- - {% if page.price.0.value.link %} - {{page.price.0.value.text}} - {% else %} - {{page.price.0.value.text}} - {% endif %} - -
+ + {% if page.is_course_page %} +
+
{% endif %}
-
-
-
-
-
- {% if page.about %} -
-

About this course

- {{ page.about |richtext }} -
- {% endif %} - {% if page.what_you_learn %} -
-

What you’ll learn

- {{ page.what_you_learn |richtext }} -
- {% endif %} - {% if page.prerequisites %} -
-

Prerequisites

- {{ page.prerequisites |richtext }} + {% if instructors %} + {% for member in instructors %} +
- {% if instructors or page.faculty_members %} -
-
-

{{ page.faculty_section_title }}

-
    - {% if instructors %} - {% for member in instructors %} -
  • -
    - -
    -

    {{ member.instructor_name }}

    - {% if member.instructor_title %}

    {{ member.instructor_title }}

    {% endif %} -
    {{ member.instructor_bio_short|safe }}
    +
    +
    +
    + Photo for {{member.instructor_name}}
    -
    -
    • - {% endfor %} - {% endif %} - - {% if page.faculty_members %} - {% for member in page.faculty_members %} -
  • -
    - {{ member.name }} -
    -

    {{ member.value.name }}

    -
    {{ member.value.description }}
    +
    +

    {{member.instructor_name}}

    + {% if member.instructor_title %}

    {{member.instructor_title}}

    {% endif %} + +

    {{member.instructor_bio_short|safe}}

    -
    • - {% endfor %} - {% endif %} -
+
+
+ {% if member.instructor_bio_long %} + {{ member.instructor_bio_long|safe }} + {% endif %} + {% if not member.instructor_bio_long %} + {{ member.instructor_bio_short|safe}} + {% endif %} +
+
+
+
+
- - {% endif %} -
-
-

Who can take this course?

+ {% endfor %} + {% endif %} -

Because of U.S. Office of Foreign Assets Control (OFAC) restrictions and other U.S. federal regulations, learners residing in one or more of the following countries or regions will not be able to register for this course: Iran, Cuba, Syria, North Korea and the Crimea, Donetsk People's Republic and Luhansk People's Republic regions of Ukraine.

-
-
-
-{% endif %} +
+ +
{% endblock %} \ No newline at end of file diff --git a/frontend/public/src/components/AnonymousMenu.js b/frontend/public/src/components/AnonymousMenu.js index 585a675b36..0933bb7e84 100644 --- a/frontend/public/src/components/AnonymousMenu.js +++ b/frontend/public/src/components/AnonymousMenu.js @@ -4,7 +4,6 @@ import React from "react" import MixedLink from "./MixedLink" import { routes } from "../lib/urls" -import { checkFeatureFlag } from "../lib/util" type Props = { mobileView: boolean @@ -12,7 +11,6 @@ type Props = { const AnonymousMenu = ({ mobileView }: Props) => { const identifierPostfix = mobileView ? "Mobile" : "Desktop" - const newDesign = checkFeatureFlag("mitxonline-new-header", "anonymousUser") const makeNavLink = (text: string) => { return mobileView ? ( @@ -24,18 +22,16 @@ const AnonymousMenu = ({ mobileView }: Props) => { } return (
    - {newDesign ? ( -
  • - - {makeNavLink("Catalog")} - -
    • - ) : null} +
  • + + {makeNavLink("Catalog")} + +
  • { assert.equal( shallow() .find("MixedLink") - .at(0) + .at(1) .prop("dest"), routes.login ) @@ -21,7 +21,7 @@ describe("AnonymousMenu component", () => { assert.equal( shallow() .find("MixedLink") - .at(1) + .at(2) .prop("dest"), routes.register.begin ) @@ -31,7 +31,7 @@ describe("AnonymousMenu component", () => { assert.equal( shallow() .find("MixedLink") - .at(1) + .at(2) .prop("dest"), routes.register.begin ) diff --git a/frontend/public/src/components/CourseProductDetailEnroll.js b/frontend/public/src/components/CourseProductDetailEnroll.js index c199ab4aab..a28b143e61 100644 --- a/frontend/public/src/components/CourseProductDetailEnroll.js +++ b/frontend/public/src/components/CourseProductDetailEnroll.js @@ -40,7 +40,6 @@ import { enrollmentMutation, deactivateEnrollmentMutation } from "../lib/queries/enrollment" -import { checkFeatureFlag } from "../lib/util" import AddlProfileFieldsForm from "./forms/AddlProfileFieldsForm" import CourseInfoBox from "./CourseInfoBox" @@ -296,10 +295,10 @@ export class CourseProductDetailEnroll extends React.Component< ) } - getEnrollmentForm(run: EnrollmentFlaggedCourseRun, showNewDesign: boolean) { + getEnrollmentForm(run: EnrollmentFlaggedCourseRun) { const csrfToken = getCookie("csrftoken") - return showNewDesign ? ( + return (
    @@ -307,26 +306,6 @@ export class CourseProductDetailEnroll extends React.Component< Enroll for Free without a certificate
    - ) : ( -
    -
    -
    - - - -
    -
    -
    - -
    -
    ) } @@ -342,7 +321,7 @@ export class CourseProductDetailEnroll extends React.Component< } } - renderUpgradeEnrollmentDialog(showNewDesign: boolean) { + renderUpgradeEnrollmentDialog() { const { courseRuns, courses } = this.props const run = this.resolveCurrentRun() const course = @@ -373,157 +352,94 @@ export class CourseProductDetailEnroll extends React.Component< : [] return run && product ? ( - showNewDesign ? ( - this.cancelEnrollment()} - centered - > - this.cancelEnrollment()}> - {run.title} - - - {upgradableCourseRuns.length > 1 ? ( -
    -
    -
    {this.renderRunSelectorButtons(run)}
    -
    -
    - ) : null} - -
    -
    - Do you want to earn a certificate? + this.cancelEnrollment()} + centered + > + this.cancelEnrollment()}> + {run.title} + + + {upgradableCourseRuns.length > 1 ? ( +
    +
    +
    {this.renderRunSelectorButtons(run)}
    + ) : null} -
    -
    -
      -
    • Certificate is signed by MIT faculty
      • -
    • - {" "} - Demonstrates knowledge and skills taught in this course -
      • -
    • Enhance your college & earn a promotion
      • -
    -
    -
    -
      -
    • Highlight on your resume/CV
      • -
    • Share on your social channels & LinkedIn
      • -
    • - Enhance your college application with an earned certificate - from MIT -
      • -
    -
    +
    +
    + Do you want to earn a certificate?
    +
    -
    -
    -
    - -
    -

    - Certificate track:{" "} - - {product && - formatLocalePrice(getFlexiblePriceForProduct(product))} - - {run.upgrade_deadline ? ( - <> -
    - - Payment date:{" "} - {formatPrettyDate(moment(run.upgrade_deadline))} - - - ) : null} -

    -
    -
    -
    - - -
    -
    +
    +
    +
      +
    • Certificate is signed by MIT faculty
      • +
    • + {" "} + Demonstrates knowledge and skills taught in this course +
      • +
    • Enhance your college & earn a promotion
      • +
    - -
    -
    {needFinancialAssistanceLink}
    -
    {this.getEnrollmentForm(run, showNewDesign)}
    +
    +
      +
    • Highlight on your resume/CV
      • +
    • Share on your social channels & LinkedIn
      • +
    • + Enhance your college application with an earned certificate + from MIT +
      • +
    - - - ) : ( - this.toggleUpgradeDialogVisibility()} - > - this.toggleUpgradeDialogVisibility()}> - Enroll - - -
    -
    - Learn online and get a certificate -
    -
    - {formatLocalePrice(getFlexiblePriceForProduct(product))} -
    -
    -
    -
    -

    - Thank you for choosing an MITx Online course. By paying for - this course, you're joining the most engaged and motivated - learners on your path to a certificate from MITx. -

    - -

    - Your certificate is signed by MIT faculty and demonstrates - that you have gained the knowledge and skills taught in this - course. Showcase your certificate on your resume and social - channels to advance your career, earn a promotion, or enhance - your college applications. -

    - -
    - - -
    - {needFinancialAssistanceLink} +
    + +
    +
    +
    +
    +

    + Certificate track:{" "} + + {product && + formatLocalePrice(getFlexiblePriceForProduct(product))} + + {run.upgrade_deadline ? ( + <> +
    + + Payment date:{" "} + {formatPrettyDate(moment(run.upgrade_deadline))} + + + ) : null} +

    -
    - {this.getEnrollmentForm(run, showNewDesign)} -
    -
    - - FAQs - +
    +
    + + +
    - - - ) +
    + +
    +
    {needFinancialAssistanceLink}
    +
    {this.getEnrollmentForm(run)}
    +
    + + ) : null } @@ -666,11 +582,6 @@ export class CourseProductDetailEnroll extends React.Component< enrollments, enrollmentsIsLoading } = this.props - const showNewDesign = checkFeatureFlag( - "mitxonline-new-product-page", - currentUser && currentUser.id ? currentUser.id : "anonymousUser" - ) - let run, product = null @@ -694,32 +605,30 @@ export class CourseProductDetailEnroll extends React.Component< {this.renderEnrollNowButton(run, product)} {currentUser ? this.renderAddlProfileFieldsModal() : null} - {run ? this.renderUpgradeEnrollmentDialog(showNewDesign) : null} + {run ? this.renderUpgradeEnrollmentDialog() : null} } - {showNewDesign ? ( - <> - { - // $FlowFixMe: isLoading null or undefined - - - - } - - ) : null} + <> + { + // $FlowFixMe: isLoading null or undefined + + + + } + ) : null } diff --git a/frontend/public/src/components/Header.js b/frontend/public/src/components/Header.js index c65dfdef45..85a47292dc 100644 --- a/frontend/public/src/components/Header.js +++ b/frontend/public/src/components/Header.js @@ -4,11 +4,8 @@ import React from "react" import * as Sentry from "@sentry/browser" import posthog from "posthog-js" -import TopAppBar from "./TopAppBar" - import type { CurrentUser } from "../flow/authTypes" import type { Location } from "react-router" -import { checkFeatureFlag } from "../lib/util" import TopBar from "./TopBar" type Props = { @@ -17,9 +14,7 @@ type Props = { } const Header = ({ currentUser, location }: Props) => { - let featureFlagUserId = "anonymousUser" if (currentUser && currentUser.is_authenticated) { - featureFlagUserId = currentUser.id Sentry.configureScope(scope => { scope.setUser({ id: currentUser.id, @@ -37,23 +32,11 @@ const Header = ({ currentUser, location }: Props) => { scope.setUser(null) }) } - const showNewDesign = checkFeatureFlag( - "mitxonline-new-header", - featureFlagUserId + return ( + + + ) - if (showNewDesign) { - return ( - - - - ) - } else { - return ( - - - - ) - } } export default Header diff --git a/frontend/public/src/components/ProgramProductDetailEnroll.js b/frontend/public/src/components/ProgramProductDetailEnroll.js index 453d515c5a..f175eb5981 100644 --- a/frontend/public/src/components/ProgramProductDetailEnroll.js +++ b/frontend/public/src/components/ProgramProductDetailEnroll.js @@ -33,7 +33,6 @@ import { isFinancialAssistanceAvailable } from "../lib/courseApi" import { getCookie } from "../lib/api" import type { User } from "../flow/authTypes" import users, { currentUserSelector } from "../lib/queries/users" -import { checkFeatureFlag } from "../lib/util" import AddlProfileFieldsForm from "./forms/AddlProfileFieldsForm" import ProgramInfoBox from "./ProgramInfoBox" import type { ProgramEnrollment, Program } from "../flow/courseTypes" @@ -383,11 +382,6 @@ export class ProgramProductDetailEnroll extends React.Component< programEnrollmentsLoading } = this.props - const showNewDesign = checkFeatureFlag( - "mitxonline-new-product-page", - currentUser && currentUser.id ? currentUser.id : "anonymousUser" - ) - let enrollment = undefined if (!programEnrollmentsLoading) { @@ -444,16 +438,14 @@ export class ProgramProductDetailEnroll extends React.Component< } - {showNewDesign ? ( - <> - { - // $FlowFixMe: isLoading null or undefined - - - - } - - ) : null} + <> + { + // $FlowFixMe: isLoading null or undefined + + + + } + {currentUser ? this.renderAddlProfileFieldsModal() : null} ) diff --git a/frontend/public/src/components/TopAppBar.js b/frontend/public/src/components/TopAppBar.js deleted file mode 100644 index 9af56173bd..0000000000 --- a/frontend/public/src/components/TopAppBar.js +++ /dev/null @@ -1,73 +0,0 @@ -// @flow -import React from "react" - -import { routes } from "../lib/urls" -import UserMenu from "./UserMenu" -import AnonymousMenu from "./AnonymousMenu" -import InstituteLogo from "./InstituteLogo" -import type { Location } from "react-router" -import NotificationContainer from "./NotificationContainer" - -import type { CurrentUser } from "../flow/authTypes" - -type Props = { - currentUser: CurrentUser, - location: ?Location -} - -const TopAppBar = ({ currentUser }: Props) => ( -
    - - -
    -) - -export default TopAppBar diff --git a/frontend/public/src/components/TopAppBar_test.js b/frontend/public/src/components/TopAppBar_test.js deleted file mode 100644 index 2d919c5b73..0000000000 --- a/frontend/public/src/components/TopAppBar_test.js +++ /dev/null @@ -1,39 +0,0 @@ -// @flow -import React from "react" -import { assert } from "chai" -import { shallow } from "enzyme" - -import TopAppBar from "./TopAppBar" -import { makeUser, makeAnonymousUser } from "../factories/user" - -describe("TopAppBar component", () => { - describe("for anonymous users", () => { - const user = makeAnonymousUser() - it("has a button to collapse the menu", () => { - assert.isOk( - shallow() - .find("button") - .exists() - ) - }) - - it("has an AnonymousMenu component", () => { - assert.isOk( - shallow() - .find("AnonymousMenu") - .exists() - ) - }) - }) - - describe("for logged in users", () => { - const user = makeUser() - it("has a UserMenu component", () => { - assert.isOk( - shallow() - .find("UserMenu") - .exists() - ) - }) - }) -}) diff --git a/frontend/public/src/components/UserMenu.js b/frontend/public/src/components/UserMenu.js index 919fed2aef..464169484e 100644 --- a/frontend/public/src/components/UserMenu.js +++ b/frontend/public/src/components/UserMenu.js @@ -5,7 +5,6 @@ import MixedLink from "./MixedLink" import { routes } from "../lib/urls" import type { User } from "../flow/authTypes" -import { checkFeatureFlag } from "../lib/util" type Props = { /* This is here for future use when we have custom profile avatars */ @@ -13,9 +12,6 @@ type Props = { useScreenOverlay: boolean } -const desktopMenuContainerProps = { - className: "user-menu dropdown" -} const newDesktopMenuContainerProps = { className: "top-user-menu dropdown" } @@ -42,10 +38,6 @@ const UserMenu = ({ currentUser, useScreenOverlay }: Props) => { /* eslint-disable prefer-const */ let menuChildProps: MenuChildProps let dropdownIdentifier = "dropdownMenuButton" - const showNewDesign = checkFeatureFlag( - "mitxonline-new-header", - currentUser && currentUser.id ? currentUser.id : "anonymousUser" - ) const makeNavLink = (text: string) => { return useScreenOverlay ? ( @@ -61,9 +53,7 @@ const UserMenu = ({ currentUser, useScreenOverlay }: Props) => { dropdownIdentifier: dropdownIdentifier.concat("Mobile") } : { - container: showNewDesign - ? newDesktopMenuContainerProps - : desktopMenuContainerProps, + container: newDesktopMenuContainerProps, ul: desktopUListProps, li: desktopListItemProps, dropdownIdentifier: dropdownIdentifier.concat("Desktop") @@ -89,7 +79,7 @@ const UserMenu = ({ currentUser, useScreenOverlay }: Props) => { {makeNavLink("Profile")}
    • - {showNewDesign && useScreenOverlay ? ( + {useScreenOverlay ? (
  • {makeNavLink("Catalog")} diff --git a/frontend/public/src/components/UserMenu_test.js b/frontend/public/src/components/UserMenu_test.js index 4c5309d579..e8414ca006 100644 --- a/frontend/public/src/components/UserMenu_test.js +++ b/frontend/public/src/components/UserMenu_test.js @@ -22,7 +22,7 @@ describe("UserMenu component", () => { shallow().find( "ul li" ), - 5 + 6 ) }) diff --git a/frontend/public/src/components/forms/EditProfileForm_test.js b/frontend/public/src/components/forms/EditProfileForm_test.js index 231126d4f8..afc150708f 100644 --- a/frontend/public/src/components/forms/EditProfileForm_test.js +++ b/frontend/public/src/components/forms/EditProfileForm_test.js @@ -7,10 +7,9 @@ import { mount } from "enzyme" import EditProfileForm from "./EditProfileForm" import { findFormikFieldByName } from "../../lib/test_utils" import { makeCountries, makeUser } from "../../factories/user" -import * as utils from "../../lib/util" describe("EditProfileForm", () => { - let sandbox, onSubmitStub, checkFeatureFlagStub + let sandbox, onSubmitStub const countries = makeCountries() const user = makeUser() @@ -27,12 +26,9 @@ describe("EditProfileForm", () => { beforeEach(() => { sandbox = sinon.createSandbox() onSubmitStub = sandbox.stub() - checkFeatureFlagStub = sandbox.stub(utils, "checkFeatureFlag").returns(true) }) - afterEach(() => { - checkFeatureFlagStub.restore() - }) + afterEach(() => {}) it("passes onSubmit to Formik", () => { const wrapper = renderForm() diff --git a/frontend/public/src/containers/ProductDetailEnrollApp.js b/frontend/public/src/containers/ProductDetailEnrollApp.js index b74704a026..7a593cc2b6 100644 --- a/frontend/public/src/containers/ProductDetailEnrollApp.js +++ b/frontend/public/src/containers/ProductDetailEnrollApp.js @@ -1,7 +1,6 @@ // @flow /* global $:false */ import React from "react" -import { checkFeatureFlag } from "../lib/util" import CourseProductDetailEnroll from "../components/CourseProductDetailEnroll" import ProgramProductDetailEnroll from "../components/ProgramProductDetailEnroll" @@ -104,28 +103,21 @@ type Props = { export class ProductDetailEnrollApp extends React.Component { render() { - const { courseId, programId, userId } = this.props + const { courseId, programId } = this.props - const showNewDesign = checkFeatureFlag( - "mitxonline-new-product-page", - userId ? userId : "anonymousUser" - ) + document.querySelectorAll("a.expand_here_link").forEach(link => { + link.removeEventListener("click", expandExpandBlock) + link.addEventListener("click", expandExpandBlock) + }) - if (showNewDesign) { - document.querySelectorAll("a.expand_here_link").forEach(link => { - link.removeEventListener("click", expandExpandBlock) - link.addEventListener("click", expandExpandBlock) - }) - - document.querySelectorAll("h3.instructor-name").forEach(link => { - link.removeEventListener("click", openInstructorModal) - link.addEventListener("click", openInstructorModal) - link.removeEventListener("keyup", openInstructorModal) - link.addEventListener("keyup", openInstructorModal) - }) - } + document.querySelectorAll("h3.instructor-name").forEach(link => { + link.removeEventListener("click", openInstructorModal) + link.addEventListener("click", openInstructorModal) + link.removeEventListener("keyup", openInstructorModal) + link.addEventListener("keyup", openInstructorModal) + }) - return programId && showNewDesign ? ( + return programId ? ( diff --git a/frontend/public/src/containers/UpsellCardApp.js b/frontend/public/src/containers/UpsellCardApp.js deleted file mode 100644 index 3dbc8164df..0000000000 --- a/frontend/public/src/containers/UpsellCardApp.js +++ /dev/null @@ -1,144 +0,0 @@ -// @flow -import React from "react" -import { createStructuredSelector } from "reselect" -import { pathOr } from "ramda" -import { compose } from "redux" -import { connect } from "react-redux" -import { connectRequest } from "redux-query-react" -// $FlowFixMe -import { Badge } from "reactstrap" - -import Loader from "../components/Loader" -import GetCertificateButton from "../components/GetCertificateButton" - -import { EnrollmentFlaggedCourseRun } from "../flow/courseTypes" -import { - courseRunsSelector, - courseRunsQuery, - courseRunsQueryKey -} from "../lib/queries/courseRuns" -import { getFlexiblePriceForProduct, formatLocalePrice } from "../lib/util" - -import { isFinancialAssistanceAvailable } from "../lib/courseApi" - -import { getCookie } from "../lib/api" -import type { User } from "../flow/authTypes" -import users, { currentUserSelector } from "../lib/queries/users" - -import { checkFeatureFlag } from "../lib/util" - -type Props = { - courseId: string, - isLoading: ?boolean, - courseRuns: ?Array, - status: ?number, - upgradeEnrollmentDialogVisibility: boolean, - addProductToBasket: (user: number, productId: number) => Promise, - currentUser: User -} -type ProductDetailState = { - upgradeEnrollmentDialogVisibility: boolean -} - -export class UpsellCardApp extends React.Component { - state = { - upgradeEnrollmentDialogVisibility: false - } - - toggleUpgradeDialogVisibility = () => { - const { upgradeEnrollmentDialogVisibility } = this.state - this.setState({ - upgradeEnrollmentDialogVisibility: !upgradeEnrollmentDialogVisibility - }) - } - - renderUpgradeEnrollmentDialog(run: EnrollmentFlaggedCourseRun) { - const needFinancialAssistanceLink = - isFinancialAssistanceAvailable(run) && - !run.approved_flexible_price_exists ? ( -

    - - Need financial assistance? - -

    - ) : null - const product = - run.products && !run.is_verified && run.is_enrolled && run.is_upgradable - ? run.products[0] - : null - return product ? ( -
    -
    -
    - Enrolled in free course -
    -
    -

    Get a certificate

    -

    - {formatLocalePrice(getFlexiblePriceForProduct(product))} -

    -
    -
    -
    -
    -

    - You are taking the free version of this course. Upgrade today and, - upon passing, receive your certificate signed by MIT faculty to - highlight the knowledge and skills you've gained from this MITx - course. -

    - - {needFinancialAssistanceLink} -
    -
    -
    - ) : null - } - getEnrollmentForm() { - const csrfToken = getCookie("csrftoken") - const { courseRuns } = this.props - const run = courseRuns ? courseRuns[0] : null - return ( -
    - - - -
    - ) - } - - render() { - const { courseRuns, currentUser, isLoading } = this.props - - const run = courseRuns ? courseRuns[0] : null - - return !checkFeatureFlag( - "mitxonline-new-product-page", - currentUser && currentUser.id ? currentUser.id : "anonymousUser" - ) ? ( - // $FlowFixMe: isLoading null or undefined - - {run ? this.renderUpgradeEnrollmentDialog(run) : null} - - ) : null - } -} - -const mapStateToProps = createStructuredSelector({ - courseRuns: courseRunsSelector, - currentUser: currentUserSelector, - isLoading: pathOr(true, ["queries", courseRunsQueryKey, "isPending"]), - status: pathOr(null, ["queries", courseRunsQueryKey, "status"]) -}) - -const mapPropsToConfig = props => [ - courseRunsQuery(props.courseId), - users.currentUserQuery() -] - -export default compose( - connect(mapStateToProps), - connectRequest(mapPropsToConfig) -)(UpsellCardApp) diff --git a/frontend/public/src/entry/header.js b/frontend/public/src/entry/header.js index d9928d0c52..6415a4782e 100644 --- a/frontend/public/src/entry/header.js +++ b/frontend/public/src/entry/header.js @@ -11,7 +11,6 @@ import configureStore from "../store/configureStore" import { AppTypeContext, MIXED_APP_CONTEXT } from "../contextDefinitions" import HeaderApp from "../containers/HeaderApp" import ProductDetailEnrollApp from "../containers/ProductDetailEnrollApp" -import UpsellCardApp from "../containers/UpsellCardApp" // Object.entries polyfill import entries from "object.entries" @@ -60,22 +59,10 @@ const renderEnrollSection = ( ) } -const renderUpsellCard = (courseId, element, reduxStore) => { - ReactDOM.render( - - - - - , - element - ) -} - renderHeader() document.addEventListener("DOMContentLoaded", function() { const enrollSectionEl = document.getElementById("productDetailEnrollment") - const upsellCardEl = document.getElementById("upsellCard") const courseIdEl = document.getElementById("courseId") const programIdEl = document.getElementById("programId") const userIdEl = document.getElementById("userId") @@ -91,9 +78,5 @@ document.addEventListener("DOMContentLoaded", function() { enrollSectionEl, productDetailStore ) - - if (upsellCardEl) { - renderUpsellCard(courseId, upsellCardEl, productDetailStore) - } } }) diff --git a/main/urls.py b/main/urls.py index df06b0ab53..389dec3e19 100644 --- a/main/urls.py +++ b/main/urls.py @@ -24,7 +24,7 @@ from wagtail.documents import urls as wagtaildocs_urls from cms.views import instructor_page -from main.views import cms_signin_redirect_to_site_signin, index, refine, catalog +from main.views import cms_signin_redirect_to_site_signin, index, refine handler500 = "main.views.handler500" handler404 = "main.views.handler404" @@ -77,7 +77,7 @@ re_path(r"^orders/history/.*", index, name="order-history"), re_path(r"^orders/receipt/.*", index, name="order-receipt"), re_path(r"^records/.*", index, name="learner-records"), - re_path(r"^catalog/", catalog, name="catalog"), + re_path(r"^catalog/", index, name="catalog"), path("api/instructor//", instructor_page, name="cms_instructor_page"), # Wagtail re_path( diff --git a/main/views.py b/main/views.py index 507c336b2d..ce191cc242 100644 --- a/main/views.py +++ b/main/views.py @@ -46,20 +46,6 @@ def index(request, **kwargs): return render(request, "index.html", context=context) -def catalog(request, **kwargs): - """ - The catalog view. - """ - if features.is_enabled( - features.ENABLE_NEW_DESIGN, - False, - request.user.id if request.user.is_authenticated else "anonymousUser", - ): - context = get_base_context(request) - return render(request, "index.html", context=context) - return handler404(request, Exception) - - @never_cache def refine(request, **kwargs): """ diff --git a/main/views_test.py b/main/views_test.py index 974b788cd8..a1d4cf799e 100644 --- a/main/views_test.py +++ b/main/views_test.py @@ -31,16 +31,3 @@ def test_never_cache_react_views(staff_client, url_name): response.headers["Cache-Control"] == "max-age=0, no-cache, no-store, must-revalidate, private" ) - - -@pytest.mark.parametrize("enable_new_design", [True, False]) -def test_catalog_page_feature_flag(client, settings, enable_new_design): - """ - Test that our react views instruct any clients not to cache the response - """ - settings.FEATURES[features.ENABLE_NEW_DESIGN] = enable_new_design - response = client.get("/catalog", follow=True) - if enable_new_design: - assert response.status_code == status.HTTP_200_OK - else: - assert response.status_code == status.HTTP_404_NOT_FOUND