fix(client): use translations json for button text (#54737)

Co-authored-by: Naomi <commits@nhcarrigan.com>

client/i18n/locales/english/translations.json

@@ -72,7 +72,11 @@
     "update-email": "Update my Email",
     "verify-email": "Verify Email",
     "submit-and-go": "Submit and go to next challenge",
+    "submit-and-go-2": "Submit and go to next challenge (Ctrl + Enter)",
+    "submit-and-go-3": "Submit and go to next challenge (Command + Enter)",
     "go-to-next": "Go to next challenge",
+    "go-to-next-2": "Go to next challenge (Ctrl + Enter)",
+    "go-to-next-3": "Go to next challenge (Command + Enter)",
     "ask-later": "Ask me later",
     "start-coding": "Start coding!",
     "go-to-settings": "Go to settings to claim your certification",

client/src/templates/Challenges/components/completion-modal.tsx

@@ -25,7 +25,7 @@ import {
 import Progress from '../../../components/Progress';
 import GreenPass from '../../../assets/icons/green-pass';
 import { Spacer } from '../../../components/helpers';
-
+import { MAX_MOBILE_WIDTH } from '../../../../config/misc';
 import './completion-modal.css';
 import callGA from '../../../analytics/call-ga';
 
@@ -166,6 +166,25 @@ class CompletionModal extends Component<
 
     const isMacOS = navigator.userAgent.includes('Mac OS');
 
+    const isDesktop = window.innerWidth > MAX_MOBILE_WIDTH;
+
+    let buttonText;
+    if (isDesktop) {
+      if (isMacOS) {
+        buttonText = isSignedIn
+          ? t('buttons.submit-and-go-3')
+          : t('buttons.go-to-next-3');
+      } else {
+        buttonText = isSignedIn
+          ? t('buttons.submit-and-go-2')
+          : t('buttons.go-to-next-2');
+      }
+    } else {
+      buttonText = isSignedIn
+        ? t('buttons.submit-and-go')
+        : t('buttons.go-to-next');
+    }
+
     return (
       <Modal
         onClose={close}
@@ -200,10 +219,7 @@ class CompletionModal extends Component<
             data-cy='submit-challenge'
             onClick={() => submitChallenge()}
           >
-            {isSignedIn ? t('buttons.submit-and-go') : t('buttons.go-to-next')}
-            <span className='hidden-xs'>
-              {isMacOS ? ' (Command + Enter)' : ' (Ctrl + Enter)'}
-            </span>
+            {buttonText}
           </Button>
           <Spacer size='xxSmall' />
           {this.state.downloadURL ? (