✨ Shared Component translation and source-map support added

.gitignore

@@ -57,6 +57,7 @@ launch.json
 #rspack
 .swc
 assets/.rsdoctor
+*.ignore
 
 *storybook.log
 storybook-static

assets/react/v3/@types/index.d.ts

@@ -81,7 +81,7 @@ declare global {
       wp_rest_nonce: string;
       is_admin: string;
       is_admin_bar_showing: string;
-      max_upload_size: string;
+      max_upload_size: string; // in bytes
       content_change_event: string;
       is_tutor_course_edit: string;
       assignment_max_file_allowed: string;

assets/react/v3/declaration.d.ts

@@ -7,3 +7,5 @@ declare module '*.webp';
 interface Window {
   tutor_get_nonce_data: (value: boolean) => { key: string; value: string };
 }
+
+declare const __TUTOR_TEXT_DOMAIN__: string;

assets/react/v3/entries/course-builder/components/course-basic/CourseBasicSidebar.tsx

@@ -25,7 +25,7 @@ import { typography } from '@TutorShared/config/typography';
 import Show from '@TutorShared/controls/Show';
 import { useInstructorListQuery, useUserListQuery } from '@TutorShared/services/users';
 import { styleUtils } from '@TutorShared/utils/style-utils';
-import { isAddonEnabled } from '@TutorShared/utils/util';
+import { formatBytes, isAddonEnabled } from '@TutorShared/utils/util';
 
 import CoursePricing from './CoursePricing';
 
@@ -181,7 +181,10 @@ const CourseBasicSidebar = () => {
             buttonText={__('Upload Thumbnail', 'tutor')}
             infoText={
               // translators: %s is the maximum allowed upload file size (e.g., "2MB")
-              sprintf(__('JPEG, PNG, GIF, and WebP formats, up to %s', 'tutor'), tutorConfig.max_upload_size)
+              sprintf(
+                __('JPEG, PNG, GIF, and WebP formats, up to %s', 'tutor'),
+                formatBytes(Number(tutorConfig?.max_upload_size || 0)),
+              )
             }
             generateWithAi={!isTutorPro || isOpenAiEnabled}
             loading={!!isCourseDetailsFetching && !controllerProps.field.value}
@@ -200,7 +203,10 @@ const CourseBasicSidebar = () => {
             buttonText={__('Upload Video', 'tutor')}
             infoText={
               // translators: %s is the maximum allowed file size
-              sprintf(__('MP4, and WebM formats, up to %s', 'tutor'), tutorConfig.max_upload_size)
+              sprintf(
+                __('MP4, and WebM formats, up to %s', 'tutor'),
+                formatBytes(Number(tutorConfig?.max_upload_size || 0)),
+              )
             }
             loading={!!isCourseDetailsFetching && !controllerProps.field.value}
             visibilityKey={VisibilityControlKeys.COURSE_BUILDER.BASICS.INTRO_VIDEO}

assets/react/v3/entries/course-builder/components/course-basic/ScheduleOptions.tsx

@@ -25,7 +25,7 @@ import { typography } from '@TutorShared/config/typography';
 import Show from '@TutorShared/controls/Show';
 import { withVisibilityControl } from '@TutorShared/hoc/withVisibilityControl';
 import { styleUtils } from '@TutorShared/utils/style-utils';
-import { noop } from '@TutorShared/utils/util';
+import { formatBytes, noop } from '@TutorShared/utils/util';
 import { invalidDateRule, invalidTimeRule } from '@TutorShared/utils/validation';
 
 const isTutorPro = !!tutorConfig.tutor_pro_url;
@@ -230,7 +230,10 @@ const ScheduleOptions = () => {
                     buttonText={__('Upload Thumbnail', 'tutor')}
                     infoText={
                       /* translators: %s is the maximum allowed upload file size (e.g., "2MB") */
-                      sprintf(__('JPEG, PNG, GIF, and WebP formats, up to %s', 'tutor'), tutorConfig.max_upload_size)
+                      sprintf(
+                        __('JPEG, PNG, GIF, and WebP formats, up to %s', 'tutor'),
+                        formatBytes(Number(tutorConfig?.max_upload_size || 0)),
+                      )
                     }
                   />
                 )}

assets/react/v3/entries/course-builder/components/modals/LessonModal.tsx

@@ -44,7 +44,7 @@ import useVisibilityControl from '@TutorShared/hooks/useVisibilityControl';
 import { type WPMedia } from '@TutorShared/hooks/useWpMedia';
 import { styleUtils } from '@TutorShared/utils/style-utils';
 import { type H5PContent, type ID } from '@TutorShared/utils/types';
-import { findSlotFields, isAddonEnabled, normalizeLineEndings } from '@TutorShared/utils/util';
+import { findSlotFields, formatBytes, isAddonEnabled, normalizeLineEndings } from '@TutorShared/utils/util';
 import { maxLimitRule } from '@TutorShared/utils/validation';
 
 interface LessonModalProps extends ModalProps {
@@ -383,7 +383,10 @@ const LessonModal = ({
                   buttonText={__('Upload Image', 'tutor')}
                   infoText={
                     /* translators: %s is the maximum allowed upload file size (e.g., "2MB") */
-                    sprintf(__('JPEG, PNG, GIF, and WebP formats, up to %s', 'tutor'), tutorConfig.max_upload_size)
+                    sprintf(
+                      __('JPEG, PNG, GIF, and WebP formats, up to %s', 'tutor'),
+                      formatBytes(Number(tutorConfig?.max_upload_size || 0)),
+                    )
                   }
                   visibilityKey={VisibilityControlKeys.COURSE_BUILDER.CURRICULUM.LESSON.FEATURED_IMAGE}
                 />
@@ -399,7 +402,10 @@ const LessonModal = ({
                   buttonText={__('Upload Video', 'tutor')}
                   infoText={
                     // translators: %s is the maximum allowed file size
-                    sprintf(__('MP4, and WebM formats, up to %s', 'tutor'), tutorConfig.max_upload_size)
+                    sprintf(
+                      __('MP4, and WebM formats, up to %s', 'tutor'),
+                      formatBytes(Number(tutorConfig?.max_upload_size || 0)),
+                    )
                   }
                   onGetDuration={(duration) => {
                     form.setValue('duration.hour', duration.hours);

assets/react/v3/entries/import-export/components/Import.tsx

@@ -145,7 +145,11 @@ const Import = () => {
         </UploadButton>
 
         <div css={styles.description}>
-          {sprintf(__('Supported format: %s', 'tutor'), isTutorPro ? '.JSON, .ZIP' : '.JSON')}
+          {sprintf(
+            // translators: %s is the file extension
+            __('Supported format: %s', 'tutor'),
+            isTutorPro ? '.JSON, .ZIP' : '.JSON',
+          )}
         </div>
       </div>
     </div>

assets/react/v3/entries/import-export/components/modals/import-export-states/ImportExportCompletedState.tsx

@@ -125,8 +125,11 @@ const ImportExportCompletedState = ({
           hasCompletedSuccessfully && hasCompletedWithErrors
             ? // prettier-ignore
               __('The export process has finished. However, certain items could not be exported. Check the summary below:', 'tutor')
-            : // prettier-ignore
-              sprintf(__('Download the %s file and use it to import your data into another Tutor LMS website.', 'tutor'), isTutorPro ? 'ZIP' : 'JSON'),
+            : sprintf(
+                // translators: %s is the file extension
+                __('Download the %s file and use it to import your data into another Tutor LMS website.', 'tutor'),
+                isTutorPro ? 'ZIP' : 'JSON',
+              ),
         error: message || __('Something went wrong during export. Please try again!', 'tutor'),
       },
       reportList: {

assets/react/v3/shared/atoms/ImageInput.tsx

@@ -38,7 +38,7 @@ const sizeMap: Record<ImageInputSize, ButtonSize> = {
 };
 
 const ImageInput = ({
-  buttonText = __('Upload Media', 'tutor'),
+  buttonText = __('Upload Media', __TUTOR_TEXT_DOMAIN__),
   infoText,
   size = 'regular',
   value,
@@ -137,7 +137,7 @@ const ImageInput = ({
                   }}
                   data-cy="replace-media"
                 >
-                  {replaceButtonText || __('Replace Image', 'tutor')}
+                  {replaceButtonText || __('Replace Image', __TUTOR_TEXT_DOMAIN__)}
                 </Button>
                 <Show when={isClearAble}>
                   <Button
@@ -150,7 +150,7 @@ const ImageInput = ({
                     }}
                     data-cy="clear-media"
                   >
-                    {__('Remove', 'tutor')}
+                    {__('Remove', __TUTOR_TEXT_DOMAIN__)}
                   </Button>
                 </Show>
               </div>

assets/react/v3/shared/atoms/Select.tsx

@@ -198,7 +198,7 @@ const Select = <T,>({
                 setIsOpen(false);
               }}
             >
-              {__('Clear', 'tutor')}
+              {__('Clear', __TUTOR_TEXT_DOMAIN__)}
             </Button>
           </div>
         )}

assets/react/v3/shared/atoms/WPEditor.tsx

@@ -113,50 +113,50 @@ function editorConfig(
 
         if (!isMinimal) {
           editor.addButton('tutor_button', {
-            text: __('Tutor ShortCode', 'tutor'),
+            text: __('Tutor ShortCode', __TUTOR_TEXT_DOMAIN__),
             icon: false,
             type: 'menubutton',
             menu: [
               {
-                text: __('Student Registration Form', 'tutor'),
+                text: __('Student Registration Form', __TUTOR_TEXT_DOMAIN__),
                 onclick: () => {
                   editor.insertContent('[tutor_student_registration_form]');
                 },
               },
               {
-                text: __('Instructor Registration Form', 'tutor'),
+                text: __('Instructor Registration Form', __TUTOR_TEXT_DOMAIN__),
                 onclick: () => {
                   editor.insertContent('[tutor_instructor_registration_form]');
                 },
               },
               {
-                text: __('Courses', 'tutor'),
+                text: __('Courses', __TUTOR_TEXT_DOMAIN__),
                 onclick: () => {
                   editor.windowManager.open({
-                    title: __('Courses Shortcode', 'tutor'),
+                    title: __('Courses Shortcode', __TUTOR_TEXT_DOMAIN__),
                     body: [
                       {
                         type: 'textbox',
                         name: 'id',
-                        label: __('Course id, separate by (,) comma', 'tutor'),
+                        label: __('Course id, separate by (,) comma', __TUTOR_TEXT_DOMAIN__),
                         value: '',
                       },
                       {
                         type: 'textbox',
                         name: 'exclude_ids',
-                        label: __('Exclude Course IDS', 'tutor'),
+                        label: __('Exclude Course IDS', __TUTOR_TEXT_DOMAIN__),
                         value: '',
                       },
                       {
                         type: 'textbox',
                         name: 'category',
-                        label: __('Category IDS', 'tutor'),
+                        label: __('Category IDS', __TUTOR_TEXT_DOMAIN__),
                         value: '',
                       },
                       {
                         type: 'listbox',
                         name: 'orderby',
-                        label: __('Order By', 'tutor'),
+                        label: __('Order By', __TUTOR_TEXT_DOMAIN__),
                         onselect: () => {},
                         values: [
                           { text: 'ID', value: 'ID' },
@@ -170,7 +170,7 @@ function editorConfig(
                       {
                         type: 'listbox',
                         name: 'order',
-                        label: __('Order', 'tutor'),
+                        label: __('Order', __TUTOR_TEXT_DOMAIN__),
                         onselect: () => {},
                         values: [
                           { text: 'DESC', value: 'DESC' },
@@ -180,7 +180,7 @@ function editorConfig(
                       {
                         type: 'textbox',
                         name: 'count',
-                        label: __('Count', 'tutor'),
+                        label: __('Count', __TUTOR_TEXT_DOMAIN__),
                         value: '6',
                       },
                     ],

assets/react/v3/shared/components/ErrorBoundaryDev.tsx

@@ -318,6 +318,7 @@ const styles = {
   `,
   sourceLine: (isErrorLine: boolean) => css`
     white-space: pre-wrap;
+    font-family: 'Fire Code', monospace;
 
     ${isErrorLine &&
     css`

assets/react/v3/shared/components/ErrorBoundaryProd.tsx

@@ -45,16 +45,16 @@ class ErrorBoundaryProd extends Component<ErrorBoundaryProps, ErrorBoundaryState
         <div css={styles.container}>
           <div css={styles.productionErrorWrapper}>
             <div css={styles.productionErrorHeader}>
-              <img src={productionError} srcSet={`${productionError2x} 2x`} alt={__('Error', 'tutor')} />
-              <h5 css={typography.heading5('medium')}>{__('Oops! Something went wrong', 'tutor')}</h5>
+              <img src={productionError} srcSet={`${productionError2x} 2x`} alt={__('Error', __TUTOR_TEXT_DOMAIN__)} />
+              <h5 css={typography.heading5('medium')}>{__('Oops! Something went wrong', __TUTOR_TEXT_DOMAIN__)}</h5>
 
               <div css={styles.instructions}>
-                <p>{__('Try the following steps to resolve the issue:', 'tutor')}</p>
+                <p>{__('Try the following steps to resolve the issue:', __TUTOR_TEXT_DOMAIN__)}</p>
                 <ul>
-                  <li>{__('Refresh the page.', 'tutor')}</li>
-                  <li>{__('Clear your browser cache.', 'tutor')}</li>
+                  <li>{__('Refresh the page.', __TUTOR_TEXT_DOMAIN__)}</li>
+                  <li>{__('Clear your browser cache.', __TUTOR_TEXT_DOMAIN__)}</li>
                   <Show when={tutorConfig.tutor_pro_url}>
-                    <li>{__('Ensure the Free and Pro plugins are on the same version.', 'tutor')}</li>
+                    <li>{__('Ensure the Free and Pro plugins are on the same version.', __TUTOR_TEXT_DOMAIN__)}</li>
                   </Show>
                 </ul>
               </div>
@@ -67,14 +67,14 @@ class ErrorBoundaryProd extends Component<ErrorBoundaryProps, ErrorBoundaryState
                   icon={<SVGIcon name="refresh" height={24} width={24} />}
                   onClick={() => window.location.reload()}
                 >
-                  {__('Reload', 'tutor')}
+                  {__('Reload', __TUTOR_TEXT_DOMAIN__)}
                 </Button>
               </div>
               <div css={styles.support}>
-                <span>{__('Still having trouble?', 'tutor')}</span>
-                <span>{__('Contact', 'tutor')}</span>
-                <a href={config.TUTOR_SUPPORT_PAGE_URL}>{__('Support', 'tutor')}</a>
-                <span>{__('for assistance.', 'tutor')}</span>
+                <span>{__('Still having trouble?', __TUTOR_TEXT_DOMAIN__)}</span>
+                <span>{__('Contact', __TUTOR_TEXT_DOMAIN__)}</span>
+                <a href={config.TUTOR_SUPPORT_PAGE_URL}>{__('Support', __TUTOR_TEXT_DOMAIN__)}</a>
+                <span>{__('for assistance.', __TUTOR_TEXT_DOMAIN__)}</span>
               </div>
             </div>
           </div>

assets/react/v3/shared/components/certificate/Certificate.tsx

@@ -149,10 +149,12 @@ const Certificate = ({
 
   const certificateTabs: CertificateTabItem[] = [
     ...(defaultTemplates.length
-      ? ([{ label: __('Templates', 'tutor'), value: 'templates' }] as CertificateTabItem[])
+      ? ([{ label: __('Templates', __TUTOR_TEXT_DOMAIN__), value: 'templates' }] as CertificateTabItem[])
       : []),
     {
-      label: CURRENT_VIEWPORT.isAboveSmallMobile ? __('Custom Certificates', 'tutor') : __('Certificates', 'tutor'),
+      label: CURRENT_VIEWPORT.isAboveSmallMobile
+        ? __('Custom Certificates', __TUTOR_TEXT_DOMAIN__)
+        : __('Certificates', __TUTOR_TEXT_DOMAIN__),
       value: 'custom_certificates',
     },
   ];
@@ -169,7 +171,7 @@ const Certificate = ({
           />
           <div css={styles.orientation}>
             <Show when={landScapeCertificates && portraitCertificates}>
-              <Tooltip delay={200} content={__('Landscape', 'tutor')}>
+              <Tooltip delay={200} content={__('Landscape', __TUTOR_TEXT_DOMAIN__)}>
                 <button
                   type="button"
                   css={[
@@ -187,7 +189,7 @@ const Certificate = ({
                   />
                 </button>
               </Tooltip>
-              <Tooltip delay={200} content={__('Portrait', 'tutor')}>
+              <Tooltip delay={200} content={__('Portrait', __TUTOR_TEXT_DOMAIN__)}>
                 <button
                   type="button"
                   css={[
@@ -224,7 +226,7 @@ const Certificate = ({
               onPreviewCertificate={(data) => handlePreviewCertificate(data)}
               data={{
                 key: 'none',
-                name: __('None', 'tutor'),
+                name: __('None', __TUTOR_TEXT_DOMAIN__),
                 preview_src: '',
                 background_src: '',
                 orientation: 'landscape',
@@ -243,7 +245,7 @@ const Certificate = ({
                   })}
                   src={notFound}
                   srcSet={`${notFound} 1x, ${notFound2x} 2x`}
-                  alt={__('Not Found', 'tutor')}
+                  alt={__('Not Found', __TUTOR_TEXT_DOMAIN__)}
                 />
 
                 <div css={styles.featureAndActionWrapper}>
@@ -253,7 +255,7 @@ const Certificate = ({
                       color: ${colorTokens.text.subdued};
                     `}
                   >
-                    {__('You didn’t create any certificate yet!', 'tutor')}
+                    {__('You didn’t create any certificate yet!', __TUTOR_TEXT_DOMAIN__)}
                   </p>
                 </div>
               </div>

assets/react/v3/shared/components/certificate/CertificateCard.tsx

@@ -47,7 +47,7 @@ const CertificateCard = ({
         fallback={
           <div css={styles.emptyCard}>
             <SVGIcon name="outlineNone" width={49} height={49} />
-            <span>{__('None', 'tutor')}</span>
+            <span>{__('None', __TUTOR_TEXT_DOMAIN__)}</span>
           </div>
         }
       >
@@ -59,12 +59,12 @@ const CertificateCard = ({
         <div data-footer-actions css={styles.footerWrapper}>
           <Show when={data.preview_src}>
             <Button variant="secondary" isOutlined size="small" onClick={() => onPreviewCertificate(data)}>
-              {__('Preview', 'tutor')}
+              {__('Preview', __TUTOR_TEXT_DOMAIN__)}
             </Button>
           </Show>
           <Show when={data.key !== selectedCertificate}>
             <Button variant="primary" size="small" onClick={() => onSelectCertificate(data.key)}>
-              {__('Select', 'tutor')}
+              {__('Select', __TUTOR_TEXT_DOMAIN__)}
             </Button>
           </Show>
         </div>