From 8f20c322e87928a44a31388bedfbb47e8e18627d Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Fri, 17 Jan 2025 16:53:22 -0800
Subject: [PATCH 01/25] LF-4631 Add translation for loading screen

---
 packages/webapp/public/locales/en/common.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webapp/public/locales/en/common.json b/packages/webapp/public/locales/en/common.json
index a6dd4879cf..c0f2fc2963 100644
--- a/packages/webapp/public/locales/en/common.json
+++ b/packages/webapp/public/locales/en/common.json
@@ -39,6 +39,7 @@
   "EDITING": "Editing...",
   "ENTER_VALUE": "Enter value",
   "EXPORT": "Export",
+  "FETCHING_YOUR_DATA": "Sit back, we’re fetching your {{dataName}} data",
   "FINISH": "Finish",
   "FROM": "from",
   "GO_BACK": "Go back",

From 3c3b6a4381435579ed4fe7d8d38e2117e5581453 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Fri, 17 Jan 2025 16:57:31 -0800
Subject: [PATCH 02/25] LF-4631 Add loading screen

---
 .../components/Form/ContextForm/Loading.tsx   | 38 +++++++++++++++++++
 .../Form/ContextForm/styles.module.scss       | 22 +++++++++++
 2 files changed, 60 insertions(+)
 create mode 100644 packages/webapp/src/components/Form/ContextForm/Loading.tsx

diff --git a/packages/webapp/src/components/Form/ContextForm/Loading.tsx b/packages/webapp/src/components/Form/ContextForm/Loading.tsx
new file mode 100644
index 0000000000..e1eb3e95af
--- /dev/null
+++ b/packages/webapp/src/components/Form/ContextForm/Loading.tsx
@@ -0,0 +1,38 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useTranslation } from 'react-i18next';
+import Spinner from '../../Spinner';
+import styles from './styles.module.scss';
+
+interface LoadingProps {
+  dataName?: string;
+}
+
+const Loading = ({ dataName = '' }: LoadingProps) => {
+  const { t } = useTranslation(['translation', 'common']);
+
+  return (
+    <div className={styles.loadingScreen}>
+      <div>
+        <Spinner />
+      </div>
+      <div className={styles.loadingText}>{t('common:LOADING')}</div>
+      <div className={styles.loadingMessage}>{t('common:FETCHING_YOUR_DATA', { dataName })}</div>
+    </div>
+  );
+};
+
+export default Loading;
diff --git a/packages/webapp/src/components/Form/ContextForm/styles.module.scss b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
index 15d2f2bfef..fd0f8f7399 100644
--- a/packages/webapp/src/components/Form/ContextForm/styles.module.scss
+++ b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
@@ -22,3 +22,25 @@
     padding-bottom: 104px; // button height 72px + button top 16px + button bottom 16px
   }
 }
+
+.loadingScreen {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.loadingText {
+  color: #000;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  margin-bottom: 16px;
+}
+
+.loadingMessage {
+  color: #000;
+  font-size: 16px;
+  line-height: 24px;
+}

From 974e006bcbd180c80da7389aefcb394507f06361 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Fri, 17 Jan 2025 17:00:51 -0800
Subject: [PATCH 03/25] LF-4631 Update WithStepperProgressBar to support
 loading screen

---
 .../ContextForm/WithStepperProgressBar.tsx    | 34 ++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index 14aeefc977..fe69a94004 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -27,12 +27,18 @@ import FloatingContainer from '../../FloatingContainer';
 import FormNavigationButtons from '../FormNavigationButtons';
 import FixedHeaderContainer from '../../Animals/FixedHeaderContainer';
 import CancelFlowModal from '../../Modals/CancelFlowModal';
+import Loading from './Loading';
 import styles from './styles.module.scss';
 
 interface WithStepperProgressBarProps {
   children: ReactNode;
   history: History;
-  steps: { formContent: ReactNode; title: string }[];
+  steps: {
+    formContent: ReactNode;
+    title: string;
+    onContinueAction?: () => Promise<void>;
+    dataName?: string;
+  }[];
   activeStepIndex: number;
   cancelModalTitle: string;
   isCompactSideMenu: boolean;
@@ -90,6 +96,7 @@ export const WithStepperProgressBar = ({
     retry: undefined,
   });
   const [isSaving, setIsSaving] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
 
   const isSummaryPage = hasSummaryWithinForm && activeStepIndex === steps.length - 1;
   const isSingleStep = steps.length === 1;
@@ -107,6 +114,13 @@ export const WithStepperProgressBar = ({
     return () => unblock();
   }, [isSummaryPage, isDirty, history]);
 
+  useEffect(() => {
+    // Reset loading state whenever the step changes
+    if (isLoading) {
+      setIsLoading(false);
+    }
+  }, [activeStepIndex]);
+
   const isFinalStep =
     (!hasSummaryWithinForm && activeStepIndex === steps.length - 1) ||
     (hasSummaryWithinForm && activeStepIndex === steps.length - 2);
@@ -123,6 +137,20 @@ export const WithStepperProgressBar = ({
   };
 
   const onContinue = async () => {
+    const { onContinueAction } = steps[activeStepIndex];
+
+    if (onContinueAction) {
+      setIsLoading(true);
+      try {
+        // Execute the custom action for the current step before proceeding to the next one
+        await onContinueAction();
+      } catch (error) {
+        console.error(error);
+        setIsLoading(false);
+        return;
+      }
+    }
+
     if (isFinalStep) {
       setIsSaving(true);
       await handleSubmit((data: FieldValues) => onSave(data, onSuccess, setFormResultData))();
@@ -149,6 +177,10 @@ export const WithStepperProgressBar = ({
     setShowCancelFlow?.(false);
   };
 
+  if (isLoading) {
+    return <Loading dataName={steps[activeStepIndex].dataName} />;
+  }
+
   return (
     <StepperProgressBarWrapper
       isSingleStep={isSingleStep}

From a7c4f23f0a041f762f05583a9be6089ca67384cf Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Fri, 17 Jan 2025 17:03:33 -0800
Subject: [PATCH 04/25] LF-4631 Add story for ContextForm with onContinueAction
 function

---
 .../ContextForm/ContextForm.stories.tsx       | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx b/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
index 783f59d200..e9a388160d 100644
--- a/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
+++ b/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
@@ -97,3 +97,41 @@ export const StepperFormWithSummaryPage: Story = {
     ],
   },
 };
+
+const asyncFunc = async (status: 'success' | 'fail') => {
+  console.log(`Simulating ${status === 'success' ? 'successful' : 'failed'} API call...`);
+
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      if (status === 'success') {
+        resolve();
+      } else {
+        reject(new Error('ERROR'));
+      }
+    }, 1500);
+  });
+};
+
+export const StepperFormWithCustomActionOnContinue: Story = {
+  args: {
+    ...stepperFormCommonProps,
+    hasSummaryWithinForm: true,
+    getSteps: () => [
+      {
+        title: 'Page 1',
+        FormContent: () => <div>Page 1</div>,
+        onContinueAction: () => asyncFunc('success'),
+        dataName: 'sensor',
+      },
+      {
+        title: 'Page 2',
+        FormContent: () => <div>Page 2</div>,
+        onContinueAction: () => asyncFunc('fail'),
+      },
+      {
+        title: 'Done',
+        FormContent: () => <div>Summary</div>,
+      },
+    ],
+  },
+};

From 73bebe5f4143405d05976294d1f83b814470fced Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 20 Jan 2025 13:20:02 -0800
Subject: [PATCH 05/25] LF-4631 Add HeaderWithBackAndClose component

---
 .../ContextForm/HeaderWithBackAndClose.tsx    | 48 +++++++++++++++++
 .../Form/ContextForm/styles.module.scss       | 51 +++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx

diff --git a/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx b/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx
new file mode 100644
index 0000000000..b7b5b432f6
--- /dev/null
+++ b/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx
@@ -0,0 +1,48 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { ReactNode } from 'react';
+import Icon from '../../Icons';
+import TextButton from '../Button/TextButton';
+import { ReactComponent as XIcon } from '../../../assets/images/x-icon.svg';
+import styles from './styles.module.scss';
+
+interface HeaderWithBackAndCloseProps {
+  title: ReactNode;
+  onCancel?: () => void;
+  onGoBack?: () => void;
+}
+
+const HeaderWithBackAndClose = ({ title, onCancel, onGoBack }: HeaderWithBackAndCloseProps) => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.leftContainer}>
+        {onGoBack && (
+          <TextButton onClick={onGoBack}>
+            <Icon iconName="CHEVRON_LEFT" className={styles.backButton} />
+          </TextButton>
+        )}
+        <div className={typeof title === 'string' ? styles.textTitle : ''}>{title}</div>
+      </div>
+      {onCancel && (
+        <TextButton className={styles.closeButtonContainer} onClick={onCancel}>
+          <XIcon className={styles.closeButton} />
+        </TextButton>
+      )}
+    </div>
+  );
+};
+
+export default HeaderWithBackAndClose;
diff --git a/packages/webapp/src/components/Form/ContextForm/styles.module.scss b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
index fd0f8f7399..adffdf0251 100644
--- a/packages/webapp/src/components/Form/ContextForm/styles.module.scss
+++ b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
@@ -44,3 +44,54 @@
   font-size: 16px;
   line-height: 24px;
 }
+
+/*----------------------------------------
+  HeaderWithBackAndClose
+----------------------------------------*/
+.container {
+  display: flex;
+  justify-content: space-between;
+  padding-top: 16px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--Colors-Neutral-Neutral-50);
+  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+}
+
+.leftContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.backButton {
+  padding: 0;
+  min-width: 24px;
+  min-height: 24px;
+
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  path {
+    stroke: var(--Colors-Neutral-Neutral-600);
+    stroke-width: 2px;
+  }
+}
+
+.textTitle {
+  letter-spacing: -0.352px;
+}
+
+.closeButtonContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+}
+
+.closeButton {
+  width: 12px;
+  height: 12px;
+}

From f1357392e7167d5106b1f62880930882c3164272 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 20 Jan 2025 13:27:57 -0800
Subject: [PATCH 06/25] LF-4631 Modify WithStepperProgressBar to add
 SIMPLE_HEADER variant

---
 .../ContextForm/WithStepperProgressBar.tsx    | 29 +++++++++++++++++++
 .../src/components/Form/ContextForm/index.tsx |  3 ++
 2 files changed, 32 insertions(+)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index fe69a94004..3670603106 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -28,6 +28,8 @@ import FormNavigationButtons from '../FormNavigationButtons';
 import FixedHeaderContainer from '../../Animals/FixedHeaderContainer';
 import CancelFlowModal from '../../Modals/CancelFlowModal';
 import Loading from './Loading';
