diff --git a/src/components/journeys/editor-journey/editor-journey.jsx b/src/components/journeys/editor-journey/editor-journey.jsx index b225c1c2f76..4dd2bcc1727 100644 --- a/src/components/journeys/editor-journey/editor-journey.jsx +++ b/src/components/journeys/editor-journey/editor-journey.jsx @@ -3,96 +3,13 @@ const {driver} = require('driver.js'); const FlexRow = require('../../flex-row/flex-row.jsx'); const Button = require('../../forms/button.jsx'); const DriverJourney = require('../driver-journey/driver-journey.jsx'); -const {defineMessages, useIntl} = require('react-intl'); +const {useIntl} = require('react-intl'); const {useMemo, useState, useCallback} = require('react'); const PropTypes = require('prop-types'); const {triggerAnalyticsEvent} = require('../../../lib/onboarding.js'); require('./editor-journey.scss'); -const messages = defineMessages({ - createStepTitle: { - id: 'gui.journey.controls.create', - defaultMessage: 'Create', - description: 'Create step title' - }, - projectGenreStepTitle: { - id: 'gui.journey.controls.choose.projectGenre', - defaultMessage: 'What do you want to create?', - description: 'Choose project genre step title' - }, - typeStepTitle: { - id: 'gui.journey.controls.choose.type', - defaultMessage: 'Which type?', - description: 'Choose project type step title' - }, - startStepTitle: { - id: 'gui.journey.controls.choose.start', - defaultMessage: 'How do you want to start?', - description: 'Choose way to start step title' - }, - gameButtonText: { - id: 'gui.journey.controls.game', - defaultMessage: 'Game', - description: 'Game button text' - }, - animiationButtonText: { - id: 'gui.journey.controls.animation', - defaultMessage: 'Animation', - description: 'Animation button text' - }, - musicButtonText: { - id: 'gui.journey.controls.music', - defaultMessage: 'Music', - description: 'Music button text' - }, - clickerGameButtonText: { - id: 'gui.journey.controls.game.clicker', - defaultMessage: 'Clicker Game', - description: 'Clicker game button text' - }, - pongGameButtonText: { - id: 'gui.journey.controls.game.pong', - defaultMessage: 'Pong Game', - description: 'Pong game button text' - }, - characterAnimationButtonText: { - id: 'gui.journey.controls.animation.character', - defaultMessage: 'Animate a character', - description: 'Animate a character button text' - }, - flyAnimationButtonText: { - id: 'gui.journey.controls.animation.fly', - defaultMessage: 'Make it fly', - description: 'Make it fly animation button text' - }, - recordSoundButtonText: { - id: 'gui.journey.controls.music.record', - defaultMessage: 'Record a sound', - description: 'Record a sound button text' - }, - makeMusicButtonText: { - id: 'gui.journey.controls.music.make', - defaultMessage: 'Make music', - description: 'Make music button text' - }, - tutorialButtonText: { - id: 'gui.journey.controls.tutorial', - defaultMessage: 'Tutorial', - description: 'Tutorial button text' - }, - starterProjectButtonText: { - id: 'gui.journey.controls.starterProject', - defaultMessage: 'Starter project', - description: 'Starter project button text' - }, - onMyOwnButtonText: { - id: 'gui.journey.controls.onMyOwn', - defaultMessage: 'On my own', - description: 'On my own button text' - } -}); - const STEP_NAMES = [ 'pick-genre-step', 'game-step', @@ -154,15 +71,15 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou }, [driverObj]); const createStep = useCallback((projectId, tutorialId) => ({ - title: intl.formatMessage(messages.createStepTitle), + title: intl.formatMessage({id: 'project.journey.controls.create'}), showButtons: ['close'], sectionComponents: { description: { triggerAnalyticsEvent({ event: 'editor-journey-step', @@ -175,7 +92,7 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou }, { imgSrc: '/images/onboarding-journeys/Starter-Projects-Icon.svg', - text: intl.formatMessage(messages.starterProjectButtonText), + text: intl.formatMessage({id: 'project.journey.controls.starterProject'}), handleOnClick: () => { location.href = `/projects/${projectId}?showJourney=true`; setShowJourney(false); @@ -184,7 +101,7 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou }, { imgSrc: '/images/onboarding-journeys/On-Own-Icon.svg', - text: intl.formatMessage(messages.onMyOwnButtonText), + text: intl.formatMessage({id: 'project.journey.controls.onMyOwn'}), handleOnClick: () => { triggerAnalyticsEvent({ event: 'editor-journey-step', @@ -217,25 +134,25 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou }, steps: [{ popover: { - title: intl.formatMessage(messages.createStepTitle), + title: intl.formatMessage({id: 'project.journey.controls.create'}), showButtons: ['close'], sectionComponents: { description: pickStep(1, 'Games') }, { imgSrc: '/images/onboarding-journeys/Animation-Icon.svg', - text: intl.formatMessage(messages.animiationButtonText), + text: intl.formatMessage({id: 'project.journey.controls.animation'}), handleOnClick: () => pickStep(2, 'Animation') }, { imgSrc: '/images/onboarding-journeys/Music-Icon.svg', - text: intl.formatMessage(messages.musicButtonText), + text: intl.formatMessage({id: 'project.journey.controls.music'}), handleOnClick: () => pickStep(3, 'Music') } ]} @@ -245,20 +162,20 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou }, { popover: { - title: intl.formatMessage(messages.createStepTitle), + title: intl.formatMessage({id: 'project.journey.controls.create'}), showButtons: ['close'], sectionComponents: { description: pickStep(4, 'Clicker-Game') }, { imgSrc: '/images/onboarding-journeys/Pong-Game.jpg', - text: intl.formatMessage(messages.pongGameButtonText), + text: intl.formatMessage({id: 'project.journey.controls.game.pong'}), handleOnClick: () => pickStep(5, 'Pong-Game') } ]} @@ -268,20 +185,20 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou }, { popover: { - title: intl.formatMessage(messages.createStepTitle), + title: intl.formatMessage({id: 'project.journey.controls.create'}), showButtons: ['close'], sectionComponents: { description: pickStep(6, 'Character-Animation') }, { imgSrc: '/images/onboarding-journeys/Fly-Animation.jpg', - text: intl.formatMessage(messages.flyAnimationButtonText), + text: intl.formatMessage({id: 'project.journey.controls.animation.fly'}), handleOnClick: () => pickStep(7, 'Fly-Animation') } ]} @@ -291,20 +208,20 @@ const EditorJourney = ({onActivateDeck, setCanViewTutorialsHighlight, setShowJou }, { popover: { - title: intl.formatMessage(messages.createStepTitle), + title: intl.formatMessage({id: 'project.journey.controls.create'}), showButtons: ['close'], sectionComponents: { description: pickStep(8, 'Record-Music') }, { imgSrc: '/images/onboarding-journeys/Make-Music.jpg', - text: intl.formatMessage(messages.makeMusicButtonText), + text: intl.formatMessage({id: 'project.journey.controls.music.make'}), handleOnClick: () => pickStep(9, 'Make-Music') } ]} diff --git a/src/components/journeys/project-journey/project-journey.jsx b/src/components/journeys/project-journey/project-journey.jsx index ec7f7303461..3e983bbad43 100644 --- a/src/components/journeys/project-journey/project-journey.jsx +++ b/src/components/journeys/project-journey/project-journey.jsx @@ -1,24 +1,11 @@ const React = require('react'); const {driver} = require('driver.js'); const DriverJourney = require('../driver-journey/driver-journey.jsx'); -const {defineMessages, useIntl} = require('react-intl'); +const {useIntl} = require('react-intl'); const {useState} = require('react'); const PropTypes = require('prop-types'); require('../common-journey.scss'); -const messages = defineMessages({ - playProject: { - id: 'project.journey.play', - defaultMessage: 'Click the green flag to see what this project does.', - description: 'Play project' - }, - remixProject: { - id: 'project.journey.remix', - defaultMessage: 'Make your own version!', - description: 'Remix project' - } -}); - const ProjectJourney = ({setCanViewProjectJourney, setShouldStopProject}) => { const [driverObj] = useState(() => ( driver() @@ -40,7 +27,7 @@ const ProjectJourney = ({setCanViewProjectJourney, setShouldStopProject}) => { }, 8000); }); }, - description: intl.formatMessage(messages.playProject) + description: intl.formatMessage({id: 'project.journey.play'}) } }, { @@ -53,7 +40,7 @@ const ProjectJourney = ({setCanViewProjectJourney, setShouldStopProject}) => { driverObj.destroy(); }); }, - description: intl.formatMessage(messages.remixProject) + description: intl.formatMessage({id: 'project.journey.remix'}) } }]; diff --git a/src/components/journeys/tutorials-highlight/tutorials-highlight.jsx b/src/components/journeys/tutorials-highlight/tutorials-highlight.jsx index b722a5c0b56..e16f99c9bb1 100644 --- a/src/components/journeys/tutorials-highlight/tutorials-highlight.jsx +++ b/src/components/journeys/tutorials-highlight/tutorials-highlight.jsx @@ -1,19 +1,11 @@ const React = require('react'); const {driver} = require('driver.js'); const DriverJourney = require('../driver-journey/driver-journey.jsx'); -const {defineMessages, useIntl} = require('react-intl'); +const {useIntl} = require('react-intl'); const PropTypes = require('prop-types'); const {useState} = require('react'); require('../common-journey.scss'); -const messages = defineMessages({ - tutorialsHighlight: { - id: 'gui.highlight.tutorials', - defaultMessage: 'Click here for tutorials', - description: 'Tutorials highlight' - } -}); - const TutorialsHighlight = ({setCanViewTutorialsHighlight}) => { const [driverObj] = useState(() => ( driver() @@ -33,7 +25,7 @@ const TutorialsHighlight = ({setCanViewTutorialsHighlight}) => { }); }, side: 'bottom', - description: intl.formatMessage(messages.tutorialsHighlight) + description: intl.formatMessage({id: 'project.highlight.tutorials'}) } }]; diff --git a/src/views/preview/l10n.json b/src/views/preview/l10n.json index e54594781d0..64febb77c4a 100644 --- a/src/views/preview/l10n.json +++ b/src/views/preview/l10n.json @@ -48,5 +48,24 @@ "project.usernameBlockAlert": "This project can detect who is using it, through the \"username\" block. To hide your identity, sign out before using the project.", "project.inappropriateUpdate": "Hmm...the bad word detector thinks there is a problem with your text. Please change it and remember to be respectful.", "project.mutedAddToStudio": "You will be able to add to studios again {inDuration}.", - "project.cloudDataAndVideoAlert": "For privacy reasons, cloud variables have been disabled in this project because it contains video sensing blocks." + "project.cloudDataAndVideoAlert": "For privacy reasons, cloud variables have been disabled in this project because it contains video sensing blocks.", + "project.journey.controls.create": "Create", + "project.journey.controls.choose.projectGenre": "What do you want to create?", + "project.journey.controls.choose.type": "Which type?", + "project.journey.controls.choose.start": "How do you want to start?", + "project.journey.controls.game": "Game", + "project.journey.controls.animation": "Animation", + "project.journey.controls.music": "Music", + "project.journey.controls.game.clicker": "Clicker Game", + "project.journey.controls.game.pong": "Pong Game", + "project.journey.controls.animation.character": "Animate a character", + "project.journey.controls.animation.fly": "Make it fly", + "project.journey.controls.music.record": "Record a sound", + "project.journey.controls.music.make": "Make music", + "project.journey.controls.tutorial": "Tutorial", + "project.journey.controls.starterProject": "Starter project", + "project.journey.controls.onMyOwn": "On my own", + "project.highlight.tutorials": "Click here for tutorials", + "project.journey.play": "Click the green flag to see what this project does.", + "project.journey.remix": "Make your own version!" }