Skip to content

Commit

Permalink
feat: add clearer return to dashboard on GS registration confirmation…
Browse files Browse the repository at this point in the history
… page (#890)
  • Loading branch information
jajjibhai008 authored Dec 15, 2023
1 parent 12b1c2c commit 5998662
Show file tree
Hide file tree
Showing 3 changed files with 93 additions and 80 deletions.
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { React, useContext } from 'react';
import { Container } from '@edx/paragon';
import { Button, Container, Hyperlink } from '@edx/paragon';
import { AppContext } from '@edx/frontend-platform/react';
import { getConfig } from '@edx/frontend-platform/config';

import { useExternalEnrollmentFailureReason, useMinimalCourseMetadata } from '../data/hooks';
import { useExternalEnrollmentFailureReason, useIsCourseAssigned, useMinimalCourseMetadata } from '../data/hooks';
import CourseSummaryCard from '../../executive-education-2u/components/CourseSummaryCard';
import EnrollmentCompletedSummaryCard from '../../executive-education-2u/components/EnrollmentCompletedSummaryCard';
import ErrorPageContent from '../../executive-education-2u/components/ErrorPageContent';
import { CourseContext } from '../CourseContextProvider';
import { UserSubsidyContext } from '../../enterprise-user-subsidy';

const ExternalCourseEnrollmentConfirmation = () => {
const courseMetadata = useMinimalCourseMetadata();
Expand All @@ -19,6 +22,20 @@ const ExternalCourseEnrollmentConfirmation = () => {
failureMessage,
} = useExternalEnrollmentFailureReason();

const config = getConfig();
const {
enterpriseConfig: { authOrgId, slug },
} = useContext(AppContext);
const { redeemableLearnerCreditPolicies } = useContext(UserSubsidyContext);
const isCourseAssigned = useIsCourseAssigned(redeemableLearnerCreditPolicies?.learnerContentAssignments, course?.key);
const externalDashboardQueryParams = new URLSearchParams({
org_id: authOrgId,
});
const externalDashboardQueryString = externalDashboardQueryParams ? `?${externalDashboardQueryParams.toString()}` : '';
const externalDashboardUrl = `${config.GETSMARTER_LEARNER_DASHBOARD_URL}${externalDashboardQueryString ?? ''}`;
const enterpriseSlug = `/${slug}`;
const dashboardUrl = `${config.BASE_URL}${enterpriseSlug}`;
const getStudnetTCUrl = config.GETSMARTER_STUDENT_TC_URL;
return (
<div className="fill-vertical-space page-light-bg">
{failureReason ? (
Expand All @@ -28,13 +45,25 @@ const ExternalCourseEnrollmentConfirmation = () => {
failureMessage={failureMessage}
/>
) : (
<Container size="lg" className="py-5">
<Container size="lg" className="py-5 d-flex flex-column">
<h2 className="mb-3">Congratulations, you have completed your enrollment for your online course</h2>
<Button
as={Hyperlink}
className="mb-3 ml-auto"
destination={dashboardUrl}
>
Go to dashboard
</Button>
<CourseSummaryCard
courseMetadata={courseMetadata}
enrollmentCompleted
/>
<EnrollmentCompletedSummaryCard courseKey={course?.key} />
<EnrollmentCompletedSummaryCard
isCourseAssigned={isCourseAssigned}
externalDashboardUrl={externalDashboardUrl}
dashboardUrl={dashboardUrl}
getStudnetTCUrl={getStudnetTCUrl}
/>
</Container>
)}
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,4 @@ describe('EnrollmentCompleted', () => {
expect(screen.getByText(8)).toBeInTheDocument();
expect(screen.getByText('Start date:')).toBeInTheDocument();
});
it('renders get smarter learner dashboard URL on enrollment.', () => {
renderWithRouter(<EnrollmentCompletedWrapper />);
expect(
screen.getByRole('link', { name: 'GetSmarter learner dashboard in a new tab' }),
).toHaveAttribute('href', 'https://getsmarter.example.com/account?org_id=test-enterprise-slug');
});
});
Original file line number Diff line number Diff line change
@@ -1,85 +1,75 @@
import React, { useContext } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import {
Card, Col, Hyperlink, Row,
} from '@edx/paragon';
import { getConfig } from '@edx/frontend-platform/config';
import { AppContext } from '@edx/frontend-platform/react';
import GetSmarterLogo from '../../../assets/icons/get-smarter-logo-black.svg';
import { UserSubsidyContext } from '../../enterprise-user-subsidy';
import { useIsCourseAssigned } from '../../course/data/hooks';
import { features } from '../../../config';

const EnrollmentCompletedSummaryCard = ({ courseKey }) => {
const config = getConfig();
const {
enterpriseConfig: { authOrgId, slug },
} = useContext(AppContext);
const { redeemableLearnerCreditPolicies } = useContext(UserSubsidyContext);
const isCourseAssigned = useIsCourseAssigned(redeemableLearnerCreditPolicies?.learnerContentAssignments, courseKey);
const externalDashboardQueryParams = new URLSearchParams({ org_id: authOrgId });
const externalDashboardQueryString = externalDashboardQueryParams ? `?${externalDashboardQueryParams.toString()}` : '';
const externalDashboardUrl = `${config.GETSMARTER_LEARNER_DASHBOARD_URL}${externalDashboardQueryString ?? ''}`;
const enterpriseSlug = `/${slug}`;
const dashboardUrl = `${config.BASE_URL}${enterpriseSlug}`;

return (
<Card className="bg-light-500">
<Row className="my-3">
<Col xs={12} md={3}>
<Card.Section>
<img
className="d-block"
src={GetSmarterLogo}
alt="partner-header-logo"
data-testid="partner-header-logo-image-id"
/>
</Card.Section>
</Col>
<Col xs={12} md={9}>
<Card.Section>
<div className="h3 mb-4">What happens next?</div>
<div className="mb-3.5">
<div className="mb-1.5 text-black-color">Notified by email</div>
<div className="small mb-2 text-gray-500">
GetSmarter will email you when your course starts. Alternatively, you can visit your{' '}
<Hyperlink
destination={(features.FEATURE_ENABLE_TOP_DOWN_ASSIGNMENT && isCourseAssigned)
? dashboardUrl : externalDashboardUrl}
target="_blank"
>
{(features.FEATURE_ENABLE_TOP_DOWN_ASSIGNMENT && isCourseAssigned) ? 'edX dashboard' : 'GetSmarter learner dashboard'}
</Hyperlink>
{' '}for course status updates.
</div>
const EnrollmentCompletedSummaryCard = ({
isCourseAssigned,
externalDashboardUrl,
dashboardUrl,
getStudnetTCUrl,
}) => (
<Card className="bg-light-500">
<Row className="my-3">
<Col xs={12} md={3}>
<Card.Section>
<img
className="d-block"
src={GetSmarterLogo}
alt="partner-header-logo"
data-testid="partner-header-logo-image-id"
/>
</Card.Section>
</Col>
<Col xs={12} md={9}>
<Card.Section>
<div className="h3 mb-4">What happens next?</div>
<div className="mb-3.5">
<div className="mb-1.5 text-black-color">Notified by email</div>
<div className="small mb-2 text-gray-500">
GetSmarter will email you when your course starts. Alternatively, you can visit your{' '}
<Hyperlink
destination={(features.FEATURE_ENABLE_TOP_DOWN_ASSIGNMENT && isCourseAssigned)
? dashboardUrl : externalDashboardUrl}
target="_blank"
>
{(features.FEATURE_ENABLE_TOP_DOWN_ASSIGNMENT && isCourseAssigned) ? 'edX dashboard' : 'GetSmarter learner dashboard'}
</Hyperlink>
{' '}for course status updates.
</div>
</div>
<div className="mb-3.5">
<div className="mb-1.5 text-black-color">Read the refund policy</div>
<div className="small text-gray-500">
As part of our commitment to your professional development, you may request to change
your course start date or request your money back if you&apos;re not fully satisfied with
14 calendar days of your course start date.
</div>
<div className="mb-3.5">
<div className="mb-1.5 text-black-color">Read the refund policy</div>
<div className="small text-gray-500">
As part of our commitment to your professional development, you may request to change
your course start date or request your money back if you&apos;re not fully satisfied with
14 calendar days of your course start date.
</div>
<div className="small mb-2 text-gray-500">
Read GetSmarter&apos;s{' '}
<Hyperlink
destination={config.GETSMARTER_STUDENT_TC_URL}
target="_blank"
>
Terms and Conditions
</Hyperlink>
<div className="small mb-2 text-gray-500">
Read GetSmarter&apos;s{' '}
<Hyperlink
destination={getStudnetTCUrl}
target="_blank"
>
Terms and Conditions
</Hyperlink>
&nbsp;for the full course postponement and cancellation policy.
</div>
</div>
</Card.Section>
</Col>
</Row>
</Card>
);
};
</div>
</Card.Section>
</Col>
</Row>
</Card>
);

EnrollmentCompletedSummaryCard.propTypes = {
courseKey: PropTypes.string.isRequired,
isCourseAssigned: PropTypes.bool.isRequired,
externalDashboardUrl: PropTypes.string.isRequired,
dashboardUrl: PropTypes.string.isRequired,
getStudnetTCUrl: PropTypes.string.isRequired,
};

export default EnrollmentCompletedSummaryCard;

0 comments on commit 5998662

Please sign in to comment.