+import HeaderWithBackAndClose from './HeaderWithBackAndClose';
+import { Variant } from '.';
 import styles from './styles.module.scss';
 
 interface WithStepperProgressBarProps {
@@ -65,6 +67,7 @@ interface WithStepperProgressBarProps {
   setIsEditing?: React.Dispatch<React.SetStateAction<boolean>>;
   showCancelFlow?: boolean;
   setShowCancelFlow?: React.Dispatch<React.SetStateAction<boolean>>;
+  variant: Variant;
 }
 
 export const WithStepperProgressBar = ({
@@ -90,6 +93,7 @@ export const WithStepperProgressBar = ({
   setIsEditing,
   showCancelFlow,
   setShowCancelFlow,
+  variant,
 }: WithStepperProgressBarProps) => {
   const [transition, setTransition] = useState<{ unblock?: () => void; retry?: () => void }>({
     unblock: undefined,
@@ -188,6 +192,9 @@ export const WithStepperProgressBar = ({
       title={stepperProgressBarTitle}
       steps={steps.map(({ title }) => title)}
       activeStep={activeStepIndex}
+      onGoBack={onGoBack}
+      onCancel={onCancel}
+      variant={variant}
     >
       <div className={styles.contentWrapper}>{children}</div>
       {shouldShowFormNavigationButtons && (
@@ -216,17 +223,39 @@ export const WithStepperProgressBar = ({
 type StepperProgressBarWrapperProps = StepperProgressBarProps & {
   children: ReactNode;
   isSingleStep: boolean;
+  onGoBack: () => void;
+  onCancel: () => void;
+  variant: Variant;
 };
 
 const StepperProgressBarWrapper = ({
   children,
   isSingleStep,
+  onGoBack,
+  onCancel,
+  variant,
   ...stepperProgressBarProps
 }: StepperProgressBarWrapperProps) => {
   if (isSingleStep) {
     return <>{children}</>;
   }
 
+  if (variant === Variant.SIMPLE_HEADER) {
+    return (
+      <FixedHeaderContainer
+        header={
+          <HeaderWithBackAndClose
+            title={stepperProgressBarProps.title}
+            onGoBack={onGoBack}
+            onCancel={onCancel}
+          />
+        }
+      >
+        {children}
+      </FixedHeaderContainer>
+    );
+  }
+
   return (
     <FixedHeaderContainer header={<StepperProgressBar {...stepperProgressBarProps} />}>
       {children}
diff --git a/packages/webapp/src/components/Form/ContextForm/index.tsx b/packages/webapp/src/components/Form/ContextForm/index.tsx
index 9b9cdae4fb..79efd8b9b3 100644
--- a/packages/webapp/src/components/Form/ContextForm/index.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/index.tsx
@@ -21,11 +21,13 @@ import { WithStepperProgressBar } from './WithStepperProgressBar';
 export enum Variant {
   PAGE_TITLE = 'page_title',
   STEPPER_PROGRESS_BAR = 'stepper_progress_bar',
+  SIMPLE_HEADER = 'simple_header',
 }
 
 const COMPONENTS = {
   [Variant.PAGE_TITLE]: (props: any) => <WithPageTitle {...props} />,
   [Variant.STEPPER_PROGRESS_BAR]: (props: any) => <WithStepperProgressBar {...props} />,
+  [Variant.SIMPLE_HEADER]: (props: any) => <WithStepperProgressBar {...props} />,
 };
 
 interface ContextFormProps {
@@ -107,6 +109,7 @@ export const ContextForm = ({
       setIsEditing={setIsEditing}
       showCancelFlow={showCancelFlow}
       setShowCancelFlow={setShowCancelFlow}
+      variant={variant}
       {...form}
       {...props}
     >

From 5272a501ce5cefd52ffda6916b7fb522d280789d Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 20 Jan 2025 13:30:28 -0800
Subject: [PATCH 07/25] LF-4631 Add stories for ContextForm SIMPLE_HEADER
 variant

---
 .../ContextForm/ContextForm.stories.tsx       | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx b/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
index e9a388160d..5e1541f98b 100644
--- a/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
+++ b/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
@@ -16,6 +16,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { componentDecorators } from '../Pages/config/Decorators';
 import { ContextForm, Variant } from '../../components/Form/ContextForm';
+import MeatballsMenu from '../../components/Menu/MeatballsMenu';
 
 // https://storybook.js.org/docs/writing-stories/typescript
 const meta: Meta<typeof ContextForm> = {
@@ -135,3 +136,30 @@ export const StepperFormWithCustomActionOnContinue: Story = {
     ],
   },
 };
+
+export const SimpleTextHeader: Story = {
+  args: {
+    ...stepperFormCommonProps,
+    variant: Variant.SIMPLE_HEADER,
+    stepperProgressBarTitle: 'Simple Header',
+  },
+};
+
+export const SimpleDivHeader: Story = {
+  args: {
+    ...stepperFormCommonProps,
+    variant: Variant.SIMPLE_HEADER,
+    stepperProgressBarTitle: (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span>Simple Header</span>
+        <MeatballsMenu
+          options={[
+            { label: 'Menu 1', onClick: () => console.log('Menu 1') },
+            { label: 'Menu 2', onClick: () => console.log('Menu 2') },
+          ]}
+          disabled={false}
+        />
+      </div>
+    ),
+  },
+};

From c177765ed079325bddb52d0d5b691e95a98a6f7c Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 20 Jan 2025 13:34:00 -0800
Subject: [PATCH 08/25] LF-4631 Adjust HeaderWithBackAndClose styles

---
 .../ContextForm/HeaderWithBackAndClose.tsx    | 24 +++---
 .../Form/ContextForm/styles.module.scss       | 77 ++++++++++---------
 2 files changed, 54 insertions(+), 47 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx b/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx
index b7b5b432f6..cfef89dfc5 100644
--- a/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/HeaderWithBackAndClose.tsx
@@ -27,20 +27,22 @@ interface HeaderWithBackAndCloseProps {
 
 const HeaderWithBackAndClose = ({ title, onCancel, onGoBack }: HeaderWithBackAndCloseProps) => {
   return (
-    <div className={styles.container}>
-      <div className={styles.leftContainer}>
-        {onGoBack && (
-          <TextButton onClick={onGoBack}>
-            <Icon iconName="CHEVRON_LEFT" className={styles.backButton} />
+    <div className={styles.headerWrapper}>
+      <div className={styles.container}>
+        <div className={styles.leftContainer}>
+          {onGoBack && (
+            <TextButton onClick={onGoBack}>
+              <Icon iconName="CHEVRON_LEFT" className={styles.backButton} />
+            </TextButton>
+          )}
+          <div className={typeof title === 'string' ? styles.textTitle : ''}>{title}</div>
+        </div>
+        {onCancel && (
+          <TextButton className={styles.closeButtonContainer} onClick={onCancel}>
+            <XIcon className={styles.closeButton} />
           </TextButton>
         )}
-        <div className={typeof title === 'string' ? styles.textTitle : ''}>{title}</div>
       </div>
-      {onCancel && (
-        <TextButton className={styles.closeButtonContainer} onClick={onCancel}>
-          <XIcon className={styles.closeButton} />
-        </TextButton>
-      )}
     </div>
   );
 };
diff --git a/packages/webapp/src/components/Form/ContextForm/styles.module.scss b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
index adffdf0251..29ac261a2a 100644
--- a/packages/webapp/src/components/Form/ContextForm/styles.module.scss
+++ b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
@@ -48,50 +48,55 @@
 /*----------------------------------------
   HeaderWithBackAndClose
 ----------------------------------------*/
-.container {
-  display: flex;
-  justify-content: space-between;
-  padding-top: 16px;
-  padding-bottom: 12px;
+.headerWrapper {
+  width: 100%;
   border-bottom: 1px solid var(--Colors-Neutral-Neutral-50);
   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-}
-
-.leftContainer {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
 
-.backButton {
-  padding: 0;
-  min-width: 24px;
-  min-height: 24px;
+  .container {
+    max-width: 1024px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px 8px 12px 8px;
+  }
 
-  svg {
-    width: 24px;
-    height: 24px;
+  .leftContainer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
   }
 
-  path {
-    stroke: var(--Colors-Neutral-Neutral-600);
-    stroke-width: 2px;
+  .backButton {
+    padding: 0;
+    min-width: 24px;
+    min-height: 24px;
+
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+
+    path {
+      stroke: var(--Colors-Neutral-Neutral-600);
+      stroke-width: 2px;
+    }
   }
-}
 
-.textTitle {
-  letter-spacing: -0.352px;
-}
+  .textTitle {
+    letter-spacing: -0.352px;
+  }
 
-.closeButtonContainer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-}
+  .closeButtonContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 24px;
+    height: 24px;
+  }
 
-.closeButton {
-  width: 12px;
-  height: 12px;
+  .closeButton {
+    width: 12px;
+    height: 12px;
+  }
 }

From 1d59f3078fbe4839a4084c9e628af5bc84fc22f8 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 20 Jan 2025 13:35:20 -0800
Subject: [PATCH 09/25] LF-4631 Add missing style for HeaderWithBackAndClose

---
 .../webapp/src/components/Form/ContextForm/styles.module.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webapp/src/components/Form/ContextForm/styles.module.scss b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
index 29ac261a2a..910251d0d4 100644
--- a/packages/webapp/src/components/Form/ContextForm/styles.module.scss
+++ b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
@@ -84,6 +84,7 @@
   }
 
   .textTitle {
+    font-size: 16px;
     letter-spacing: -0.352px;
   }
 

From b3dbe1b80da21ae9b2ea3a61b45784ff1261a646 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 21 Jan 2025 12:44:41 -0800
Subject: [PATCH 10/25] LF-4631 Add PostSensor container

---
 .../SensorDetail/v2/PostSensor.tsx            | 80 +++++++++++++++++++
 .../SensorDetail/v2/styles.module.scss        | 18 +++++
 2 files changed, 98 insertions(+)
 create mode 100644 packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx
 create mode 100644 packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss

diff --git a/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx
new file mode 100644
index 0000000000..024dc36861
--- /dev/null
+++ b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx
@@ -0,0 +1,80 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+import { useTranslation } from 'react-i18next';
+import { useDispatch } from 'react-redux';
+import { History } from 'history';
+import { ContextForm, Variant } from '../../../../../components/Form/ContextForm';
+import { enqueueErrorSnackbar } from '../../../../Snackbar/snackbarSlice';
+import styles from './styles.module.scss';
+
+interface PostSensorProps {
+  history: History;
+}
+
+const PostSensor = ({ history }: PostSensorProps) => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const linkOrganizationId = async () => {
+    // TODO: POST /farm_addon
+    //       When failed: snackbar
+
+    // Simulating the API call
+    return new Promise<void>((resolve, reject) => {
+      setTimeout(() => {
+        // Successful
+        resolve();
+
+        // Failed
+        // reject(dispatch(enqueueErrorSnackbar('TODO: Error message')));
+      }, 1500);
+    });
+  };
+
+  const onSave = async (data: any, onSuccess: () => void) => {
+    // TODO: GET devices with useLazyQuery.
+    //       Once the data is returned, call onSuccess to navigate to the next view.
+
+    onSuccess();
+  };
+
+  const getFormSteps = () => [
+    {
+      FormContent: () => <div>Partner selection view</div>,
+      onContinueAction: linkOrganizationId,
+    },
+    { FormContent: () => <div>ESCI devices view</div> },
+  ];
+
+  const defaultFormValues = {
+    partner: { integrating_partner_id: 1, organization_uuid: '' },
+  };
+
+  return (
+    <div className={styles.formWrapper}>
+      <ContextForm
+        stepperProgressBarTitle={t('SENSOR.DETAIL.ADD_SENSORS')}
+        history={history}
+        getSteps={getFormSteps}
+        defaultFormValues={defaultFormValues}
+        variant={Variant.SIMPLE_HEADER}
+        hasSummaryWithinForm={true}
+        onSave={onSave}
+      />
+    </div>
+  );
+};
+
+export default PostSensor;
diff --git a/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss
new file mode 100644
index 0000000000..2a79ac00a5
--- /dev/null
+++ b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss
@@ -0,0 +1,18 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+.formWrapper {
+  height: 100%;
+}

From 367c20d666c04804204d3865cc8064ae550b7c75 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Thu, 9 Jan 2025 11:13:21 -0800
Subject: [PATCH 11/25] LF-4631 Add PostSensor container to full width routes

---
 packages/webapp/src/App.jsx                  | 4 ++--
 packages/webapp/src/util/siteMapConstants.ts | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/App.jsx b/packages/webapp/src/App.jsx
index 425bb01112..e68ea49cfd 100644
--- a/packages/webapp/src/App.jsx
+++ b/packages/webapp/src/App.jsx
@@ -24,12 +24,12 @@ import { NotistackSnackbar } from './containers/Snackbar/NotistackSnackbar';
 import { OfflineDetector } from './containers/hooks/useOfflineDetector/OfflineDetector';
 import styles from './styles.module.scss';
 import Routes from './routes';
-import { ANIMALS_URL } from './util/siteMapConstants';
+import { ANIMALS_URL, MAP_URL, POST_SENSOR_URL } from './util/siteMapConstants';
 
 function App() {
   const [isCompactSideMenu, setIsCompactSideMenu] = useState(false);
   const [isFeedbackSurveyOpen, setFeedbackSurveyOpen] = useState(false);
-  const FULL_WIDTH_ROUTES = ['/map', ANIMALS_URL];
+  const FULL_WIDTH_ROUTES = [MAP_URL, ANIMALS_URL, POST_SENSOR_URL];
   const isFullWidth = FULL_WIDTH_ROUTES.some((path) => matchPath(history.location.pathname, path));
 
   return (
diff --git a/packages/webapp/src/util/siteMapConstants.ts b/packages/webapp/src/util/siteMapConstants.ts
index b971249249..20dd5d424e 100644
--- a/packages/webapp/src/util/siteMapConstants.ts
+++ b/packages/webapp/src/util/siteMapConstants.ts
@@ -88,3 +88,7 @@ export const createCompleteHarvestQuantityTaskUrl = (id: string | number): strin
 export const createCompleteTaskUrl = (id: string | number, hasAnimals: boolean): string => {
   return hasAnimals ? `/tasks/${id}/before_complete` : `/tasks/${id}/complete`;
 };
+
+// Maps
+export const MAP_URL = '/map';
+export const POST_SENSOR_URL = '/create_location/sensor';

From a13ea3356151aee9bf2d4457d4ef33f1a6344665 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Thu, 9 Jan 2025 11:14:50 -0800
Subject: [PATCH 12/25] LF-4631 Add PostSensor route

---
 packages/webapp/src/routes/index.jsx | 209 ++++++++++++++-------------
 1 file changed, 109 insertions(+), 100 deletions(-)

diff --git a/packages/webapp/src/routes/index.jsx b/packages/webapp/src/routes/index.jsx
index 0e590b83ae..2ee0984296 100644
--- a/packages/webapp/src/routes/index.jsx
+++ b/packages/webapp/src/routes/index.jsx
@@ -54,83 +54,88 @@ const Prices = React.lazy(() => import('../containers/Insights/Prices'));
 const ExpiredTokenScreen = React.lazy(() => import('../containers/ExpiredTokenScreen'));
 const Map = React.lazy(() => import('../containers/Map'));
 const MapVideo = React.lazy(() => import('../components/Map/Videos'));
-const PostFarmSiteBoundaryForm = React.lazy(() =>
-  import(
-    '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
-  ),
+const PostFarmSiteBoundaryForm = React.lazy(
+  () =>
+    import(
+      '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
+    ),
 );
 const FarmSiteBoundaryDetails = React.lazy(() => import('./FarmSiteBoundaryDetailsRoutes'));
 
-const PostFieldForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
+const PostFieldForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
 );
 const FieldDetails = React.lazy(() => import('./FieldDetailsRoutes'));
 
-const PostGardenForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
+const PostGardenForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
 );
 const GardenDetails = React.lazy(() => import('./GardenDetailsRoutes'));
 
-const PostGateForm = React.lazy(() =>
-  import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
+const PostGateForm = React.lazy(
+  () => import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
 );
 const GateDetails = React.lazy(() => import('./GateDetailsRoutes'));
 
-const PostWaterValveForm = React.lazy(() =>
-  import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
+const PostWaterValveForm = React.lazy(
+  () => import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
 );
 const WaterValveDetails = React.lazy(() => import('./WaterValveDetailsRoutes'));
-const EditSensor = React.lazy(() =>
-  import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
+const EditSensor = React.lazy(
+  () => import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
 );
 
-const PostBarnForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
+const PostBarnForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
 );
 const BarnDetails = React.lazy(() => import('./BarnDetailsRoutes'));
 
-const PostNaturalAreaForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
+const PostNaturalAreaForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
 );
 const NaturalAreaDetails = React.lazy(() => import('./NaturalAreaDetailsRoutes'));
 
-const PostSurfaceWaterForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
+const PostSurfaceWaterForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
 );
 const SurfaceWaterDetails = React.lazy(() => import('./SurfaceWaterDetailsRoutes'));
 
-const PostResidenceForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
+const PostResidenceForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
 );
 const ResidenceDetails = React.lazy(() => import('./ResidenceDetailsRoutes'));
 
-const PostCeremonialForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
+const PostCeremonialForm = React.lazy(
+  () =>
+    import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
 );
 const CeremonialAreaDetails = React.lazy(() => import('./CeremonialAreaDetailsRoutes'));
 
-const PostGreenhouseForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
+const PostGreenhouseForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
 );
 const GreenhouseDetails = React.lazy(() => import('./GreenhouseDetailsRoutes'));
 
 const CropManagement = React.lazy(() => import('../containers/Crop/CropManagement'));
 const CropDetail = React.lazy(() => import('../containers/Crop/CropDetail/index'));
 
-const PostFenceForm = React.lazy(() =>
-  import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
+const PostFenceForm = React.lazy(
+  () => import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
 );
 const FenceDetails = React.lazy(() => import('./FenceDetailsRoutes'));
 
-const PostBufferZoneForm = React.lazy(() =>
-  import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
+const PostBufferZoneForm = React.lazy(
+  () => import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
 );
 const BufferZoneDetails = React.lazy(() => import('./BufferZoneDetailsRoutes'));
 
-const PostWatercourseForm = React.lazy(() =>
-  import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
+const PostWatercourseForm = React.lazy(
+  () => import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
 );
 const WatercourseDetails = React.lazy(() => import('./WatercourseDetailsRoutes'));
+const PostSensorForm = React.lazy(
+  () => import('../containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor'),
+);
 const SensorDetails = React.lazy(() => import('./SensorDetailsRoutes'));
 
 const CropCatalogue = React.lazy(() => import('../containers/CropCatalogue'));
@@ -139,34 +144,34 @@ const AddCrop = React.lazy(() => import('../containers/AddCropVariety/AddCropVar
 const EditCrop = React.lazy(() => import('../containers/EditCropVariety'));
 const ComplianceInfo = React.lazy(() => import('../containers/AddCropVariety/ComplianceInfo'));
 const AddNewCrop = React.lazy(() => import('../containers/AddNewCrop'));
-const PlantingLocation = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/PlantingLocation'),
+const PlantingLocation = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/PlantingLocation'),
 );
 const Transplant = React.lazy(() => import('../containers/Crop/AddManagementPlan/Transplant'));
 const PlantingDate = React.lazy(() => import('../containers/Crop/AddManagementPlan/PlantingDate'));
-const PlantingMethod = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/PlantingMethod'),
+const PlantingMethod = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/PlantingMethod'),
 );
-const PlantInContainer = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/PlantInContainer'),
+const PlantInContainer = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/PlantInContainer'),
 );
-const PlantBroadcast = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
+const PlantBroadcast = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
 );
 const BedPlan = React.lazy(() => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlan'));
-const BedPlanGuidance = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
+const BedPlanGuidance = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
 );
-const ManagementPlanName = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
+const ManagementPlanName = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
 );
 const RowMethod = React.lazy(() => import('../containers/Crop/AddManagementPlan/RowMethod'));
-const RowMethodGuidance = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
+const RowMethodGuidance = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
 );
 
-const PlantedAlready = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/PlantedAlready'),
+const PlantedAlready = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/PlantedAlready'),
 );
 
 const Documents = React.lazy(() => import('../containers/Documents'));
@@ -175,60 +180,63 @@ const EditDocument = React.lazy(() => import('../containers/Documents/Edit'));
 
 const AddDocument = React.lazy(() => import('../containers/Documents/Add'));
 const MainDocument = React.lazy(() => import('../containers/Documents/Main'));
-const CertificationReportingPeriod = React.lazy(() =>
-  import('../containers/Certifications/ReportingPeriod'),
+const CertificationReportingPeriod = React.lazy(
+  () => import('../containers/Certifications/ReportingPeriod'),
 );
 const CertificationSurvey = React.lazy(() => import('../containers/Certifications/Survey'));
 
-const InterestedOrganic = React.lazy(() =>
-  import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
+const InterestedOrganic = React.lazy(
+  () => import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
 );
-const CertificationSelection = React.lazy(() =>
-  import(
-    '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
-  ),
+const CertificationSelection = React.lazy(
+  () =>
+    import(
+      '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
+    ),
 );
 
-const CertifierSelectionMenu = React.lazy(() =>
-  import(
-    '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
-  ),
+const CertifierSelectionMenu = React.lazy(
+  () =>
+    import(
+      '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
+    ),
 );
 
-const SetCertificationSummary = React.lazy(() =>
-  import(
-    '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
-  ),
+const SetCertificationSummary = React.lazy(
+  () =>
+    import(
+      '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
+    ),
 );
 
-const RequestCertifier = React.lazy(() =>
-  import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
+const RequestCertifier = React.lazy(
+  () => import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
 );
-const ViewCertification = React.lazy(() =>
-  import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
+const ViewCertification = React.lazy(
+  () => import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
 );
 
 const RenderSurvey = React.lazy(() => import('../containers/RenderSurvey/RenderSurvey'));
 const ExportDownload = React.lazy(() => import('../containers/ExportDownload'));
 
-const ManagementTasks = React.lazy(() =>
-  import('../containers/Crop/ManagementDetail/ManagementTasks'),
+const ManagementTasks = React.lazy(
+  () => import('../containers/Crop/ManagementDetail/ManagementTasks'),
 );
-const ManagementDetails = React.lazy(() =>
-  import('../containers/Crop/ManagementDetail/ManagementDetails'),
+const ManagementDetails = React.lazy(
+  () => import('../containers/Crop/ManagementDetail/ManagementDetails'),
 );
-const EditManagementDetails = React.lazy(() =>
-  import('../containers/Crop/ManagementDetail/EditManagementDetails'),
+const EditManagementDetails = React.lazy(
+  () => import('../containers/Crop/ManagementDetail/EditManagementDetails'),
 );
-const CompleteManagementPlan = React.lazy(() =>
-  import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
+const CompleteManagementPlan = React.lazy(
+  () => import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
 );
-const AbandonManagementPlan = React.lazy(() =>
-  import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
+const AbandonManagementPlan = React.lazy(
+  () => import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
 );
 const RepeatCropPlan = React.lazy(() => import('../containers/Crop/RepeatCropPlan'));
-const RepeatCropPlanConfirmation = React.lazy(() =>
-  import('../containers/Crop/RepeatCropPlan/Confirmation'),
+const RepeatCropPlanConfirmation = React.lazy(
+  () => import('../containers/Crop/RepeatCropPlan/Confirmation'),
 );
 
 const TaskAssignment = React.lazy(() => import('../containers/Task/TaskAssignment'));
@@ -242,41 +250,41 @@ const Tasks = React.lazy(() => import('../containers/Task'));
 const ManageCustomTasks = React.lazy(() => import('../containers/Task/ManageCustomTasks'));
 const AddCustomTask = React.lazy(() => import('../containers/Task/AddCustomTask'));
 const TaskComplete = React.lazy(() => import('../containers/Task/TaskComplete'));
-const HarvestCompleteQuantity = React.lazy(() =>
-  import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
+const HarvestCompleteQuantity = React.lazy(
+  () => import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
 );
-const HarvestUses = React.lazy(() =>
-  import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
+const HarvestUses = React.lazy(
+  () => import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
 );
 const TaskCompleteStepOne = React.lazy(() => import('../containers/Task/TaskComplete/StepOne'));
 const TaskReadOnly = React.lazy(() => import('../containers/Task/TaskReadOnly'));
 const EditCustomTask = React.lazy(() => import('../containers/Task/EditCustomTask'));
 const TaskAbandon = React.lazy(() => import('../containers/Task/TaskAbandon'));
 const EditCustomTaskUpdate = React.lazy(() => import('../containers/Task/EditCustomTaskUpdate'));
-const TaskTransplantMethod = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
+const TaskTransplantMethod = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
 );
-const TaskBedMethod = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
+const TaskBedMethod = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
 );
-const TaskBedGuidance = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
+const TaskBedGuidance = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
 );
-const TaskRowMethod = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
+const TaskRowMethod = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
 );
-const TaskRowGuidance = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
+const TaskRowGuidance = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
 );
-const TaskContainerMethod = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
+const TaskContainerMethod = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
 );
 const Notification = React.lazy(() => import('../containers/Notification'));
-const NotificationReadOnly = React.lazy(() =>
-  import('../containers/Notification/NotificationReadOnly'),
+const NotificationReadOnly = React.lazy(
+  () => import('../containers/Notification/NotificationReadOnly'),
 );
-const UnknownRecord = React.lazy(() =>
-  import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
+const UnknownRecord = React.lazy(
+  () => import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
 );
 
 const Routes = ({ isCompactSideMenu, isFeedbackSurveyOpen, setFeedbackSurveyOpen }) => {
@@ -533,6 +541,7 @@ const Routes = ({ isCompactSideMenu, isFeedbackSurveyOpen, setFeedbackSurveyOpen
             <Route path="/create_location/fence" exact component={PostFenceForm} />
             <Route path="/create_location/buffer_zone" exact component={PostBufferZoneForm} />
             <Route path="/create_location/watercourse" exact component={PostWatercourseForm} />
+            <Route path="/create_location/sensor" exact component={PostSensorForm} />
             <Route path="/farm_site_boundary/:location_id" component={FarmSiteBoundaryDetails} />
             <Route path="/barn/:location_id" component={BarnDetails} />
             <Route path="/natural_area/:location_id" component={NaturalAreaDetails} />

From 269011faab32747cb938c92b80f8ddf4bd9b50c8 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Tue, 21 Jan 2025 12:53:46 -0800
Subject: [PATCH 13/25] LF-4631 Add translation

---
 packages/webapp/public/locales/en/translation.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webapp/public/locales/en/translation.json b/packages/webapp/public/locales/en/translation.json
index 9378779763..8c45b6925a 100644
--- a/packages/webapp/public/locales/en/translation.json
+++ b/packages/webapp/public/locales/en/translation.json
@@ -1782,6 +1782,7 @@
     "DAYS_AGO": "{{time}} day(s) ago",
     "DEPTH": "Depth",
     "DETAIL": {
+      "ADD_SENSORS": "Add sensors",
       "BRAND": "Brand",
       "BRAND_TOOLTIP": "Brands that LiteFarm can integrate with are shown below. If you would no longer like to use this sensor brand, try retiring this sensor instead.",
       "DEPTH": "Depth",

From 80fbb4ca7828a76fb46285e0a43c001ee89dcd6d Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 22 Jan 2025 11:16:05 -0800
Subject: [PATCH 14/25] LF-4631 Add missing parameter to onContinueAction in
 WithStepperProgressBar

---
 .../components/Form/ContextForm/WithStepperProgressBar.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index 3670603106..21372885a5 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -38,7 +38,7 @@ interface WithStepperProgressBarProps {
   steps: {
     formContent: ReactNode;
     title: string;
-    onContinueAction?: () => Promise<void>;
+    onContinueAction?: (values: any) => Promise<void>;
     dataName?: string;
   }[];
   activeStepIndex: number;
@@ -147,7 +147,7 @@ export const WithStepperProgressBar = ({
       setIsLoading(true);
       try {
         // Execute the custom action for the current step before proceeding to the next one
-        await onContinueAction();
+        await onContinueAction(getValues());
       } catch (error) {
         console.error(error);
         setIsLoading(false);

From 0e815c02921fe76cd92b8f50f82e569800b3fc5d Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 22 Jan 2025 11:17:23 -0800
Subject: [PATCH 15/25] LF-4631 Add background color to the sensor addition
 form

---
 .../PointDetails/SensorDetail/v2/styles.module.scss              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss
index 2a79ac00a5..5d987e3963 100644
--- a/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss
+++ b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss
@@ -15,4 +15,5 @@
 
 .formWrapper {
   height: 100%;
+  background-color: var(--White);
 }

From 390c3ccff7375587e737a10e786f78c928612f2d Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 27 Jan 2025 11:36:47 -0800
Subject: [PATCH 16/25] LF-4631 Reformat routes file

---
 packages/webapp/src/routes/index.jsx | 209 +++++++++++++--------------
 1 file changed, 102 insertions(+), 107 deletions(-)

diff --git a/packages/webapp/src/routes/index.jsx b/packages/webapp/src/routes/index.jsx
index 2ee0984296..be76e6eff1 100644
--- a/packages/webapp/src/routes/index.jsx
+++ b/packages/webapp/src/routes/index.jsx
@@ -54,87 +54,85 @@ const Prices = React.lazy(() => import('../containers/Insights/Prices'));
 const ExpiredTokenScreen = React.lazy(() => import('../containers/ExpiredTokenScreen'));
 const Map = React.lazy(() => import('../containers/Map'));
 const MapVideo = React.lazy(() => import('../components/Map/Videos'));
-const PostFarmSiteBoundaryForm = React.lazy(
-  () =>
-    import(
-      '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
-    ),
+const PostFarmSiteBoundaryForm = React.lazy(() =>
+  import(
+    '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
+  ),
 );
 const FarmSiteBoundaryDetails = React.lazy(() => import('./FarmSiteBoundaryDetailsRoutes'));
 
-const PostFieldForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
+const PostFieldForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
 );
 const FieldDetails = React.lazy(() => import('./FieldDetailsRoutes'));
 
-const PostGardenForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
+const PostGardenForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
 );
 const GardenDetails = React.lazy(() => import('./GardenDetailsRoutes'));
 
-const PostGateForm = React.lazy(
-  () => import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
+const PostGateForm = React.lazy(() =>
+  import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
 );
 const GateDetails = React.lazy(() => import('./GateDetailsRoutes'));
 
-const PostWaterValveForm = React.lazy(
-  () => import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
+const PostWaterValveForm = React.lazy(() =>
+  import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
 );
 const WaterValveDetails = React.lazy(() => import('./WaterValveDetailsRoutes'));
-const EditSensor = React.lazy(
-  () => import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
+const EditSensor = React.lazy(() =>
+  import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
 );
 
-const PostBarnForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
+const PostBarnForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
 );
 const BarnDetails = React.lazy(() => import('./BarnDetailsRoutes'));
 
-const PostNaturalAreaForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
+const PostNaturalAreaForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
 );
 const NaturalAreaDetails = React.lazy(() => import('./NaturalAreaDetailsRoutes'));
 
-const PostSurfaceWaterForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
+const PostSurfaceWaterForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
 );
 const SurfaceWaterDetails = React.lazy(() => import('./SurfaceWaterDetailsRoutes'));
 
-const PostResidenceForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
+const PostResidenceForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
 );
 const ResidenceDetails = React.lazy(() => import('./ResidenceDetailsRoutes'));
 
-const PostCeremonialForm = React.lazy(
-  () =>
-    import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
+const PostCeremonialForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
 );
 const CeremonialAreaDetails = React.lazy(() => import('./CeremonialAreaDetailsRoutes'));
 
-const PostGreenhouseForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
+const PostGreenhouseForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
 );
 const GreenhouseDetails = React.lazy(() => import('./GreenhouseDetailsRoutes'));
 
 const CropManagement = React.lazy(() => import('../containers/Crop/CropManagement'));
 const CropDetail = React.lazy(() => import('../containers/Crop/CropDetail/index'));
 
-const PostFenceForm = React.lazy(
-  () => import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
+const PostFenceForm = React.lazy(() =>
+  import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
 );
 const FenceDetails = React.lazy(() => import('./FenceDetailsRoutes'));
 
-const PostBufferZoneForm = React.lazy(
-  () => import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
+const PostBufferZoneForm = React.lazy(() =>
+  import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
 );
 const BufferZoneDetails = React.lazy(() => import('./BufferZoneDetailsRoutes'));
 
-const PostWatercourseForm = React.lazy(
-  () => import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
+const PostWatercourseForm = React.lazy(() =>
+  import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
 );
 const WatercourseDetails = React.lazy(() => import('./WatercourseDetailsRoutes'));
-const PostSensorForm = React.lazy(
-  () => import('../containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor'),
+const PostSensorForm = React.lazy(() =>
+  import('../containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor'),
 );
 const SensorDetails = React.lazy(() => import('./SensorDetailsRoutes'));
 
@@ -144,34 +142,34 @@ const AddCrop = React.lazy(() => import('../containers/AddCropVariety/AddCropVar
 const EditCrop = React.lazy(() => import('../containers/EditCropVariety'));
 const ComplianceInfo = React.lazy(() => import('../containers/AddCropVariety/ComplianceInfo'));
 const AddNewCrop = React.lazy(() => import('../containers/AddNewCrop'));
-const PlantingLocation = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/PlantingLocation'),
+const PlantingLocation = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/PlantingLocation'),
 );
 const Transplant = React.lazy(() => import('../containers/Crop/AddManagementPlan/Transplant'));
 const PlantingDate = React.lazy(() => import('../containers/Crop/AddManagementPlan/PlantingDate'));
-const PlantingMethod = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/PlantingMethod'),
+const PlantingMethod = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/PlantingMethod'),
 );
-const PlantInContainer = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/PlantInContainer'),
+const PlantInContainer = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/PlantInContainer'),
 );
-const PlantBroadcast = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
+const PlantBroadcast = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
 );
 const BedPlan = React.lazy(() => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlan'));
-const BedPlanGuidance = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
+const BedPlanGuidance = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
 );
-const ManagementPlanName = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
+const ManagementPlanName = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
 );
 const RowMethod = React.lazy(() => import('../containers/Crop/AddManagementPlan/RowMethod'));
-const RowMethodGuidance = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
+const RowMethodGuidance = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
 );
 
-const PlantedAlready = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/PlantedAlready'),
+const PlantedAlready = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/PlantedAlready'),
 );
 
 const Documents = React.lazy(() => import('../containers/Documents'));
@@ -180,63 +178,60 @@ const EditDocument = React.lazy(() => import('../containers/Documents/Edit'));
 
 const AddDocument = React.lazy(() => import('../containers/Documents/Add'));
 const MainDocument = React.lazy(() => import('../containers/Documents/Main'));
-const CertificationReportingPeriod = React.lazy(
-  () => import('../containers/Certifications/ReportingPeriod'),
+const CertificationReportingPeriod = React.lazy(() =>
+  import('../containers/Certifications/ReportingPeriod'),
 );
 const CertificationSurvey = React.lazy(() => import('../containers/Certifications/Survey'));
 
-const InterestedOrganic = React.lazy(
-  () => import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
+const InterestedOrganic = React.lazy(() =>
+  import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
 );
-const CertificationSelection = React.lazy(
-  () =>
-    import(
-      '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
-    ),
+const CertificationSelection = React.lazy(() =>
+  import(
+    '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
+  ),
 );
 
-const CertifierSelectionMenu = React.lazy(
-  () =>
-    import(
-      '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
-    ),
+const CertifierSelectionMenu = React.lazy(() =>
+  import(
+    '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
+  ),
 );
 
-const SetCertificationSummary = React.lazy(
-  () =>
-    import(
-      '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
-    ),
+const SetCertificationSummary = React.lazy(() =>
+  import(
+    '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
+  ),
 );
 
-const RequestCertifier = React.lazy(
-  () => import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
+const RequestCertifier = React.lazy(() =>
+  import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
 );
-const ViewCertification = React.lazy(
-  () => import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
+const ViewCertification = React.lazy(() =>
+  import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
 );
 
 const RenderSurvey = React.lazy(() => import('../containers/RenderSurvey/RenderSurvey'));
 const ExportDownload = React.lazy(() => import('../containers/ExportDownload'));
 
-const ManagementTasks = React.lazy(
-  () => import('../containers/Crop/ManagementDetail/ManagementTasks'),
+const ManagementTasks = React.lazy(() =>
+  import('../containers/Crop/ManagementDetail/ManagementTasks'),
 );
-const ManagementDetails = React.lazy(
-  () => import('../containers/Crop/ManagementDetail/ManagementDetails'),
+const ManagementDetails = React.lazy(() =>
+  import('../containers/Crop/ManagementDetail/ManagementDetails'),
 );
-const EditManagementDetails = React.lazy(
-  () => import('../containers/Crop/ManagementDetail/EditManagementDetails'),
+const EditManagementDetails = React.lazy(() =>
+  import('../containers/Crop/ManagementDetail/EditManagementDetails'),
 );
-const CompleteManagementPlan = React.lazy(
-  () => import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
+const CompleteManagementPlan = React.lazy(() =>
+  import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
 );
-const AbandonManagementPlan = React.lazy(
-  () => import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
+const AbandonManagementPlan = React.lazy(() =>
+  import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
 );
 const RepeatCropPlan = React.lazy(() => import('../containers/Crop/RepeatCropPlan'));
-const RepeatCropPlanConfirmation = React.lazy(
-  () => import('../containers/Crop/RepeatCropPlan/Confirmation'),
+const RepeatCropPlanConfirmation = React.lazy(() =>
+  import('../containers/Crop/RepeatCropPlan/Confirmation'),
 );
 
 const TaskAssignment = React.lazy(() => import('../containers/Task/TaskAssignment'));
@@ -250,41 +245,41 @@ const Tasks = React.lazy(() => import('../containers/Task'));
 const ManageCustomTasks = React.lazy(() => import('../containers/Task/ManageCustomTasks'));
 const AddCustomTask = React.lazy(() => import('../containers/Task/AddCustomTask'));
 const TaskComplete = React.lazy(() => import('../containers/Task/TaskComplete'));
-const HarvestCompleteQuantity = React.lazy(
-  () => import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
+const HarvestCompleteQuantity = React.lazy(() =>
+  import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
 );
-const HarvestUses = React.lazy(
-  () => import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
+const HarvestUses = React.lazy(() =>
+  import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
 );
 const TaskCompleteStepOne = React.lazy(() => import('../containers/Task/TaskComplete/StepOne'));
 const TaskReadOnly = React.lazy(() => import('../containers/Task/TaskReadOnly'));
 const EditCustomTask = React.lazy(() => import('../containers/Task/EditCustomTask'));
 const TaskAbandon = React.lazy(() => import('../containers/Task/TaskAbandon'));
 const EditCustomTaskUpdate = React.lazy(() => import('../containers/Task/EditCustomTaskUpdate'));
-const TaskTransplantMethod = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
+const TaskTransplantMethod = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
 );
-const TaskBedMethod = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
+const TaskBedMethod = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
 );
-const TaskBedGuidance = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
+const TaskBedGuidance = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
 );
-const TaskRowMethod = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
+const TaskRowMethod = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
 );
-const TaskRowGuidance = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
+const TaskRowGuidance = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
 );
-const TaskContainerMethod = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
+const TaskContainerMethod = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
 );
 const Notification = React.lazy(() => import('../containers/Notification'));
-const NotificationReadOnly = React.lazy(
-  () => import('../containers/Notification/NotificationReadOnly'),
+const NotificationReadOnly = React.lazy(() =>
+  import('../containers/Notification/NotificationReadOnly'),
 );
-const UnknownRecord = React.lazy(
-  () => import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
+const UnknownRecord = React.lazy(() =>
+  import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
 );
 
 const Routes = ({ isCompactSideMenu, isFeedbackSurveyOpen, setFeedbackSurveyOpen }) => {

From ea21e60f764cc89d71aee47ce81dfe319fe3e9ad Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 27 Jan 2025 11:40:52 -0800
Subject: [PATCH 17/25] LF-4631 Add PostSensorForm route for manager and EO

---
 packages/webapp/src/routes/index.jsx | 210 ++++++++++++++-------------
 1 file changed, 108 insertions(+), 102 deletions(-)

diff --git a/packages/webapp/src/routes/index.jsx b/packages/webapp/src/routes/index.jsx
index be76e6eff1..a5183cccfe 100644
--- a/packages/webapp/src/routes/index.jsx
+++ b/packages/webapp/src/routes/index.jsx
@@ -54,85 +54,87 @@ const Prices = React.lazy(() => import('../containers/Insights/Prices'));
 const ExpiredTokenScreen = React.lazy(() => import('../containers/ExpiredTokenScreen'));
 const Map = React.lazy(() => import('../containers/Map'));
 const MapVideo = React.lazy(() => import('../components/Map/Videos'));
-const PostFarmSiteBoundaryForm = React.lazy(() =>
-  import(
-    '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
-  ),
+const PostFarmSiteBoundaryForm = React.lazy(
+  () =>
+    import(
+      '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
+    ),
 );
 const FarmSiteBoundaryDetails = React.lazy(() => import('./FarmSiteBoundaryDetailsRoutes'));
 
-const PostFieldForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
+const PostFieldForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
 );
 const FieldDetails = React.lazy(() => import('./FieldDetailsRoutes'));
 
-const PostGardenForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
+const PostGardenForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
 );
 const GardenDetails = React.lazy(() => import('./GardenDetailsRoutes'));
 
-const PostGateForm = React.lazy(() =>
-  import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
+const PostGateForm = React.lazy(
+  () => import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
 );
 const GateDetails = React.lazy(() => import('./GateDetailsRoutes'));
 
-const PostWaterValveForm = React.lazy(() =>
-  import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
+const PostWaterValveForm = React.lazy(
+  () => import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
 );
 const WaterValveDetails = React.lazy(() => import('./WaterValveDetailsRoutes'));
-const EditSensor = React.lazy(() =>
-  import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
+const EditSensor = React.lazy(
+  () => import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
 );
 
-const PostBarnForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
+const PostBarnForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
 );
 const BarnDetails = React.lazy(() => import('./BarnDetailsRoutes'));
 
-const PostNaturalAreaForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
+const PostNaturalAreaForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
 );
 const NaturalAreaDetails = React.lazy(() => import('./NaturalAreaDetailsRoutes'));
 
-const PostSurfaceWaterForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
+const PostSurfaceWaterForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
 );
 const SurfaceWaterDetails = React.lazy(() => import('./SurfaceWaterDetailsRoutes'));
 
-const PostResidenceForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
+const PostResidenceForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
 );
 const ResidenceDetails = React.lazy(() => import('./ResidenceDetailsRoutes'));
 
-const PostCeremonialForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
+const PostCeremonialForm = React.lazy(
+  () =>
+    import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
 );
 const CeremonialAreaDetails = React.lazy(() => import('./CeremonialAreaDetailsRoutes'));
 
-const PostGreenhouseForm = React.lazy(() =>
-  import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
+const PostGreenhouseForm = React.lazy(
+  () => import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
 );
 const GreenhouseDetails = React.lazy(() => import('./GreenhouseDetailsRoutes'));
 
 const CropManagement = React.lazy(() => import('../containers/Crop/CropManagement'));
 const CropDetail = React.lazy(() => import('../containers/Crop/CropDetail/index'));
 
-const PostFenceForm = React.lazy(() =>
-  import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
+const PostFenceForm = React.lazy(
+  () => import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
 );
 const FenceDetails = React.lazy(() => import('./FenceDetailsRoutes'));
 
-const PostBufferZoneForm = React.lazy(() =>
-  import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
+const PostBufferZoneForm = React.lazy(
+  () => import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
 );
 const BufferZoneDetails = React.lazy(() => import('./BufferZoneDetailsRoutes'));
 
-const PostWatercourseForm = React.lazy(() =>
-  import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
+const PostWatercourseForm = React.lazy(
+  () => import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
 );
 const WatercourseDetails = React.lazy(() => import('./WatercourseDetailsRoutes'));
-const PostSensorForm = React.lazy(() =>
-  import('../containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor'),
+const PostSensorForm = React.lazy(
+  () => import('../containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor'),
 );
 const SensorDetails = React.lazy(() => import('./SensorDetailsRoutes'));
 
@@ -142,34 +144,34 @@ const AddCrop = React.lazy(() => import('../containers/AddCropVariety/AddCropVar
 const EditCrop = React.lazy(() => import('../containers/EditCropVariety'));
 const ComplianceInfo = React.lazy(() => import('../containers/AddCropVariety/ComplianceInfo'));
 const AddNewCrop = React.lazy(() => import('../containers/AddNewCrop'));
-const PlantingLocation = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/PlantingLocation'),
+const PlantingLocation = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/PlantingLocation'),
 );
 const Transplant = React.lazy(() => import('../containers/Crop/AddManagementPlan/Transplant'));
 const PlantingDate = React.lazy(() => import('../containers/Crop/AddManagementPlan/PlantingDate'));
-const PlantingMethod = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/PlantingMethod'),
+const PlantingMethod = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/PlantingMethod'),
 );
-const PlantInContainer = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/PlantInContainer'),
+const PlantInContainer = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/PlantInContainer'),
 );
-const PlantBroadcast = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
+const PlantBroadcast = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
 );
 const BedPlan = React.lazy(() => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlan'));
-const BedPlanGuidance = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
+const BedPlanGuidance = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
 );
-const ManagementPlanName = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
+const ManagementPlanName = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
 );
 const RowMethod = React.lazy(() => import('../containers/Crop/AddManagementPlan/RowMethod'));
-const RowMethodGuidance = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
+const RowMethodGuidance = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
 );
 
-const PlantedAlready = React.lazy(() =>
-  import('../containers/Crop/AddManagementPlan/PlantedAlready'),
+const PlantedAlready = React.lazy(
+  () => import('../containers/Crop/AddManagementPlan/PlantedAlready'),
 );
 
 const Documents = React.lazy(() => import('../containers/Documents'));
@@ -178,60 +180,63 @@ const EditDocument = React.lazy(() => import('../containers/Documents/Edit'));
 
 const AddDocument = React.lazy(() => import('../containers/Documents/Add'));
 const MainDocument = React.lazy(() => import('../containers/Documents/Main'));
-const CertificationReportingPeriod = React.lazy(() =>
-  import('../containers/Certifications/ReportingPeriod'),
+const CertificationReportingPeriod = React.lazy(
+  () => import('../containers/Certifications/ReportingPeriod'),
 );
 const CertificationSurvey = React.lazy(() => import('../containers/Certifications/Survey'));
 
-const InterestedOrganic = React.lazy(() =>
-  import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
+const InterestedOrganic = React.lazy(
+  () => import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
 );
-const CertificationSelection = React.lazy(() =>
-  import(
-    '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
-  ),
+const CertificationSelection = React.lazy(
+  () =>
+    import(
+      '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
+    ),
 );
 
-const CertifierSelectionMenu = React.lazy(() =>
-  import(
-    '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
-  ),
+const CertifierSelectionMenu = React.lazy(
+  () =>
+    import(
+      '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
+    ),
 );
 
-const SetCertificationSummary = React.lazy(() =>
-  import(
-    '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
-  ),
+const SetCertificationSummary = React.lazy(
+  () =>
+    import(
+      '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
+    ),
 );
 
-const RequestCertifier = React.lazy(() =>
-  import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
+const RequestCertifier = React.lazy(
+  () => import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
 );
-const ViewCertification = React.lazy(() =>
-  import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
+const ViewCertification = React.lazy(
+  () => import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
 );
 
 const RenderSurvey = React.lazy(() => import('../containers/RenderSurvey/RenderSurvey'));
 const ExportDownload = React.lazy(() => import('../containers/ExportDownload'));
 
-const ManagementTasks = React.lazy(() =>
-  import('../containers/Crop/ManagementDetail/ManagementTasks'),
+const ManagementTasks = React.lazy(
+  () => import('../containers/Crop/ManagementDetail/ManagementTasks'),
 );
-const ManagementDetails = React.lazy(() =>
-  import('../containers/Crop/ManagementDetail/ManagementDetails'),
+const ManagementDetails = React.lazy(
+  () => import('../containers/Crop/ManagementDetail/ManagementDetails'),
 );
-const EditManagementDetails = React.lazy(() =>
-  import('../containers/Crop/ManagementDetail/EditManagementDetails'),
+const EditManagementDetails = React.lazy(
+  () => import('../containers/Crop/ManagementDetail/EditManagementDetails'),
 );
-const CompleteManagementPlan = React.lazy(() =>
-  import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
+const CompleteManagementPlan = React.lazy(
+  () => import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
 );
-const AbandonManagementPlan = React.lazy(() =>
-  import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
+const AbandonManagementPlan = React.lazy(
+  () => import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
 );
 const RepeatCropPlan = React.lazy(() => import('../containers/Crop/RepeatCropPlan'));
-const RepeatCropPlanConfirmation = React.lazy(() =>
-  import('../containers/Crop/RepeatCropPlan/Confirmation'),
+const RepeatCropPlanConfirmation = React.lazy(
+  () => import('../containers/Crop/RepeatCropPlan/Confirmation'),
 );
 
 const TaskAssignment = React.lazy(() => import('../containers/Task/TaskAssignment'));
@@ -245,41 +250,41 @@ const Tasks = React.lazy(() => import('../containers/Task'));
 const ManageCustomTasks = React.lazy(() => import('../containers/Task/ManageCustomTasks'));
 const AddCustomTask = React.lazy(() => import('../containers/Task/AddCustomTask'));
 const TaskComplete = React.lazy(() => import('../containers/Task/TaskComplete'));
-const HarvestCompleteQuantity = React.lazy(() =>
-  import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
+const HarvestCompleteQuantity = React.lazy(
+  () => import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
 );
-const HarvestUses = React.lazy(() =>
-  import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
+const HarvestUses = React.lazy(
+  () => import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
 );
 const TaskCompleteStepOne = React.lazy(() => import('../containers/Task/TaskComplete/StepOne'));
 const TaskReadOnly = React.lazy(() => import('../containers/Task/TaskReadOnly'));
 const EditCustomTask = React.lazy(() => import('../containers/Task/EditCustomTask'));
 const TaskAbandon = React.lazy(() => import('../containers/Task/TaskAbandon'));
 const EditCustomTaskUpdate = React.lazy(() => import('../containers/Task/EditCustomTaskUpdate'));
-const TaskTransplantMethod = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
+const TaskTransplantMethod = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
 );
-const TaskBedMethod = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
+const TaskBedMethod = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
 );
-const TaskBedGuidance = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
+const TaskBedGuidance = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
 );
-const TaskRowMethod = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
+const TaskRowMethod = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
 );
-const TaskRowGuidance = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
+const TaskRowGuidance = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
 );
-const TaskContainerMethod = React.lazy(() =>
-  import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
+const TaskContainerMethod = React.lazy(
+  () => import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
 );
 const Notification = React.lazy(() => import('../containers/Notification'));
-const NotificationReadOnly = React.lazy(() =>
-  import('../containers/Notification/NotificationReadOnly'),
+const NotificationReadOnly = React.lazy(
+  () => import('../containers/Notification/NotificationReadOnly'),
 );
-const UnknownRecord = React.lazy(() =>
-  import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
+const UnknownRecord = React.lazy(
+  () => import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
 );
 
 const Routes = ({ isCompactSideMenu, isFeedbackSurveyOpen, setFeedbackSurveyOpen }) => {
@@ -821,6 +826,7 @@ const Routes = ({ isCompactSideMenu, isFeedbackSurveyOpen, setFeedbackSurveyOpen
             <Route path="/create_location/fence" exact component={PostFenceForm} />
             <Route path="/create_location/buffer_zone" exact component={PostBufferZoneForm} />
             <Route path="/create_location/watercourse" exact component={PostWatercourseForm} />
+            <Route path="/create_location/sensor" exact component={PostSensorForm} />
             <Route path="/farm_site_boundary/:location_id" component={FarmSiteBoundaryDetails} />
             <Route path="/barn/:location_id" component={BarnDetails} />
             <Route path="/natural_area/:location_id" component={NaturalAreaDetails} />

From d9b34a976dbb68cdf248083b9c4dc2b5449beccd Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 27 Jan 2025 11:46:44 -0800
Subject: [PATCH 18/25] LF-4631 Add back button background color (transparent)

---
 .../webapp/src/components/Form/ContextForm/styles.module.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webapp/src/components/Form/ContextForm/styles.module.scss b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
index 910251d0d4..0acf48f762 100644
--- a/packages/webapp/src/components/Form/ContextForm/styles.module.scss
+++ b/packages/webapp/src/components/Form/ContextForm/styles.module.scss
@@ -71,6 +71,7 @@
     padding: 0;
     min-width: 24px;
     min-height: 24px;
+    background-color: transparent;
 
     svg {
       width: 24px;

From 03346beb458dbbc3c5461faf70be9f1a543a4fcf Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Mon, 27 Jan 2025 11:58:49 -0800
Subject: [PATCH 19/25] LF-4631 Reformat routes file

---
 packages/webapp/src/routes/index.jsx | 209 +++++++++++++--------------
 1 file changed, 102 insertions(+), 107 deletions(-)

diff --git a/packages/webapp/src/routes/index.jsx b/packages/webapp/src/routes/index.jsx
index a5183cccfe..7df29c0c11 100644
--- a/packages/webapp/src/routes/index.jsx
+++ b/packages/webapp/src/routes/index.jsx
@@ -54,87 +54,85 @@ const Prices = React.lazy(() => import('../containers/Insights/Prices'));
 const ExpiredTokenScreen = React.lazy(() => import('../containers/ExpiredTokenScreen'));
 const Map = React.lazy(() => import('../containers/Map'));
 const MapVideo = React.lazy(() => import('../components/Map/Videos'));
-const PostFarmSiteBoundaryForm = React.lazy(
-  () =>
-    import(
-      '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
-    ),
+const PostFarmSiteBoundaryForm = React.lazy(() =>
+  import(
+    '../containers/LocationDetails/AreaDetails/FarmSiteBoundaryDetailForm/PostFarmSiteBoundary'
+  ),
 );
 const FarmSiteBoundaryDetails = React.lazy(() => import('./FarmSiteBoundaryDetailsRoutes'));
 
-const PostFieldForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
+const PostFieldForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/FieldDetailForm/PostField'),
 );
 const FieldDetails = React.lazy(() => import('./FieldDetailsRoutes'));
 
-const PostGardenForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
+const PostGardenForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/GardenDetailForm/PostGarden'),
 );
 const GardenDetails = React.lazy(() => import('./GardenDetailsRoutes'));
 
-const PostGateForm = React.lazy(
-  () => import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
+const PostGateForm = React.lazy(() =>
+  import('../containers/LocationDetails/PointDetails/GateDetailForm/PostGate'),
 );
 const GateDetails = React.lazy(() => import('./GateDetailsRoutes'));
 
-const PostWaterValveForm = React.lazy(
-  () => import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
+const PostWaterValveForm = React.lazy(() =>
+  import('../containers/LocationDetails/PointDetails/WaterValveDetailForm/PostWaterValve'),
 );
 const WaterValveDetails = React.lazy(() => import('./WaterValveDetailsRoutes'));
-const EditSensor = React.lazy(
-  () => import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
+const EditSensor = React.lazy(() =>
+  import('../containers/LocationDetails/PointDetails/SensorDetail/EditSensor'),
 );
 
-const PostBarnForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
+const PostBarnForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/BarnDetailForm/PostBarn'),
 );
 const BarnDetails = React.lazy(() => import('./BarnDetailsRoutes'));
 
-const PostNaturalAreaForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
+const PostNaturalAreaForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/NaturalAreaDetailForm/PostNaturalArea'),
 );
 const NaturalAreaDetails = React.lazy(() => import('./NaturalAreaDetailsRoutes'));
 
-const PostSurfaceWaterForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
+const PostSurfaceWaterForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/SurfaceWaterDetailForm/PostSurfaceWater'),
 );
 const SurfaceWaterDetails = React.lazy(() => import('./SurfaceWaterDetailsRoutes'));
 
-const PostResidenceForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
+const PostResidenceForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/ResidenceDetailForm/PostResidence'),
 );
 const ResidenceDetails = React.lazy(() => import('./ResidenceDetailsRoutes'));
 
-const PostCeremonialForm = React.lazy(
-  () =>
-    import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
+const PostCeremonialForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/CeremonialAreaDetailForm/PostCeremonialArea'),
 );
 const CeremonialAreaDetails = React.lazy(() => import('./CeremonialAreaDetailsRoutes'));
 
-const PostGreenhouseForm = React.lazy(
-  () => import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
+const PostGreenhouseForm = React.lazy(() =>
+  import('../containers/LocationDetails/AreaDetails/GreenhouseDetailForm/PostGreenhouse'),
 );
 const GreenhouseDetails = React.lazy(() => import('./GreenhouseDetailsRoutes'));
 
 const CropManagement = React.lazy(() => import('../containers/Crop/CropManagement'));
 const CropDetail = React.lazy(() => import('../containers/Crop/CropDetail/index'));
 
-const PostFenceForm = React.lazy(
-  () => import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
+const PostFenceForm = React.lazy(() =>
+  import('../containers/LocationDetails/LineDetails/FenceDetailForm/PostFence'),
 );
 const FenceDetails = React.lazy(() => import('./FenceDetailsRoutes'));
 
-const PostBufferZoneForm = React.lazy(
-  () => import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
+const PostBufferZoneForm = React.lazy(() =>
+  import('../containers/LocationDetails/LineDetails/BufferZoneDetailForm/PostBufferZone'),
 );
 const BufferZoneDetails = React.lazy(() => import('./BufferZoneDetailsRoutes'));
 
-const PostWatercourseForm = React.lazy(
-  () => import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
+const PostWatercourseForm = React.lazy(() =>
+  import('../containers/LocationDetails/LineDetails/WatercourseDetailForm/PostWatercourse'),
 );
 const WatercourseDetails = React.lazy(() => import('./WatercourseDetailsRoutes'));
-const PostSensorForm = React.lazy(
-  () => import('../containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor'),
+const PostSensorForm = React.lazy(() =>
+  import('../containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor'),
 );
 const SensorDetails = React.lazy(() => import('./SensorDetailsRoutes'));
 
@@ -144,34 +142,34 @@ const AddCrop = React.lazy(() => import('../containers/AddCropVariety/AddCropVar
 const EditCrop = React.lazy(() => import('../containers/EditCropVariety'));
 const ComplianceInfo = React.lazy(() => import('../containers/AddCropVariety/ComplianceInfo'));
 const AddNewCrop = React.lazy(() => import('../containers/AddNewCrop'));
-const PlantingLocation = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/PlantingLocation'),
+const PlantingLocation = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/PlantingLocation'),
 );
 const Transplant = React.lazy(() => import('../containers/Crop/AddManagementPlan/Transplant'));
 const PlantingDate = React.lazy(() => import('../containers/Crop/AddManagementPlan/PlantingDate'));
-const PlantingMethod = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/PlantingMethod'),
+const PlantingMethod = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/PlantingMethod'),
 );
-const PlantInContainer = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/PlantInContainer'),
+const PlantInContainer = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/PlantInContainer'),
 );
-const PlantBroadcast = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
+const PlantBroadcast = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/BroadcastPlan'),
 );
 const BedPlan = React.lazy(() => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlan'));
-const BedPlanGuidance = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
+const BedPlanGuidance = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/BedPlan/BedPlanGuidance'),
 );
-const ManagementPlanName = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
+const ManagementPlanName = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/ManagementPlanName'),
 );
 const RowMethod = React.lazy(() => import('../containers/Crop/AddManagementPlan/RowMethod'));
-const RowMethodGuidance = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
+const RowMethodGuidance = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/RowMethod/RowGuidance'),
 );
 
-const PlantedAlready = React.lazy(
-  () => import('../containers/Crop/AddManagementPlan/PlantedAlready'),
+const PlantedAlready = React.lazy(() =>
+  import('../containers/Crop/AddManagementPlan/PlantedAlready'),
 );
 
 const Documents = React.lazy(() => import('../containers/Documents'));
@@ -180,63 +178,60 @@ const EditDocument = React.lazy(() => import('../containers/Documents/Edit'));
 
 const AddDocument = React.lazy(() => import('../containers/Documents/Add'));
 const MainDocument = React.lazy(() => import('../containers/Documents/Main'));
-const CertificationReportingPeriod = React.lazy(
-  () => import('../containers/Certifications/ReportingPeriod'),
+const CertificationReportingPeriod = React.lazy(() =>
+  import('../containers/Certifications/ReportingPeriod'),
 );
 const CertificationSurvey = React.lazy(() => import('../containers/Certifications/Survey'));
 
-const InterestedOrganic = React.lazy(
-  () => import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
+const InterestedOrganic = React.lazy(() =>
+  import('../containers/OrganicCertifierSurvey/InterestedOrganic/UpdateInterestedOrganic'),
 );
-const CertificationSelection = React.lazy(
-  () =>
-    import(
-      '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
-    ),
+const CertificationSelection = React.lazy(() =>
+  import(
+    '../containers/OrganicCertifierSurvey/CertificationSelection/UpdateCertificationSelection'
+  ),
 );
 
-const CertifierSelectionMenu = React.lazy(
-  () =>
-    import(
-      '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
-    ),
+const CertifierSelectionMenu = React.lazy(() =>
+  import(
+    '../containers/OrganicCertifierSurvey/CertifierSelectionMenu/UpdateCertifierSelectionMenu'
+  ),
 );
 
-const SetCertificationSummary = React.lazy(
-  () =>
-    import(
-      '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
-    ),
+const SetCertificationSummary = React.lazy(() =>
+  import(
+    '../containers/OrganicCertifierSurvey/SetCertificationSummary/UpdateSetCertificationSummary'
+  ),
 );
 
-const RequestCertifier = React.lazy(
-  () => import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
+const RequestCertifier = React.lazy(() =>
+  import('../containers/OrganicCertifierSurvey/RequestCertifier/UpdateRequestCertifier'),
 );
-const ViewCertification = React.lazy(
-  () => import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
+const ViewCertification = React.lazy(() =>
+  import('../containers/OrganicCertifierSurvey/ViewCertification/ViewCertification'),
 );
 
 const RenderSurvey = React.lazy(() => import('../containers/RenderSurvey/RenderSurvey'));
 const ExportDownload = React.lazy(() => import('../containers/ExportDownload'));
 
-const ManagementTasks = React.lazy(
-  () => import('../containers/Crop/ManagementDetail/ManagementTasks'),
+const ManagementTasks = React.lazy(() =>
+  import('../containers/Crop/ManagementDetail/ManagementTasks'),
 );
-const ManagementDetails = React.lazy(
-  () => import('../containers/Crop/ManagementDetail/ManagementDetails'),
+const ManagementDetails = React.lazy(() =>
+  import('../containers/Crop/ManagementDetail/ManagementDetails'),
 );
-const EditManagementDetails = React.lazy(
-  () => import('../containers/Crop/ManagementDetail/EditManagementDetails'),
+const EditManagementDetails = React.lazy(() =>
+  import('../containers/Crop/ManagementDetail/EditManagementDetails'),
 );
-const CompleteManagementPlan = React.lazy(
-  () => import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
+const CompleteManagementPlan = React.lazy(() =>
+  import('../containers/Crop/CompleteManagementPlan/CompleteManagementPlan'),
 );
-const AbandonManagementPlan = React.lazy(
-  () => import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
+const AbandonManagementPlan = React.lazy(() =>
+  import('../containers/Crop/CompleteManagementPlan/AbandonManagementPlan'),
 );
 const RepeatCropPlan = React.lazy(() => import('../containers/Crop/RepeatCropPlan'));
-const RepeatCropPlanConfirmation = React.lazy(
-  () => import('../containers/Crop/RepeatCropPlan/Confirmation'),
+const RepeatCropPlanConfirmation = React.lazy(() =>
+  import('../containers/Crop/RepeatCropPlan/Confirmation'),
 );
 
 const TaskAssignment = React.lazy(() => import('../containers/Task/TaskAssignment'));
@@ -250,41 +245,41 @@ const Tasks = React.lazy(() => import('../containers/Task'));
 const ManageCustomTasks = React.lazy(() => import('../containers/Task/ManageCustomTasks'));
 const AddCustomTask = React.lazy(() => import('../containers/Task/AddCustomTask'));
 const TaskComplete = React.lazy(() => import('../containers/Task/TaskComplete'));
-const HarvestCompleteQuantity = React.lazy(
-  () => import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
+const HarvestCompleteQuantity = React.lazy(() =>
+  import('../containers/Task/TaskComplete/HarvestComplete/Quantity'),
 );
-const HarvestUses = React.lazy(
-  () => import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
+const HarvestUses = React.lazy(() =>
+  import('../containers/Task/TaskComplete/HarvestComplete/HarvestUses'),
 );
 const TaskCompleteStepOne = React.lazy(() => import('../containers/Task/TaskComplete/StepOne'));
 const TaskReadOnly = React.lazy(() => import('../containers/Task/TaskReadOnly'));
 const EditCustomTask = React.lazy(() => import('../containers/Task/EditCustomTask'));
 const TaskAbandon = React.lazy(() => import('../containers/Task/TaskAbandon'));
 const EditCustomTaskUpdate = React.lazy(() => import('../containers/Task/EditCustomTaskUpdate'));
-const TaskTransplantMethod = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
+const TaskTransplantMethod = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskTransplantMethod'),
 );
-const TaskBedMethod = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
+const TaskBedMethod = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskBedMethod'),
 );
-const TaskBedGuidance = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
+const TaskBedGuidance = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskBedGuidance'),
 );
-const TaskRowMethod = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
+const TaskRowMethod = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskRowMethod'),
 );
-const TaskRowGuidance = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
+const TaskRowGuidance = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskRowGuidance'),
 );
-const TaskContainerMethod = React.lazy(
-  () => import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
+const TaskContainerMethod = React.lazy(() =>
+  import('../containers/Task/TaskTransplantMethod/TaskContainerMethod'),
 );
 const Notification = React.lazy(() => import('../containers/Notification'));
-const NotificationReadOnly = React.lazy(
-  () => import('../containers/Notification/NotificationReadOnly'),
+const NotificationReadOnly = React.lazy(() =>
+  import('../containers/Notification/NotificationReadOnly'),
 );
-const UnknownRecord = React.lazy(
-  () => import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
+const UnknownRecord = React.lazy(() =>
+  import('../containers/ErrorHandler/UnknownRecord/UnknownRecord'),
 );
 
 const Routes = ({ isCompactSideMenu, isFeedbackSurveyOpen, setFeedbackSurveyOpen }) => {

From b73afaa6c9691e465bc0a566cffdf636a0a0346a Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 29 Jan 2025 12:13:42 -0800
Subject: [PATCH 20/25] LF-4631 Update WithStepperProgressBar for flexible
 header * revert the SIMPLE_HEADER variant * recieve headerComponent(defaults
 to StepperProgressBar) * update stories

---
 .../ContextForm/WithStepperProgressBar.tsx    | 41 ++++++-------------
 .../src/components/Form/ContextForm/index.tsx |  3 --
 .../ContextForm/ContextForm.stories.tsx       | 16 ++++----
 3 files changed, 21 insertions(+), 39 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index 21372885a5..6acbea8eaf 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -28,8 +28,6 @@ import FormNavigationButtons from '../FormNavigationButtons';
 import FixedHeaderContainer from '../../Animals/FixedHeaderContainer';
 import CancelFlowModal from '../../Modals/CancelFlowModal';
 import Loading from './Loading';
-import HeaderWithBackAndClose from './HeaderWithBackAndClose';
-import { Variant } from '.';
 import styles from './styles.module.scss';
 
 interface WithStepperProgressBarProps {
@@ -67,7 +65,7 @@ interface WithStepperProgressBarProps {
   setIsEditing?: React.Dispatch<React.SetStateAction<boolean>>;
   showCancelFlow?: boolean;
   setShowCancelFlow?: React.Dispatch<React.SetStateAction<boolean>>;
-  variant: Variant;
+  headerComponent?: (props: HeaderProps) => JSX.Element;
 }
 
 export const WithStepperProgressBar = ({
@@ -93,7 +91,7 @@ export const WithStepperProgressBar = ({
   setIsEditing,
   showCancelFlow,
   setShowCancelFlow,
-  variant,
+  headerComponent = StepperProgressBar,
 }: WithStepperProgressBarProps) => {
   const [transition, setTransition] = useState<{ unblock?: () => void; retry?: () => void }>({
     unblock: undefined,
@@ -194,7 +192,7 @@ export const WithStepperProgressBar = ({
       activeStep={activeStepIndex}
       onGoBack={onGoBack}
       onCancel={onCancel}
-      variant={variant}
+      headerComponent={headerComponent}
     >
       <div className={styles.contentWrapper}>{children}</div>
       {shouldShowFormNavigationButtons && (
@@ -220,44 +218,29 @@ export const WithStepperProgressBar = ({
   );
 };
 
-type StepperProgressBarWrapperProps = StepperProgressBarProps & {
-  children: ReactNode;
-  isSingleStep: boolean;
+type HeaderProps = StepperProgressBarProps & {
   onGoBack: () => void;
   onCancel: () => void;
-  variant: Variant;
+};
+
+type StepperProgressBarWrapperProps = HeaderProps & {
+  children: ReactNode;
+  isSingleStep: boolean;
+  headerComponent: (props: HeaderProps) => JSX.Element;
 };
 
 const StepperProgressBarWrapper = ({
   children,
   isSingleStep,
-  onGoBack,
-  onCancel,
-  variant,
+  headerComponent,
   ...stepperProgressBarProps
 }: StepperProgressBarWrapperProps) => {
   if (isSingleStep) {
     return <>{children}</>;
   }
 
-  if (variant === Variant.SIMPLE_HEADER) {
-    return (
-      <FixedHeaderContainer
-        header={
-          <HeaderWithBackAndClose
-            title={stepperProgressBarProps.title}
-            onGoBack={onGoBack}
-            onCancel={onCancel}
-          />
-        }
-      >
-        {children}
-      </FixedHeaderContainer>
-    );
-  }
-
   return (
-    <FixedHeaderContainer header={<StepperProgressBar {...stepperProgressBarProps} />}>
+    <FixedHeaderContainer header={headerComponent(stepperProgressBarProps)}>
       {children}
     </FixedHeaderContainer>
   );
diff --git a/packages/webapp/src/components/Form/ContextForm/index.tsx b/packages/webapp/src/components/Form/ContextForm/index.tsx
index 79efd8b9b3..9b9cdae4fb 100644
--- a/packages/webapp/src/components/Form/ContextForm/index.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/index.tsx
@@ -21,13 +21,11 @@ import { WithStepperProgressBar } from './WithStepperProgressBar';
 export enum Variant {
   PAGE_TITLE = 'page_title',
   STEPPER_PROGRESS_BAR = 'stepper_progress_bar',
-  SIMPLE_HEADER = 'simple_header',
 }
 
 const COMPONENTS = {
   [Variant.PAGE_TITLE]: (props: any) => <WithPageTitle {...props} />,
   [Variant.STEPPER_PROGRESS_BAR]: (props: any) => <WithStepperProgressBar {...props} />,
-  [Variant.SIMPLE_HEADER]: (props: any) => <WithStepperProgressBar {...props} />,
 };
 
 interface ContextFormProps {
@@ -109,7 +107,6 @@ export const ContextForm = ({
       setIsEditing={setIsEditing}
       showCancelFlow={showCancelFlow}
       setShowCancelFlow={setShowCancelFlow}
-      variant={variant}
       {...form}
       {...props}
     >
diff --git a/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx b/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
index 5e1541f98b..a08d4b6d07 100644
--- a/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
+++ b/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
@@ -17,6 +17,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { componentDecorators } from '../Pages/config/Decorators';
 import { ContextForm, Variant } from '../../components/Form/ContextForm';
 import MeatballsMenu from '../../components/Menu/MeatballsMenu';
+import PageTitleHeader from '../../components/PageTitle/v2';
 
 // https://storybook.js.org/docs/writing-stories/typescript
 const meta: Meta<typeof ContextForm> = {
@@ -137,21 +138,22 @@ export const StepperFormWithCustomActionOnContinue: Story = {
   },
 };
 
-export const SimpleTextHeader: Story = {
+export const StepperFormWithPageTitleHeader: Story = {
   args: {
     ...stepperFormCommonProps,
-    variant: Variant.SIMPLE_HEADER,
-    stepperProgressBarTitle: 'Simple Header',
+    variant: Variant.STEPPER_PROGRESS_BAR,
+    stepperProgressBarTitle: 'Page title header',
+    headerComponent: PageTitleHeader,
   },
 };
 
-export const SimpleDivHeader: Story = {
+export const StepperFormWithCustomHeader: Story = {
   args: {
     ...stepperFormCommonProps,
-    variant: Variant.SIMPLE_HEADER,
-    stepperProgressBarTitle: (
+    variant: Variant.STEPPER_PROGRESS_BAR,
+    headerComponent: () => (
       <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-        <span>Simple Header</span>
+        <span>Custom Header</span>
         <MeatballsMenu
           options={[
             { label: 'Menu 1', onClick: () => console.log('Menu 1') },

From 46a29838273957b5244687b1cc54c86ffb451373 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 29 Jan 2025 12:15:39 -0800
Subject: [PATCH 21/25] LF-4631 Update PostSensor to adjust ContextForm props

---
 .../PointDetails/SensorDetail/v2/PostSensor.tsx               | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx
index 024dc36861..3618dd8258 100644
--- a/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx
+++ b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/PostSensor.tsx
@@ -16,6 +16,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { History } from 'history';
 import { ContextForm, Variant } from '../../../../../components/Form/ContextForm';
+import PageTitle from '../../../../../components/PageTitle/v2';
 import { enqueueErrorSnackbar } from '../../../../Snackbar/snackbarSlice';
 import styles from './styles.module.scss';
 
@@ -69,9 +70,10 @@ const PostSensor = ({ history }: PostSensorProps) => {
         history={history}
         getSteps={getFormSteps}
         defaultFormValues={defaultFormValues}
-        variant={Variant.SIMPLE_HEADER}
+        variant={Variant.STEPPER_PROGRESS_BAR}
         hasSummaryWithinForm={true}
         onSave={onSave}
+        headerComponent={PageTitle}
       />
     </div>
   );

From 60407237eb63d2d89a233b30ce216baafd3d38d1 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 29 Jan 2025 12:17:02 -0800
Subject: [PATCH 22/25] LF-4631 Remove PostSensor from FULL_WIDTH_ROUTE

---
 packages/webapp/src/App.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/webapp/src/App.jsx b/packages/webapp/src/App.jsx
index e68ea49cfd..99a3375360 100644
--- a/packages/webapp/src/App.jsx
+++ b/packages/webapp/src/App.jsx
@@ -24,12 +24,12 @@ import { NotistackSnackbar } from './containers/Snackbar/NotistackSnackbar';
 import { OfflineDetector } from './containers/hooks/useOfflineDetector/OfflineDetector';
 import styles from './styles.module.scss';
 import Routes from './routes';
-import { ANIMALS_URL, MAP_URL, POST_SENSOR_URL } from './util/siteMapConstants';
+import { ANIMALS_URL, MAP_URL } from './util/siteMapConstants';
 
 function App() {
   const [isCompactSideMenu, setIsCompactSideMenu] = useState(false);
   const [isFeedbackSurveyOpen, setFeedbackSurveyOpen] = useState(false);
-  const FULL_WIDTH_ROUTES = [MAP_URL, ANIMALS_URL, POST_SENSOR_URL];
+  const FULL_WIDTH_ROUTES = [MAP_URL, ANIMALS_URL];
   const isFullWidth = FULL_WIDTH_ROUTES.some((path) => matchPath(history.location.pathname, path));
 
   return (

From b911f68a374dddcb572120bb70ea3a5a12bef267 Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 29 Jan 2025 12:19:47 -0800
Subject: [PATCH 23/25] LF-4631 Add padding to form wrapper

---
 .../PointDetails/SensorDetail/v2/styles.module.scss              | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss
index 5d987e3963..aa95ee5cc4 100644
--- a/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss
+++ b/packages/webapp/src/containers/LocationDetails/PointDetails/SensorDetail/v2/styles.module.scss
@@ -16,4 +16,5 @@
 .formWrapper {
   height: 100%;
   background-color: var(--White);
+  padding: 24px;
 }

From 9f03152f9f73d3fdb771cdf965bf65d369f51b7c Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 29 Jan 2025 14:22:35 -0800
Subject: [PATCH 24/25] LF-4631 Update WithStepperProgressBar to handle
 headerComponent null

---
 .../components/Form/ContextForm/WithStepperProgressBar.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
index 6acbea8eaf..34f4088362 100644
--- a/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
+++ b/packages/webapp/src/components/Form/ContextForm/WithStepperProgressBar.tsx
@@ -65,7 +65,7 @@ interface WithStepperProgressBarProps {
   setIsEditing?: React.Dispatch<React.SetStateAction<boolean>>;
   showCancelFlow?: boolean;
   setShowCancelFlow?: React.Dispatch<React.SetStateAction<boolean>>;
-  headerComponent?: (props: HeaderProps) => JSX.Element;
+  headerComponent?: ((props: HeaderProps) => JSX.Element) | null;
 }
 
 export const WithStepperProgressBar = ({
@@ -226,7 +226,7 @@ type HeaderProps = StepperProgressBarProps & {
 type StepperProgressBarWrapperProps = HeaderProps & {
   children: ReactNode;
   isSingleStep: boolean;
-  headerComponent: (props: HeaderProps) => JSX.Element;
+  headerComponent: ((props: HeaderProps) => JSX.Element) | null;
 };
 
 const StepperProgressBarWrapper = ({
@@ -240,7 +240,7 @@ const StepperProgressBarWrapper = ({
   }
 
   return (
-    <FixedHeaderContainer header={headerComponent(stepperProgressBarProps)}>
+    <FixedHeaderContainer header={headerComponent && headerComponent(stepperProgressBarProps)}>
       {children}
     </FixedHeaderContainer>
   );

From 421f31e19583a538abcf80658ba8c343cabdcc3c Mon Sep 17 00:00:00 2001
From: Sayaka Ono <sayaka.ono.81@gmail.com>
Date: Wed, 29 Jan 2025 14:23:27 -0800
Subject: [PATCH 25/25] LF-4631 Add story for Stepper form without header

---
 .../src/stories/ContextForm/ContextForm.stories.tsx       | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx b/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
index a08d4b6d07..34739f03c0 100644
--- a/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
+++ b/packages/webapp/src/stories/ContextForm/ContextForm.stories.tsx
@@ -165,3 +165,11 @@ export const StepperFormWithCustomHeader: Story = {
     ),
   },
 };
+
+export const StepperFormWithoutHeader: Story = {
+  args: {
+    ...stepperFormCommonProps,
+    variant: Variant.STEPPER_PROGRESS_BAR,
+    headerComponent: null,
+  },
+};