Skip to content

Commit

Permalink
feat: Updated Disclaimer screen with trial option (#73)
Browse files Browse the repository at this point in the history 
* feat: Updated Disclaimer screen with trial option

* feat: Added trial url and days to the chat intro (#74)

* feat: Added trial url and days to the chat intro

* feat: Updated some logic for the useCourseUpgrade() hook

* fix: Applied suggestion from Code Review

Co-authored-by: Alison Langston <46360176+alangsto@users.noreply.github.com>

* chore: Added unit tests for useCourseUpgrade() and useTrackEvent() hooks

* chore: Updated Disclosure unit tests

* chore: fixed tests

* chore: Updated based on Code Review

---------

Co-authored-by: Alison Langston <46360176+alangsto@users.noreply.github.com>
  • Loading branch information
@rijuma @alangsto
rijuma and alangsto authored Dec 16, 2024
1 parent 56d4bbf commit 3ba5f9d
Show file tree
Hide file tree
Showing 18 changed files with 857 additions and 66 deletions.
61 changes: 58 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,31 @@

.disclosure {
height: 100%;

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

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 +45,46 @@
}

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

.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;
}

.pgn__form-group {
margin: 0;
}
.pgn__form-control-decorator-group {
margin: 0;
}
}

256 changes: 256 additions & 0 deletions src/components/Disclosure/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<TrialDisclosure /> When trial upgrade being shown should match snapshot 1`] = `
<div>
<section
class="disclosure d-flex flex-column align-items-stretch"
>
<h2
class="text-light-100"
>
Xpert Learning Assistant
</h2>
<div
class="info"
>
<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
data-testid="free-days-label"
>
Free for
7 days
, then upgrade course for full access to Xpert features.
</small>
</div>
<a
class="trial-upgrade mt-3 btn btn-primary btn-block"
data-testid="upgrade-cta"
href="https://upgrade.edx/course/test"
>
Upgrade now
</a>
</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>
</div>
<footer>
<span>
Children
</span>
</footer>
</section>
</div>
`;

exports[`<TrialDisclosure /> When trial upgrade is not being shown should match snapshot 1`] = `
<div>
<section
class="disclosure d-flex flex-column align-items-stretch"
>
<h2
class="text-light-100"
>
Xpert Learning Assistant
</h2>
<div
class="info"
>
<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>
</div>
<footer>
<span>
Children
</span>
</footer>
</section>
</div>
`;
Loading

0 comments on commit 3ba5f9d

Please sign in to comment.