New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Install Xpert chatbot from frontend-lib-learning-assistant. #1166
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { createPortal } from 'react-dom'; | ||
import PropTypes from 'prop-types'; | ||
|
||
import { Xpert } from '@edx/frontend-lib-learning-assistant'; | ||
import { injectIntl } from '@edx/frontend-platform/i18n'; | ||
|
||
const Chat = ({ | ||
enabled, | ||
enrollmentMode, | ||
isStaff, | ||
courseId, | ||
}) => { | ||
const VERIFIED_MODES = [ | ||
'professional', | ||
'verified', | ||
'no-id-professional', | ||
'credit', | ||
'masters', | ||
'executive-education', | ||
]; | ||
|
||
const isVerifiedEnrollmentMode = ( | ||
enrollmentMode !== null | ||
&& enrollmentMode !== undefined | ||
&& VERIFIED_MODES.some(mode => mode === enrollmentMode) | ||
); | ||
|
||
const shouldDisplayChat = ( | ||
enabled | ||
&& (isVerifiedEnrollmentMode || isStaff) // display only to non-audit or staff | ||
); | ||
|
||
return ( | ||
<> | ||
{/* Use a portal to ensure that component overlay does not compete with learning MFE styles. */} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thank you adding this comment! |
||
{shouldDisplayChat && (createPortal( | ||
<Xpert courseId={courseId} />, | ||
document.body, | ||
))} | ||
</> | ||
); | ||
}; | ||
|
||
Chat.propTypes = { | ||
isStaff: PropTypes.bool.isRequired, | ||
enabled: PropTypes.bool.isRequired, | ||
enrollmentMode: PropTypes.string, | ||
courseId: PropTypes.string.isRequired, | ||
}; | ||
|
||
Chat.defaultProps = { | ||
enrollmentMode: null, | ||
}; | ||
|
||
export default injectIntl(Chat); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not sure if this is really necessary, since there's no text to internationalize right now. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'd prefer to read these values from the Redux store, but it'll make testing more difficult because I'll have to set up that part of the Redux store, so I've chosen to use props here in the interest of getting this out more quickly.