fix: Disable logo update button when no file is selected

apps/app/src/client/components/Admin/Customize/CustomizeLogoSetting.tsx

@@ -1,4 +1,4 @@
-import React, { type JSX, useCallback, useState } from 'react';
+import React, { type JSX, useCallback, useRef, useState } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 
@@ -32,12 +32,22 @@ const CustomizeLogoSetting = (): JSX.Element => {
     isDefaultLogo ?? true,
   );
   const [retrieveError, setRetrieveError] = useState<any>();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const isSystemError: boolean = retrieveError != null;
+  const isLogoSettingIncomplete: boolean =
+    !isDefaultLogoSelected &&
+    uploadLogoSrc == null &&
+    !isCustomizedLogoUploaded;
+  const isUpdateButtonDisabled: boolean =
+    isSystemError || isLogoSettingIncomplete;
 
   const onSelectFile = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files != null && e.target.files.length > 0) {
+    const files: FileList | null = e.target.files;
+
+    if (files != null && files.length > 0) {
       const reader = new FileReader();
       reader.addEventListener('load', () => setUploadLogoSrc(reader.result));
-      reader.readAsDataURL(e.target.files[0]);
+      reader.readAsDataURL(files[0]);
       setIsImageCropModalShow(true);
     }
   }, []);
@@ -58,6 +68,26 @@ const CustomizeLogoSetting = (): JSX.Element => {
     }
   }, [t, isDefaultLogoSelected]);
 
+  const clearFileInput = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  }, []);
+
+  const resetFileSelectionState = useCallback(() => {
+    clearFileInput();
+    setUploadLogoSrc(null);
+  }, [clearFileInput]);
+
+  const onModalStateClose = useCallback(() => {
+    setIsImageCropModalShow(false);
+  }, []);
+
+  const onCloseCropModal = useCallback(() => {
+    resetFileSelectionState();
+    onModalStateClose();
+  }, [resetFileSelectionState, onModalStateClose]);
+
   const onClickDeleteBtn = useCallback(async () => {
     try {
       await apiv3Delete('/customize-setting/delete-brand-logo');
@@ -68,19 +98,21 @@ const CustomizeLogoSetting = (): JSX.Element => {
           ns: 'commons',
         }),
       );
+      resetFileSelectionState();
     } catch (err) {
       toastError(err);
       setRetrieveError(err);
       throw new Error('Failed to delete logo');
     }
-  }, [setIsCustomizedLogoUploaded, t]);
+  }, [setIsCustomizedLogoUploaded, t, resetFileSelectionState]);
 
   const processImageCompletedHandler = useCallback(
     async (croppedImage) => {
       try {
         const formData = new FormData();
         formData.append('file', croppedImage);
         await apiv3PostForm('/customize-setting/upload-brand-logo', formData);
+        setIsImageCropModalShow(false);
         setIsCustomizedLogoUploaded(true);
         toastSuccess(
           t('toaster.update_successed', {
@@ -196,14 +228,15 @@ const CustomizeLogoSetting = (): JSX.Element => {
                       onChange={onSelectFile}
                       name="brandLogo"
                       accept="image/*"
+                      ref={fileInputRef}
                     />
                   </div>
                 </div>
               </div>
             </div>
             <AdminUpdateButtonRow
               onClick={onClickSubmit}
-              disabled={retrieveError != null}
+              disabled={isUpdateButtonDisabled}
             />
           </div>
         </div>
@@ -212,7 +245,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
       <ImageCropModal
         isShow={isImageCropModalShow}
         src={uploadLogoSrc}
-        onModalClose={() => setIsImageCropModalShow(false)}
+        onModalClose={onCloseCropModal}
         onImageProcessCompleted={processImageCompletedHandler}
         isCircular={false}
         showCropOption={false}

apps/app/src/client/components/Common/ImageCropModal.tsx

@@ -142,15 +142,13 @@ const ImageCropModal: FC<Props> = (props: Props) => {
       // Save image to database
       onImageProcessCompleted(processedImage);
     }
-    onModalCloseHandler();
   }, [
     imageRef,
     cropOptions,
     isCropImage,
     getCroppedImg,
     convertBase64ToBlob,
     onImageProcessCompleted,
-    onModalCloseHandler,
   ]);
 
   const toggleCropMode = useCallback(