From a61457f9ee7216137c0a2ebe4507ea1ccec4548a Mon Sep 17 00:00:00 2001
From: irfanuddinahmad <34648393+irfanuddinahmad@users.noreply.github.com>
Date: Wed, 8 May 2024 14:07:39 +0500
Subject: [PATCH] feat: Added new highlights stepper i18n text (#1209)

---
 .../ContentHighlightStepper.jsx               | 50 ++++++++++++++++---
 .../HighlightStepperTitle.jsx                 | 27 ++++++++--
 .../ContentHighlights/data/constants.js       |  2 +-
 3 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/src/components/ContentHighlights/HighlightStepper/ContentHighlightStepper.jsx b/src/components/ContentHighlights/HighlightStepper/ContentHighlightStepper.jsx
index 16f9be2a49..67c5a89e42 100644
--- a/src/components/ContentHighlights/HighlightStepper/ContentHighlightStepper.jsx
+++ b/src/components/ContentHighlights/HighlightStepper/ContentHighlightStepper.jsx
@@ -15,6 +15,7 @@ import {
 } from '@edx/paragon';
 import { logError } from '@edx/frontend-platform/logging';
 import { camelCaseObject } from '@edx/frontend-platform';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -28,7 +29,7 @@ import EnterpriseCatalogApiService from '../../../data/services/EnterpriseCatalo
 import { enterpriseCurationActions } from '../../EnterpriseApp/data/enterpriseCurationReducer';
 import { useContentHighlightsContext } from '../data/hooks';
 import EVENT_NAMES from '../../../eventTracking';
-import { STEPPER_STEP_LABELS, STEPPER_STEP_TEXT } from '../data/constants';
+import { STEPPER_STEP_LABELS } from '../data/constants';
 
 const steps = [
   STEPPER_STEP_LABELS.CREATE_TITLE,
@@ -40,6 +41,7 @@ const steps = [
  * Stepper to support create user flow for a highlight set.
  */
 const ContentHighlightStepper = ({ enterpriseId }) => {
+  const intl = useIntl();
   const {
     enterpriseCuration: {
       dispatch: dispatchEnterpriseCuration,
@@ -327,7 +329,11 @@ const ContentHighlightStepper = ({ enterpriseId }) => {
         >
           <Stepper.Step
             eventKey={STEPPER_STEP_LABELS.CREATE_TITLE}
-            title={STEPPER_STEP_LABELS.CREATE_TITLE}
+            title={intl.formatMessage({
+              id: 'highlights.new.highlights.stepper.step.labels.create.title',
+              defaultMessage: 'Create a title',
+              description: 'Message to create a title for administrators during new highlights creation',
+            })}
             hasError={!!titleStepValidationError}
             description={titleStepValidationError || ''}
             index={steps.indexOf(STEPPER_STEP_LABELS.CREATE_TITLE)}
@@ -337,7 +343,11 @@ const ContentHighlightStepper = ({ enterpriseId }) => {
 
           <Stepper.Step
             eventKey={STEPPER_STEP_LABELS.SELECT_CONTENT}
-            title={STEPPER_STEP_LABELS.SELECT_CONTENT}
+            title={intl.formatMessage({
+              id: 'highlights.new.highlights.stepper.step.labels.select.content',
+              defaultMessage: 'Select content',
+              description: 'Message to select content for administrators during new highlights creation',
+            })}
             index={steps.indexOf(STEPPER_STEP_LABELS.SELECT_CONTENT)}
           >
             <HighlightStepperSelectContent enterpriseId={enterpriseId} />
@@ -345,7 +355,11 @@ const ContentHighlightStepper = ({ enterpriseId }) => {
 
           <Stepper.Step
             eventKey={STEPPER_STEP_LABELS.CONFIRM_PUBLISH}
-            title={STEPPER_STEP_LABELS.CONFIRM_PUBLISH}
+            title={intl.formatMessage({
+              id: 'highlights.new.highlights.stepper.step.labels.confirm.publish',
+              defaultMessage: 'Confirm and publish',
+              description: 'Publish confirmation message for administrators during new highlights creation',
+            })}
             index={steps.indexOf(STEPPER_STEP_LABELS.CONFIRM_PUBLISH)}
           >
             <HighlightStepperConfirmContent />
@@ -354,16 +368,36 @@ const ContentHighlightStepper = ({ enterpriseId }) => {
       </Stepper>
       {/* Alert Modal for StepperModal Close Confirmation */}
       <AlertModal
-        title={STEPPER_STEP_TEXT.ALERT_MODAL_TEXT.title}
+        title={intl.formatMessage({
+          id: 'highlights.new.highlights.stepper.step.alert.modal.title',
+          defaultMessage: 'Lose Progress?',
+          description: 'Alert modal title during new highlights creation',
+        })}
         isOpen={isCloseAlertOpen}
         onClose={closeCloseAlert}
       >
         <p>
-          {STEPPER_STEP_TEXT.ALERT_MODAL_TEXT.content}
+          <FormattedMessage
+            id="highlights.new.highlights.stepper.step.alert.modal.content"
+            defaultMessage="If you exit now, any changes you have made will be lost."
+            description="Alert modal message content during new highlights creation"
+          />
         </p>
         <ActionRow>
-          <Button variant="tertiary" onClick={cancelCloseModal}>{STEPPER_STEP_TEXT.ALERT_MODAL_TEXT.buttons.cancel}</Button>
-          <Button variant="primary" onClick={closeStepperModal}>{STEPPER_STEP_TEXT.ALERT_MODAL_TEXT.buttons.exit}</Button>
+          <Button variant="tertiary" onClick={cancelCloseModal}>
+            <FormattedMessage
+              id="highlights.new.highlights.stepper.step.alert.modal.buttons.cancel"
+              defaultMessage="Cancel"
+              description="Alert modal CTA button text during new highlights creation"
+            />
+          </Button>
+          <Button variant="primary" onClick={closeStepperModal}>
+            <FormattedMessage
+              id="highlights.new.highlights.stepper.step.alert.modal.buttons.exit"
+              defaultMessage="Exit"
+              description="Alert modal CTA button text during new highlights creation"
+            />
+          </Button>
         </ActionRow>
       </AlertModal>
     </>
diff --git a/src/components/ContentHighlights/HighlightStepper/HighlightStepperTitle.jsx b/src/components/ContentHighlights/HighlightStepper/HighlightStepperTitle.jsx
index b7c1d5f9f9..ad10a260c3 100644
--- a/src/components/ContentHighlights/HighlightStepper/HighlightStepperTitle.jsx
+++ b/src/components/ContentHighlights/HighlightStepper/HighlightStepperTitle.jsx
@@ -3,8 +3,8 @@ import {
   Row, Col, Icon, Container,
 } from '@edx/paragon';
 import { EditCircle } from '@edx/paragon/icons';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
-import { STEPPER_STEP_TEXT } from '../data/constants';
 import HighlightStepperTitleInput from './HighlightStepperTitleInput';
 
 const HighlightStepperTitle = () => (
@@ -13,15 +13,34 @@ const HighlightStepperTitle = () => (
       <Col xs={12} md={8} lg={6}>
         <h3 className="mb-3 d-flex align-items-center">
           <Icon src={EditCircle} className="mr-2 text-brand" />
-          {STEPPER_STEP_TEXT.HEADER_TEXT.createTitle}
+          <FormattedMessage
+            id="highlights.new.highlights.stepper.stepper.step.header.text.create.title"
+            defaultMessage="Create a title for your highlight"
+            description="Create title header message shown to administrators during creation of new content highlights"
+          />
         </h3>
         <div className="mb-4.5">
           <p>
-            {STEPPER_STEP_TEXT.SUB_TEXT.createTitle}
+            <FormattedMessage
+              id="highlights.new.highlights.stepper.stepper.step.sub.text.create.title"
+              defaultMessage="Create a unique title for your highlight. This title is visible
+              to your learners and helps them navigate to relevant content."
+              description="Create title sub message shown to administrators during creation of new content highlights"
+            />
           </p>
           <p>
             <strong>
-              {STEPPER_STEP_TEXT.PRO_TIP_TEXT.createTitle}
+              <FormattedMessage
+                id="highlights.new.highlights.stepper.stepper.step.pro.tip.text.create.title"
+                defaultMessage="Pro tip: we recommend naming your highlight collection to reflect skills
+                it aims to develop, or to draw the attention of specific groups it targets.
+                For example, {doubleQoute}Recommended for Marketing{doubleQoute}
+                 or {doubleQoute}Develop Leadership Skills{doubleQoute}."
+                description="Create title pro tip message shown to administrators during creation of new content highlights"
+                values={{
+                  doubleQoute: '"',
+                }}
+              />
             </strong>
           </p>
         </div>
diff --git a/src/components/ContentHighlights/data/constants.js b/src/components/ContentHighlights/data/constants.js
index 37d233dcf8..03969f65cb 100644
--- a/src/components/ContentHighlights/data/constants.js
+++ b/src/components/ContentHighlights/data/constants.js
@@ -81,7 +81,7 @@ export const STEPPER_STEP_TEXT = {
   },
   ALERT_MODAL_TEXT: {
     title: 'Lose Progress?',
-    content: 'If you exit now, any changes you\'ve made will be lost.',
+    content: 'If you exit now, any changes you have made will be lost.',
     buttons: {
       exit: 'Exit',
       cancel: 'Cancel',