Questionnaire details (#181)

* Changing email label and send button logic

* Validate on blur

* Prettier

* Barteks review

* Prettier:

Author: pkrucz00

assets/src/features/leaving-page/components/Questionnaire.tsx

@@ -31,20 +31,17 @@ const Questionnaire: FC<QuestionnaireProps> = ({ onSubmitClick }) => {
     watch,
     handleSubmit,
     formState: { errors },
-  } = useForm<Inputs>();
+  } = useForm<Inputs>({ mode: "onTouched" });
   const onSubmit: SubmitHandler<Inputs> = (data) => {
     sendForm(data);
     onSubmitClick();
   };
 
-  const emailInput = watch("email");
-  const emailFilled = !!emailInput && !errors.email;
   const emailPattern =
     /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 
   const ratingNames = ["video", "audio", "screensharing"] as const;
   const isOneQualityRated = ratingNames.map(watch).some(isNotNil);
-  const canSubmit = emailFilled && isOneQualityRated;
 
   return (
     <form
@@ -90,22 +87,24 @@ const Questionnaire: FC<QuestionnaireProps> = ({ onSubmitClick }) => {
               },
               required: "Email is required",
             }}
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
+            render={({ field: { value, onChange, onBlur }, fieldState: { error } }) => (
               <Input
                 type="text"
-                label="Your e-mail"
+                label="Your e-mail (required)"
                 name="email"
                 placeholder="Your e-mail"
                 value={value ?? ""}
                 onChange={(v) => onChange(v)}
+                onBlur={() => {
+                  onBlur();
+                }}
                 error={!!error}
                 additionalText={error?.message}
-                required
               />
             )}
           />
         </div>
-        <SubmitButton isSmartphone={!!isSmartphone} disabled={!canSubmit} />
+        <SubmitButton isSmartphone={!!isSmartphone} disabled={!isOneQualityRated} />
       </div>
     </form>
   );

assets/src/features/leaving-page/components/Rating.tsx

@@ -14,7 +14,7 @@ type StarButtonProps = {
 type RatingProps<V extends FieldValues> = {
   name: Path<V>;
   value: number | null;
-  onChange: (newValue: number) => void;
+  onChange: (newValue: number | null) => void;
 };
 
 const StarOption = ({ isActive, isHoverActive, onClick, onHover, onLeave }: StarButtonProps) => {
@@ -38,7 +38,7 @@ const StarOption = ({ isActive, isHoverActive, onClick, onHover, onLeave }: Star
 };
 
 const Rating = <V extends FieldValues>({ name, value, onChange }: RatingProps<V>) => {
-  const [rateValue, setRateValue] = useState<number>(value ?? 0);
+  const [rateValue, setRateValue] = useState<number | null>(value);
   const [hoverRateValue, setHoverRateValue] = useState<number | null>(null);
 
   const ratingsFromOneToFive = Array.from({ length: 5 }, (_, i) => i + 1);
@@ -47,10 +47,10 @@ const Rating = <V extends FieldValues>({ name, value, onChange }: RatingProps<V>
   const title = `${capitalize(name)} Quality`;
 
   const handleOnClick = (newValue: number) => {
-    const newValueOrZero = newValue === rateValue ? 0 : newValue;
+    const newValueOrNull = newValue === rateValue ? null : newValue;
 
-    onChange(newValueOrZero);
-    setRateValue(newValueOrZero);
+    onChange(newValueOrNull);
+    setRateValue(newValueOrNull);
     setHoverRateValue(null);
   };
 
@@ -61,7 +61,7 @@ const Rating = <V extends FieldValues>({ name, value, onChange }: RatingProps<V>
         {ratingsFromOneToFive.map((rateIndex) => (
           <StarOption
             key={rateIndex}
-            isActive={hoverRateValue === null && rateIndex <= rateValue}
+            isActive={hoverRateValue === null && rateValue !== null && rateIndex <= rateValue}
             isHoverActive={hoverRateValue !== null && rateIndex <= hoverRateValue}
             onClick={() => {
               handleOnClick(rateIndex);

assets/src/features/shared/components/Input.tsx

@@ -29,6 +29,7 @@ type TextInputProps = BaseInputProps & {
   value?: string;
   required?: boolean;
   onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onBlur?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
 };
 
 type InputProps = SelectInputProps | TextInputProps;
@@ -37,6 +38,7 @@ const Input: React.FC<InputProps> = (props) => {
   const {
     value,
     onChange,
+    onBlur,
     type,
     placeholder,
     label,
@@ -69,6 +71,7 @@ const Input: React.FC<InputProps> = (props) => {
           <Select
             value={value}
             onChange={onChange}
+            onBlur={onBlur}
             options={props.options}
             isDisabled={disabled}
             controlClassName={inputClassName}
@@ -83,6 +86,7 @@ const Input: React.FC<InputProps> = (props) => {
             id={name}
             value={value}
             onChange={onChange}
+            onBlur={onBlur}
             className={inputClassName}
             name={name}
             type={type}