-
-
-
-
-
- ),
- macOSVersionLink: (
-
-
-
- )
- }}
- />
-
+ {isDownloaded(this.state.OS) && (
+
+
+
+
+
+
+ ),
+ macOSVersionLink: (
+
+
+
+ )
+ }}
+ />
+
+
+ )}
}
renderRequirements={
-
-
- 
- Windows 10 version 1709+
-
-
- 
- macOS 10.13+
-
-
- 
- Bluetooth 4.0
-
-
- 
- Scratch Link
-
-
+
}
/>
-
+ {(isDownloaded(this.state.OS)) && (
+
+ )}
+ {(isFromGooglePlay(this.state.OS)) && (
+
+ )}
@@ -117,20 +97,25 @@ class GdxFor extends ExtensionLanding {
/>
-
- Scratch
-
- )
- }}
- />
+ {isDownloaded(this.state.OS) && (
+
+ Scratch
+
+ )
+ }}
+ />
+ )}
+ {isFromGooglePlay(this.state.OS) && (
+
+ )}
@@ -221,32 +206,36 @@ class GdxFor extends ExtensionLanding {
-
-
-
-
-
- ),
- macOSVersionLink: (
-
-
-
- )
- }}
- />
-
+ {isDownloaded(this.state.OS) && (
+
+
+
+
+
+
+ ),
+ macOSVersionLink: (
+
+
+
+ )
+ }}
+ />
+
+
+ )}
diff --git a/src/views/join/join.jsx b/src/views/join/join.jsx
index ebb4019fc..4b2b9e6b5 100644
--- a/src/views/join/join.jsx
+++ b/src/views/join/join.jsx
@@ -1,16 +1,30 @@
const React = require('react');
const render = require('../../lib/render.jsx');
-const JoinModal = require('../../components/modal/join/modal.jsx');
+const Scratch3Registration = require('../../components/registration/scratch3-registration.jsx');
const ErrorBoundary = require('../../components/errorboundary/errorboundary.jsx');
// Require this even though we don't use it because, without it, webpack runs out of memory...
const Page = require('../../components/page/www/page.jsx'); // eslint-disable-line no-unused-vars
-const openModal = true;
+require('./join.scss');
const Register = () => (
-
+
+ 
+
+
+
+
);
diff --git a/src/views/join/join.scss b/src/views/join/join.scss
new file mode 100644
index 000000000..9aefc03fa
--- /dev/null
+++ b/src/views/join/join.scss
@@ -0,0 +1,29 @@
+@import "../../frameless";
+
+.join {
+ position: absolute;
+ z-index: 1000;
+ top: 12px;
+ left: 12px;
+ left: calc(25% - 76px);
+
+ .logo {
+ width: 76px;
+ }
+}
+
+@media #{$small} {
+ .join {
+ left: calc(50% - 38px);
+ }
+}
+@media #{$medium} {
+ .join {
+ left: calc(50% - 38px);
+ }
+}
+@media #{$intermediate} {
+ .join {
+ left: calc(50% - 38px);
+ }
+}
diff --git a/src/views/microbit/l10n.json b/src/views/microbit/l10n.json
index fd97d6ef6..4b57e29c2 100644
--- a/src/views/microbit/l10n.json
+++ b/src/views/microbit/l10n.json
@@ -7,6 +7,7 @@
"microbit.downloadCardsTitle": "Download micro:bit Cards",
"microbit.downloadHex": "Download the Scratch micro:bit HEX file",
"microbit.dragDropHex": "Drag and drop the HEX file onto your micro:bit",
+ "microbit.installHexAndroid": "Please follow the instructions to install the HEX file on a computer running Windows, MacOS or ChromeOS.",
"microbit.connectingMicrobit": "Connecting micro:bit to Scratch",
"microbit.powerMicrobit": "Power your micro:bit with USB or a battery pack.",
"microbit.useScratch3": "Use the {scratch3Link} editor.",
diff --git a/src/views/microbit/microbit.jsx b/src/views/microbit/microbit.jsx
index 1b36c4ba3..9e9beda27 100644
--- a/src/views/microbit/microbit.jsx
+++ b/src/views/microbit/microbit.jsx
@@ -10,19 +10,21 @@ const render = require('../../lib/render.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
+const {isDownloaded, isFromGooglePlay} = require('../../components/install-scratch/install-util.js');
const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
+const InstallScratch = require('../../components/install-scratch/install-scratch.jsx');
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
const Button = require('../../components/forms/button.jsx');
const Steps = require('../../components/steps/steps.jsx');
const Step = require('../../components/steps/step.jsx');
-const OS_ENUM = require('../../components/extension-landing/os-enum.js');
+const OS_ENUM = require('../../lib/os-enum.js');
require('../../components/extension-landing/extension-landing.scss');
require('./microbit.scss');
@@ -59,90 +61,96 @@ class MicroBit extends ExtensionLanding {
src="/images/microbit/microbit-heart.png"
/>}
renderRequirements={
-
-
-
- Windows 10 version 1709+
-
-
-
- macOS 10.13+
-
-
-
- Bluetooth 4.0
-
-
-
- Scratch Link
-
-
+
}
/>
-
+ {(isDownloaded(this.state.OS)) && (
+
+ )}
+ {(isFromGooglePlay(this.state.OS)) && (
+
+ )}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ {this.state.OS !== OS_ENUM.ANDROID && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {this.state.OS === OS_ENUM.ANDROID && (
+
+
+
+
+
+
+
+ )}
+
@@ -166,20 +174,25 @@ class MicroBit extends ExtensionLanding {
/>
-
- Scratch
-
- )
- }}
- />
+ {isDownloaded(this.state.OS) && (
+
+ Scratch
+
+ )
+ }}
+ />
+ )}
+ {isFromGooglePlay(this.state.OS) && (
+
+ )}
@@ -307,32 +320,36 @@ class MicroBit extends ExtensionLanding {
-
-
-
-
-
- ),
- macOSVersionLink: (
-
-
-
- )
- }}
- />
-
+ {isDownloaded(this.state.OS) && (
+
+
+
+
+
+
+ ),
+ macOSVersionLink: (
+
+
+
+ )
+ }}
+ />
+
+
+ )}
diff --git a/src/views/preview/meta.jsx b/src/views/preview/meta.jsx
index 57d0758a3..d526515a1 100644
--- a/src/views/preview/meta.jsx
+++ b/src/views/preview/meta.jsx
@@ -4,7 +4,7 @@ const Helmet = require('react-helmet').default;
const projectShape = require('./projectshape.jsx').projectShape;
const Meta = props => {
- const {title, instructions, author} = props.projectInfo;
+ const {id, title, instructions, author} = props.projectInfo;
// Do not want to render any meta tags unless all the info is loaded
// Check only author (object) because it is ok to have empty string instructions
@@ -29,6 +29,10 @@ const Meta = props => {
content={truncatedInstructions}
property="og:description"
/>
+
);
};
diff --git a/src/views/teachers/landing/landing.jsx b/src/views/teachers/landing/landing.jsx
index 3b59db7a4..d4b0ac937 100644
--- a/src/views/teachers/landing/landing.jsx
+++ b/src/views/teachers/landing/landing.jsx
@@ -276,7 +276,7 @@ const Landing = props => (
id="teacherlanding.codeClub"
values={{
codeClubLink: (
-
+
)
diff --git a/src/views/wedo2/wedo2.jsx b/src/views/wedo2/wedo2.jsx
index 21506aa64..3a4714cfe 100644
--- a/src/views/wedo2/wedo2.jsx
+++ b/src/views/wedo2/wedo2.jsx
@@ -9,6 +9,7 @@ const render = require('../../lib/render.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const OSChooser = require('../../components/os-chooser/os-chooser.jsx');
+const {isDownloaded, isFromGooglePlay} = require('../../components/install-scratch/install-util.js');
const ExtensionLanding = require('../../components/extension-landing/extension-landing.jsx');
const ExtensionHeader = require('../../components/extension-landing/extension-header.jsx');
@@ -16,6 +17,7 @@ const ExtensionVideo = require('../../components/extension-landing/extension-vid
const ExtensionRequirements = require('../../components/extension-landing/extension-requirements.jsx');
const ExtensionSection = require('../../components/extension-landing/extension-section.jsx');
const InstallScratchLink = require('../../components/extension-landing/install-scratch-link.jsx');
+const InstallScratch = require('../../components/install-scratch/install-scratch.jsx');
const ProjectCard = require('../../components/extension-landing/project-card.jsx');
const Steps = require('../../components/steps/steps.jsx');
@@ -57,45 +59,23 @@ class Wedo2 extends ExtensionLanding {
/>
}
renderRequirements={
-
-
-
- Windows 10 version 1709+
-
-
-
- macOS 10.13+
-
-
-
- Bluetooth 4.0
-
-
-
- Scratch Link
-
-
+
}
/>
-
+ {(isDownloaded(this.state.OS)) && (
+
+ )}
+ {(isFromGooglePlay(this.state.OS)) && (
+
+ )}
@@ -110,20 +90,25 @@ class Wedo2 extends ExtensionLanding {
/>
-
- Scratch
-
- )
- }}
- />
+ {isDownloaded(this.state.OS) && (
+
+ Scratch
+
+ )
+ }}
+ />
+ )}
+ {isFromGooglePlay(this.state.OS) && (
+
+ )}
@@ -207,32 +192,36 @@ class Wedo2 extends ExtensionLanding {
-
-
-
-
-
- ),
- macOSVersionLink: (
-
-
-
- )
- }}
- />
-
+ {isDownloaded(this.state.OS) && (
+
+
+
+
+
+
+ ),
+ macOSVersionLink: (
+
+
+
+ )
+ }}
+ />
+
+
+ )}
diff --git a/static/images/badges/google-play-badge.png b/static/images/badges/google-play-badge.png
new file mode 100644
index 000000000..27392d217
Binary files /dev/null and b/static/images/badges/google-play-badge.png differ
diff --git a/static/images/scratchlink/mac-store-badge.svg b/static/images/badges/mac-store-badge.svg
similarity index 100%
rename from static/images/scratchlink/mac-store-badge.svg
rename to static/images/badges/mac-store-badge.svg
diff --git a/static/images/scratchlink/windows-store-badge.svg b/static/images/badges/windows-store-badge.svg
similarity index 100%
rename from static/images/scratchlink/windows-store-badge.svg
rename to static/images/badges/windows-store-badge.svg
diff --git a/static/images/ev3/chromeos-enter-passcode.png b/static/images/ev3/chromeos-enter-passcode.png
new file mode 100644
index 000000000..0177172ec
Binary files /dev/null and b/static/images/ev3/chromeos-enter-passcode.png differ
diff --git a/static/images/microbit/chromeos-copy-hex.png b/static/images/microbit/chromeos-copy-hex.png
new file mode 100644
index 000000000..8e6ad6115
Binary files /dev/null and b/static/images/microbit/chromeos-copy-hex.png differ
diff --git a/static/svgs/download/mac-badge.svg b/static/svgs/download/mac-badge.svg
new file mode 100755
index 000000000..072b425a1
--- /dev/null
+++ b/static/svgs/download/mac-badge.svg
@@ -0,0 +1,46 @@
+
diff --git a/static/svgs/download/ms-badge.svg b/static/svgs/download/ms-badge.svg
new file mode 100755
index 000000000..21c139edd
--- /dev/null
+++ b/static/svgs/download/ms-badge.svg
@@ -0,0 +1,82 @@
+
+
+
diff --git a/static/svgs/extensions/android.svg b/static/svgs/extensions/android.svg
new file mode 100644
index 000000000..2a13660a3
--- /dev/null
+++ b/static/svgs/extensions/android.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/static/svgs/extensions/chromeos.svg b/static/svgs/extensions/chromeos.svg
new file mode 100644
index 000000000..a26c55c29
--- /dev/null
+++ b/static/svgs/extensions/chromeos.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/test/unit/components/email-step.test.jsx b/test/unit/components/email-step.test.jsx
index b49ae09c6..73a84e857 100644
--- a/test/unit/components/email-step.test.jsx
+++ b/test/unit/components/email-step.test.jsx
@@ -50,6 +50,7 @@ describe('EmailStep test', () => {
expect(emailInputWrapper.props().onSetRef).toEqual(formikWrapper.instance().handleSetEmailRef);
expect(emailInputWrapper.props().validate).toEqual(formikWrapper.instance().validateEmail);
});
+
test('props sent to FormikCheckbox for subscribe', () => {
const wrapper = shallowWithIntl();
// Dive to get past the intl wrapper
@@ -63,6 +64,7 @@ describe('EmailStep test', () => {
expect(checkboxWrapper.first().props().label).toEqual('registration.receiveEmails');
expect(checkboxWrapper.first().props().name).toEqual('subscribe');
});
+
test('handleValidSubmit passes formData to next step', () => {
const formikBag = {
setSubmitting: jest.fn()
@@ -82,6 +84,7 @@ describe('EmailStep test', () => {
expect(formikBag.setSubmitting).toHaveBeenCalledWith(false);
expect(global.grecaptcha.execute).toHaveBeenCalled();
});
+
test('captchaSolved sets token and goes to next step', () => {
const props = {
onNextStep: jest.fn()
@@ -116,6 +119,38 @@ describe('EmailStep test', () => {
}));
expect(formikBag.setSubmitting).toHaveBeenCalledWith(true);
});
+
+ test('onCaptchaError calls error function with correct message', () => {
+ const props = {
+ onRegistrationError: jest.fn()
+ };
+
+ const wrapper = shallowWithIntl(
+ );
+
+ const formikWrapper = wrapper.dive();
+ formikWrapper.instance().onCaptchaError();
+ expect(props.onRegistrationError).toHaveBeenCalledWith('registation.troubleReload');
+ });
+
+ test('Captcha load error calls error function', () => {
+ const props = {
+ onRegistrationError: jest.fn()
+ };
+ // Set this to null to force an error.
+ global.grecaptcha = null;
+ const wrapper = shallowWithIntl(
+ );
+
+ const formikWrapper = wrapper.dive();
+ formikWrapper.instance().onCaptchaLoad();
+ expect(props.onRegistrationError).toHaveBeenCalledWith('registation.troubleReload');
+ });
+
test('validateEmail test email empty', () => {
const wrapper = shallowWithIntl(
);
@@ -123,6 +158,7 @@ describe('EmailStep test', () => {
const val = formikWrapper.instance().validateEmail('');
expect(val).toBe('general.required');
});
+
test('validateEmail test email null', () => {
const wrapper = shallowWithIntl(
);
@@ -130,6 +166,7 @@ describe('EmailStep test', () => {
const val = formikWrapper.instance().validateEmail(null);
expect(val).toBe('general.required');
});
+
test('validateEmail test email undefined', () => {
const wrapper = shallowWithIntl(
);
diff --git a/test/unit/components/join-flow.test.jsx b/test/unit/components/join-flow.test.jsx
index 80dfe5a14..04cb1a6dc 100644
--- a/test/unit/components/join-flow.test.jsx
+++ b/test/unit/components/join-flow.test.jsx
@@ -126,6 +126,19 @@ describe('JoinFlow', () => {
expect(joinFlowInstance.props.refreshSession).not.toHaveBeenCalled();
expect(joinFlowInstance.state.registrationError).toBe('registration.generalError (400)');
});
+ test('handleRegistrationError with no message ', () => {
+ const joinFlowInstance = getJoinFlowWrapper().instance();
+ joinFlowInstance.setState({});
+ joinFlowInstance.handleRegistrationError();
+ expect(joinFlowInstance.state.registrationError).toBe('registration.generalError');
+ });
+
+ test('handleRegistrationError with message ', () => {
+ const joinFlowInstance = getJoinFlowWrapper().instance();
+ joinFlowInstance.setState({});
+ joinFlowInstance.handleRegistrationError('my message');
+ expect(joinFlowInstance.state.registrationError).toBe('my message');
+ });
test('handleAdvanceStep', () => {
const joinFlowInstance = getJoinFlowWrapper().instance();
diff --git a/test/unit/components/modal.test.jsx b/test/unit/components/modal.test.jsx
new file mode 100644
index 000000000..6c427dc2f
--- /dev/null
+++ b/test/unit/components/modal.test.jsx
@@ -0,0 +1,34 @@
+const React = require('react');
+const {shallowWithIntl} = require('../../helpers/intl-helpers.jsx');
+const Modal = require('../../../src/components/modal/base/modal.jsx');
+
+describe('Modal', () => {
+ test('Close button not shown when showCloseButton false', () => {
+ const showClose = true;
+ const component = shallowWithIntl(
+
+ );
+ expect(component.find('div.modal-content-close').exists()).toBe(true);
+ expect(component.find('img.modal-content-close-img').exists()).toBe(true);
+ });
+ test('Close button shown by default', () => {
+ const component = shallowWithIntl(
+
+ );
+ expect(component.find('div.modal-content-close').exists()).toBe(true);
+ expect(component.find('img.modal-content-close-img').exists()).toBe(true);
+ });
+
+ test('Close button shown when showCloseButton true', () => {
+ const showClose = false;
+ const component = shallowWithIntl(
+
+ );
+ expect(component.find('div.modal-content-close').exists()).toBe(false);
+ expect(component.find('img.modal-content-close-img').exists()).toBe(false);
+ });
+});
+ ChromeOS
+
+
+ 
+ Android 5.0+
+
+ 
+ 
+ 
+ 
+ 
- }
+ ) : (
+ 
- 
+ 
+ 
- 
+ 
+ 
+