scratch-www/src/views/download/download.jsx

255 lines
11 KiB
React
Raw Normal View History

const FormattedMessage = require('react-intl').FormattedMessage;
const injectIntl = require('react-intl').injectIntl;
const intlShape = require('react-intl').intlShape;
const React = require('react');
2017-03-31 19:35:33 -04:00
const FlexRow = require('../../components/flex-row/flex-row.jsx');
2018-12-10 17:33:22 -05:00
const bindAll = require('lodash.bindall');
const Steps = require('../../components/steps/steps.jsx');
const Step = require('../../components/steps/step.jsx');
2017-03-31 19:35:33 -04:00
const Page = require('../../components/page/www/page.jsx');
const render = require('../../lib/render.jsx');
2018-12-10 17:33:22 -05:00
const OS_ENUM = require('../../components/extension-landing/os-enum.js');
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
2017-04-06 10:40:46 -04:00
require('./download.scss');
2017-05-03 16:19:56 -04:00
require('../../components/forms/button.scss');
2017-04-01 10:55:47 -04:00
class Download extends React.Component {
constructor (props) {
super(props);
2018-12-10 17:33:22 -05:00
bindAll(this, [
'onSetOS'
]);
2018-12-10 17:33:22 -05:00
let detectedOS = OS_ENUM.WINDOWS;
if (window.navigator && window.navigator.platform) {
if (window.navigator.platform === 'MacIntel') {
detectedOS = OS_ENUM.MACOS;
}
}
this.state = {
2018-12-10 17:33:22 -05:00
OS: detectedOS
};
}
2018-12-10 17:33:22 -05:00
onSetOS (os) {
this.setState({
OS: os
});
}
2018-12-10 17:33:22 -05:00
render () {
2017-04-01 10:55:47 -04:00
return (
<div className="download">
2018-12-10 17:33:22 -05:00
<div className="download-header">
<FlexRow className="inner">
<FlexRow className="column download-info">
<FlexRow className="column download-copy">
<h1 className="download-title">
<img
alt=""
className="self-center"
height="40"
src="/images/download/placeholder.png"
width="40"
/>
<FormattedMessage id="download.title" />
2018-12-10 17:33:22 -05:00
</h1>
<span className="download-description">
<FormattedMessage id="download.intro" />
</span>
2018-12-10 17:33:22 -05:00
</FlexRow>
<FlexRow className="column download-requirements-container">
<span className="requirements-header">
<FormattedMessage id="download.requirements" />
</span>
<FlexRow className="download-requirements">
<span>
<img
alt=""
src="/svgs/extensions/windows.svg"
/>
Windows 10+
</span>
<span>
<img
alt=""
src="svgs/extensions/mac.svg"
/>
macOS 10.13+
</span>
</FlexRow>
</FlexRow>
2018-12-10 17:33:22 -05:00
</FlexRow>
<div className="download-image">
<img
alt={this.props.intl.formatMessage({id: 'download.imgAltDownloadIllustration'})}
src="/images/download/download.png"
/>
</div>
2018-12-10 17:33:22 -05:00
</FlexRow>
</div>
<OSChooser
currentOS={this.state.OS}
handleSetOS={this.onSetOS}
/>
<div className="blue install-scratch">
<FlexRow className="inner column">
<h2 className="title">
2018-12-10 18:49:03 -05:00
<FormattedMessage id="download.installHeaderTitle" />
</h2>
2018-12-10 17:33:22 -05:00
<Steps>
<div className="step">
<Step
compact
number={1}
>
<span className="step-description">
<FormattedMessage id="download.downloadAndInstall" />
</span>
<div className="downloads-container">
<a
href={
this.state.OS === OS_ENUM.WINDOWS ?
'FILL ME IN' :
''
}
target="_blank"
>
<img
alt=""
className="store-badge"
src={`/images/scratchlink/${
this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
}-store-badge.svg`}
/>
</a>
</div>
</Step>
2017-05-20 00:24:18 -04:00
2018-12-10 17:33:22 -05:00
</div>
<Step
compact
number={2}
>
2018-12-10 17:33:22 -05:00
<span className="step-description">
<FormattedMessage id="download.startScratchDesktop" />
2018-12-10 17:33:22 -05:00
</span>
<div className="step-image">
<img
alt=""
className="screenshot"
src={`/images/scratchlink/${
this.state.OS === OS_ENUM.WINDOWS ? 'windows' : 'mac'
}-toolbar.png`}
/>
</div>
</Step>
</Steps>
</FlexRow>
</div>
<div className="download-section faq">
<FlexRow className="inner column">
<h2 className="title">
<FormattedMessage id="download.troubleshootingTitle" />
</h2>
<h3 className="faq-question">
<FormattedMessage id="download.howDoIInstall" />
</h3>
<p>
You will need to install lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<h3 className="faq-question">
<FormattedMessage id="download.whenSupportLinux" />
</h3>
<p>
<FormattedMessage id="download.supportLinuxAnswer" />
</p>
<h3 className="faq-question">
<FormattedMessage id="download.supportChromeOS" />
</h3>
2018-12-10 17:33:22 -05:00
<p>
<FormattedMessage id="download.supportChromeOSAnswer" />
2018-12-10 17:33:22 -05:00
</p>
<h3 className="faq-question">
2018-12-10 18:35:17 -05:00
{ this.state.OS === OS_ENUM.WINDOWS ?
<FormattedMessage id="download.cannotAccessWindowsStore" /> :
<FormattedMessage id="download.cannotAccessMacStore" />
}
</h3>
2018-12-10 17:33:22 -05:00
<p>
2018-12-10 18:35:17 -05:00
<FormattedMessage
id="download.appstoreAccessAnswer"
values={{
directDownloadLink: (
<a href="">
<FormattedMessage id="download.directDownloadText" />
</a>
)
}}
/>
2018-12-10 17:33:22 -05:00
</p>
</FlexRow>
</div>
<div className="download-section blue">
<FlexRow className="inner column">
<h2 className="title">
<FormattedMessage id="download.olderVersionsTitle" />
</h2>
<h3 className="faq-question">
<FormattedMessage id="download.olderVersions" />
</h3>
2018-12-10 17:33:22 -05:00
<FlexRow>
<div className="older-version">
<img
alt=""
className="screenshot"
height="106"
src="/images/download/scratch1-4.png"
width="150"
/>
<p>
<a className="centered" href="/scratch_1.4">
<FormattedMessage id="download.scratch1-4Desktop" />
2018-12-10 17:33:22 -05:00
<img src="images/download/r-arrow.svg" />
</a>
</p>
</div>
<div className="older-version">
<img
alt=""
className="screenshot"
height="106"
src="/images/download/scratch2.png"
width="150"
/>
<p>
<a className="centered" href="/download/scratch2">
2018-12-10 17:33:22 -05:00
<FormattedMessage id="download.scratch2Desktop" />
<img src="images/download/r-arrow.svg" />
</a>
</p>
</div>
</FlexRow>
</FlexRow>
2017-04-01 10:55:47 -04:00
</div>
</div>
);
2018-12-10 17:33:22 -05:00
2017-04-01 10:55:47 -04:00
}
}
Download.propTypes = {
intl: intlShape
2018-12-10 17:33:22 -05:00
};
const WrappedDownload = injectIntl(Download);
2017-04-01 10:55:47 -04:00
render(<Page><WrappedDownload /></Page>, document.getElementById('app'));