refactor: improve error states in spreadsheet flow

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx

@@ -67,7 +67,7 @@ export default function CustomFieldForm(props: CustomFieldsFormProps) {
   return (
     <form onSubmit={handleSubmit(setupSubmit)} className={style.fieldForm}>
       <div className={style.column}>
-        <Panel.Description>Label</Panel.Description>
+        <Panel.Description>Label (only alphanumeric characters are allowed)</Panel.Description>
         {errors.label && <Panel.Error>{errors.label.message}</Panel.Error>}
         <Input
           {...register('label', {

apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.module.scss

@@ -1,5 +1,5 @@
 .uploadSection,
-.successSection {
+.finishSection {
   margin-top: 1rem;
   display: flex;
   padding: 3rem 1rem;
@@ -15,12 +15,18 @@
   gap: 2rem;
 }
 
-.successSection {
+.finishSection {
-  color: $green-500;
   font-size: 1.5rem;
   text-align: center;
   flex-direction: column;
   gap: 1rem;
+
+  .error {
+    color: $red-500;
+  }
+  .success {
+    color: $green-500;
+  }
 }
 
 .buttonRow {

apps/client/src/features/app-settings/panel/sources-panel/SourcesPanel.tsx

@@ -134,11 +134,20 @@ export default function SourcesPanel() {
     await exportRundown(sheetId, importMap);
   };
 
+  const resetFlow = () => {
+    setImportFlow('none');
+    setRundown(null);
+    setHasFile('none');
+    setWorksheets(null);
+    setCustomFields(null);
+    setError('');
+  };
+
   const isExcelFlow = importFlow === 'excel';
   const isGSheetFlow = importFlow === 'gsheet';
   const isAuthenticated = authenticationStatus === 'authenticated';
   const showInput = importFlow === 'none';
-  const showSuccess = importFlow === 'finished';
+  const showCompleted = importFlow === 'finished';
   const showAuth = isGSheetFlow && !isAuthenticated;
   const showImportMap = (isGSheetFlow && isAuthenticated) || (isExcelFlow && hasFile === 'done');
   const showReview = rundown !== null && customFields !== null;
@@ -189,10 +198,18 @@ export default function SourcesPanel() {
               </div>
             </>
           )}
-          {showSuccess && (
+          {showCompleted && (
-            <div className={style.successSection}>
+            <div className={style.finishSection}>
-              <span>Import successful</span>
+              {error ? (
-              <Button variant='ontime-filled' size='sm' onClick={() => setImportFlow('none')}>
+                <span key='finish__error' className={style.error}>
+                  Import failed
+                </span>
+              ) : (
+                <span key='finish__success' className={style.success}>
+                  Import successful
+                </span>
+              )}
+              <Button variant='ontime-filled' size='sm' onClick={resetFlow}>
                 Return
               </Button>
             </div>
@@ -200,6 +217,7 @@ export default function SourcesPanel() {
           {showAuth && <GSheetSetup onCancel={cancelGSheetFlow} />}
           {showImportMap && !showReview && (
             <ImportMapForm
+              hasErrors={Boolean(error)}
               isSpreadsheet={isExcelFlow}
               onCancel={cancelImportMap}
               onSubmitExport={handleSubmitExport}

apps/client/src/features/app-settings/panel/sources-panel/import-map/ImportMapForm.tsx

@@ -15,14 +15,15 @@ import { convertToImportMap, getPersistedOptions, NamedImportMap, persistImportM
 import style from '../SourcesPanel.module.scss';
 
 interface ImportMapFormProps {
-  isSpreadsheet?: boolean;
+  hasErrors: boolean;
+  isSpreadsheet: boolean;
   onCancel: () => void;
   onSubmitExport: (importMap: ImportMap) => Promise<void>;
   onSubmitImport: (importMap: ImportMap) => Promise<void>;
 }
 
 export default function ImportMapForm(props: ImportMapFormProps) {
-  const { isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
+  const { hasErrors, isSpreadsheet, onCancel, onSubmitExport, onSubmitImport } = props;
   const namedImportMap = getPersistedOptions();
   const { revoke } = useGoogleSheet();
   const {
@@ -78,7 +79,7 @@ export default function ImportMapForm(props: ImportMapFormProps) {
   const isLoading = Boolean(loading);
   const canSubmitSpreadsheet = isSpreadsheet && !isLoading;
   const canSubmitGSheet = !isLoading;
-  const canSubmit = isValid && (canSubmitSpreadsheet || canSubmitGSheet);
+  const canSubmit = !hasErrors && isValid && (canSubmitSpreadsheet || canSubmitGSheet);
 
   return (
     <Panel.Section as='form' id='import-map'>