/* eslint-disable max-len */ import React from 'react'; import PropTypes from 'prop-types'; import { MailtoLink, Hyperlink } from '@edx/paragon'; import { CheckCircle } from '@edx/paragon/icons'; import { useIntl } from '@edx/frontend-platform/i18n'; import { utilHooks, reduxHooks } from 'hooks'; import Banner from 'components/Banner'; import messages from './messages'; const { useFormatDate } = utilHooks; export const CertificateBanner = ({ cardId }) => { const certificate = reduxHooks.useCardCertificateData(cardId); const { isAudit, isVerified, } = reduxHooks.useCardEnrollmentData(cardId); const { isPassing } = reduxHooks.useCardGradeData(cardId); const { isArchived } = reduxHooks.useCardCourseRunData(cardId); const { minPassingGrade, progressUrl } = reduxHooks.useCardCourseRunData(cardId); const { supportEmail, billingEmail } = reduxHooks.usePlatformSettingsData(); const { formatMessage } = useIntl(); const formatDate = useFormatDate(); const emailLink = address => {address}; if (certificate.isRestricted) { return ( { supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)} {isVerified && ' '} {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))} ); } if (certificate.isDownloadable) { return ( {formatMessage(messages.certReady)} {certificate.certPreviewUrl && ( <> {' '} {formatMessage(messages.viewCertificate)} )} ); } if (!isPassing) { if (isAudit) { return ( {formatMessage(messages.passingGrade, { minPassingGrade })} ); } if (isArchived) { return ( {formatMessage(messages.notEligibleForCert)} {' '} {formatMessage(messages.viewGrades)} ); } return ( {formatMessage(messages.certMinGrade, { minPassingGrade })} ); } if (certificate.isEarnedButUnavailable) { return ( {formatMessage( messages.gradeAndCertReadyAfter, { availableDate: formatDate(certificate.availableDate) }, )} ); } return null; }; CertificateBanner.propTypes = { cardId: PropTypes.string.isRequired, }; export default CertificateBanner;