From a5987e73d05042c9745fc851a52b8eb3e1b74695 Mon Sep 17 00:00:00 2001 From: Nawfal Ahmed <111358247+NawfalAhmed@users.noreply.github.com> Date: Mon, 8 May 2023 20:19:25 +0500 Subject: [PATCH] feat: subscription changes for program details page (#32060) * feat: subscription ui changes on program detail page (#31846) * test: update tests for subscription changes on program details (#32020) * feat: subscription api changes on program details (#32059) --- lms/static/images/arrow-upright-icon.svg | 4 + lms/static/images/restart-icon.svg | 3 + .../models/program_subscription_model.js | 88 +++++++++++++ .../spec/course_card_view_spec.js | 13 +- .../spec/program_details_header_spec.js | 14 ++ .../spec/program_details_sidebar_view_spec.js | 124 ++++++++++++++++-- .../spec/program_details_view_spec.js | 91 ++++++++++++- .../views/course_card_view.js | 7 + .../views/program_details_sidebar_view.js | 28 ++-- .../views/program_details_view.js | 28 +++- .../views/program_header_view.js | 11 ++ .../views/upgrade_message_view.js | 14 +- lms/static/sass/views/_program-details.scss | 45 ++++++- .../program_details_fragment.html | 2 + .../program_details_sidebar.underscore | 53 +++++++- .../program_details_tab_view.underscore | 42 +++++- .../program_details_view.underscore | 42 +++++- .../program_header_view.underscore | 5 + .../upgrade_message.underscore | 2 +- .../upgrade_message_subscription.underscore | 21 +++ 20 files changed, 593 insertions(+), 44 deletions(-) create mode 100644 lms/static/images/arrow-upright-icon.svg create mode 100644 lms/static/images/restart-icon.svg create mode 100644 lms/static/js/learner_dashboard/models/program_subscription_model.js create mode 100644 lms/templates/learner_dashboard/upgrade_message_subscription.underscore diff --git a/lms/static/images/arrow-upright-icon.svg b/lms/static/images/arrow-upright-icon.svg new file mode 100644 index 0000000000..3838d3f035 --- /dev/null +++ b/lms/static/images/arrow-upright-icon.svg @@ -0,0 +1,4 @@ + + + diff --git a/lms/static/images/restart-icon.svg b/lms/static/images/restart-icon.svg new file mode 100644 index 0000000000..c4d90733e2 --- /dev/null +++ b/lms/static/images/restart-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/lms/static/js/learner_dashboard/models/program_subscription_model.js b/lms/static/js/learner_dashboard/models/program_subscription_model.js new file mode 100644 index 0000000000..164f5a3881 --- /dev/null +++ b/lms/static/js/learner_dashboard/models/program_subscription_model.js @@ -0,0 +1,88 @@ +import Backbone from 'backbone'; +import moment from 'moment'; + +import DateUtils from 'edx-ui-toolkit/js/utils/date-utils'; + +/** + * Model for Program Subscription Data. + */ +class ProgramSubscriptionModel extends Backbone.Model { + constructor({ context }, ...args) { + const { + subscriptionData: [data = {}], + programData: { subscription_prices }, + urls, + userPreferences, + } = context; + + const priceInUSD = subscription_prices?.find(({ currency }) => currency === 'USD')?.price; + const trialMoment = moment( + DateUtils.localizeTime( + DateUtils.stringToMoment(data.trial_end), + 'UTC' + ) + ); + + const subscriptionState = data.subscription_state?.toLowerCase() ?? ''; + const subscriptionPrice = '$' + parseFloat(priceInUSD); + const subscriptionUrl = + subscriptionState === 'active' + ? urls.manage_subscription_url + : urls.buy_subscription_url; + + const hasActiveTrial = + subscriptionState === 'active' && data.trial_end + ? trialMoment.isAfter(moment.utc()) + : false; + + const [nextPaymentDate] = ProgramSubscriptionModel.formatDate( + data.next_payment_date, + userPreferences + ); + const [trialEndDate, trialEndTime] = ProgramSubscriptionModel.formatDate( + data.trial_end, + userPreferences + ); + + const trialLength = 7; + + super( + { + hasActiveTrial, + nextPaymentDate, + subscriptionPrice, + subscriptionState, + subscriptionUrl, + trialEndDate, + trialEndTime, + trialLength, + }, + ...args + ); + } + + static formatDate(date, userPreferences) { + if (!date) { + return ['', '']; + } + + const userTimezone = userPreferences?.time_zone || 'UTC'; + const userLanguage = userPreferences?.['pref-lang'] || 'en'; + const context = { + datetime: date, + timezone: userTimezone, + language: userLanguage, + format: DateUtils.dateFormatEnum.shortDate, + }; + + const localDate = DateUtils.localize(context); + const localTime = DateUtils.localizeTime( + DateUtils.stringToMoment(date), + userTimezone + ).format('HH:mm'); + + return [localDate, localTime]; + } +} + +export default ProgramSubscriptionModel; diff --git a/lms/static/js/learner_dashboard/spec/course_card_view_spec.js b/lms/static/js/learner_dashboard/spec/course_card_view_spec.js index 35a26236ca..380000249b 100644 --- a/lms/static/js/learner_dashboard/spec/course_card_view_spec.js +++ b/lms/static/js/learner_dashboard/spec/course_card_view_spec.js @@ -13,8 +13,13 @@ describe('Course Card View', () => { const setupView = (data, isEnrolled, collectionCourseStatus) => { const programData = $.extend({}, data); const context = { - courseData: {}, + programData, collectionCourseStatus, + courseData: {}, + subscriptionData: [], + urls: {}, + userPreferences: {}, + isSubscriptionEligible: false, }; if (typeof collectionCourseStatus === 'undefined') { @@ -31,7 +36,7 @@ describe('Course Card View', () => { }; const validateCourseInfoDisplay = () => { - // DRY validation for course card in enrolled state + // DRY validation for course card in enrolled state expect(view.$('.course-details .course-title-link').text().trim()).toEqual(course.title); expect(view.$('.course-details .course-title-link').attr('href')).toEqual( course.course_runs[0].marketing_url, @@ -42,8 +47,8 @@ describe('Course Card View', () => { }; beforeEach(() => { - // NOTE: This data is redefined prior to each test case so that tests - // can't break each other by modifying data copied by reference. + // NOTE: This data is redefined prior to each test case so that tests + // can't break each other by modifying data copied by reference. course = { key: 'WageningenX+FFESx', uuid: '9f8562eb-f99b-45c7-b437-799fd0c15b6a', diff --git a/lms/static/js/learner_dashboard/spec/program_details_header_spec.js b/lms/static/js/learner_dashboard/spec/program_details_header_spec.js index 862fb3f228..4a3fe43fb0 100644 --- a/lms/static/js/learner_dashboard/spec/program_details_header_spec.js +++ b/lms/static/js/learner_dashboard/spec/program_details_header_spec.js @@ -45,6 +45,16 @@ describe('Program Details Header View', () => { }, ], }, + subscriptionData: [ + { + trial_end: '1970-01-01T03:25:45Z', + next_payment_date: '1970-06-03T07:12:04Z', + price: '100.00', + currency: 'USD', + subscription_state: 'active', + }, + ], + isSubscriptionEligible: true, }; beforeEach(() => { @@ -71,4 +81,8 @@ describe('Program Details Header View', () => { expect(view.$('.org-logo').attr('alt')) .toEqual(`${context.programData.authoring_organizations[0].name}'s logo`); }); + + it('should render the subscription badge if subscription is active', () => { + expect(view.$('.meta-info .badge').html().trim()).toEqual('Subscribed'); + }); }); diff --git a/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js b/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js index f6599e9ca1..ea902fc8d0 100644 --- a/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js +++ b/lms/static/js/learner_dashboard/spec/program_details_sidebar_view_spec.js @@ -1,14 +1,16 @@ /* globals setFixtures */ import Backbone from 'backbone'; +import moment from 'moment'; +import SubscriptionModel from '../models/program_subscription_model'; import ProgramSidebarView from '../views/program_details_sidebar_view'; describe('Program Progress View', () => { let view = null; // Don't bother linting the format of the test data /* eslint-disable */ - const data = { + const data = { programData: {"subtitle": "Explore water management concepts and technologies.", "overview": "\u003ch3\u003eXSeries Program Overview\u003c/h3\u003e\n\u003cp\u003eSafe water supply and hygienic water treatment are prerequisites for the well-being of communities all over the world. This Water XSeries, offered by the water management experts of TU Delft, will give you a unique opportunity to gain access to world-class knowledge and expertise in this field.\u003c/p\u003e\n\u003cp\u003eThis 3-course series will cover questions such as: How does climate change affect water cycle and public safety? How to use existing technologies to treat groundwater and surface water so we have safe drinking water? How do we take care of sewage produced in the cities on a daily basis? You will learn what are the physical, chemical and biological processes involved; carry out simple experiments at home; and have the chance to make a basic design of a drinking water treatment plant\u003c/p\u003e", "weeks_to_complete": null, "corporate_endorsements": [], "video": null, "type": "XSeries", "applicable_seat_types": ["verified", "professional", "credit"], "max_hours_effort_per_week": null, "transcript_languages": ["en-us"], "expected_learning_items": [], "uuid": "988e7ea8-f5e2-4d2e-998a-eae4ad3af322", "title": "Water Management", "languages": ["en-us"], "subjects": [{"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/engineering.jpg", "name": "Engineering", "subtitle": "Learn about engineering and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/engineering-1440x210.jpg", "slug": "engineering", "description": "Enroll in an online introduction to engineering course or explore specific areas such as structural, mechanical, electrical, software or aeronautical engineering. EdX offers free online courses in thermodynamics, robot mechanics, aerodynamics and more from top engineering universities."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/biology.jpg", "name": "Biology \u0026 Life Sciences", "subtitle": "Learn about biology and life sciences and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/plant-stomas-1440x210.jpg", "slug": "biology-life-sciences", "description": "Take free online biology courses in genetics, biotechnology, biochemistry, neurobiology and other disciplines. Courses include Fundamentals of Neuroscience from Harvard University, Molecular Biology from MIT and an Introduction to Bioethics from Georgetown."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/science.jpg", "name": "Science", "subtitle": "Learn about science and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/neuron-1440x210.jpg", "slug": "science", "description": "Science is one of the most popular subjects on edX and online courses range from beginner to advanced levels. Areas of study include neuroscience, genotyping, DNA methylation, innovations in environmental science, modern astrophysics and more from top universities and institutions worldwide."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/physics.jpg", "name": "Physics", "subtitle": "Learn about physics and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/header-bg-physics.png", "slug": "physics", "description": "Find online courses in quantum mechanics and magnetism the likes of MIT and Rice University or get an introduction to the violent universe from Australian National University."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/engery.jpg", "name": "Energy \u0026 Earth Sciences", "subtitle": "Learn about energy and earth sciences and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/energy-1440x210.jpg", "slug": "energy-earth-sciences", "description": "EdX\u2019s online Earth sciences courses cover very timely and important issues such as climate change and energy sustainability. Learn about natural disasters and our ability to predict them. Explore the universe with online courses in astrophysics, space plasmas and fusion energy."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/environmental-studies.jpg", "name": "Environmental Studies", "subtitle": "Learn about environmental studies, and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/environment-studies-1440x210.jpg", "slug": "environmental-studies", "description": "Take online courses in environmental science, natural resource management, environmental policy and civic ecology. Learn how to solve complex problems related to pollution control, water treatment and environmental sustainability with free online courses from leading universities worldwide."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/health.jpg", "name": "Health \u0026 Safety", "subtitle": "Learn about health and safety and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/health-and-safety-1440x210.jpg", "slug": "health-safety", "description": "From public health initiatives to personal wellbeing, find online courses covering a wide variety of health and medical subjects. Enroll in free courses from major universities on topics like epidemics, global healthcare and the fundamentals of clinical trials."}, {"card_image_url": "https://stage.edx.org/sites/default/files/subject/image/card/electronics.jpg", "name": "Electronics", "subtitle": "Learn about electronics and more from the best universities and institutions around the world.", "banner_image_url": "https://stage.edx.org/sites/default/files/electronics-a-1440x210.jpg", "slug": "electronics", "description": "The online courses in electrical engineering explore computation structures, electronic interfaces and the principles of electric circuits. Learn the engineering behind drones and autonomous robots or find out how organic electronic devices are changing the way humans interact with machines."}], "individual_endorsements": [], "staff": [{"family_name": "Smets", "uuid": "6078b3dd-ade4-457d-9262-7439a5f4b07e", "bio": "Dr. Arno H.M. Smets is Professor in Solar Energy in the Photovoltaics Material and Devices group at the faculty of Electrical Engineering, Mathematics and Computer Science, Delft University of Technology. From 2005-2010 he worked at the Research Center for Photovoltaics at the National Institute of Advanced Industrial Science and Technology (AIST) in Tsukuba Japan. His research work is focused on processing of thin silicon films, innovative materials and new concepts for photovoltaic applications. He is lecturer for BSc and MSc courses on Photovoltaics and Sustainable Energy at TU Delft. His online edX course on Solar Energy attracted over 150,000 students worldwide. He is co-author of the book \u003cem\u003e\u201cSolar Energy. The physics and engineering of photovoltaic conversion technologies and systems.\u201d\u003c/em\u003e", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/arno-smets_x110.jpg", "given_name": "Arno", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Professor, Electrical Engineering, Mathematics and Computer Science"}, "works": [], "slug": "arno-smets"}, {"family_name": "van de Giesen", "uuid": "0e28153f-4e9f-4080-b56f-43480600ecd7", "bio": "Since July 2004, Nick van de Giesen has held the Van Kuffeler Chair of Water Resources Management of the Faculty of Civil Engineering and Geosciences. He teaches Integrated Water Resources Management and Water Management. His main interests are the modeling of complex water resources systems and the development of science-based decision support systems. The interaction between water systems and their users is the core theme in both research portfolio and teaching curriculum. Since 1 April 2009, he is chairman of the \u003ca href=\"http://www.environment.tudelft.nl\"\u003eDelft Research Initiative Environment\u003c/a\u003e.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/giesen_vd_nick_110p.jpg", "given_name": "Nick", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "nick-van-de-giesen"}, {"family_name": "Russchenberg", "uuid": "8a94bdb9-ac44-4bc1-a3d2-306f391682b4", "bio": "Herman Russchenberg is engaged in intensive and extensive research into the causes of climate change. His own research involves investigating the role played by clouds and dust particles in the atmosphere, but he is also head of the TU Delft Climate Institute, established in March 2012 to bring together TU Delft researchers working on all aspects of climate and climate change. Russchenberg started out in the faculty of Electrical Engineering, conducting research into the influence of the atmosphere (rain, clouds) on satellite signals. After obtaining his PhD in 1992, he shifted his attention to the physics of water vapour, water droplets, dust particles, sunlight, radiation and emissions in the atmosphere. He is now based in the faculty of Civil Engineering and Geosciences.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/russchenberg_herman_110p.jpg", "given_name": "Herman", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "herman-russchenberg"}, {"family_name": "Savenije", "uuid": "4ebdcd93-bb4e-4c0c-9faf-4e513b1a2e33", "bio": "Prof. Savenije was born in 1952 in the Netherlands and studied at the Delft University of Technology, in the Netherlands, where he obtained his MSc in 1977 in Hydrology. As a young graduate hydrologist he worked for six years in Mozambique where he developed a theory on salt intrusion in estuaries and studied the hydrology of international rivers. From 1985-1990 he worked as an international consultant mostly in Asia and Africa. He joined academia in 1990 to complete his PhD in 1992. In 1994 he was appointed Professor of Water Resources Management at the IHE (now UNESCO-IHE, Institute for Water Education) in Delft, the Netherlands. Since 1999, he is Professor of Hydrology at the Delft University of Technology, where he is the head of the Water Resources Section. He is President of the International Association of Hydrological Sciences and Executive Editor of the journal Hydrology and Earth System Sciences.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/savenije_hubert_110p.jpg", "given_name": "Hubert", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "hubert-savenije"}, {"family_name": "Stive", "uuid": "a7364bab-8e9c-4265-bd14-598afac1f086", "bio": "Marcel Stive studied Civil engineering at the Delft University of Technology, where he graduated in 1977 and received his doctorate in 1988. After graduating in 1977 Stive started working at WL-Delft Hydraulics, where he worked until 1992. In 1992 he became a professor at the Polytechnic University of Catalonia in Barcelona, Spain. In 1994 her returned to WL-Delft Hydraulics and at the same time began to work as a professor of Coastal Morphodynamics at the Delft University of Technology. Since 2001 Stive is a professor of Coastal Engineering at Delft University of Technology and he is the scientific director of the Water Research Centre Delft since 2003.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/stive_marcel_110p.jpg", "given_name": "Marcel", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "TU Delft", "title": "Professor"}, "works": [], "slug": "marcel-stive"}, {"family_name": "Rietveld", "uuid": "1b70c71d-20cc-487d-be10-4b31baeff559", "bio": "\u003cp\u003eLuuk Rietveld is professor of Urban Water Cycle Technology at Delft University of Technology. After finalizing his studies in Civil Engineering at Delft University of Technology in 1987, he worked, until 1991, as lecturer/researcher in Sanitary Engineering at the Eduardo Mondlane University, Maputo, Mozambique. Between 1991 and 1994, he was employed at the Management Centre for International Co-operation, and since 1994 he has had an appointment at the Department of Water Management of Delft University of Technology. In 2005, he defended his PhD thesis entitled \"Improving Operation of Drinking Water Treatment through Modelling\".\u003c/p\u003e\n\u003cp\u003eLuuk Rietveld\u2019s main research interests are modelling and optimisation of processes in the urban water cycle, and technological innovations in drinking water treatment and water reclamation for industrial purposes. In addition, he has extensive experience in education, in various cultural contexts, and is interested to explore the use of new ways of teaching through activated and blended learning and MOOCs.\u003c/p\u003e", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/rietveld_luuk_110p.jpg", "given_name": "Luuk", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "luuk-rietveld-0"}, {"family_name": "van Halem", "uuid": "4ce9ef2a-19e9-46de-9f34-5d755f26736a", "bio": "Doris van Halem is a tenure track Assistant Professor within the Department of Water Management, section Sanitary Engineering of Delft University of Technology. She graduated from Delft University of Technology in Civil Engineering and Geosciences with a cum laude MSc degree (2007). During her studies she developed an interest in global drinking water challenges, illustrated by her internships in Sri Lanka and Benin, resulting in an MSc thesis \u201cCeramic silver impregnated pot filter for household drinking water treatment in developing countries\u201d. In 2011 she completed her PhD research (with honours) on subsurface iron and arsenic removal for drinking water supply in Bangladesh under the guidance of prof. J.C. van Dijk (TU Delft) and prof. dr. G.L. Amy (Unesco-IHE). Currently she supervises BSc, MSc and PhD students, focusing on inorganic constituent behaviour and trace compound removal during soil passage and drinking water treatment - with a particular interest in smart, pro-poor drinking water solutions.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/doris_van_halem_1.jpg", "given_name": "Doris", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Assistant Professor, Sanitary Engineering"}, "works": [], "slug": "doris-van-halem-0"}, {"family_name": "Grefte", "uuid": "463c3f1a-95fc-45aa-b7c0-d01b14126f02", "bio": "Anke Grefte is project manager open, online and blended education for the Faculty of Civil Engineering and Geosciences, Delft University of Technology. She graduated from Delft University of Technology in Civil Engineering with a master\u2019s thesis entitled \"Behaviour of particles in a drinking water distribution network; test rig results\". For this thesis Anke was awarded the Gijs Oskam award for best young researcher. In November 2013, she finished her Ph.D. research on the removal of Natural Organic Matter (NOM) fractions by ion exchange and the impact on drinking water treatment processes and biological stability.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/grefte_anke_110p.jpg", "given_name": "Anke", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "anke-grefte-0"}, {"family_name": "Lier", "uuid": "349aa2cc-0107-4632-ad10-869f23966049", "bio": "Jules van Lier is full professor of Environmental Engineering and Wastewater Treatment at the Sanitary Engineering Section of Delft University of Technology and has a 1 day per week posted position at the Unesco-IHE Institute for Water Education, also in Delft Jules van Lier accomplished his PhD on Thermophilic Anaerobic Wastewater Treatment under the supervision of Prof. Gatze Lettinga (1995) at Wageningen University. Throughout his career he has been involved as a senior researcher / project manager in various (inter)national research projects, working on cost-effective water treatment for resource recovery (water, nutrients, biogas, elements). His research projects are focused on closing water cycles in industries and sewage water recovery for irrigated agriculture. The further development of anaerobic treatment technology is his prime focus. In addition to university work he is an Executive Board Member and Scientific Advisor to the LeAF Foundation; regional representative for Western Europe Anaerobic Digestion Specialist group of the International Water Association (IWA); editor of scientific journals (e.g Water Science Technology and Advances in Environmental Research and Development); member of the Paques Technological Advisory Commission; and member of the Advisory Board of World-Waternet, Amsterdam.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/lier_van_jules_110p.jpg", "given_name": "Jules van", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Professor, Sanitary Engineering"}, "works": [], "slug": "jules-van-lier"}, {"family_name": "Kreuk", "uuid": "c1e50a84-1b09-47b5-b704-5e16309d0cba", "bio": "Merle de Kreuk is a wastewater Associate Professor at the Sanitary Engineering department of the Delft University of Technology. Her research focus is on (municipal and industrial) wastewater treatment systems and anaerobic processes, aiming to link the world of Biotechnology to the Civil Engineering, as well as fundamental research to industrial applications. Her main research topics are hydrolysis processes in anaerobic treatment and granule formation and deterioration. Merle\u2019s PhD and Post-Doc research involved the development of aerobic granular sludge technology and up scaling the technology from a three litre lab scale reactor to the full scale Nereda\u00ae process\u00ae. The first application of aerobic granular sludge technology in the Netherlands was opened in May 2012, and currently many more installations are being built, due to its compactness, low energy use and good effluent characteristics. Her previous work experience also involved the position of water treatment technology innovator at Water authority Hollandse Delta on projects such as the Energy Factory in which 14 water authorities cooperated to develop an energy producing sewage treatment plant.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/kreuk_de_merle_110p.jpg", "given_name": "Merle de", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Associate Professor, Sanitary Engineering"}, "works": [], "slug": "merle-de-kreuk"}], "marketing_slug": "water-management", "marketing_url": "https://stage.edx.org/xseries/water-management", "status": "active", "credit_redemption_overview": "These courses can be taken in any order.", "card_image_url": "https://stage.edx.org/sites/default/files/card/images/waterxseries_course0.png", "faq": [], "price_ranges": [{"currency": "USD", "max": 15.0, "total": 35.0, "min": 10.0}], "banner_image": {"small": {"url": "https://d385l2sek0vys7.cloudfront.net/media/programs/banner_images/988e7ea8-f5e2-4d2e-998a-eae4ad3af322.small.jpg", "width": 435, "height": 145}, "large": {"url": "https://d385l2sek0vys7.cloudfront.net/media/programs/banner_images/988e7ea8-f5e2-4d2e-998a-eae4ad3af322.large.jpg", "width": 1440, "height": 480}, "medium": {"url": "https://d385l2sek0vys7.cloudfront.net/media/programs/banner_images/988e7ea8-f5e2-4d2e-998a-eae4ad3af322.medium.jpg", "width": 726, "height": 242}, "x-small": {"url": "https://d385l2sek0vys7.cloudfront.net/media/programs/banner_images/988e7ea8-f5e2-4d2e-998a-eae4ad3af322.x-small.jpg", "width": 348, "height": 116}}, "authoring_organizations": [{"description": "Delft University of Technology is the largest and oldest technological university in the Netherlands. Our research is inspired by the desire to increase fundamental understanding, as well as by societal challenges. We encourage our students to be independent thinkers so they will become engineers capable of solving complex problems. Our students have chosen Delft University of Technology because of our reputation for quality education and research.", "tags": ["charter", "contributor"], "name": "Delft University of Technology (TU Delft)", "homepage_url": null, "key": "DelftX", "certificate_logo_image_url": null, "marketing_url": "https://stage.edx.org/school/delftx", "logo_image_url": "https://stage.edx.org/sites/default/files/school/image/banner/delft_logo_200x101_0.png", "uuid": "c484a523-d396-4aff-90f4-bb7e82e16bf6"}], "job_outlook_items": [], "credit_backing_organizations": [], "weeks_to_complete_min": 4, "weeks_to_complete_max": 8, "min_hours_effort_per_week": null, 'pathway_ids': [95]}, courseData: { "completed": [{"owners": [{"uuid": "c484a523-d396-4aff-90f4-bb7e82e16bf6", "key": "DelftX", "name": "Delft University of Technology (TU Delft)"}], "uuid": "4ce7a648-3172-475a-84f3-9f843b2157f3", "title": "Introduction to Water and Climate", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/wc_home_378x225.jpg", "height": null, "description": null, "width": null}, "key": "Delftx+CTB3300WCx", "course_runs": [{"upgrade_url": null, "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/wc_home_378x225.jpg", "height": null, "description": null, "width": null}, "max_effort": null, "is_enrollment_open": true, "course": "Delftx+CTB3300WCx", "content_language": "en-us", "eligible_for_financial_aid": true, "seats": [{"sku": "18AC1BC", "credit_hours": null, "price": "0.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "honor"}, {"sku": "86A734B", "credit_hours": null, "price": "10.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "verified"}], "course_url": "/courses/course-v1:Delftx+CTB3300WCx+2015_T3/", "availability": "Archived", "transcript_languages": ["en-us"], "staff": [{"family_name": "van de Giesen", "uuid": "0e28153f-4e9f-4080-b56f-43480600ecd7", "bio": "Since July 2004, Nick van de Giesen has held the Van Kuffeler Chair of Water Resources Management of the Faculty of Civil Engineering and Geosciences. He teaches Integrated Water Resources Management and Water Management. His main interests are the modeling of complex water resources systems and the development of science-based decision support systems. The interaction between water systems and their users is the core theme in both research portfolio and teaching curriculum. Since 1 April 2009, he is chairman of the \u003ca href=\"http://www.environment.tudelft.nl\"\u003eDelft Research Initiative Environment\u003c/a\u003e.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/giesen_vd_nick_110p.jpg", "given_name": "Nick", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "nick-van-de-giesen"}, {"family_name": "Russchenberg", "uuid": "8a94bdb9-ac44-4bc1-a3d2-306f391682b4", "bio": "Herman Russchenberg is engaged in intensive and extensive research into the causes of climate change. His own research involves investigating the role played by clouds and dust particles in the atmosphere, but he is also head of the TU Delft Climate Institute, established in March 2012 to bring together TU Delft researchers working on all aspects of climate and climate change. Russchenberg started out in the faculty of Electrical Engineering, conducting research into the influence of the atmosphere (rain, clouds) on satellite signals. After obtaining his PhD in 1992, he shifted his attention to the physics of water vapour, water droplets, dust particles, sunlight, radiation and emissions in the atmosphere. He is now based in the faculty of Civil Engineering and Geosciences.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/russchenberg_herman_110p.jpg", "given_name": "Herman", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "herman-russchenberg"}, {"family_name": "Savenije", "uuid": "4ebdcd93-bb4e-4c0c-9faf-4e513b1a2e33", "bio": "Prof. Savenije was born in 1952 in the Netherlands and studied at the Delft University of Technology, in the Netherlands, where he obtained his MSc in 1977 in Hydrology. As a young graduate hydrologist he worked for six years in Mozambique where he developed a theory on salt intrusion in estuaries and studied the hydrology of international rivers. From 1985-1990 he worked as an international consultant mostly in Asia and Africa. He joined academia in 1990 to complete his PhD in 1992. In 1994 he was appointed Professor of Water Resources Management at the IHE (now UNESCO-IHE, Institute for Water Education) in Delft, the Netherlands. Since 1999, he is Professor of Hydrology at the Delft University of Technology, where he is the head of the Water Resources Section. He is President of the International Association of Hydrological Sciences and Executive Editor of the journal Hydrology and Earth System Sciences.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/savenije_hubert_110p.jpg", "given_name": "Hubert", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": null, "works": [], "slug": "hubert-savenije"}, {"family_name": "Stive", "uuid": "a7364bab-8e9c-4265-bd14-598afac1f086", "bio": "Marcel Stive studied Civil engineering at the Delft University of Technology, where he graduated in 1977 and received his doctorate in 1988. After graduating in 1977 Stive started working at WL-Delft Hydraulics, where he worked until 1992. In 1992 he became a professor at the Polytechnic University of Catalonia in Barcelona, Spain. In 1994 her returned to WL-Delft Hydraulics and at the same time began to work as a professor of Coastal Morphodynamics at the Delft University of Technology. Since 2001 Stive is a professor of Coastal Engineering at Delft University of Technology and he is the scientific director of the Water Research Centre Delft since 2003.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/stive_marcel_110p.jpg", "given_name": "Marcel", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "TU Delft", "title": "Professor"}, "works": [], "slug": "marcel-stive"}], "announcement": "2015-06-09T00:00:00Z", "end": "2015-11-04T12:00:00Z", "uuid": "a36f5673-6637-11e6-a8e3-22000bdde520", "title": "Introduction to Water and Climate", "certificate_url": "/certificates/a37c59143d9d422eb6ab11e1053b8eb5", "enrollment_start": null, "start": "2015-09-01T04:00:00Z", "min_effort": null, "short_description": "Explore how climate change, water availability, and engineering innovation are key challenges for our planet.", "hidden": false, "level_type": "Intermediate", "type": "verified", "enrollment_open_date": "Jan 01, 1900", "marketing_url": "https://stage.edx.org/course/introduction-water-climate-delftx-ctb3300wcx-0", "is_course_ended": true, "instructors": [], "full_description": "\u003cp\u003eWater is essential for life on earth and of crucial importance for society. Cycling across the planet and the atmosphere, it also has a major influence on our climate.\u003c/p\u003e\n\u003cp\u003eWeekly modules are hosted by four different professors, all of them being international experts in their field. The course consists of knowledge clips, movies, exercises, discussion and homework assignments. It finishes with an examination.\u003c/p\u003e\n\u003cp\u003eThis course combined with the courses \"Introduction to Drinking Water Treatment\" (new edition to start in January 2016) and \"Introduction to the Treatment of Urban Sewage\" (new edition to start in April 2016) forms the Water XSeries, Faculty of Civil Engineering and Geosciences, TU Delft.\u003c/p\u003e\n\u003cp\u003e\u003cem\u003e\u003cstrong\u003eLICENSE\u003c/strong\u003e\u003cbr /\u003e\nThe course materials of this course are Copyright Delft University of Technology and are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike (CC-BY-NC-SA) 4.0 International License.\u003c/em\u003e\u003c/p\u003e", "key": "course-v1:Delftx+CTB3300WCx+2015_T3", "enrollment_end": null, "reporting_type": "mooc", "advertised_start": null, "mobile_available": true, "modified": "2017-04-06T12:26:52.594942Z", "is_enrolled": false, "pacing_type": "instructor_paced", "video": {"src": "http://www.youtube.com/watch?v=dJEhwq0sXiQ", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/featured-card/wc_home_378x225.jpg", "width": null, "description": null, "height": null}, "description": null}}]}, {"owners": [{"uuid": "c484a523-d396-4aff-90f4-bb7e82e16bf6", "key": "DelftX", "name": "Delft University of Technology (TU Delft)"}], "uuid": "a0aade38-7a50-4afb-97cd-2214c572cc86", "title": "Urban Sewage Treatment", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/sewage_home_378x225.jpg", "height": null, "description": null, "width": null}, "key": "DelftX+CTB3365STx", "course_runs": [{"upgrade_url": null, "image": {"src": "https://stage.edx.org/sites/default/files/course/image/promoted/sewage_home_378x225.jpg", "height": null, "description": null, "width": null}, "max_effort": null, "is_enrollment_open": true, "course": "DelftX+CTB3365STx", "content_language": "en-us", "eligible_for_financial_aid": true, "seats": [{"sku": "01CDD4F", "credit_hours": null, "price": "0.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "honor"}, {"sku": "B4F253D", "credit_hours": null, "price": "10.00", "currency": "USD", "upgrade_deadline": null, "credit_provider": null, "type": "verified"}], "course_url": "/courses/course-v1:Delftx+CTB3365STx+1T2016/", "availability": "Archived", "transcript_languages": ["en-us"], "staff": [{"family_name": "Lier", "uuid": "349aa2cc-0107-4632-ad10-869f23966049", "bio": "Jules van Lier is full professor of Environmental Engineering and Wastewater Treatment at the Sanitary Engineering Section of Delft University of Technology and has a 1 day per week posted position at the Unesco-IHE Institute for Water Education, also in Delft Jules van Lier accomplished his PhD on Thermophilic Anaerobic Wastewater Treatment under the supervision of Prof. Gatze Lettinga (1995) at Wageningen University. Throughout his career he has been involved as a senior researcher / project manager in various (inter)national research projects, working on cost-effective water treatment for resource recovery (water, nutrients, biogas, elements). His research projects are focused on closing water cycles in industries and sewage water recovery for irrigated agriculture. The further development of anaerobic treatment technology is his prime focus. In addition to university work he is an Executive Board Member and Scientific Advisor to the LeAF Foundation; regional representative for Western Europe Anaerobic Digestion Specialist group of the International Water Association (IWA); editor of scientific journals (e.g Water Science Technology and Advances in Environmental Research and Development); member of the Paques Technological Advisory Commission; and member of the Advisory Board of World-Waternet, Amsterdam.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/lier_van_jules_110p.jpg", "given_name": "Jules van", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Professor, Sanitary Engineering"}, "works": [], "slug": "jules-van-lier"}, {"family_name": "Kreuk", "uuid": "c1e50a84-1b09-47b5-b704-5e16309d0cba", "bio": "Merle de Kreuk is a wastewater Associate Professor at the Sanitary Engineering department of the Delft University of Technology. Her research focus is on (municipal and industrial) wastewater treatment systems and anaerobic processes, aiming to link the world of Biotechnology to the Civil Engineering, as well as fundamental research to industrial applications. Her main research topics are hydrolysis processes in anaerobic treatment and granule formation and deterioration. Merle\u2019s PhD and Post-Doc research involved the development of aerobic granular sludge technology and up scaling the technology from a three litre lab scale reactor to the full scale Nereda\u00ae process\u00ae. The first application of aerobic granular sludge technology in the Netherlands was opened in May 2012, and currently many more installations are being built, due to its compactness, low energy use and good effluent characteristics. Her previous work experience also involved the position of water treatment technology innovator at Water authority Hollandse Delta on projects such as the Energy Factory in which 14 water authorities cooperated to develop an energy producing sewage treatment plant.", "profile_image": {}, "profile_image_url": "https://stage.edx.org/sites/default/files/person/image/kreuk_de_merle_110p.jpg", "given_name": "Merle de", "urls": {"blog": null, "twitter": null, "facebook": null}, "position": {"organization_name": "Delft University of Technology", "title": "Associate Professor, Sanitary Engineering"}, "works": [], "slug": "merle-de-kreuk"}], "announcement": "2015-07-24T00:00:00Z", "end": "2016-07-01T22:30:00Z", "uuid": "a36f70c1-6637-11e6-a8e3-22000bdde520", "title": "Introduction to the Treatment of Urban Sewage", "certificate_url": "/certificates/bed3980e67ca40f0b31e309d9dfe9e7e", "enrollment_start": null, "start": "2016-04-12T04:00:00Z", "min_effort": null, "short_description": "Learn about urban water services, focusing on basic sewage treatment technologies.", "hidden": false, "level_type": "Intermediate", "type": "verified", "enrollment_open_date": "Jan 01, 1900", "marketing_url": "https://stage.edx.org/course/introduction-treatment-urban-sewage-delftx-ctb3365stx-0", "is_course_ended": true, "instructors": [], "full_description": "\u003cp\u003eThis course will focus on basic technologies for the treatment of urban sewage. Unit processes involved in the treatment chain will be described as well as the physical, chemical and biological processes involved. There will be an emphasis on water quality and the functionality of each unit process within the treatment chain. After the course one should be able to recognise the process units, describe their function and make simple design calculations on urban sewage treatment plants.\u003c/p\u003e\n\u003cp\u003eThe course consists of 6 modules:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eSewage treatment plant overview. In this module you will learn what major pollutants are present in the sewage and why we need to treat sewage prior to discharge to surface waters. The functional units will be briefly discussed\u003c/li\u003e\n\u003cli\u003ePrimary treatment. In this module you learn how coarse material, sand \u0026 grit are removed from the sewage and how to design primary clarification tanks\u003c/li\u003e\n\u003cli\u003eBiological treatment. In this module you learn the basics of the carbon, nitrogen and phosphorous cycle and how biological processes are used to treat the main pollutants of concern.\u003c/li\u003e\n\u003cli\u003eActivated sludge process. In this module you learn the design principles of conventional activated sludge processes including the secondary clarifiers and aeration demand of aeration tanks.\u003c/li\u003e\n\u003cli\u003eNitrogen and phosphorus removal. In this module you learn the principles of biological nitrogen removal as well as phosphorus removal by biological and/or chemical means.\u003c/li\u003e\n\u003cli\u003eSludge treatment. In this module you will the design principles of sludge thickeners, digesters and dewatering facilities for the concentration and stabilisation of excess sewage sludge. Potentials for energy recovery via the produced biogas will be discussed as well as the direct anaerobic treatment of urban sewage in UASB reactors when climate conditions allow.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eThis course in combination with the courses \"\u003ca href=\"https://www.edx.org/course/introduction-water-climate-delftx-ctb3300wcx-0\"\u003eIntroduction to Water and Climate\u003c/a\u003e\" and \"\u003ca href=\"https://www.edx.org/course/introduction-drinking-water-treatment-delftx-ctb3365dwx-0\"\u003eIntroduction to Drinking Water Treatment\u003c/a\u003e\" forms the Water XSeries, by DelftX.\u003c/p\u003e\n\u003chr /\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cem\u003eLICENSE\u003c/em\u003e\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e\u003cem\u003eThe course materials of this course are Copyright Delft University of Technology and are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike (CC-BY-NC-SA) 4.0 International License.\u003c/em\u003e\u003c/p\u003e", "key": "course-v1:Delftx+CTB3365STx+1T2016", "enrollment_end": null, "reporting_type": "mooc", "advertised_start": null, "mobile_available": true, "modified": "2017-04-06T12:26:52.679900Z", "is_enrolled": true, "pacing_type": "instructor_paced", "video": {"src": "http://www.youtube.com/watch?v=pcSsOE-F4e8", "image": {"src": "https://stage.edx.org/sites/default/files/course/image/featured-card/sewage_home_378x225.jpg", "width": null, "description": null, "height": null}, "description": null}}]}], @@ -23,13 +25,15 @@ describe('Program Progress View', () => { "url": "/certificates/bed3980e67ca40f0b31e309d9dfe9e7e", "type": "course", "title": "Introduction to the Treatment of Urban Sewage" } ], - urls: {"program_listing_url": "/dashboard/programs/", "commerce_api_url": "/api/commerce/v0/baskets/", "track_selection_url": "/course_modes/choose/"}, + urls: {"program_listing_url": "/dashboard/programs/", "commerce_api_url": "/api/commerce/v0/baskets/", "track_selection_url": "/course_modes/choose/", "program_record_url": "/foo/bar", "buy_subscription_url": "/subscriptions", "manage_subscription_url": "/orders", "subscriptions_learner_help_center_url": "/learner"}, userPreferences: {"pref-lang": "en"} - }; - /* eslint-enable */ + }; + /* eslint-enable */ let programModel; let courseData; + let subscriptionData; let certificateCollection; + let isSubscriptionEligible; const testCircle = (progress) => { const $circle = view.$('.progress-circle'); @@ -42,23 +46,60 @@ describe('Program Progress View', () => { const testText = (progress) => { const $numbers = view.$('.numbers'); const total = progress.completed.length + progress.in_progress.length - + progress.not_started.length; + + progress.not_started.length; expect(view.$('.progress-heading').html()).toEqual('XSeries Progress'); expect(parseInt($numbers.find('.complete').html(), 10)).toEqual(progress.completed.length); expect(parseInt($numbers.find('.total').html(), 10)).toEqual(total); }; + const testSubscriptionState = (state, heading, body) => { + isSubscriptionEligible = true; + subscriptionData.subscription_state = state; + view = initView(); + body += ' on the Orders and subscriptions page'; + + expect(view.$('.js-subscription-info')[0]).toBeInDOM(); + expect( + view.$('.js-subscription-info .divider-heading').text().trim() + ).toEqual(heading); + expect( + view.$('.js-subscription-info .subscription-section p:nth-child(1)') + ).toContainHtml(body); + expect( + view.$('.js-subscription-info .subscription-section p:nth-child(2)') + ).toContainText( + /Need help\? Check out the.*Learner Help Center.*to troubleshoot issues or contact support/ + ); + expect( + view.$('.js-subscription-info .subscription-section p:nth-child(2) .subscription-link').attr('href') + ).toEqual('/learner'); + }; + const initView = () => new ProgramSidebarView({ el: '.js-program-sidebar', model: programModel, courseModel: courseData, + subscriptionModel: new SubscriptionModel({ + context: { + programData: { + subscription_eligible: isSubscriptionEligible, + subscription_prices: [{ + price: '100.00', + currency: 'USD', + }], + }, + subscriptionData: [subscriptionData], + urls: data.urls, + userPreferences: data.userPreferences, + }, + }), certificateCollection, - programRecordUrl: '/foo/bar', industryPathways: data.industryPathways, creditPathways: data.creditPathways, - programTabViewEnabled: false - + programTabViewEnabled: false, + urls: data.urls, + isSubscriptionEligible, }); beforeEach(() => { @@ -66,6 +107,14 @@ describe('Program Progress View', () => { programModel = new Backbone.Model(data.programData); courseData = new Backbone.Model(data.courseData); certificateCollection = new Backbone.Collection(data.certificateData); + isSubscriptionEligible = false; + subscriptionData = { + trial_end: '1970-01-01T03:25:45Z', + next_payment_date: '1970-06-03T07:12:04Z', + price: '100.00', + currency: 'USD', + subscription_state: 'pre', + }; }); afterEach(() => { @@ -151,14 +200,69 @@ describe('Program Progress View', () => { el: '.js-program-sidebar', model: programModel, courseModel: courseData, + subscriptionModel: new SubscriptionModel({ + context: { + programData: { + subscription_eligible: isSubscriptionEligible, + subscription_prices: [{ + price: '100.00', + currency: 'USD', + }], + }, + subscriptionData: [subscriptionData], + urls: data.urls, + userPreferences: data.userPreferences, + }, + }), certificateCollection, - programRecordUrl: '/foo/bar', industryPathways: [], creditPathways: [], - programTabViewEnabled: false + programTabViewEnabled: false, + urls: data.urls, + isSubscriptionEligible, }); expect(emptyView.$('.program-credit-pathways .divider-heading')).toHaveLength(0); expect(emptyView.$('.program-industry-pathways .divider-heading')).toHaveLength(0); }); + + it('should not render subscription info if program is not subscription eligible', () => { + view = initView(); + expect(view.$('.js-subscription-info')[0]).not.toBeInDOM(); + }); + + it('should render subscription info if program is subscription eligible', () => { + testSubscriptionState( + 'pre', + 'Inactive subscription', + 'If you had a subscription previously, your payment history is still available' + ); + }); + + it('should render active trial subscription info if subscription is active with trial', () => { + subscriptionData.trial_end = moment().add(3, 'days').utc().format( + 'YYYY-MM-DDTHH:mm:ss[Z]' + ); + testSubscriptionState( + 'active', + 'Trial subscription', + 'View your receipts or modify your subscription' + ); + }); + + it('should render active subscription info if subscription active', () => { + testSubscriptionState( + 'active', + 'Active subscription', + 'View your receipts or modify your subscription' + ); + }); + + it('should render inactive subscription info if subscription inactive', () => { + testSubscriptionState( + 'inactive', + 'Inactive subscription', + 'Restart your subscription for $100/month. Your payment history is still available' + ); + }); }); diff --git a/lms/static/js/learner_dashboard/spec/program_details_view_spec.js b/lms/static/js/learner_dashboard/spec/program_details_view_spec.js index 5f4bc71513..60ac335830 100644 --- a/lms/static/js/learner_dashboard/spec/program_details_view_spec.js +++ b/lms/static/js/learner_dashboard/spec/program_details_view_spec.js @@ -1,11 +1,17 @@ /* globals setFixtures */ +import moment from 'moment'; import ProgramDetailsView from '../views/program_details_view'; -describe('Program Details Header View', () => { +describe('Program Details View', () => { let view = null; const options = { programData: { + subscription_eligible: false, + subscription_prices: [{ + price: '100.00', + currency: 'USD', + }], subtitle: '', overview: '', weeks_to_complete: null, @@ -462,11 +468,23 @@ describe('Program Details Header View', () => { }, ], }, + subscriptionData: [ + { + trial_end: '1970-01-01T03:25:45Z', + next_payment_date: '1970-06-03T07:12:04Z', + price: '100.00', + currency: 'USD', + subscription_state: 'pre', + }, + ], urls: { program_listing_url: '/dashboard/programs/', commerce_api_url: '/api/commerce/v0/baskets/', track_selection_url: '/course_modes/choose/', program_record_url: 'http://credentials.example.com/records/programs/UUID', + buy_subscription_url: '/subscriptions', + manage_subscription_url: '/orders', + subscriptions_learner_help_center_url: '/learner', }, userPreferences: { 'pref-lang': 'en', @@ -493,10 +511,36 @@ describe('Program Details Header View', () => { destination_url: 'industry.com', }, ], - programTabViewEnabled: false + programTabViewEnabled: false, + isUserB2CSubscriptionsEnabled: false, }; const data = options.programData; + const testSubscriptionState = (state, heading, body, trial = false) => { + const subscriptionData = { + ...options.subscriptionData[0], + subscription_state: state, + }; + if (trial) { + subscriptionData.trial_end = moment().add(3, 'days').utc().format( + 'YYYY-MM-DDTHH:mm:ss[Z]' + ); + } + view = initView({ + programData: $.extend({}, options.programData, { + subscription_eligible: true, + }), + isUserB2CSubscriptionsEnabled: true, + subscriptionData: [subscriptionData], + }); + view.render(); + expect(view.$('.upgrade-subscription')[0]).toBeInDOM(); + expect(view.$('.upgrade-subscription .upgrade-button')) + .toContainText(heading); + expect(view.$('.upgrade-subscription .subscription-info-brief')) + .toContainText(body); + }; + const initView = (updates) => { const viewOptions = $.extend({}, options, updates); @@ -535,9 +579,9 @@ describe('Program Details Header View', () => { expect(view.$('.program-heading-title').text()).toEqual('Your Program Journey'); expect(view.$('.program-heading-message').text().trim() .replace(/\s+/g, ' ')).toEqual( - 'Track and plan your progress through the 3 courses in this program. ' - + 'To complete the program, you must earn a verified certificate for each course.', - ); + 'Track and plan your progress through the 3 courses in this program. ' + + 'To complete the program, you must earn a verified certificate for each course.', + ); }); it('should render the program heading congratulations message if all courses completed', () => { @@ -553,8 +597,8 @@ describe('Program Details Header View', () => { expect(view.$('.program-heading-title').text()).toEqual('Congratulations!'); expect(view.$('.program-heading-message').text().trim() .replace(/\s+/g, ' ')).toEqual( - 'You have successfully completed all the requirements for the Test Course Title Test.', - ); + 'You have successfully completed all the requirements for the Test Course Title Test.', + ); }); it('should render the course list headings', () => { @@ -645,4 +689,37 @@ describe('Program Details Header View', () => { properties, ); }); + + it('should render the get subscription link if program is subscription eligible', () => { + testSubscriptionState( + 'pre', + 'Start 7-Day free trial', + '$100/month subscription after trial ends. Cancel anytime.' + ); + }); + + it('should render appropriate subscription text when subscription is active with trial', () => { + testSubscriptionState( + 'active', + 'Manage my subscription', + 'Active trial ends', + true + ); + }); + + it('should render appropriate subscription text when subscription is active', () => { + testSubscriptionState( + 'active', + 'Manage my subscription', + 'Your next billing date is' + ); + }); + + it('should render appropriate subscription text when subscription is inactive', () => { + testSubscriptionState( + 'inactive', + 'Restart my subscription', + 'Unlock verified access to all courses for $100/month. Cancel anytime.' + ); + }); }); diff --git a/lms/static/js/learner_dashboard/views/course_card_view.js b/lms/static/js/learner_dashboard/views/course_card_view.js index 679bcfd085..66b82f0ee8 100644 --- a/lms/static/js/learner_dashboard/views/course_card_view.js +++ b/lms/static/js/learner_dashboard/views/course_card_view.js @@ -9,6 +9,8 @@ import ExpiredNotificationView from './expired_notification_view'; import CourseEnrollView from './course_enroll_view'; import EntitlementView from './course_entitlement_view'; +import SubscriptionModel from '../models/program_subscription_model'; + import pageTpl from '../../../templates/learner_dashboard/course_card.underscore'; class CourseCardView extends Backbone.View { @@ -24,6 +26,9 @@ class CourseCardView extends Backbone.View { this.enrollModel = new EnrollModel(); if (options.context) { this.urlModel = new Backbone.Model(options.context.urls); + this.subscriptionModel = new SubscriptionModel({ + context: options.context, + }); this.enrollModel.urlRoot = this.urlModel.get('commerce_api_url'); } this.context = options.context || {}; @@ -86,6 +91,8 @@ class CourseCardView extends Backbone.View { this.upgradeMessage = new UpgradeMessageView({ $el: $upgradeMessage, model: this.model, + subscriptionModel: this.subscriptionModel, + isSubscriptionEligible: this.context.isSubscriptionEligible, }); $certStatus.remove(); diff --git a/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js b/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js index d66681be73..ef5f5a61d5 100644 --- a/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js +++ b/lms/static/js/learner_dashboard/views/program_details_sidebar_view.js @@ -8,6 +8,7 @@ import StringUtils from 'edx-ui-toolkit/js/utils/string-utils'; import CertificateView from './certificate_list_view'; import ProgramProgressView from './progress_circle_view'; +import arrowUprightIcon from '../../../images/arrow-upright-icon.svg'; import sidebarTpl from '../../../templates/learner_dashboard/program_details_sidebar.underscore'; class ProgramDetailsSidebarView extends Backbone.View { @@ -25,23 +26,32 @@ class ProgramDetailsSidebarView extends Backbone.View { this.courseModel = options.courseModel || {}; this.certificateCollection = options.certificateCollection || []; this.programCertificate = this.getProgramCertificate(); - this.programRecordUrl = options.programRecordUrl; this.industryPathways = options.industryPathways; this.creditPathways = options.creditPathways; this.programModel = options.model; + this.subscriptionModel = options.subscriptionModel; this.programTabViewEnabled = options.programTabViewEnabled; + this.isSubscriptionEligible = options.isSubscriptionEligible; + this.urls = options.urls; this.render(); } render() { - const data = $.extend({}, this.model.toJSON(), { - programCertificate: this.programCertificate - ? this.programCertificate.toJSON() : {}, - programRecordUrl: this.programRecordUrl, - industryPathways: this.industryPathways, - creditPathways: this.creditPathways, - programTabViewEnabled: this.programTabViewEnabled - }); + const data = $.extend( + {}, + this.model.toJSON(), + this.subscriptionModel.toJSON(), + { + programCertificate: this.programCertificate + ? this.programCertificate.toJSON() : {}, + industryPathways: this.industryPathways, + creditPathways: this.creditPathways, + programTabViewEnabled: this.programTabViewEnabled, + isSubscriptionEligible: this.isSubscriptionEligible, + arrowUprightIcon, + ...this.urls, + }, + ); HtmlUtils.setHtml(this.$el, this.tpl(data)); this.postRender(); diff --git a/lms/static/js/learner_dashboard/views/program_details_view.js b/lms/static/js/learner_dashboard/views/program_details_view.js index 89c85f54ec..d2f98aee29 100644 --- a/lms/static/js/learner_dashboard/views/program_details_view.js +++ b/lms/static/js/learner_dashboard/views/program_details_view.js @@ -10,6 +10,9 @@ import CourseCardView from './course_card_view'; import HeaderView from './program_header_view'; import SidebarView from './program_details_sidebar_view'; +import SubscriptionModel from '../models/program_subscription_model'; + +import restartIcon from '../../../images/restart-icon.svg'; import pageTpl from '../../../templates/learner_dashboard/program_details_view.underscore'; import tabPageTpl from '../../../templates/learner_dashboard/program_details_tab_view.underscore'; import trackECommerceEvents from '../../commerce/track_ecommerce_events'; @@ -32,9 +35,18 @@ class ProgramDetailsView extends Backbone.View { } else { this.tpl = HtmlUtils.template(pageTpl); } + this.options.isSubscriptionEligible = ( + this.options.isUserB2CSubscriptionsEnabled + && this.options.programData.subscription_eligible + ); this.programModel = new Backbone.Model(this.options.programData); this.courseData = new Backbone.Model(this.options.courseData); - this.certificateCollection = new Backbone.Collection(this.options.certificateData); + this.certificateCollection = new Backbone.Collection( + this.options.certificateData + ); + this.subscriptionModel = new SubscriptionModel({ + context: this.options, + }); this.completedCourseCollection = new CourseCardCollection( this.courseData.get('completed') || [], this.options.userPreferences, @@ -74,6 +86,7 @@ class ProgramDetailsView extends Backbone.View { this.options.urls.buy_button_url, this.options.programData ); + let data = { totalCount, inProgressCount, @@ -85,9 +98,14 @@ class ProgramDetailsView extends Backbone.View { creditPathways: this.options.creditPathways, discussionFragment: this.options.discussionFragment, live_fragment: this.options.live_fragment, - + isSubscriptionEligible: this.options.isSubscriptionEligible, + restartIcon, }; - data = $.extend(data, this.programModel.toJSON()); + data = $.extend( + data, + this.programModel.toJSON(), + this.subscriptionModel.toJSON(), + ); HtmlUtils.setHtml(this.$el, this.tpl(data)); this.postRender(); } @@ -132,11 +150,13 @@ class ProgramDetailsView extends Backbone.View { el: '.js-program-sidebar', model: this.programModel, courseModel: this.courseData, + subscriptionModel: this.subscriptionModel, certificateCollection: this.certificateCollection, - programRecordUrl: this.options.urls.program_record_url, industryPathways: this.options.industryPathways, creditPathways: this.options.creditPathways, programTabViewEnabled: this.options.programTabViewEnabled, + isSubscriptionEligible: this.options.isSubscriptionEligible, + urls: this.options.urls, }); let hasIframe = false; $('#live-tab').click(() => { diff --git a/lms/static/js/learner_dashboard/views/program_header_view.js b/lms/static/js/learner_dashboard/views/program_header_view.js index 72aef926fe..1c34b844de 100644 --- a/lms/static/js/learner_dashboard/views/program_header_view.js +++ b/lms/static/js/learner_dashboard/views/program_header_view.js @@ -40,10 +40,21 @@ class ProgramHeaderView extends Backbone.View { return logo; } + getIsSubscribed() { + const isSubscriptionEligible = this.model.get('isSubscriptionEligible'); + const subscriptionData = this.model.get('subscriptionData')?.[0]; + + return ( + isSubscriptionEligible && + subscriptionData?.subscription_state === 'active' + ); + } + render() { const data = $.extend(this.model.toJSON(), { breakpoints: this.breakpoints, logo: this.getLogo(), + isSubscribed: this.getIsSubscribed(), }); if (this.model.get('programData')) { diff --git a/lms/static/js/learner_dashboard/views/upgrade_message_view.js b/lms/static/js/learner_dashboard/views/upgrade_message_view.js index 43c2f09d04..1715182989 100644 --- a/lms/static/js/learner_dashboard/views/upgrade_message_view.js +++ b/lms/static/js/learner_dashboard/views/upgrade_message_view.js @@ -3,12 +3,18 @@ import Backbone from 'backbone'; import HtmlUtils from 'edx-ui-toolkit/js/utils/html-utils'; import upgradeMessageTpl from '../../../templates/learner_dashboard/upgrade_message.underscore'; +import upgradeMessageSubscriptionTpl from '../../../templates/learner_dashboard/upgrade_message_subscription.underscore'; import trackECommerceEvents from '../../commerce/track_ecommerce_events'; class UpgradeMessageView extends Backbone.View { initialize(options) { - this.messageTpl = HtmlUtils.template(upgradeMessageTpl); + if (options.isSubscriptionEligible) { + this.messageTpl = HtmlUtils.template(upgradeMessageSubscriptionTpl); + } else { + this.messageTpl = HtmlUtils.template(upgradeMessageTpl); + } this.$el = options.$el; + this.subscriptionModel = options.subscriptionModel; this.render(); const courseUpsellButtons = this.$el.find('.program_dashboard_course_upsell_button'); @@ -20,7 +26,11 @@ class UpgradeMessageView extends Backbone.View { } render() { - const data = this.model.toJSON(); + const data = $.extend( + {}, + this.model.toJSON(), + this.subscriptionModel.toJSON(), + ); HtmlUtils.setHtml(this.$el, this.messageTpl(data)); } } diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss index e7fe41b839..6394caf6d2 100644 --- a/lms/static/sass/views/_program-details.scss +++ b/lms/static/sass/views/_program-details.scss @@ -434,6 +434,34 @@ $btn-color-primary: $primary-dark; } } + .upgrade-subscription { + margin: 10px 15px 10px 5px; + gap: 15px; + } + + .subscription-icon-restart { + width: 24px; + height: 24px; + margin-inline-end: 8px; + } + + .subscription-icon-arrow-upright { + display: inline-flex; + align-items: center; + width: 15px; + height: 15px; + margin-inline-start: 8px; + } + + .subscription-info-brief { + font-size: 0.9375em; + color: $gray-500; + } + + .subscription-info-upsell { + margin-top: 0.25rem; + font-size: 0.8125em; + } .program-course-card { width: 100%; @@ -631,12 +659,25 @@ $btn-color-primary: $primary-dark; .program-sidebar { padding: 40px 40px 40px 0px; - .program-record { + .program-record,.subscription-info { text-align: left; padding-bottom: 2em; } - .motivating-section { + .subscription-section { + display: flex; + flex-direction: column; + gap: 16px; + color: #414141; + + .subscription-link { + color: inherit; + text-decoration: none; + border-bottom: 1px solid currentColor; + } + } + + .sidebar-section { font-size: 0.9375em; width: auto; diff --git a/lms/templates/learner_dashboard/program_details_fragment.html b/lms/templates/learner_dashboard/program_details_fragment.html index 70571ca80f..d27b5e4467 100644 --- a/lms/templates/learner_dashboard/program_details_fragment.html +++ b/lms/templates/learner_dashboard/program_details_fragment.html @@ -14,6 +14,7 @@ from openedx.core.djangolib.js_utils import ( <%static:webpack entry="ProgramDetailsFactory"> ProgramDetailsFactory({ programData: ${program_data | n, dump_js_escaped_json}, + subscriptionData: ${program_subscription_data | n, dump_js_escaped_json}, courseData: ${course_data | n, dump_js_escaped_json}, certificateData: ${certificate_data | n, dump_js_escaped_json}, urls: ${urls | n, dump_js_escaped_json}, @@ -21,6 +22,7 @@ ProgramDetailsFactory({ industryPathways: ${industry_pathways | n, dump_js_escaped_json}, creditPathways: ${credit_pathways | n, dump_js_escaped_json}, programTabViewEnabled: ${program_tab_view_enabled | n, dump_js_escaped_json}, + isUserB2CSubscriptionsEnabled: ${is_user_b2c_subscriptions_enabled | n, dump_js_escaped_json}, discussionFragment: ${discussion_fragment, | n, dump_js_escaped_json}, live_fragment: ${live_fragment, | n, dump_js_escaped_json} }); diff --git a/lms/templates/learner_dashboard/program_details_sidebar.underscore b/lms/templates/learner_dashboard/program_details_sidebar.underscore index aa51bc724d..3146127dde 100644 --- a/lms/templates/learner_dashboard/program_details_sidebar.underscore +++ b/lms/templates/learner_dashboard/program_details_sidebar.underscore @@ -8,14 +8,61 @@ <% } %> +<% if (isSubscriptionEligible) { %> + +<% } %>