Skip to content

Commit

Permalink
feat: Updated Disclaimer screen with trial option
Browse files Browse the repository at this point in the history
  • Loading branch information
@rijuma
rijuma committed Dec 10, 2024
1 parent c40ee8d commit 42a496b
Show file tree
Hide file tree
Showing 7 changed files with 397 additions and 25 deletions.
52 changes: 49 additions & 3 deletions src/components/Disclosure/Disclosure.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,29 @@

.disclosure {
height: 100%;

overflow-y: auto;
background-color: variables.$dark-green;
font-family: Inter, Arial, sans-serif;
padding: 2rem;

h2 {
font-size: 2rem;
font-size: 1.375rem;
}

h3 {
font-family: "Roboto Mono", Inter, Arial, sans-serif;
color: variables.$accent-yellow;
margin-bottom: 3rem;
}

small {
font-size: 0.875rem;
}

.bullet-icon {
width: 2rem;
height: 2rem;
margin-right: 1rem;
}

p {
Expand All @@ -30,6 +43,39 @@
}

.disclaimer {
font-size: 1rem;
font-size: 0.75rem;
margin-bottom: 7.5rem;
}

.trial-period {
padding: 3px;
background: #2D494E;
border-radius: 0.8125rem;
background-image:
linear-gradient(#2D494E, #2D494E),
linear-gradient(to right, #E76F3F, #EBA7BC);
background-origin: border-box;
background-clip: content-box, border-box;

&-content {
padding: 0.8125rem;
}

.bullet-icon {
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;

svg path {
fill: #E98B7E;
}
}
}

.trial-upgrade {
background: #D74000;
border-radius: 99rem;
font-size: 0.875rem;
}
}

54 changes: 54 additions & 0 deletions src/components/Disclosure/Disclosure.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { render } from '../../utils/utils.test';

import TrialDisclosure from '.';

const PRIVACY_POLICY_URL = 'https://some.url/policy';
jest.mock('@edx/frontend-platform/config', () => ({
ensureConfig: jest.fn(),
getConfig: () => ({ PRIVACY_POLICY_URL }),
}));

describe('<TrialDisclosure />', () => {
let container;

describe('When trial upgrade is not being showed', () => {
beforeEach(() => {
({ container } = render(<TrialDisclosure><span>Children</span></TrialDisclosure>));
});

it('should have a link to the privacy policy url', () => {
const link = screen.queryByText('privacy policy');

expect(link).toBeInTheDocument();
expect(link).toHaveAttribute('href', PRIVACY_POLICY_URL);
});

it('should not show the trial message', () => {
const upgrade = screen.queryByText('Free trial, then upgrade course for full access to Xpert features.');

expect(upgrade).not.toBeInTheDocument();
});

it('should match snapshot', () => {
expect(container).toMatchSnapshot();
});
});

describe('When trial upgrade being showed', () => {
beforeEach(() => {
({ container } = render(<TrialDisclosure showTrial><span>Children</span></TrialDisclosure>));
});

it('should show the trial message', () => {
const upgrade = screen.queryByText('Free trial, then upgrade course for full access to Xpert features.');

expect(upgrade).toBeInTheDocument();
});

it('should match snapshot', () => {
expect(container).toMatchSnapshot();
});
});
});
239 changes: 239 additions & 0 deletions src/components/Disclosure/__snapshots__/Disclosure.test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<TrialDisclosure /> When trial upgrade being showed should match snapshot 1`] = `
<div>
<div
class="disclosure d-flex flex-column align-items-stretch"
>
<h2
class="text-light-100"
>
Xpert Learning Assistant
</h2>
<h3
class="small py-2"
>
An AI-powered educational tool
</h3>
<div
class="d-flex flex-column"
>
<div
class="text-light-100 d-flex flex-row mb-3"
>
<span
class="pgn__icon bullet-icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 17c-.83 0-1.5-.67-1.5-1.5h3c0 .83-.67 1.5-1.5 1.5zm3-2.5H9V15h6v1.5zm-.03-2.5H9.03A4.966 4.966 0 0 1 7 10c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.64-.8 3.09-2.03 4z"
fill="currentColor"
/>
</svg>
</span>
<div>
Understand a concept
<br />
<small>
“How does photosynthesis work?”
</small>
</div>
</div>
<div
class="text-light-100 d-flex flex-row mb-4"
>
<span
class="pgn__icon bullet-icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 4v7H5.17l-.59.59-.58.58V4h11Zm1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1Zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1Z"
fill="currentColor"
/>
</svg>
</span>
<div>
Summarize your learning
<br />
<small>
“Can you help me review pivot tables?”
</small>
</div>
</div>
</div>
<div
class="trial-period"
>
<div
class="trial-period-content"
>
<div
class="d-flex flex-row text-light-100"
>
<span
class="pgn__icon bullet-icon bullet-icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19 9 1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z"
fill="currentColor"
/>
</svg>
</span>
<small>
Free trial, then upgrade course for full access to Xpert features.
</small>
</div>
<button
class="trial-upgrade mt-3 btn btn-primary btn-block"
type="button"
>
Upgrade now
</button>
</div>
</div>
<p
class="disclaimer small text-light-100 py-3"
>
Note: This chat is AI generated, mistakes are possible. By using it you agree that edX may create a record of this chat. Your personal data will be used as described in our  
<a
class="pgn__hyperlink default-link standalone-link privacy-policy-link text-light-100"
href="https://some.url/policy"
target="_self"
>
privacy policy
</a>
.
</p>
<span>
Children
</span>
</div>
</div>
`;

exports[`<TrialDisclosure /> When trial upgrade is not being showed should match snapshot 1`] = `
<div>
<div
class="disclosure d-flex flex-column align-items-stretch"
>
<h2
class="text-light-100"
>
Xpert Learning Assistant
</h2>
<h3
class="small py-2"
>
An AI-powered educational tool
</h3>
<div
class="d-flex flex-column"
>
<div
class="text-light-100 d-flex flex-row mb-3"
>
<span
class="pgn__icon bullet-icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 17c-.83 0-1.5-.67-1.5-1.5h3c0 .83-.67 1.5-1.5 1.5zm3-2.5H9V15h6v1.5zm-.03-2.5H9.03A4.966 4.966 0 0 1 7 10c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.64-.8 3.09-2.03 4z"
fill="currentColor"
/>
</svg>
</span>
<div>
Understand a concept
<br />
<small>
“How does photosynthesis work?”
</small>
</div>
</div>
<div
class="text-light-100 d-flex flex-row mb-4"
>
<span
class="pgn__icon bullet-icon"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15 4v7H5.17l-.59.59-.58.58V4h11Zm1-2H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1Zm5 4h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1Z"
fill="currentColor"
/>
</svg>
</span>
<div>
Summarize your learning
<br />
<small>
“Can you help me review pivot tables?”
</small>
</div>
</div>
</div>
<p
class="disclaimer small text-light-100 py-3"
>
Note: This chat is AI generated, mistakes are possible. By using it you agree that edX may create a record of this chat. Your personal data will be used as described in our  
<a
class="pgn__hyperlink default-link standalone-link privacy-policy-link text-light-100"
href="https://some.url/policy"
target="_self"
>
privacy policy
</a>
.
</p>
<span>
Children
</span>
</div>
</div>
`;
Loading

0 comments on commit 42a496b

Please sign in to comment.