Merge pull request #2110 from themeum/fix/import-export

fix: Enhance export/import to support JSON file handling

Author: shewa12

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;