From 2b8169dc4f1776ebced64fbd00cfe988b8a6033a Mon Sep 17 00:00:00 2001
From: Gagan Bhullar <g.deepsingh1@gmail.com>
Date: Sun, 28 Jul 2024 15:58:23 -0600
Subject: [PATCH] fix(client): OS specific submit button text (#55631)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Lasse Jørgensen <28780271+lasjorg@users.noreply.github.com>
---
 .../Challenges/classic/lower-jaw.tsx          |  9 ++++-
 e2e/lower-jaw.spec.ts                         | 39 +++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx
index c12b02b59ea..711b4cdf154 100644
--- a/client/src/templates/Challenges/classic/lower-jaw.tsx
+++ b/client/src/templates/Challenges/classic/lower-jaw.tsx
@@ -293,7 +293,14 @@ const LowerJaw = ({
       : t('buttons.check-code')
     : t('buttons.check-code-2');
 
+  const submitButtonText = isDesktop
+    ? isMacOS
+      ? t('buttons.submit-and-go-3')
+      : t('buttons.submit-and-go-2')
+    : t('buttons.submit-and-go');
+
   const showSignInButton = !isSignedIn && challengeIsCompleted;
+
   return (
     <div className='action-row-container'>
       {showSignInButton && (
@@ -319,7 +326,7 @@ const LowerJaw = ({
         {...(!challengeIsCompleted && { 'aria-hidden': true })}
         ref={submitButtonRef}
       >
-        {t('buttons.submit-and-go')}
+        {submitButtonText}
       </Button>
       <div
         className={
diff --git a/e2e/lower-jaw.spec.ts b/e2e/lower-jaw.spec.ts
index 2eff3c000f9..75cd313e04f 100644
--- a/e2e/lower-jaw.spec.ts
+++ b/e2e/lower-jaw.spec.ts
@@ -156,3 +156,42 @@ test('Should display the text of the check code button accordingly based on devi
     ).toBeVisible();
   }
 });
+
+test('should display the text of submit and go to next challenge button accordingly based on device type', async ({
+  page,
+  isMobile,
+  browserName
+}) => {
+  const editor = getEditors(page);
+  const checkButton = page.getByRole('button', { name: 'Check Your Code' });
+
+  await focusEditor({ page, isMobile });
+  await clearEditor({ page, browserName });
+
+  await editor.fill(
+    '<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
+  );
+
+  await checkButton.click();
+
+  if (isMobile) {
+    await expect(
+      page.getByRole('button', {
+        name: 'Submit and go to next challenge',
+        exact: true
+      })
+    ).toBeVisible();
+  } else if (browserName === 'webkit') {
+    await expect(
+      page.getByRole('button', {
+        name: 'Submit and go to next challenge (Command + Enter)'
+      })
+    ).toBeVisible();
+  } else {
+    await expect(
+      page.getByRole('button', {
+        name: 'Submit and go to next challenge (Ctrl + Enter)'
+      })
+    ).toBeVisible();
+  }
+});