120 lines
3.9 KiB
JavaScript
120 lines
3.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { AppContext } from '@edx/frontend-platform/react';
|
|
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
|
|
import { connect } from 'react-redux';
|
|
import { Button, Hyperlink } from '@openedx/paragon';
|
|
|
|
import { betaLanguageBannerSelector } from './data/selectors';
|
|
import messages from './AccountSettingsPage.messages';
|
|
import { saveSettings } from './data/actions';
|
|
import { TRANSIFEX_LANGUAGE_BASE_URL } from './data/constants';
|
|
import Alert from './Alert';
|
|
|
|
class BetaLanguageBanner extends React.Component {
|
|
getSiteLanguageEntry(languageCode) {
|
|
return this.props.siteLanguageList.filter(l => l.code === languageCode)[0];
|
|
}
|
|
|
|
/**
|
|
* Returns a link to the Transifex URL where contributors can provide translations.
|
|
* This code is tightly coupled to how Transifex chooses to design its URLs.
|
|
*/
|
|
getTransifexLink(languageCode) {
|
|
return TRANSIFEX_LANGUAGE_BASE_URL + this.getTransifexURLPath(languageCode);
|
|
}
|
|
|
|
/**
|
|
* Returns the URL path that Transifex chooses to use for its language sub-pages.
|
|
*
|
|
* For extended language codes, it returns the 2nd half capitalized, replacing
|
|
* hyphen (-) with underscore (_).
|
|
* example: pt-br -> pt_BR
|
|
*
|
|
* For short language codes, it returns the code as is.
|
|
* example: fr -> fr
|
|
*/
|
|
getTransifexURLPath(languageCode) {
|
|
const tokenizedCode = languageCode.split('-');
|
|
if (tokenizedCode.length > 1) {
|
|
return `${tokenizedCode[0]}_${tokenizedCode[1].toUpperCase()}`;
|
|
}
|
|
return tokenizedCode[0];
|
|
}
|
|
|
|
handleRevertLanguage = () => {
|
|
const previousSiteLanguage = this.props.siteLanguage.previousValue;
|
|
this.props.saveSettings('siteLanguage', previousSiteLanguage);
|
|
};
|
|
|
|
render() {
|
|
const savedLanguage = this.getSiteLanguageEntry(this.context.locale);
|
|
if (!savedLanguage) {
|
|
return null;
|
|
}
|
|
const isSavedLanguageReleased = savedLanguage.released === true;
|
|
const noPreviousLanguageSet = this.props.siteLanguage.previousValue === null;
|
|
if (isSavedLanguageReleased || noPreviousLanguageSet) {
|
|
return null;
|
|
}
|
|
|
|
const previousLanguage = this.getSiteLanguageEntry(this.props.siteLanguage.previousValue);
|
|
return (
|
|
<div>
|
|
<Alert className="beta_language_alert alert alert-warning" role="alert">
|
|
<p>
|
|
{this.props.intl.formatMessage(messages['account.settings.banner.beta.language'], {
|
|
beta_language: savedLanguage.name,
|
|
})}
|
|
</p>
|
|
<div>
|
|
<Button onClick={this.handleRevertLanguage} className="mr-2">
|
|
{this.props.intl.formatMessage(
|
|
messages['account.settings.banner.beta.language.action.switch.back'],
|
|
{ previous_language: previousLanguage.name },
|
|
)}
|
|
</Button>
|
|
<Hyperlink
|
|
destination={this.getTransifexLink(savedLanguage.code)}
|
|
className="btn btn-outline-secondary"
|
|
target="_blank"
|
|
>
|
|
{this.props.intl.formatMessage(
|
|
messages['account.settings.banner.beta.language.action.help.translate'],
|
|
{ beta_language: savedLanguage.name },
|
|
)}
|
|
</Hyperlink>
|
|
</div>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
BetaLanguageBanner.contextType = AppContext;
|
|
|
|
BetaLanguageBanner.propTypes = {
|
|
intl: intlShape.isRequired,
|
|
siteLanguage: PropTypes.shape({
|
|
previousValue: PropTypes.string,
|
|
draft: PropTypes.string,
|
|
}),
|
|
siteLanguageList: PropTypes.arrayOf(PropTypes.shape({
|
|
name: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
code: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
released: PropTypes.bool,
|
|
})).isRequired,
|
|
saveSettings: PropTypes.func.isRequired,
|
|
};
|
|
|
|
BetaLanguageBanner.defaultProps = {
|
|
siteLanguage: null,
|
|
};
|
|
|
|
export default connect(
|
|
betaLanguageBannerSelector,
|
|
{
|
|
saveSettings,
|
|
},
|
|
)(injectIntl(BetaLanguageBanner));
|