fix: Enhance export/import to support JSON file handling

Updated export flow to generate and download JSON files for non-Pro users, including dynamic file naming and size formatting. Adjusted UI to reflect file type and improved download button logic. Modified backend import to accept uploaded JSON files instead of POST data.

Author: b-l-i-n-d

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

@@ -18,7 +18,7 @@ import { typography } from '@TutorShared/config/typography';
 import { type ExportableContent } from '@TutorShared/services/import-export';
 import { styleUtils } from '@TutorShared/utils/style-utils';
 import { decodeParams } from '@TutorShared/utils/url';
-import { convertToErrorMessage } from '@TutorShared/utils/util';
+import { convertToErrorMessage, formatBytes } from '@TutorShared/utils/util';
 
 const CONTENT_BANK_PAGE = 'tutor-content-bank';
 const isTutorPro = !!tutorConfig.tutor_pro_url;
@@ -110,6 +110,7 @@ const Export = () => {
 
   useEffect(() => {
     const progress = Number(exportContentResponse?.job_progress);
+
     if (isError) {
       updateModal<typeof ExportModal>('export-modal', {
         currentStep: 'error',
@@ -137,24 +138,43 @@ const Export = () => {
       updateModal<typeof ExportModal>('export-modal', {
         currentStep: 'success',
         progress: 100,
-        fileName: exportContentResponse?.exported_data,
-        fileSize: exportContentResponse?.export_file?.file_size || 0,
-        message: exportContentResponse?.message || '',
+        fileName: isTutorPro ? exportContentResponse?.exported_data : '',
+        fileSize: isTutorPro
+          ? exportContentResponse?.export_file?.file_size
+          : formatBytes(JSON.stringify(exportContentResponse?.exported_data).length),
+        message: isTutorPro ? exportContentResponse?.message || '' : __('Settings', 'tutor'),
         completedContents: exportContentResponse?.completed_contents,
         onClose: () => {
           closeModal();
           const newUrl = new URL(url);
           newUrl.searchParams.set('download', 'false'); // this will delete the generated download link and file
           fetch(newUrl);
         },
-        onDownload: () => {
+        onDownload: (fileName: string) => {
           closeModal();
-          const url = exportContentResponse?.export_file?.url;
+
+          if (isTutorPro) {
+            const url = exportContentResponse?.export_file?.url;
+            const a = document.createElement('a');
+            a.href = url;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+
+            return;
+          }
+
+          const jsonFile = new Blob([JSON.stringify(exportContentResponse?.exported_data)], {
+            type: 'application/json',
+          });
+          const url = URL.createObjectURL(jsonFile);
           const a = document.createElement('a');
           a.href = url;
+          a.download = fileName;
           document.body.appendChild(a);
           a.click();
           document.body.removeChild(a);
+          URL.revokeObjectURL(url);
         },
       });
     }

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

@@ -35,10 +35,10 @@ interface ExportModalProps extends ModalProps {
   onClose: () => void;
   onExport: ({ data, exportableContent }: { data: ExportFormData; exportableContent: ExportableContent[] }) => void;
   currentStep: ImportExportModalState;
-  onDownload?: () => void;
+  onDownload?: (fileName: string) => void;
   progress: number;
   fileName?: string;
-  fileSize?: number;
+  fileSize?: number | string;
   message?: string;
   failedMessage?: string;
   completedContents?: ImportExportContentResponseBase['completed_contents'];
@@ -61,8 +61,8 @@ const ExportModal = ({
   progress,
   fileName,
   fileSize,
-  message,
-  failedMessage,
+  message = '',
+  failedMessage = '',
   completedContents,
   collection,
 }: ExportModalProps) => {

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

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+import { format } from 'date-fns';
 import { useState } from 'react';
 
 import Button from '@TutorShared/atoms/Button';
@@ -23,16 +24,20 @@ import exportErrorImage from '@SharedImages/import-export/export-error.webp';
 import exportSuccessImage from '@SharedImages/import-export/export-success.webp';
 import importErrorImage from '@SharedImages/import-export/import-error.webp';
 import importSuccessImage from '@SharedImages/import-export/import-success.webp';
+import { tutorConfig } from '@TutorShared/config/config';
+
+const isTutorPro = !!tutorConfig.tutor_pro_url;
+const fileName = `tutor-lms-data-${format(new Date(), 'yyyy-MM-dd-HH-mm-ss')}.json`;
 
 interface ImportExportCompletedStateProps {
   state: ImportExportModalState;
   isImportingToContentBank?: boolean;
-  fileSize?: number;
+  fileSize?: number | string;
   message?: string;
   failedMessage?: string;
   completedContents?: ImportExportContentResponseBase['completed_contents'];
   importErrors?: ImportContentResponse['errors'];
-  onDownload?: () => void;
+  onDownload?: (fileName: string) => void;
   onClose: () => void;
   exportFileName?: string;
   type: 'import' | 'export';
@@ -121,7 +126,7 @@ const ImportExportCompletedState = ({
             ? // prettier-ignore
               __('The export process has finished. However, certain items could not be exported. Check the summary below:', 'tutor')
             : // prettier-ignore
-              __('Download the JSON file and use it to import your data into another Tutor LMS website.', 'tutor'),
+              sprintf(__('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: {
@@ -248,8 +253,8 @@ const ImportExportCompletedState = ({
             </div>
             <div css={styles.fileRight}>
               <div css={styles.fileDetails}>
-                <div css={styles.fileName} title={exportFileName}>
-                  {exportFileName}
+                <div css={styles.fileName} title={exportFileName || fileName}>
+                  {exportFileName || fileName}
                 </div>
                 <div css={styles.fileSize}>{fileSize || formatBytes(0)}</div>
               </div>
@@ -259,7 +264,7 @@ const ImportExportCompletedState = ({
                   variant="primary"
                   size="small"
                   icon={<SVGIcon name="download" width={24} height={24} />}
-                  onClick={() => onDownload?.()}
+                  onClick={() => onDownload?.(fileName)}
                 >
                   {__('Download', 'tutor')}
                 </Button>

classes/Options_V2.php

@@ -431,7 +431,15 @@ public function tutor_import_settings() {
 			wp_send_json_error( tutor_utils()->error_message() );
 		}
 
-		$request = json_decode( stripslashes( $_POST['data'] ), true );
+		$data = $_FILES['data'];
+
+		if ( ! isset( $data['tmp_name'] ) ) {
+			$this->response_bad_request( __( 'Invalid file', 'tutor' ) );
+		}
+
+		$request = json_decode( file_get_contents( $data['tmp_name'] ), true );
+
+		unlink( $data['tmp_name'] );
 
 		$settings_found = false;