fix: move texts to transifex so they can be sent to transifex

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: <EditorJourneyDescription
-                title={intl.formatMessage(messages.startStepTitle)}
+                title={intl.formatMessage({id: 'project.journey.controls.choose.start'})}
                 descriptionData={[
                     {
                         imgSrc: '/images/onboarding-journeys/Tutorials-Icon.svg',
-                        text: intl.formatMessage(messages.tutorialButtonText),
+                        text: intl.formatMessage({id: 'project.journey.controls.tutorial'}),
                         handleOnClick: () => {
                             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: <EditorJourneyDescription
-                            title={intl.formatMessage(messages.projectGenreStepTitle)}
+                            title={intl.formatMessage({id: 'project.journey.controls.choose.projectGenre'})}
                             descriptionData={[
                                 {
                                     imgSrc: '/images/onboarding-journeys/Games-Icon.svg',
-                                    text: intl.formatMessage(messages.gameButtonText),
+                                    text: intl.formatMessage({id: 'project.journey.controls.game'}),
                                     handleOnClick: () => 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: <EditorJourneyDescription
-                            title={intl.formatMessage(messages.typeStepTitle)}
+                            title={intl.formatMessage({id: 'project.journey.controls.choose.type'})}
                             descriptionData={[
                                 {
                                     imgSrc: '/images/onboarding-journeys/Clicker-Game.jpg',
-                                    text: intl.formatMessage(messages.clickerGameButtonText),
+                                    text: intl.formatMessage({id: 'project.journey.controls.game.clicker'}),
                                     handleOnClick: () => 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: <EditorJourneyDescription
-                            title={intl.formatMessage(messages.typeStepTitle)}
+                            title={intl.formatMessage({id: 'project.journey.controls.choose.type'})}
                             descriptionData={[
                                 {
                                     imgSrc: '/images/onboarding-journeys/Character-Animation.jpg',
-                                    text: intl.formatMessage(messages.characterAnimationButtonText),
+                                    text: intl.formatMessage({id: 'project.journey.controls.animation.character'}),
                                     handleOnClick: () => 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: <EditorJourneyDescription
-                            title={intl.formatMessage(messages.typeStepTitle)}
+                            title={intl.formatMessage({id: 'project.journey.controls.choose.type'})}
                             descriptionData={[
                                 {
                                     imgSrc: '/images/onboarding-journeys/Record-Music.jpg',
-                                    text: intl.formatMessage(messages.recordSoundButtonText),
+                                    text: intl.formatMessage({id: 'project.journey.controls.music.record'}),
                                     handleOnClick: () => 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')
                                 }
                             ]}

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'})
         }
     }];
 

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'})
         }
     }];
 

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!"
 }