Merge branch 'staging' into feat/TM-850-polygon-functionality

src/components/elements/Inputs/Input/Input.tsx

@@ -79,7 +79,7 @@ const Input = forwardRef(
       ...inputProps
     } = inputWrapperProps;
     const id = useId();
-    const customVariantClasses = customVariant ? customVariant : {};
+    const customVariantClasses = customVariant ?? {};
     const variantClasses = {
       default: {
         "px-3 py-[9px] rounded-lg focus:border-primary-500": true,

src/components/elements/Status/Status.tsx

@@ -29,7 +29,7 @@ const Status = (props: StatusProps) => {
       "awaiting-approval": "Awaiting Approval"
     };
 
-    return statusMap[status] || "";
+    return statusMap[status] ?? "";
   };
 
   return (

src/components/extensive/Modal/ModalAdd.tsx

@@ -64,11 +64,7 @@ const ModalAdd: FC<ModalAddProps> = ({
         <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
         <div className="flex items-center">
           <When condition={status}>
-            <Status
-              status={status ? status : StatusEnum.DRAFT}
-              className="rounded px-2 py-[2px]"
-              textVariant="text-14-bold"
-            />
+            <Status status={status ?? StatusEnum.DRAFT} className="rounded px-2 py-[2px]" textVariant="text-14-bold" />
           </When>
           <button onClick={onClose} className="ml-2 rounded p-1 hover:bg-grey-800">
             <Icon name={IconNames.CLEAR} width={16} height={16} className="text-darkCustom-100" />

src/components/extensive/WizardForm/index.tsx

@@ -1,6 +1,6 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useT } from "@transifex/react";
-import { memo, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { memo, useEffect, useLayoutEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { When } from "react-if";
 import { twMerge } from "tailwind-merge";
@@ -18,7 +18,7 @@ import { FormFooter } from "./FormFooter";
 import { WizardFormHeader } from "./FormHeader";
 import FormSummary, { FormSummaryOptions } from "./FormSummary";
 import SaveAndCloseModal, { SaveAndCloseModalProps } from "./modals/SaveAndCloseModal";
-import { downloadAnswersCSV, getSchema, getStepIndexByValues } from "./utils";
+import { downloadAnswersCSV, getSchema } from "./utils";
 
 export interface WizardFormProps {
   steps: FormStepSchema[];
@@ -67,7 +67,7 @@ function WizardForm(props: WizardFormProps) {
   const t = useT();
   const modal = useModalContext();
 
-  const [selectedStepIndex, setSelectedStepIndex] = useState(props.initialStepIndex || 0);
+  const [selectedStepIndex, setSelectedStepIndex] = useState(props.initialStepIndex ?? 0);
   const selectedStep = props.steps?.[selectedStepIndex];
   const selectedValidationSchema = selectedStep ? getSchema(selectedStep.fields) : undefined;
   const lastIndex = props.summaryOptions ? props.steps.length : props.steps.length - 1;
@@ -96,7 +96,7 @@ function WizardForm(props: WizardFormProps) {
     console.debug("Form Errors", formHook.formState.errors);
   }
 
-  const onChange = useDebounce(() => !formHasError && props.onChange && props.onChange(formHook.getValues()));
+  const onChange = useDebounce(() => !formHasError && props.onChange?.(formHook.getValues()));
 
   const onSubmitStep = (data: any) => {
     if (selectedStepIndex < lastIndex) {
@@ -105,7 +105,7 @@ function WizardForm(props: WizardFormProps) {
         //Disable auto step progress if disableAutoProgress was passed
         setSelectedStepIndex(n => n + 1);
       }
-      props.onChange && props.onChange(formHook.getValues());
+      props.onChange?.(formHook.getValues());
       props.onStepChange?.(data, selectedStep);
       formHook.clearErrors();
     } else {
@@ -116,7 +116,7 @@ function WizardForm(props: WizardFormProps) {
   };
 
   const onClickSaveAndClose = () => {
-    props.onChange && props.onChange(formHook.getValues());
+    props.onChange?.(formHook.getValues());
     modal.openModal(
       <SaveAndCloseModal
         {...props.saveAndCloseModal}
@@ -138,13 +138,14 @@ function WizardForm(props: WizardFormProps) {
     formHook.reset(formHook.getValues());
   }, [formHook, props.errors]);
 
-  const initialStepIndex = useMemo(() => {
-    return getStepIndexByValues(props.defaultValues, props.steps);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.defaultValues, props.steps]);
-
   useEffect(() => {
-    if (!props.disableAutoProgress && !props.disableInitialAutoProgress) setSelectedStepIndex(initialStepIndex);
+    if (props.disableAutoProgress || props.disableInitialAutoProgress) return;
+
+    const stepIndex = props.steps.findIndex(step => !getSchema(step.fields).isValidSync(props.defaultValues));
+
+    // If none of the steps has an invalid field, use the last step
+    setSelectedStepIndex(stepIndex < 0 ? lastIndex : stepIndex);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

src/components/extensive/WizardForm/utils.ts

@@ -53,25 +53,6 @@ export const getSchemaFields = (fields: FormField[]) => {
   return schema;
 };
 
-export const getStepIndexByValues = (values: any, steps: FormStepSchema[], skipValueCheck?: boolean) => {
-  let currentStepIndex = -1;
-
-  for (const step of steps) {
-    currentStepIndex++;
-
-    if (!getSchema(step.fields).isValidSync(values)) {
-      return currentStepIndex;
-    } else if (!skipValueCheck) {
-      for (const field of step.fields) {
-        if (!values[field.name]) {
-          return currentStepIndex;
-        }
-      }
-    }
-  }
-  return currentStepIndex;
-};
-
 export const getAnswer = (
   field: FormField,
   values: any

src/pages/auth/layout.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "@mui/material";
+import { useT } from "@transifex/react";
 import { usePathname } from "next/navigation";
 import React from "react";
 import { When } from "react-if";
@@ -13,7 +14,7 @@ interface LoginLayoutProps {
 const LoginLayout: React.FC<LoginLayoutProps> = props => {
   const { children } = props;
   const pathname = usePathname();
-
+  const t = useT();
   return (
     <div className="relative flex h-screen w-full bg-square-pattern bg-contain bg-right bg-no-repeat">
       <div className="mt-[-78px] flex w-[45%] flex-col items-center justify-center py-[78px]">
@@ -22,7 +23,7 @@ const LoginLayout: React.FC<LoginLayoutProps> = props => {
           <div className="absolute bottom-[1.5vh] left-6">
             <Button>
               <Text variant="text-12-bold" className="text-primary">
-                English (United Kingdom)
+                {t("English (United Kingdom)")}
               </Text>
             </Button>
           </div>

src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx

@@ -33,7 +33,7 @@ const EditEntityPage = () => {
   const { getReportingWindow } = useGetReportingWindow();
   const entityName = router.query.entityName as EntityName;
   const entityUUID = router.query.uuid as string;
-  const mode = router.query.mode as string; //edit, provide-feedback-entity, provide-feedback-change-request
+  const mode = router.query.mode as string | undefined; //edit, provide-feedback-entity, provide-feedback-change-request
 
   const isReport = isEntityReport(entityName);
   const { data: entityData } = useGetV2ENTITYUUID({
@@ -108,6 +108,18 @@ const EditEntityPage = () => {
     )
   };
 
+  const initialStepProps = useMemo(() => {
+    if (isLoading) return {};
+
+    const stepIndex =
+      mode == null ? 0 : formSteps!.findIndex(step => step.fields.find(field => field.feedbackRequired) != null);
+
+    return {
+      initialStepIndex: stepIndex < 0 ? undefined : stepIndex,
+      disableInitialAutoProgress: stepIndex >= 0
+    };
+  }, [isLoading]);
+
   return (
     <BackgroundLayout>
       <LoadingContainer loading={isLoading}>
@@ -153,6 +165,7 @@ const EditEntityPage = () => {
               router.push(getEntityDetailPageLink(entityName, entityUUID));
             }
           }}
+          {...initialStepProps}
         />
       </LoadingContainer>
       <br />

src/pages/organization/[id]/components/OrganizationHeader.tsx

@@ -67,7 +67,7 @@ const OrganizationHeader = ({ organization }: OrganizationHeaderProps) => {
               </Text>
             </div>
             <Text variant="text-body-900">
-              {formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) || ""}
+              {formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) ?? ""}
             </Text>
             <Text variant="text-body-400">{organization?.description}</Text>
           </div>